pharmacy-erp 1.0.0

package/frontend/src/components/ui/confirm-dialog.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+
+export interface ConfirmDialogProps {
+  open: boolean;
+  onConfirm: () => void;
+  onCancel: () => void;
+  title: string;
+  message: string;
+  confirmText?: string;
+  isLoading?: boolean;
+}
+
+export function ConfirmDialog({ open, onConfirm, onCancel, title, message, confirmText = 'Delete', isLoading }: ConfirmDialogProps) {
+  return (
+    <DialogPrimitive.Root open={open} onOpenChange={(isOpen) => !isOpen && onCancel()}>
+      <DialogPrimitive.Portal>
+        <DialogPrimitive.Overlay className="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" />
+        <DialogPrimitive.Content className="fixed left-[50%] top-[50%] z-50 grid w-full max-w-md translate-x-[-50%] translate-y-[-50%] gap-4 border border-gray-800 bg-[#0B1220] p-6 shadow-2xl duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-xl">
+          <div className="flex flex-col space-y-2 text-center sm:text-left">
+            <DialogPrimitive.Title className="text-lg font-semibold text-white">
+              {title}
+            </DialogPrimitive.Title>
+            <DialogPrimitive.Description className="text-sm text-gray-400">
+              {message}
+            </DialogPrimitive.Description>
+          </div>
+          <div className="flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 mt-4">
+            <button
+              type="button"
+              onClick={onCancel}
+              disabled={isLoading}
+              className="mt-2 inline-flex h-10 items-center justify-center rounded-md border border-gray-700 bg-transparent px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 disabled:opacity-50 sm:mt-0"
+            >
+              Cancel
+            </button>
+            <button
+              type="button"
+              onClick={onConfirm}
+              disabled={isLoading}
+              className="inline-flex h-10 items-center justify-center rounded-md bg-red-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 disabled:opacity-50"
+            >
+              {isLoading ? 'Processing...' : confirmText}
+            </button>
+          </div>
+        </DialogPrimitive.Content>
+      </DialogPrimitive.Portal>
+    </DialogPrimitive.Root>
+  );
+}

package/frontend/src/components/ui/input.tsx

@@ -0,0 +1,32 @@
+import { forwardRef, InputHTMLAttributes } from 'react';
+import { cn } from '@/lib/utils';
+
+export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+  error?: boolean;
+  leadingIcon?: React.ReactNode;
+}
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(
+  ({ className, error, leadingIcon, ...props }, ref) => {
+    return (
+      <div className="relative flex items-center w-full">
+        {leadingIcon && (
+          <div className="absolute left-3 text-gray-400">
+            {leadingIcon}
+          </div>
+        )}
+        <input
+          className={cn(
+            "flex h-10 w-full rounded-lg border border-border bg-background px-3 py-2 text-sm placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-brand-500 disabled:cursor-not-allowed disabled:opacity-50 transition-shadow",
+            leadingIcon && "pl-10",
+            error && "border-danger focus:ring-danger",
+            className
+          )}
+          ref={ref}
+          {...props}
+        />
+      </div>
+    );
+  }
+);
+Input.displayName = 'Input';

package/frontend/src/components/ui/notification-center.tsx

@@ -0,0 +1,228 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import * as Popover from '@radix-ui/react-popover';
+import { Bell, Info, AlertTriangle, XCircle, CheckCircle, Trash2, CheckCheck } from 'lucide-react';
+import { api } from '@/lib/api';
+import { cn, formatDate } from '@/lib/utils';
+import { useLocale, useTranslations } from 'next-intl';
+import { motion, AnimatePresence } from 'framer-motion';
+
+interface Notification {
+  id: string;
+  type: 'info' | 'warning' | 'danger' | 'success';
+  title: string;
+  title_ar?: string;
+  message: string;
+  message_ar?: string;
+  is_read: boolean;
+  created_at: string;
+}
+
+export function NotificationCenter() {
+  const [notifications, setNotifications] = useState<Notification[]>([]);
+  const [unreadCount, setUnreadCount] = useState(0);
+  const [isOpen, setIsOpen] = useState(false);
+  const locale = useLocale();
+  const t = useTranslations('Notifications');
+
+  const fetchUnreadCount = async () => {
+    try {
+      const data = await api.getUnreadNotificationCount() as { count: number };
+      setUnreadCount(data.count);
+    } catch (error) {
+      console.error('Failed to fetch unread count:', error);
+    }
+  };
+
+  const fetchNotifications = async () => {
+    try {
+      const data = await api.getNotifications() as Notification[];
+      setNotifications(data);
+    } catch (error) {
+      console.error('Failed to fetch notifications:', error);
+    }
+  };
+
+  useEffect(() => {
+    fetchUnreadCount();
+    const interval = setInterval(fetchUnreadCount, 30000); // 30s interval
+    return () => clearInterval(interval);
+  }, []);
+
+  useEffect(() => {
+    if (isOpen) {
+      fetchNotifications();
+      fetchUnreadCount();
+    }
+  }, [isOpen]);
+
+  const handleMarkAsRead = async (id: string) => {
+    try {
+      await api.markNotificationAsRead(id);
+      setNotifications((prev) =>
+        prev.map((n) => (n.id === id ? { ...n, is_read: true } : n))
+      );
+      setUnreadCount((prev) => Math.max(0, prev - 1));
+    } catch (error) {
+      console.error('Failed to mark as read:', error);
+    }
+  };
+
+  const handleMarkAllAsRead = async () => {
+    try {
+      await api.markAllNotificationsAsRead();
+      setNotifications((prev) => prev.map((n) => ({ ...n, is_read: true })));
+      setUnreadCount(0);
+    } catch (error) {
+      console.error('Failed to mark all as read:', error);
+    }
+  };
+
+  const handleDelete = async (e: React.MouseEvent, id: string) => {
+    e.stopPropagation();
+    try {
+      await api.deleteNotification(id);
+      setNotifications((prev) => {
+        const notif = prev.find((n) => n.id === id);
+        if (notif && !notif.is_read) {
+          setUnreadCount((c) => Math.max(0, c - 1));
+        }
+        return prev.filter((n) => n.id !== id);
+      });
+    } catch (error) {
+      console.error('Failed to delete notification:', error);
+    }
+  };
+
+  const getIcon = (type: Notification['type']) => {
+    switch (type) {
+      case 'info':
+        return <Info className="text-blue-500" size={20} />;
+      case 'warning':
+        return <AlertTriangle className="text-amber-500" size={20} />;
+      case 'danger':
+        return <XCircle className="text-red-500" size={20} />;
+      case 'success':
+        return <CheckCircle className="text-green-500" size={20} />;
+      default:
+        return <Info className="text-blue-500" size={20} />;
+    }
+  };
+
+  const getRelativeTime = (dateString: string) => {
+    const date = new Date(dateString);
+    const now = new Date();
+    const diffMs = now.getTime() - date.getTime();
+    const diffMins = Math.floor(diffMs / 60000);
+    const diffHrs = Math.floor(diffMins / 60);
+    const diffDays = Math.floor(diffHrs / 24);
+
+    if (diffMins < 1) return t('justNow');
+    if (diffMins < 60) return t('minutesAgo', { count: diffMins });
+    if (diffHrs < 24) return t('hoursAgo', { count: diffHrs });
+    if (diffDays < 7) return t('daysAgo', { count: diffDays });
+    
+    return formatDate(date, locale);
+  };
+
+  return (
+    <Popover.Root open={isOpen} onOpenChange={setIsOpen}>
+      <Popover.Trigger asChild>
+        <button className="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-500 relative transition-colors focus:outline-none focus:ring-2 focus:ring-brand-500/50">
+          <Bell size={20} />
+          {unreadCount > 0 && (
+            <span className="absolute top-1.5 right-1.5 min-w-[8px] h-2 px-1 text-[10px] font-bold leading-none text-white bg-danger rounded-full border border-background flex items-center justify-center">
+              {unreadCount > 9 ? '9+' : ''}
+            </span>
+          )}
+        </button>
+      </Popover.Trigger>
+
+      <AnimatePresence>
+        {isOpen && (
+          <Popover.Portal forceMount>
+            <Popover.Content
+              align="end"
+              sideOffset={8}
+              asChild
+              className="z-50 w-80 sm:w-96 rounded-xl bg-surface/95 backdrop-blur-xl border border-border shadow-2xl overflow-hidden"
+            >
+              <motion.div
+                initial={{ opacity: 0, y: 10, scale: 0.95 }}
+                animate={{ opacity: 1, y: 0, scale: 1 }}
+                exit={{ opacity: 0, y: 10, scale: 0.95 }}
+                transition={{ duration: 0.2, ease: "easeOut" }}
+              >
+                {/* Header */}
+                <div className="flex items-center justify-between p-4 border-b border-border bg-surface/50">
+                  <h3 className="font-semibold text-foreground text-lg">{t('title')}</h3>
+                  {unreadCount > 0 && (
+                    <button
+                      onClick={handleMarkAllAsRead}
+                      className="text-xs font-medium text-brand-500 hover:text-brand-600 transition-colors flex items-center gap-1"
+                    >
+                      <CheckCheck size={14} />
+                      {t('markAllAsRead')}
+                    </button>
+                  )}
+                </div>
+
+                {/* List */}
+                <div className="max-h-[400px] overflow-y-auto scrollbar-thin scrollbar-thumb-gray-300 dark:scrollbar-thumb-gray-700">
+                  {notifications.length === 0 ? (
+                    <div className="flex flex-col items-center justify-center py-12 px-4 text-center">
+                      <div className="w-16 h-16 rounded-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center mb-4 text-gray-400">
+                        <Bell size={32} />
+                      </div>
+                      <p className="text-foreground font-medium">{t('noNotifications')}</p>
+                      <p className="text-sm text-muted-foreground mt-1">{t('noNotificationsDesc')}</p>
+                    </div>
+                  ) : (
+                    <div className="divide-y divide-border">
+                      {notifications.map((notification) => (
+                        <div
+                          key={notification.id}
+                          onClick={() => !notification.is_read && handleMarkAsRead(notification.id)}
+                          className={cn(
+                            "relative group p-4 hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors cursor-pointer flex gap-3",
+                            !notification.is_read ? "bg-brand-500/5" : ""
+                          )}
+                        >
+                          <div className="flex-shrink-0 mt-1">
+                            {getIcon(notification.type)}
+                          </div>
+                          <div className="flex-1 min-w-0">
+                            <div className="flex justify-between items-start mb-1 gap-2">
+                              <h4 className={cn("text-sm font-semibold truncate", !notification.is_read ? "text-foreground" : "text-muted-foreground")}>
+                                {locale === 'ar' && notification.title_ar ? notification.title_ar : notification.title}
+                              </h4>
+                              <span className="text-[11px] text-muted-foreground whitespace-nowrap flex-shrink-0">
+                                {getRelativeTime(notification.created_at)}
+                              </span>
+                            </div>
+                            <p className="text-sm text-muted-foreground line-clamp-2 leading-snug">
+                              {locale === 'ar' && notification.message_ar ? notification.message_ar : notification.message}
+                            </p>
+                          </div>
+                          
+                          <button
+                            onClick={(e) => handleDelete(e, notification.id)}
+                            className="absolute top-4 right-4 p-1.5 rounded-md text-gray-400 hover:text-danger hover:bg-danger/10 opacity-0 group-hover:opacity-100 transition-all focus:opacity-100 rtl:right-auto rtl:left-4"
+                            aria-label={t('delete')}
+                          >
+                            <Trash2 size={16} />
+                          </button>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              </motion.div>
+            </Popover.Content>
+          </Popover.Portal>
+        )}
+      </AnimatePresence>
+    </Popover.Root>
+  );
+}

package/frontend/src/components/ui/select.tsx

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { Check, ChevronDown } from 'lucide-react';
+import { cn } from '@/lib/utils'; // Assuming cn exists, otherwise will use simple classes
+
+export interface SelectProps {
+  options: { value: string; label: string }[];
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  error?: boolean;
+  className?: string;
+}
+
+export function Select({ options, value, onChange, placeholder, disabled, error, className }: SelectProps) {
+  return (
+    <SelectPrimitive.Root value={value} onValueChange={onChange} disabled={disabled}>
+      <SelectPrimitive.Trigger
+        className={cn(
+          "flex h-10 w-full items-center justify-between rounded-lg border bg-background px-3 py-2 text-sm text-foreground ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-brand-500 disabled:cursor-not-allowed disabled:opacity-50",
+          error ? "border-red-500 focus:ring-red-500" : "border-border",
+          className
+        )}
+      >
+        <SelectPrimitive.Value placeholder={placeholder}>
+          {value ? options.find(opt => String(opt.value) === String(value))?.label : undefined}
+        </SelectPrimitive.Value>
+        <SelectPrimitive.Icon asChild>
+          <ChevronDown className="h-4 w-4 opacity-50" />
+        </SelectPrimitive.Icon>
+      </SelectPrimitive.Trigger>
+      <SelectPrimitive.Portal>
+        <SelectPrimitive.Content
+          className="relative z-50 max-h-64 min-w-[8rem] w-[var(--radix-select-trigger-width)] overflow-hidden overflow-y-auto rounded-md border border-border bg-surface text-foreground shadow-md animate-in fade-in-80"
+          position="popper"
+          sideOffset={4}
+        >
+          <SelectPrimitive.Viewport className="p-1">
+            {options.map((option) => (
+              <SelectPrimitive.Item
+                key={option.value}
+                value={option.value}
+                className="relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-brand-500/10 focus:text-brand-500 data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
+              >
+                <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+                  <SelectPrimitive.ItemIndicator>
+                    <Check className="h-4 w-4" />
+                  </SelectPrimitive.ItemIndicator>
+                </span>
+                <SelectPrimitive.ItemText>{option.label}</SelectPrimitive.ItemText>
+              </SelectPrimitive.Item>
+            ))}
+          </SelectPrimitive.Viewport>
+        </SelectPrimitive.Content>
+      </SelectPrimitive.Portal>
+    </SelectPrimitive.Root>
+  );
+}

package/frontend/src/components/ui/sidebar.tsx

@@ -0,0 +1,91 @@
+'use client';
+import { useTranslations } from 'next-intl';
+import Image from 'next/image';
+import { useAppStore } from '@/store/app-store';
+import { Link, usePathname } from '@/i18n/routing';
+import { cn } from '@/lib/utils';
+import { 
+  LayoutDashboard, 
+  MonitorPlay, 
+  Package, 
+  ShoppingCart,
+  Users,
+  FileText,
+  Settings,
+  Pill,
+  ChevronLeft,
+  ChevronRight
+} from 'lucide-react';
+
+export function Sidebar() {
+  const t = useTranslations('nav');
+  const pathname = usePathname();
+  const sidebarOpen = useAppStore(state => state.sidebarOpen);
+  const sidebarCollapsed = useAppStore(state => state.sidebarCollapsed);
+  const setSidebarCollapsed = useAppStore(state => state.setSidebarCollapsed);
+
+  const navItems = [
+    { icon: LayoutDashboard, label: t('dashboard'), href: '/dashboard' },
+    { icon: MonitorPlay, label: t('pos'), href: '/pos' },
+    { icon: ShoppingCart, label: t('sales'), href: '/sales' },
+    { icon: Package, label: t('inventory'), href: '/inventory' },
+    { icon: Pill, label: t('catalog'), href: '/catalog/products' },
+    { icon: Users, label: t('customers'), href: '/customers' },
+    { icon: FileText, label: t('reports'), href: '/reports' },
+    { icon: Settings, label: t('admin'), href: '/admin' },
+  ];
+
+  return (
+    <aside className={cn(
+      "bg-background border-r flex flex-col transition-all duration-300 z-20 h-full fixed md:relative",
+      sidebarOpen ? "translate-x-0" : "-translate-x-full md:translate-x-0",
+      sidebarCollapsed ? "w-20" : "w-64"
+    )}>
+      <div className="h-20 flex items-center justify-between px-4 border-b">
+        {!sidebarCollapsed && (
+          <div className="flex items-center gap-3">
+            <div className="flex items-center justify-center w-12 h-12 relative overflow-visible">
+              <Image src="/logo.png" alt="Pharma ERP Logo" width={100} height={100} className="object-contain scale-150" priority />
+            </div>
+            <span className="font-bold text-xl text-brand-600 dark:text-brand-400">Pharma ERP</span>
+          </div>
+        )}
+        {sidebarCollapsed && (
+          <div className="mx-auto flex justify-center w-full items-center h-full overflow-visible">
+            <Image src="/logo.png" alt="Pharma ERP Logo" width={100} height={100} className="object-contain scale-150" priority />
+          </div>
+        )}
+        <button 
+          onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
+          className="hidden md:flex p-1.5 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-500"
+        >
+          {sidebarCollapsed ? <ChevronRight size={18} /> : <ChevronLeft size={18} />}
+        </button>
+      </div>
+      
+      <div className="flex-1 overflow-y-auto py-4">
+        <nav className="space-y-1 px-3">
+          {navItems.map((item) => {
+            const isActive = pathname.startsWith(item.href);
+            return (
+              <Link 
+                key={item.href}
+                href={item.href}
+                className={cn(
+                  "flex items-center rounded-lg px-3 py-2.5 transition-colors group",
+                  isActive 
+                    ? "bg-brand-50 text-brand-600 dark:bg-brand-900/50 dark:text-brand-400" 
+                    : "text-gray-600 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
+                )}
+                title={sidebarCollapsed ? item.label : undefined}
+              >
+                <item.icon className={cn("flex-shrink-0", sidebarCollapsed ? "mx-auto" : "mr-3", isActive ? "text-brand-600 dark:text-brand-400" : "text-gray-400 group-hover:text-gray-500 dark:group-hover:text-gray-300")} size={20} />
+                {!sidebarCollapsed && <span className="font-medium text-sm">{item.label}</span>}
+              </Link>
+            )
+          })}
+        </nav>
+      </div>
+    </aside>
+  );
+}

package/frontend/src/components/ui/slide-over.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { X } from 'lucide-react';
+import { cn } from '@/lib/utils'; // Assuming cn exists
+
+export interface SlideOverProps {
+  open: boolean;
+  onClose: () => void;
+  title: string;
+  children: React.ReactNode;
+  footer?: React.ReactNode;
+}
+
+export function SlideOver({ open, onClose, title, children, footer }: SlideOverProps) {
+  return (
+    <DialogPrimitive.Root open={open} onOpenChange={(isOpen) => !isOpen && onClose()}>
+      <DialogPrimitive.Portal>
+        <DialogPrimitive.Overlay className="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" />
+        <DialogPrimitive.Content className="fixed inset-y-0 right-0 z-50 flex w-full sm:max-w-md flex-col border-l border-gray-800 bg-[#0B1220] shadow-2xl transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right">
+          <div className="flex items-center justify-between border-b border-gray-800 px-6 py-4">
+            <DialogPrimitive.Title className="text-lg font-semibold text-white">
+              {title}
+            </DialogPrimitive.Title>
+            <DialogPrimitive.Close className="rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+              <X className="h-5 w-5 text-gray-400 hover:text-white" />
+              <span className="sr-only">Close</span>
+            </DialogPrimitive.Close>
+          </div>
+          
+          <div className="relative flex-1 overflow-y-auto px-6 py-6 text-gray-300">
+            {children}
+          </div>
+
+          {footer && (
+            <div className="border-t border-gray-800 bg-[#050814] px-6 py-4">
+              {footer}
+            </div>
+          )}
+        </DialogPrimitive.Content>
+      </DialogPrimitive.Portal>
+    </DialogPrimitive.Root>
+  );
+}

package/frontend/src/components/ui/stat-card.tsx

@@ -0,0 +1,40 @@
+import { Card } from './card';
+import { cn } from '@/lib/utils';
+import { TrendingUp, TrendingDown } from 'lucide-react';
+
+interface StatCardProps {
+  title: string;
+  value: string;
+  trend?: number;
+  icon?: React.ReactNode;
+  className?: string;
+}
+
+export function StatCard({ title, value, trend, icon, className }: StatCardProps) {
+  const isPositive = trend && trend > 0;
+  const isNegative = trend && trend < 0;
+
+  return (
+    <Card className={cn("p-5 flex flex-col", className)}>
+      <div className="flex items-center justify-between mb-4">
+        <h3 className="text-sm font-medium text-gray-500 dark:text-gray-400 truncate">{title}</h3>
+        {icon && <div className="text-gray-400 bg-surface p-2 rounded-lg">{icon}</div>}
+      </div>
+      <div className="mt-auto min-w-0">
+        <div className="text-2xl font-bold text-foreground truncate">{value}</div>
+        {trend !== undefined && (
+          <div className="flex items-center mt-2 text-sm">
+            <span className={cn(
+              "flex items-center font-medium",
+              isPositive ? "text-success" : isNegative ? "text-danger" : "text-gray-500"
+            )}>
+              {isPositive ? <TrendingUp size={16} className="mr-1" /> : isNegative ? <TrendingDown size={16} className="mr-1" /> : null}
+              {Math.abs(trend)}%
+            </span>
+            <span className="text-gray-500 ml-2">vs last month</span>
+          </div>
+        )}
+      </div>
+    </Card>
+  );
+}

package/frontend/src/components/ui/switch.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import * as SwitchPrimitives from '@radix-ui/react-switch';
+import { cn } from '@/lib/utils'; // Assuming cn exists
+
+export interface SwitchProps {
+  checked: boolean;
+  onCheckedChange: (checked: boolean) => void;
+  label?: string;
+  description?: string;
+}
+
+export function Switch({ checked, onCheckedChange, label, description }: SwitchProps) {
+  return (
+    <div className="flex items-center space-x-3">
+      <SwitchPrimitives.Root
+        checked={checked}
+        onCheckedChange={onCheckedChange}
+        className={cn(
+          "peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2 focus-visible:ring-offset-[#0B1220] disabled:cursor-not-allowed disabled:opacity-50",
+          checked ? "bg-brand-500" : "bg-gray-600"
+        )}
+      >
+        <SwitchPrimitives.Thumb
+          className={cn(
+            "pointer-events-none block h-5 w-5 rounded-full bg-white shadow-lg ring-0 transition-transform",
+            checked ? "translate-x-5" : "translate-x-0"
+          )}
+        />
+      </SwitchPrimitives.Root>
+      {(label || description) && (
+        <div className="flex flex-col">
+          {label && <label className="text-sm font-medium text-gray-200 cursor-pointer" onClick={() => onCheckedChange(!checked)}>{label}</label>}
+          {description && <span className="text-xs text-gray-400">{description}</span>}
+        </div>
+      )}
+    </div>
+  );
+}