[V0_FILE]plaintext:file=".gitignore" # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies /node_modules # next.js /.next/ /out/ # production /build # debug npm-debug.log* yarn-debug.log* yarn-error.log* .pnpm-debug.log* # env files .env* # vercel .vercel # typescript *.tsbuildinfo next-env.d.ts [V0_FILE]markdown:file="README.md" # projectboltgithubvjqnengv *Automatically synced with your [v0.dev](https://v0.dev) deployments* [![Deployed on Vercel](https://img.shields.io/badge/Deployed%20on-Vercel-black?style=for-the-badge&logo=vercel)](https://vercel.com/minou2442s-projects/v0-projectboltgithubvjqnengv) [![Built with v0](https://img.shields.io/badge/Built%20with-v0.dev-black?style=for-the-badge)](https://v0.dev/chat/projects/ysOsXG7yQR7) ## Overview This repository will stay in sync with your deployed chats on [v0.dev](https://v0.dev). Any changes you make to your deployed app will be automatically pushed to this repository from [v0.dev](https://v0.dev). ## Deployment Your project is live at: **[https://vercel.com/minou2442s-projects/v0-projectboltgithubvjqnengv](https://vercel.com/minou2442s-projects/v0-projectboltgithubvjqnengv)** ## Build your app Continue building your app on: **[https://v0.dev/chat/projects/ysOsXG7yQR7](https://v0.dev/chat/projects/ysOsXG7yQR7)** ## How It Works 1. Create and modify your project using [v0.dev](https://v0.dev) 2. Deploy your chats from the v0 interface 3. Changes are automatically pushed to this repository 4. Vercel deploys the latest version from this repository [V0_FILE]typescriptreact:file="app/dashboard/page.tsx" "use client" import { Layout } from "@/components/Layout/Layout" import { Dashboard } from "@/components/Dashboard/Dashboard" export default function DashboardPage() { return ( ) } [V0_FILE]css:file="app/globals.css" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 221.2 83.2% 53.3%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96%; --secondary-foreground: 222.2 84% 4.9%; --muted: 210 40% 96%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96%; --accent-foreground: 222.2 84% 4.9%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 221.2 83.2% 53.3%; --radius: 0.75rem; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 217.2 91.2% 59.8%; --primary-foreground: 222.2 84% 4.9%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 224.3 76.3% 94.1%; } } :root { --foreground-rgb: 0, 0, 0; --background-start-rgb: 214, 219, 220; --background-end-rgb: 255, 255, 255; --toast-bg: #ffffff; --toast-color: #000000; } @media (prefers-color-scheme: dark) { :root { --foreground-rgb: 255, 255, 255; --background-start-rgb: 0, 0, 0; --background-end-rgb: 0, 0, 0; --toast-bg: #1f2937; --toast-color: #ffffff; } } body { color: rgb(var(--foreground-rgb)); background: linear-gradient(to bottom, transparent, rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb)); } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } /* Custom animations */ @keyframes fade-in-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-in-up { animation: fade-in-up 0.6s ease-out forwards; } /* Custom scrollbar */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: #f1f5f9; } ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: #94a3b8; } /* Animation classes */ .animate-fade-in { animation: fadeIn 0.3s ease-in-out; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .animate-slide-in { animation: slideIn 0.3s ease-out; } @keyframes slideIn { from { transform: translateX(-100%); } to { transform: translateX(0); } } /* Gradient backgrounds */ .gradient-blue { background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); } .gradient-card { background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%); } /* Glass morphism effect */ .glass { background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); } /* Hover effects */ .hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; } .hover-lift:hover { transform: translateY(-4px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); } /* Status indicators */ .status-active { @apply bg-green-100 text-green-800 border-green-200; } .status-inactive { @apply bg-gray-100 text-gray-800 border-gray-200; } .status-pending { @apply bg-yellow-100 text-yellow-800 border-yellow-200; } .status-critical { @apply bg-red-100 text-red-800 border-red-200; } /* Loading animations */ @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } /* Card hover effects */ .card-hover { transition: all 0.3s ease; } .card-hover:hover { transform: translateY(-2px); box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } /* Button animations */ .btn-animate { transition: all 0.3s ease; } .btn-animate:hover { transform: scale(1.05); } .btn-animate:active { transform: scale(0.95); } /* Notification styles */ .notification-urgent { @apply border-l-4 border-red-500 bg-red-50 dark:bg-red-900/20; } .notification-high { @apply border-l-4 border-orange-500 bg-orange-50 dark:bg-orange-900/20; } .notification-medium { @apply border-l-4 border-blue-500 bg-blue-50 dark:bg-blue-900/20; } .notification-low { @apply border-l-4 border-gray-500 bg-gray-50 dark:bg-gray-900/20; } /* Notification styles */ .notification-enter { transform: translateX(100%); opacity: 0; } .notification-enter-active { transform: translateX(0); opacity: 1; transition: all 0.3s ease-out; } .notification-exit { transform: translateX(0); opacity: 1; } .notification-exit-active { transform: translateX(100%); opacity: 0; transition: all 0.3s ease-in; } /* Connection status indicator */ .connection-indicator { position: relative; } .connection-indicator::after { content: ""; position: absolute; top: -2px; right: -2px; width: 8px; height: 8px; border-radius: 50%; border: 2px solid white; } .connection-indicator.connected::after { background-color: #10b981; } .connection-indicator.connecting::after { background-color: #f59e0b; animation: pulse 1s infinite; } .connection-indicator.disconnected::after { background-color: #ef4444; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } [V0_FILE]typescriptreact:file="app/layout.tsx" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" import { Toaster } from "sonner" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "MediCare Pro - Professional Clinic Management System", description: "Complete healthcare management solution with patient records, appointments, billing, and more.", generator: 'v0.dev' } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/loading.tsx" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/login/page.tsx" "use client" import { LoginForm } from "@/components/Auth/LoginForm" export default function LoginPage() { return (

) } [V0_FILE]typescriptreact:file="app/page.tsx" "use client" import type React from "react" import { useState, useEffect, useRef } from "react" import { Calendar, Users, FileText, Stethoscope, Pill, TestTube, Camera, CreditCard, Package, BarChart3, Clock, Settings, Bell, Search, Plus, Filter, Download, Upload, Eye, Edit, Phone, Activity, TrendingUp, Heart, Brain, Bone, Microscope, X, Check, AlertCircle, MessageSquare, Shield, Award, Briefcase, Building, Menu, Sun, Moon, LogOut, Save, RefreshCw, Archive, BookOpen, Clipboard, } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Textarea } from "@/components/ui/textarea" import { Switch } from "@/components/ui/switch" import { Progress } from "@/components/ui/progress" import { Separator } from "@/components/ui/separator" import { Label } from "@/components/ui/label" import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Alert, AlertDescription } from "@/components/ui/alert" import { toast } from "sonner" // Types interface UserType { id: string name: string email: string role: "admin" | "doctor" | "nurse" | "receptionist" avatar?: string specialization?: string phone?: string department?: string } interface Patient { id: string name: string email: string phone: string dateOfBirth: string gender: "male" | "female" | "other" address: string emergencyContact: string bloodType: string allergies: string[] medicalHistory: string[] insurance: string status: "active" | "inactive" lastVisit: string nextAppointment?: string avatar?: string totalVisits: number totalBilled: number } interface Appointment { id: string patientId: string patientName: string doctorId: string doctorName: string date: string time: string duration: number type: string status: "scheduled" | "in-progress" | "completed" | "cancelled" | "no-show" notes: string symptoms: string[] diagnosis?: string treatment?: string followUp?: string priority: "low" | "medium" | "high" | "urgent" } interface MedicalRecord { id: string patientId: string patientName: string date: string doctorId: string doctorName: string type: "consultation" | "surgery" | "checkup" | "emergency" | "follow-up" diagnosis: string symptoms: string[] treatment: string medications: string[] notes: string attachments: string[] vitalSigns: { bloodPressure: string heartRate: number temperature: number weight: number height: number } } interface Prescription { id: string patientId: string patientName: string doctorId: string doctorName: string date: string medications: { name: string dosage: string frequency: string duration: string instructions: string }[] diagnosis: string notes: string status: "active" | "completed" | "cancelled" } interface LabResult { id: string patientId: string patientName: string testType: string testDate: string results: { parameter: string value: string normalRange: string status: "normal" | "abnormal" | "critical" }[] doctorNotes: string status: "pending" | "completed" | "reviewed" labTechnician: string } interface Invoice { id: string patientId: string patientName: string date: string dueDate: string items: { description: string quantity: number unitPrice: number total: number }[] subtotal: number tax: number discount: number total: number status: "draft" | "sent" | "paid" | "overdue" | "cancelled" paymentMethod?: string paidDate?: string } interface InventoryItem { id: string name: string category: string currentStock: number minStock: number maxStock: number unitPrice: number supplier: string expiryDate?: string location: string status: "in-stock" | "low-stock" | "out-of-stock" | "expired" lastRestocked: string } // Mock Data const mockUsers: UserType[] = [ { id: "1", name: "Dr. Sarah Johnson", email: "admin@clinic.com", role: "admin", specialization: "General Medicine", phone: "+1 (555) 123-4567", department: "Administration", }, { id: "2", name: "Dr. Michael Chen", email: "doctor@clinic.com", role: "doctor", specialization: "Cardiology", phone: "+1 (555) 234-5678", department: "Cardiology", }, ] const mockPatients: Patient[] = [ { id: "1", name: "John Smith", email: "john.smith@email.com", phone: "+1 (555) 987-6543", dateOfBirth: "1985-03-15", gender: "male", address: "123 Main St, City, State 12345", emergencyContact: "Jane Smith - +1 (555) 987-6544", bloodType: "O+", allergies: ["Penicillin", "Shellfish"], medicalHistory: ["Hypertension", "Diabetes Type 2"], insurance: "Blue Cross Blue Shield", status: "active", lastVisit: "2024-01-15", nextAppointment: "2024-02-15", totalVisits: 12, totalBilled: 2450.0, }, { id: "2", name: "Emily Davis", email: "emily.davis@email.com", phone: "+1 (555) 876-5432", dateOfBirth: "1992-07-22", gender: "female", address: "456 Oak Ave, City, State 12345", emergencyContact: "Robert Davis - +1 (555) 876-5433", bloodType: "A-", allergies: ["Latex"], medicalHistory: ["Asthma"], insurance: "Aetna", status: "active", lastVisit: "2024-01-20", totalVisits: 8, totalBilled: 1850.0, }, ] const mockAppointments: Appointment[] = [ { id: "1", patientId: "1", patientName: "John Smith", doctorId: "2", doctorName: "Dr. Michael Chen", date: "2024-02-15", time: "09:00", duration: 30, type: "Consultation", status: "scheduled", notes: "Follow-up for diabetes management", symptoms: ["Fatigue", "Increased thirst"], priority: "medium", }, { id: "2", patientId: "2", patientName: "Emily Davis", doctorId: "1", doctorName: "Dr. Sarah Johnson", date: "2024-02-15", time: "10:30", duration: 45, type: "Check-up", status: "in-progress", notes: "Annual physical examination", symptoms: [], priority: "low", }, ] export default function ClinicManagementSystem() { const [currentUser, setCurrentUser] = useState(null) const [activeSection, setActiveSection] = useState("dashboard") const [sidebarOpen, setSidebarOpen] = useState(true) const [darkMode, setDarkMode] = useState(false) const [searchQuery, setSearchQuery] = useState("") const [notifications, setNotifications] = useState([]) const [patients, setPatients] = useState(mockPatients) const [appointments, setAppointments] = useState(mockAppointments) const [selectedPatient, setSelectedPatient] = useState(null) const [selectedAppointment, setSelectedAppointment] = useState(null) const [showPatientDialog, setShowPatientDialog] = useState(false) const [showAppointmentDialog, setShowAppointmentDialog] = useState(false) // Login state const [loginForm, setLoginForm] = useState({ email: "", password: "" }) const [loginError, setLoginError] = useState("") // Animation refs const cardRefs = useRef<(HTMLDivElement | null)[]>([]) useEffect(() => { // Simulate real-time notifications const interval = setInterval(() => { const notifications = [ { id: Date.now(), type: "appointment", message: "New appointment scheduled", time: new Date().toLocaleTimeString(), }, { id: Date.now() + 1, type: "patient", message: "Patient checked in", time: new Date().toLocaleTimeString() }, { id: Date.now() + 2, type: "lab", message: "Lab results available", time: new Date().toLocaleTimeString() }, ] setNotifications((prev) => [...prev, notifications[Math.floor(Math.random() * notifications.length)]].slice(-5)) }, 30000) return () => clearInterval(interval) }, []) // Animation effects useEffect(() => { cardRefs.current.forEach((card, index) => { if (card) { card.style.animationDelay = `${index * 0.1}s` card.classList.add("animate-fade-in-up") } }) }, [activeSection]) const handleLogin = (e: React.FormEvent) => { e.preventDefault() const user = mockUsers.find((u) => u.email === loginForm.email) if (user && (loginForm.password === "admin123" || loginForm.password === "doctor123")) { setCurrentUser(user) setLoginError("") toast.success(`Welcome back, ${user.name}!`) } else { setLoginError("Invalid credentials") toast.error("Invalid email or password") } } const handleLogout = () => { setCurrentUser(null) setActiveSection("dashboard") toast.success("Logged out successfully") } const sidebarItems = [ { id: "dashboard", label: "Dashboard", icon: BarChart3 }, { id: "patients", label: "Patients", icon: Users }, { id: "appointments", label: "Appointments", icon: Calendar }, { id: "medical-records", label: "Medical Records", icon: FileText }, { id: "prescriptions", label: "Prescriptions", icon: Pill }, { id: "lab-results", label: "Lab Results", icon: TestTube }, { id: "radiology", label: "Radiology", icon: Brain }, { id: "case-images", label: "Case Images", icon: Camera }, { id: "billing", label: "Billing", icon: CreditCard }, { id: "inventory", label: "Inventory", icon: Package }, { id: "waiting-room", label: "Waiting Room", icon: Clock }, { id: "staff", label: "Staff Management", icon: Briefcase }, { id: "reports", label: "Reports", icon: BarChart3 }, { id: "settings", label: "Settings", icon: Settings }, ] if (!currentUser) { return (

Clinic Management System Sign in to access your dashboard

Email setLoginForm((prev) => ({ ...prev, email: e.target.value }))} className="mt-1 border-gray-300 focus:border-blue-500 focus:ring-blue-500" required />

Password setLoginForm((prev) => ({ ...prev, password: e.target.value }))} className="mt-1 border-gray-300 focus:border-blue-500 focus:ring-blue-500" required />

{loginError && ( {loginError} )}

Demo Accounts:

Admin: admin@clinic.com / admin123

Doctor: doctor@clinic.com / doctor123

) } const renderDashboard = () => (

Dashboard

Welcome back, {currentUser.name}

{/* Stats Cards */}

{[ { title: "Total Patients", value: "1,234", change: "+12%", icon: Users, color: "blue" }, { title: "Today's Appointments", value: "28", change: "+5%", icon: Calendar, color: "green" }, { title: "Pending Lab Results", value: "15", change: "-3%", icon: TestTube, color: "yellow" }, { title: "Revenue This Month", value: "$45,678", change: "+18%", icon: TrendingUp, color: "purple" }, ].map((stat, index) => ( (cardRefs.current[index] = el)} className="relative overflow-hidden border-0 shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 bg-gradient-to-br from-white to-gray-50" >

{stat.title}

{stat.value}

{stat.change} from last month

))}

{/* Recent Activity */}

Recent Appointments

{appointments.slice(0, 5).map((appointment) => (

{appointment.patientName .split(" ") .map((n) => n[0]) .join("")}

{appointment.patientName}

{appointment.time} - {appointment.type}

{appointment.status}

))}

Recent Notifications

{notifications.length === 0 ? (

No recent notifications

) : ( notifications.map((notification) => (

{notification.message}

{notification.time}

)) )}

) const renderPatients = () => (

Patient Management

{/* Search and Filters */}

setSearchQuery(e.target.value)} className="pl-10 border-gray-300 focus:border-blue-500 focus:ring-blue-500" />

{/* Patients Grid */}

{patients .filter( (patient) => patient.name.toLowerCase().includes(searchQuery.toLowerCase()) || patient.email.toLowerCase().includes(searchQuery.toLowerCase()), ) .map((patient, index) => ( (cardRefs.current[index] = el)} className="shadow-lg border-0 hover:shadow-xl transition-all duration-300 transform hover:scale-105 bg-gradient-to-br from-white to-blue-50" >

{patient.name .split(" ") .map((n) => n[0]) .join("")}

{patient.name}

{patient.email}

{patient.status}

{patient.phone}

Last visit: {new Date(patient.lastVisit).toLocaleDateString()}

{patient.totalVisits} visits

Total billed: ${patient.totalBilled.toFixed(2)}

))}

) const renderAppointments = () => (

Appointment Management

Today This Week This Month All Today's Schedule {new Date().toLocaleDateString("en-US", { weekday: "long", year: "numeric", month: "long", day: "numeric", })}

{appointments.map((appointment, index) => (

{appointment.time}

{appointment.duration}min

{appointment.patientName .split(" ") .map((n) => n[0]) .join("")}

{appointment.patientName}

{appointment.type}

Dr. {appointment.doctorName}

{appointment.status} {appointment.priority}

))}

Weekly view coming soon...

Monthly view coming soon...

All appointments view coming soon...

) const renderMedicalRecords = () => (

Medical Records

Medical Records System

Comprehensive patient medical history and documentation

Vital Signs

Track patient vitals

Diagnoses

Medical diagnoses history

Treatment Plans

Comprehensive care plans

) const renderPrescriptions = () => (

Prescription Management

Active Prescriptions

Currently active

Completed

156

This month

Pending Review

Require attention

Recent Prescriptions

{[ { patient: "John Smith", medication: "Metformin 500mg", date: "2024-01-15", status: "active" }, { patient: "Emily Davis", medication: "Albuterol Inhaler", date: "2024-01-14", status: "completed" }, { patient: "Michael Johnson", medication: "Lisinopril 10mg", date: "2024-01-13", status: "active" }, ].map((prescription, index) => (

{prescription.patient .split(" ") .map((n) => n[0]) .join("")}

{prescription.patient}

{prescription.medication}

{prescription.date}

{prescription.status}

))}

) const renderLabResults = () => (

Laboratory Results

{[ { title: "Pending Results", count: 12, color: "yellow", icon: Clock }, { title: "Completed Today", count: 8, color: "green", icon: Check }, { title: "Critical Results", count: 2, color: "red", icon: AlertCircle }, { title: "Total This Month", count: 156, color: "blue", icon: TestTube }, ].map((stat, index) => (

{stat.title}

{stat.count}

))}

Recent Lab Results

{[ { patient: "John Smith", test: "Complete Blood Count", date: "2024-01-15", status: "completed", critical: false, }, { patient: "Emily Davis", test: "Lipid Panel", date: "2024-01-14", status: "pending", critical: false }, { patient: "Michael Johnson", test: "Glucose Test", date: "2024-01-13", status: "completed", critical: true, }, ].map((result, index) => (

{result.patient .split(" ") .map((n) => n[0]) .join("")}

{result.patient}

{result.test}

{result.date}

{result.critical && Critical} {result.status}

))}

) const renderRadiology = () => (

Radiology Department

{[ { title: "X-Ray Studies", count: 45, icon: Bone }, { title: "CT Scans", count: 23, icon: Brain }, { title: "MRI Studies", count: 18, icon: Microscope }, { title: "Ultrasounds", count: 32, icon: Activity }, ].map((stat, index) => (

{stat.title}

{stat.count}

This month

))}

Advanced Imaging Center

State-of-the-art diagnostic imaging services

{[ { name: "Digital X-Ray", description: "High-resolution imaging" }, { name: "CT Scanner", description: "64-slice technology" }, { name: "MRI 3T", description: "Advanced magnetic imaging" }, { name: "Ultrasound", description: "4D imaging capability" }, ].map((equipment, index) => (

{equipment.name}

{equipment.description}

))}

) const renderCaseImages = () => (

Case Images & Documentation

{[ { title: "Clinical Photos", count: 234, color: "blue" }, { title: "Surgical Documentation", count: 89, color: "green" }, { title: "Progress Images", count: 156, color: "purple" }, ].map((category, index) => (

{category.title}

{category.count}

))}

Medical Photography System

Secure storage and management of clinical images

HIPAA Compliant

Secure image storage

High Resolution

Professional quality

Organized Archive

Easy retrieval system

) const renderBilling = () => (

Billing & Financial Management

{[ { title: "Monthly Revenue", amount: "$45,678", change: "+12%", color: "green" }, { title: "Outstanding", amount: "$8,234", change: "-5%", color: "yellow" }, { title: "Collected Today", amount: "$2,456", change: "+8%", color: "blue" }, { title: "Overdue", amount: "$1,234", change: "-15%", color: "red" }, ].map((stat, index) => (

{stat.title}

{stat.amount}

{stat.change} from last month

))}

Recent Invoices

{[ { id: "INV-001", patient: "John Smith", amount: "$450.00", status: "paid", date: "2024-01-15" }, { id: "INV-002", patient: "Emily Davis", amount: "$275.00", status: "pending", date: "2024-01-14" }, { id: "INV-003", patient: "Michael Johnson", amount: "$680.00", status: "overdue", date: "2024-01-10" }, ].map((invoice, index) => (

{invoice.id}

{invoice.patient}

{invoice.date}

{invoice.amount}

{invoice.status}

))}

Payment Methods

{[ { method: "Credit Card", percentage: 65, amount: "$29,691" }, { method: "Insurance", percentage: 25, amount: "$11,420" }, { method: "Cash", percentage: 8, amount: "$3,654" }, { method: "Check", percentage: 2, amount: "$913" }, ].map((payment, index) => (

{payment.method} {payment.amount}

Target: {payment.target}%

))}

) const renderInventory = () => (

Inventory Management

{[ { title: "Total Items", count: 1234, color: "blue", icon: Package }, { title: "Low Stock", count: 23, color: "yellow", icon: AlertCircle }, { title: "Out of Stock", count: 5, color: "red", icon: X }, { title: "Expiring Soon", count: 12, color: "orange", icon: Clock }, ].map((stat, index) => (

{stat.title}

{stat.count}

))}

Inventory Categories

{[ { category: "Medical Supplies", items: 456, value: "$12,345" }, { category: "Pharmaceuticals", items: 234, value: "$8,901" }, { category: "Equipment", items: 89, value: "$45,678" }, { category: "Office Supplies", items: 123, value: "$2,345" }, { category: "Surgical Instruments", items: 67, value: "$15,432" }, { category: "Disposables", items: 345, value: "$3,456" }, ].map((category, index) => (

{category.category}

{category.items} items {category.value}

))}

) const renderWaitingRoom = () => (

Waiting Room Management

{[ { title: "Patients Waiting", count: 8, color: "blue" }, { title: "Average Wait Time", count: "15 min", color: "green" }, { title: "In Consultation", count: 3, color: "yellow" }, { title: "Completed Today", count: 24, color: "purple" }, ].map((stat, index) => (

{stat.title}

{stat.count}

))}

Current Queue

{[ { name: "John Smith", time: "09:00", waitTime: "5 min", status: "waiting" }, { name: "Emily Davis", time: "09:15", waitTime: "10 min", status: "in-consultation" }, { name: "Michael Johnson", time: "09:30", waitTime: "0 min", status: "called" }, ].map((patient, index) => (

{patient.time}

{patient.waitTime}

{patient.name}

Appointment #{index + 1}

{patient.status}

))}

Room Status

{[ { room: "Room 1", status: "occupied", patient: "John Smith" }, { room: "Room 2", status: "available", patient: null }, { room: "Room 3", status: "cleaning", patient: null }, { room: "Room 4", status: "occupied", patient: "Emily Davis" }, ].map((room, index) => (

{room.room}

{room.status} {room.patient &&

{room.patient}

}

))}

) const renderStaff = () => (

Staff Management

{[ { title: "Total Staff", count: 24, role: "All Roles", color: "blue" }, { title: "Doctors", count: 8, role: "Medical Staff", color: "green" }, { title: "Nurses", count: 12, role: "Nursing Staff", color: "purple" }, { title: "Support Staff", count: 4, role: "Administrative", color: "yellow" }, ].map((stat, index) => (

{stat.title}

{stat.count}

{stat.role}

))}

Staff Directory

{[ { name: "Dr. Sarah Johnson", role: "Chief Medical Officer", department: "Administration", status: "active", }, { name: "Dr. Michael Chen", role: "Cardiologist", department: "Cardiology", status: "active" }, { name: "Nurse Jennifer Wilson", role: "Head Nurse", department: "Nursing", status: "active" }, { name: "Dr. Robert Davis", role: "Pediatrician", department: "Pediatrics", status: "on-leave" }, { name: "Nurse Maria Garcia", role: "ICU Nurse", department: "Critical Care", status: "active" }, { name: "John Anderson", role: "Lab Technician", department: "Laboratory", status: "active" }, ].map((staff, index) => (

{staff.name .split(" ") .map((n) => n[0]) .join("")}

{staff.name}

{staff.role}

{staff.department}

{staff.status}

))}

) const renderReports = () => (

Reports & Analytics

{[ { title: "Patient Satisfaction", value: "4.8/5", trend: "+0.2", color: "green" }, { title: "Average Wait Time", value: "12 min", trend: "-3 min", color: "blue" }, { title: "Appointment Rate", value: "95%", trend: "+2%", color: "purple" }, { title: "Revenue Growth", value: "+18%", trend: "+5%", color: "yellow" }, ].map((metric, index) => (

{metric.title}

{metric.value}

{metric.trend} this month

))}

Quick Reports

{[ { name: "Daily Patient Summary", description: "Today's appointments and visits", icon: Users }, { name: "Financial Report", description: "Revenue and billing summary", icon: CreditCard }, { name: "Inventory Status", description: "Stock levels and alerts", icon: Package }, { name: "Staff Performance", description: "Productivity and metrics", icon: Award }, ].map((report, index) => (

{report.name}

{report.description}

))}

Performance Metrics

{[ { metric: "Patient Satisfaction", value: 96, target: 95 }, { metric: "On-time Appointments", value: 88, target: 90 }, { metric: "Revenue Target", value: 112, target: 100 }, { metric: "Staff Utilization", value: 85, target: 80 }, ].map((item, index) => (

{item.metric} {item.value}%

Target: {item.target}%

))}

) const renderSettings = () => (

System Settings

General Settings

Dark Mode

Toggle dark theme

Email Notifications

Receive email alerts

Auto Backup

Daily data backup

Clinic Information

Clinic Name

Address

</div>
            <div>
              <Label htmlFor="clinic-phone">Phone</Label>
              <Input id="clinic-phone" defaultValue="+1 (555) 123-4567" />
            </div>
            <Button className="w-full bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700">
              <Save className="w-4 h-4 mr-2" />
              Save Changes
            </Button>
          </CardContent>
        </Card>
      </div>
    </div>
  )

const renderContent = () => {
    switch (activeSection) {
      case "dashboard":
        return renderDashboard()
      case "patients":
        return renderPatients()
      case "appointments":
        return renderAppointments()
      case "medical-records":
        return renderMedicalRecords()
      case "prescriptions":
        return renderPrescriptions()
      case "lab-results":
        return renderLabResults()
      case "radiology":
        return renderRadiology()
      case "case-images":
        return renderCaseImages()
      case "billing":
        return renderBilling()
      case "inventory":
        return renderInventory()
      case "waiting-room":
        return renderWaitingRoom()
      case "staff":
        return renderStaff()
      case "reports":
        return renderReports()
      case "settings":
        return renderSettings()
      default:
        return renderDashboard()
    }
  }

return (
    <div className={`min-h-screen bg-gradient-to-br from-blue-50 via-white to-blue-100 ${darkMode ? "dark" : ""}`}>
      {/* Header */}
      <header className="bg-white/80 backdrop-blur-sm border-b border-blue-200 shadow-lg sticky top-0 z-50">
        <div className="flex items-center justify-between px-6 py-4">
          <div className="flex items-center space-x-4">
            <Button variant="ghost" size="sm" onClick={() => setSidebarOpen(!sidebarOpen)} className="lg:hidden">
              <Menu className="w-5 h-5" />
            </Button>
            <div className="flex items-center space-x-3">
              <div className="w-10 h-10 bg-gradient-to-r from-blue-500 to-blue-600 rounded-full flex items-center justify-center shadow-lg">
                <Stethoscope className="w-5 h-5 text-white" />
              </div>
              <div>
                <h1 className="text-xl font-bold bg-gradient-to-r from-blue-600 to-blue-800 bg-clip-text text-transparent">
                  MediCare Pro
                </h1>
                <p className="text-xs text-gray-600">Professional Clinic Management</p>
              </div>
            </div>
          </div>

<Button variant="ghost" size="sm" className="relative">
              <Bell className="w-5 h-5" />
              {notifications.length > 0 && (
                <Badge className="absolute -top-1 -right-1 w-5 h-5 p-0 flex items-center justify-center bg-red-500 text-white text-xs">
                  {notifications.length}
                </Badge>
              )}
            </Button>

<Button variant="ghost" size="sm" onClick={() => setDarkMode(!darkMode)}>
              {darkMode ? <Sun className="w-5 h-5" /> : <Moon className="w-5 h-5" />}
            </Button>

<div className="flex items-center space-x-3">
              <Avatar className="w-8 h-8">
                <AvatarImage src={currentUser.avatar || "/placeholder.svg"} />
                <AvatarFallback className="bg-blue-200 text-blue-800 text-sm font-semibold">
                  {currentUser.name
                    .split(" ")
                    .map((n) => n[0])
                    .join("")}
                </AvatarFallback>
              </Avatar>
              <div className="hidden md:block">
                <p className="text-sm font-medium text-gray-900">{currentUser.name}</p>
                <p className="text-xs text-gray-600 capitalize">{currentUser.role}</p>
              </div>
              <Button variant="ghost" size="sm" onClick={handleLogout}>
                <LogOut className="w-4 h-4" />
              </Button>
            </div>
          </div>
        </div>
      </header>

<div className="flex">
        {/* Sidebar */}
        <aside
          className={`${sidebarOpen ? "w-64" : "w-16"} bg-white/80 backdrop-blur-sm border-r border-blue-200 shadow-lg transition-all duration-300 min-h-screen`}
        >
          <nav className="p-4 space-y-2">
            {sidebarItems.map((item) => (
              <Button
                key={item.id}
                variant={activeSection === item.id ? "default" : "ghost"}
                className={`w-full justify-start transition-all duration-300 ${
                  activeSection === item.id
                    ? "bg-gradient-to-r from-blue-500 to-blue-600 text-white shadow-lg"
                    : "hover:bg-blue-50 text-gray-700"
                }`}
                onClick={() => setActiveSection(item.id)}
              >
                <item.icon className={`w-5 h-5 ${sidebarOpen ? "mr-3" : ""}`} />
                {sidebarOpen && <span className="truncate">{item.label}</span>}
              </Button>
            ))}
          </nav>
        </aside>

{/* Main Content */}
        <main className="flex-1 p-6 overflow-auto">
          <div className="max-w-7xl mx-auto">{renderContent()}</div>
        </main>
      </div>

{/* Patient Details Dialog */}
      <Dialog open={!!selectedPatient} onOpenChange={() => setSelectedPatient(null)}>
        <DialogContent className="max-w-2xl">
          <DialogHeader>
            <DialogTitle>Patient Details</DialogTitle>
          </DialogHeader>
          {selectedPatient && (
            <div className="space-y-6">
              <div className="flex items-center space-x-4">
                <Avatar className="w-16 h-16">
                  <AvatarImage src={selectedPatient.avatar || "/placeholder.svg"} />
                  <AvatarFallback className="bg-blue-200 text-blue-800 text-lg font-semibold">
                    {selectedPatient.name
                      .split(" ")
                      .map((n) => n[0])
                      .join("")}
                  </AvatarFallback>
                </Avatar>
                <div>
                  <h3 className="text-xl font-semibold">{selectedPatient.name}</h3>
                  <p className="text-gray-600">{selectedPatient.email}</p>
                  <Badge
                    className={
                      selectedPatient.status === "active" ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800"
                    }
                  >
                    {selectedPatient.status}
                  </Badge>
                </div>
              </div>

<div className="grid grid-cols-2 gap-4">
                <div>
                  <Label className="text-sm font-medium text-gray-600">Phone</Label>
                  <p className="text-sm">{selectedPatient.phone}</p>
                </div>
                <div>
                  <Label className="text-sm font-medium text-gray-600">Date of Birth</Label>
                  <p className="text-sm">{new Date(selectedPatient.dateOfBirth).toLocaleDateString()}</p>
                </div>
                <div>
                  <Label className="text-sm font-medium text-gray-600">Blood Type</Label>
                  <p className="text-sm">{selectedPatient.bloodType}</p>
                </div>
                <div>
                  <Label className="text-sm font-medium text-gray-600">Insurance</Label>
                  <p className="text-sm">{selectedPatient.insurance}</p>
                </div>
              </div>

<div>
                <Label className="text-sm font-medium text-gray-600">Address</Label>
                <p className="text-sm">{selectedPatient.address}</p>
              </div>

<div>
                <Label className="text-sm font-medium text-gray-600">Emergency Contact</Label>
                <p className="text-sm">{selectedPatient.emergencyContact}</p>
              </div>

<div>
                <Label className="text-sm font-medium text-gray-600">Allergies</Label>
                <div className="flex flex-wrap gap-2 mt-1">
                  {selectedPatient.allergies.map((allergy, index) => (
                    <Badge key={index} variant="outline" className="bg-red-50 text-red-700 border-red-200">
                      {allergy}
                    </Badge>
                  ))}
                </div>
              </div>

<div>
                <Label className="text-sm font-medium text-gray-600">Medical History</Label>
                <div className="flex flex-wrap gap-2 mt-1">
                  {selectedPatient.medicalHistory.map((condition, index) => (
                    <Badge key={index} variant="outline" className="bg-blue-50 text-blue-700 border-blue-200">
                      {condition}
                    </Badge>
                  ))}
                </div>
              </div>
            </div>
          )}
        </DialogContent>
      </Dialog>

{/* Appointment Details Dialog */}
      <Dialog open={!!selectedAppointment} onOpenChange={() => setSelectedAppointment(null)}>
        <DialogContent className="max-w-2xl">
          <DialogHeader>
            <DialogTitle>Appointment Details</DialogTitle>
          </DialogHeader>
          {selectedAppointment && (
            <div className="space-y-6">
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <Label className="text-sm font-medium text-gray-600">Patient</Label>
                  <p className="text-sm font-semibold">{selectedAppointment.patientName}</p>
                </div>
                <div>
                  <Label className="text-sm font-medium text-gray-600">Doctor</Label>
                  <p className="text-sm font-semibold">{selectedAppointment.doctorName}</p>
                </div>
                <div>
                  <Label className="text-sm font-medium text-gray-600">Date & Time</Label>
                  <p className="text-sm">
                    {selectedAppointment.date} at {selectedAppointment.time}
                  </p>
                </div>
                <div>
                  <Label className="text-sm font-medium text-gray-600">Duration</Label>
                  <p className="text-sm">{selectedAppointment.duration} minutes</p>
                </div>
                <div>
                  <Label className="text-sm font-medium text-gray-600">Type</Label>
                  <p className="text-sm">{selectedAppointment.type}</p>
                </div>
                <div>
                  <Label className="text-sm font-medium text-gray-600">Status</Label>
                  <Badge
                    className={`${
                      selectedAppointment.status === "completed"
                        ? "bg-green-100 text-green-800"
                        : selectedAppointment.status === "in-progress"
                          ? "bg-blue-100 text-blue-800"
                          : selectedAppointment.status === "cancelled"
                            ? "bg-red-100 text-red-800"
                            : "bg-yellow-100 text-yellow-800"
                    }`}
                  >
                    {selectedAppointment.status}
                  </Badge>
                </div>
              </div>

{selectedAppointment.symptoms.length > 0 && (
                <div>
                  <Label className="text-sm font-medium text-gray-600">Symptoms</Label>
                  <div className="flex flex-wrap gap-2 mt-1">
                    {selectedAppointment.symptoms.map((symptom, index) => (
                      <Badge key={index} variant="outline" className="bg-yellow-50 text-yellow-700 border-yellow-200">
                        {symptom}
                      </Badge>
                    ))}
                  </div>
                </div>
              )}

<div>
                <Label className="text-sm font-medium text-gray-600">Notes</Label>
                <p className="text-sm bg-gray-50 p-3 rounded-lg">{selectedAppointment.notes}</p>
              </div>

<div className="flex space-x-2">
                <Button className="bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700">
                  <Edit className="w-4 h-4 mr-2" />
                  Edit Appointment
                </Button>
                <Button variant="outline">
                  <MessageSquare className="w-4 h-4 mr-2" />
                  Add Notes
                </Button>
              </div>
            </div>
          )}
        </DialogContent>
      </Dialog>

import type React from "react"

import { ThemeProvider } from "next-themes"
import { AuthProvider } from "@/contexts/AuthContext"
import { WebSocketProvider } from "@/contexts/WebSocketContext"
import { WaitingRoomProvider } from "@/contexts/WaitingRoomContext"
import { Toaster } from "react-hot-toast"

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <ThemeProvider attribute="class" defaultTheme="light" enableSystem>
      <AuthProvider>
        <WebSocketProvider>
          <WaitingRoomProvider>
            {children}
            <Toaster position="top-right" />
          </WaitingRoomProvider>
        </WebSocketProvider>
      </AuthProvider>
    </ThemeProvider>
  )
}
[V0_FILE]json:file="components.json"
{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.ts",
    "css": "app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "iconLibrary": "lucide"
}
[V0_FILE]typescriptreact:file="components/Auth/LoginForm.tsx"
"use client"

import type React from "react"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { useAuth } from "@/contexts/AuthContext"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Loader2, Stethoscope } from "lucide-react"

export function LoginForm() {
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  const [loading, setLoading] = useState(false)
  const { login } = useAuth()
  const router = useRouter()

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setLoading(true)

const success = await login(email, password)
    if (success) {
      router.push("/dashboard")
    }

setLoading(false)
  }

return (
    <Card className="w-full max-w-md mx-auto">
      <CardHeader className="text-center">
        <div className="flex justify-center mb-4">
          <div className="p-3 bg-blue-100 dark:bg-blue-900 rounded-full">
            <Stethoscope className="h-8 w-8 text-blue-600 dark:text-blue-400" />
          </div>
        </div>
        <CardTitle className="text-2xl font-bold">Clinique Dentaire</CardTitle>
        <CardDescription>Connectez-vous à votre compte pour accéder au système de gestion</CardDescription>
      </CardHeader>
      <CardContent>
        <form onSubmit={handleSubmit} className="space-y-4">
          <div className="space-y-2">
            <Label htmlFor="email">Email</Label>
            <Input
              id="email"
              type="email"
              placeholder="votre@email.com"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              required
            />
          </div>
          <div className="space-y-2">
            <Label htmlFor="password">Mot de passe</Label>
            <Input
              id="password"
              type="password"
              placeholder="••••••••"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              required
            />
          </div>
          <Button type="submit" className="w-full" disabled={loading}>
            {loading ? (
              <>
                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                Connexion...
              </>
            ) : (
              "Se connecter"
            )}
          </Button>
        </form>

<div className="mt-6 p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
          <p className="text-sm font-medium mb-2">Comptes de démonstration :</p>
          <div className="space-y-1 text-xs">
            <p>
              <strong>Admin:</strong> admin@clinic.com / admin123
            </p>
            <p>
              <strong>Docteur:</strong> doctor@clinic.com / doctor123
            </p>
          </div>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/Common/ConnectionStatus.tsx"
"use client"

import { useWebSocket } from "@/contexts/WebSocketContext"
import { Badge } from "@/components/ui/badge"
import { Wifi, WifiOff } from "lucide-react"

export function ConnectionStatus() {
  const { isConnected } = useWebSocket()

return (
    <div className="fixed bottom-4 right-4 z-50">
      <Badge variant={isConnected ? "secondary" : "destructive"} className="flex items-center space-x-2 px-3 py-2">
        {isConnected ? (
          <>
            <Wifi className="w-4 h-4" />
            <span>Connecté</span>
          </>
        ) : (
          <>
            <WifiOff className="w-4 h-4" />
            <span>Déconnecté</span>
          </>
        )}
      </Badge>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/Common/NotificationCenter.tsx"
"use client"

import { useState } from "react"
import { useWebSocket } from "@/contexts/WebSocketContext"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Bell, X, Trash2 } from "lucide-react"
import { cn } from "@/lib/utils"

export function NotificationCenter() {
  const [isOpen, setIsOpen] = useState(false)
  const { messages, markAsRead, clearMessages } = useWebSocket()

const unreadCount = messages.length

const getPriorityColor = (priority: string) => {
    switch (priority) {
      case "urgent":
        return "bg-red-100 border-red-200 text-red-800"
      case "high":
        return "bg-orange-100 border-orange-200 text-orange-800"
      case "medium":
        return "bg-yellow-100 border-yellow-200 text-yellow-800"
      default:
        return "bg-blue-100 border-blue-200 text-blue-800"
    }
  }

return (
    <div className="fixed top-4 right-4 z-50">
      <div className="relative">
        <Button variant="outline" size="sm" onClick={() => setIsOpen(!isOpen)} className="relative">
          <Bell className="w-4 h-4" />
          {unreadCount > 0 && (
            <Badge
              variant="destructive"
              className="absolute -top-2 -right-2 h-5 w-5 flex items-center justify-center p-0 text-xs"
            >
              {unreadCount > 99 ? "99+" : unreadCount}
            </Badge>
          )}
        </Button>

{isOpen && (
          <Card className="absolute top-12 right-0 w-80 max-h-96 shadow-lg">
            <CardHeader className="flex flex-row items-center justify-between pb-3">
              <CardTitle className="text-sm">Notifications</CardTitle>
              <div className="flex items-center space-x-2">
                {messages.length > 0 && (
                  <Button variant="ghost" size="sm" onClick={clearMessages}>
                    <Trash2 className="w-4 h-4" />
                  </Button>
                )}
                <Button variant="ghost" size="sm" onClick={() => setIsOpen(false)}>
                  <X className="w-4 h-4" />
                </Button>
              </div>
            </CardHeader>
            <CardContent className="p-0">
              <ScrollArea className="h-80">
                {messages.length === 0 ? (
                  <div className="p-4 text-center text-gray-500">Aucune notification</div>
                ) : (
                  <div className="space-y-2 p-4">
                    {messages.map((message) => (
                      <div
                        key={message.id}
                        className={cn(
                          "p-3 rounded-lg border cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800",
                          getPriorityColor(message.priority),
                        )}
                        onClick={() => markAsRead(message.id)}
                      >
                        <div className="flex items-start justify-between">
                          <div className="flex-1">
                            <p className="font-medium text-sm">{message.title}</p>
                            <p className="text-xs mt-1">{message.message}</p>
                            <p className="text-xs mt-2 opacity-70">{message.timestamp.toLocaleTimeString()}</p>
                          </div>
                          <Badge variant="outline" className="text-xs">
                            {message.priority}
                          </Badge>
                        </div>
                      </div>
                    ))}
                  </div>
                )}
              </ScrollArea>
            </CardContent>
          </Card>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/Common/OnlineUsers.tsx"
"use client"

import type React from "react"
import { useState } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { Users, MessageCircle, Circle } from "lucide-react"
import { useWebSocket } from "@/contexts/WebSocketContext"

export const OnlineUsers: React.FC = () => {
  const { onlineUsers, sendMessage } = useWebSocket()
  const [showUsers, setShowUsers] = useState(false)

const getStatusColor = (status: string) => {
    switch (status) {
      case "online":
        return "text-green-500"
      case "away":
        return "text-yellow-500"
      case "busy":
        return "text-red-500"
      default:
        return "text-gray-500"
    }
  }

const sendDirectMessage = (userId: string, userName: string) => {
    // In a real app, this would open a chat interface
    const message = prompt(`Envoyer un message à ${userName}:`)
    if (message) {
      sendMessage("direct_message", {
        recipientId: userId,
        message,
        timestamp: new Date().toISOString(),
      })
    }
  }

return (
    <div className="relative">
      <button
        onClick={() => setShowUsers(!showUsers)}
        className="flex items-center space-x-2 p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200"
      >
        <Users className="w-5 h-5 text-gray-600 dark:text-gray-300" />
        <span className="text-sm font-medium text-gray-700 dark:text-gray-300">{onlineUsers.length}</span>
      </button>

<AnimatePresence>
        {showUsers && (
          <motion.div
            initial={{ opacity: 0, y: -10 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -10 }}
            className="absolute right-0 mt-2 w-64 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 z-50"
          >
            <div className="p-4 border-b border-gray-200 dark:border-gray-700">
              <h3 className="font-semibold text-gray-900 dark:text-gray-100">
                Utilisateurs en ligne ({onlineUsers.length})
              </h3>
            </div>

<div className="max-h-64 overflow-y-auto">
              {onlineUsers.length === 0 ? (
                <div className="p-4 text-center text-gray-500 dark:text-gray-400">Aucun utilisateur en ligne</div>
              ) : (
                <div className="py-2">
                  {onlineUsers.map((user) => (
                    <div
                      key={user.id}
                      className="flex items-center justify-between px-4 py-2 hover:bg-gray-50 dark:hover:bg-gray-700"
                    >
                      <div className="flex items-center space-x-3">
                        <div className="relative">
                          <div className="w-8 h-8 bg-gradient-to-br from-blue-500 to-blue-600 rounded-full flex items-center justify-center">
                            <span className="text-white font-semibold text-xs">
                              {user.name
                                .split(" ")
                                .map((n) => n[0])
                                .join("")}
                            </span>
                          </div>
                          <Circle
                            className={`absolute -bottom-1 -right-1 w-3 h-3 ${getStatusColor(user.status)} fill-current`}
                          />
                        </div>
                        <div>
                          <p className="text-sm font-medium text-gray-900 dark:text-gray-100">{user.name}</p>
                          <p className="text-xs text-gray-600 dark:text-gray-400 capitalize">
                            {user.role.replace("_", " ")}
                          </p>
                        </div>
                      </div>

<button
                        onClick={() => sendDirectMessage(user.id, user.name)}
                        className="p-1 hover:bg-gray-200 dark:hover:bg-gray-600 rounded transition-colors duration-200"
                        title={`Envoyer un message à ${user.name}`}
                      >
                        <MessageCircle className="w-4 h-4 text-gray-600 dark:text-gray-300" />
                      </button>
                    </div>
                  ))}
                </div>
              )}
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/Dashboard/Dashboard.tsx"
"use client"

import { StatsCard } from "./StatsCard"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Users, Calendar, Clock, TrendingUp, AlertCircle, CheckCircle, UserPlus, CalendarPlus } from "lucide-react"

export function Dashboard() {
  const stats = [
    {
      title: "Patients Total",
      value: "1,234",
      change: "+12%",
      trend: "up" as const,
      icon: Users,
      color: "blue",
    },
    {
      title: "RDV Aujourd'hui",
      value: "28",
      change: "+5%",
      trend: "up" as const,
      icon: Calendar,
      color: "green",
    },
    {
      title: "Salle d'Attente",
      value: "8",
      change: "-2",
      trend: "down" as const,
      icon: Clock,
      color: "orange",
    },
    {
      title: "Revenus Mensuel",
      value: "€45,230",
      change: "+18%",
      trend: "up" as const,
      icon: TrendingUp,
      color: "purple",
    },
  ]

const recentAppointments = [
    {
      id: "1",
      patient: "Marie Dubois",
      time: "09:00",
      type: "Consultation",
      status: "confirmed",
    },
    {
      id: "2",
      patient: "Jean Martin",
      time: "09:30",
      type: "Nettoyage",
      status: "waiting",
    },
    {
      id: "3",
      patient: "Sophie Laurent",
      time: "10:00",
      type: "Urgence",
      status: "urgent",
    },
    {
      id: "4",
      patient: "Pierre Durand",
      time: "10:30",
      type: "Contrôle",
      status: "confirmed",
    },
  ]

const getStatusBadge = (status: string) => {
    switch (status) {
      case "confirmed":
        return (
          <Badge variant="secondary" className="bg-green-100 text-green-800">
            <CheckCircle className="w-3 h-3 mr-1" />
            Confirmé
          </Badge>
        )
      case "waiting":
        return (
          <Badge variant="secondary" className="bg-yellow-100 text-yellow-800">
            <Clock className="w-3 h-3 mr-1" />
            En attente
          </Badge>
        )
      case "urgent":
        return (
          <Badge variant="destructive">
            <AlertCircle className="w-3 h-3 mr-1" />
            Urgent
          </Badge>
        )
      default:
        return <Badge variant="outline">{status}</Badge>
    }
  }

return (
    <div className="space-y-6">
      {/* Welcome Section */}
      <div className="bg-gradient-to-r from-blue-600 to-blue-800 rounded-lg p-6 text-white">
        <h1 className="text-2xl font-bold mb-2">Bienvenue dans votre clinique</h1>
        <p className="text-blue-100">Voici un aperçu de votre activité aujourd'hui</p>
      </div>

{/* Stats Grid */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        {stats.map((stat, index) => (
          <StatsCard key={index} {...stat} />
        ))}
      </div>

{/* Main Content Grid */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* Recent Appointments */}
        <Card>
          <CardHeader className="flex flex-row items-center justify-between">
            <div>
              <CardTitle>Rendez-vous du Jour</CardTitle>
              <CardDescription>Prochains rendez-vous programmés</CardDescription>
            </div>
            <Button size="sm">
              <CalendarPlus className="w-4 h-4 mr-2" />
              Nouveau RDV
            </Button>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              {recentAppointments.map((appointment) => (
                <div
                  key={appointment.id}
                  className="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-800 rounded-lg"
                >
                  <div className="flex items-center space-x-3">
                    <div className="w-2 h-2 bg-blue-500 rounded-full"></div>
                    <div>
                      <p className="font-medium">{appointment.patient}</p>
                      <p className="text-sm text-gray-500">{appointment.type}</p>
                    </div>
                  </div>
                  <div className="flex items-center space-x-3">
                    <span className="text-sm font-medium">{appointment.time}</span>
                    {getStatusBadge(appointment.status)}
                  </div>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>

{/* Quick Actions */}
        <Card>
          <CardHeader>
            <CardTitle>Actions Rapides</CardTitle>
            <CardDescription>Accès rapide aux fonctionnalités principales</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-2 gap-4">
              <Button variant="outline" className="h-20 flex-col">
                <UserPlus className="w-6 h-6 mb-2" />
                Nouveau Patient
              </Button>
              <Button variant="outline" className="h-20 flex-col">
                <CalendarPlus className="w-6 h-6 mb-2" />
                Nouveau RDV
              </Button>
              <Button variant="outline" className="h-20 flex-col">
                <Clock className="w-6 h-6 mb-2" />
                Salle d'Attente
              </Button>
              <Button variant="outline" className="h-20 flex-col">
                <TrendingUp className="w-6 h-6 mb-2" />
                Statistiques
              </Button>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/Dashboard/StatsCard.tsx"
"use client"

import { Card, CardContent } from "@/components/ui/card"
import { type LucideIcon, TrendingUp, TrendingDown } from "lucide-react"
import { cn } from "@/lib/utils"

interface StatsCardProps {
  title: string
  value: string
  change: string
  trend: "up" | "down"
  icon: LucideIcon
  color: "blue" | "green" | "orange" | "purple"
}

export function StatsCard({ title, value, change, trend, icon: Icon, color }: StatsCardProps) {
  const colorClasses = {
    blue: "bg-blue-100 text-blue-600 dark:bg-blue-900 dark:text-blue-400",
    green: "bg-green-100 text-green-600 dark:bg-green-900 dark:text-green-400",
    orange: "bg-orange-100 text-orange-600 dark:bg-orange-900 dark:text-orange-400",
    purple: "bg-purple-100 text-purple-600 dark:bg-purple-900 dark:text-purple-400",
  }

return (
    <Card>
      <CardContent className="p-6">
        <div className="flex items-center justify-between">
          <div>
            <p className="text-sm font-medium text-gray-600 dark:text-gray-400">{title}</p>
            <p className="text-2xl font-bold text-gray-900 dark:text-white">{value}</p>
            <div className="flex items-center mt-2">
              {trend === "up" ? (
                <TrendingUp className="w-4 h-4 text-green-500 mr-1" />
              ) : (
                <TrendingDown className="w-4 h-4 text-red-500 mr-1" />
              )}
              <span className={cn("text-sm font-medium", trend === "up" ? "text-green-600" : "text-red-600")}>
                {change}
              </span>
            </div>
          </div>
          <div className={cn("p-3 rounded-full", colorClasses[color])}>
            <Icon className="w-6 h-6" />
          </div>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/Layout/Header.tsx"
"use client"

import { useAuth } from "@/contexts/AuthContext"
import { useTheme } from "next-themes"
import { Button } from "@/components/ui/button"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
  DropdownMenuSeparator,
} from "@/components/ui/dropdown-menu"
import { Menu, Moon, Sun, LogOut, Settings, User } from "lucide-react"

interface HeaderProps {
  onMenuClick: () => void
}

export function Header({ onMenuClick }: HeaderProps) {
  const { user, logout } = useAuth()
  const { theme, setTheme } = useTheme()

return (
    <header className="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 px-6 py-4">
      <div className="flex items-center justify-between">
        <div className="flex items-center space-x-4">
          <Button variant="ghost" size="sm" onClick={onMenuClick} className="lg:hidden">
            <Menu className="h-5 w-5" />
          </Button>
          <h1 className="text-xl font-semibold text-gray-900 dark:text-white">Tableau de Bord</h1>
        </div>

<div className="flex items-center space-x-4">
          <Button variant="ghost" size="sm" onClick={() => setTheme(theme === "dark" ? "light" : "dark")}>
            {theme === "dark" ? <Sun className="h-5 w-5" /> : <Moon className="h-5 w-5" />}
          </Button>

<DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="ghost" className="relative h-8 w-8 rounded-full">
                <Avatar className="h-8 w-8">
                  <AvatarImage src={user?.avatar || "/placeholder.svg"} alt={user?.name} />
                  <AvatarFallback>{user?.name?.charAt(0) || "U"}</AvatarFallback>
                </Avatar>
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent className="w-56" align="end" forceMount>
              <div className="flex items-center justify-start gap-2 p-2">
                <div className="flex flex-col space-y-1 leading-none">
                  <p className="font-medium">{user?.name}</p>
                  <p className="w-[200px] truncate text-sm text-muted-foreground">{user?.email}</p>
                </div>
              </div>
              <DropdownMenuSeparator />
              <DropdownMenuItem>
                <User className="mr-2 h-4 w-4" />
                <span>Profil</span>
              </DropdownMenuItem>
              <DropdownMenuItem>
                <Settings className="mr-2 h-4 w-4" />
                <span>Paramètres</span>
              </DropdownMenuItem>
              <DropdownMenuSeparator />
              <DropdownMenuItem onClick={logout}>
                <LogOut className="mr-2 h-4 w-4" />
                <span>Déconnexion</span>
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
      </div>
    </header>
  )
}
[V0_FILE]typescriptreact:file="components/Layout/Layout.tsx"
"use client"

import type React from "react"

import { useState } from "react"
import { Header } from "./Header"
import { Sidebar } from "./Sidebar"
import { ConnectionStatus } from "@/components/Common/ConnectionStatus"
import { NotificationCenter } from "@/components/Common/NotificationCenter"

interface LayoutProps {
  children: React.ReactNode
}

export function Layout({ children }: LayoutProps) {
  const [sidebarOpen, setSidebarOpen] = useState(false)

return (
    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
      <Sidebar isOpen={sidebarOpen} onClose={() => setSidebarOpen(false)} />

<div className={`transition-all duration-300 ${sidebarOpen ? "lg:ml-80" : ""}`}>
        <Header onMenuClick={() => setSidebarOpen(!sidebarOpen)} />

<main className="p-6">{children}</main>
      </div>

<ConnectionStatus />
      <NotificationCenter />
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/Layout/Sidebar.tsx"
"use client"

import { useRouter, usePathname } from "next/navigation"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { ScrollArea } from "@/components/ui/scroll-area"
import {
  LayoutDashboard,
  Users,
  Calendar,
  Clock,
  FileText,
  History,
  Pill,
  TestTube,
  Camera,
  CreditCard,
  Package,
  BarChart3,
  X,
  Stethoscope,
} from "lucide-react"

interface SidebarProps {
  isOpen: boolean
  onClose: () => void
}

const navigation = [
  { name: "Tableau de Bord", href: "/dashboard", icon: LayoutDashboard },
  { name: "Patients", href: "/patients", icon: Users },
  { name: "Rendez-vous", href: "/appointments", icon: Calendar },
  { name: "Salle d'Attente", href: "/waiting-room", icon: Clock },
  { name: "Dossiers Médicaux", href: "/medical-files", icon: FileText },
  { name: "Historique Consultations", href: "/consultation-history", icon: History },
  { name: "Prescriptions", href: "/prescriptions", icon: Pill },
  { name: "Résultats Labo", href: "/lab-results", icon: TestTube },
  { name: "Radiologie", href: "/radiology", icon: Camera },
  { name: "Images de Cas", href: "/case-images", icon: Camera },
  { name: "Facturation", href: "/billing", icon: CreditCard },
  { name: "Inventaire", href: "/inventory", icon: Package },
  { name: "Statistiques", href: "/statistics", icon: BarChart3 },
]

export function Sidebar({ isOpen, onClose }: SidebarProps) {
  const router = useRouter()
  const pathname = usePathname()

const handleNavigation = (href: string) => {
    router.push(href)
    onClose()
  }

return (
    <>
      {/* Mobile overlay */}
      {isOpen && <div className="fixed inset-0 bg-black bg-opacity-50 z-40 lg:hidden" onClick={onClose} />}

{/* Sidebar */}
      <div
        className={cn(
          "fixed left-0 top-0 z-50 h-full w-80 bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 transform transition-transform duration-300 ease-in-out",
          isOpen ? "translate-x-0" : "-translate-x-full lg:translate-x-0",
        )}
      >
        <div className="flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700">
          <div className="flex items-center space-x-3">
            <div className="p-2 bg-blue-100 dark:bg-blue-900 rounded-lg">
              <Stethoscope className="h-6 w-6 text-blue-600 dark:text-blue-400" />
            </div>
            <div>
              <h2 className="text-lg font-semibold text-gray-900 dark:text-white">Clinique Dentaire</h2>
              <p className="text-sm text-gray-500 dark:text-gray-400">Système de Gestion</p>
            </div>
          </div>
          <Button variant="ghost" size="sm" onClick={onClose} className="lg:hidden">
            <X className="h-5 w-5" />
          </Button>
        </div>

<ScrollArea className="flex-1 px-4 py-6">
          <nav className="space-y-2">
            {navigation.map((item) => {
              const isActive = pathname === item.href
              return (
                <Button
                  key={item.name}
                  variant={isActive ? "secondary" : "ghost"}
                  className={cn(
                    "w-full justify-start text-left font-normal",
                    isActive && "bg-blue-50 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300",
                  )}
                  onClick={() => handleNavigation(item.href)}
                >
                  <item.icon className="mr-3 h-5 w-5" />
                  {item.name}
                </Button>
              )
            })}
          </nav>
        </ScrollArea>
      </div>
    </>
  )
}
[V0_FILE]typescriptreact:file="components/WaitingRoom/RealTimeWaitingRoom.tsx"
"use client"

import { useState, useEffect } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { Clock, User, Phone, CheckCircle, AlertCircle, Calendar, MapPin, Bell, Volume2, VolumeX } from "lucide-react"
import { useWebSocket } from "@/contexts/WebSocketContext"
import { useWaitingRoom } from "@/contexts/WaitingRoomContext"

interface WaitingPatient {
  id: string
  name: string
  appointmentTime: string
  status: "waiting" | "called" | "in_consultation" | "completed"
  priority: "normal" | "urgent"
  room?: string
  waitTime: number
}

export default function RealTimeWaitingRoom() {
  const { callPatient, notifications } = useWebSocket()
  const { patients: waitingPatients, updatePatientStatus } = useWaitingRoom()
  const [currentTime, setCurrentTime] = useState(new Date())
  const [soundEnabled, setSoundEnabled] = useState(true)
  const [selectedPatient, setSelectedPatient] = useState<string | null>(null)

// Update current time every minute
  useEffect(() => {
    const timer = setInterval(() => {
      setCurrentTime(new Date())
    }, 60000)

return () => clearInterval(timer)
  }, [])

// Listen for patient calling notifications
  useEffect(() => {
    const patientCalledNotifications = notifications.filter((n) => n.type === "patient" && n.data?.action === "called")

if (patientCalledNotifications.length > 0 && soundEnabled) {
      // Play calling sound
      const audio = new Audio("/sounds/patient-call.mp3")
      audio.play().catch(console.error)
    }
  }, [notifications, soundEnabled])

const handleCallPatient = (patient: WaitingPatient) => {
    callPatient(patient.id, patient.name)
    updatePatientStatus(patient.id, "called")
    setSelectedPatient(patient.id)

// Auto-clear selection after 30 seconds
    setTimeout(() => {
      setSelectedPatient(null)
    }, 30000)
  }

const getStatusColor = (status: string) => {
    switch (status) {
      case "waiting":
        return "bg-blue-100 text-blue-800 dark:bg-blue-900/20 dark:text-blue-400"
      case "called":
        return "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/20 dark:text-yellow-400"
      case "in_consultation":
        return "bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400"
      case "completed":
        return "bg-gray-100 text-gray-800 dark:bg-gray-900/20 dark:text-gray-400"
      default:
        return "bg-gray-100 text-gray-800 dark:bg-gray-900/20 dark:text-gray-400"
    }
  }

const getStatusIcon = (status: string) => {
    switch (status) {
      case "waiting":
        return Clock
      case "called":
        return Bell
      case "in_consultation":
        return User
      case "completed":
        return CheckCircle
      default:
        return Clock
    }
  }

const formatWaitTime = (minutes: number) => {
    const hours = Math.floor(minutes / 60)
    const mins = minutes % 60

if (hours > 0) {
      return `${hours}h ${mins}min`
    }
    return `${mins}min`
  }

const waitingCount = waitingPatients.filter((p) => p.status === "waiting").length
  const calledCount = waitingPatients.filter((p) => p.status === "called").length
  const inConsultationCount = waitingPatients.filter((p) => p.status === "in_consultation").length

return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800 p-6">
      {/* Header */}
      <div className="max-w-7xl mx-auto">
        <div className="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-8 mb-8">
          <div className="flex items-center justify-between">
            <div>
              <h1 className="text-4xl font-bold text-gray-900 dark:text-gray-100 mb-2">Salle d'Attente</h1>
              <p className="text-lg text-gray-600 dark:text-gray-400">
                {currentTime.toLocaleString("fr-FR", {
                  weekday: "long",
                  year: "numeric",
                  month: "long",
                  day: "numeric",
                  hour: "2-digit",
                  minute: "2-digit",
                })}
              </p>
            </div>

<div className="flex items-center space-x-4">
              <button
                onClick={() => setSoundEnabled(!soundEnabled)}
                className={`p-3 rounded-full transition-colors duration-200 ${
                  soundEnabled
                    ? "bg-blue-100 text-blue-600 dark:bg-blue-900/20 dark:text-blue-400"
                    : "bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400"
                }`}
              >
                {soundEnabled ? <Volume2 className="w-6 h-6" /> : <VolumeX className="w-6 h-6" />}
              </button>
            </div>
          </div>

{/* Statistics */}
          <div className="grid grid-cols-1 md:grid-cols-4 gap-6 mt-8">
            <div className="bg-blue-50 dark:bg-blue-900/20 rounded-xl p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-blue-600 dark:text-blue-400 text-sm font-medium">En Attente</p>
                  <p className="text-3xl font-bold text-blue-700 dark:text-blue-300">{waitingCount}</p>
                </div>
                <Clock className="w-8 h-8 text-blue-500" />
              </div>
            </div>

<div className="bg-yellow-50 dark:bg-yellow-900/20 rounded-xl p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-yellow-600 dark:text-yellow-400 text-sm font-medium">Appelés</p>
                  <p className="text-3xl font-bold text-yellow-700 dark:text-yellow-300">{calledCount}</p>
                </div>
                <Bell className="w-8 h-8 text-yellow-500" />
              </div>
            </div>

<div className="bg-green-50 dark:bg-green-900/20 rounded-xl p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-green-600 dark:text-green-400 text-sm font-medium">En Consultation</p>
                  <p className="text-3xl font-bold text-green-700 dark:text-green-300">{inConsultationCount}</p>
                </div>
                <User className="w-8 h-8 text-green-500" />
              </div>
            </div>

<div className="bg-purple-50 dark:bg-purple-900/20 rounded-xl p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-purple-600 dark:text-purple-400 text-sm font-medium">Total</p>
                  <p className="text-3xl font-bold text-purple-700 dark:text-purple-300">{waitingPatients.length}</p>
                </div>
                <Calendar className="w-8 h-8 text-purple-500" />
              </div>
            </div>
          </div>
        </div>

{/* Patients List */}
        <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6">
          <AnimatePresence>
            {waitingPatients.map((patient) => {
              const StatusIcon = getStatusIcon(patient.status)
              const isSelected = selectedPatient === patient.id
              const isUrgent = patient.priority === "urgent"

return (
                <motion.div
                  key={patient.id}
                  layout
                  initial={{ opacity: 0, scale: 0.9 }}
                  animate={{ opacity: 1, scale: 1 }}
                  exit={{ opacity: 0, scale: 0.9 }}
                  className={`bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-6 transition-all duration-300 ${
                    isSelected ? "ring-4 ring-blue-500 ring-opacity-50" : ""
                  } ${isUrgent ? "border-l-4 border-red-500" : ""}`}
                >
                  <div className="flex items-center justify-between mb-4">
                    <div className="flex items-center space-x-3">
                      <div className={`p-2 rounded-full ${getStatusColor(patient.status)}`}>
                        <StatusIcon className="w-5 h-5" />
                      </div>
                      <div>
                        <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100">{patient.name}</h3>
                        <p className="text-sm text-gray-600 dark:text-gray-400">RDV: {patient.appointmentTime}</p>
                      </div>
                    </div>

{isUrgent && <AlertCircle className="w-6 h-6 text-red-500" />}
                  </div>

<div className="space-y-3">
                    <div className="flex items-center justify-between">
                      <span className="text-sm text-gray-600 dark:text-gray-400">Temps d'attente:</span>
                      <span className="text-sm font-medium text-gray-900 dark:text-gray-100">
                        {formatWaitTime(patient.waitTime)}
                      </span>
                    </div>

{patient.room && (
                      <div className="flex items-center justify-between">
                        <span className="text-sm text-gray-600 dark:text-gray-400">Cabinet:</span>
                        <div className="flex items-center space-x-1">
                          <MapPin className="w-4 h-4 text-gray-500" />
                          <span className="text-sm font-medium text-gray-900 dark:text-gray-100">{patient.room}</span>
                        </div>
                      </div>
                    )}

<div className="flex items-center justify-between">
                      <span className="text-sm text-gray-600 dark:text-gray-400">Statut:</span>
                      <span className={`px-3 py-1 rounded-full text-xs font-medium ${getStatusColor(patient.status)}`}>
                        {patient.status === "waiting"
                          ? "En attente"
                          : patient.status === "called"
                            ? "Appelé"
                            : patient.status === "in_consultation"
                              ? "En consultation"
                              : "Terminé"}
                      </span>
                    </div>
                  </div>

{/* Action Buttons */}
                  <div className="mt-6 flex space-x-3">
                    {patient.status === "waiting" && (
                      <motion.button
                        whileHover={{ scale: 1.02 }}
                        whileTap={{ scale: 0.98 }}
                        onClick={() => handleCallPatient(patient)}
                        className="flex-1 bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg font-medium transition-colors duration-200 flex items-center justify-center space-x-2"
                      >
                        <Phone className="w-4 h-4" />
                        <span>Appeler</span>
                      </motion.button>
                    )}

{patient.status === "called" && (
                      <motion.button
                        whileHover={{ scale: 1.02 }}
                        whileTap={{ scale: 0.98 }}
                        onClick={() => updatePatientStatus(patient.id, "in_consultation")}
                        className="flex-1 bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg font-medium transition-colors duration-200 flex items-center justify-center space-x-2"
                      >
                        <User className="w-4 h-4" />
                        <span>Commencer</span>
                      </motion.button>
                    )}

{patient.status === "in_consultation" && (
                      <motion.button
                        whileHover={{ scale: 1.02 }}
                        whileTap={{ scale: 0.98 }}
                        onClick={() => updatePatientStatus(patient.id, "completed")}
                        className="flex-1 bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-lg font-medium transition-colors duration-200 flex items-center justify-center space-x-2"
                      >
                        <CheckCircle className="w-4 h-4" />
                        <span>Terminer</span>
                      </motion.button>
                    )}
                  </div>
                </motion.div>
              )
            })}
          </AnimatePresence>
        </div>

{/* Empty State */}
        {waitingPatients.length === 0 && (
          <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="text-center py-16">
            <Clock className="w-16 h-16 text-gray-400 mx-auto mb-4" />
            <h3 className="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">Aucun patient en attente</h3>
            <p className="text-gray-600 dark:text-gray-400">La salle d'attente est vide pour le moment.</p>
          </motion.div>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/theme-provider.tsx"
'use client'

import * as React from 'react'
import {
  ThemeProvider as NextThemesProvider,
  type ThemeProviderProps,
} from 'next-themes'

export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}
[V0_FILE]typescriptreact:file="components/ui/accordion.tsx"
"use client"

import * as React from "react"
import * as AccordionPrimitive from "@radix-ui/react-accordion"
import { ChevronDown } from "lucide-react"

import { cn } from "@/lib/utils"

const Accordion = AccordionPrimitive.Root

const AccordionItem = React.forwardRef<
  React.ElementRef<typeof AccordionPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
>(({ className, ...props }, ref) => (
  <AccordionPrimitive.Item
    ref={ref}
    className={cn("border-b", className)}
    {...props}
  />
))
AccordionItem.displayName = "AccordionItem"

const AccordionTrigger = React.forwardRef<
  React.ElementRef<typeof AccordionPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
>(({ className, children, ...props }, ref) => (
  <AccordionPrimitive.Header className="flex">
    <AccordionPrimitive.Trigger
      ref={ref}
      className={cn(
        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
        className
      )}
      {...props}
    >
      {children}
      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
    </AccordionPrimitive.Trigger>
  </AccordionPrimitive.Header>
))
AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName

const AccordionContent = React.forwardRef<
  React.ElementRef<typeof AccordionPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
>(({ className, children, ...props }, ref) => (
  <AccordionPrimitive.Content
    ref={ref}
    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
    {...props}
  >
    <div className={cn("pb-4 pt-0", className)}>{children}</div>
  </AccordionPrimitive.Content>
))

AccordionContent.displayName = AccordionPrimitive.Content.displayName

export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
[V0_FILE]typescriptreact:file="components/ui/alert-dialog.tsx"
"use client"

import * as React from "react"
import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"

import { cn } from "@/lib/utils"
import { buttonVariants } from "@/components/ui/button"

const AlertDialog = AlertDialogPrimitive.Root

const AlertDialogTrigger = AlertDialogPrimitive.Trigger

const AlertDialogPortal = AlertDialogPrimitive.Portal

const AlertDialogOverlay = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
>(({ className, ...props }, ref) => (
  <AlertDialogPrimitive.Overlay
    className={cn(
      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
      className
    )}
    {...props}
    ref={ref}
  />
))
AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName

const AlertDialogContent = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
>(({ className, ...props }, ref) => (
  <AlertDialogPortal>
    <AlertDialogOverlay />
    <AlertDialogPrimitive.Content
      ref={ref}
      className={cn(
        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg 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-lg",
        className
      )}
      {...props}
    />
  </AlertDialogPortal>
))
AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName

const AlertDialogHeader = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn(
      "flex flex-col space-y-2 text-center sm:text-left",
      className
    )}
    {...props}
  />
)
AlertDialogHeader.displayName = "AlertDialogHeader"

const AlertDialogFooter = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn(
      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
      className
    )}
    {...props}
  />
)
AlertDialogFooter.displayName = "AlertDialogFooter"

const AlertDialogTitle = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Title>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
>(({ className, ...props }, ref) => (
  <AlertDialogPrimitive.Title
    ref={ref}
    className={cn("text-lg font-semibold", className)}
    {...props}
  />
))
AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName

const AlertDialogDescription = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Description>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
>(({ className, ...props }, ref) => (
  <AlertDialogPrimitive.Description
    ref={ref}
    className={cn("text-sm text-muted-foreground", className)}
    {...props}
  />
))
AlertDialogDescription.displayName =
  AlertDialogPrimitive.Description.displayName

const AlertDialogAction = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Action>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
>(({ className, ...props }, ref) => (
  <AlertDialogPrimitive.Action
    ref={ref}
    className={cn(buttonVariants(), className)}
    {...props}
  />
))
AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName

const AlertDialogCancel = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
>(({ className, ...props }, ref) => (
  <AlertDialogPrimitive.Cancel
    ref={ref}
    className={cn(
      buttonVariants({ variant: "outline" }),
      "mt-2 sm:mt-0",
      className
    )}
    {...props}
  />
))
AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName

export {
  AlertDialog,
  AlertDialogPortal,
  AlertDialogOverlay,
  AlertDialogTrigger,
  AlertDialogContent,
  AlertDialogHeader,
  AlertDialogFooter,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogAction,
  AlertDialogCancel,
}
[V0_FILE]typescriptreact:file="components/ui/alert.tsx"
import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const alertVariants = cva(
  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
  {
    variants: {
      variant: {
        default: "bg-background text-foreground",
        destructive:
          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  }
)

const Alert = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
>(({ className, variant, ...props }, ref) => (
  <div
    ref={ref}
    role="alert"
    className={cn(alertVariants({ variant }), className)}
    {...props}
  />
))
Alert.displayName = "Alert"

const AlertTitle = React.forwardRef<
  HTMLParagraphElement,
  React.HTMLAttributes<HTMLHeadingElement>
>(({ className, ...props }, ref) => (
  <h5
    ref={ref}
    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
    {...props}
  />
))
AlertTitle.displayName = "AlertTitle"

const AlertDescription = React.forwardRef<
  HTMLParagraphElement,
  React.HTMLAttributes<HTMLParagraphElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn("text-sm [&_p]:leading-relaxed", className)}
    {...props}
  />
))
AlertDescription.displayName = "AlertDescription"

export { Alert, AlertTitle, AlertDescription }
[V0_FILE]typescriptreact:file="components/ui/aspect-ratio.tsx"
"use client"

import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"

const AspectRatio = AspectRatioPrimitive.Root

export { AspectRatio }
[V0_FILE]typescriptreact:file="components/ui/avatar.tsx"
"use client"

import * as React from "react"
import * as AvatarPrimitive from "@radix-ui/react-avatar"

import { cn } from "@/lib/utils"

const Avatar = React.forwardRef<
  React.ElementRef<typeof AvatarPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
>(({ className, ...props }, ref) => (
  <AvatarPrimitive.Root
    ref={ref}
    className={cn(
      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
      className
    )}
    {...props}
  />
))
Avatar.displayName = AvatarPrimitive.Root.displayName

const AvatarImage = React.forwardRef<
  React.ElementRef<typeof AvatarPrimitive.Image>,
  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
>(({ className, ...props }, ref) => (
  <AvatarPrimitive.Image
    ref={ref}
    className={cn("aspect-square h-full w-full", className)}
    {...props}
  />
))
AvatarImage.displayName = AvatarPrimitive.Image.displayName

const AvatarFallback = React.forwardRef<
  React.ElementRef<typeof AvatarPrimitive.Fallback>,
  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
>(({ className, ...props }, ref) => (
  <AvatarPrimitive.Fallback
    ref={ref}
    className={cn(
      "flex h-full w-full items-center justify-center rounded-full bg-muted",
      className
    )}
    {...props}
  />
))
AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName

export { Avatar, AvatarImage, AvatarFallback }
[V0_FILE]typescriptreact:file="components/ui/badge.tsx"
import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const badgeVariants = cva(
  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
  {
    variants: {
      variant: {
        default:
          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
        secondary:
          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
        destructive:
          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
        outline: "text-foreground",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  }
)

export interface BadgeProps
  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof badgeVariants> {}

function Badge({ className, variant, ...props }: BadgeProps) {
  return (
    <div className={cn(badgeVariants({ variant }), className)} {...props} />
  )
}

export { Badge, badgeVariants }
[V0_FILE]typescriptreact:file="components/ui/breadcrumb.tsx"
import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { ChevronRight, MoreHorizontal } from "lucide-react"

import { cn } from "@/lib/utils"

const Breadcrumb = React.forwardRef<
  HTMLElement,
  React.ComponentPropsWithoutRef<"nav"> & {
    separator?: React.ReactNode
  }
>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />)
Breadcrumb.displayName = "Breadcrumb"

const BreadcrumbList = React.forwardRef<
  HTMLOListElement,
  React.ComponentPropsWithoutRef<"ol">
>(({ className, ...props }, ref) => (
  <ol
    ref={ref}
    className={cn(
      "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
      className
    )}
    {...props}
  />
))
BreadcrumbList.displayName = "BreadcrumbList"

const BreadcrumbItem = React.forwardRef<
  HTMLLIElement,
  React.ComponentPropsWithoutRef<"li">
>(({ className, ...props }, ref) => (
  <li
    ref={ref}
    className={cn("inline-flex items-center gap-1.5", className)}
    {...props}
  />
))
BreadcrumbItem.displayName = "BreadcrumbItem"

const BreadcrumbLink = React.forwardRef<
  HTMLAnchorElement,
  React.ComponentPropsWithoutRef<"a"> & {
    asChild?: boolean
  }
>(({ asChild, className, ...props }, ref) => {
  const Comp = asChild ? Slot : "a"

return (
    <Comp
      ref={ref}
      className={cn("transition-colors hover:text-foreground", className)}
      {...props}
    />
  )
})
BreadcrumbLink.displayName = "BreadcrumbLink"

const BreadcrumbPage = React.forwardRef<
  HTMLSpanElement,
  React.ComponentPropsWithoutRef<"span">
>(({ className, ...props }, ref) => (
  <span
    ref={ref}
    role="link"
    aria-disabled="true"
    aria-current="page"
    className={cn("font-normal text-foreground", className)}
    {...props}
  />
))
BreadcrumbPage.displayName = "BreadcrumbPage"

const BreadcrumbSeparator = ({
  children,
  className,
  ...props
}: React.ComponentProps<"li">) => (
  <li
    role="presentation"
    aria-hidden="true"
    className={cn("[&>svg]:w-3.5 [&>svg]:h-3.5", className)}
    {...props}
  >
    {children ?? <ChevronRight />}
  </li>
)
BreadcrumbSeparator.displayName = "BreadcrumbSeparator"

const BreadcrumbEllipsis = ({
  className,
  ...props
}: React.ComponentProps<"span">) => (
  <span
    role="presentation"
    aria-hidden="true"
    className={cn("flex h-9 w-9 items-center justify-center", className)}
    {...props}
  >
    <MoreHorizontal className="h-4 w-4" />
    <span className="sr-only">More</span>
  </span>
)
BreadcrumbEllipsis.displayName = "BreadcrumbElipssis"

export {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbPage,
  BreadcrumbSeparator,
  BreadcrumbEllipsis,
}
[V0_FILE]typescriptreact:file="components/ui/button.tsx"
import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const buttonVariants = cva(
  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/90",
        destructive:
          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
        outline:
          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
        secondary:
          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
        ghost: "hover:bg-accent hover:text-accent-foreground",
        link: "text-primary underline-offset-4 hover:underline",
      },
      size: {
        default: "h-10 px-4 py-2",
        sm: "h-9 rounded-md px-3",
        lg: "h-11 rounded-md px-8",
        icon: "h-10 w-10",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)

export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {
  asChild?: boolean
}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, asChild = false, ...props }, ref) => {
    const Comp = asChild ? Slot : "button"
    return (
      <Comp
        className={cn(buttonVariants({ variant, size, className }))}
        ref={ref}
        {...props}
      />
    )
  }
)
Button.displayName = "Button"

export { Button, buttonVariants }
[V0_FILE]typescriptreact:file="components/ui/calendar.tsx"
"use client"

import * as React from "react"
import { ChevronLeft, ChevronRight } from "lucide-react"
import { DayPicker } from "react-day-picker"

import { cn } from "@/lib/utils"
import { buttonVariants } from "@/components/ui/button"

export type CalendarProps = React.ComponentProps<typeof DayPicker>

function Calendar({
  className,
  classNames,
  showOutsideDays = true,
  ...props
}: CalendarProps) {
  return (
    <DayPicker
      showOutsideDays={showOutsideDays}
      className={cn("p-3", className)}
      classNames={{
        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
        month: "space-y-4",
        caption: "flex justify-center pt-1 relative items-center",
        caption_label: "text-sm font-medium",
        nav: "space-x-1 flex items-center",
        nav_button: cn(
          buttonVariants({ variant: "outline" }),
          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
        ),
        nav_button_previous: "absolute left-1",
        nav_button_next: "absolute right-1",
        table: "w-full border-collapse space-y-1",
        head_row: "flex",
        head_cell:
          "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
        row: "flex w-full mt-2",
        cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
        day: cn(
          buttonVariants({ variant: "ghost" }),
          "h-9 w-9 p-0 font-normal aria-selected:opacity-100"
        ),
        day_range_end: "day-range-end",
        day_selected:
          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
        day_today: "bg-accent text-accent-foreground",
        day_outside:
          "day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground",
        day_disabled: "text-muted-foreground opacity-50",
        day_range_middle:
          "aria-selected:bg-accent aria-selected:text-accent-foreground",
        day_hidden: "invisible",
        ...classNames,
      }}
      components={{
        IconLeft: ({ ...props }) => <ChevronLeft className="h-4 w-4" />,
        IconRight: ({ ...props }) => <ChevronRight className="h-4 w-4" />,
      }}
      {...props}
    />
  )
}
Calendar.displayName = "Calendar"

export { Calendar }
[V0_FILE]typescriptreact:file="components/ui/card.tsx"
import * as React from "react"

import { cn } from "@/lib/utils"

const Card = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn(
      "rounded-lg border bg-card text-card-foreground shadow-sm",
      className
    )}
    {...props}
  />
))
Card.displayName = "Card"

const CardHeader = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn("flex flex-col space-y-1.5 p-6", className)}
    {...props}
  />
))
CardHeader.displayName = "CardHeader"

const CardTitle = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn(
      "text-2xl font-semibold leading-none tracking-tight",
      className
    )}
    {...props}
  />
))
CardTitle.displayName = "CardTitle"

const CardDescription = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn("text-sm text-muted-foreground", className)}
    {...props}
  />
))
CardDescription.displayName = "CardDescription"

const CardContent = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
))
CardContent.displayName = "CardContent"

const CardFooter = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn("flex items-center p-6 pt-0", className)}
    {...props}
  />
))
CardFooter.displayName = "CardFooter"

export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
[V0_FILE]typescriptreact:file="components/ui/carousel.tsx"
"use client"

import * as React from "react"
import useEmblaCarousel, {
  type UseEmblaCarouselType,
} from "embla-carousel-react"
import { ArrowLeft, ArrowRight } from "lucide-react"

import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"

type CarouselApi = UseEmblaCarouselType[1]
type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
type CarouselOptions = UseCarouselParameters[0]
type CarouselPlugin = UseCarouselParameters[1]

type CarouselProps = {
  opts?: CarouselOptions
  plugins?: CarouselPlugin
  orientation?: "horizontal" | "vertical"
  setApi?: (api: CarouselApi) => void
}

type CarouselContextProps = {
  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
  api: ReturnType<typeof useEmblaCarousel>[1]
  scrollPrev: () => void
  scrollNext: () => void
  canScrollPrev: boolean
  canScrollNext: boolean
} & CarouselProps

const CarouselContext = React.createContext<CarouselContextProps | null>(null)

function useCarousel() {
  const context = React.useContext(CarouselContext)

if (!context) {
    throw new Error("useCarousel must be used within a <Carousel />")
  }

return context
}

const Carousel = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement> & CarouselProps
>(
  (
    {
      orientation = "horizontal",
      opts,
      setApi,
      plugins,
      className,
      children,
      ...props
    },
    ref
  ) => {
    const [carouselRef, api] = useEmblaCarousel(
      {
        ...opts,
        axis: orientation === "horizontal" ? "x" : "y",
      },
      plugins
    )
    const [canScrollPrev, setCanScrollPrev] = React.useState(false)
    const [canScrollNext, setCanScrollNext] = React.useState(false)

const onSelect = React.useCallback((api: CarouselApi) => {
      if (!api) {
        return
      }

setCanScrollPrev(api.canScrollPrev())
      setCanScrollNext(api.canScrollNext())
    }, [])

const scrollPrev = React.useCallback(() => {
      api?.scrollPrev()
    }, [api])

const scrollNext = React.useCallback(() => {
      api?.scrollNext()
    }, [api])

const handleKeyDown = React.useCallback(
      (event: React.KeyboardEvent<HTMLDivElement>) => {
        if (event.key === "ArrowLeft") {
          event.preventDefault()
          scrollPrev()
        } else if (event.key === "ArrowRight") {
          event.preventDefault()
          scrollNext()
        }
      },
      [scrollPrev, scrollNext]
    )

React.useEffect(() => {
      if (!api || !setApi) {
        return
      }

setApi(api)
    }, [api, setApi])

React.useEffect(() => {
      if (!api) {
        return
      }

onSelect(api)
      api.on("reInit", onSelect)
      api.on("select", onSelect)

return () => {
        api?.off("select", onSelect)
      }
    }, [api, onSelect])

return (
      <CarouselContext.Provider
        value={{
          carouselRef,
          api: api,
          opts,
          orientation:
            orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
          scrollPrev,
          scrollNext,
          canScrollPrev,
          canScrollNext,
        }}
      >
        <div
          ref={ref}
          onKeyDownCapture={handleKeyDown}
          className={cn("relative", className)}
          role="region"
          aria-roledescription="carousel"
          {...props}
        >
          {children}
        </div>
      </CarouselContext.Provider>
    )
  }
)
Carousel.displayName = "Carousel"

const CarouselContent = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => {
  const { carouselRef, orientation } = useCarousel()

return (
    <div ref={carouselRef} className="overflow-hidden">
      <div
        ref={ref}
        className={cn(
          "flex",
          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
          className
        )}
        {...props}
      />
    </div>
  )
})
CarouselContent.displayName = "CarouselContent"

const CarouselItem = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => {
  const { orientation } = useCarousel()

return (
    <div
      ref={ref}
      role="group"
      aria-roledescription="slide"
      className={cn(
        "min-w-0 shrink-0 grow-0 basis-full",
        orientation === "horizontal" ? "pl-4" : "pt-4",
        className
      )}
      {...props}
    />
  )
})
CarouselItem.displayName = "CarouselItem"

const CarouselPrevious = React.forwardRef<
  HTMLButtonElement,
  React.ComponentProps<typeof Button>
>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
  const { orientation, scrollPrev, canScrollPrev } = useCarousel()

return (
    <Button
      ref={ref}
      variant={variant}
      size={size}
      className={cn(
        "absolute  h-8 w-8 rounded-full",
        orientation === "horizontal"
          ? "-left-12 top-1/2 -translate-y-1/2"
          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
        className
      )}
      disabled={!canScrollPrev}
      onClick={scrollPrev}
      {...props}
    >
      <ArrowLeft className="h-4 w-4" />
      <span className="sr-only">Previous slide</span>
    </Button>
  )
})
CarouselPrevious.displayName = "CarouselPrevious"

const CarouselNext = React.forwardRef<
  HTMLButtonElement,
  React.ComponentProps<typeof Button>
>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
  const { orientation, scrollNext, canScrollNext } = useCarousel()

return (
    <Button
      ref={ref}
      variant={variant}
      size={size}
      className={cn(
        "absolute h-8 w-8 rounded-full",
        orientation === "horizontal"
          ? "-right-12 top-1/2 -translate-y-1/2"
          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
        className
      )}
      disabled={!canScrollNext}
      onClick={scrollNext}
      {...props}
    >
      <ArrowRight className="h-4 w-4" />
      <span className="sr-only">Next slide</span>
    </Button>
  )
})
CarouselNext.displayName = "CarouselNext"

export {
  type CarouselApi,
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselPrevious,
  CarouselNext,
}
[V0_FILE]typescriptreact:file="components/ui/chart.tsx"
"use client"

import * as React from "react"
import * as RechartsPrimitive from "recharts"

import { cn } from "@/lib/utils"

// Format: { THEME_NAME: CSS_SELECTOR }
const THEMES = { light: "", dark: ".dark" } as const

export type ChartConfig = {
  [k in string]: {
    label?: React.ReactNode
    icon?: React.ComponentType
  } & (
    | { color?: string; theme?: never }
    | { color?: never; theme: Record<keyof typeof THEMES, string> }
  )
}

type ChartContextProps = {
  config: ChartConfig
}

const ChartContext = React.createContext<ChartContextProps | null>(null)

function useChart() {
  const context = React.useContext(ChartContext)

if (!context) {
    throw new Error("useChart must be used within a <ChartContainer />")
  }

return context
}

const ChartContainer = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div"> & {
    config: ChartConfig
    children: React.ComponentProps<
      typeof RechartsPrimitive.ResponsiveContainer
    >["children"]
  }
>(({ id, className, children, config, ...props }, ref) => {
  const uniqueId = React.useId()
  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`

return (
    <ChartContext.Provider value={{ config }}>
      <div
        data-chart={chartId}
        ref={ref}
        className={cn(
          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
          className
        )}
        {...props}
      >
        <ChartStyle id={chartId} config={config} />
        <RechartsPrimitive.ResponsiveContainer>
          {children}
        </RechartsPrimitive.ResponsiveContainer>
      </div>
    </ChartContext.Provider>
  )
})
ChartContainer.displayName = "Chart"

const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
  const colorConfig = Object.entries(config).filter(
    ([_, config]) => config.theme || config.color
  )

if (!colorConfig.length) {
    return null
  }

return (
    <style
      dangerouslySetInnerHTML={{
        __html: Object.entries(THEMES)
          .map(
            ([theme, prefix]) => `
${prefix} [data-chart=${id}] {
${colorConfig
  .map(([key, itemConfig]) => {
    const color =
      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
      itemConfig.color
    return color ? `  --color-${key}: ${color};` : null
  })
  .join("\n")}
}
`
          )
          .join("\n"),
      }}
    />
  )
}

const ChartTooltip = RechartsPrimitive.Tooltip

const ChartTooltipContent = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
    React.ComponentProps<"div"> & {
      hideLabel?: boolean
      hideIndicator?: boolean
      indicator?: "line" | "dot" | "dashed"
      nameKey?: string
      labelKey?: string
    }
>(
  (
    {
      active,
      payload,
      className,
      indicator = "dot",
      hideLabel = false,
      hideIndicator = false,
      label,
      labelFormatter,
      labelClassName,
      formatter,
      color,
      nameKey,
      labelKey,
    },
    ref
  ) => {
    const { config } = useChart()

const tooltipLabel = React.useMemo(() => {
      if (hideLabel || !payload?.length) {
        return null
      }

const [item] = payload
      const key = `${labelKey || item.dataKey || item.name || "value"}`
      const itemConfig = getPayloadConfigFromPayload(config, item, key)
      const value =
        !labelKey && typeof label === "string"
          ? config[label as keyof typeof config]?.label || label
          : itemConfig?.label

if (labelFormatter) {
        return (
          <div className={cn("font-medium", labelClassName)}>
            {labelFormatter(value, payload)}
          </div>
        )
      }

if (!value) {
        return null
      }

return <div className={cn("font-medium", labelClassName)}>{value}</div>
    }, [
      label,
      labelFormatter,
      payload,
      hideLabel,
      labelClassName,
      config,
      labelKey,
    ])

if (!active || !payload?.length) {
      return null
    }

const nestLabel = payload.length === 1 && indicator !== "dot"

return (
      <div
        ref={ref}
        className={cn(
          "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
          className
        )}
      >
        {!nestLabel ? tooltipLabel : null}
        <div className="grid gap-1.5">
          {payload.map((item, index) => {
            const key = `${nameKey || item.name || item.dataKey || "value"}`
            const itemConfig = getPayloadConfigFromPayload(config, item, key)
            const indicatorColor = color || item.payload.fill || item.color

return (
              <div
                key={item.dataKey}
                className={cn(
                  "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
                  indicator === "dot" && "items-center"
                )}
              >
                {formatter && item?.value !== undefined && item.name ? (
                  formatter(item.value, item.name, item, index, item.payload)
                ) : (
                  <>
                    {itemConfig?.icon ? (
                      <itemConfig.icon />
                    ) : (
                      !hideIndicator && (
                        <div
                          className={cn(
                            "shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
                            {
                              "h-2.5 w-2.5": indicator === "dot",
                              "w-1": indicator === "line",
                              "w-0 border-[1.5px] border-dashed bg-transparent":
                                indicator === "dashed",
                              "my-0.5": nestLabel && indicator === "dashed",
                            }
                          )}
                          style={
                            {
                              "--color-bg": indicatorColor,
                              "--color-border": indicatorColor,
                            } as React.CSSProperties
                          }
                        />
                      )
                    )}
                    <div
                      className={cn(
                        "flex flex-1 justify-between leading-none",
                        nestLabel ? "items-end" : "items-center"
                      )}
                    >
                      <div className="grid gap-1.5">
                        {nestLabel ? tooltipLabel : null}
                        <span className="text-muted-foreground">
                          {itemConfig?.label || item.name}
                        </span>
                      </div>
                      {item.value && (
                        <span className="font-mono font-medium tabular-nums text-foreground">
                          {item.value.toLocaleString()}
                        </span>
                      )}
                    </div>
                  </>
                )}
              </div>
            )
          })}
        </div>
      </div>
    )
  }
)
ChartTooltipContent.displayName = "ChartTooltip"

const ChartLegend = RechartsPrimitive.Legend

const ChartLegendContent = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div"> &
    Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
      hideIcon?: boolean
      nameKey?: string
    }
>(
  (
    { className, hideIcon = false, payload, verticalAlign = "bottom", nameKey },
    ref
  ) => {
    const { config } = useChart()

if (!payload?.length) {
      return null
    }

return (
      <div
        ref={ref}
        className={cn(
          "flex items-center justify-center gap-4",
          verticalAlign === "top" ? "pb-3" : "pt-3",
          className
        )}
      >
        {payload.map((item) => {
          const key = `${nameKey || item.dataKey || "value"}`
          const itemConfig = getPayloadConfigFromPayload(config, item, key)

return (
            <div
              key={item.value}
              className={cn(
                "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
              )}
            >
              {itemConfig?.icon && !hideIcon ? (
                <itemConfig.icon />
              ) : (
                <div
                  className="h-2 w-2 shrink-0 rounded-[2px]"
                  style={{
                    backgroundColor: item.color,
                  }}
                />
              )}
              {itemConfig?.label}
            </div>
          )
        })}
      </div>
    )
  }
)
ChartLegendContent.displayName = "ChartLegend"

// Helper to extract item config from a payload.
function getPayloadConfigFromPayload(
  config: ChartConfig,
  payload: unknown,
  key: string
) {
  if (typeof payload !== "object" || payload === null) {
    return undefined
  }

const payloadPayload =
    "payload" in payload &&
    typeof payload.payload === "object" &&
    payload.payload !== null
      ? payload.payload
      : undefined

let configLabelKey: string = key

if (
    key in payload &&
    typeof payload[key as keyof typeof payload] === "string"
  ) {
    configLabelKey = payload[key as keyof typeof payload] as string
  } else if (
    payloadPayload &&
    key in payloadPayload &&
    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
  ) {
    configLabelKey = payloadPayload[
      key as keyof typeof payloadPayload
    ] as string
  }

return configLabelKey in config
    ? config[configLabelKey]
    : config[key as keyof typeof config]
}

export {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  ChartLegend,
  ChartLegendContent,
  ChartStyle,
}
[V0_FILE]typescriptreact:file="components/ui/checkbox.tsx"
"use client"

import * as React from "react"
import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
import { Check } from "lucide-react"

import { cn } from "@/lib/utils"

const Checkbox = React.forwardRef<
  React.ElementRef<typeof CheckboxPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
>(({ className, ...props }, ref) => (
  <CheckboxPrimitive.Root
    ref={ref}
    className={cn(
      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
      className
    )}
    {...props}
  >
    <CheckboxPrimitive.Indicator
      className={cn("flex items-center justify-center text-current")}
    >
      <Check className="h-4 w-4" />
    </CheckboxPrimitive.Indicator>
  </CheckboxPrimitive.Root>
))
Checkbox.displayName = CheckboxPrimitive.Root.displayName

export { Checkbox }
[V0_FILE]typescriptreact:file="components/ui/collapsible.tsx"
"use client"

import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"

const Collapsible = CollapsiblePrimitive.Root

const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger

const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent

export { Collapsible, CollapsibleTrigger, CollapsibleContent }
[V0_FILE]typescriptreact:file="components/ui/command.tsx"
"use client"

import * as React from "react"
import { type DialogProps } from "@radix-ui/react-dialog"
import { Command as CommandPrimitive } from "cmdk"
import { Search } from "lucide-react"

import { cn } from "@/lib/utils"
import { Dialog, DialogContent } from "@/components/ui/dialog"

const Command = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
>(({ className, ...props }, ref) => (
  <CommandPrimitive
    ref={ref}
    className={cn(
      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
      className
    )}
    {...props}
  />
))
Command.displayName = CommandPrimitive.displayName

const CommandDialog = ({ children, ...props }: DialogProps) => {
  return (
    <Dialog {...props}>
      <DialogContent className="overflow-hidden p-0 shadow-lg">
        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
          {children}
        </Command>
      </DialogContent>
    </Dialog>
  )
}

const CommandInput = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.Input>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
>(({ className, ...props }, ref) => (
  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
    <CommandPrimitive.Input
      ref={ref}
      className={cn(
        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
        className
      )}
      {...props}
    />
  </div>
))

CommandInput.displayName = CommandPrimitive.Input.displayName

const CommandList = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.List>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
>(({ className, ...props }, ref) => (
  <CommandPrimitive.List
    ref={ref}
    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
    {...props}
  />
))

CommandList.displayName = CommandPrimitive.List.displayName

const CommandEmpty = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.Empty>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
>((props, ref) => (
  <CommandPrimitive.Empty
    ref={ref}
    className="py-6 text-center text-sm"
    {...props}
  />
))

CommandEmpty.displayName = CommandPrimitive.Empty.displayName

const CommandGroup = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.Group>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
>(({ className, ...props }, ref) => (
  <CommandPrimitive.Group
    ref={ref}
    className={cn(
      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
      className
    )}
    {...props}
  />
))

CommandGroup.displayName = CommandPrimitive.Group.displayName

const CommandSeparator = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.Separator>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
>(({ className, ...props }, ref) => (
  <CommandPrimitive.Separator
    ref={ref}
    className={cn("-mx-1 h-px bg-border", className)}
    {...props}
  />
))
CommandSeparator.displayName = CommandPrimitive.Separator.displayName

const CommandItem = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
>(({ className, ...props }, ref) => (
  <CommandPrimitive.Item
    ref={ref}
    className={cn(
      "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
      className
    )}
    {...props}
  />
))

CommandItem.displayName = CommandPrimitive.Item.displayName

const CommandShortcut = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLSpanElement>) => {
  return (
    <span
      className={cn(
        "ml-auto text-xs tracking-widest text-muted-foreground",
        className
      )}
      {...props}
    />
  )
}
CommandShortcut.displayName = "CommandShortcut"

export {
  Command,
  CommandDialog,
  CommandInput,
  CommandList,
  CommandEmpty,
  CommandGroup,
  CommandItem,
  CommandShortcut,
  CommandSeparator,
}
[V0_FILE]typescriptreact:file="components/ui/context-menu.tsx"
"use client"

import * as React from "react"
import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
import { Check, ChevronRight, Circle } from "lucide-react"

import { cn } from "@/lib/utils"

const ContextMenu = ContextMenuPrimitive.Root

const ContextMenuTrigger = ContextMenuPrimitive.Trigger

const ContextMenuGroup = ContextMenuPrimitive.Group

const ContextMenuPortal = ContextMenuPrimitive.Portal

const ContextMenuSub = ContextMenuPrimitive.Sub

const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup

const ContextMenuSubTrigger = React.forwardRef<
  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
    inset?: boolean
  }
>(({ className, inset, children, ...props }, ref) => (
  <ContextMenuPrimitive.SubTrigger
    ref={ref}
    className={cn(
      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
      inset && "pl-8",
      className
    )}
    {...props}
  >
    {children}
    <ChevronRight className="ml-auto h-4 w-4" />
  </ContextMenuPrimitive.SubTrigger>
))
ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName

const ContextMenuSubContent = React.forwardRef<
  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
>(({ className, ...props }, ref) => (
  <ContextMenuPrimitive.SubContent
    ref={ref}
    className={cn(
      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
      className
    )}
    {...props}
  />
))
ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName

const ContextMenuContent = React.forwardRef<
  React.ElementRef<typeof ContextMenuPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
>(({ className, ...props }, ref) => (
  <ContextMenuPrimitive.Portal>
    <ContextMenuPrimitive.Content
      ref={ref}
      className={cn(
        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
        className
      )}
      {...props}
    />
  </ContextMenuPrimitive.Portal>
))
ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName

const ContextMenuItem = React.forwardRef<
  React.ElementRef<typeof ContextMenuPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
    inset?: boolean
  }
>(({ className, inset, ...props }, ref) => (
  <ContextMenuPrimitive.Item
    ref={ref}
    className={cn(
      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
      inset && "pl-8",
      className
    )}
    {...props}
  />
))
ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName

const ContextMenuCheckboxItem = React.forwardRef<
  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
>(({ className, children, checked, ...props }, ref) => (
  <ContextMenuPrimitive.CheckboxItem
    ref={ref}
    className={cn(
      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
      className
    )}
    checked={checked}
    {...props}
  >
    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <ContextMenuPrimitive.ItemIndicator>
        <Check className="h-4 w-4" />
      </ContextMenuPrimitive.ItemIndicator>
    </span>
    {children}
  </ContextMenuPrimitive.CheckboxItem>
))
ContextMenuCheckboxItem.displayName =
  ContextMenuPrimitive.CheckboxItem.displayName

const ContextMenuRadioItem = React.forwardRef<
  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
>(({ className, children, ...props }, ref) => (
  <ContextMenuPrimitive.RadioItem
    ref={ref}
    className={cn(
      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
      className
    )}
    {...props}
  >
    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <ContextMenuPrimitive.ItemIndicator>
        <Circle className="h-2 w-2 fill-current" />
      </ContextMenuPrimitive.ItemIndicator>
    </span>
    {children}
  </ContextMenuPrimitive.RadioItem>
))
ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName

const ContextMenuLabel = React.forwardRef<
  React.ElementRef<typeof ContextMenuPrimitive.Label>,
  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
    inset?: boolean
  }
>(({ className, inset, ...props }, ref) => (
  <ContextMenuPrimitive.Label
    ref={ref}
    className={cn(
      "px-2 py-1.5 text-sm font-semibold text-foreground",
      inset && "pl-8",
      className
    )}
    {...props}
  />
))
ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName

const ContextMenuSeparator = React.forwardRef<
  React.ElementRef<typeof ContextMenuPrimitive.Separator>,
  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
>(({ className, ...props }, ref) => (
  <ContextMenuPrimitive.Separator
    ref={ref}
    className={cn("-mx-1 my-1 h-px bg-border", className)}
    {...props}
  />
))
ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName

const ContextMenuShortcut = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLSpanElement>) => {
  return (
    <span
      className={cn(
        "ml-auto text-xs tracking-widest text-muted-foreground",
        className
      )}
      {...props}
    />
  )
}
ContextMenuShortcut.displayName = "ContextMenuShortcut"

export {
  ContextMenu,
  ContextMenuTrigger,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuCheckboxItem,
  ContextMenuRadioItem,
  ContextMenuLabel,
  ContextMenuSeparator,
  ContextMenuShortcut,
  ContextMenuGroup,
  ContextMenuPortal,
  ContextMenuSub,
  ContextMenuSubContent,
  ContextMenuSubTrigger,
  ContextMenuRadioGroup,
}
[V0_FILE]typescriptreact:file="components/ui/dialog.tsx"
"use client"

import * as React from "react"
import * as DialogPrimitive from "@radix-ui/react-dialog"
import { X } from "lucide-react"

import { cn } from "@/lib/utils"

const Dialog = DialogPrimitive.Root

const DialogTrigger = DialogPrimitive.Trigger

const DialogPortal = DialogPrimitive.Portal

const DialogClose = DialogPrimitive.Close

const DialogOverlay = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Overlay>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
>(({ className, ...props }, ref) => (
  <DialogPrimitive.Overlay
    ref={ref}
    className={cn(
      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
      className
    )}
    {...props}
  />
))
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName

const DialogContent = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
>(({ className, children, ...props }, ref) => (
  <DialogPortal>
    <DialogOverlay />
    <DialogPrimitive.Content
      ref={ref}
      className={cn(
        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg 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-lg",
        className
      )}
      {...props}
    >
      {children}
      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
        <X className="h-4 w-4" />
        <span className="sr-only">Close</span>
      </DialogPrimitive.Close>
    </DialogPrimitive.Content>
  </DialogPortal>
))
DialogContent.displayName = DialogPrimitive.Content.displayName

const DialogHeader = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn(
      "flex flex-col space-y-1.5 text-center sm:text-left",
      className
    )}
    {...props}
  />
)
DialogHeader.displayName = "DialogHeader"

const DialogFooter = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn(
      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
      className
    )}
    {...props}
  />
)
DialogFooter.displayName = "DialogFooter"

const DialogTitle = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Title>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
>(({ className, ...props }, ref) => (
  <DialogPrimitive.Title
    ref={ref}
    className={cn(
      "text-lg font-semibold leading-none tracking-tight",
      className
    )}
    {...props}
  />
))
DialogTitle.displayName = DialogPrimitive.Title.displayName

const DialogDescription = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Description>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
>(({ className, ...props }, ref) => (
  <DialogPrimitive.Description
    ref={ref}
    className={cn("text-sm text-muted-foreground", className)}
    {...props}
  />
))
DialogDescription.displayName = DialogPrimitive.Description.displayName

export {
  Dialog,
  DialogPortal,
  DialogOverlay,
  DialogClose,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogFooter,
  DialogTitle,
  DialogDescription,
}
[V0_FILE]typescriptreact:file="components/ui/drawer.tsx"
"use client"

import * as React from "react"
import { Drawer as DrawerPrimitive } from "vaul"

import { cn } from "@/lib/utils"

const Drawer = ({
  shouldScaleBackground = true,
  ...props
}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
  <DrawerPrimitive.Root
    shouldScaleBackground={shouldScaleBackground}
    {...props}
  />
)
Drawer.displayName = "Drawer"

const DrawerTrigger = DrawerPrimitive.Trigger

const DrawerPortal = DrawerPrimitive.Portal

const DrawerClose = DrawerPrimitive.Close

const DrawerOverlay = React.forwardRef<
  React.ElementRef<typeof DrawerPrimitive.Overlay>,
  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
>(({ className, ...props }, ref) => (
  <DrawerPrimitive.Overlay
    ref={ref}
    className={cn("fixed inset-0 z-50 bg-black/80", className)}
    {...props}
  />
))
DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName

const DrawerContent = React.forwardRef<
  React.ElementRef<typeof DrawerPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
>(({ className, children, ...props }, ref) => (
  <DrawerPortal>
    <DrawerOverlay />
    <DrawerPrimitive.Content
      ref={ref}
      className={cn(
        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
        className
      )}
      {...props}
    >
      <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
      {children}
    </DrawerPrimitive.Content>
  </DrawerPortal>
))
DrawerContent.displayName = "DrawerContent"

const DrawerHeader = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
    {...props}
  />
)
DrawerHeader.displayName = "DrawerHeader"

const DrawerFooter = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn("mt-auto flex flex-col gap-2 p-4", className)}
    {...props}
  />
)
DrawerFooter.displayName = "DrawerFooter"

const DrawerTitle = React.forwardRef<
  React.ElementRef<typeof DrawerPrimitive.Title>,
  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
>(({ className, ...props }, ref) => (
  <DrawerPrimitive.Title
    ref={ref}
    className={cn(
      "text-lg font-semibold leading-none tracking-tight",
      className
    )}
    {...props}
  />
))
DrawerTitle.displayName = DrawerPrimitive.Title.displayName

const DrawerDescription = React.forwardRef<
  React.ElementRef<typeof DrawerPrimitive.Description>,
  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
>(({ className, ...props }, ref) => (
  <DrawerPrimitive.Description
    ref={ref}
    className={cn("text-sm text-muted-foreground", className)}
    {...props}
  />
))
DrawerDescription.displayName = DrawerPrimitive.Description.displayName

export {
  Drawer,
  DrawerPortal,
  DrawerOverlay,
  DrawerTrigger,
  DrawerClose,
  DrawerContent,
  DrawerHeader,
  DrawerFooter,
  DrawerTitle,
  DrawerDescription,
}
[V0_FILE]typescriptreact:file="components/ui/dropdown-menu.tsx"
"use client"

import * as React from "react"
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
import { Check, ChevronRight, Circle } from "lucide-react"

import { cn } from "@/lib/utils"

const DropdownMenu = DropdownMenuPrimitive.Root

const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger

const DropdownMenuGroup = DropdownMenuPrimitive.Group

const DropdownMenuPortal = DropdownMenuPrimitive.Portal

const DropdownMenuSub = DropdownMenuPrimitive.Sub

const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup

const DropdownMenuSubTrigger = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
    inset?: boolean
  }
>(({ className, inset, children, ...props }, ref) => (
  <DropdownMenuPrimitive.SubTrigger
    ref={ref}
    className={cn(
      "flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
      inset && "pl-8",
      className
    )}
    {...props}
  >
    {children}
    <ChevronRight className="ml-auto" />
  </DropdownMenuPrimitive.SubTrigger>
))
DropdownMenuSubTrigger.displayName =
  DropdownMenuPrimitive.SubTrigger.displayName

const DropdownMenuSubContent = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
>(({ className, ...props }, ref) => (
  <DropdownMenuPrimitive.SubContent
    ref={ref}
    className={cn(
      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
      className
    )}
    {...props}
  />
))
DropdownMenuSubContent.displayName =
  DropdownMenuPrimitive.SubContent.displayName

const DropdownMenuContent = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
>(({ className, sideOffset = 4, ...props }, ref) => (
  <DropdownMenuPrimitive.Portal>
    <DropdownMenuPrimitive.Content
      ref={ref}
      sideOffset={sideOffset}
      className={cn(
        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
        className
      )}
      {...props}
    />
  </DropdownMenuPrimitive.Portal>
))
DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName

const DropdownMenuItem = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
    inset?: boolean
  }
>(({ className, inset, ...props }, ref) => (
  <DropdownMenuPrimitive.Item
    ref={ref}
    className={cn(
      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
      inset && "pl-8",
      className
    )}
    {...props}
  />
))
DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName

const DropdownMenuCheckboxItem = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
>(({ className, children, checked, ...props }, ref) => (
  <DropdownMenuPrimitive.CheckboxItem
    ref={ref}
    className={cn(
      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
      className
    )}
    checked={checked}
    {...props}
  >
    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <DropdownMenuPrimitive.ItemIndicator>
        <Check className="h-4 w-4" />
      </DropdownMenuPrimitive.ItemIndicator>
    </span>
    {children}
  </DropdownMenuPrimitive.CheckboxItem>
))
DropdownMenuCheckboxItem.displayName =
  DropdownMenuPrimitive.CheckboxItem.displayName

const DropdownMenuRadioItem = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
>(({ className, children, ...props }, ref) => (
  <DropdownMenuPrimitive.RadioItem
    ref={ref}
    className={cn(
      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
      className
    )}
    {...props}
  >
    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <DropdownMenuPrimitive.ItemIndicator>
        <Circle className="h-2 w-2 fill-current" />
      </DropdownMenuPrimitive.ItemIndicator>
    </span>
    {children}
  </DropdownMenuPrimitive.RadioItem>
))
DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName

const DropdownMenuLabel = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
    inset?: boolean
  }
>(({ className, inset, ...props }, ref) => (
  <DropdownMenuPrimitive.Label
    ref={ref}
    className={cn(
      "px-2 py-1.5 text-sm font-semibold",
      inset && "pl-8",
      className
    )}
    {...props}
  />
))
DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName

const DropdownMenuSeparator = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
>(({ className, ...props }, ref) => (
  <DropdownMenuPrimitive.Separator
    ref={ref}
    className={cn("-mx-1 my-1 h-px bg-muted", className)}
    {...props}
  />
))
DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName

const DropdownMenuShortcut = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLSpanElement>) => {
  return (
    <span
      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
      {...props}
    />
  )
}
DropdownMenuShortcut.displayName = "DropdownMenuShortcut"

export {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuCheckboxItem,
  DropdownMenuRadioItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuGroup,
  DropdownMenuPortal,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuRadioGroup,
}
[V0_FILE]typescriptreact:file="components/ui/form.tsx"
"use client"

import * as React from "react"
import * as LabelPrimitive from "@radix-ui/react-label"
import { Slot } from "@radix-ui/react-slot"
import {
  Controller,
  ControllerProps,
  FieldPath,
  FieldValues,
  FormProvider,
  useFormContext,
} from "react-hook-form"

import { cn } from "@/lib/utils"
import { Label } from "@/components/ui/label"

const Form = FormProvider

type FormFieldContextValue<
  TFieldValues extends FieldValues = FieldValues,
  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
> = {
  name: TName
}

const FormFieldContext = React.createContext<FormFieldContextValue>(
  {} as FormFieldContextValue
)

const FormField = <
  TFieldValues extends FieldValues = FieldValues,
  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
>({
  ...props
}: ControllerProps<TFieldValues, TName>) => {
  return (
    <FormFieldContext.Provider value={{ name: props.name }}>
      <Controller {...props} />
    </FormFieldContext.Provider>
  )
}

const useFormField = () => {
  const fieldContext = React.useContext(FormFieldContext)
  const itemContext = React.useContext(FormItemContext)
  const { getFieldState, formState } = useFormContext()

const fieldState = getFieldState(fieldContext.name, formState)

if (!fieldContext) {
    throw new Error("useFormField should be used within <FormField>")
  }

const { id } = itemContext

return {
    id,
    name: fieldContext.name,
    formItemId: `${id}-form-item`,
    formDescriptionId: `${id}-form-item-description`,
    formMessageId: `${id}-form-item-message`,
    ...fieldState,
  }
}

type FormItemContextValue = {
  id: string
}

const FormItemContext = React.createContext<FormItemContextValue>(
  {} as FormItemContextValue
)

const FormItem = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => {
  const id = React.useId()

return (
    <FormItemContext.Provider value={{ id }}>
      <div ref={ref} className={cn("space-y-2", className)} {...props} />
    </FormItemContext.Provider>
  )
})
FormItem.displayName = "FormItem"

const FormLabel = React.forwardRef<
  React.ElementRef<typeof LabelPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
>(({ className, ...props }, ref) => {
  const { error, formItemId } = useFormField()

return (
    <Label
      ref={ref}
      className={cn(error && "text-destructive", className)}
      htmlFor={formItemId}
      {...props}
    />
  )
})
FormLabel.displayName = "FormLabel"

const FormControl = React.forwardRef<
  React.ElementRef<typeof Slot>,
  React.ComponentPropsWithoutRef<typeof Slot>
>(({ ...props }, ref) => {
  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()

return (
    <Slot
      ref={ref}
      id={formItemId}
      aria-describedby={
        !error
          ? `${formDescriptionId}`
          : `${formDescriptionId} ${formMessageId}`
      }
      aria-invalid={!!error}
      {...props}
    />
  )
})
FormControl.displayName = "FormControl"

const FormDescription = React.forwardRef<
  HTMLParagraphElement,
  React.HTMLAttributes<HTMLParagraphElement>
>(({ className, ...props }, ref) => {
  const { formDescriptionId } = useFormField()

return (
    <p
      ref={ref}
      id={formDescriptionId}
      className={cn("text-sm text-muted-foreground", className)}
      {...props}
    />
  )
})
FormDescription.displayName = "FormDescription"

const FormMessage = React.forwardRef<
  HTMLParagraphElement,
  React.HTMLAttributes<HTMLParagraphElement>
>(({ className, children, ...props }, ref) => {
  const { error, formMessageId } = useFormField()
  const body = error ? String(error?.message) : children

if (!body) {
    return null
  }

return (
    <p
      ref={ref}
      id={formMessageId}
      className={cn("text-sm font-medium text-destructive", className)}
      {...props}
    >
      {body}
    </p>
  )
})
FormMessage.displayName = "FormMessage"

export {
  useFormField,
  Form,
  FormItem,
  FormLabel,
  FormControl,
  FormDescription,
  FormMessage,
  FormField,
}
[V0_FILE]typescriptreact:file="components/ui/hover-card.tsx"
"use client"

import * as React from "react"
import * as HoverCardPrimitive from "@radix-ui/react-hover-card"

import { cn } from "@/lib/utils"

const HoverCard = HoverCardPrimitive.Root

const HoverCardTrigger = HoverCardPrimitive.Trigger

const HoverCardContent = React.forwardRef<
  React.ElementRef<typeof HoverCardPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
  <HoverCardPrimitive.Content
    ref={ref}
    align={align}
    sideOffset={sideOffset}
    className={cn(
      "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
      className
    )}
    {...props}
  />
))
HoverCardContent.displayName = HoverCardPrimitive.Content.displayName

export { HoverCard, HoverCardTrigger, HoverCardContent }
[V0_FILE]typescriptreact:file="components/ui/input-otp.tsx"
"use client"

import * as React from "react"
import { OTPInput, OTPInputContext } from "input-otp"
import { Dot } from "lucide-react"

import { cn } from "@/lib/utils"

const InputOTP = React.forwardRef<
  React.ElementRef<typeof OTPInput>,
  React.ComponentPropsWithoutRef<typeof OTPInput>
>(({ className, containerClassName, ...props }, ref) => (
  <OTPInput
    ref={ref}
    containerClassName={cn(
      "flex items-center gap-2 has-[:disabled]:opacity-50",
      containerClassName
    )}
    className={cn("disabled:cursor-not-allowed", className)}
    {...props}
  />
))
InputOTP.displayName = "InputOTP"

const InputOTPGroup = React.forwardRef<
  React.ElementRef<"div">,
  React.ComponentPropsWithoutRef<"div">
>(({ className, ...props }, ref) => (
  <div ref={ref} className={cn("flex items-center", className)} {...props} />
))
InputOTPGroup.displayName = "InputOTPGroup"

const InputOTPSlot = React.forwardRef<
  React.ElementRef<"div">,
  React.ComponentPropsWithoutRef<"div"> & { index: number }
>(({ index, className, ...props }, ref) => {
  const inputOTPContext = React.useContext(OTPInputContext)
  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]

return (
    <div
      ref={ref}
      className={cn(
        "relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
        isActive && "z-10 ring-2 ring-ring ring-offset-background",
        className
      )}
      {...props}
    >
      {char}
      {hasFakeCaret && (
        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
          <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
        </div>
      )}
    </div>
  )
})
InputOTPSlot.displayName = "InputOTPSlot"

const InputOTPSeparator = React.forwardRef<
  React.ElementRef<"div">,
  React.ComponentPropsWithoutRef<"div">
>(({ ...props }, ref) => (
  <div ref={ref} role="separator" {...props}>
    <Dot />
  </div>
))
InputOTPSeparator.displayName = "InputOTPSeparator"

export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }
[V0_FILE]typescriptreact:file="components/ui/input.tsx"
import * as React from "react"

import { cn } from "@/lib/utils"

const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
  ({ className, type, ...props }, ref) => {
    return (
      <input
        type={type}
        className={cn(
          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
          className
        )}
        ref={ref}
        {...props}
      />
    )
  }
)
Input.displayName = "Input"

export { Input }
[V0_FILE]typescriptreact:file="components/ui/label.tsx"
"use client"

import * as React from "react"
import * as LabelPrimitive from "@radix-ui/react-label"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const labelVariants = cva(
  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
)

const Label = React.forwardRef<
  React.ElementRef<typeof LabelPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
    VariantProps<typeof labelVariants>
>(({ className, ...props }, ref) => (
  <LabelPrimitive.Root
    ref={ref}
    className={cn(labelVariants(), className)}
    {...props}
  />
))
Label.displayName = LabelPrimitive.Root.displayName

export { Label }
[V0_FILE]typescriptreact:file="components/ui/menubar.tsx"
"use client"

import * as React from "react"
import * as MenubarPrimitive from "@radix-ui/react-menubar"
import { Check, ChevronRight, Circle } from "lucide-react"

import { cn } from "@/lib/utils"

const MenubarMenu = MenubarPrimitive.Menu

const MenubarGroup = MenubarPrimitive.Group

const MenubarPortal = MenubarPrimitive.Portal

const MenubarSub = MenubarPrimitive.Sub

const MenubarRadioGroup = MenubarPrimitive.RadioGroup

const Menubar = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>
>(({ className, ...props }, ref) => (
  <MenubarPrimitive.Root
    ref={ref}
    className={cn(
      "flex h-10 items-center space-x-1 rounded-md border bg-background p-1",
      className
    )}
    {...props}
  />
))
Menubar.displayName = MenubarPrimitive.Root.displayName

const MenubarTrigger = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>
>(({ className, ...props }, ref) => (
  <MenubarPrimitive.Trigger
    ref={ref}
    className={cn(
      "flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
      className
    )}
    {...props}
  />
))
MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName

const MenubarSubTrigger = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.SubTrigger>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {
    inset?: boolean
  }
>(({ className, inset, children, ...props }, ref) => (
  <MenubarPrimitive.SubTrigger
    ref={ref}
    className={cn(
      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
      inset && "pl-8",
      className
    )}
    {...props}
  >
    {children}
    <ChevronRight className="ml-auto h-4 w-4" />
  </MenubarPrimitive.SubTrigger>
))
MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName

const MenubarSubContent = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.SubContent>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>
>(({ className, ...props }, ref) => (
  <MenubarPrimitive.SubContent
    ref={ref}
    className={cn(
      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
      className
    )}
    {...props}
  />
))
MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName

const MenubarContent = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>
>(
  (
    { className, align = "start", alignOffset = -4, sideOffset = 8, ...props },
    ref
  ) => (
    <MenubarPrimitive.Portal>
      <MenubarPrimitive.Content
        ref={ref}
        align={align}
        alignOffset={alignOffset}
        sideOffset={sideOffset}
        className={cn(
          "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
          className
        )}
        {...props}
      />
    </MenubarPrimitive.Portal>
  )
)
MenubarContent.displayName = MenubarPrimitive.Content.displayName

const MenubarItem = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {
    inset?: boolean
  }
>(({ className, inset, ...props }, ref) => (
  <MenubarPrimitive.Item
    ref={ref}
    className={cn(
      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
      inset && "pl-8",
      className
    )}
    {...props}
  />
))
MenubarItem.displayName = MenubarPrimitive.Item.displayName

const MenubarCheckboxItem = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>
>(({ className, children, checked, ...props }, ref) => (
  <MenubarPrimitive.CheckboxItem
    ref={ref}
    className={cn(
      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
      className
    )}
    checked={checked}
    {...props}
  >
    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <MenubarPrimitive.ItemIndicator>
        <Check className="h-4 w-4" />
      </MenubarPrimitive.ItemIndicator>
    </span>
    {children}
  </MenubarPrimitive.CheckboxItem>
))
MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName

const MenubarRadioItem = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.RadioItem>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>
>(({ className, children, ...props }, ref) => (
  <MenubarPrimitive.RadioItem
    ref={ref}
    className={cn(
      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
      className
    )}
    {...props}
  >
    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <MenubarPrimitive.ItemIndicator>
        <Circle className="h-2 w-2 fill-current" />
      </MenubarPrimitive.ItemIndicator>
    </span>
    {children}
  </MenubarPrimitive.RadioItem>
))
MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName

const MenubarLabel = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.Label>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {
    inset?: boolean
  }
>(({ className, inset, ...props }, ref) => (
  <MenubarPrimitive.Label
    ref={ref}
    className={cn(
      "px-2 py-1.5 text-sm font-semibold",
      inset && "pl-8",
      className
    )}
    {...props}
  />
))
MenubarLabel.displayName = MenubarPrimitive.Label.displayName

const MenubarSeparator = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.Separator>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>
>(({ className, ...props }, ref) => (
  <MenubarPrimitive.Separator
    ref={ref}
    className={cn("-mx-1 my-1 h-px bg-muted", className)}
    {...props}
  />
))
MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName

const MenubarShortcut = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLSpanElement>) => {
  return (
    <span
      className={cn(
        "ml-auto text-xs tracking-widest text-muted-foreground",
        className
      )}
      {...props}
    />
  )
}
MenubarShortcut.displayname = "MenubarShortcut"

export {
  Menubar,
  MenubarMenu,
  MenubarTrigger,
  MenubarContent,
  MenubarItem,
  MenubarSeparator,
  MenubarLabel,
  MenubarCheckboxItem,
  MenubarRadioGroup,
  MenubarRadioItem,
  MenubarPortal,
  MenubarSubContent,
  MenubarSubTrigger,
  MenubarGroup,
  MenubarSub,
  MenubarShortcut,
}
[V0_FILE]typescriptreact:file="components/ui/navigation-menu.tsx"
import * as React from "react"
import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
import { cva } from "class-variance-authority"
import { ChevronDown } from "lucide-react"

import { cn } from "@/lib/utils"

const NavigationMenu = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
>(({ className, children, ...props }, ref) => (
  <NavigationMenuPrimitive.Root
    ref={ref}
    className={cn(
      "relative z-10 flex max-w-max flex-1 items-center justify-center",
      className
    )}
    {...props}
  >
    {children}
    <NavigationMenuViewport />
  </NavigationMenuPrimitive.Root>
))
NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName

const NavigationMenuList = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.List>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
>(({ className, ...props }, ref) => (
  <NavigationMenuPrimitive.List
    ref={ref}
    className={cn(
      "group flex flex-1 list-none items-center justify-center space-x-1",
      className
    )}
    {...props}
  />
))
NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName

const NavigationMenuItem = NavigationMenuPrimitive.Item

const navigationMenuTriggerStyle = cva(
  "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50"
)

const NavigationMenuTrigger = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
>(({ className, children, ...props }, ref) => (
  <NavigationMenuPrimitive.Trigger
    ref={ref}
    className={cn(navigationMenuTriggerStyle(), "group", className)}
    {...props}
  >
    {children}{" "}
    <ChevronDown
      className="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
      aria-hidden="true"
    />
  </NavigationMenuPrimitive.Trigger>
))
NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName

const NavigationMenuContent = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
>(({ className, ...props }, ref) => (
  <NavigationMenuPrimitive.Content
    ref={ref}
    className={cn(
      "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
      className
    )}
    {...props}
  />
))
NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName

const NavigationMenuLink = NavigationMenuPrimitive.Link

const NavigationMenuViewport = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
>(({ className, ...props }, ref) => (
  <div className={cn("absolute left-0 top-full flex justify-center")}>
    <NavigationMenuPrimitive.Viewport
      className={cn(
        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
        className
      )}
      ref={ref}
      {...props}
    />
  </div>
))
NavigationMenuViewport.displayName =
  NavigationMenuPrimitive.Viewport.displayName

const NavigationMenuIndicator = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
>(({ className, ...props }, ref) => (
  <NavigationMenuPrimitive.Indicator
    ref={ref}
    className={cn(
      "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
      className
    )}
    {...props}
  >
    <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
  </NavigationMenuPrimitive.Indicator>
))
NavigationMenuIndicator.displayName =
  NavigationMenuPrimitive.Indicator.displayName

export {
  navigationMenuTriggerStyle,
  NavigationMenu,
  NavigationMenuList,
  NavigationMenuItem,
  NavigationMenuContent,
  NavigationMenuTrigger,
  NavigationMenuLink,
  NavigationMenuIndicator,
  NavigationMenuViewport,
}
[V0_FILE]typescriptreact:file="components/ui/pagination.tsx"
import * as React from "react"
import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"

import { cn } from "@/lib/utils"
import { ButtonProps, buttonVariants } from "@/components/ui/button"

const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
  <nav
    role="navigation"
    aria-label="pagination"
    className={cn("mx-auto flex w-full justify-center", className)}
    {...props}
  />
)
Pagination.displayName = "Pagination"

const PaginationContent = React.forwardRef<
  HTMLUListElement,
  React.ComponentProps<"ul">
>(({ className, ...props }, ref) => (
  <ul
    ref={ref}
    className={cn("flex flex-row items-center gap-1", className)}
    {...props}
  />
))
PaginationContent.displayName = "PaginationContent"

const PaginationItem = React.forwardRef<
  HTMLLIElement,
  React.ComponentProps<"li">
>(({ className, ...props }, ref) => (
  <li ref={ref} className={cn("", className)} {...props} />
))
PaginationItem.displayName = "PaginationItem"

type PaginationLinkProps = {
  isActive?: boolean
} & Pick<ButtonProps, "size"> &
  React.ComponentProps<"a">

const PaginationLink = ({
  className,
  isActive,
  size = "icon",
  ...props
}: PaginationLinkProps) => (
  <a
    aria-current={isActive ? "page" : undefined}
    className={cn(
      buttonVariants({
        variant: isActive ? "outline" : "ghost",
        size,
      }),
      className
    )}
    {...props}
  />
)
PaginationLink.displayName = "PaginationLink"

const PaginationPrevious = ({
  className,
  ...props
}: React.ComponentProps<typeof PaginationLink>) => (
  <PaginationLink
    aria-label="Go to previous page"
    size="default"
    className={cn("gap-1 pl-2.5", className)}
    {...props}
  >
    <ChevronLeft className="h-4 w-4" />
    <span>Previous</span>
  </PaginationLink>
)
PaginationPrevious.displayName = "PaginationPrevious"

const PaginationNext = ({
  className,
  ...props
}: React.ComponentProps<typeof PaginationLink>) => (
  <PaginationLink
    aria-label="Go to next page"
    size="default"
    className={cn("gap-1 pr-2.5", className)}
    {...props}
  >
    <span>Next</span>
    <ChevronRight className="h-4 w-4" />
  </PaginationLink>
)
PaginationNext.displayName = "PaginationNext"

const PaginationEllipsis = ({
  className,
  ...props
}: React.ComponentProps<"span">) => (
  <span
    aria-hidden
    className={cn("flex h-9 w-9 items-center justify-center", className)}
    {...props}
  >
    <MoreHorizontal className="h-4 w-4" />
    <span className="sr-only">More pages</span>
  </span>
)
PaginationEllipsis.displayName = "PaginationEllipsis"

export {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
}
[V0_FILE]typescriptreact:file="components/ui/popover.tsx"
"use client"

import * as React from "react"
import * as PopoverPrimitive from "@radix-ui/react-popover"

import { cn } from "@/lib/utils"

const Popover = PopoverPrimitive.Root

const PopoverTrigger = PopoverPrimitive.Trigger

const PopoverContent = React.forwardRef<
  React.ElementRef<typeof PopoverPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
  <PopoverPrimitive.Portal>
    <PopoverPrimitive.Content
      ref={ref}
      align={align}
      sideOffset={sideOffset}
      className={cn(
        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
        className
      )}
      {...props}
    />
  </PopoverPrimitive.Portal>
))
PopoverContent.displayName = PopoverPrimitive.Content.displayName

export { Popover, PopoverTrigger, PopoverContent }
[V0_FILE]typescriptreact:file="components/ui/progress.tsx"
"use client"

import * as React from "react"
import * as ProgressPrimitive from "@radix-ui/react-progress"

import { cn } from "@/lib/utils"

const Progress = React.forwardRef<
  React.ElementRef<typeof ProgressPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
>(({ className, value, ...props }, ref) => (
  <ProgressPrimitive.Root
    ref={ref}
    className={cn(
      "relative h-4 w-full overflow-hidden rounded-full bg-secondary",
      className
    )}
    {...props}
  >
    <ProgressPrimitive.Indicator
      className="h-full w-full flex-1 bg-primary transition-all"
      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
    />
  </ProgressPrimitive.Root>
))
Progress.displayName = ProgressPrimitive.Root.displayName

export { Progress }
[V0_FILE]typescriptreact:file="components/ui/radio-group.tsx"
"use client"

import * as React from "react"
import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
import { Circle } from "lucide-react"

import { cn } from "@/lib/utils"

const RadioGroup = React.forwardRef<
  React.ElementRef<typeof RadioGroupPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
>(({ className, ...props }, ref) => {
  return (
    <RadioGroupPrimitive.Root
      className={cn("grid gap-2", className)}
      {...props}
      ref={ref}
    />
  )
})
RadioGroup.displayName = RadioGroupPrimitive.Root.displayName

const RadioGroupItem = React.forwardRef<
  React.ElementRef<typeof RadioGroupPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
>(({ className, ...props }, ref) => {
  return (
    <RadioGroupPrimitive.Item
      ref={ref}
      className={cn(
        "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
        className
      )}
      {...props}
    >
      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
        <Circle className="h-2.5 w-2.5 fill-current text-current" />
      </RadioGroupPrimitive.Indicator>
    </RadioGroupPrimitive.Item>
  )
})
RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName

export { RadioGroup, RadioGroupItem }
[V0_FILE]typescriptreact:file="components/ui/resizable.tsx"
"use client"

import { GripVertical } from "lucide-react"
import * as ResizablePrimitive from "react-resizable-panels"

import { cn } from "@/lib/utils"

const ResizablePanelGroup = ({
  className,
  ...props
}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
  <ResizablePrimitive.PanelGroup
    className={cn(
      "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
      className
    )}
    {...props}
  />
)

const ResizablePanel = ResizablePrimitive.Panel

const ResizableHandle = ({
  withHandle,
  className,
  ...props
}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
  withHandle?: boolean
}) => (
  <ResizablePrimitive.PanelResizeHandle
    className={cn(
      "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
      className
    )}
    {...props}
  >
    {withHandle && (
      <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
        <GripVertical className="h-2.5 w-2.5" />
      </div>
    )}
  </ResizablePrimitive.PanelResizeHandle>
)

export { ResizablePanelGroup, ResizablePanel, ResizableHandle }
[V0_FILE]typescriptreact:file="components/ui/scroll-area.tsx"
"use client"

import * as React from "react"
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"

import { cn } from "@/lib/utils"

const ScrollArea = React.forwardRef<
  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
>(({ className, children, ...props }, ref) => (
  <ScrollAreaPrimitive.Root
    ref={ref}
    className={cn("relative overflow-hidden", className)}
    {...props}
  >
    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
      {children}
    </ScrollAreaPrimitive.Viewport>
    <ScrollBar />
    <ScrollAreaPrimitive.Corner />
  </ScrollAreaPrimitive.Root>
))
ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName

const ScrollBar = React.forwardRef<
  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
>(({ className, orientation = "vertical", ...props }, ref) => (
  <ScrollAreaPrimitive.ScrollAreaScrollbar
    ref={ref}
    orientation={orientation}
    className={cn(
      "flex touch-none select-none transition-colors",
      orientation === "vertical" &&
        "h-full w-2.5 border-l border-l-transparent p-[1px]",
      orientation === "horizontal" &&
        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
      className
    )}
    {...props}
  >
    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
  </ScrollAreaPrimitive.ScrollAreaScrollbar>
))
ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName

export { ScrollArea, ScrollBar }
[V0_FILE]typescriptreact:file="components/ui/select.tsx"
"use client"

import * as React from "react"
import * as SelectPrimitive from "@radix-ui/react-select"
import { Check, ChevronDown, ChevronUp } from "lucide-react"

import { cn } from "@/lib/utils"

const Select = SelectPrimitive.Root

const SelectGroup = SelectPrimitive.Group

const SelectValue = SelectPrimitive.Value

const SelectTrigger = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
>(({ className, children, ...props }, ref) => (
  <SelectPrimitive.Trigger
    ref={ref}
    className={cn(
      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
      className
    )}
    {...props}
  >
    {children}
    <SelectPrimitive.Icon asChild>
      <ChevronDown className="h-4 w-4 opacity-50" />
    </SelectPrimitive.Icon>
  </SelectPrimitive.Trigger>
))
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName

const SelectScrollUpButton = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
>(({ className, ...props }, ref) => (
  <SelectPrimitive.ScrollUpButton
    ref={ref}
    className={cn(
      "flex cursor-default items-center justify-center py-1",
      className
    )}
    {...props}
  >
    <ChevronUp className="h-4 w-4" />
  </SelectPrimitive.ScrollUpButton>
))
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName

const SelectScrollDownButton = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
>(({ className, ...props }, ref) => (
  <SelectPrimitive.ScrollDownButton
    ref={ref}
    className={cn(
      "flex cursor-default items-center justify-center py-1",
      className
    )}
    {...props}
  >
    <ChevronDown className="h-4 w-4" />
  </SelectPrimitive.ScrollDownButton>
))
SelectScrollDownButton.displayName =
  SelectPrimitive.ScrollDownButton.displayName

const SelectContent = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
>(({ className, children, position = "popper", ...props }, ref) => (
  <SelectPrimitive.Portal>
    <SelectPrimitive.Content
      ref={ref}
      className={cn(
        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
        position === "popper" &&
          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
        className
      )}
      position={position}
      {...props}
    >
      <SelectScrollUpButton />
      <SelectPrimitive.Viewport
        className={cn(
          "p-1",
          position === "popper" &&
            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
        )}
      >
        {children}
      </SelectPrimitive.Viewport>
      <SelectScrollDownButton />
    </SelectPrimitive.Content>
  </SelectPrimitive.Portal>
))
SelectContent.displayName = SelectPrimitive.Content.displayName

const SelectLabel = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Label>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
>(({ className, ...props }, ref) => (
  <SelectPrimitive.Label
    ref={ref}
    className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
    {...props}
  />
))
SelectLabel.displayName = SelectPrimitive.Label.displayName

const SelectItem = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
>(({ className, children, ...props }, ref) => (
  <SelectPrimitive.Item
    ref={ref}
    className={cn(
      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
      className
    )}
    {...props}
  >
    <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>{children}</SelectPrimitive.ItemText>
  </SelectPrimitive.Item>
))
SelectItem.displayName = SelectPrimitive.Item.displayName

const SelectSeparator = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Separator>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
>(({ className, ...props }, ref) => (
  <SelectPrimitive.Separator
    ref={ref}
    className={cn("-mx-1 my-1 h-px bg-muted", className)}
    {...props}
  />
))
SelectSeparator.displayName = SelectPrimitive.Separator.displayName

export {
  Select,
  SelectGroup,
  SelectValue,
  SelectTrigger,
  SelectContent,
  SelectLabel,
  SelectItem,
  SelectSeparator,
  SelectScrollUpButton,
  SelectScrollDownButton,
}
[V0_FILE]typescriptreact:file="components/ui/separator.tsx"
"use client"

import * as React from "react"
import * as SeparatorPrimitive from "@radix-ui/react-separator"

import { cn } from "@/lib/utils"

const Separator = React.forwardRef<
  React.ElementRef<typeof SeparatorPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
>(
  (
    { className, orientation = "horizontal", decorative = true, ...props },
    ref
  ) => (
    <SeparatorPrimitive.Root
      ref={ref}
      decorative={decorative}
      orientation={orientation}
      className={cn(
        "shrink-0 bg-border",
        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
        className
      )}
      {...props}
    />
  )
)
Separator.displayName = SeparatorPrimitive.Root.displayName

export { Separator }
[V0_FILE]typescriptreact:file="components/ui/sheet.tsx"
"use client"

import * as React from "react"
import * as SheetPrimitive from "@radix-ui/react-dialog"
import { cva, type VariantProps } from "class-variance-authority"
import { X } from "lucide-react"

import { cn } from "@/lib/utils"

const Sheet = SheetPrimitive.Root

const SheetTrigger = SheetPrimitive.Trigger

const SheetClose = SheetPrimitive.Close

const SheetPortal = SheetPrimitive.Portal

const SheetOverlay = React.forwardRef<
  React.ElementRef<typeof SheetPrimitive.Overlay>,
  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
>(({ className, ...props }, ref) => (
  <SheetPrimitive.Overlay
    className={cn(
      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
      className
    )}
    {...props}
    ref={ref}
  />
))
SheetOverlay.displayName = SheetPrimitive.Overlay.displayName

const sheetVariants = cva(
  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
  {
    variants: {
      side: {
        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
        bottom:
          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
        right:
          "inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
      },
    },
    defaultVariants: {
      side: "right",
    },
  }
)

interface SheetContentProps
  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
    VariantProps<typeof sheetVariants> {}

const SheetContent = React.forwardRef<
  React.ElementRef<typeof SheetPrimitive.Content>,
  SheetContentProps
>(({ side = "right", className, children, ...props }, ref) => (
  <SheetPortal>
    <SheetOverlay />
    <SheetPrimitive.Content
      ref={ref}
      className={cn(sheetVariants({ side }), className)}
      {...props}
    >
      {children}
      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
        <X className="h-4 w-4" />
        <span className="sr-only">Close</span>
      </SheetPrimitive.Close>
    </SheetPrimitive.Content>
  </SheetPortal>
))
SheetContent.displayName = SheetPrimitive.Content.displayName

const SheetHeader = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn(
      "flex flex-col space-y-2 text-center sm:text-left",
      className
    )}
    {...props}
  />
)
SheetHeader.displayName = "SheetHeader"

const SheetFooter = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn(
      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
      className
    )}
    {...props}
  />
)
SheetFooter.displayName = "SheetFooter"

const SheetTitle = React.forwardRef<
  React.ElementRef<typeof SheetPrimitive.Title>,
  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
>(({ className, ...props }, ref) => (
  <SheetPrimitive.Title
    ref={ref}
    className={cn("text-lg font-semibold text-foreground", className)}
    {...props}
  />
))
SheetTitle.displayName = SheetPrimitive.Title.displayName

const SheetDescription = React.forwardRef<
  React.ElementRef<typeof SheetPrimitive.Description>,
  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
>(({ className, ...props }, ref) => (
  <SheetPrimitive.Description
    ref={ref}
    className={cn("text-sm text-muted-foreground", className)}
    {...props}
  />
))
SheetDescription.displayName = SheetPrimitive.Description.displayName

export {
  Sheet,
  SheetPortal,
  SheetOverlay,
  SheetTrigger,
  SheetClose,
  SheetContent,
  SheetHeader,
  SheetFooter,
  SheetTitle,
  SheetDescription,
}
[V0_FILE]typescriptreact:file="components/ui/sidebar.tsx"
"use client"

import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { VariantProps, cva } from "class-variance-authority"
import { PanelLeft } from "lucide-react"

import { useIsMobile } from "@/hooks/use-mobile"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Separator } from "@/components/ui/separator"
import { Sheet, SheetContent } from "@/components/ui/sheet"
import { Skeleton } from "@/components/ui/skeleton"
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip"

const SIDEBAR_COOKIE_NAME = "sidebar:state"
const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
const SIDEBAR_WIDTH = "16rem"
const SIDEBAR_WIDTH_MOBILE = "18rem"
const SIDEBAR_WIDTH_ICON = "3rem"
const SIDEBAR_KEYBOARD_SHORTCUT = "b"

type SidebarContext = {
  state: "expanded" | "collapsed"
  open: boolean
  setOpen: (open: boolean) => void
  openMobile: boolean
  setOpenMobile: (open: boolean) => void
  isMobile: boolean
  toggleSidebar: () => void
}

const SidebarContext = React.createContext<SidebarContext | null>(null)

function useSidebar() {
  const context = React.useContext(SidebarContext)
  if (!context) {
    throw new Error("useSidebar must be used within a SidebarProvider.")
  }

return context
}

const SidebarProvider = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div"> & {
    defaultOpen?: boolean
    open?: boolean
    onOpenChange?: (open: boolean) => void
  }
>(
  (
    {
      defaultOpen = true,
      open: openProp,
      onOpenChange: setOpenProp,
      className,
      style,
      children,
      ...props
    },
    ref
  ) => {
    const isMobile = useIsMobile()
    const [openMobile, setOpenMobile] = React.useState(false)

// This is the internal state of the sidebar.
    // We use openProp and setOpenProp for control from outside the component.
    const [_open, _setOpen] = React.useState(defaultOpen)
    const open = openProp ?? _open
    const setOpen = React.useCallback(
      (value: boolean | ((value: boolean) => boolean)) => {
        const openState = typeof value === "function" ? value(open) : value
        if (setOpenProp) {
          setOpenProp(openState)
        } else {
          _setOpen(openState)
        }

// This sets the cookie to keep the sidebar state.
        document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
      },
      [setOpenProp, open]
    )

// Helper to toggle the sidebar.
    const toggleSidebar = React.useCallback(() => {
      return isMobile
        ? setOpenMobile((open) => !open)
        : setOpen((open) => !open)
    }, [isMobile, setOpen, setOpenMobile])

// Adds a keyboard shortcut to toggle the sidebar.
    React.useEffect(() => {
      const handleKeyDown = (event: KeyboardEvent) => {
        if (
          event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
          (event.metaKey || event.ctrlKey)
        ) {
          event.preventDefault()
          toggleSidebar()
        }
      }

window.addEventListener("keydown", handleKeyDown)
      return () => window.removeEventListener("keydown", handleKeyDown)
    }, [toggleSidebar])

// We add a state so that we can do data-state="expanded" or "collapsed".
    // This makes it easier to style the sidebar with Tailwind classes.
    const state = open ? "expanded" : "collapsed"

const contextValue = React.useMemo<SidebarContext>(
      () => ({
        state,
        open,
        setOpen,
        isMobile,
        openMobile,
        setOpenMobile,
        toggleSidebar,
      }),
      [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
    )

return (
      <SidebarContext.Provider value={contextValue}>
        <TooltipProvider delayDuration={0}>
          <div
            style={
              {
                "--sidebar-width": SIDEBAR_WIDTH,
                "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
                ...style,
              } as React.CSSProperties
            }
            className={cn(
              "group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar",
              className
            )}
            ref={ref}
            {...props}
          >
            {children}
          </div>
        </TooltipProvider>
      </SidebarContext.Provider>
    )
  }
)
SidebarProvider.displayName = "SidebarProvider"

const Sidebar = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div"> & {
    side?: "left" | "right"
    variant?: "sidebar" | "floating" | "inset"
    collapsible?: "offcanvas" | "icon" | "none"
  }
>(
  (
    {
      side = "left",
      variant = "sidebar",
      collapsible = "offcanvas",
      className,
      children,
      ...props
    },
    ref
  ) => {
    const { isMobile, state, openMobile, setOpenMobile } = useSidebar()

if (collapsible === "none") {
      return (
        <div
          className={cn(
            "flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground",
            className
          )}
          ref={ref}
          {...props}
        >
          {children}
        </div>
      )
    }

if (isMobile) {
      return (
        <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
          <SheetContent
            data-sidebar="sidebar"
            data-mobile="true"
            className="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
            style={
              {
                "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
              } as React.CSSProperties
            }
            side={side}
          >
            <div className="flex h-full w-full flex-col">{children}</div>
          </SheetContent>
        </Sheet>
      )
    }

return (
      <div
        ref={ref}
        className="group peer hidden md:block text-sidebar-foreground"
        data-state={state}
        data-collapsible={state === "collapsed" ? collapsible : ""}
        data-variant={variant}
        data-side={side}
      >
        {/* This is what handles the sidebar gap on desktop */}
        <div
          className={cn(
            "duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear",
            "group-data-[collapsible=offcanvas]:w-0",
            "group-data-[side=right]:rotate-180",
            variant === "floating" || variant === "inset"
              ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]"
              : "group-data-[collapsible=icon]:w-[--sidebar-width-icon]"
          )}
        />
        <div
          className={cn(
            "duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex",
            side === "left"
              ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
              : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
            // Adjust the padding for floating and inset variants.
            variant === "floating" || variant === "inset"
              ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]"
              : "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",
            className
          )}
          {...props}
        >
          <div
            data-sidebar="sidebar"
            className="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow"
          >
            {children}
          </div>
        </div>
      </div>
    )
  }
)
Sidebar.displayName = "Sidebar"

const SidebarTrigger = React.forwardRef<
  React.ElementRef<typeof Button>,
  React.ComponentProps<typeof Button>
>(({ className, onClick, ...props }, ref) => {
  const { toggleSidebar } = useSidebar()

return (
    <Button
      ref={ref}
      data-sidebar="trigger"
      variant="ghost"
      size="icon"
      className={cn("h-7 w-7", className)}
      onClick={(event) => {
        onClick?.(event)
        toggleSidebar()
      }}
      {...props}
    >
      <PanelLeft />
      <span className="sr-only">Toggle Sidebar</span>
    </Button>
  )
})
SidebarTrigger.displayName = "SidebarTrigger"

const SidebarRail = React.forwardRef<
  HTMLButtonElement,
  React.ComponentProps<"button">
>(({ className, ...props }, ref) => {
  const { toggleSidebar } = useSidebar()

return (
    <button
      ref={ref}
      data-sidebar="rail"
      aria-label="Toggle Sidebar"
      tabIndex={-1}
      onClick={toggleSidebar}
      title="Toggle Sidebar"
      className={cn(
        "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
        "[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",
        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
        "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar",
        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
        className
      )}
      {...props}
    />
  )
})
SidebarRail.displayName = "SidebarRail"

const SidebarInset = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"main">
>(({ className, ...props }, ref) => {
  return (
    <main
      ref={ref}
      className={cn(
        "relative flex min-h-svh flex-1 flex-col bg-background",
        "peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
        className
      )}
      {...props}
    />
  )
})
SidebarInset.displayName = "SidebarInset"

const SidebarInput = React.forwardRef<
  React.ElementRef<typeof Input>,
  React.ComponentProps<typeof Input>
>(({ className, ...props }, ref) => {
  return (
    <Input
      ref={ref}
      data-sidebar="input"
      className={cn(
        "h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
        className
      )}
      {...props}
    />
  )
})
SidebarInput.displayName = "SidebarInput"

const SidebarHeader = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div">
>(({ className, ...props }, ref) => {
  return (
    <div
      ref={ref}
      data-sidebar="header"
      className={cn("flex flex-col gap-2 p-2", className)}
      {...props}
    />
  )
})
SidebarHeader.displayName = "SidebarHeader"

const SidebarFooter = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div">
>(({ className, ...props }, ref) => {
  return (
    <div
      ref={ref}
      data-sidebar="footer"
      className={cn("flex flex-col gap-2 p-2", className)}
      {...props}
    />
  )
})
SidebarFooter.displayName = "SidebarFooter"

const SidebarSeparator = React.forwardRef<
  React.ElementRef<typeof Separator>,
  React.ComponentProps<typeof Separator>
>(({ className, ...props }, ref) => {
  return (
    <Separator
      ref={ref}
      data-sidebar="separator"
      className={cn("mx-2 w-auto bg-sidebar-border", className)}
      {...props}
    />
  )
})
SidebarSeparator.displayName = "SidebarSeparator"

const SidebarContent = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div">
>(({ className, ...props }, ref) => {
  return (
    <div
      ref={ref}
      data-sidebar="content"
      className={cn(
        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
        className
      )}
      {...props}
    />
  )
})
SidebarContent.displayName = "SidebarContent"

const SidebarGroup = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div">
>(({ className, ...props }, ref) => {
  return (
    <div
      ref={ref}
      data-sidebar="group"
      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
      {...props}
    />
  )
})
SidebarGroup.displayName = "SidebarGroup"

const SidebarGroupLabel = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div"> & { asChild?: boolean }
>(({ className, asChild = false, ...props }, ref) => {
  const Comp = asChild ? Slot : "div"

return (
    <Comp
      ref={ref}
      data-sidebar="group-label"
      className={cn(
        "duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
        className
      )}
      {...props}
    />
  )
})
SidebarGroupLabel.displayName = "SidebarGroupLabel"

const SidebarGroupAction = React.forwardRef<
  HTMLButtonElement,
  React.ComponentProps<"button"> & { asChild?: boolean }
>(({ className, asChild = false, ...props }, ref) => {
  const Comp = asChild ? Slot : "button"

return (
    <Comp
      ref={ref}
      data-sidebar="group-action"
      className={cn(
        "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
        // Increases the hit area of the button on mobile.
        "after:absolute after:-inset-2 after:md:hidden",
        "group-data-[collapsible=icon]:hidden",
        className
      )}
      {...props}
    />
  )
})
SidebarGroupAction.displayName = "SidebarGroupAction"

const SidebarGroupContent = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div">
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    data-sidebar="group-content"
    className={cn("w-full text-sm", className)}
    {...props}
  />
))
SidebarGroupContent.displayName = "SidebarGroupContent"

const SidebarMenu = React.forwardRef<
  HTMLUListElement,
  React.ComponentProps<"ul">
>(({ className, ...props }, ref) => (
  <ul
    ref={ref}
    data-sidebar="menu"
    className={cn("flex w-full min-w-0 flex-col gap-1", className)}
    {...props}
  />
))
SidebarMenu.displayName = "SidebarMenu"

const SidebarMenuItem = React.forwardRef<
  HTMLLIElement,
  React.ComponentProps<"li">
>(({ className, ...props }, ref) => (
  <li
    ref={ref}
    data-sidebar="menu-item"
    className={cn("group/menu-item relative", className)}
    {...props}
  />
))
SidebarMenuItem.displayName = "SidebarMenuItem"

const sidebarMenuButtonVariants = cva(
  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
  {
    variants: {
      variant: {
        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
        outline:
          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
      },
      size: {
        default: "h-8 text-sm",
        sm: "h-7 text-xs",
        lg: "h-12 text-sm group-data-[collapsible=icon]:!p-0",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)

const SidebarMenuButton = React.forwardRef<
  HTMLButtonElement,
  React.ComponentProps<"button"> & {
    asChild?: boolean
    isActive?: boolean
    tooltip?: string | React.ComponentProps<typeof TooltipContent>
  } & VariantProps<typeof sidebarMenuButtonVariants>
>(
  (
    {
      asChild = false,
      isActive = false,
      variant = "default",
      size = "default",
      tooltip,
      className,
      ...props
    },
    ref
  ) => {
    const Comp = asChild ? Slot : "button"
    const { isMobile, state } = useSidebar()

const button = (
      <Comp
        ref={ref}
        data-sidebar="menu-button"
        data-size={size}
        data-active={isActive}
        className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
        {...props}
      />
    )

if (!tooltip) {
      return button
    }

if (typeof tooltip === "string") {
      tooltip = {
        children: tooltip,
      }
    }

return (
      <Tooltip>
        <TooltipTrigger asChild>{button}</TooltipTrigger>
        <TooltipContent
          side="right"
          align="center"
          hidden={state !== "collapsed" || isMobile}
          {...tooltip}
        />
      </Tooltip>
    )
  }
)
SidebarMenuButton.displayName = "SidebarMenuButton"

const SidebarMenuAction = React.forwardRef<
  HTMLButtonElement,
  React.ComponentProps<"button"> & {
    asChild?: boolean
    showOnHover?: boolean
  }
>(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
  const Comp = asChild ? Slot : "button"

return (
    <Comp
      ref={ref}
      data-sidebar="menu-action"
      className={cn(
        "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
        // Increases the hit area of the button on mobile.
        "after:absolute after:-inset-2 after:md:hidden",
        "peer-data-[size=sm]/menu-button:top-1",
        "peer-data-[size=default]/menu-button:top-1.5",
        "peer-data-[size=lg]/menu-button:top-2.5",
        "group-data-[collapsible=icon]:hidden",
        showOnHover &&
          "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0",
        className
      )}
      {...props}
    />
  )
})
SidebarMenuAction.displayName = "SidebarMenuAction"

const SidebarMenuBadge = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div">
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    data-sidebar="menu-badge"
    className={cn(
      "absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground select-none pointer-events-none",
      "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
      "peer-data-[size=sm]/menu-button:top-1",
      "peer-data-[size=default]/menu-button:top-1.5",
      "peer-data-[size=lg]/menu-button:top-2.5",
      "group-data-[collapsible=icon]:hidden",
      className
    )}
    {...props}
  />
))
SidebarMenuBadge.displayName = "SidebarMenuBadge"

const SidebarMenuSkeleton = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div"> & {
    showIcon?: boolean
  }
>(({ className, showIcon = false, ...props }, ref) => {
  // Random width between 50 to 90%.
  const width = React.useMemo(() => {
    return `${Math.floor(Math.random() * 40) + 50}%`
  }, [])

return (
    <div
      ref={ref}
      data-sidebar="menu-skeleton"
      className={cn("rounded-md h-8 flex gap-2 px-2 items-center", className)}
      {...props}
    >
      {showIcon && (
        <Skeleton
          className="size-4 rounded-md"
          data-sidebar="menu-skeleton-icon"
        />
      )}
      <Skeleton
        className="h-4 flex-1 max-w-[--skeleton-width]"
        data-sidebar="menu-skeleton-text"
        style={
          {
            "--skeleton-width": width,
          } as React.CSSProperties
        }
      />
    </div>
  )
})
SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton"

const SidebarMenuSub = React.forwardRef<
  HTMLUListElement,
  React.ComponentProps<"ul">
>(({ className, ...props }, ref) => (
  <ul
    ref={ref}
    data-sidebar="menu-sub"
    className={cn(
      "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5",
      "group-data-[collapsible=icon]:hidden",
      className
    )}
    {...props}
  />
))
SidebarMenuSub.displayName = "SidebarMenuSub"

const SidebarMenuSubItem = React.forwardRef<
  HTMLLIElement,
  React.ComponentProps<"li">
>(({ ...props }, ref) => <li ref={ref} {...props} />)
SidebarMenuSubItem.displayName = "SidebarMenuSubItem"

const SidebarMenuSubButton = React.forwardRef<
  HTMLAnchorElement,
  React.ComponentProps<"a"> & {
    asChild?: boolean
    size?: "sm" | "md"
    isActive?: boolean
  }
>(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
  const Comp = asChild ? Slot : "a"

return (
    <Comp
      ref={ref}
      data-sidebar="menu-sub-button"
      data-size={size}
      data-active={isActive}
      className={cn(
        "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
        "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
        size === "sm" && "text-xs",
        size === "md" && "text-sm",
        "group-data-[collapsible=icon]:hidden",
        className
      )}
      {...props}
    />
  )
})
SidebarMenuSubButton.displayName = "SidebarMenuSubButton"

export {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupAction,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarInput,
  SidebarInset,
  SidebarMenu,
  SidebarMenuAction,
  SidebarMenuBadge,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarMenuSkeleton,
  SidebarMenuSub,
  SidebarMenuSubButton,
  SidebarMenuSubItem,
  SidebarProvider,
  SidebarRail,
  SidebarSeparator,
  SidebarTrigger,
  useSidebar,
}
[V0_FILE]typescriptreact:file="components/ui/skeleton.tsx"
import { cn } from "@/lib/utils"

function Skeleton({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) {
  return (
    <div
      className={cn("animate-pulse rounded-md bg-muted", className)}
      {...props}
    />
  )
}

export { Skeleton }
[V0_FILE]typescriptreact:file="components/ui/slider.tsx"
"use client"

import * as React from "react"
import * as SliderPrimitive from "@radix-ui/react-slider"

import { cn } from "@/lib/utils"

const Slider = React.forwardRef<
  React.ElementRef<typeof SliderPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
>(({ className, ...props }, ref) => (
  <SliderPrimitive.Root
    ref={ref}
    className={cn(
      "relative flex w-full touch-none select-none items-center",
      className
    )}
    {...props}
  >
    <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
      <SliderPrimitive.Range className="absolute h-full bg-primary" />
    </SliderPrimitive.Track>
    <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
  </SliderPrimitive.Root>
))
Slider.displayName = SliderPrimitive.Root.displayName

export { Slider }
[V0_FILE]typescriptreact:file="components/ui/sonner.tsx"
"use client"

import { useTheme } from "next-themes"
import { Toaster as Sonner } from "sonner"

type ToasterProps = React.ComponentProps<typeof Sonner>

const Toaster = ({ ...props }: ToasterProps) => {
  const { theme = "system" } = useTheme()

return (
    <Sonner
      theme={theme as ToasterProps["theme"]}
      className="toaster group"
      toastOptions={{
        classNames: {
          toast:
            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
          description: "group-[.toast]:text-muted-foreground",
          actionButton:
            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
          cancelButton:
            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
        },
      }}
      {...props}
    />
  )
}

export { Toaster }
[V0_FILE]typescriptreact:file="components/ui/switch.tsx"
"use client"

import * as React from "react"
import * as SwitchPrimitives from "@radix-ui/react-switch"

import { cn } from "@/lib/utils"

const Switch = React.forwardRef<
  React.ElementRef<typeof SwitchPrimitives.Root>,
  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
>(({ className, ...props }, ref) => (
  <SwitchPrimitives.Root
    className={cn(
      "peer inline-flex h-6 w-11 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-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
      className
    )}
    {...props}
    ref={ref}
  >
    <SwitchPrimitives.Thumb
      className={cn(
        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
      )}
    />
  </SwitchPrimitives.Root>
))
Switch.displayName = SwitchPrimitives.Root.displayName

export { Switch }
[V0_FILE]typescriptreact:file="components/ui/table.tsx"
import * as React from "react"

import { cn } from "@/lib/utils"

const Table = React.forwardRef<
  HTMLTableElement,
  React.HTMLAttributes<HTMLTableElement>
>(({ className, ...props }, ref) => (
  <div className="relative w-full overflow-auto">
    <table
      ref={ref}
      className={cn("w-full caption-bottom text-sm", className)}
      {...props}
    />
  </div>
))
Table.displayName = "Table"

const TableHeader = React.forwardRef<
  HTMLTableSectionElement,
  React.HTMLAttributes<HTMLTableSectionElement>
>(({ className, ...props }, ref) => (
  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
))
TableHeader.displayName = "TableHeader"

const TableBody = React.forwardRef<
  HTMLTableSectionElement,
  React.HTMLAttributes<HTMLTableSectionElement>
>(({ className, ...props }, ref) => (
  <tbody
    ref={ref}
    className={cn("[&_tr:last-child]:border-0", className)}
    {...props}
  />
))
TableBody.displayName = "TableBody"

const TableFooter = React.forwardRef<
  HTMLTableSectionElement,
  React.HTMLAttributes<HTMLTableSectionElement>
>(({ className, ...props }, ref) => (
  <tfoot
    ref={ref}
    className={cn(
      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
      className
    )}
    {...props}
  />
))
TableFooter.displayName = "TableFooter"

const TableRow = React.forwardRef<
  HTMLTableRowElement,
  React.HTMLAttributes<HTMLTableRowElement>
>(({ className, ...props }, ref) => (
  <tr
    ref={ref}
    className={cn(
      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
      className
    )}
    {...props}
  />
))
TableRow.displayName = "TableRow"

const TableHead = React.forwardRef<
  HTMLTableCellElement,
  React.ThHTMLAttributes<HTMLTableCellElement>
>(({ className, ...props }, ref) => (
  <th
    ref={ref}
    className={cn(
      "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
      className
    )}
    {...props}
  />
))
TableHead.displayName = "TableHead"

const TableCell = React.forwardRef<
  HTMLTableCellElement,
  React.TdHTMLAttributes<HTMLTableCellElement>
>(({ className, ...props }, ref) => (
  <td
    ref={ref}
    className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
    {...props}
  />
))
TableCell.displayName = "TableCell"

const TableCaption = React.forwardRef<
  HTMLTableCaptionElement,
  React.HTMLAttributes<HTMLTableCaptionElement>
>(({ className, ...props }, ref) => (
  <caption
    ref={ref}
    className={cn("mt-4 text-sm text-muted-foreground", className)}
    {...props}
  />
))
TableCaption.displayName = "TableCaption"

export {
  Table,
  TableHeader,
  TableBody,
  TableFooter,
  TableHead,
  TableRow,
  TableCell,
  TableCaption,
}
[V0_FILE]typescriptreact:file="components/ui/tabs.tsx"
"use client"

import * as React from "react"
import * as TabsPrimitive from "@radix-ui/react-tabs"

import { cn } from "@/lib/utils"

const Tabs = TabsPrimitive.Root

const TabsList = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.List>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
>(({ className, ...props }, ref) => (
  <TabsPrimitive.List
    ref={ref}
    className={cn(
      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
      className
    )}
    {...props}
  />
))
TabsList.displayName = TabsPrimitive.List.displayName

const TabsTrigger = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
>(({ className, ...props }, ref) => (
  <TabsPrimitive.Trigger
    ref={ref}
    className={cn(
      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
      className
    )}
    {...props}
  />
))
TabsTrigger.displayName = TabsPrimitive.Trigger.displayName

const TabsContent = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
>(({ className, ...props }, ref) => (
  <TabsPrimitive.Content
    ref={ref}
    className={cn(
      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
      className
    )}
    {...props}
  />
))
TabsContent.displayName = TabsPrimitive.Content.displayName

export { Tabs, TabsList, TabsTrigger, TabsContent }
[V0_FILE]typescriptreact:file="components/ui/textarea.tsx"
import * as React from "react"

import { cn } from "@/lib/utils"

const Textarea = React.forwardRef<
  HTMLTextAreaElement,
  React.ComponentProps<"textarea">
>(({ className, ...props }, ref) => {
  return (
    <textarea
      className={cn(
        "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
        className
      )}
      ref={ref}
      {...props}
    />
  )
})
Textarea.displayName = "Textarea"

export { Textarea }
[V0_FILE]typescriptreact:file="components/ui/toast.tsx"
"use client"

import * as React from "react"
import * as ToastPrimitives from "@radix-ui/react-toast"
import { cva, type VariantProps } from "class-variance-authority"
import { X } from "lucide-react"

import { cn } from "@/lib/utils"

const ToastProvider = ToastPrimitives.Provider

const ToastViewport = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Viewport>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Viewport
    ref={ref}
    className={cn(
      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
      className
    )}
    {...props}
  />
))
ToastViewport.displayName = ToastPrimitives.Viewport.displayName

const toastVariants = cva(
  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
  {
    variants: {
      variant: {
        default: "border bg-background text-foreground",
        destructive:
          "destructive group border-destructive bg-destructive text-destructive-foreground",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  }
)

const Toast = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Root>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
    VariantProps<typeof toastVariants>
>(({ className, variant, ...props }, ref) => {
  return (
    <ToastPrimitives.Root
      ref={ref}
      className={cn(toastVariants({ variant }), className)}
      {...props}
    />
  )
})
Toast.displayName = ToastPrimitives.Root.displayName

const ToastAction = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Action>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Action
    ref={ref}
    className={cn(
      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
      className
    )}
    {...props}
  />
))
ToastAction.displayName = ToastPrimitives.Action.displayName

const ToastClose = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Close>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Close
    ref={ref}
    className={cn(
      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
      className
    )}
    toast-close=""
    {...props}
  >
    <X className="h-4 w-4" />
  </ToastPrimitives.Close>
))
ToastClose.displayName = ToastPrimitives.Close.displayName

const ToastTitle = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Title>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Title
    ref={ref}
    className={cn("text-sm font-semibold", className)}
    {...props}
  />
))
ToastTitle.displayName = ToastPrimitives.Title.displayName

const ToastDescription = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Description>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Description
    ref={ref}
    className={cn("text-sm opacity-90", className)}
    {...props}
  />
))
ToastDescription.displayName = ToastPrimitives.Description.displayName

type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>

type ToastActionElement = React.ReactElement<typeof ToastAction>

export {
  type ToastProps,
  type ToastActionElement,
  ToastProvider,
  ToastViewport,
  Toast,
  ToastTitle,
  ToastDescription,
  ToastClose,
  ToastAction,
}
[V0_FILE]typescriptreact:file="components/ui/toaster.tsx"
"use client"

import { useToast } from "@/hooks/use-toast"
import {
  Toast,
  ToastClose,
  ToastDescription,
  ToastProvider,
  ToastTitle,
  ToastViewport,
} from "@/components/ui/toast"

export function Toaster() {
  const { toasts } = useToast()

return (
    <ToastProvider>
      {toasts.map(function ({ id, title, description, action, ...props }) {
        return (
          <Toast key={id} {...props}>
            <div className="grid gap-1">
              {title && <ToastTitle>{title}</ToastTitle>}
              {description && (
                <ToastDescription>{description}</ToastDescription>
              )}
            </div>
            {action}
            <ToastClose />
          </Toast>
        )
      })}
      <ToastViewport />
    </ToastProvider>
  )
}
[V0_FILE]typescriptreact:file="components/ui/toggle-group.tsx"
"use client"

import * as React from "react"
import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
import { type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"
import { toggleVariants } from "@/components/ui/toggle"

const ToggleGroupContext = React.createContext<
  VariantProps<typeof toggleVariants>
>({
  size: "default",
  variant: "default",
})

const ToggleGroup = React.forwardRef<
  React.ElementRef<typeof ToggleGroupPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
    VariantProps<typeof toggleVariants>
>(({ className, variant, size, children, ...props }, ref) => (
  <ToggleGroupPrimitive.Root
    ref={ref}
    className={cn("flex items-center justify-center gap-1", className)}
    {...props}
  >
    <ToggleGroupContext.Provider value={{ variant, size }}>
      {children}
    </ToggleGroupContext.Provider>
  </ToggleGroupPrimitive.Root>
))

ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName

const ToggleGroupItem = React.forwardRef<
  React.ElementRef<typeof ToggleGroupPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
    VariantProps<typeof toggleVariants>
>(({ className, children, variant, size, ...props }, ref) => {
  const context = React.useContext(ToggleGroupContext)

return (
    <ToggleGroupPrimitive.Item
      ref={ref}
      className={cn(
        toggleVariants({
          variant: context.variant || variant,
          size: context.size || size,
        }),
        className
      )}
      {...props}
    >
      {children}
    </ToggleGroupPrimitive.Item>
  )
})

ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName

export { ToggleGroup, ToggleGroupItem }
[V0_FILE]typescriptreact:file="components/ui/toggle.tsx"
"use client"

import * as React from "react"
import * as TogglePrimitive from "@radix-ui/react-toggle"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const toggleVariants = cva(
  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 gap-2",
  {
    variants: {
      variant: {
        default: "bg-transparent",
        outline:
          "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
      },
      size: {
        default: "h-10 px-3 min-w-10",
        sm: "h-9 px-2.5 min-w-9",
        lg: "h-11 px-5 min-w-11",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)

const Toggle = React.forwardRef<
  React.ElementRef<typeof TogglePrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
    VariantProps<typeof toggleVariants>
>(({ className, variant, size, ...props }, ref) => (
  <TogglePrimitive.Root
    ref={ref}
    className={cn(toggleVariants({ variant, size, className }))}
    {...props}
  />
))

Toggle.displayName = TogglePrimitive.Root.displayName

export { Toggle, toggleVariants }
[V0_FILE]typescriptreact:file="components/ui/tooltip.tsx"
"use client"

import * as React from "react"
import * as TooltipPrimitive from "@radix-ui/react-tooltip"

import { cn } from "@/lib/utils"

const TooltipProvider = TooltipPrimitive.Provider

const Tooltip = TooltipPrimitive.Root

const TooltipTrigger = TooltipPrimitive.Trigger

const TooltipContent = React.forwardRef<
  React.ElementRef<typeof TooltipPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
>(({ className, sideOffset = 4, ...props }, ref) => (
  <TooltipPrimitive.Content
    ref={ref}
    sideOffset={sideOffset}
    className={cn(
      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
      className
    )}
    {...props}
  />
))
TooltipContent.displayName = TooltipPrimitive.Content.displayName

export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
[V0_FILE]typescriptreact:file="components/ui/use-mobile.tsx"
import * as React from "react"

const MOBILE_BREAKPOINT = 768

export function useIsMobile() {
  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)

React.useEffect(() => {
    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
    const onChange = () => {
      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
    }
    mql.addEventListener("change", onChange)
    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
    return () => mql.removeEventListener("change", onChange)
  }, [])

return !!isMobile
}
[V0_FILE]typescript:file="components/ui/use-toast.ts"
"use client"

// Inspired by react-hot-toast library
import * as React from "react"

import type {
  ToastActionElement,
  ToastProps,
} from "@/components/ui/toast"

const TOAST_LIMIT = 1
const TOAST_REMOVE_DELAY = 1000000

type ToasterToast = ToastProps & {
  id: string
  title?: React.ReactNode
  description?: React.ReactNode
  action?: ToastActionElement
}

const actionTypes = {
  ADD_TOAST: "ADD_TOAST",
  UPDATE_TOAST: "UPDATE_TOAST",
  DISMISS_TOAST: "DISMISS_TOAST",
  REMOVE_TOAST: "REMOVE_TOAST",
} as const

let count = 0

function genId() {
  count = (count + 1) % Number.MAX_SAFE_INTEGER
  return count.toString()
}

type ActionType = typeof actionTypes

type Action =
  | {
      type: ActionType["ADD_TOAST"]
      toast: ToasterToast
    }
  | {
      type: ActionType["UPDATE_TOAST"]
      toast: Partial<ToasterToast>
    }
  | {
      type: ActionType["DISMISS_TOAST"]
      toastId?: ToasterToast["id"]
    }
  | {
      type: ActionType["REMOVE_TOAST"]
      toastId?: ToasterToast["id"]
    }

interface State {
  toasts: ToasterToast[]
}

const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()

const addToRemoveQueue = (toastId: string) => {
  if (toastTimeouts.has(toastId)) {
    return
  }

const timeout = setTimeout(() => {
    toastTimeouts.delete(toastId)
    dispatch({
      type: "REMOVE_TOAST",
      toastId: toastId,
    })
  }, TOAST_REMOVE_DELAY)

toastTimeouts.set(toastId, timeout)
}

export const reducer = (state: State, action: Action): State => {
  switch (action.type) {
    case "ADD_TOAST":
      return {
        ...state,
        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
      }

case "UPDATE_TOAST":
      return {
        ...state,
        toasts: state.toasts.map((t) =>
          t.id === action.toast.id ? { ...t, ...action.toast } : t
        ),
      }

case "DISMISS_TOAST": {
      const { toastId } = action

// ! Side effects ! - This could be extracted into a dismissToast() action,
      // but I'll keep it here for simplicity
      if (toastId) {
        addToRemoveQueue(toastId)
      } else {
        state.toasts.forEach((toast) => {
          addToRemoveQueue(toast.id)
        })
      }

return {
        ...state,
        toasts: state.toasts.map((t) =>
          t.id === toastId || toastId === undefined
            ? {
                ...t,
                open: false,
              }
            : t
        ),
      }
    }
    case "REMOVE_TOAST":
      if (action.toastId === undefined) {
        return {
          ...state,
          toasts: [],
        }
      }
      return {
        ...state,
        toasts: state.toasts.filter((t) => t.id !== action.toastId),
      }
  }
}

const listeners: Array<(state: State) => void> = []

let memoryState: State = { toasts: [] }

function dispatch(action: Action) {
  memoryState = reducer(memoryState, action)
  listeners.forEach((listener) => {
    listener(memoryState)
  })
}

type Toast = Omit<ToasterToast, "id">

function toast({ ...props }: Toast) {
  const id = genId()

const update = (props: ToasterToast) =>
    dispatch({
      type: "UPDATE_TOAST",
      toast: { ...props, id },
    })
  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })

dispatch({
    type: "ADD_TOAST",
    toast: {
      ...props,
      id,
      open: true,
      onOpenChange: (open) => {
        if (!open) dismiss()
      },
    },
  })

return {
    id: id,
    dismiss,
    update,
  }
}

function useToast() {
  const [state, setState] = React.useState<State>(memoryState)

React.useEffect(() => {
    listeners.push(setState)
    return () => {
      const index = listeners.indexOf(setState)
      if (index > -1) {
        listeners.splice(index, 1)
      }
    }
  }, [state])

return {
    ...state,
    toast,
    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
  }
}

export { useToast, toast }
[V0_FILE]typescriptreact:file="contexts/AuthContext.tsx"
"use client"

import type React from "react"
import { createContext, useContext, useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { toast } from "react-hot-toast"

interface User {
  id: string
  name: string
  email: string
  role: "admin" | "doctor" | "assistant" | "receptionist"
  avatar?: string
}

interface AuthContextType {
  user: User | null
  isAuthenticated: boolean
  loading: boolean
  login: (email: string, password: string) => Promise<boolean>
  logout: () => void
}

const AuthContext = createContext<AuthContextType | undefined>(undefined)

export const useAuth = () => {
  const context = useContext(AuthContext)
  if (context === undefined) {
    throw new Error("useAuth must be used within an AuthProvider")
  }
  return context
}

export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const [user, setUser] = useState<User | null>(null)
  const [loading, setLoading] = useState(true)
  const router = useRouter()

useEffect(() => {
    // Check for stored authentication
    const storedUser = localStorage.getItem("clinic_user")
    if (storedUser) {
      try {
        setUser(JSON.parse(storedUser))
      } catch (error) {
        localStorage.removeItem("clinic_user")
      }
    }
    setLoading(false)
  }, [])

const login = async (email: string, password: string): Promise<boolean> => {
    try {
      // Demo authentication - replace with real API call
      if (email === "admin@clinic.com" && password === "admin123") {
        const demoUser: User = {
          id: "1",
          name: "Dr. Admin",
          email: "admin@clinic.com",
          role: "admin",
          avatar: "/placeholder.svg?height=40&width=40",
        }

setUser(demoUser)
        localStorage.setItem("clinic_user", JSON.stringify(demoUser))
        toast.success("Connexion réussie!")
        return true
      } else if (email === "doctor@clinic.com" && password === "doctor123") {
        const demoUser: User = {
          id: "2",
          name: "Dr. Smith",
          email: "doctor@clinic.com",
          role: "doctor",
          avatar: "/placeholder.svg?height=40&width=40",
        }

setUser(demoUser)
        localStorage.setItem("clinic_user", JSON.stringify(demoUser))
        toast.success("Connexion réussie!")
        return true
      } else {
        toast.error("Email ou mot de passe incorrect")
        return false
      }
    } catch (error) {
      toast.error("Erreur de connexion")
      return false
    }
  }

const logout = () => {
    setUser(null)
    localStorage.removeItem("clinic_user")
    toast.success("Déconnexion réussie")
    router.push("/login")
  }

const value = {
    user,
    isAuthenticated: !!user,
    loading,
    login,
    logout,
  }

return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>
}
[V0_FILE]typescriptreact:file="contexts/WaitingRoomContext.tsx"
"use client"

import type React from "react"
import { createContext, useContext, useState, useEffect } from "react"

interface Patient {
  id: string
  name: string
  appointmentTime: string
  status: "waiting" | "called" | "in-consultation" | "completed"
  priority: "normal" | "urgent"
  estimatedWaitTime: number
}

interface WaitingRoomContextType {
  patients: Patient[]
  currentPatient: Patient | null
  addPatient: (patient: Omit<Patient, "id">) => void
  updatePatientStatus: (patientId: string, status: Patient["status"]) => void
  callNextPatient: () => void
  removePatient: (patientId: string) => void
}

const WaitingRoomContext = createContext<WaitingRoomContextType | undefined>(undefined)

export const useWaitingRoom = () => {
  const context = useContext(WaitingRoomContext)
  if (context === undefined) {
    throw new Error("useWaitingRoom must be used within a WaitingRoomProvider")
  }
  return context
}

export const WaitingRoomProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const [patients, setPatients] = useState<Patient[]>([])
  const [currentPatient, setCurrentPatient] = useState<Patient | null>(null)

// Demo data
  useEffect(() => {
    const demoPatients: Patient[] = [
      {
        id: "1",
        name: "Marie Dubois",
        appointmentTime: "09:00",
        status: "waiting",
        priority: "normal",
        estimatedWaitTime: 15,
      },
      {
        id: "2",
        name: "Jean Martin",
        appointmentTime: "09:30",
        status: "waiting",
        priority: "urgent",
        estimatedWaitTime: 30,
      },
      {
        id: "3",
        name: "Sophie Laurent",
        appointmentTime: "10:00",
        status: "waiting",
        priority: "normal",
        estimatedWaitTime: 45,
      },
    ]
    setPatients(demoPatients)
  }, [])

const addPatient = (patient: Omit<Patient, "id">) => {
    const newPatient: Patient = {
      ...patient,
      id: Date.now().toString(),
    }
    setPatients((prev) => [...prev, newPatient])
  }

const updatePatientStatus = (patientId: string, status: Patient["status"]) => {
    setPatients((prev) => prev.map((patient) => (patient.id === patientId ? { ...patient, status } : patient)))
  }

const callNextPatient = () => {
    const nextPatient = patients.find((p) => p.status === "waiting")
    if (nextPatient) {
      setCurrentPatient(nextPatient)
      updatePatientStatus(nextPatient.id, "called")
    }
  }

const removePatient = (patientId: string) => {
    setPatients((prev) => prev.filter((patient) => patient.id !== patientId))
    if (currentPatient?.id === patientId) {
      setCurrentPatient(null)
    }
  }

const value = {
    patients,
    currentPatient,
    addPatient,
    updatePatientStatus,
    callNextPatient,
    removePatient,
  }

return <WaitingRoomContext.Provider value={value}>{children}</WaitingRoomContext.Provider>
}
[V0_FILE]typescriptreact:file="contexts/WebSocketContext.tsx"
"use client"

import type React from "react"
import { createContext, useContext, useState, useEffect, useRef } from "react"
import toast from "react-hot-toast"

interface WebSocketMessage {
  id: string
  type: "notification" | "appointment" | "patient" | "system" | "emergency"
  title: string
  message: string
  priority: "low" | "medium" | "high" | "urgent"
  timestamp: Date
  userId?: string
  data?: any
}

interface OnlineUser {
  id: string
  name: string
  role: string
  status: "online" | "away" | "busy"
  lastSeen: Date
}

interface WebSocketContextType {
  isConnected: boolean
  messages: WebSocketMessage[]
  onlineUsers: OnlineUser[]
  sendMessage: (message: Omit<WebSocketMessage, "id" | "timestamp">) => void
  markAsRead: (messageId: string) => void
  clearMessages: () => void
}

const WebSocketContext = createContext<WebSocketContextType | undefined>(undefined)

export const useWebSocket = () => {
  const context = useContext(WebSocketContext)
  if (context === undefined) {
    throw new Error("useWebSocket must be used within a WebSocketProvider")
  }
  return context
}

export const WebSocketProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const [isConnected, setIsConnected] = useState(false)
  const [messages, setMessages] = useState<WebSocketMessage[]>([])
  const [onlineUsers, setOnlineUsers] = useState<OnlineUser[]>([])
  const wsRef = useRef<WebSocket | null>(null)
  const reconnectTimeoutRef = useRef<NodeJS.Timeout>()

// Demo data for online users
  useEffect(() => {
    const demoUsers: OnlineUser[] = [
      {
        id: "1",
        name: "Dr. Admin",
        role: "admin",
        status: "online",
        lastSeen: new Date(),
      },
      {
        id: "2",
        name: "Dr. Smith",
        role: "doctor",
        status: "online",
        lastSeen: new Date(),
      },
      {
        id: "3",
        name: "Marie Dubois",
        role: "assistant",
        status: "away",
        lastSeen: new Date(Date.now() - 300000),
      },
    ]
    setOnlineUsers(demoUsers)
  }, [])

// Simulate WebSocket connection
  useEffect(() => {
    const connectWebSocket = () => {
      try {
        // Simulate connection
        setIsConnected(true)

// Simulate initial messages
        const initialMessages: WebSocketMessage[] = [
          {
            id: "1",
            type: "system",
            title: "Système",
            message: "Connexion WebSocket établie",
            priority: "low",
            timestamp: new Date(),
          },
        ]
        setMessages(initialMessages)

// Simulate periodic messages
        const interval = setInterval(() => {
          const demoMessage: WebSocketMessage = {
            id: Date.now().toString(),
            type: Math.random() > 0.5 ? "notification" : "appointment",
            title: "Nouveau rendez-vous",
            message: `Patient ${Math.floor(Math.random() * 100)} a pris un rendez-vous`,
            priority: Math.random() > 0.7 ? "high" : "medium",
            timestamp: new Date(),
          }

setMessages((prev) => [demoMessage, ...prev].slice(0, 50))

if (demoMessage.priority === "high") {
            toast.success(demoMessage.message)
          }
        }, 30000) // Every 30 seconds

return () => clearInterval(interval)
      } catch (error) {
        console.error("WebSocket connection error:", error)
        setIsConnected(false)
      }
    }

connectWebSocket()
  }, [])

const sendMessage = (message: Omit<WebSocketMessage, "id" | "timestamp">) => {
    const newMessage: WebSocketMessage = {
      ...message,
      id: Date.now().toString(),
      timestamp: new Date(),
    }

setMessages((prev) => [newMessage, ...prev])

if (message.priority === "high" || message.priority === "urgent") {
      toast.success(message.message)
    }
  }

const markAsRead = (messageId: string) => {
    setMessages((prev) => prev.filter((msg) => msg.id !== messageId))
  }

const clearMessages = () => {
    setMessages([])
  }

const value = {
    isConnected,
    messages,
    onlineUsers,
    sendMessage,
    markAsRead,
    clearMessages,
  }

return <WebSocketContext.Provider value={value}>{children}</WebSocketContext.Provider>
}
[V0_FILE]javascript:file="eslint.config.js"
import js from '@eslint/js';
import globals from 'globals';
import reactHooks from 'eslint-plugin-react-hooks';
import reactRefresh from 'eslint-plugin-react-refresh';
import tseslint from 'typescript-eslint';

export default tseslint.config(
  { ignores: ['dist'] },
  {
    extends: [js.configs.recommended, ...tseslint.configs.recommended],
    files: ['**/*.{ts,tsx}'],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
    },
    plugins: {
      'react-hooks': reactHooks,
      'react-refresh': reactRefresh,
    },
    rules: {
      ...reactHooks.configs.recommended.rules,
      'react-refresh/only-export-components': [
        'warn',
        { allowConstantExport: true },
      ],
    },
  }
);
[V0_FILE]typescriptreact:file="hooks/use-mobile.tsx"
import * as React from "react"

const MOBILE_BREAKPOINT = 768

export function useIsMobile() {
  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)

return !!isMobile
}
[V0_FILE]typescript:file="hooks/use-toast.ts"
"use client"

// Inspired by react-hot-toast library
import * as React from "react"

import type {
  ToastActionElement,
  ToastProps,
} from "@/components/ui/toast"

const TOAST_LIMIT = 1
const TOAST_REMOVE_DELAY = 1000000

type ToasterToast = ToastProps & {
  id: string
  title?: React.ReactNode
  description?: React.ReactNode
  action?: ToastActionElement
}

const actionTypes = {
  ADD_TOAST: "ADD_TOAST",
  UPDATE_TOAST: "UPDATE_TOAST",
  DISMISS_TOAST: "DISMISS_TOAST",
  REMOVE_TOAST: "REMOVE_TOAST",
} as const

let count = 0

function genId() {
  count = (count + 1) % Number.MAX_SAFE_INTEGER
  return count.toString()
}

type ActionType = typeof actionTypes

interface State {
  toasts: ToasterToast[]
}

const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()

const addToRemoveQueue = (toastId: string) => {
  if (toastTimeouts.has(toastId)) {
    return
  }

const timeout = setTimeout(() => {
    toastTimeouts.delete(toastId)
    dispatch({
      type: "REMOVE_TOAST",
      toastId: toastId,
    })
  }, TOAST_REMOVE_DELAY)

toastTimeouts.set(toastId, timeout)
}

case "UPDATE_TOAST":
      return {
        ...state,
        toasts: state.toasts.map((t) =>
          t.id === action.toast.id ? { ...t, ...action.toast } : t
        ),
      }

case "DISMISS_TOAST": {
      const { toastId } = action

const listeners: Array<(state: State) => void> = []

let memoryState: State = { toasts: [] }

function dispatch(action: Action) {
  memoryState = reducer(memoryState, action)
  listeners.forEach((listener) => {
    listener(memoryState)
  })
}

type Toast = Omit<ToasterToast, "id">

function toast({ ...props }: Toast) {
  const id = genId()

const update = (props: ToasterToast) =>
    dispatch({
      type: "UPDATE_TOAST",
      toast: { ...props, id },
    })
  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })

dispatch({
    type: "ADD_TOAST",
    toast: {
      ...props,
      id,
      open: true,
      onOpenChange: (open) => {
        if (!open) dismiss()
      },
    },
  })

return {
    id: id,
    dismiss,
    update,
  }
}

function useToast() {
  const [state, setState] = React.useState<State>(memoryState)

return {
    ...state,
    toast,
    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
  }
}

export { useToast, toast }
[V0_FILE]typescript:file="lib/utils.ts"
import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}
[V0_FILE]javascript:file="next.config.js"
/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    optimizePackageImports: ["lucide-react"],
  },
  images: {
    domains: ["localhost"],
    unoptimized: true,
  },
  eslint: {
    ignoreDuringBuilds: true,
  },
  typescript: {
    ignoreBuildErrors: true,
  },
}

module.exports = nextConfig
[V0_FILE]json:file="package.json"
{
  "name": "my-v0-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "build": "next build",
    "dev": "next dev",
    "lint": "next lint",
    "start": "next start"
  },
  "dependencies": {
    "@emotion/is-prop-valid": "latest",
    "@eslint/js": "latest",
    "@hookform/resolvers": "^3.9.1",
    "@radix-ui/react-accordion": "1.2.2",
    "@radix-ui/react-alert-dialog": "1.1.4",
    "@radix-ui/react-aspect-ratio": "1.1.1",
    "@radix-ui/react-avatar": "1.1.2",
    "@radix-ui/react-checkbox": "1.1.3",
    "@radix-ui/react-collapsible": "1.1.2",
    "@radix-ui/react-context-menu": "2.2.4",
    "@radix-ui/react-dialog": "1.1.4",
    "@radix-ui/react-dropdown-menu": "2.1.4",
    "@radix-ui/react-hover-card": "1.1.4",
    "@radix-ui/react-label": "2.1.1",
    "@radix-ui/react-menubar": "1.1.4",
    "@radix-ui/react-navigation-menu": "1.2.3",
    "@radix-ui/react-popover": "1.1.4",
    "@radix-ui/react-progress": "1.1.1",
    "@radix-ui/react-radio-group": "1.2.2",
    "@radix-ui/react-scroll-area": "1.2.2",
    "@radix-ui/react-select": "2.1.4",
    "@radix-ui/react-separator": "1.1.1",
    "@radix-ui/react-slider": "1.2.2",
    "@radix-ui/react-slot": "1.1.1",
    "@radix-ui/react-switch": "1.1.2",
    "@radix-ui/react-tabs": "1.1.2",
    "@radix-ui/react-toast": "1.2.4",
    "@radix-ui/react-toggle": "1.1.1",
    "@radix-ui/react-toggle-group": "1.1.1",
    "@radix-ui/react-tooltip": "1.1.6",
    "@vitejs/plugin-react": "latest",
    "autoprefixer": "^10.4.20",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "1.0.4",
    "date-fns": "4.1.0",
    "embla-carousel-react": "8.5.1",
    "eslint": "latest",
    "eslint-plugin-react-hooks": "latest",
    "eslint-plugin-react-refresh": "latest",
    "framer-motion": "latest",
    "globals": "latest",
    "input-otp": "1.4.1",
    "jiti": "latest",
    "less": "latest",
    "lightningcss": "latest",
    "lucide-react": "^0.454.0",
    "next": "15.2.4",
    "next-themes": "latest",
    "react": "^19",
    "react-day-picker": "8.10.1",
    "react-dom": "^19",
    "react-hook-form": "latest",
    "react-hot-toast": "latest",
    "react-resizable-panels": "^2.1.7",
    "react-router-dom": "latest",
    "recharts": "latest",
    "sass": "latest",
    "sass-embedded": "latest",
    "sonner": "latest",
    "stylus": "latest",
    "sugarss": "latest",
    "tailwind-merge": "^2.5.5",
    "tailwindcss-animate": "^1.0.7",
    "terser": "latest",
    "tsx": "latest",
    "typescript-eslint": "latest",
    "vaul": "^0.9.6",
    "vite": "latest",
    "yaml": "latest",
    "zod": "^3.24.1"
  },
  "devDependencies": {
    "@types/node": "^22",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "postcss": "^8.5",
    "tailwindcss": "^3.4.17",
    "typescript": "^5"
  }
}
[V0_FILE]javascript:file="postcss.config.js"
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}
[V0_FILE]javascript:file="postcss.config.mjs"
/** @type {import('postcss-load-config').Config} */
const config = {
  plugins: {
    tailwindcss: {},
  },
};

export default config;
[V0_FILE]typescriptreact:file="src/App.tsx"
"use client"

import type React from "react"
import { BrowserRouter as Router, Routes, Route, Navigate } from "react-router-dom"
import { Toaster } from "react-hot-toast"
import { AuthProvider, useAuth } from "./contexts/AuthContext"
import { ThemeProvider } from "./contexts/ThemeContext"
import { WaitingRoomProvider } from "./contexts/WaitingRoomContext"
import { WebSocketProvider } from "./contexts/WebSocketContext"

// Components
import LoginForm from "./components/Auth/LoginForm"
import Layout from "./components/Layout/Layout"
import Dashboard from "./components/Dashboard/Dashboard"
import PatientList from "./components/Patients/PatientList"
import AppointmentList from "./components/Appointments/AppointmentList"
import RealTimeWaitingRoom from "./components/WaitingRoom/RealTimeWaitingRoom"
import StatisticsPage from "./components/Statistics/StatisticsPage"
import InventoryPage from "./components/Inventory/InventoryPage"
import MedicalFilesList from "./components/MedicalFiles/MedicalFilesList"
import ConsultationHistoryPage from "./components/ConsultationHistory/ConsultationHistoryPage"
import PrescriptionsPage from "./components/Prescriptions/PrescriptionsPage"
import LabResultsPage from "./components/LabResults/LabResultsPage"
import RadiologyPage from "./components/Radiology/RadiologyPage"
import CaseImagesPage from "./components/CaseImages/CaseImagesPage"
import BillingPage from "./components/Billing/BillingPage"

// Protected Route Component
const ProtectedRoute: React.FC<{ children: React.ReactNode; permission?: string }> = ({ children, permission }) => {
  const { isAuthenticated, hasAccess } = useAuth()

if (!isAuthenticated) {
    return <Navigate to="/login" replace />
  }

if (permission && !hasAccess(permission)) {
    return <Navigate to="/dashboard" replace />
  }

return <>{children}</>
}

// Main App Routes Component
const AppRoutes: React.FC = () => {
  const { isAuthenticated } = useAuth()

return (
    <Routes>
      {/* Public Routes */}
      <Route path="/login" element={isAuthenticated ? <Navigate to="/dashboard" replace /> : <LoginForm />} />

{/* Protected Routes */}
      <Route
        path="/dashboard"
        element={
          <ProtectedRoute permission="dashboard">
            <Layout>
              <Dashboard />
            </Layout>
          </ProtectedRoute>
        }
      />

{/* Default redirect */}
      <Route
        path="/"
        element={isAuthenticated ? <Navigate to="/dashboard" replace /> : <Navigate to="/login" replace />}
      />

{/* Catch all route */}
      <Route
        path="*"
        element={
          <ProtectedRoute>
            <Layout>
              <div className="p-6 text-center">
                <h1 className="text-2xl font-bold mb-4">Page non trouvée</h1>
                <p>La page que vous recherchez n'existe pas.</p>
              </div>
            </Layout>
          </ProtectedRoute>
        }
      />
    </Routes>
  )
}

// Main App Component
const App: React.FC = () => {
  return (
    <ThemeProvider>
      <AuthProvider>
        <WebSocketProvider>
          <WaitingRoomProvider>
            <Router>
              <div className="min-h-screen bg-gray-50 dark:bg-gray-900 transition-colors duration-200">
                <AppRoutes />
                <Toaster
                  position="top-right"
                  toastOptions={{
                    duration: 4000,
                    style: {
                      background: "var(--toast-bg)",
                      color: "var(--toast-color)",
                    },
                  }}
                />
              </div>
            </Router>
          </WaitingRoomProvider>
        </WebSocketProvider>
      </AuthProvider>
    </ThemeProvider>
  )
}

export default App
[V0_FILE]typescriptreact:file="src/app/appointments/page.tsx"
"use client"

import { useEffect } from "react"
import { useRouter } from "next/navigation"
import { useAuth } from "@/contexts/AuthContext"
import Layout from "@/components/Layout/Layout"
import AppointmentList from "@/components/Appointments/AppointmentList"

export default function AppointmentsPage() {
  const { isAuthenticated } = useAuth()
  const router = useRouter()

useEffect(() => {
    if (!isAuthenticated) {
      router.push("/login")
    }
  }, [isAuthenticated, router])

if (!isAuthenticated) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="animate-spin rounded-full h-32 w-32 border-b-2 border-blue-600"></div>
      </div>
    )
  }

return (
    <Layout>
      <AppointmentList />
    </Layout>
  )
}
[V0_FILE]typescriptreact:file="src/app/billing/page.tsx"
"use client"

import { useEffect } from "react"
import { useRouter } from "next/navigation"
import { useAuth } from "@/contexts/AuthContext"
import Layout from "@/components/Layout/Layout"
import BillingPage from "@/components/Billing/BillingPage"

export default function Billing() {
  const { isAuthenticated } = useAuth()
  const router = useRouter()

useEffect(() => {
    if (!isAuthenticated) {
      router.push("/login")
    }
  }, [isAuthenticated, router])

return (
    <Layout>
      <BillingPage />
    </Layout>
  )
}
[V0_FILE]typescriptreact:file="src/app/case-images/page.tsx"
"use client"

import { useEffect } from "react"
import { useRouter } from "next/navigation"
import { useAuth } from "@/contexts/AuthContext"
import Layout from "@/components/Layout/Layout"
import CaseImagesPage from "@/components/CaseImages/CaseImagesPage"

export default function CaseImages() {
  const { isAuthenticated } = useAuth()
  const router = useRouter()

useEffect(() => {
    if (!isAuthenticated) {
      router.push("/login")
    }
  }, [isAuthenticated, router])

return (
    <Layout>
      <CaseImagesPage />
    </Layout>
  )
}
[V0_FILE]typescriptreact:file="src/app/consultation-history/page.tsx"
"use client"

import { useEffect } from "react"
import { useRouter } from "next/navigation"
import { useAuth } from "@/contexts/AuthContext"
import Layout from "@/components/Layout/Layout"
import ConsultationHistoryPage from "@/components/ConsultationHistory/ConsultationHistoryPage"

export default function ConsultationHistory() {
  const { isAuthenticated } = useAuth()
  const router = useRouter()

useEffect(() => {
    if (!isAuthenticated) {
      router.push("/login")
    }
  }, [isAuthenticated, router])

return (
    <Layout>
      <ConsultationHistoryPage />
    </Layout>
  )
}
[V0_FILE]typescriptreact:file="src/app/dashboard/page.tsx"
"use client"

export default function DashboardPage() {
  const { isAuthenticated } = useAuth()
  const router = useRouter()

useEffect(() => {
    if (!isAuthenticated) {
      router.push("/login")
    }
  }, [isAuthenticated, router])

return (
    <Layout>
      <Dashboard />
    </Layout>
  )
}
[V0_FILE]css:file="src/app/globals.css"
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --toast-bg: #ffffff;
  --toast-color: #374151;
  --toast-border: #e5e7eb;
}

.dark {
  --toast-bg: #1f2937;
  --toast-color: #f9fafb;
  --toast-border: #374151;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

.dark ::-webkit-scrollbar-thumb {
  background: #475569;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

.dark ::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}
[V0_FILE]typescriptreact:file="src/app/inventory/page.tsx"
"use client"

import { useEffect } from "react"
import { useRouter } from "next/navigation"
import { useAuth } from "@/contexts/AuthContext"
import Layout from "@/components/Layout/Layout"
import InventoryPage from "@/components/Inventory/InventoryPage"

export default function Inventory() {
  const { isAuthenticated } = useAuth()
  const router = useRouter()

useEffect(() => {
    if (!isAuthenticated) {
      router.push("/login")
    }
  }, [isAuthenticated, router])

return (
    <Layout>
      <InventoryPage />
    </Layout>
  )
}
[V0_FILE]typescriptreact:file="src/app/lab-results/page.tsx"
"use client"

import { useEffect } from "react"
import { useRouter } from "next/navigation"
import { useAuth } from "@/contexts/AuthContext"
import Layout from "@/components/Layout/Layout"
import LabResultsPage from "@/components/LabResults/LabResultsPage"

export default function LabResults() {
  const { isAuthenticated } = useAuth()
  const router = useRouter()

useEffect(() => {
    if (!isAuthenticated) {
      router.push("/login")
    }
  }, [isAuthenticated, router])

return (
    <Layout>
      <LabResultsPage />
    </Layout>
  )
}
[V0_FILE]typescriptreact:file="src/app/layout.tsx"
import type React from "react"
import type { Metadata } from "next"
import { Inter } from "next/font/google"
import "./globals.css"
import { Providers } from "./providers"

const inter = Inter({ subsets: ["latin"] })

export const metadata: Metadata = {
  title: "Clinique Dentaire - ERP",
  description: "Système de gestion complet pour clinique dentaire",
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="fr">
      <body className={inter.className}>
        <Providers>{children}</Providers>
      </body>
    </html>
  )
}
[V0_FILE]typescriptreact:file="src/app/login/page.tsx"
"use client"

import { useEffect } from "react"
import { useRouter } from "next/navigation"
import { useAuth } from "@/contexts/AuthContext"
import LoginForm from "@/components/Auth/LoginForm"

export default function LoginPage() {
  const { isAuthenticated } = useAuth()
  const router = useRouter()

useEffect(() => {
    if (isAuthenticated) {
      router.push("/dashboard")
    }
  }, [isAuthenticated, router])

if (isAuthenticated) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="animate-spin rounded-full h-32 w-32 border-b-2 border-blue-600"></div>
      </div>
    )
  }

return <LoginForm />
}
[V0_FILE]typescriptreact:file="src/app/medical-files/page.tsx"
"use client"

import { useEffect } from "react"
import { useRouter } from "next/navigation"
import { useAuth } from "@/contexts/AuthContext"
import Layout from "@/components/Layout/Layout"
import MedicalFilesList from "@/components/MedicalFiles/MedicalFilesList"

export default function MedicalFiles() {
  const { isAuthenticated } = useAuth()
  const router = useRouter()

useEffect(() => {
    if (!isAuthenticated) {
      router.push("/login")
    }
  }, [isAuthenticated, router])

return (
    <Layout>
      <MedicalFilesList />
    </Layout>
  )
}
[V0_FILE]typescriptreact:file="src/app/page.tsx"
"use client"

import { useEffect } from "react"
import { useRouter } from "next/navigation"
import { useAuth } from "@/contexts/AuthContext"

export default function HomePage() {
  const { isAuthenticated } = useAuth()
  const router = useRouter()

useEffect(() => {
    if (isAuthenticated) {
      router.push("/dashboard")
    } else {
      router.push("/login")
    }
  }, [isAuthenticated, router])

return (
    <div className="min-h-screen flex items-center justify-center">
      <div className="animate-spin rounded-full h-32 w-32 border-b-2 border-blue-600"></div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="src/app/patients/page.tsx"
"use client"

import { useEffect } from "react"
import { useRouter } from "next/navigation"
import { useAuth } from "@/contexts/AuthContext"
import Layout from "@/components/Layout/Layout"
import PatientList from "@/components/Patients/PatientList"

export default function PatientsPage() {
  const { isAuthenticated } = useAuth()
  const router = useRouter()

useEffect(() => {
    if (!isAuthenticated) {
      router.push("/login")
    }
  }, [isAuthenticated, router])

return (
    <Layout>
      <PatientList />
    </Layout>
  )
}
[V0_FILE]typescriptreact:file="src/app/prescriptions/page.tsx"
"use client"

import { useEffect } from "react"
import { useRouter } from "next/navigation"
import { useAuth } from "@/contexts/AuthContext"
import Layout from "@/components/Layout/Layout"
import PrescriptionsPage from "@/components/Prescriptions/PrescriptionsPage"

export default function Prescriptions() {
  const { isAuthenticated } = useAuth()
  const router = useRouter()

useEffect(() => {
    if (!isAuthenticated) {
      router.push("/login")
    }
  }, [isAuthenticated, router])

return (
    <Layout>
      <PrescriptionsPage />
    </Layout>
  )
}
[V0_FILE]typescriptreact:file="src/app/providers.tsx"
"use client"

import type React from "react"

import { Toaster } from "react-hot-toast"
import { AuthProvider } from "@/contexts/AuthContext"
import { ThemeProvider } from "@/contexts/ThemeContext"
import { WaitingRoomProvider } from "@/contexts/WaitingRoomContext"

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <ThemeProvider>
      <AuthProvider>
        <WaitingRoomProvider>
          <div className="min-h-screen bg-gray-50 dark:bg-gray-900 transition-colors duration-200">
            {children}
            <Toaster
              position="top-right"
              toastOptions={{
                duration: 3000,
                style: {
                  background: "var(--toast-bg)",
                  color: "var(--toast-color)",
                  boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.1)",
                  border: "1px solid var(--toast-border)",
                },
              }}
            />
          </div>
        </WaitingRoomProvider>
      </AuthProvider>
    </ThemeProvider>
  )
}
[V0_FILE]typescriptreact:file="src/app/radiology/page.tsx"
"use client"

import { useEffect } from "react"
import { useRouter } from "next/navigation"
import { useAuth } from "@/contexts/AuthContext"
import Layout from "@/components/Layout/Layout"
import RadiologyPage from "@/components/Radiology/RadiologyPage"

export default function Radiology() {
  const { isAuthenticated } = useAuth()
  const router = useRouter()

useEffect(() => {
    if (!isAuthenticated) {
      router.push("/login")
    }
  }, [isAuthenticated, router])

return (
    <Layout>
      <RadiologyPage />
    </Layout>
  )
}
[V0_FILE]typescriptreact:file="src/app/statistics/page.tsx"
"use client"

import { useEffect } from "react"
import { useRouter } from "next/navigation"
import { useAuth } from "@/contexts/AuthContext"
import Layout from "@/components/Layout/Layout"
import StatisticsPage from "@/components/Statistics/StatisticsPage"

export default function Statistics() {
  const { isAuthenticated } = useAuth()
  const router = useRouter()

useEffect(() => {
    if (!isAuthenticated) {
      router.push("/login")
    }
  }, [isAuthenticated, router])

return (
    <Layout>
      <StatisticsPage />
    </Layout>
  )
}
[V0_FILE]typescriptreact:file="src/app/waiting-room/page.tsx"
"use client"

import { useEffect } from "react"
import { useRouter } from "next/navigation"
import { useAuth } from "@/contexts/AuthContext"
import WaitingRoomDisplay from "@/components/WaitingRoom/WaitingRoomDisplay"

export default function WaitingRoomPage() {
  const { isAuthenticated } = useAuth()
  const router = useRouter()

useEffect(() => {
    if (!isAuthenticated) {
      router.push("/login")
    }
  }, [isAuthenticated, router])

return <WaitingRoomDisplay />
}
[V0_FILE]typescriptreact:file="src/components/Appointments/AppointmentList.tsx"
"use client"

import type React from "react"
import { useState, useEffect } from "react"
import { motion } from "framer-motion"
import {
  Calendar,
  Clock,
  User,
  Phone,
  MapPin,
  Edit,
  Trash2,
  CheckCircle,
  XCircle,
  AlertCircle,
  Plus,
} from "lucide-react"
import { useWebSocket } from "../../contexts/WebSocketContext"
import { useAuth } from "../../contexts/AuthContext"
import type { Appointment, Patient, User as UserType } from "../../types"

const AppointmentList: React.FC = () => {
  const { updateAppointmentStatus, callPatient } = useWebSocket()
  const { user } = useAuth()
  const [appointments, setAppointments] = useState<Appointment[]>([])
  const [selectedDate, setSelectedDate] = useState(new Date().toISOString().split("T")[0])
  const [statusFilter, setStatusFilter] = useState<string>("all")
  const [loading, setLoading] = useState(true)

// Mock appointments data
  useEffect(() => {
    const mockAppointments: Appointment[] = [
      {
        id: "1",
        patient: {
          id: "1",
          firstname: "Sarah",
          lastname: "Benali",
          phone: "0661234567",
          email: "sarah.benali@email.com",
          gender: "female",
          city: "Casablanca",
          province: "Grand Casablanca",
          patientType: "OLD_PATIENT",
          dateOfBirth: new Date("1985-03-15"),
          appointments: [],
          medicalFiles: [],
          factures: [],
          createdAt: new Date(),
          updatedAt: new Date(),
          historique: [],
          allergies: ["Pénicilline"],
          chronicConditions: [],
          totalVisits: 5,
          totalSpent: 17500,
        } as Patient,
        doctor: user as UserType,
        cabinet: {
          id: "1",
          name: "Cabinet 1",
          number: "1",
          type: "consultation",
          status: "available",
          equipment: [],
          capacity: 1,
          floor: 1,
          createdAt: new Date(),
          updatedAt: new Date(),
        },
        date: new Date(),
        startTime: "09:00",
        endTime: "09:30",
        status: "confirmed",
        type: "consultation",
        reason: "Contrôle orthodontique",
        createdBy: user as UserType,
        createdAt: new Date(),
        updatedAt: new Date(),
        reminderSent: true,
        estimatedDuration: 30,
        priority: "medium",
      },
      {
        id: "2",
        patient: {
          id: "2",
          firstname: "Ahmed",
          lastname: "Mansouri",
          phone: "0662345678",
          email: "ahmed.mansouri@email.com",
          gender: "male",
          city: "Rabat",
          province: "Rabat-Salé-Kénitra",
          patientType: "NEW_PATIENT",
          dateOfBirth: new Date("1990-07-22"),
          appointments: [],
          medicalFiles: [],
          factures: [],
          createdAt: new Date(),
          updatedAt: new Date(),
          historique: [],
          allergies: [],
          chronicConditions: ["Diabète"],
          totalVisits: 1,
          totalSpent: 3500,
        } as Patient,
        doctor: user as UserType,
        cabinet: {
          id: "2",
          name: "Cabinet 2",
          number: "2",
          type: "consultation",
          status: "available",
          equipment: [],
          capacity: 1,
          floor: 1,
          createdAt: new Date(),
          updatedAt: new Date(),
        },
        date: new Date(),
        startTime: "10:00",
        endTime: "10:45",
        status: "scheduled",
        type: "consultation",
        reason: "Première consultation",
        createdBy: user as UserType,
        createdAt: new Date(),
        updatedAt: new Date(),
        reminderSent: false,
        estimatedDuration: 45,
        priority: "high",
      },
      {
        id: "3",
        patient: {
          id: "3",
          firstname: "Fatima",
          lastname: "Alami",
          phone: "0663456789",
          email: "fatima.alami@email.com",
          gender: "female",
          city: "Fès",
          province: "Fès-Meknès",
          patientType: "OLD_PATIENT",
          dateOfBirth: new Date("1978-11-08"),
          appointments: [],
          medicalFiles: [],
          factures: [],
          createdAt: new Date(),
          updatedAt: new Date(),
          historique: [],
          allergies: [],
          chronicConditions: [],
          totalVisits: 12,
          totalSpent: 42000,
        } as Patient,
        doctor: user as UserType,
        cabinet: {
          id: "1",
          name: "Cabinet 1",
          number: "1",
          type: "consultation",
          status: "available",
          equipment: [],
          capacity: 1,
          floor: 1,
          createdAt: new Date(),
          updatedAt: new Date(),
        },
        date: new Date(),
        startTime: "14:30",
        endTime: "15:00",
        status: "in_progress",
        type: "follow_up",
        reason: "Suivi traitement",
        createdBy: user as UserType,
        createdAt: new Date(),
        updatedAt: new Date(),
        reminderSent: true,
        estimatedDuration: 30,
        priority: "medium",
      },
    ]

setTimeout(() => {
      setAppointments(mockAppointments)
      setLoading(false)
    }, 1000)
  }, [user])

const getStatusColor = (status: string) => {
    switch (status) {
      case "scheduled":
        return "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200"
      case "confirmed":
        return "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200"
      case "in_progress":
        return "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200"
      case "completed":
        return "bg-emerald-100 text-emerald-800 dark:bg-emerald-900 dark:text-emerald-200"
      case "cancelled":
        return "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200"
      case "no_show":
        return "bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200"
      default:
        return "bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200"
    }
  }

const getStatusIcon = (status: string) => {
    switch (status) {
      case "confirmed":
        return <CheckCircle className="w-4 h-4" />
      case "cancelled":
        return <XCircle className="w-4 h-4" />
      case "in_progress":
        return <AlertCircle className="w-4 h-4" />
      default:
        return <Clock className="w-4 h-4" />
    }
  }

const getPriorityColor = (priority: string) => {
    switch (priority) {
      case "urgent":
        return "border-l-red-500"
      case "high":
        return "border-l-orange-500"
      case "medium":
        return "border-l-blue-500"
      default:
        return "border-l-gray-300"
    }
  }

const handleStatusChange = (appointmentId: string, newStatus: string) => {
    setAppointments((prev) =>
      prev.map((apt) => (apt.id === appointmentId ? { ...apt, status: newStatus as any } : apt)),
    )
    updateAppointmentStatus(appointmentId, newStatus)
  }

const handleCallPatient = (appointment: Appointment) => {
    callPatient(appointment.patient, appointment.doctor, appointment.cabinet.number)
  }

const filteredAppointments = appointments.filter((appointment) => {
    const matchesDate = appointment.date.toISOString().split("T")[0] === selectedDate
    const matchesStatus = statusFilter === "all" || appointment.status === statusFilter
    return matchesDate && matchesStatus
  })

if (loading) {
    return (
      <div className="p-6">
        <div className="animate-pulse space-y-4">
          {[...Array(5)].map((_, i) => (
            <div key={i} className="bg-gray-200 dark:bg-gray-700 h-24 rounded-lg"></div>
          ))}
        </div>
      </div>
    )
  }

return (
    <div className="p-6 space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold text-gray-900 dark:text-gray-100">Rendez-vous</h1>
          <p className="text-gray-600 dark:text-gray-400 mt-1">Gérez vos rendez-vous quotidiens</p>
        </div>
        <button className="flex items-center space-x-2 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors">
          <Plus className="w-4 h-4" />
          <span>Nouveau rendez-vous</span>
        </button>
      </div>

{/* Filters */}
      <div className="flex flex-wrap items-center gap-4 bg-white dark:bg-gray-800 p-4 rounded-lg shadow-sm">
        <div className="flex items-center space-x-2">
          <Calendar className="w-4 h-4 text-gray-500" />
          <input
            type="date"
            value={selectedDate}
            onChange={(e) => setSelectedDate(e.target.value)}
            className="border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
          />
        </div>

<select
          value={statusFilter}
          onChange={(e) => setStatusFilter(e.target.value)}
          className="border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
        >
          <option value="all">Tous les statuts</option>
          <option value="scheduled">Programmé</option>
          <option value="confirmed">Confirmé</option>
          <option value="in_progress">En cours</option>
          <option value="completed">Terminé</option>
          <option value="cancelled">Annulé</option>
          <option value="no_show">Absent</option>
        </select>

<div className="text-sm text-gray-600 dark:text-gray-400">
          {filteredAppointments.length} rendez-vous trouvés
        </div>
      </div>

{/* Appointments List */}
      <div className="space-y-4">
        {filteredAppointments.length === 0 ? (
          <div className="text-center py-12 bg-white dark:bg-gray-800 rounded-lg">
            <Calendar className="w-16 h-16 text-gray-400 mx-auto mb-4" />
            <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-2">Aucun rendez-vous</h3>
            <p className="text-gray-600 dark:text-gray-400">
              Aucun rendez-vous trouvé pour cette date et ces critères.
            </p>
          </div>
        ) : (
          filteredAppointments.map((appointment, index) => (
            <motion.div
              key={appointment.id}
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: index * 0.1 }}
              className={`bg-white dark:bg-gray-800 rounded-lg shadow-sm border-l-4 ${getPriorityColor(appointment.priority)} p-6 hover:shadow-md transition-shadow`}
            >
              <div className="flex items-center justify-between">
                <div className="flex items-center space-x-4">
                  <div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-600 rounded-full flex items-center justify-center">
                    <span className="text-white font-semibold">
                      {appointment.patient.firstname.charAt(0)}
                      {appointment.patient.lastname.charAt(0)}
                    </span>
                  </div>

<div>
                    <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
                      {appointment.patient.firstname} {appointment.patient.lastname}
                    </h3>
                    <div className="flex items-center space-x-4 text-sm text-gray-600 dark:text-gray-400">
                      <div className="flex items-center space-x-1">
                        <Clock className="w-4 h-4" />
                        <span>
                          {appointment.startTime} - {appointment.endTime}
                        </span>
                      </div>
                      <div className="flex items-center space-x-1">
                        <MapPin className="w-4 h-4" />
                        <span>Cabinet {appointment.cabinet.number}</span>
                      </div>
                      <div className="flex items-center space-x-1">
                        <Phone className="w-4 h-4" />
                        <span>{appointment.patient.phone}</span>
                      </div>
                    </div>
                    <p className="text-sm text-gray-700 dark:text-gray-300 mt-1">{appointment.reason}</p>
                  </div>
                </div>

<div className="flex items-center space-x-3">
                  <span
                    className={`inline-flex items-center space-x-1 px-3 py-1 text-xs font-medium rounded-full ${getStatusColor(appointment.status)}`}
                  >
                    {getStatusIcon(appointment.status)}
                    <span className="capitalize">{appointment.status.replace("_", " ")}</span>
                  </span>

<div className="flex items-center space-x-2">
                    {appointment.status === "confirmed" && (
                      <button
                        onClick={() => handleCallPatient(appointment)}
                        className="p-2 text-blue-600 hover:bg-blue-100 dark:hover:bg-blue-900 rounded-lg transition-colors"
                        title="Appeler le patient"
                      >
                        <User className="w-4 h-4" />
                      </button>
                    )}

<select
                      value={appointment.status}
                      onChange={(e) => handleStatusChange(appointment.id, e.target.value)}
                      className="text-xs border border-gray-300 dark:border-gray-600 rounded px-2 py-1 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
                    >
                      <option value="scheduled">Programmé</option>
                      <option value="confirmed">Confirmé</option>
                      <option value="in_progress">En cours</option>
                      <option value="completed">Terminé</option>
                      <option value="cancelled">Annulé</option>
                      <option value="no_show">Absent</option>
                    </select>

{appointment.priority === "urgent" && (
                <div className="mt-3 p-2 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
                  <p className="text-sm text-red-800 dark:text-red-200 font-medium">
                    🚨 Rendez-vous urgent - Priorité maximale
                  </p>
                </div>
              )}
            </motion.div>
          ))
        )}
      </div>
    </div>
  )
}

export default AppointmentList
[V0_FILE]typescriptreact:file="src/components/Auth/LoginForm.tsx"
"use client"

import type React from "react"
import { useState } from "react"
import { motion } from "framer-motion"
import { useForm } from "react-hook-form"
import { Eye, EyeOff, Stethoscope, User, Lock } from "lucide-react"
import { useAuth } from "../../contexts/AuthContext"
import { useRouter } from "next/navigation"
import toast from "react-hot-toast"

interface LoginFormData {
  username: string
  password: string
}

const LoginForm: React.FC = () => {
  const [showPassword, setShowPassword] = useState(false)
  const [isLoading, setIsLoading] = useState(false)
  const { login } = useAuth()
  const router = useRouter()

const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<LoginFormData>()

const onSubmit = async (data: LoginFormData) => {
    setIsLoading(true)
    try {
      const success = await login(data.username, data.password)
      if (success) {
        toast.success("Connexion réussie !")
        router.push("/dashboard")
      } else {
        toast.error("Nom d'utilisateur ou mot de passe incorrect")
      }
    } catch (error) {
      toast.error("Erreur de connexion")
    } finally {
      setIsLoading(false)
    }
  }

return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-blue-50 flex items-center justify-center p-4">
      <div className="max-w-md w-full">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5 }}
          className="bg-white rounded-2xl shadow-xl p-8"
        >
          <div className="text-center mb-8">
            <motion.div
              initial={{ scale: 0 }}
              animate={{ scale: 1 }}
              transition={{ delay: 0.2, type: "spring" }}
              className="w-16 h-16 bg-gradient-to-br from-blue-500 to-blue-600 rounded-full flex items-center justify-center mx-auto mb-4"
            >
              <Stethoscope className="w-8 h-8 text-white" />
            </motion.div>
            <h2 className="text-2xl font-bold text-gray-900 mb-2">Clinique Dentaire</h2>
            <p className="text-gray-600">Connectez-vous à votre espace</p>
          </div>

<form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">Nom d'utilisateur</label>
              <div className="relative">
                <User className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400" />
                <input
                  {...register("username", { required: "Le nom d'utilisateur est requis" })}
                  type="text"
                  className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors"
                  placeholder="Entrez votre nom d'utilisateur"
                />
              </div>
              {errors.username && <p className="text-red-500 text-sm mt-1">{errors.username.message}</p>}
            </div>

<div>
              <label className="block text-sm font-medium text-gray-700 mb-2">Mot de passe</label>
              <div className="relative">
                <Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400" />
                <input
                  {...register("password", { required: "Le mot de passe est requis" })}
                  type={showPassword ? "text" : "password"}
                  className="w-full pl-10 pr-12 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors"
                  placeholder="Entrez votre mot de passe"
                />
                <button
                  type="button"
                  onClick={() => setShowPassword(!showPassword)}
                  className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600"
                >
                  {showPassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
                </button>
              </div>
              {errors.password && <p className="text-red-500 text-sm mt-1">{errors.password.message}</p>}
            </div>

<motion.button
              whileHover={{ scale: 1.02 }}
              whileTap={{ scale: 0.98 }}
              type="submit"
              disabled={isLoading}
              className="w-full bg-gradient-to-r from-blue-500 to-blue-600 text-white py-3 rounded-lg font-medium hover:from-blue-600 hover:to-blue-700 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
            >
              {isLoading ? "Connexion..." : "Se connecter"}
            </motion.button>
          </form>

<div className="mt-8 pt-6 border-t border-gray-200">
            <div className="text-center">
              <p className="text-sm text-gray-600 mb-4">Comptes de démonstration :</p>
              <div className="grid grid-cols-1 gap-2 text-xs">
                <div className="bg-gray-50 p-2 rounded">
                  <span className="font-medium">Admin:</span> admin / 123456
                </div>
                <div className="bg-gray-50 p-2 rounded">
                  <span className="font-medium">Docteur:</span> dr.benali / 123456
                </div>
                <div className="bg-gray-50 p-2 rounded">
                  <span className="font-medium">Réception:</span> reception / 123456
                </div>
              </div>
            </div>
          </div>
        </motion.div>
      </div>
    </div>
  )
}

export default LoginForm
[V0_FILE]typescriptreact:file="src/components/Billing/BillingPage.tsx"
"use client"

import type React from "react"
import { useState } from "react"
import { motion } from "framer-motion"
import {
  Plus,
  Search,
  DollarSign,
  Calendar,
  User,
  FileText,
  Clock,
  CheckCircle,
  XCircle,
  AlertTriangle,
  Eye,
  Download,
  PrinterIcon as Print,
  CreditCard,
  Banknote,
  Receipt,
} from "lucide-react"
import type { Facture } from "../../types"
import { useAuth } from "../../contexts/AuthContext"

const BillingPage: React.FC = () => {
  const [searchTerm, setSearchTerm] = useState("")
  const [filterStatus, setFilterStatus] = useState<"all" | "paid" | "partial" | "unpaid" | "refunded" | "cancelled">(
    "all",
  )
  const [filterPaymentMethod, setFilterPaymentMethod] = useState<
    "all" | "cash" | "card" | "transfer" | "check" | "insurance"
  >("all")
  const { user } = useAuth()

// Mock billing data
  const mockInvoices: Facture[] = [
    {
      id: "1",
      patient: {
        id: "1",
        firstname: "Amina",
        lastname: "Benali",
        phone: "0661234567",
        email: "amina.benali@email.com",
        gender: "female",
        city: "Alger",
        province: "Alger",
        patientType: "OLD_PATIENT",
        dateOfBirth: new Date("1985-03-15"),
        appointments: [],
        medicalFiles: [],
        factures: [],
        createdAt: new Date(),
        updatedAt: new Date(),
        historique: [],
        allergies: ["Pénicilline"],
        chronicConditions: ["Hypertension"],
        totalVisits: 12,
        totalSpent: 45000,
      },
      doctor: {
        id: "1",
        firstname: "Dr. Sarah",
        lastname: "Benali",
        phone: "0661234567",
        email: "sarah.benali@clinic.ma",
        gender: "female",
        role: "doctor",
        username: "dr.benali",
        isActive: true,
        createdAt: new Date(),
        updatedAt: new Date(),
        specialization: "Orthodontie",
        cabinetNumber: "Cabinet 1",
        cabinet: {
          id: "1",
          name: "Cabinet 1",
          number: "1",
          type: "consultation",
          status: "available",
          equipment: [],
          capacity: 2,
          floor: 1,
          createdAt: new Date(),
          updatedAt: new Date(),
        },
        agenda: [],
        patients: [],
        medicalFiles: [],
        prescriptions: [],
        usedMedicines: [],
        messages: [],
        factures: [],
        statistics: [],
        historique: [],
        doctorRole: "employee",
        workingHours: [],
        consultationFee: 3500,
        rating: 4.8,
        totalPatients: 156,
        totalConsultations: 234,
        access: {
          viewOwnPatients: true,
          viewOwnStats: true,
          accessMedicalModules: true,
          accessFinancialOwn: true,
          globalStats: false,
          adminPrivileges: false,
        },
      },
      services: [
        {
          id: "1",
          name: "Consultation orthodontique",
          description: "Consultation de suivi orthodontique",
          basePrice: 3500,
          durationMinutes: 45,
          category: "consultation",
          isActive: true,
        },
        {
          id: "2",
          name: "Ajustement appareil",
          description: "Ajustement et activation de l'appareil orthodontique",
          basePrice: 2500,
          durationMinutes: 30,
          category: "treatment",
          isActive: true,
        },
      ],
      medicines: [
        {
          medicine: {
            id: "1",
            name: "Bain de bouche antiseptique",
            barcode: "1234567890123",
            quantity: 15,
            unit: "flacons",
            expiryDate: new Date("2025-06-30"),
            provider: "Oral Care Plus",
            price: 850.0,
            minStockLevel: 10,
            category: "antiseptic",
            description: "Bain de bouche à la chlorhexidine",
            createdAt: new Date(),
            updatedAt: new Date(),
          },
          dosage: "15ml",
          duration: "14 jours",
          frequency: "2 fois par jour",
          quantity: 1,
          notes: "Après brossage",
          cost: 850.0,
        },
      ],
      totalAmount: 6850.0,
      amountPaid: 6850.0,
      discount: 0,
      tax: 0,
      paymentMethod: "card",
      status: "paid",
      date: new Date("2024-01-20"),
      createdBy: user!,
      notes: "Paiement par carte bancaire",
      isPrinted: true,
      barcode: "INV-2024-001",
      receiptNumber: "REC-001-2024",
      paymentHistory: [
        {
          id: "1",
          amount: 6850.0,
          method: "card",
          reference: "CB-20240120-001",
          receivedBy: user!,
          createdAt: new Date("2024-01-20"),
        },
      ],
      createdAt: new Date("2024-01-20"),
      updatedAt: new Date("2024-01-20"),
    },
    {
      id: "2",
      patient: {
        id: "2",
        firstname: "Mohamed",
        lastname: "Alami",
        phone: "0662345678",
        email: "mohamed.alami@email.com",
        gender: "male",
        city: "Oran",
        province: "Oran",
        patientType: "NEW_PATIENT",
        dateOfBirth: new Date("1990-07-22"),
        appointments: [],
        medicalFiles: [],
        factures: [],
        createdAt: new Date(),
        updatedAt: new Date(),
        historique: [],
        allergies: [],
        chronicConditions: [],
        totalVisits: 3,
        totalSpent: 12000,
      },
      doctor: {
        id: "1",
        firstname: "Dr. Sarah",
        lastname: "Benali",
        phone: "0661234567",
        email: "sarah.benali@clinic.ma",
        gender: "female",
        role: "doctor",
        username: "dr.benali",
        isActive: true,
        createdAt: new Date(),
        updatedAt: new Date(),
        specialization: "Orthodontie",
        cabinetNumber: "Cabinet 1",
        cabinet: {
          id: "1",
          name: "Cabinet 1",
          number: "1",
          type: "consultation",
          status: "available",
          equipment: [],
          capacity: 2,
          floor: 1,
          createdAt: new Date(),
          updatedAt: new Date(),
        },
        agenda: [],
        patients: [],
        medicalFiles: [],
        prescriptions: [],
        usedMedicines: [],
        messages: [],
        factures: [],
        statistics: [],
        historique: [],
        doctorRole: "employee",
        workingHours: [],
        consultationFee: 3500,
        rating: 4.8,
        totalPatients: 156,
        totalConsultations: 234,
        access: {
          viewOwnPatients: true,
          viewOwnStats: true,
          accessMedicalModules: true,
          accessFinancialOwn: true,
          globalStats: false,
          adminPrivileges: false,
        },
      },
      services: [
        {
          id: "3",
          name: "Implant dentaire",
          description: "Pose d'implant dentaire avec couronne",
          basePrice: 85000,
          durationMinutes: 120,
          category: "surgery",
          isActive: true,
        },
      ],
      totalAmount: 85000.0,
      amountPaid: 42500.0,
      discount: 0,
      tax: 0,
      paymentMethod: "cash",
      status: "partial",
      date: new Date("2024-01-18"),
      dueDate: new Date("2024-02-18"),
      createdBy: user!,
      notes: "Paiement échelonné - 50% à la pose, 50% à la livraison",
      isPrinted: false,
      barcode: "INV-2024-002",
      receiptNumber: "REC-002-2024",
      paymentHistory: [
        {
          id: "2",
          amount: 42500.0,
          method: "cash",
          receivedBy: user!,
          createdAt: new Date("2024-01-18"),
        },
      ],
      createdAt: new Date("2024-01-18"),
      updatedAt: new Date("2024-01-18"),
    },
  ]

const filteredInvoices = mockInvoices.filter((invoice) => {
    const matchesSearch =
      invoice.patient.firstname.toLowerCase().includes(searchTerm.toLowerCase()) ||
      invoice.patient.lastname.toLowerCase().includes(searchTerm.toLowerCase()) ||
      invoice.receiptNumber.toLowerCase().includes(searchTerm.toLowerCase()) ||
      invoice.barcode.toLowerCase().includes(searchTerm.toLowerCase())

const matchesStatus = filterStatus === "all" || invoice.status === filterStatus
    const matchesPaymentMethod = filterPaymentMethod === "all" || invoice.paymentMethod === filterPaymentMethod

return matchesSearch && matchesStatus && matchesPaymentMethod
  })

const getStatusColor = (status: string) => {
    switch (status) {
      case "paid":
        return "text-green-600 bg-green-100 dark:bg-green-900/20 dark:text-green-400"
      case "partial":
        return "text-yellow-600 bg-yellow-100 dark:bg-yellow-900/20 dark:text-yellow-400"
      case "unpaid":
        return "text-red-600 bg-red-100 dark:bg-red-900/20 dark:text-red-400"
      case "refunded":
        return "text-purple-600 bg-purple-100 dark:bg-purple-900/20 dark:text-purple-400"
      case "cancelled":
        return "text-gray-600 bg-gray-100 dark:bg-gray-900/20 dark:text-gray-400"
      default:
        return "text-gray-600 bg-gray-100 dark:bg-gray-900/20 dark:text-gray-400"
    }
  }

const getStatusIcon = (status: string) => {
    switch (status) {
      case "paid":
        return <CheckCircle className="w-4 h-4" />
      case "partial":
        return <Clock className="w-4 h-4" />
      case "unpaid":
        return <AlertTriangle className="w-4 h-4" />
      case "refunded":
        return <XCircle className="w-4 h-4" />
      case "cancelled":
        return <XCircle className="w-4 h-4" />
      default:
        return <FileText className="w-4 h-4" />
    }
  }

const getStatusText = (status: string) => {
    switch (status) {
      case "paid":
        return "Payé"
      case "partial":
        return "Partiel"
      case "unpaid":
        return "Impayé"
      case "refunded":
        return "Remboursé"
      case "cancelled":
        return "Annulé"
      default:
        return status
    }
  }

const getPaymentMethodIcon = (method: string) => {
    switch (method) {
      case "cash":
        return <Banknote className="w-4 h-4" />
      case "card":
        return <CreditCard className="w-4 h-4" />
      case "transfer":
        return <DollarSign className="w-4 h-4" />
      case "check":
        return <Receipt className="w-4 h-4" />
      case "insurance":
        return <FileText className="w-4 h-4" />
      default:
        return <DollarSign className="w-4 h-4" />
    }
  }

const getPaymentMethodText = (method: string) => {
    switch (method) {
      case "cash":
        return "Espèces"
      case "card":
        return "Carte"
      case "transfer":
        return "Virement"
      case "check":
        return "Chèque"
      case "insurance":
        return "Assurance"
      default:
        return method
    }
  }

// Statistics
  const totalInvoices = filteredInvoices.length
  const totalAmount = filteredInvoices.reduce((sum, inv) => sum + inv.totalAmount, 0)
  const totalPaid = filteredInvoices.reduce((sum, inv) => sum + inv.amountPaid, 0)
  const pendingAmount = totalAmount - totalPaid
  const paidInvoices = filteredInvoices.filter((inv) => inv.status === "paid").length
  const unpaidInvoices = filteredInvoices.filter((inv) => inv.status === "unpaid").length

{/* Statistics Cards */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-6">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.1 }}
          className="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6"
        >
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-gray-600 dark:text-gray-400 mb-1">Total Factures</p>
              <p className="text-2xl font-bold text-gray-900 dark:text-gray-100">{totalInvoices}</p>
            </div>
            <div className="w-12 h-12 bg-blue-100 dark:bg-blue-900/20 rounded-lg flex items-center justify-center">
              <FileText className="w-6 h-6 text-blue-600 dark:text-blue-400" />
            </div>
          </div>
        </motion.div>

<motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.2 }}
          className="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6"
        >
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-gray-600 dark:text-gray-400 mb-1">Montant Total</p>
              <p className="text-2xl font-bold text-gray-900 dark:text-gray-100">{totalAmount.toLocaleString()} DA</p>
            </div>
            <div className="w-12 h-12 bg-green-100 dark:bg-green-900/20 rounded-lg flex items-center justify-center">
              <DollarSign className="w-6 h-6 text-green-600 dark:text-green-400" />
            </div>
          </div>
        </motion.div>

<motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.3 }}
          className="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6"
        >
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-gray-600 dark:text-gray-400 mb-1">Montant Payé</p>
              <p className="text-2xl font-bold text-gray-900 dark:text-gray-100">{totalPaid.toLocaleString()} DA</p>
            </div>
            <div className="w-12 h-12 bg-green-100 dark:bg-green-900/20 rounded-lg flex items-center justify-center">
              <CheckCircle className="w-6 h-6 text-green-600 dark:text-green-400" />
            </div>
          </div>
        </motion.div>

<motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.4 }}
          className="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6"
        >
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-gray-600 dark:text-gray-400 mb-1">En Attente</p>
              <p className="text-2xl font-bold text-gray-900 dark:text-gray-100">{pendingAmount.toLocaleString()} DA</p>
            </div>
            <div className="w-12 h-12 bg-yellow-100 dark:bg-yellow-900/20 rounded-lg flex items-center justify-center">
              <Clock className="w-6 h-6 text-yellow-600 dark:text-yellow-400" />
            </div>
          </div>
        </motion.div>

<motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.5 }}
          className="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6"
        >
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-gray-600 dark:text-gray-400 mb-1">Taux Paiement</p>
              <p className="text-2xl font-bold text-gray-900 dark:text-gray-100">
                {totalAmount > 0 ? Math.round((totalPaid / totalAmount) * 100) : 0}%
              </p>
            </div>
            <div className="w-12 h-12 bg-purple-100 dark:bg-purple-900/20 rounded-lg flex items-center justify-center">
              <Receipt className="w-6 h-6 text-purple-600 dark:text-purple-400" />
            </div>
          </div>
        </motion.div>
      </div>

{/* Filters and Search */}
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ delay: 0.6 }}
        className="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6"
      >
        <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between space-y-4 lg:space-y-0 mb-6">
          <div className="relative flex-1 max-w-md">
            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400" />
            <input
              type="text"
              placeholder="Rechercher par patient, numéro de facture..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="w-full pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
            />
          </div>

<div className="flex items-center space-x-4">
            <select
              value={filterStatus}
              onChange={(e) => setFilterStatus(e.target.value as any)}
              className="border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
            >
              <option value="all">Tous les statuts</option>
              <option value="paid">Payées</option>
              <option value="partial">Partielles</option>
              <option value="unpaid">Impayées</option>
              <option value="refunded">Remboursées</option>
              <option value="cancelled">Annulées</option>
            </select>

<select
              value={filterPaymentMethod}
              onChange={(e) => setFilterPaymentMethod(e.target.value as any)}
              className="border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
            >
              <option value="all">Tous les modes</option>
              <option value="cash">Espèces</option>
              <option value="card">Carte</option>
              <option value="transfer">Virement</option>
              <option value="check">Chèque</option>
              <option value="insurance">Assurance</option>
            </select>

<button className="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors flex items-center space-x-2">
              <Download className="w-5 h-5" />
              <span>Exporter</span>
            </button>
          </div>
        </div>

{/* Invoices List */}
        <div className="space-y-4">
          {filteredInvoices.map((invoice, index) => (
            <motion.div
              key={invoice.id}
              initial={{ opacity: 0, x: -20 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ delay: index * 0.1 }}
              className="bg-gray-50 dark:bg-gray-700 rounded-lg p-6 hover:shadow-md transition-shadow"
            >
              <div className="flex items-start justify-between mb-4">
                <div className="flex items-start space-x-4">
                  <div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-600 rounded-full flex items-center justify-center">
                    <FileText className="w-6 h-6 text-white" />
                  </div>

<div>
                    <div className="flex items-center space-x-3 mb-2">
                      <h3 className="font-semibold text-gray-900 dark:text-gray-100">
                        {invoice.patient.firstname} {invoice.patient.lastname}
                      </h3>
                      <span
                        className={`inline-flex items-center space-x-1 px-3 py-1 rounded-full text-xs font-medium ${getStatusColor(invoice.status)}`}
                      >
                        {getStatusIcon(invoice.status)}
                        <span>{getStatusText(invoice.status)}</span>
                      </span>
                    </div>

<div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-3">
                      <div className="flex items-center space-x-2">
                        <Receipt className="w-4 h-4 text-gray-400" />
                        <span className="text-sm text-gray-600 dark:text-gray-400">{invoice.receiptNumber}</span>
                      </div>
                      <div className="flex items-center space-x-2">
                        <Calendar className="w-4 h-4 text-gray-400" />
                        <span className="text-sm text-gray-600 dark:text-gray-400">
                          {invoice.date.toLocaleDateString("fr-FR")}
                        </span>
                      </div>
                      <div className="flex items-center space-x-2">
                        {getPaymentMethodIcon(invoice.paymentMethod)}
                        <span className="text-sm text-gray-600 dark:text-gray-400">
                          {getPaymentMethodText(invoice.paymentMethod)}
                        </span>
                      </div>
                      <div className="flex items-center space-x-2">
                        <User className="w-4 h-4 text-gray-400" />
                        <span className="text-sm text-gray-600 dark:text-gray-400">
                          {invoice.doctor.firstname} {invoice.doctor.lastname}
                        </span>
                      </div>
                    </div>
                  </div>
                </div>

{/* Services */}
              <div className="bg-white dark:bg-gray-600 rounded-lg p-4 mb-4">
                <h4 className="font-medium text-gray-900 dark:text-gray-100 mb-3">Services:</h4>
                <div className="space-y-2">
                  {invoice.services.map((service, idx) => (
                    <div key={idx} className="flex items-center justify-between">
                      <div>
                        <span className="font-medium text-gray-900 dark:text-gray-100">{service.name}</span>
                        {service.description && (
                          <p className="text-sm text-gray-600 dark:text-gray-400">{service.description}</p>
                        )}
                      </div>
                      <span className="font-semibold text-gray-900 dark:text-gray-100">
                        {service.basePrice.toLocaleString()} DA
                      </span>
                    </div>
                  ))}
                </div>
              </div>

{/* Medicines */}
              {invoice.medicines && invoice.medicines.length > 0 && (
                <div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4 mb-4">
                  <h4 className="font-medium text-blue-900 dark:text-blue-300 mb-3">Médicaments:</h4>
                  <div className="space-y-2">
                    {invoice.medicines.map((med, idx) => (
                      <div key={idx} className="flex items-center justify-between">
                        <div>
                          <span className="font-medium text-blue-900 dark:text-blue-300">{med.medicine.name}</span>
                          <p className="text-sm text-blue-800 dark:text-blue-400">
                            {med.dosage} - {med.frequency} - {med.duration}
                          </p>
                        </div>
                        <span className="font-semibold text-blue-900 dark:text-blue-300">
                          {med.cost.toLocaleString()} DA
                        </span>
                      </div>
                    ))}
                  </div>
                </div>
              )}

{/* Payment Summary */}
              <div className="bg-gray-100 dark:bg-gray-600 rounded-lg p-4 mb-4">
                <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                  <div>
                    <p className="text-sm text-gray-600 dark:text-gray-400">Montant Total</p>
                    <p className="font-semibold text-gray-900 dark:text-gray-100">
                      {invoice.totalAmount.toLocaleString()} DA
                    </p>
                  </div>
                  <div>
                    <p className="text-sm text-gray-600 dark:text-gray-400">Montant Payé</p>
                    <p className="font-semibold text-green-600 dark:text-green-400">
                      {invoice.amountPaid.toLocaleString()} DA
                    </p>
                  </div>
                  <div>
                    <p className="text-sm text-gray-600 dark:text-gray-400">Reste à Payer</p>
                    <p className="font-semibold text-red-600 dark:text-red-400">
                      {(invoice.totalAmount - invoice.amountPaid).toLocaleString()} DA
                    </p>
                  </div>
                  <div>
                    <p className="text-sm text-gray-600 dark:text-gray-400">Remise</p>
                    <p className="font-semibold text-gray-900 dark:text-gray-100">
                      {invoice.discount.toLocaleString()} DA
                    </p>
                  </div>
                </div>
              </div>

{/* Payment History */}
              {invoice.paymentHistory && invoice.paymentHistory.length > 0 && (
                <div className="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg p-4">
                  <h4 className="font-medium text-green-900 dark:text-green-300 mb-3">Historique des paiements:</h4>
                  <div className="space-y-2">
                    {invoice.paymentHistory.map((payment, idx) => (
                      <div key={idx} className="flex items-center justify-between">
                        <div className="flex items-center space-x-3">
                          {getPaymentMethodIcon(payment.method)}
                          <div>
                            <span className="font-medium text-green-900 dark:text-green-300">
                              {payment.amount.toLocaleString()} DA
                            </span>
                            <p className="text-sm text-green-800 dark:text-green-400">
                              {payment.createdAt.toLocaleDateString("fr-FR")} - {getPaymentMethodText(payment.method)}
                              {payment.reference && ` (${payment.reference})`}
                            </p>
                          </div>
                        </div>
                        <span className="text-sm text-green-700 dark:text-green-400">
                          {payment.receivedBy.firstname} {payment.receivedBy.lastname}
                        </span>
                      </div>
                    ))}
                  </div>
                </div>
              )}

{/* Notes */}
              {invoice.notes && (
                <div className="mt-4 text-sm text-gray-600 dark:text-gray-400">
                  <strong>Notes:</strong> {invoice.notes}
                </div>
              )}
            </motion.div>
          ))}
        </div>

{filteredInvoices.length === 0 && (
          <div className="text-center py-12">
            <FileText className="w-16 h-16 text-gray-400 mx-auto mb-4" />
            <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-2">Aucune facture trouvée</h3>
            <p className="text-gray-600 dark:text-gray-400">
              Créez une nouvelle facture ou modifiez vos critères de recherche.
            </p>
          </div>
        )}
      </motion.div>
    </div>
  )
}

export default BillingPage
[V0_FILE]typescriptreact:file="src/components/CaseImages/CaseImagesPage.tsx"
"use client"

import type React from "react"
import { useState } from "react"
import { motion } from "framer-motion"
import {
  Plus,
  Search,
  Camera,
  Calendar,
  User,
  Eye,
  Download,
  Upload,
  Tag,
  Grid,
  List,
  ImageIcon,
  Trash2,
  Edit,
  Share2,
} from "lucide-react"
import type { ImageResult } from "../../types"
import { useAuth } from "../../contexts/AuthContext"

const CaseImagesPage: React.FC = () => {
  const [searchTerm, setSearchTerm] = useState("")
  const [filterCategory, setFilterCategory] = useState<"all" | "before" | "after" | "during" | "xray" | "clinical">(
    "all",
  )
  const [viewMode, setViewMode] = useState<"grid" | "list">("grid")
  const { user } = useAuth()

// Mock case images data
  const mockCaseImages: ImageResult[] = [
    {
      id: "1",
      patient: {
        id: "1",
        firstname: "Amina",
        lastname: "Benali",
        phone: "0661234567",
        email: "amina.benali@email.com",
        gender: "female",
        city: "Alger",
        province: "Alger",
        patientType: "OLD_PATIENT",
        dateOfBirth: new Date("1985-03-15"),
        appointments: [],
        medicalFiles: [],
        factures: [],
        createdAt: new Date(),
        updatedAt: new Date(),
        historique: [],
        allergies: ["Pénicilline"],
        chronicConditions: ["Hypertension"],
        totalVisits: 12,
        totalSpent: 45000,
      },
      medicalFile: {
        id: "1",
        patient: {} as any,
        doctor: {} as any,
        date: new Date(),
        description: "Traitement orthodontique",
        diagnostics: ["Malocclusion"],
        treatments: [],
        prescriptions: [],
        labResults: [],
        radiologyResults: [],
        photos: [],
        referrals: [],
        updatedBy: user!,
        medicalConditions: [],
        notes: [],
        createdAt: new Date(),
        updatedAt: new Date(),
      },
      imageUrl: "/case-images/before-treatment-001.jpg",
      thumbnailUrl: "/case-images/thumbs/before-treatment-001-thumb.jpg",
      caption: "État initial avant traitement orthodontique",
      category: "before",
      tags: ["orthodontie", "malocclusion", "initial"],
      uploadedBy: user!,
      createdAt: new Date("2024-01-15"),
    },
    {
      id: "2",
      patient: {
        id: "1",
        firstname: "Amina",
        lastname: "Benali",
        phone: "0661234567",
        email: "amina.benali@email.com",
        gender: "female",
        city: "Alger",
        province: "Alger",
        patientType: "OLD_PATIENT",
        dateOfBirth: new Date("1985-03-15"),
        appointments: [],
        medicalFiles: [],
        factures: [],
        createdAt: new Date(),
        updatedAt: new Date(),
        historique: [],
        allergies: ["Pénicilline"],
        chronicConditions: ["Hypertension"],
        totalVisits: 12,
        totalSpent: 45000,
      },
      medicalFile: {
        id: "1",
        patient: {} as any,
        doctor: {} as any,
        date: new Date(),
        description: "Traitement orthodontique - suivi",
        diagnostics: ["Amélioration"],
        treatments: [],
        prescriptions: [],
        labResults: [],
        radiologyResults: [],
        photos: [],
        referrals: [],
        updatedBy: user!,
        medicalConditions: [],
        notes: [],
        createdAt: new Date(),
        updatedAt: new Date(),
      },
      imageUrl: "/case-images/during-treatment-001.jpg",
      thumbnailUrl: "/case-images/thumbs/during-treatment-001-thumb.jpg",
      caption: "Progression à 6 mois de traitement",
      category: "during",
      tags: ["orthodontie", "progression", "6mois"],
      uploadedBy: user!,
      createdAt: new Date("2024-01-20"),
    },
    {
      id: "3",
      patient: {
        id: "2",
        firstname: "Mohamed",
        lastname: "Alami",
        phone: "0662345678",
        email: "mohamed.alami@email.com",
        gender: "male",
        city: "Oran",
        province: "Oran",
        patientType: "NEW_PATIENT",
        dateOfBirth: new Date("1990-07-22"),
        appointments: [],
        medicalFiles: [],
        factures: [],
        createdAt: new Date(),
        updatedAt: new Date(),
        historique: [],
        allergies: [],
        chronicConditions: [],
        totalVisits: 3,
        totalSpent: 12000,
      },
      medicalFile: {
        id: "2",
        patient: {} as any,
        doctor: {} as any,
        date: new Date(),
        description: "Implant dentaire",
        diagnostics: ["Édentement"],
        treatments: [],
        prescriptions: [],
        labResults: [],
        radiologyResults: [],
        photos: [],
        referrals: [],
        updatedBy: user!,
        medicalConditions: [],
        notes: [],
        createdAt: new Date(),
        updatedAt: new Date(),
      },
      imageUrl: "/case-images/clinical-exam-002.jpg",
      thumbnailUrl: "/case-images/thumbs/clinical-exam-002-thumb.jpg",
      caption: "Examen clinique pré-implantaire",
      category: "clinical",
      tags: ["implant", "examen", "pré-opératoire"],
      uploadedBy: user!,
      createdAt: new Date("2024-01-18"),
    },
  ]

const filteredImages = mockCaseImages.filter((image) => {
    const matchesSearch =
      image.patient.firstname.toLowerCase().includes(searchTerm.toLowerCase()) ||
      image.patient.lastname.toLowerCase().includes(searchTerm.toLowerCase()) ||
      image.caption?.toLowerCase().includes(searchTerm.toLowerCase()) ||
      image.tags.some((tag) => tag.toLowerCase().includes(searchTerm.toLowerCase()))

const matchesCategory = filterCategory === "all" || image.category === filterCategory

return matchesSearch && matchesCategory
  })

const getCategoryColor = (category: string) => {
    switch (category) {
      case "before":
        return "bg-red-100 text-red-800 dark:bg-red-900/20 dark:text-red-400"
      case "after":
        return "bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400"
      case "during":
        return "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/20 dark:text-yellow-400"
      case "xray":
        return "bg-purple-100 text-purple-800 dark:bg-purple-900/20 dark:text-purple-400"
      case "clinical":
        return "bg-blue-100 text-blue-800 dark:bg-blue-900/20 dark:text-blue-400"
      default:
        return "bg-gray-100 text-gray-800 dark:bg-gray-900/20 dark:text-gray-400"
    }
  }

const getCategoryText = (category: string) => {
    switch (category) {
      case "before":
        return "Avant"
      case "after":
        return "Après"
      case "during":
        return "Pendant"
      case "xray":
        return "Radiologie"
      case "clinical":
        return "Clinique"
      default:
        return category
    }
  }

// Statistics
  const totalImages = filteredImages.length
  const categoryCounts = {
    before: filteredImages.filter((img) => img.category === "before").length,
    after: filteredImages.filter((img) => img.category === "after").length,
    during: filteredImages.filter((img) => img.category === "during").length,
    clinical: filteredImages.filter((img) => img.category === "clinical").length,
    xray: filteredImages.filter((img) => img.category === "xray").length,
  }

{/* Statistics Cards */}
      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.1 }}
          className="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-4"
        >
          <div className="text-center">
            <ImageIcon className="w-8 h-8 text-blue-600 dark:text-blue-400 mx-auto mb-2" />
            <p className="text-2xl font-bold text-gray-900 dark:text-gray-100">{totalImages}</p>
            <p className="text-sm text-gray-600 dark:text-gray-400">Total</p>
          </div>
        </motion.div>

{Object.entries(categoryCounts).map(([category, count], index) => (
          <motion.div
            key={category}
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.1 + index * 0.1 }}
            className="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-4"
          >
            <div className="text-center">
              <Camera className="w-8 h-8 text-gray-600 dark:text-gray-400 mx-auto mb-2" />
              <p className="text-2xl font-bold text-gray-900 dark:text-gray-100">{count}</p>
              <p className="text-sm text-gray-600 dark:text-gray-400">{getCategoryText(category)}</p>
            </div>
          </motion.div>
        ))}
      </div>

{/* Filters and Search */}
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ delay: 0.3 }}
        className="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6"
      >
        <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between space-y-4 lg:space-y-0 mb-6">
          <div className="relative flex-1 max-w-md">
            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400" />
            <input
              type="text"
              placeholder="Rechercher par patient, description ou tags..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="w-full pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
            />
          </div>

<div className="flex items-center space-x-4">
            <select
              value={filterCategory}
              onChange={(e) => setFilterCategory(e.target.value as any)}
              className="border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
            >
              <option value="all">Toutes catégories</option>
              <option value="before">Avant traitement</option>
              <option value="during">Pendant traitement</option>
              <option value="after">Après traitement</option>
              <option value="clinical">Clinique</option>
              <option value="xray">Radiologie</option>
            </select>

<div className="flex items-center space-x-2 border border-gray-300 dark:border-gray-600 rounded-lg p-1">
              <button
                onClick={() => setViewMode("grid")}
                className={`p-2 rounded ${viewMode === "grid" ? "bg-blue-100 text-blue-600 dark:bg-blue-900/20 dark:text-blue-400" : "text-gray-600 dark:text-gray-400"}`}
              >
                <Grid className="w-4 h-4" />
              </button>
              <button
                onClick={() => setViewMode("list")}
                className={`p-2 rounded ${viewMode === "list" ? "bg-blue-100 text-blue-600 dark:bg-blue-900/20 dark:text-blue-400" : "text-gray-600 dark:text-gray-400"}`}
              >
                <List className="w-4 h-4" />
              </button>
            </div>

{/* Images Display */}
        {viewMode === "grid" ? (
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
            {filteredImages.map((image, index) => (
              <motion.div
                key={image.id}
                initial={{ opacity: 0, scale: 0.9 }}
                animate={{ opacity: 1, scale: 1 }}
                transition={{ delay: index * 0.1 }}
                className="bg-gray-50 dark:bg-gray-700 rounded-lg overflow-hidden hover:shadow-lg transition-shadow"
              >
                <div className="aspect-square bg-gray-200 dark:bg-gray-600 flex items-center justify-center">
                  <Camera className="w-12 h-12 text-gray-400" />
                </div>

<div className="p-4">
                  <div className="flex items-center justify-between mb-2">
                    <span
                      className={`inline-block px-2 py-1 rounded-full text-xs font-medium ${getCategoryColor(image.category)}`}
                    >
                      {getCategoryText(image.category)}
                    </span>
                    <div className="flex items-center space-x-1">
                      <button className="p-1 text-blue-600 hover:bg-blue-100 dark:hover:bg-blue-900/20 rounded">
                        <Eye className="w-4 h-4" />
                      </button>
                      <button className="p-1 text-green-600 hover:bg-green-100 dark:hover:bg-green-900/20 rounded">
                        <Download className="w-4 h-4" />
                      </button>
                      <button className="p-1 text-orange-600 hover:bg-orange-100 dark:hover:bg-orange-900/20 rounded">
                        <Share2 className="w-4 h-4" />
                      </button>
                    </div>
                  </div>

<h4 className="font-medium text-gray-900 dark:text-gray-100 mb-1">
                    {image.patient.firstname} {image.patient.lastname}
                  </h4>

{image.caption && (
                    <p className="text-sm text-gray-600 dark:text-gray-400 mb-2 line-clamp-2">{image.caption}</p>
                  )}

<div className="flex flex-wrap gap-1 mb-2">
                    {image.tags.slice(0, 3).map((tag, idx) => (
                      <span
                        key={idx}
                        className="inline-flex items-center px-2 py-1 bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-gray-300 rounded text-xs"
                      >
                        <Tag className="w-3 h-3 mr-1" />
                        {tag}
                      </span>
                    ))}
                    {image.tags.length > 3 && (
                      <span className="text-xs text-gray-500 dark:text-gray-400">+{image.tags.length - 3} autres</span>
                    )}
                  </div>

<div className="flex items-center justify-between text-xs text-gray-500 dark:text-gray-400">
                    <span>{image.createdAt.toLocaleDateString("fr-FR")}</span>
                    <span>
                      {image.uploadedBy.firstname} {image.uploadedBy.lastname}
                    </span>
                  </div>
                </div>
              </motion.div>
            ))}
          </div>
        ) : (
          <div className="space-y-4">
            {filteredImages.map((image, index) => (
              <motion.div
                key={image.id}
                initial={{ opacity: 0, x: -20 }}
                animate={{ opacity: 1, x: 0 }}
                transition={{ delay: index * 0.1 }}
                className="bg-gray-50 dark:bg-gray-700 rounded-lg p-6 hover:shadow-md transition-shadow"
              >
                <div className="flex items-start space-x-4">
                  <div className="w-20 h-20 bg-gray-200 dark:bg-gray-600 rounded-lg flex items-center justify-center flex-shrink-0">
                    <Camera className="w-8 h-8 text-gray-400" />
                  </div>

<div className="flex-1">
                    <div className="flex items-center justify-between mb-2">
                      <div className="flex items-center space-x-3">
                        <h4 className="font-medium text-gray-900 dark:text-gray-100">
                          {image.patient.firstname} {image.patient.lastname}
                        </h4>
                        <span
                          className={`inline-block px-2 py-1 rounded-full text-xs font-medium ${getCategoryColor(image.category)}`}
                        >
                          {getCategoryText(image.category)}
                        </span>
                      </div>

{image.caption && <p className="text-gray-600 dark:text-gray-400 mb-3">{image.caption}</p>}

<div className="flex flex-wrap gap-2 mb-3">
                      {image.tags.map((tag, idx) => (
                        <span
                          key={idx}
                          className="inline-flex items-center px-2 py-1 bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-gray-300 rounded text-xs"
                        >
                          <Tag className="w-3 h-3 mr-1" />
                          {tag}
                        </span>
                      ))}
                    </div>

<div className="flex items-center justify-between text-sm text-gray-500 dark:text-gray-400">
                      <div className="flex items-center space-x-4">
                        <div className="flex items-center space-x-1">
                          <Calendar className="w-4 h-4" />
                          <span>{image.createdAt.toLocaleDateString("fr-FR")}</span>
                        </div>
                        <div className="flex items-center space-x-1">
                          <User className="w-4 h-4" />
                          <span>
                            {image.uploadedBy.firstname} {image.uploadedBy.lastname}
                          </span>
                        </div>
                      </div>
                      <span className="text-xs">{image.imageUrl}</span>
                    </div>
                  </div>
                </div>
              </motion.div>
            ))}
          </div>
        )}

{filteredImages.length === 0 && (
          <div className="text-center py-12">
            <ImageIcon className="w-16 h-16 text-gray-400 mx-auto mb-4" />
            <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-2">Aucune image trouvée</h3>
            <p className="text-gray-600 dark:text-gray-400">
              Téléchargez des images de cas ou modifiez vos critères de recherche.
            </p>
          </div>
        )}
      </motion.div>
    </div>
  )
}

export default CaseImagesPage
[V0_FILE]typescriptreact:file="src/components/Common/ConnectionStatus.tsx"
"use client"

import type React from "react"
import { motion, AnimatePresence } from "framer-motion"
import { Wifi, WifiOff, AlertCircle, CheckCircle } from "lucide-react"
import { useWebSocket } from "../../contexts/WebSocketContext"

const ConnectionStatus: React.FC = () => {
  const { connectionStatus, isConnected, onlineUsers } = useWebSocket()

const getStatusConfig = () => {
    switch (connectionStatus) {
      case "connected":
        return {
          icon: CheckCircle,
          color: "text-green-500",
          bgColor: "bg-green-50 dark:bg-green-900/20",
          borderColor: "border-green-200 dark:border-green-800",
          text: "Connecté",
          description: `${onlineUsers.length} utilisateurs en ligne`,
        }
      case "connecting":
        return {
          icon: Wifi,
          color: "text-yellow-500",
          bgColor: "bg-yellow-50 dark:bg-yellow-900/20",
          borderColor: "border-yellow-200 dark:border-yellow-800",
          text: "Connexion...",
          description: "Établissement de la connexion",
        }
      case "error":
        return {
          icon: AlertCircle,
          color: "text-red-500",
          bgColor: "bg-red-50 dark:bg-red-900/20",
          borderColor: "border-red-200 dark:border-red-800",
          text: "Erreur",
          description: "Problème de connexion",
        }
      default:
        return {
          icon: WifiOff,
          color: "text-gray-500",
          bgColor: "bg-gray-50 dark:bg-gray-900/20",
          borderColor: "border-gray-200 dark:border-gray-800",
          text: "Déconnecté",
          description: "Mode hors ligne",
        }
    }
  }

const config = getStatusConfig()
  const Icon = config.icon

return (
    <AnimatePresence>
      <motion.div
        initial={{ opacity: 0, y: -20 }}
        animate={{ opacity: 1, y: 0 }}
        exit={{ opacity: 0, y: -20 }}
        className={`fixed top-4 right-4 z-50 ${config.bgColor} ${config.borderColor} border rounded-lg px-3 py-2 shadow-lg backdrop-blur-sm`}
      >
        <div className="flex items-center space-x-2">
          <motion.div
            animate={connectionStatus === "connecting" ? { rotate: 360 } : {}}
            transition={{ duration: 1, repeat: connectionStatus === "connecting" ? Number.POSITIVE_INFINITY : 0 }}
          >
            <Icon className={`w-4 h-4 ${config.color}`} />
          </motion.div>
          <div className="text-sm">
            <div className={`font-medium ${config.color}`}>{config.text}</div>
            <div className="text-xs text-gray-600 dark:text-gray-400">{config.description}</div>
          </div>
        </div>
      </motion.div>
    </AnimatePresence>
  )
}

export default ConnectionStatus
[V0_FILE]typescriptreact:file="src/components/Common/NotificationCenter.tsx"
"use client"

import type React from "react"
import { useState } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { Bell, X, CheckCheck, Trash2, Clock, AlertCircle, Info, CheckCircle, AlertTriangle } from "lucide-react"
import { useWebSocket } from "../../contexts/WebSocketContext"

const NotificationCenter: React.FC = () => {
  const { notifications, unreadCount, markNotificationAsRead, markAllNotificationsAsRead, clearNotifications } =
    useWebSocket()

const [isOpen, setIsOpen] = useState(false)
  const [filter, setFilter] = useState<"all" | "unread" | "urgent">("all")

const filteredNotifications = notifications.filter((notification) => {
    switch (filter) {
      case "unread":
        return !notification.isRead
      case "urgent":
        return notification.priority === "urgent" || notification.priority === "high"
      default:
        return true
    }
  })

const getNotificationIcon = (type: string) => {
    switch (type) {
      case "error":
        return <AlertCircle className="w-5 h-5 text-red-500" />
      case "warning":
        return <AlertTriangle className="w-5 h-5 text-yellow-500" />
      case "success":
        return <CheckCircle className="w-5 h-5 text-green-500" />
      case "appointment":
        return <Clock className="w-5 h-5 text-blue-500" />
      case "patient":
        return <Info className="w-5 h-5 text-purple-500" />
      case "message":
        return <Bell className="w-5 h-5 text-cyan-500" />
      default:
        return <Info className="w-5 h-5 text-gray-500" />
    }
  }

const getPriorityColor = (priority: string) => {
    switch (priority) {
      case "urgent":
        return "border-l-red-500 bg-red-50 dark:bg-red-900/10"
      case "high":
        return "border-l-orange-500 bg-orange-50 dark:bg-orange-900/10"
      case "medium":
        return "border-l-blue-500 bg-blue-50 dark:bg-blue-900/10"
      default:
        return "border-l-gray-300 bg-gray-50 dark:bg-gray-900/10"
    }
  }

const formatTime = (date: Date) => {
    const now = new Date()
    const diff = now.getTime() - date.getTime()
    const minutes = Math.floor(diff / 60000)
    const hours = Math.floor(minutes / 60)
    const days = Math.floor(hours / 24)

if (days > 0) return `${days}j`
    if (hours > 0) return `${hours}h`
    if (minutes > 0) return `${minutes}min`
    return "maintenant"
  }

return (
    <div className="relative">
      {/* Notification Bell */}
      <button
        onClick={() => setIsOpen(!isOpen)}
        className="relative p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200"
      >
        <Bell className="w-5 h-5 text-gray-600 dark:text-gray-300" />
        {unreadCount > 0 && (
          <motion.span
            initial={{ scale: 0 }}
            animate={{ scale: 1 }}
            className="absolute -top-1 -right-1 w-5 h-5 bg-red-500 text-white text-xs rounded-full flex items-center justify-center font-medium"
          >
            {unreadCount > 99 ? "99+" : unreadCount}
          </motion.span>
        )}
      </button>

{/* Notification Panel */}
      <AnimatePresence>
        {isOpen && (
          <>
            {/* Backdrop */}
            <div className="fixed inset-0 z-40" onClick={() => setIsOpen(false)} />

{/* Panel */}
            <motion.div
              initial={{ opacity: 0, scale: 0.95, y: -10 }}
              animate={{ opacity: 1, scale: 1, y: 0 }}
              exit={{ opacity: 0, scale: 0.95, y: -10 }}
              className="absolute right-0 top-12 w-96 max-h-96 bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 z-50 overflow-hidden"
            >
              {/* Header */}
              <div className="p-4 border-b border-gray-200 dark:border-gray-700">
                <div className="flex items-center justify-between mb-3">
                  <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100">Notifications</h3>
                  <button
                    onClick={() => setIsOpen(false)}
                    className="p-1 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"
                  >
                    <X className="w-4 h-4" />
                  </button>
                </div>

{/* Filter Buttons */}
                <div className="flex space-x-2">
                  <button
                    onClick={() => setFilter("all")}
                    className={`px-3 py-1 text-xs rounded-full transition-colors ${
                      filter === "all"
                        ? "bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300"
                        : "bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400"
                    }`}
                  >
                    Toutes ({notifications.length})
                  </button>
                  <button
                    onClick={() => setFilter("unread")}
                    className={`px-3 py-1 text-xs rounded-full transition-colors ${
                      filter === "unread"
                        ? "bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300"
                        : "bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400"
                    }`}
                  >
                    Non lues ({unreadCount})
                  </button>
                  <button
                    onClick={() => setFilter("urgent")}
                    className={`px-3 py-1 text-xs rounded-full transition-colors ${
                      filter === "urgent"
                        ? "bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300"
                        : "bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400"
                    }`}
                  >
                    Urgentes
                  </button>
                </div>

{/* Action Buttons */}
                {notifications.length > 0 && (
                  <div className="flex space-x-2 mt-3">
                    <button
                      onClick={markAllNotificationsAsRead}
                      className="flex items-center space-x-1 px-2 py-1 text-xs bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300 rounded-lg hover:bg-green-200 dark:hover:bg-green-800 transition-colors"
                    >
                      <CheckCheck className="w-3 h-3" />
                      <span>Tout marquer lu</span>
                    </button>
                    <button
                      onClick={clearNotifications}
                      className="flex items-center space-x-1 px-2 py-1 text-xs bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300 rounded-lg hover:bg-red-200 dark:hover:bg-red-800 transition-colors"
                    >
                      <Trash2 className="w-3 h-3" />
                      <span>Effacer tout</span>
                    </button>
                  </div>
                )}
              </div>

{/* Notifications List */}
              <div className="max-h-80 overflow-y-auto">
                {filteredNotifications.length === 0 ? (
                  <div className="p-8 text-center text-gray-500 dark:text-gray-400">
                    <Bell className="w-12 h-12 mx-auto mb-3 opacity-50" />
                    <p className="text-sm">
                      {filter === "all"
                        ? "Aucune notification"
                        : `Aucune notification ${filter === "unread" ? "non lue" : "urgente"}`}
                    </p>
                  </div>
                ) : (
                  <div className="divide-y divide-gray-200 dark:divide-gray-700">
                    {filteredNotifications.map((notification) => (
                      <motion.div
                        key={notification.id}
                        initial={{ opacity: 0, x: -20 }}
                        animate={{ opacity: 1, x: 0 }}
                        className={`p-4 border-l-4 ${getPriorityColor(notification.priority)} ${
                          !notification.isRead ? "bg-opacity-100" : "bg-opacity-50"
                        } hover:bg-opacity-75 transition-all cursor-pointer`}
                        onClick={() => markNotificationAsRead(notification.id)}
                      >
                        <div className="flex items-start space-x-3">
                          <div className="flex-shrink-0 mt-0.5">{getNotificationIcon(notification.type)}</div>
                          <div className="flex-1 min-w-0">
                            <div className="flex items-center justify-between">
                              <p
                                className={`text-sm font-medium ${
                                  !notification.isRead
                                    ? "text-gray-900 dark:text-gray-100"
                                    : "text-gray-600 dark:text-gray-400"
                                }`}
                              >
                                {notification.title}
                              </p>
                              <div className="flex items-center space-x-2">
                                <span className="text-xs text-gray-500 dark:text-gray-400">
                                  {formatTime(notification.timestamp)}
                                </span>
                                {!notification.isRead && <div className="w-2 h-2 bg-blue-500 rounded-full"></div>}
                              </div>
                            </div>
                            <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">{notification.message}</p>
                            {notification.priority === "urgent" && (
                              <div className="mt-2">
                                <span className="inline-flex items-center px-2 py-1 text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200 rounded-full">
                                  🚨 URGENT
                                </span>
                              </div>
                            )}
                          </div>
                        </div>
                      </motion.div>
                    ))}
                  </div>
                )}
              </div>
            </motion.div>
          </>
        )}
      </AnimatePresence>
    </div>
  )
}

export default NotificationCenter
[V0_FILE]typescriptreact:file="src/components/Common/OnlineUsers.tsx"
"use client"

import type React from "react"
import { useState } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { Users, Circle, MessageCircle, Phone, Video } from "lucide-react"
import { useWebSocket } from "../../contexts/WebSocketContext"
import { useAuth } from "../../contexts/AuthContext"
import type { User } from "../../types"

const OnlineUsers: React.FC = () => {
  const { onlineUsers, sendDirectMessage } = useWebSocket()
  const { user: currentUser } = useAuth()
  const [isOpen, setIsOpen] = useState(false)
  const [selectedUser, setSelectedUser] = useState<User | null>(null)

const otherUsers = onlineUsers.filter((user) => user.id !== currentUser?.id)

const getUserStatusColor = (user: User) => {
    // In a real app, you'd track user status
    return "text-green-500" // Default to online
  }

const getRoleColor = (role: string) => {
    switch (role) {
      case "admin":
        return "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200"
      case "doctor":
        return "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200"
      case "manager":
        return "bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200"
      case "receptionist":
        return "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200"
      case "nurse":
        return "bg-pink-100 text-pink-800 dark:bg-pink-900 dark:text-pink-200"
      default:
        return "bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200"
    }
  }

const handleSendMessage = (recipient: User) => {
    const subject = `Message de ${currentUser?.firstname} ${currentUser?.lastname}`
    const content = prompt(`Envoyer un message à ${recipient.firstname} ${recipient.lastname}:`)

if (content && content.trim()) {
      sendDirectMessage(recipient, subject, content.trim())
      setSelectedUser(null)
    }
  }

return (
    <div className="relative">
      {/* Online Users Button */}
      <button
        onClick={() => setIsOpen(!isOpen)}
        className="relative p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200"
      >
        <Users className="w-5 h-5 text-gray-600 dark:text-gray-300" />
        {otherUsers.length > 0 && (
          <motion.span
            initial={{ scale: 0 }}
            animate={{ scale: 1 }}
            className="absolute -top-1 -right-1 w-5 h-5 bg-green-500 text-white text-xs rounded-full flex items-center justify-center font-medium"
          >
            {otherUsers.length}
          </motion.span>
        )}
      </button>

{/* Online Users Panel */}
      <AnimatePresence>
        {isOpen && (
          <>
            {/* Backdrop */}
            <div className="fixed inset-0 z-40" onClick={() => setIsOpen(false)} />

{/* Panel */}
            <motion.div
              initial={{ opacity: 0, scale: 0.95, y: -10 }}
              animate={{ opacity: 1, scale: 1, y: 0 }}
              exit={{ opacity: 0, scale: 0.95, y: -10 }}
              className="absolute right-0 top-12 w-80 max-h-96 bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 z-50 overflow-hidden"
            >
              {/* Header */}
              <div className="p-4 border-b border-gray-200 dark:border-gray-700">
                <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
                  Utilisateurs en ligne ({otherUsers.length})
                </h3>
              </div>

{/* Users List */}
              <div className="max-h-80 overflow-y-auto">
                {otherUsers.length === 0 ? (
                  <div className="p-8 text-center text-gray-500 dark:text-gray-400">
                    <Users className="w-12 h-12 mx-auto mb-3 opacity-50" />
                    <p className="text-sm">Aucun autre utilisateur en ligne</p>
                  </div>
                ) : (
                  <div className="divide-y divide-gray-200 dark:divide-gray-700">
                    {otherUsers.map((user) => (
                      <motion.div
                        key={user.id}
                        initial={{ opacity: 0, x: -20 }}
                        animate={{ opacity: 1, x: 0 }}
                        className="p-4 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
                      >
                        <div className="flex items-center justify-between">
                          <div className="flex items-center space-x-3">
                            <div className="relative">
                              <div className="w-10 h-10 bg-gradient-to-br from-blue-500 to-blue-600 rounded-full flex items-center justify-center">
                                <span className="text-white text-sm font-semibold">
                                  {user.firstname.charAt(0)}
                                  {user.lastname.charAt(0)}
                                </span>
                              </div>
                              <div className="absolute -bottom-1 -right-1">
                                <Circle className={`w-4 h-4 ${getUserStatusColor(user)} fill-current`} />
                              </div>
                            </div>
                            <div>
                              <p className="text-sm font-medium text-gray-900 dark:text-gray-100">
                                {user.firstname} {user.lastname}
                              </p>
                              <div className="flex items-center space-x-2">
                                <span
                                  className={`inline-flex items-center px-2 py-1 text-xs font-medium rounded-full ${getRoleColor(user.role)}`}
                                >
                                  {user.role.replace("_", " ")}
                                </span>
                                {user.specialization && (
                                  <span className="text-xs text-gray-500 dark:text-gray-400">
                                    {user.specialization}
                                  </span>
                                )}
                              </div>
                            </div>
                          </div>

{/* Action Buttons */}
                          <div className="flex items-center space-x-1">
                            <button
                              onClick={() => handleSendMessage(user)}
                              className="p-2 rounded-lg hover:bg-blue-100 dark:hover:bg-blue-900 text-blue-600 dark:text-blue-400 transition-colors"
                              title="Envoyer un message"
                            >
                              <MessageCircle className="w-4 h-4" />
                            </button>
                            <button
                              className="p-2 rounded-lg hover:bg-green-100 dark:hover:bg-green-900 text-green-600 dark:text-green-400 transition-colors"
                              title="Appeler"
                            >
                              <Phone className="w-4 h-4" />
                            </button>
                            <button
                              className="p-2 rounded-lg hover:bg-purple-100 dark:hover:bg-purple-900 text-purple-600 dark:text-purple-400 transition-colors"
                              title="Vidéo conférence"
                            >
                              <Video className="w-4 h-4" />
                            </button>
                          </div>
                        </div>
                      </motion.div>
                    ))}
                  </div>
                )}
              </div>
            </motion.div>
          </>
        )}
      </AnimatePresence>
    </div>
  )
}

export default OnlineUsers
[V0_FILE]typescriptreact:file="src/components/ConsultationHistory/ConsultationHistoryPage.tsx"
import React, { useState } from 'react';
import { motion } from 'framer-motion';
import { 
  Calendar, 
  Search, 
  Filter, 
  Clock,
  User,
  Stethoscope,
  FileText,
  TrendingUp,
  Activity,
  Eye,
  Download,
  ChevronRight,
  MapPin
} from 'lucide-react';
import { useAuth } from '../../contexts/AuthContext';

interface ConsultationRecord {
  id: string;
  patient: {
    id: string;
    firstname: string;
    lastname: string;
    phone: string;
    age: number;
  };
  doctor: {
    id: string;
    firstname: string;
    lastname: string;
    specialization: string;
  };
  date: Date;
  startTime: string;
  endTime: string;
  duration: number;
  type: 'consultation' | 'follow_up' | 'emergency' | 'treatment' | 'checkup';
  status: 'completed' | 'in_progress' | 'cancelled' | 'no_show';
  diagnosis: string[];
  treatments: string[];
  fee: number;
  paymentStatus: 'paid' | 'pending' | 'partial';
  notes: string;
  nextAppointment?: Date;
  satisfaction?: number;
}

const ConsultationHistoryPage: React.FC = () => {
  const [searchTerm, setSearchTerm] = useState('');
  const [filterType, setFilterType] = useState<'all' | 'consultation' | 'treatment' | 'emergency'>('all');
  const [filterStatus, setFilterStatus] = useState<'all' | 'completed' | 'cancelled'>('all');
  const [selectedPeriod, setSelectedPeriod] = useState('month');
  const { user } = useAuth();

// Mock consultation data
  const mockConsultations: ConsultationRecord[] = [
    {
      id: '1',
      patient: {
        id: '1',
        firstname: 'Amina',
        lastname: 'Benali',
        phone: '0661234567',
        age: 39
      },
      doctor: {
        id: '1',
        firstname: 'Dr. Sarah',
        lastname: 'Benali',
        specialization: 'Orthodontie'
      },
      date: new Date('2024-01-20'),
      startTime: '09:00',
      endTime: '09:45',
      duration: 45,
      type: 'consultation',
      status: 'completed',
      diagnosis: ['Malocclusion classe II', 'Encombrement dentaire'],
      treatments: ['Ajustement appareil orthodontique', 'Nettoyage professionnel'],
      fee: 3500,
      paymentStatus: 'paid',
      notes: 'Patient coopératif, progression satisfaisante du traitement orthodontique',
      nextAppointment: new Date('2024-02-20'),
      satisfaction: 5
    },
    {
      id: '2',
      patient: {
        id: '2',
        firstname: 'Mohamed',
        lastname: 'Alami',
        phone: '0662345678',
        age: 34
      },
      doctor: {
        id: '1',
        firstname: 'Dr. Sarah',
        lastname: 'Benali',
        specialization: 'Orthodontie'
      },
      date: new Date('2024-01-19'),
      startTime: '14:30',
      endTime: '15:15',
      duration: 45,
      type: 'treatment',
      status: 'completed',
      diagnosis: ['Carie dentaire 36', 'Gingivite localisée'],
      treatments: ['Obturation composite', 'Détartrage'],
      fee: 4500,
      paymentStatus: 'paid',
      notes: 'Traitement réalisé sous anesthésie locale, patient informé des soins d\'hygiène',
      satisfaction: 4
    },
    {
      id: '3',
      patient: {
        id: '3',
        firstname: 'Fatima',
        lastname: 'Zahra',
        phone: '0663456789',
        age: 46
      },
      doctor: {
        id: '1',
        firstname: 'Dr. Sarah',
        lastname: 'Benali',
        specialization: 'Orthodontie'
      },
      date: new Date('2024-01-18'),
      startTime: '16:00',
      endTime: '16:20',
      duration: 20,
      type: 'emergency',
      status: 'completed',
      diagnosis: ['Pulpite aiguë 47'],
      treatments: ['Traitement d\'urgence', 'Prescription antalgiques'],
      fee: 2500,
      paymentStatus: 'paid',
      notes: 'Urgence dentaire, patient orienté vers endodontiste',
      nextAppointment: new Date('2024-01-25')
    }
  ];

const filteredConsultations = mockConsultations.filter(consultation => {
    const matchesSearch = 
      consultation.patient.firstname.toLowerCase().includes(searchTerm.toLowerCase()) ||
      consultation.patient.lastname.toLowerCase().includes(searchTerm.toLowerCase()) ||
      consultation.diagnosis.some(d => d.toLowerCase().includes(searchTerm.toLowerCase()));

const matchesType = filterType === 'all' || consultation.type === filterType;
    const matchesStatus = filterStatus === 'all' || consultation.status === filterStatus;

return matchesSearch && matchesType && matchesStatus;
  });

const getTypeColor = (type: string) => {
    switch (type) {
      case 'consultation': return 'bg-blue-100 text-blue-800 dark:bg-blue-900/20 dark:text-blue-400';
      case 'treatment': return 'bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400';
      case 'emergency': return 'bg-red-100 text-red-800 dark:bg-red-900/20 dark:text-red-400';
      case 'follow_up': return 'bg-purple-100 text-purple-800 dark:bg-purple-900/20 dark:text-purple-400';
      case 'checkup': return 'bg-orange-100 text-orange-800 dark:bg-orange-900/20 dark:text-orange-400';
      default: return 'bg-gray-100 text-gray-800 dark:bg-gray-900/20 dark:text-gray-400';
    }
  };

const getTypeLabel = (type: string) => {
    switch (type) {
      case 'consultation': return 'Consultation';
      case 'treatment': return 'Traitement';
      case 'emergency': return 'Urgence';
      case 'follow_up': return 'Suivi';
      case 'checkup': return 'Contrôle';
      default: return type;
    }
  };

const getStatusColor = (status: string) => {
    switch (status) {
      case 'completed': return 'text-green-600 dark:text-green-400';
      case 'cancelled': return 'text-red-600 dark:text-red-400';
      case 'no_show': return 'text-orange-600 dark:text-orange-400';
      default: return 'text-gray-600 dark:text-gray-400';
    }
  };

const getPaymentStatusColor = (status: string) => {
    switch (status) {
      case 'paid': return 'bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400';
      case 'pending': return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/20 dark:text-yellow-400';
      case 'partial': return 'bg-orange-100 text-orange-800 dark:bg-orange-900/20 dark:text-orange-400';
      default: return 'bg-gray-100 text-gray-800 dark:bg-gray-900/20 dark:text-gray-400';
    }
  };

// Statistics
  const totalConsultations = filteredConsultations.length;
  const totalRevenue = filteredConsultations.reduce((sum, c) => sum + c.fee, 0);
  const averageDuration = filteredConsultations.reduce((sum, c) => sum + c.duration, 0) / totalConsultations || 0;
  const averageSatisfaction = filteredConsultations
    .filter(c => c.satisfaction)
    .reduce((sum, c) => sum + (c.satisfaction || 0), 0) / filteredConsultations.filter(c => c.satisfaction).length || 0;

{/* Statistics Cards */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.1 }}
          className="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6"
        >
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-gray-600 dark:text-gray-400 mb-1">Total Consultations</p>
              <p className="text-2xl font-bold text-gray-900 dark:text-gray-100">{totalConsultations}</p>
            </div>
            <div className="w-12 h-12 bg-blue-100 dark:bg-blue-900/20 rounded-lg flex items-center justify-center">
              <Activity className="w-6 h-6 text-blue-600 dark:text-blue-400" />
            </div>
          </div>
        </motion.div>

<motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.2 }}
          className="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6"
        >
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-gray-600 dark:text-gray-400 mb-1">Revenus Totaux</p>
              <p className="text-2xl font-bold text-gray-900 dark:text-gray-100">{totalRevenue.toLocaleString()} DA</p>
            </div>
            <div className="w-12 h-12 bg-green-100 dark:bg-green-900/20 rounded-lg flex items-center justify-center">
              <TrendingUp className="w-6 h-6 text-green-600 dark:text-green-400" />
            </div>
          </div>
        </motion.div>

<motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.3 }}
          className="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6"
        >
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-gray-600 dark:text-gray-400 mb-1">Durée Moyenne</p>
              <p className="text-2xl font-bold text-gray-900 dark:text-gray-100">{Math.round(averageDuration)} min</p>
            </div>
            <div className="w-12 h-12 bg-purple-100 dark:bg-purple-900/20 rounded-lg flex items-center justify-center">
              <Clock className="w-6 h-6 text-purple-600 dark:text-purple-400" />
            </div>
          </div>
        </motion.div>

<motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.4 }}
          className="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6"
        >
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-gray-600 dark:text-gray-400 mb-1">Satisfaction Moyenne</p>
              <p className="text-2xl font-bold text-gray-900 dark:text-gray-100">{averageSatisfaction.toFixed(1)}/5</p>
            </div>
            <div className="w-12 h-12 bg-orange-100 dark:bg-orange-900/20 rounded-lg flex items-center justify-center">
              <User className="w-6 h-6 text-orange-600 dark:text-orange-400" />
            </div>
          </div>
        </motion.div>
      </div>

{/* Filters and Search */}
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ delay: 0.5 }}
        className="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6"
      >
        <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between space-y-4 lg:space-y-0 mb-6">
          <div className="relative flex-1 max-w-md">
            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400" />
            <input
              type="text"
              placeholder="Rechercher par patient ou diagnostic..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="w-full pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
            />
          </div>
          
          <div className="flex items-center space-x-4">
            <select
              value={filterType}
              onChange={(e) => setFilterType(e.target.value as any)}
              className="border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
            >
              <option value="all">Tous les types</option>
              <option value="consultation">Consultations</option>
              <option value="treatment">Traitements</option>
              <option value="emergency">Urgences</option>
            </select>
            
            <select
              value={filterStatus}
              onChange={(e) => setFilterStatus(e.target.value as any)}
              className="border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
            >
              <option value="all">Tous les statuts</option>
              <option value="completed">Terminées</option>
              <option value="cancelled">Annulées</option>
            </select>

<select
              value={selectedPeriod}
              onChange={(e) => setSelectedPeriod(e.target.value)}
              className="border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
            >
              <option value="week">Cette semaine</option>
              <option value="month">Ce mois</option>
              <option value="quarter">Ce trimestre</option>
              <option value="year">Cette année</option>
            </select>
          </div>
        </div>

{/* Consultations List */}
        <div className="space-y-4">
          {filteredConsultations.map((consultation, index) => (
            <motion.div
              key={consultation.id}
              initial={{ opacity: 0, x: -20 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ delay: index * 0.1 }}
              className="bg-gray-50 dark:bg-gray-700 rounded-lg p-6 hover:shadow-md transition-shadow"
            >
              <div className="flex items-start justify-between">
                <div className="flex items-start space-x-4 flex-1">
                  <div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-600 rounded-full flex items-center justify-center">
                    <Stethoscope className="w-6 h-6 text-white" />
                  </div>
                  
                  <div className="flex-1">
                    <div className="flex items-center space-x-3 mb-2">
                      <h3 className="font-semibold text-gray-900 dark:text-gray-100">
                        {consultation.patient.firstname} {consultation.patient.lastname}
                      </h3>
                      <span className={`inline-block px-2 py-1 rounded-full text-xs font-medium ${getTypeColor(consultation.type)}`}>
                        {getTypeLabel(consultation.type)}
                      </span>
                      <span className={`inline-block px-2 py-1 rounded-full text-xs font-medium ${getPaymentStatusColor(consultation.paymentStatus)}`}>
                        {consultation.paymentStatus === 'paid' ? 'Payé' : consultation.paymentStatus === 'pending' ? 'En attente' : 'Partiel'}
                      </span>
                    </div>
                    
                    <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-3">
                      <div className="flex items-center space-x-2">
                        <Calendar className="w-4 h-4 text-gray-400" />
                        <span className="text-sm text-gray-600 dark:text-gray-400">
                          {consultation.date.toLocaleDateString('fr-FR')}
                        </span>
                      </div>
                      <div className="flex items-center space-x-2">
                        <Clock className="w-4 h-4 text-gray-400" />
                        <span className="text-sm text-gray-600 dark:text-gray-400">
                          {consultation.startTime} - {consultation.endTime} ({consultation.duration}min)
                        </span>
                      </div>
                      <div className="flex items-center space-x-2">
                        <User className="w-4 h-4 text-gray-400" />
                        <span className="text-sm text-gray-600 dark:text-gray-400">
                          {consultation.doctor.firstname} {consultation.doctor.lastname}
                        </span>
                      </div>
                      <div className="flex items-center space-x-2">
                        <TrendingUp className="w-4 h-4 text-gray-400" />
                        <span className="text-sm font-medium text-gray-900 dark:text-gray-100">
                          {consultation.fee.toLocaleString()} DA
                        </span>
                      </div>
                    </div>

{/* Diagnosis */}
                    <div className="mb-3">
                      <h4 className="font-medium text-gray-900 dark:text-gray-100 mb-1">Diagnostic:</h4>
                      <div className="flex flex-wrap gap-2">
                        {consultation.diagnosis.map((diag, idx) => (
                          <span key={idx} className="px-2 py-1 bg-blue-100 dark:bg-blue-900/20 text-blue-800 dark:text-blue-400 rounded-full text-xs">
                            {diag}
                          </span>
                        ))}
                      </div>
                    </div>

{/* Treatments */}
                    <div className="mb-3">
                      <h4 className="font-medium text-gray-900 dark:text-gray-100 mb-1">Traitements:</h4>
                      <div className="flex flex-wrap gap-2">
                        {consultation.treatments.map((treatment, idx) => (
                          <span key={idx} className="px-2 py-1 bg-green-100 dark:bg-green-900/20 text-green-800 dark:text-green-400 rounded-full text-xs">
                            {treatment}
                          </span>
                        ))}
                      </div>
                    </div>

{/* Notes */}
                    <div className="bg-white dark:bg-gray-600 rounded-lg p-3 mb-3">
                      <h4 className="font-medium text-gray-900 dark:text-gray-100 mb-1">Notes:</h4>
                      <p className="text-sm text-gray-600 dark:text-gray-400">{consultation.notes}</p>
                    </div>

{/* Next Appointment */}
                    {consultation.nextAppointment && (
                      <div className="flex items-center space-x-2 text-sm text-blue-600 dark:text-blue-400">
                        <ChevronRight className="w-4 h-4" />
                        <span>Prochain RDV: {consultation.nextAppointment.toLocaleDateString('fr-FR')}</span>
                      </div>
                    )}

{/* Satisfaction */}
                    {consultation.satisfaction && (
                      <div className="flex items-center space-x-2 mt-2">
                        <span className="text-sm text-gray-600 dark:text-gray-400">Satisfaction:</span>
                        <div className="flex items-center">
                          {[...Array(5)].map((_, i) => (
                            <span key={i} className={`text-sm ${i < consultation.satisfaction! ? 'text-yellow-400' : 'text-gray-300'}`}>
                              ★
                            </span>
                          ))}
                        </div>
                      </div>
                    )}
                  </div>
                </div>

{filteredConsultations.length === 0 && (
          <div className="text-center py-12">
            <Calendar className="w-16 h-16 text-gray-400 mx-auto mb-4" />
            <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-2">Aucune consultation trouvée</h3>
            <p className="text-gray-600 dark:text-gray-400">
              Modifiez vos critères de recherche pour voir plus de résultats.
            </p>
          </div>
        )}
      </motion.div>
    </div>
  );
};

export default ConsultationHistoryPage;
[V0_FILE]typescriptreact:file="src/components/Dashboard/Dashboard.tsx"
import React from 'react';
import { motion } from 'framer-motion';
import { 
  Users, 
  Calendar, 
  DollarSign, 
  Activity, 
  TrendingUp,
  Clock,
  UserCheck,
  AlertTriangle,
  Star,
  Phone,
  MessageSquare
} from 'lucide-react';
import StatsCard from './StatsCard';
import { useAuth } from '../../contexts/AuthContext';

const Dashboard: React.FC = () => {
  const { user } = useAuth();

const stats = [
    {
      title: 'Patients Totaux',
      value: '2,847',
      change: 12,
      icon: Users,
      color: 'blue' as const
    },
    {
      title: 'Rendez-vous Aujourd\'hui',
      value: '24',
      change: 8,
      icon: Calendar,
      color: 'green' as const
    },
    {
      title: 'Revenus ce Mois',
      value: '1,357,000 DA',
      change: 15,
      icon: DollarSign,
      color: 'orange' as const
    },
    {
      title: 'Taux de Satisfaction',
      value: '96%',
      change: 3,
      icon: TrendingUp,
      color: 'purple' as const
    }
  ];

const recentAppointments = [
    {
      id: '1',
      patient: 'Amina Benali',
      time: '09:00',
      type: 'Consultation',
      status: 'confirmed',
      fee: '3,500 DA'
    },
    {
      id: '2',
      patient: 'Mohamed Alami',
      time: '10:30',
      type: 'Nettoyage',
      status: 'pending',
      fee: '2,500 DA'
    },
    {
      id: '3',
      patient: 'Fatima Zahra',
      time: '14:00',
      type: 'Extraction',
      status: 'confirmed',
      fee: '5,000 DA'
    },
    {
      id: '4',
      patient: 'Youssef Hassani',
      time: '15:30',
      type: 'Urgence',
      status: 'urgent',
      fee: '4,000 DA'
    }
  ];

const recentActivities = [
    {
      id: '1',
      type: 'patient',
      message: 'Nouveau patient enregistré - Amina Benali',
      time: '5 min',
      icon: UserCheck,
      color: 'green'
    },
    {
      id: '2',
      type: 'appointment',
      message: 'Rendez-vous confirmé pour 14h00',
      time: '12 min',
      icon: Calendar,
      color: 'blue'
    },
    {
      id: '3',
      type: 'payment',
      message: 'Paiement reçu - 7,500 DA',
      time: '25 min',
      icon: DollarSign,
      color: 'green'
    },
    {
      id: '4',
      type: 'stock',
      message: 'Stock faible - Anesthésique local',
      time: '1 h',
      icon: AlertTriangle,
      color: 'orange'
    },
    {
      id: '5',
      type: 'message',
      message: 'Nouveau message du laboratoire',
      time: '2 h',
      icon: MessageSquare,
      color: 'purple'
    }
  ];

const getStatusColor = (status: string) => {
    switch (status) {
      case 'confirmed': return 'text-green-600 bg-green-100 dark:bg-green-900/20 dark:text-green-400';
      case 'pending': return 'text-yellow-600 bg-yellow-100 dark:bg-yellow-900/20 dark:text-yellow-400';
      case 'urgent': return 'text-red-600 bg-red-100 dark:bg-red-900/20 dark:text-red-400';
      default: return 'text-gray-600 bg-gray-100 dark:bg-gray-900/20 dark:text-gray-400';
    }
  };

const getStatusText = (status: string) => {
    switch (status) {
      case 'confirmed': return 'Confirmé';
      case 'pending': return 'En attente';
      case 'urgent': return 'Urgent';
      default: return status;
    }
  };

const quickActions = [
    { label: 'Nouveau Patient', icon: Users, color: 'blue', path: '/patients' },
    { label: 'Nouveau RDV', icon: Calendar, color: 'green', path: '/appointments' },
    { label: 'Messages', icon: MessageSquare, color: 'purple', path: '/messages' },
    { label: 'Salle d\'Attente', icon: Clock, color: 'orange', path: '/waiting-room' }
  ];

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        {stats.map((stat, index) => (
          <motion.div
            key={stat.title}
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: index * 0.1 }}
          >
            <StatsCard {...stat} />
          </motion.div>
        ))}
      </div>

<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <motion.div
          initial={{ opacity: 0, x: -20 }}
          animate={{ opacity: 1, x: 0 }}
          className="lg:col-span-2 bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6"
        >
          <div className="flex items-center justify-between mb-6">
            <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100">Rendez-vous d'Aujourd'hui</h2>
            <button className="text-blue-600 hover:text-blue-700 font-medium">
              Voir tout
            </button>
          </div>
          
          <div className="space-y-4">
            {recentAppointments.map((appointment, index) => (
              <motion.div
                key={appointment.id}
                initial={{ opacity: 0, x: -20 }}
                animate={{ opacity: 1, x: 0 }}
                transition={{ delay: index * 0.1 }}
                className="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-700 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors"
              >
                <div className="flex items-center space-x-4">
                  <div className="w-10 h-10 bg-gradient-to-br from-blue-500 to-blue-600 rounded-full flex items-center justify-center">
                    <span className="text-white text-sm font-semibold">
                      {appointment.patient.split(' ').map(n => n[0]).join('')}
                    </span>
                  </div>
                  <div>
                    <p className="font-medium text-gray-900 dark:text-gray-100">{appointment.patient}</p>
                    <p className="text-sm text-gray-600 dark:text-gray-400">{appointment.type}</p>
                  </div>
                </div>
                <div className="flex items-center space-x-4">
                  <div className="text-right">
                    <div className="flex items-center space-x-2 text-gray-600 dark:text-gray-400">
                      <Clock className="w-4 h-4" />
                      <span className="text-sm font-medium">{appointment.time}</span>
                    </div>
                    <p className="text-sm font-medium text-gray-900 dark:text-gray-100">{appointment.fee}</p>
                  </div>
                  <span className={`px-3 py-1 rounded-full text-xs font-medium ${getStatusColor(appointment.status)}`}>
                    {getStatusText(appointment.status)}
                  </span>
                </div>
              </motion.div>
            ))}
          </div>
        </motion.div>

<motion.div
          initial={{ opacity: 0, x: 20 }}
          animate={{ opacity: 1, x: 0 }}
          className="space-y-6"
        >
          <div className="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6">
            <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">Activités Récentes</h3>
            <div className="space-y-4">
              {recentActivities.map((activity, index) => (
                <motion.div
                  key={activity.id}
                  initial={{ opacity: 0, y: 10 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ delay: index * 0.1 }}
                  className="flex items-start space-x-3"
                >
                  <div className={`w-8 h-8 bg-${activity.color}-100 dark:bg-${activity.color}-900/20 rounded-full flex items-center justify-center flex-shrink-0`}>
                    <activity.icon className={`w-4 h-4 text-${activity.color}-600 dark:text-${activity.color}-400`} />
                  </div>
                  <div className="flex-1 min-w-0">
                    <p className="text-sm font-medium text-gray-900 dark:text-gray-100">{activity.message}</p>
                    <p className="text-xs text-gray-500 dark:text-gray-400">Il y a {activity.time}</p>
                  </div>
                </motion.div>
              ))}
            </div>
          </div>

<div className="bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl p-6 text-white">
            <h3 className="text-lg font-semibold mb-2">Conseil du Jour 💡</h3>
            <p className="text-blue-100 text-sm mb-4">
              N'oubliez pas de rappeler aux patients leurs rendez-vous de demain pour réduire les absences.
            </p>
            <div className="flex items-center space-x-2">
              <button className="px-4 py-2 bg-white text-blue-600 rounded-lg text-sm font-medium hover:bg-blue-50 transition-colors flex items-center space-x-2">
                <Phone className="w-4 h-4" />
                <span>Envoyer Rappels</span>
              </button>
              <button className="px-4 py-2 bg-blue-400 text-white rounded-lg text-sm font-medium hover:bg-blue-300 transition-colors flex items-center space-x-2">
                <MessageSquare className="w-4 h-4" />
                <span>SMS</span>
              </button>
            </div>
          </div>

{user?.role === 'doctor' && (
            <div className="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6">
              <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">Mes Statistiques</h3>
              <div className="space-y-3">
                <div className="flex items-center justify-between">
                  <span className="text-sm text-gray-600 dark:text-gray-400">Patients aujourd'hui</span>
                  <span className="font-semibold text-gray-900 dark:text-gray-100">8</span>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-sm text-gray-600 dark:text-gray-400">Revenus aujourd'hui</span>
                  <span className="font-semibold text-gray-900 dark:text-gray-100">28,500 DA</span>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-sm text-gray-600 dark:text-gray-400">Note moyenne</span>
                  <div className="flex items-center space-x-1">
                    <Star className="w-4 h-4 text-yellow-400 fill-current" />
                    <span className="font-semibold text-gray-900 dark:text-gray-100">4.8</span>
                  </div>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-sm text-gray-600 dark:text-gray-400">Temps moyen/patient</span>
                  <span className="font-semibold text-gray-900 dark:text-gray-100">25 min</span>
                </div>
              </div>
            </div>
          )}
        </motion.div>
      </div>
    </div>
  );
};

export default Dashboard;
[V0_FILE]typescriptreact:file="src/components/Dashboard/StatsCard.tsx"
import React from 'react';
import { motion } from 'framer-motion';
import { DivideIcon as LucideIcon } from 'lucide-react';

interface StatsCardProps {
  title: string;
  value: string | number;
  change: number;
  icon: LucideIcon;
  color: 'blue' | 'green' | 'orange' | 'red' | 'purple';
}

const StatsCard: React.FC<StatsCardProps> = ({ title, value, change, icon: Icon, color }) => {
  const colorClasses = {
    blue: 'from-blue-500 to-blue-600',
    green: 'from-green-500 to-green-600',
    orange: 'from-orange-500 to-orange-600',
    red: 'from-red-500 to-red-600',
    purple: 'from-purple-500 to-purple-600'
  };

return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      whileHover={{ scale: 1.02 }}
      className="bg-white rounded-xl shadow-lg p-6 border border-gray-100"
    >
      <div className="flex items-center justify-between">
        <div>
          <p className="text-sm font-medium text-gray-600 mb-1">{title}</p>
          <p className="text-2xl font-bold text-gray-900">{value}</p>
          <div className="flex items-center mt-2">
            <span className={`text-sm font-medium ${change >= 0 ? 'text-green-600' : 'text-red-600'}`}>
              {change >= 0 ? '+' : ''}{change}%
            </span>
            <span className="text-sm text-gray-500 ml-1">vs mois dernier</span>
          </div>
        </div>
        <div className={`w-12 h-12 bg-gradient-to-br ${colorClasses[color]} rounded-lg flex items-center justify-center`}>
          <Icon className="w-6 h-6 text-white" />
        </div>
      </div>
    </motion.div>
  );
};

export default StatsCard;
[V0_FILE]typescriptreact:file="src/components/Inventory/InventoryPage.tsx"
import React, { useState } from 'react';
import { motion } from 'framer-motion';
import { 
  Plus, 
  Search, 
  Package, 
  AlertTriangle,
  TrendingDown,
  TrendingUp,
  Calendar,
  Barcode,
  Filter,
  Download,
  Scan,
  Bell
} from 'lucide-react';
import { Medicine, StockAlert } from '../../types';

const InventoryPage: React.FC = () => {
  const [searchTerm, setSearchTerm] = useState('');
  const [filterStatus, setFilterStatus] = useState<'all' | 'low' | 'expired' | 'normal'>('all');
  const [filterCategory, setFilterCategory] = useState<'all' | 'antibiotic' | 'painkiller' | 'anesthetic' | 'antiseptic' | 'supplement' | 'equipment'>('all');

// Mock data with Algerian Dinars
  const mockMedicines: Medicine[] = [
    {
      id: '1',
      name: 'Anesthésique Local (Lidocaïne 2%)',
      barcode: '1234567890123',
      quantity: 5,
      unit: 'ampoules',
      expiryDate: new Date('2024-06-15'),
      provider: 'Pharma Dental Algérie',
      price: 1250.00, // DA
      minStockLevel: 10,
      category: 'anesthetic',
      description: 'Anesthésique local pour interventions dentaires',
      sideEffects: ['Réaction allergique rare', 'Engourdissement temporaire'],
      dosageInstructions: '1-2 ml selon la zone à anesthésier',
      createdAt: new Date('2023-01-15'),
      updatedAt: new Date('2024-01-15')
    },
    {
      id: '2',
      name: 'Composite Dentaire Universel',
      barcode: '2345678901234',
      quantity: 25,
      unit: 'seringues',
      expiryDate: new Date('2025-03-20'),
      provider: 'DentMat Algérie',
      price: 2890.00, // DA
      minStockLevel: 15,
      category: 'equipment',
      description: 'Composite photopolymérisable pour restaurations',
      createdAt: new Date('2023-02-10'),
      updatedAt: new Date('2024-01-10')
    },
    {
      id: '3',
      name: 'Désinfectant Surfaces',
      barcode: '3456789012345',
      quantity: 2,
      unit: 'litres',
      expiryDate: new Date('2024-02-28'),
      provider: 'MediClean Algérie',
      price: 850.75, // DA
      minStockLevel: 5,
      category: 'antiseptic',
      description: 'Désinfectant pour surfaces et instruments',
      createdAt: new Date('2023-03-05'),
      updatedAt: new Date('2024-01-05')
    },
    {
      id: '4',
      name: 'Amoxicilline 500mg',
      barcode: '4567890123456',
      quantity: 50,
      unit: 'comprimés',
      expiryDate: new Date('2025-08-15'),
      provider: 'Antibio Pharma',
      price: 45.50, // DA per tablet
      minStockLevel: 30,
      category: 'antibiotic',
      description: 'Antibiotique à large spectre',
      sideEffects: ['Troubles digestifs', 'Réactions allergiques'],
      dosageInstructions: '500mg 3 fois par jour pendant 7 jours',
      createdAt: new Date('2023-04-01'),
      updatedAt: new Date('2024-01-01')
    },
    {
      id: '5',
      name: 'Ibuprofène 400mg',
      barcode: '5678901234567',
      quantity: 8,
      unit: 'boîtes',
      expiryDate: new Date('2024-12-31'),
      provider: 'Pain Relief Co.',
      price: 320.00, // DA per box
      minStockLevel: 15,
      category: 'painkiller',
      description: 'Anti-inflammatoire non stéroïdien',
      sideEffects: ['Troubles gastriques', 'Maux de tête'],
      dosageInstructions: '400mg toutes les 6-8 heures si nécessaire',
      createdAt: new Date('2023-05-10'),
      updatedAt: new Date('2024-01-10')
    }
  ];

const mockAlerts: StockAlert[] = [
    {
      id: '1',
      medicine: mockMedicines[0],
      type: 'low_stock',
      message: 'Stock critique: Anesthésique Local (5 restants)',
      isRead: false,
      createdAt: new Date()
    },
    {
      id: '2',
      medicine: mockMedicines[2],
      type: 'expiry_warning',
      message: 'Expire bientôt: Désinfectant Surfaces (28 jours)',
      isRead: false,
      createdAt: new Date()
    }
  ];

const getStockStatus = (medicine: Medicine) => {
    const today = new Date();
    const daysUntilExpiry = Math.ceil((medicine.expiryDate.getTime() - today.getTime()) / (1000 * 60 * 60 * 24));
    
    if (daysUntilExpiry < 0) return 'expired';
    if (daysUntilExpiry < 30) return 'expiring';
    if (medicine.quantity <= medicine.minStockLevel) return 'low';
    return 'normal';
  };

const getStatusColor = (status: string) => {
    switch (status) {
      case 'expired': return 'bg-red-100 text-red-800 dark:bg-red-900/20 dark:text-red-400';
      case 'expiring': return 'bg-orange-100 text-orange-800 dark:bg-orange-900/20 dark:text-orange-400';
      case 'low': return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/20 dark:text-yellow-400';
      case 'normal': return 'bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400';
      default: return 'bg-gray-100 text-gray-800 dark:bg-gray-900/20 dark:text-gray-400';
    }
  };

const getStatusText = (status: string) => {
    switch (status) {
      case 'expired': return 'Expiré';
      case 'expiring': return 'Expire bientôt';
      case 'low': return 'Stock faible';
      case 'normal': return 'Normal';
      default: return status;
    }
  };

const getCategoryText = (category: string) => {
    switch (category) {
      case 'antibiotic': return 'Antibiotique';
      case 'painkiller': return 'Antidouleur';
      case 'anesthetic': return 'Anesthésique';
      case 'antiseptic': return 'Antiseptique';
      case 'supplement': return 'Complément';
      case 'equipment': return 'Équipement';
      default: return category;
    }
  };

const filteredMedicines = mockMedicines.filter(medicine => {
    const matchesSearch = 
      medicine.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
      medicine.barcode.includes(searchTerm) ||
      medicine.provider.toLowerCase().includes(searchTerm.toLowerCase());

const status = getStockStatus(medicine);
    const matchesFilter = 
      filterStatus === 'all' ||
      (filterStatus === 'low' && status === 'low') ||
      (filterStatus === 'expired' && (status === 'expired' || status === 'expiring')) ||
      (filterStatus === 'normal' && status === 'normal');

const matchesCategory = 
      filterCategory === 'all' || medicine.category === filterCategory;

return matchesSearch && matchesFilter && matchesCategory;
  });

const stats = [
    {
      title: 'Total Articles',
      value: mockMedicines.length.toString(),
      icon: Package,
      color: 'blue'
    },
    {
      title: 'Stock Faible',
      value: mockMedicines.filter(m => getStockStatus(m) === 'low').length.toString(),
      icon: TrendingDown,
      color: 'yellow'
    },
    {
      title: 'Expirations Proches',
      value: mockMedicines.filter(m => ['expired', 'expiring'].includes(getStockStatus(m))).length.toString(),
      icon: AlertTriangle,
      color: 'red'
    },
    {
      title: 'Valeur Totale',
      value: `${mockMedicines.reduce((sum, m) => sum + (m.price * m.quantity), 0).toLocaleString()} DA`,
      icon: TrendingUp,
      color: 'green'
    }
  ];

{/* Alerts */}
      {mockAlerts.length > 0 && (
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-xl p-4"
        >
          <div className="flex items-center space-x-2 mb-3">
            <Bell className="w-5 h-5 text-red-600 dark:text-red-400" />
            <h3 className="font-semibold text-red-800 dark:text-red-300">Alertes Stock</h3>
          </div>
          <div className="space-y-2">
            {mockAlerts.map(alert => (
              <div key={alert.id} className="flex items-center justify-between bg-white dark:bg-gray-800 rounded-lg p-3">
                <span className="text-sm text-gray-900 dark:text-gray-100">{alert.message}</span>
                <button className="text-red-600 hover:text-red-700 text-sm font-medium">
                  Marquer comme lu
                </button>
              </div>
            ))}
          </div>
        </motion.div>
      )}

{/* Stats Cards */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        {stats.map((stat, index) => (
          <motion.div
            key={stat.title}
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: index * 0.1 }}
            className="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6"
          >
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-gray-600 dark:text-gray-400 mb-1">{stat.title}</p>
                <p className="text-2xl font-bold text-gray-900 dark:text-gray-100">{stat.value}</p>
              </div>
              <div className={`w-12 h-12 bg-${stat.color}-100 dark:bg-${stat.color}-900/20 rounded-lg flex items-center justify-center`}>
                <stat.icon className={`w-6 h-6 text-${stat.color}-600 dark:text-${stat.color}-400`} />
              </div>
            </div>
          </motion.div>
        ))}
      </div>

{/* Filters and Search */}
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ delay: 0.2 }}
        className="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6"
      >
        <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between space-y-4 lg:space-y-0 mb-6">
          <div className="relative flex-1 max-w-md">
            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400" />
            <input
              type="text"
              placeholder="Rechercher par nom, code-barres ou fournisseur..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="w-full pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
            />
          </div>
          
          <div className="flex items-center space-x-4">
            <div className="flex items-center space-x-2">
              <Filter className="w-5 h-5 text-gray-400" />
              <select
                value={filterStatus}
                onChange={(e) => setFilterStatus(e.target.value as any)}
                className="border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
              >
                <option value="all">Tous les statuts</option>
                <option value="normal">Stock normal</option>
                <option value="low">Stock faible</option>
                <option value="expired">Expirations</option>
              </select>
            </div>
            
            <select
              value={filterCategory}
              onChange={(e) => setFilterCategory(e.target.value as any)}
              className="border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
            >
              <option value="all">Toutes catégories</option>
              <option value="antibiotic">Antibiotiques</option>
              <option value="painkiller">Antidouleurs</option>
              <option value="anesthetic">Anesthésiques</option>
              <option value="antiseptic">Antiseptiques</option>
              <option value="supplement">Compléments</option>
              <option value="equipment">Équipements</option>
            </select>
          </div>
        </div>

{/* Inventory Table */}
        <div className="overflow-x-auto">
          <table className="w-full">
            <thead>
              <tr className="border-b border-gray-200 dark:border-gray-700">
                <th className="text-left py-3 px-4 font-medium text-gray-900 dark:text-gray-100">Article</th>
                <th className="text-left py-3 px-4 font-medium text-gray-900 dark:text-gray-100">Code-barres</th>
                <th className="text-left py-3 px-4 font-medium text-gray-900 dark:text-gray-100">Catégorie</th>
                <th className="text-left py-3 px-4 font-medium text-gray-900 dark:text-gray-100">Stock</th>
                <th className="text-left py-3 px-4 font-medium text-gray-900 dark:text-gray-100">Prix Unitaire</th>
                <th className="text-left py-3 px-4 font-medium text-gray-900 dark:text-gray-100">Valeur Totale</th>
                <th className="text-left py-3 px-4 font-medium text-gray-900 dark:text-gray-100">Expiration</th>
                <th className="text-left py-3 px-4 font-medium text-gray-900 dark:text-gray-100">Statut</th>
                <th className="text-left py-3 px-4 font-medium text-gray-900 dark:text-gray-100">Actions</th>
              </tr>
            </thead>
            <tbody>
              {filteredMedicines.map((medicine, index) => {
                const status = getStockStatus(medicine);
                const totalValue = medicine.price * medicine.quantity;
                return (
                  <motion.tr
                    key={medicine.id}
                    initial={{ opacity: 0, x: -20 }}
                    animate={{ opacity: 1, x: 0 }}
                    transition={{ delay: index * 0.1 }}
                    className="border-b border-gray-100 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700/50"
                  >
                    <td className="py-4 px-4">
                      <div>
                        <p className="font-medium text-gray-900 dark:text-gray-100">{medicine.name}</p>
                        <p className="text-sm text-gray-600 dark:text-gray-400">{medicine.provider}</p>
                        {medicine.description && (
                          <p className="text-xs text-gray-500 dark:text-gray-500 mt-1">{medicine.description}</p>
                        )}
                      </div>
                    </td>
                    <td className="py-4 px-4">
                      <div className="flex items-center space-x-2">
                        <Barcode className="w-4 h-4 text-gray-400" />
                        <span className="text-gray-600 dark:text-gray-400 font-mono text-sm">{medicine.barcode}</span>
                      </div>
                    </td>
                    <td className="py-4 px-4">
                      <span className="inline-block px-2 py-1 bg-blue-100 dark:bg-blue-900/20 text-blue-800 dark:text-blue-400 rounded-full text-xs font-medium">
                        {getCategoryText(medicine.category)}
                      </span>
                    </td>
                    <td className="py-4 px-4">
                      <div>
                        <span className={`font-medium ${medicine.quantity <= medicine.minStockLevel ? 'text-red-600 dark:text-red-400' : 'text-gray-900 dark:text-gray-100'}`}>
                          {medicine.quantity} {medicine.unit}
                        </span>
                        <p className="text-xs text-gray-500 dark:text-gray-500">Min: {medicine.minStockLevel}</p>
                      </div>
                    </td>
                    <td className="py-4 px-4">
                      <span className="text-gray-900 dark:text-gray-100 font-medium">
                        {medicine.price.toLocaleString()} DA
                      </span>
                    </td>
                    <td className="py-4 px-4">
                      <span className="text-gray-900 dark:text-gray-100 font-medium">
                        {totalValue.toLocaleString()} DA
                      </span>
                    </td>
                    <td className="py-4 px-4">
                      <div className="flex items-center space-x-2">
                        <Calendar className="w-4 h-4 text-gray-400" />
                        <span className="text-gray-600 dark:text-gray-400">
                          {medicine.expiryDate.toLocaleDateString('fr-FR')}
                        </span>
                      </div>
                    </td>
                    <td className="py-4 px-4">
                      <span className={`inline-block px-2 py-1 rounded-full text-xs font-medium ${getStatusColor(status)}`}>
                        {getStatusText(status)}
                      </span>
                    </td>
                    <td className="py-4 px-4">
                      <div className="flex items-center space-x-2">
                        <button className="p-1 text-blue-600 hover:bg-blue-100 dark:hover:bg-blue-900/20 rounded" title="Ajouter stock">
                          <Plus className="w-4 h-4" />
                        </button>
                        <button className="p-1 text-red-600 hover:bg-red-100 dark:hover:bg-red-900/20 rounded" title="Retirer stock">
                          <TrendingDown className="w-4 h-4" />
                        </button>
                        <button className="p-1 text-green-600 hover:bg-green-100 dark:hover:bg-green-900/20 rounded" title="Scanner">
                          <Scan className="w-4 h-4" />
                        </button>
                      </div>
                    </td>
                  </motion.tr>
                );
              })}
            </tbody>
          </table>
        </div>

{filteredMedicines.length === 0 && (
          <div className="text-center py-12">
            <Package className="w-16 h-16 text-gray-400 mx-auto mb-4" />
            <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-2">Aucun article trouvé</h3>
            <p className="text-gray-600 dark:text-gray-400">
              Essayez de modifier vos critères de recherche.
            </p>
          </div>
        )}
      </motion.div>
    </div>
  );
};

export default InventoryPage;
[V0_FILE]typescriptreact:file="src/components/LabResults/LabResultsPage.tsx"
import React, { useState } from 'react';
import { motion } from 'framer-motion';
import { 
  Plus, 
  Search, 
  Filter, 
  TestTube,
  Calendar,
  User,
  Stethoscope,
  Clock,
  AlertTriangle,
  CheckCircle,
  XCircle,
  Eye,
  Download,
  Upload,
  FileText,
  TrendingUp,
  TrendingDown,
  Minus
} from 'lucide-react';
import { LabResult, LabTestResult } from '../../types';
import { useAuth } from '../../contexts/AuthContext';

const LabResultsPage: React.FC = () => {
  const [searchTerm, setSearchTerm] = useState('');
  const [filterStatus, setFilterStatus] = useState<'all' | 'pending' | 'completed' | 'reviewed'>('all');
  const [filterTestType, setFilterTestType] = useState<'all' | 'blood' | 'urine' | 'saliva' | 'biopsy'>('all');
  const { user } = useAuth();

// Mock lab results data
  const mockLabResults: LabResult[] = [
    {
      id: '1',
      patient: {
        id: '1',
        firstname: 'Amina',
        lastname: 'Benali',
        phone: '0661234567',
        email: 'amina.benali@email.com',
        gender: 'female',
        city: 'Alger',
        province: 'Alger',
        patientType: 'OLD_PATIENT',
        dateOfBirth: new Date('1985-03-15'),
        appointments: [],
        medicalFiles: [],
        factures: [],
        createdAt: new Date(),
        updatedAt: new Date(),
        historique: [],
        allergies: ['Pénicilline'],
        chronicConditions: ['Hypertension'],
        totalVisits: 12,
        totalSpent: 45000
      },
      medicalFile: {
        id: '1',
        patient: {} as any,
        doctor: {} as any,
        date: new Date(),
        description: 'Bilan pré-opératoire',
        diagnostics: ['Infection suspectée'],
        treatments: [],
        prescriptions: [],
        labResults: [],
        radiologyResults: [],
        photos: [],
        referrals: [],
        updatedBy: user!,
        medicalConditions: [],
        notes: [],
        createdAt: new Date(),
        updatedAt: new Date()
      },
      requestedBy: {
        id: '1',
        firstname: 'Dr. Sarah',
        lastname: 'Benali',
        phone: '0661234567',
        email: 'sarah.benali@clinic.ma',
        gender: 'female',
        role: 'doctor',
        username: 'dr.benali',
        isActive: true,
        createdAt: new Date(),
        updatedAt: new Date(),
        specialization: 'Orthodontie',
        cabinetNumber: 'Cabinet 1',
        cabinet: {
          id: '1',
          name: 'Cabinet 1',
          number: '1',
          type: 'consultation',
          status: 'available',
          equipment: [],
          capacity: 2,
          floor: 1,
          createdAt: new Date(),
          updatedAt: new Date()
        },
        agenda: [],
        patients: [],
        medicalFiles: [],
        prescriptions: [],
        usedMedicines: [],
        messages: [],
        factures: [],
        statistics: [],
        historique: [],
        doctorRole: 'employee',
        workingHours: [],
        consultationFee: 3500,
        rating: 4.8,
        totalPatients: 156,
        totalConsultations: 234,
        access: {
          viewOwnPatients: true,
          viewOwnStats: true,
          accessMedicalModules: true,
          accessFinancialOwn: true,
          globalStats: false,
          adminPrivileges: false
        }
      },
      performedBy: user!,
      resultFileUrl: '/lab-results/result-001.pdf',
      testType: 'Bilan sanguin complet',
      results: [
        {
          parameter: 'Globules rouges',
          value: '4.2',
          unit: 'M/μL',
          referenceRange: '4.0-5.2',
          status: 'normal'
        },
        {
          parameter: 'Globules blancs',
          value: '12.5',
          unit: 'K/μL',
          referenceRange: '4.0-10.0',
          status: 'abnormal'
        },
        {
          parameter: 'Hémoglobine',
          value: '13.8',
          unit: 'g/dL',
          referenceRange: '12.0-15.0',
          status: 'normal'
        },
        {
          parameter: 'Plaquettes',
          value: '280',
          unit: 'K/μL',
          referenceRange: '150-400',
          status: 'normal'
        },
        {
          parameter: 'CRP',
          value: '15.2',
          unit: 'mg/L',
          referenceRange: '<3.0',
          status: 'critical'
        }
      ],
      status: 'completed',
      notes: 'Élévation des globules blancs et CRP suggérant une infection. Recommandation: antibiothérapie.',
      uploadedBy: user!,
      reviewedBy: {
        id: '1',
        firstname: 'Dr. Sarah',
        lastname: 'Benali',
        phone: '0661234567',
        email: 'sarah.benali@clinic.ma',
        gender: 'female',
        role: 'doctor',
        username: 'dr.benali',
        isActive: true,
        createdAt: new Date(),
        updatedAt: new Date(),
        specialization: 'Orthodontie',
        cabinetNumber: 'Cabinet 1',
        cabinet: {
          id: '1',
          name: 'Cabinet 1',
          number: '1',
          type: 'consultation',
          status: 'available',
          equipment: [],
          capacity: 2,
          floor: 1,
          createdAt: new Date(),
          updatedAt: new Date()
        },
        agenda: [],
        patients: [],
        medicalFiles: [],
        prescriptions: [],
        usedMedicines: [],
        messages: [],
        factures: [],
        statistics: [],
        historique: [],
        doctorRole: 'employee',
        workingHours: [],
        consultationFee: 3500,
        rating: 4.8,
        totalPatients: 156,
        totalConsultations: 234,
        access: {
          viewOwnPatients: true,
          viewOwnStats: true,
          accessMedicalModules: true,
          accessFinancialOwn: true,
          globalStats: false,
          adminPrivileges: false
        }
      },
      createdAt: new Date('2024-01-20'),
      completedAt: new Date('2024-01-22')
    },
    {
      id: '2',
      patient: {
        id: '2',
        firstname: 'Mohamed',
        lastname: 'Alami',
        phone: '0662345678',
        email: 'mohamed.alami@email.com',
        gender: 'male',
        city: 'Oran',
        province: 'Oran',
        patientType: 'NEW_PATIENT',
        dateOfBirth: new Date('1990-07-22'),
        appointments: [],
        medicalFiles: [],
        factures: [],
        createdAt: new Date(),
        updatedAt: new Date(),
        historique: [],
        allergies: [],
        chronicConditions: [],
        totalVisits: 3,
        totalSpent: 12000
      },
      medicalFile: {
        id: '2',
        patient: {} as any,
        doctor: {} as any,
        date: new Date(),
        description: 'Contrôle de routine',
        diagnostics: [],
        treatments: [],
        prescriptions: [],
        labResults: [],
        radiologyResults: [],
        photos: [],
        referrals: [],
        updatedBy: user!,
        medicalConditions: [],
        notes: [],
        createdAt: new Date(),
        updatedAt: new Date()
      },
      requestedBy: {
        id: '1',
        firstname: 'Dr. Sarah',
        lastname: 'Benali',
        phone: '0661234567',
        email: 'sarah.benali@clinic.ma',
        gender: 'female',
        role: 'doctor',
        username: 'dr.benali',
        isActive: true,
        createdAt: new Date(),
        updatedAt: new Date(),
        specialization: 'Orthodontie',
        cabinetNumber: 'Cabinet 1',
        cabinet: {
          id: '1',
          name: 'Cabinet 1',
          number: '1',
          type: 'consultation',
          status: 'available',
          equipment: [],
          capacity: 2,
          floor: 1,
          createdAt: new Date(),
          updatedAt: new Date()
        },
        agenda: [],
        patients: [],
        medicalFiles: [],
        prescriptions: [],
        usedMedicines: [],
        messages: [],
        factures: [],
        statistics: [],
        historique: [],
        doctorRole: 'employee',
        workingHours: [],
        consultationFee: 3500,
        rating: 4.8,
        totalPatients: 156,
        totalConsultations: 234,
        access: {
          viewOwnPatients: true,
          viewOwnStats: true,
          accessMedicalModules: true,
          accessFinancialOwn: true,
          globalStats: false,
          adminPrivileges: false
        }
      },
      performedBy: user!,
      resultFileUrl: '/lab-results/result-002.pdf',
      testType: 'Analyse salivaire',
      results: [
        {
          parameter: 'pH salivaire',
          value: '6.8',
          unit: '',
          referenceRange: '6.0-7.4',
          status: 'normal'
        },
        {
          parameter: 'Débit salivaire',
          value: '1.2',
          unit: 'mL/min',
          referenceRange: '1.0-3.0',
          status: 'normal'
        },
        {
          parameter: 'Streptococcus mutans',
          value: 'Positif',
          unit: '',
          referenceRange: 'Négatif',
          status: 'abnormal'
        }
      ],
      status: 'pending',
      notes: 'En attente de validation par le médecin traitant.',
      uploadedBy: user!,
      createdAt: new Date('2024-01-18'),
      completedAt: new Date('2024-01-19')
    }
  ];

const filteredResults = mockLabResults.filter(result => {
    const matchesSearch = 
      result.patient.firstname.toLowerCase().includes(searchTerm.toLowerCase()) ||
      result.patient.lastname.toLowerCase().includes(searchTerm.toLowerCase()) ||
      result.testType.toLowerCase().includes(searchTerm.toLowerCase());

const matchesStatus = filterStatus === 'all' || result.status === filterStatus;

return matchesSearch && matchesStatus;
  });

const getStatusColor = (status: string) => {
    switch (status) {
      case 'pending': return 'text-yellow-600 bg-yellow-100 dark:bg-yellow-900/20 dark:text-yellow-400';
      case 'in_progress': return 'text-blue-600 bg-blue-100 dark:bg-blue-900/20 dark:text-blue-400';
      case 'completed': return 'text-green-600 bg-green-100 dark:bg-green-900/20 dark:text-green-400';
      case 'reviewed': return 'text-purple-600 bg-purple-100 dark:bg-purple-900/20 dark:text-purple-400';
      default: return 'text-gray-600 bg-gray-100 dark:bg-gray-900/20 dark:text-gray-400';
    }
  };

const getStatusIcon = (status: string) => {
    switch (status) {
      case 'pending': return <Clock className="w-4 h-4" />;
      case 'in_progress': return <TestTube className="w-4 h-4" />;
      case 'completed': return <CheckCircle className="w-4 h-4" />;
      case 'reviewed': return <Eye className="w-4 h-4" />;
      default: return <XCircle className="w-4 h-4" />;
    }
  };

const getStatusText = (status: string) => {
    switch (status) {
      case 'pending': return 'En attente';
      case 'in_progress': return 'En cours';
      case 'completed': return 'Terminé';
      case 'reviewed': return 'Validé';
      default: return status;
    }
  };

const getResultStatusColor = (status: string) => {
    switch (status) {
      case 'normal': return 'text-green-600 dark:text-green-400';
      case 'abnormal': return 'text-orange-600 dark:text-orange-400';
      case 'critical': return 'text-red-600 dark:text-red-400';
      default: return 'text-gray-600 dark:text-gray-400';
    }
  };

const getResultStatusIcon = (status: string) => {
    switch (status) {
      case 'normal': return <CheckCircle className="w-4 h-4" />;
      case 'abnormal': return <TrendingUp className="w-4 h-4" />;
      case 'critical': return <AlertTriangle className="w-4 h-4" />;
      default: return <Minus className="w-4 h-4" />;
    }
  };

// Statistics
  const totalResults = filteredResults.length;
  const pendingResults = filteredResults.filter(r => r.status === 'pending').length;
  const completedResults = filteredResults.filter(r => r.status === 'completed').length;
  const criticalResults = filteredResults.reduce((count, result) => {
    return count + result.results.filter(r => r.status === 'critical').length;
  }, 0);

{/* Statistics Cards */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.1 }}
          className="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6"
        >
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-gray-600 dark:text-gray-400 mb-1">Total Analyses</p>
              <p className="text-2xl font-bold text-gray-900 dark:text-gray-100">{totalResults}</p>
            </div>
            <div className="w-12 h-12 bg-blue-100 dark:bg-blue-900/20 rounded-lg flex items-center justify-center">
              <TestTube className="w-6 h-6 text-blue-600 dark:text-blue-400" />
            </div>
          </div>
        </motion.div>

<motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.2 }}
          className="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6"
        >
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-gray-600 dark:text-gray-400 mb-1">En Attente</p>
              <p className="text-2xl font-bold text-gray-900 dark:text-gray-100">{pendingResults}</p>
            </div>
            <div className="w-12 h-12 bg-yellow-100 dark:bg-yellow-900/20 rounded-lg flex items-center justify-center">
              <Clock className="w-6 h-6 text-yellow-600 dark:text-yellow-400" />
            </div>
          </div>
        </motion.div>

<motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.3 }}
          className="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6"
        >
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-gray-600 dark:text-gray-400 mb-1">Terminées</p>
              <p className="text-2xl font-bold text-gray-900 dark:text-gray-100">{completedResults}</p>
            </div>
            <div className="w-12 h-12 bg-green-100 dark:bg-green-900/20 rounded-lg flex items-center justify-center">
              <CheckCircle className="w-6 h-6 text-green-600 dark:text-green-400" />
            </div>
          </div>
        </motion.div>

<motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.4 }}
          className="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6"
        >
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-gray-600 dark:text-gray-400 mb-1">Résultats Critiques</p>
              <p className="text-2xl font-bold text-gray-900 dark:text-gray-100">{criticalResults}</p>
            </div>
            <div className="w-12 h-12 bg-red-100 dark:bg-red-900/20 rounded-lg flex items-center justify-center">
              <AlertTriangle className="w-6 h-6 text-red-600 dark:text-red-400" />
            </div>
          </div>
        </motion.div>
      </div>

{/* Filters and Search */}
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ delay: 0.5 }}
        className="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6"
      >
        <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between space-y-4 lg:space-y-0 mb-6">
          <div className="relative flex-1 max-w-md">
            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400" />
            <input
              type="text"
              placeholder="Rechercher par patient ou type d'analyse..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="w-full pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
            />
          </div>
          
          <div className="flex items-center space-x-4">
            <select
              value={filterStatus}
              onChange={(e) => setFilterStatus(e.target.value as any)}
              className="border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
            >
              <option value="all">Tous les statuts</option>
              <option value="pending">En attente</option>
              <option value="in_progress">En cours</option>
              <option value="completed">Terminées</option>
              <option value="reviewed">Validées</option>
            </select>

<select
              value={filterTestType}
              onChange={(e) => setFilterTestType(e.target.value as any)}
              className="border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
            >
              <option value="all">Tous les types</option>
              <option value="blood">Analyses sanguines</option>
              <option value="urine">Analyses urinaires</option>
              <option value="saliva">Analyses salivaires</option>
              <option value="biopsy">Biopsies</option>
            </select>

{/* Lab Results List */}
        <div className="space-y-6">
          {filteredResults.map((result, index) => (
            <motion.div
              key={result.id}
              initial={{ opacity: 0, x: -20 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ delay: index * 0.1 }}
              className="bg-gray-50 dark:bg-gray-700 rounded-lg p-6 hover:shadow-md transition-shadow"
            >
              <div className="flex items-start justify-between mb-4">
                <div className="flex items-start space-x-4">
                  <div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-600 rounded-full flex items-center justify-center">
                    <TestTube className="w-6 h-6 text-white" />
                  </div>
                  
                  <div>
                    <div className="flex items-center space-x-3 mb-2">
                      <h3 className="font-semibold text-gray-900 dark:text-gray-100">
                        {result.patient.firstname} {result.patient.lastname}
                      </h3>
                      <span className={`inline-flex items-center space-x-1 px-3 py-1 rounded-full text-xs font-medium ${getStatusColor(result.status)}`}>
                        {getStatusIcon(result.status)}
                        <span>{getStatusText(result.status)}</span>
                      </span>
                    </div>
                    
                    <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-3">
                      <div className="flex items-center space-x-2">
                        <Calendar className="w-4 h-4 text-gray-400" />
                        <span className="text-sm text-gray-600 dark:text-gray-400">
                          {result.createdAt.toLocaleDateString('fr-FR')}
                        </span>
                      </div>
                      <div className="flex items-center space-x-2">
                        <Stethoscope className="w-4 h-4 text-gray-400" />
                        <span className="text-sm text-gray-600 dark:text-gray-400">
                          {result.requestedBy.firstname} {result.requestedBy.lastname}
                        </span>
                      </div>
                      <div className="flex items-center space-x-2">
                        <TestTube className="w-4 h-4 text-gray-400" />
                        <span className="text-sm text-gray-600 dark:text-gray-400">
                          {result.testType}
                        </span>
                      </div>
                      {result.completedAt && (
                        <div className="flex items-center space-x-2">
                          <Clock className="w-4 h-4 text-gray-400" />
                          <span className="text-sm text-gray-600 dark:text-gray-400">
                            Terminé le {result.completedAt.toLocaleDateString('fr-FR')}
                          </span>
                        </div>
                      )}
                    </div>
                  </div>
                </div>

{/* Test Results */}
              {result.results.length > 0 && (
                <div className="bg-white dark:bg-gray-600 rounded-lg p-4 mb-4">
                  <h4 className="font-medium text-gray-900 dark:text-gray-100 mb-3">Résultats d'analyse:</h4>
                  <div className="space-y-3">
                    {result.results.map((testResult, idx) => (
                      <div key={idx} className="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-700 rounded-lg">
                        <div className="flex-1">
                          <div className="flex items-center space-x-3 mb-1">
                            <h5 className="font-medium text-gray-900 dark:text-gray-100">
                              {testResult.parameter}
                            </h5>
                            <span className={`inline-flex items-center space-x-1 px-2 py-1 rounded-full text-xs font-medium ${getResultStatusColor(testResult.status)}`}>
                              {getResultStatusIcon(testResult.status)}
                              <span className="capitalize">{testResult.status}</span>
                            </span>
                          </div>
                          
                          <div className="grid grid-cols-1 md:grid-cols-3 gap-3 text-sm">
                            <div>
                              <span className="text-gray-600 dark:text-gray-400">Valeur:</span>
                              <span className="ml-1 font-medium text-gray-900 dark:text-gray-100">
                                {testResult.value} {testResult.unit}
                              </span>
                            </div>
                            <div>
                              <span className="text-gray-600 dark:text-gray-400">Référence:</span>
                              <span className="ml-1 font-medium text-gray-900 dark:text-gray-100">
                                {testResult.referenceRange} {testResult.unit}
                              </span>
                            </div>
                          </div>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              )}

{/* Critical Results Alert */}
              {result.results.some(r => r.status === 'critical') && (
                <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4 mb-4">
                  <div className="flex items-center space-x-2 mb-2">
                    <AlertTriangle className="w-5 h-5 text-red-600 dark:text-red-400" />
                    <span className="font-medium text-red-800 dark:text-red-300">Résultats critiques détectés</span>
                  </div>
                  <p className="text-sm text-red-700 dark:text-red-400">
                    Certains paramètres nécessitent une attention médicale immédiate.
                  </p>
                </div>
              )}

{/* Notes */}
              {result.notes && (
                <div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4 mb-4">
                  <h4 className="font-medium text-blue-900 dark:text-blue-300 mb-2">Notes du laboratoire:</h4>
                  <p className="text-sm text-blue-800 dark:text-blue-400">{result.notes}</p>
                </div>
              )}

{/* Review Information */}
              {result.reviewedBy && (
                <div className="flex items-center justify-between text-sm text-gray-600 dark:text-gray-400">
                  <span>
                    Validé par: {result.reviewedBy.firstname} {result.reviewedBy.lastname}
                  </span>
                  <span>
                    Téléchargé par: {result.uploadedBy.firstname} {result.uploadedBy.lastname}
                  </span>
                </div>
              )}
            </motion.div>
          ))}
        </div>

{filteredResults.length === 0 && (
          <div className="text-center py-12">
            <TestTube className="w-16 h-16 text-gray-400 mx-auto mb-4" />
            <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-2">Aucun résultat trouvé</h3>
            <p className="text-gray-600 dark:text-gray-400">
              Créez une nouvelle demande d'analyse ou modifiez vos critères de recherche.
            </p>
          </div>
        )}
      </motion.div>
    </div>
  );
};

export default LabResultsPage;
[V0_FILE]typescriptreact:file="src/components/Layout/Header.tsx"
"use client"

import type React from "react"
import { motion } from "framer-motion"
import { Menu, Search, LogOut, User, Calendar, Clock, Sun, Moon } from "lucide-react"
import { useAuth } from "../../contexts/AuthContext"
import { useTheme } from "../../contexts/ThemeContext"
import { useRouter } from "next/navigation"
import NotificationCenter from "../Common/NotificationCenter"
import OnlineUsers from "../Common/OnlineUsers"
import ConnectionStatus from "../Common/ConnectionStatus"

interface HeaderProps {
  onMenuClick: () => void
}

const Header: React.FC<HeaderProps> = ({ onMenuClick }) => {
  const { user, logout } = useAuth()
  const { isDark, toggleTheme } = useTheme()
  const router = useRouter()
  const currentDate = new Date()

const formatDate = (date: Date) => {
    return date.toLocaleDateString("fr-FR", {
      weekday: "long",
      year: "numeric",
      month: "long",
      day: "numeric",
    })
  }

const formatTime = (date: Date) => {
    return date.toLocaleTimeString("fr-FR", {
      hour: "2-digit",
      minute: "2-digit",
    })
  }

const handleLogout = () => {
    logout()
    router.push("/login")
  }

return (
    <>
      <ConnectionStatus />
      <motion.header
        initial={{ y: -50, opacity: 0 }}
        animate={{ y: 0, opacity: 1 }}
        className="bg-white dark:bg-gray-800 shadow-sm border-b border-gray-200 dark:border-gray-700 px-6 py-4 transition-colors duration-200"
      >
        <div className="flex items-center justify-between">
          <div className="flex items-center space-x-4">
            <button
              onClick={onMenuClick}
              className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200"
            >
              <Menu className="w-6 h-6 text-gray-600 dark:text-gray-300" />
            </button>

<div className="hidden md:flex items-center space-x-6">
              <div className="flex items-center space-x-2 text-gray-600 dark:text-gray-300">
                <Calendar className="w-4 h-4" />
                <span className="text-sm font-medium">{formatDate(currentDate)}</span>
              </div>
              <div className="flex items-center space-x-2 text-gray-600 dark:text-gray-300">
                <Clock className="w-4 h-4" />
                <span className="text-sm font-medium">{formatTime(currentDate)}</span>
              </div>
            </div>
          </div>

<button
              onClick={toggleTheme}
              className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200"
            >
              {isDark ? <Sun className="w-5 h-5 text-yellow-500" /> : <Moon className="w-5 h-5 text-gray-600" />}
            </button>

<div className="flex items-center space-x-3">
              <div className="text-right">
                <p className="text-sm font-medium text-gray-800 dark:text-gray-200">
                  {user?.firstname} {user?.lastname}
                </p>
                <p className="text-xs text-gray-600 dark:text-gray-400 capitalize">{user?.role.replace("_", " ")}</p>
              </div>

<div className="w-8 h-8 bg-gradient-to-br from-blue-500 to-blue-600 rounded-full flex items-center justify-center">
                <span className="text-white text-sm font-semibold">
                  {user?.firstname.charAt(0)}
                  {user?.lastname.charAt(0)}
                </span>
              </div>

<div className="flex items-center space-x-2">
                <button
                  onClick={() => router.push("/my-profile")}
                  className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200"
                >
                  <User className="w-4 h-4 text-gray-600 dark:text-gray-300" />
                </button>
                <button
                  onClick={handleLogout}
                  className="p-2 rounded-lg hover:bg-red-100 hover:text-red-600 dark:hover:bg-red-900 dark:hover:text-red-400 transition-colors duration-200"
                >
                  <LogOut className="w-4 h-4 text-gray-600 dark:text-gray-300 hover:text-red-600 dark:hover:text-red-400" />
                </button>
              </div>
            </div>
          </div>
        </div>
      </motion.header>
    </>
  )
}

export default Header
[V0_FILE]typescriptreact:file="src/components/Layout/Layout.tsx"
"use client"

import type React from "react"
import { useState } from "react"
import { motion } from "framer-motion"
import Header from "./Header"
import Sidebar from "./Sidebar"

interface LayoutProps {
  children: React.ReactNode
}

const Layout: React.FC<LayoutProps> = ({ children }) => {
  const [sidebarOpen, setSidebarOpen] = useState(false)

const toggleSidebar = () => {
    setSidebarOpen(!sidebarOpen)
  }

return (
    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
      <Sidebar isOpen={sidebarOpen} onClose={() => setSidebarOpen(false)} />

<motion.main
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.3 }}
          className="p-6"
        >
          {children}
        </motion.main>
      </div>
    </div>
  )
}

export default Layout
[V0_FILE]typescriptreact:file="src/components/Layout/Sidebar.tsx"
"use client"

import type React from "react"
import { motion } from "framer-motion"
import { useRouter } from "next/navigation"
import {
  Calendar,
  Users,
  FileText,
  DollarSign,
  Package,
  BarChart,
  Settings,
  MessageSquare,
  Activity,
  UserCheck,
  Stethoscope,
  Pill,
  Camera,
  TestTube,
  Home,
  Monitor,
  X,
  Phone,
  Bell,
  User,
  Lock,
  Star,
  RefreshCw,
  Scan,
  Shield,
  Database,
  FileImage,
  Clipboard,
  Clock,
  MapPin,
  Headphones,
} from "lucide-react"
import { useAuth } from "../../contexts/AuthContext"

interface SidebarProps {
  isOpen: boolean
  onClose: () => void
}

const Sidebar: React.FC<SidebarProps> = ({ isOpen, onClose }) => {
  const { user, hasAccess } = useAuth()
  const router = useRouter()

const menuItems = [
    // Core Dashboard
    { icon: Home, label: "Tableau de bord", path: "/dashboard", permission: "dashboard" },

// Patient Management
    { icon: Users, label: "Patients", path: "/patients", permission: "patients" },
    { icon: Calendar, label: "Rendez-vous", path: "/appointments", permission: "appointments" },
    { icon: Monitor, label: "Salle d'attente", path: "/waiting-room", permission: "waiting_room" },

// Medical Records & Files
    { icon: FileText, label: "Dossiers médicaux", path: "/medical-files", permission: "medical_files" },
    {
      icon: Clipboard,
      label: "Historique consultations",
      path: "/consultation-history",
      permission: "consultation_history",
    },
    { icon: Pill, label: "Prescriptions", path: "/prescriptions", permission: "prescriptions" },

// Diagnostic & Results
    { icon: TestTube, label: "Résultats de labo", path: "/lab-results", permission: "lab_results" },
    { icon: Camera, label: "Radiologie", path: "/radiology", permission: "radiology" },
    { icon: FileImage, label: "Images de cas", path: "/case-images", permission: "case_images" },

// Financial Management
    { icon: DollarSign, label: "Facturation", path: "/billing", permission: "billing" },
    { icon: Activity, label: "Mes paiements", path: "/my-payments", permission: "my_payments" },

// Inventory & Stock
    { icon: Package, label: "Inventaire", path: "/inventory", permission: "inventory" },
    {
      icon: Scan,
      label: "Scanner médicaments",
      path: "/medication-scanner",
      permission: "medication_scanner",
    },

// Communication & Messaging
    { icon: MessageSquare, label: "Messages internes", path: "/messages", permission: "messages" },
    { icon: Bell, label: "Notifications", path: "/notifications", permission: "notifications" },
    { icon: Phone, label: "Journal d'appels", path: "/call-log", permission: "call_log" },
    { icon: Headphones, label: "Centre d'appels", path: "/call-center", permission: "call_center" },

// Staff & User Management
    { icon: UserCheck, label: "Personnel", path: "/staff", permission: "staff" },
    {
      icon: Shield,
      label: "Rôles & permissions",
      path: "/roles-permissions",
      permission: "roles_permissions",
    },

// Statistics & Reports
    { icon: BarChart, label: "Statistiques", path: "/statistics", permission: "statistics" },
    { icon: Star, label: "Évaluations patients", path: "/patient-feedback", permission: "patient_feedback" },

// Room & Cabinet Management
    { icon: MapPin, label: "Gestion des cabinets", path: "/room-management", permission: "room_management" },
    { icon: Clock, label: "Mon planning", path: "/my-schedule", permission: "my_schedule" },

// System & Configuration
    { icon: Settings, label: "Paramètres", path: "/settings", permission: "settings" },
    { icon: Database, label: "Sauvegarde système", path: "/system-backup", permission: "system_backup" },
    { icon: RefreshCw, label: "Synchronisation", path: "/sync", permission: "sync" },

// Profile & Security
    { icon: User, label: "Mon profil", path: "/my-profile", permission: "my_profile" },
    { icon: Lock, label: "Changer mot de passe", path: "/change-password", permission: "change_password" },
  ]

const filteredMenuItems = menuItems.filter((item) => hasAccess(item.permission))

// Group menu items by category for better organization
  const menuCategories = [
    {
      title: "Principal",
      items: filteredMenuItems.filter((item) =>
        ["dashboard", "patients", "appointments", "waiting_room"].includes(item.permission),
      ),
    },
    {
      title: "Médical",
      items: filteredMenuItems.filter((item) =>
        ["medical_files", "consultation_history", "prescriptions", "lab_results", "radiology", "case_images"].includes(
          item.permission,
        ),
      ),
    },
    {
      title: "Financier",
      items: filteredMenuItems.filter((item) => ["billing", "my_payments"].includes(item.permission)),
    },
    {
      title: "Inventaire",
      items: filteredMenuItems.filter((item) => ["inventory", "medication_scanner"].includes(item.permission)),
    },
    {
      title: "Communication",
      items: filteredMenuItems.filter((item) =>
        ["messages", "notifications", "call_log", "call_center"].includes(item.permission),
      ),
    },
    {
      title: "Gestion",
      items: filteredMenuItems.filter((item) =>
        ["staff", "roles_permissions", "room_management", "my_schedule"].includes(item.permission),
      ),
    },
    {
      title: "Rapports",
      items: filteredMenuItems.filter((item) => ["statistics", "patient_feedback"].includes(item.permission)),
    },
    {
      title: "Système",
      items: filteredMenuItems.filter((item) => ["settings", "system_backup", "sync"].includes(item.permission)),
    },
    {
      title: "Profil",
      items: filteredMenuItems.filter((item) => ["my_profile", "change_password"].includes(item.permission)),
    },
  ].filter((category) => category.items.length > 0)

const handleNavigation = (path: string) => {
    router.push(path)
    onClose()
  }

return (
    <>
      <motion.div
        initial={{ x: -300 }}
        animate={{ x: isOpen ? 0 : -300 }}
        transition={{ duration: 0.3 }}
        className="fixed left-0 top-0 h-full bg-white dark:bg-gray-800 shadow-lg z-50 w-80 border-r border-gray-200 dark:border-gray-700 transition-colors duration-200 overflow-y-auto"
      >
        <div className="p-6 border-b border-gray-200 dark:border-gray-700">
          <div className="flex items-center justify-between">
            <div className="flex items-center space-x-3">
              <div className="w-10 h-10 bg-gradient-to-br from-blue-500 to-blue-600 rounded-lg flex items-center justify-center">
                <Stethoscope className="w-6 h-6 text-white" />
              </div>
              <div>
                <h2 className="text-lg font-semibold text-gray-800 dark:text-gray-200">Clinique Dentaire</h2>
                <p className="text-sm text-gray-600 dark:text-gray-400">Système ERP Complet</p>
              </div>
            </div>
            <button onClick={onClose} className="lg:hidden p-1 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700">
              <X className="w-5 h-5 text-gray-600 dark:text-gray-300" />
            </button>
          </div>
        </div>

<div className="p-4 border-b border-gray-200 dark:border-gray-700">
          <div className="flex items-center space-x-3">
            <div className="w-12 h-12 bg-gradient-to-br from-green-400 to-green-500 rounded-full flex items-center justify-center">
              <span className="text-white font-semibold text-lg">
                {user?.firstname.charAt(0)}
                {user?.lastname.charAt(0)}
              </span>
            </div>
            <div>
              <p className="font-medium text-gray-800 dark:text-gray-200">
                {user?.firstname} {user?.lastname}
              </p>
              <p className="text-sm text-gray-600 dark:text-gray-400 capitalize">{user?.role.replace("_", " ")}</p>
              {user?.role === "doctor" && (
                <div className="flex items-center space-x-1 mt-1">
                  <Star className="w-3 h-3 text-yellow-400 fill-current" />
                  <span className="text-xs text-gray-500 dark:text-gray-400">4.8 • 156 patients</span>
                </div>
              )}
            </div>
          </div>
        </div>

<nav className="p-4 space-y-6 pb-20">
          {menuCategories.map((category, categoryIndex) => (
            <div key={category.title}>
              <h3 className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-3">
                {category.title}
              </h3>
              <div className="space-y-1">
                {category.items.map((item, index) => {
                  const isActive = router.pathname === item.path
                  return (
                    <motion.div
                      key={item.label}
                      initial={{ opacity: 0, x: -20 }}
                      animate={{ opacity: 1, x: 0 }}
                      transition={{ delay: categoryIndex * 0.1 + index * 0.05 }}
                    >
                      <button
                        onClick={() => handleNavigation(item.path)}
                        className={`w-full flex items-center space-x-3 p-3 rounded-lg transition-all duration-200 group ${
                          isActive
                            ? "bg-blue-50 text-blue-600 dark:bg-blue-900/20 dark:text-blue-400 shadow-sm"
                            : "hover:bg-blue-50 hover:text-blue-600 dark:hover:bg-gray-700 dark:hover:text-blue-400 text-gray-700 dark:text-gray-300"
                        }`}
                      >
                        <item.icon
                          className={`w-5 h-5 ${isActive ? "text-blue-600 dark:text-blue-400" : "text-gray-600 dark:text-gray-400 group-hover:text-blue-600 dark:group-hover:text-blue-400"}`}
                        />
                        <span className="font-medium text-sm text-left">{item.label}</span>
                        {isActive && <div className="w-2 h-2 bg-blue-600 dark:bg-blue-400 rounded-full ml-auto"></div>}
                      </button>
                    </motion.div>
                  )
                })}
              </div>
            </div>
          ))}
        </nav>
      </motion.div>

{isOpen && (
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          className="fixed inset-0 bg-black bg-opacity-50 z-40 lg:hidden"
          onClick={onClose}
        />
      )}
    </>
  )
}

export default Sidebar
[V0_FILE]typescriptreact:file="src/components/MedicalFiles/MedicalFilesList.tsx"
import React, { useState } from 'react';
import { motion } from 'framer-motion';
import { Plus, Search, Filter, Eye, Edit, FileText, Calendar, User, Stethoscope, Heart, Activity, AlertTriangle, Download, Printer as Print, Share2 } from 'lucide-react';
import { MedicalFile, Patient, Doctor } from '../../types';
import { useAuth } from '../../contexts/AuthContext';

const MedicalFilesList: React.FC = () => {
  const [searchTerm, setSearchTerm] = useState('');
  const [filterStatus, setFilterStatus] = useState<'all' | 'recent' | 'urgent' | 'follow_up'>('all');
  const { user } = useAuth();

// Mock data
  const mockMedicalFiles: MedicalFile[] = [
    {
      id: '1',
      patient: {
        id: '1',
        firstname: 'Amina',
        lastname: 'Benali',
        phone: '0661234567',
        email: 'amina.benali@email.com',
        gender: 'female',
        city: 'Alger',
        province: 'Alger',
        patientType: 'OLD_PATIENT',
        dateOfBirth: new Date('1985-03-15'),
        appointments: [],
        medicalFiles: [],
        factures: [],
        createdAt: new Date(),
        updatedAt: new Date(),
        historique: [],
        allergies: ['Pénicilline'],
        chronicConditions: ['Hypertension'],
        totalVisits: 12,
        totalSpent: 45000
      },
      doctor: {
        id: '1',
        firstname: 'Dr. Sarah',
        lastname: 'Benali',
        phone: '0661234567',
        email: 'sarah.benali@clinic.ma',
        gender: 'female',
        role: 'doctor',
        username: 'dr.benali',
        isActive: true,
        createdAt: new Date(),
        updatedAt: new Date(),
        specialization: 'Orthodontie',
        cabinetNumber: 'Cabinet 1',
        cabinet: {
          id: '1',
          name: 'Cabinet 1',
          number: '1',
          type: 'consultation',
          status: 'available',
          equipment: [],
          capacity: 2,
          floor: 1,
          createdAt: new Date(),
          updatedAt: new Date()
        },
        agenda: [],
        patients: [],
        medicalFiles: [],
        prescriptions: [],
        usedMedicines: [],
        messages: [],
        factures: [],
        statistics: [],
        historique: [],
        doctorRole: 'employee',
        workingHours: [],
        consultationFee: 3500,
        rating: 4.8,
        totalPatients: 156,
        totalConsultations: 234,
        access: {
          viewOwnPatients: true,
          viewOwnStats: true,
          accessMedicalModules: true,
          accessFinancialOwn: true,
          globalStats: false,
          adminPrivileges: false
        }
      },
      date: new Date(),
      description: 'Consultation de routine - Contrôle orthodontique',
      diagnostics: ['Malocclusion classe II', 'Encombrement dentaire'],
      treatments: ['Ajustement appareil orthodontique', 'Nettoyage professionnel'],
      prescriptions: [],
      labResults: [],
      radiologyResults: [],
      photos: [],
      referrals: [],
      updatedBy: user!,
      medicalConditions: [],
      vitalSigns: {
        bloodPressure: '120/80',
        heartRate: 72,
        temperature: 36.5,
        recordedAt: new Date(),
        recordedBy: user!
      },
      dentalChart: {
        teeth: [
          { toothNumber: 11, condition: 'healthy' },
          { toothNumber: 12, condition: 'filled', treatmentDate: new Date('2023-06-15') },
          { toothNumber: 21, condition: 'crown', treatmentDate: new Date('2023-08-20') }
        ],
        updatedAt: new Date(),
        updatedBy: user!
      },
      treatmentPlan: [
        {
          id: '1',
          treatment: 'Remplacement couronne 21',
          priority: 'medium',
          estimatedCost: 25000,
          estimatedDuration: 90,
          status: 'planned',
          scheduledDate: new Date('2024-02-15')
        }
      ],
      notes: [
        {
          id: '1',
          content: 'Patient coopératif, bonne hygiène dentaire',
          type: 'general',
          author: user!,
          isPrivate: false,
          createdAt: new Date()
        }
      ],
      createdAt: new Date('2024-01-15'),
      updatedAt: new Date()
    }
  ];

const filteredFiles = mockMedicalFiles.filter(file => {
    const matchesSearch = 
      file.patient.firstname.toLowerCase().includes(searchTerm.toLowerCase()) ||
      file.patient.lastname.toLowerCase().includes(searchTerm.toLowerCase()) ||
      file.description.toLowerCase().includes(searchTerm.toLowerCase());

return matchesSearch;
  });

const getUrgencyColor = (conditions: string[]) => {
    if (conditions.some(c => c.includes('urgent') || c.includes('critique'))) {
      return 'text-red-600 bg-red-100 dark:bg-red-900/20 dark:text-red-400';
    }
    return 'text-green-600 bg-green-100 dark:bg-green-900/20 dark:text-green-400';
  };

{/* Search and Filters */}
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ delay: 0.1 }}
        className="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6"
      >
        <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between space-y-4 lg:space-y-0 mb-6">
          <div className="relative flex-1 max-w-md">
            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400" />
            <input
              type="text"
              placeholder="Rechercher par patient ou diagnostic..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="w-full pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
            />
          </div>
          
          <div className="flex items-center space-x-4">
            <select
              value={filterStatus}
              onChange={(e) => setFilterStatus(e.target.value as any)}
              className="border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
            >
              <option value="all">Tous les dossiers</option>
              <option value="recent">Récents</option>
              <option value="urgent">Urgents</option>
              <option value="follow_up">Suivi requis</option>
            </select>
            <button className="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors flex items-center space-x-2">
              <Download className="w-5 h-5" />
              <span>Exporter</span>
            </button>
          </div>
        </div>

{/* Medical Files List */}
        <div className="space-y-4">
          {filteredFiles.map((file, index) => (
            <motion.div
              key={file.id}
              initial={{ opacity: 0, x: -20 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ delay: index * 0.1 }}
              className="bg-gray-50 dark:bg-gray-700 rounded-lg p-6 hover:shadow-md transition-shadow"
            >
              <div className="flex items-start justify-between">
                <div className="flex items-start space-x-4 flex-1">
                  <div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-600 rounded-full flex items-center justify-center">
                    <FileText className="w-6 h-6 text-white" />
                  </div>
                  
                  <div className="flex-1">
                    <div className="flex items-center space-x-3 mb-2">
                      <h3 className="font-semibold text-gray-900 dark:text-gray-100">
                        {file.patient.firstname} {file.patient.lastname}
                      </h3>
                      <span className={`inline-block px-2 py-1 rounded-full text-xs font-medium ${getUrgencyColor(file.diagnostics)}`}>
                        {file.diagnostics.length > 0 ? 'Diagnostic établi' : 'En cours'}
                      </span>
                    </div>
                    
                    <p className="text-gray-600 dark:text-gray-400 mb-3">{file.description}</p>
                    
                    <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
                      <div className="flex items-center space-x-2">
                        <Calendar className="w-4 h-4 text-gray-400" />
                        <span className="text-sm text-gray-600 dark:text-gray-400">
                          {file.date.toLocaleDateString('fr-FR')}
                        </span>
                      </div>
                      <div className="flex items-center space-x-2">
                        <Stethoscope className="w-4 h-4 text-gray-400" />
                        <span className="text-sm text-gray-600 dark:text-gray-400">
                          Dr. {file.doctor.firstname} {file.doctor.lastname}
                        </span>
                      </div>
                      <div className="flex items-center space-x-2">
                        <User className="w-4 h-4 text-gray-400" />
                        <span className="text-sm text-gray-600 dark:text-gray-400">
                          {file.patient.totalVisits} visites
                        </span>
                      </div>
                    </div>

{/* Vital Signs */}
                    {file.vitalSigns && (
                      <div className="bg-white dark:bg-gray-600 rounded-lg p-3 mb-4">
                        <h4 className="font-medium text-gray-900 dark:text-gray-100 mb-2 flex items-center">
                          <Heart className="w-4 h-4 mr-2 text-red-500" />
                          Signes Vitaux
                        </h4>
                        <div className="grid grid-cols-2 md:grid-cols-4 gap-3 text-sm">
                          <div>
                            <span className="text-gray-600 dark:text-gray-400">Tension:</span>
                            <span className="ml-1 font-medium text-gray-900 dark:text-gray-100">
                              {file.vitalSigns.bloodPressure}
                            </span>
                          </div>
                          <div>
                            <span className="text-gray-600 dark:text-gray-400">Pouls:</span>
                            <span className="ml-1 font-medium text-gray-900 dark:text-gray-100">
                              {file.vitalSigns.heartRate} bpm
                            </span>
                          </div>
                          <div>
                            <span className="text-gray-600 dark:text-gray-400">Température:</span>
                            <span className="ml-1 font-medium text-gray-900 dark:text-gray-100">
                              {file.vitalSigns.temperature}°C
                            </span>
                          </div>
                        </div>
                      </div>
                    )}

{/* Diagnostics */}
                    {file.diagnostics.length > 0 && (
                      <div className="mb-4">
                        <h4 className="font-medium text-gray-900 dark:text-gray-100 mb-2">Diagnostics:</h4>
                        <div className="flex flex-wrap gap-2">
                          {file.diagnostics.map((diagnostic, idx) => (
                            <span key={idx} className="px-2 py-1 bg-blue-100 dark:bg-blue-900/20 text-blue-800 dark:text-blue-400 rounded-full text-xs">
                              {diagnostic}
                            </span>
                          ))}
                        </div>
                      </div>
                    )}

{/* Treatment Plan */}
                    {file.treatmentPlan && file.treatmentPlan.length > 0 && (
                      <div className="mb-4">
                        <h4 className="font-medium text-gray-900 dark:text-gray-100 mb-2">Plan de Traitement:</h4>
                        <div className="space-y-2">
                          {file.treatmentPlan.slice(0, 2).map((plan) => (
                            <div key={plan.id} className="flex items-center justify-between bg-white dark:bg-gray-600 rounded p-2">
                              <span className="text-sm text-gray-900 dark:text-gray-100">{plan.treatment}</span>
                              <div className="flex items-center space-x-2">
                                <span className={`px-2 py-1 rounded-full text-xs ${
                                  plan.priority === 'high' ? 'bg-red-100 text-red-800 dark:bg-red-900/20 dark:text-red-400' :
                                  plan.priority === 'medium' ? 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/20 dark:text-yellow-400' :
                                  'bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400'
                                }`}>
                                  {plan.priority}
                                </span>
                                <span className="text-xs text-gray-600 dark:text-gray-400">
                                  {plan.estimatedCost.toLocaleString()} DA
                                </span>
                              </div>
                            </div>
                          ))}
                        </div>
                      </div>
                    )}

{/* Allergies & Conditions */}
                    {(file.patient.allergies.length > 0 || file.patient.chronicConditions.length > 0) && (
                      <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-3">
                        <div className="flex items-center space-x-2 mb-2">
                          <AlertTriangle className="w-4 h-4 text-red-600 dark:text-red-400" />
                          <span className="font-medium text-red-800 dark:text-red-300">Alertes Médicales</span>
                        </div>
                        {file.patient.allergies.length > 0 && (
                          <div className="mb-2">
                            <span className="text-sm font-medium text-red-700 dark:text-red-300">Allergies: </span>
                            <span className="text-sm text-red-600 dark:text-red-400">
                              {file.patient.allergies.join(', ')}
                            </span>
                          </div>
                        )}
                        {file.patient.chronicConditions.length > 0 && (
                          <div>
                            <span className="text-sm font-medium text-red-700 dark:text-red-300">Conditions chroniques: </span>
                            <span className="text-sm text-red-600 dark:text-red-400">
                              {file.patient.chronicConditions.join(', ')}
                            </span>
                          </div>
                        )}
                      </div>
                    )}
                  </div>
                </div>

{filteredFiles.length === 0 && (
          <div className="text-center py-12">
            <FileText className="w-16 h-16 text-gray-400 mx-auto mb-4" />
            <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-2">Aucun dossier médical trouvé</h3>
            <p className="text-gray-600 dark:text-gray-400">
              Créez un nouveau dossier médical pour commencer.
            </p>
          </div>
        )}
      </motion.div>
    </div>
  );
};

export default MedicalFilesList;
[V0_FILE]typescriptreact:file="src/components/Patients/PatientList.tsx"
import React, { useState } from 'react';
import { motion } from 'framer-motion';
import { 
  Plus, 
  Search, 
  Filter, 
  Edit, 
  Eye, 
  Calendar,
  Phone,
  Mail,
  MapPin,
  User
} from 'lucide-react';
import { Patient } from '../../types';

const PatientList: React.FC = () => {
  const [searchTerm, setSearchTerm] = useState('');
  const [filterType, setFilterType] = useState<'all' | 'new' | 'old' | 'urgent'>('all');

// Mock data - replace with real data
  const mockPatients: Patient[] = [
    {
      id: '1',
      firstname: 'Amina',
      lastname: 'Benali',
      phone: '0661234567',
      email: 'amina.benali@email.com',
      gender: 'female',
      city: 'Casablanca',
      province: 'Grand Casablanca',
      patientType: 'OLD_PATIENT',
      dateOfBirth: new Date('1985-03-15'),
      appointments: [],
      medicalFiles: [],
      factures: [],
      createdAt: new Date('2023-01-15'),
      updatedAt: new Date('2024-01-15'),
      historique: [],
      description: 'Patiente régulière, traitement orthodontique en cours'
    },
    {
      id: '2',
      firstname: 'Mohamed',
      lastname: 'Alami',
      phone: '0662345678',
      email: 'mohamed.alami@email.com',
      gender: 'male',
      city: 'Rabat',
      province: 'Rabat-Salé-Kénitra',
      patientType: 'NEW_PATIENT',
      dateOfBirth: new Date('1990-07-22'),
      appointments: [],
      medicalFiles: [],
      factures: [],
      createdAt: new Date('2024-01-10'),
      updatedAt: new Date('2024-01-10'),
      historique: [],
      description: 'Nouveau patient, première consultation'
    },
    {
      id: '3',
      firstname: 'Fatima',
      lastname: 'Zahra',
      phone: '0663456789',
      email: 'fatima.zahra@email.com',
      gender: 'female',
      city: 'Marrakech',
      province: 'Marrakech-Safi',
      patientType: 'URGENCE_PATIENT',
      dateOfBirth: new Date('1978-11-08'),
      appointments: [],
      medicalFiles: [],
      factures: [],
      createdAt: new Date('2024-01-20'),
      updatedAt: new Date('2024-01-20'),
      historique: [],
      description: 'Urgence dentaire - douleur sévère'
    }
  ];

const filteredPatients = mockPatients.filter(patient => {
    const matchesSearch = 
      patient.firstname.toLowerCase().includes(searchTerm.toLowerCase()) ||
      patient.lastname.toLowerCase().includes(searchTerm.toLowerCase()) ||
      patient.phone.includes(searchTerm);

const matchesFilter = 
      filterType === 'all' ||
      (filterType === 'new' && patient.patientType === 'NEW_PATIENT') ||
      (filterType === 'old' && patient.patientType === 'OLD_PATIENT') ||
      (filterType === 'urgent' && patient.patientType === 'URGENCE_PATIENT');

return matchesSearch && matchesFilter;
  });

const getPatientTypeColor = (type: string) => {
    switch (type) {
      case 'NEW_PATIENT': return 'bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400';
      case 'OLD_PATIENT': return 'bg-blue-100 text-blue-800 dark:bg-blue-900/20 dark:text-blue-400';
      case 'URGENCE_PATIENT': return 'bg-red-100 text-red-800 dark:bg-red-900/20 dark:text-red-400';
      default: return 'bg-gray-100 text-gray-800 dark:bg-gray-900/20 dark:text-gray-400';
    }
  };

const getPatientTypeLabel = (type: string) => {
    switch (type) {
      case 'NEW_PATIENT': return 'Nouveau';
      case 'OLD_PATIENT': return 'Ancien';
      case 'URGENCE_PATIENT': return 'Urgence';
      default: return type;
    }
  };

<motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ delay: 0.1 }}
        className="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6"
      >
        <div className="flex flex-col md:flex-row md:items-center md:justify-between space-y-4 md:space-y-0 mb-6">
          <div className="relative flex-1 max-w-md">
            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400" />
            <input
              type="text"
              placeholder="Rechercher par nom, prénom ou téléphone..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="w-full pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
            />
          </div>
          
          <div className="flex items-center space-x-4">
            <div className="flex items-center space-x-2">
              <Filter className="w-5 h-5 text-gray-400" />
              <select
                value={filterType}
                onChange={(e) => setFilterType(e.target.value as any)}
                className="border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
              >
                <option value="all">Tous les patients</option>
                <option value="new">Nouveaux patients</option>
                <option value="old">Anciens patients</option>
                <option value="urgent">Patients urgents</option>
              </select>
            </div>
          </div>
        </div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {filteredPatients.map((patient, index) => (
            <motion.div
              key={patient.id}
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: index * 0.1 }}
              className="bg-gray-50 dark:bg-gray-700 rounded-lg p-6 hover:shadow-md transition-shadow"
            >
              <div className="flex items-start justify-between mb-4">
                <div className="flex items-center space-x-3">
                  <div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-600 rounded-full flex items-center justify-center">
                    <User className="w-6 h-6 text-white" />
                  </div>
                  <div>
                    <h3 className="font-semibold text-gray-900 dark:text-gray-100">
                      {patient.firstname} {patient.lastname}
                    </h3>
                    <span className={`inline-block px-2 py-1 rounded-full text-xs font-medium ${getPatientTypeColor(patient.patientType)}`}>
                      {getPatientTypeLabel(patient.patientType)}
                    </span>
                  </div>
                </div>
              </div>

<div className="space-y-2 mb-4">
                <div className="flex items-center space-x-2 text-sm text-gray-600 dark:text-gray-400">
                  <Phone className="w-4 h-4" />
                  <span>{patient.phone}</span>
                </div>
                {patient.email && (
                  <div className="flex items-center space-x-2 text-sm text-gray-600 dark:text-gray-400">
                    <Mail className="w-4 h-4" />
                    <span>{patient.email}</span>
                  </div>
                )}
                <div className="flex items-center space-x-2 text-sm text-gray-600 dark:text-gray-400">
                  <MapPin className="w-4 h-4" />
                  <span>{patient.city}</span>
                </div>
              </div>

{patient.description && (
                <p className="text-sm text-gray-600 dark:text-gray-400 mb-4 line-clamp-2">
                  {patient.description}
                </p>
              )}

<div className="flex items-center justify-between">
                <div className="flex items-center space-x-2">
                  <button className="p-2 text-blue-600 hover:bg-blue-100 dark:hover:bg-blue-900/20 rounded-lg transition-colors">
                    <Eye className="w-4 h-4" />
                  </button>
                  <button className="p-2 text-green-600 hover:bg-green-100 dark:hover:bg-green-900/20 rounded-lg transition-colors">
                    <Edit className="w-4 h-4" />
                  </button>
                  <button className="p-2 text-purple-600 hover:bg-purple-100 dark:hover:bg-purple-900/20 rounded-lg transition-colors">
                    <Calendar className="w-4 h-4" />
                  </button>
                </div>
                <span className="text-xs text-gray-500 dark:text-gray-400">
                  Créé le {patient.createdAt.toLocaleDateString('fr-FR')}
                </span>
              </div>
            </motion.div>
          ))}
        </div>

{filteredPatients.length === 0 && (
          <div className="text-center py-12">
            <User className="w-16 h-16 text-gray-400 mx-auto mb-4" />
            <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-2">Aucun patient trouvé</h3>
            <p className="text-gray-600 dark:text-gray-400">
              Essayez de modifier vos critères de recherche ou ajoutez un nouveau patient.
            </p>
          </div>
        )}
      </motion.div>
    </div>
  );
};

export default PatientList;
[V0_FILE]typescriptreact:file="src/components/Prescriptions/PrescriptionsPage.tsx"
import React, { useState } from 'react';
import { motion } from 'framer-motion';
import { Plus, Search, Filter, Pill, Calendar, User, Stethoscope, Clock, AlertTriangle, CheckCircle, XCircle, Eye, Edit, Printer as Print, Download, FileText } from 'lucide-react';
import { Prescription, PrescribedMedicine } from '../../types';
import { useAuth } from '../../contexts/AuthContext';

const PrescriptionsPage: React.FC = () => {
  const [searchTerm, setSearchTerm] = useState('');
  const [filterStatus, setFilterStatus] = useState<'all' | 'active' | 'completed' | 'cancelled'>('all');
  const [selectedPeriod, setSelectedPeriod] = useState('month');
  const { user } = useAuth();

// Mock prescriptions data
  const mockPrescriptions: Prescription[] = [
    {
      id: '1',
      doctor: {
        id: '1',
        firstname: 'Dr. Sarah',
        lastname: 'Benali',
        phone: '0661234567',
        email: 'sarah.benali@clinic.ma',
        gender: 'female',
        role: 'doctor',
        username: 'dr.benali',
        isActive: true,
        createdAt: new Date(),
        updatedAt: new Date(),
        specialization: 'Orthodontie',
        cabinetNumber: 'Cabinet 1',
        cabinet: {
          id: '1',
          name: 'Cabinet 1',
          number: '1',
          type: 'consultation',
          status: 'available',
          equipment: [],
          capacity: 2,
          floor: 1,
          createdAt: new Date(),
          updatedAt: new Date()
        },
        agenda: [],
        patients: [],
        medicalFiles: [],
        prescriptions: [],
        usedMedicines: [],
        messages: [],
        factures: [],
        statistics: [],
        historique: [],
        doctorRole: 'employee',
        workingHours: [],
        consultationFee: 3500,
        rating: 4.8,
        totalPatients: 156,
        totalConsultations: 234,
        access: {
          viewOwnPatients: true,
          viewOwnStats: true,
          accessMedicalModules: true,
          accessFinancialOwn: true,
          globalStats: false,
          adminPrivileges: false
        }
      },
      patient: {
        id: '1',
        firstname: 'Amina',
        lastname: 'Benali',
        phone: '0661234567',
        email: 'amina.benali@email.com',
        gender: 'female',
        city: 'Alger',
        province: 'Alger',
        patientType: 'OLD_PATIENT',
        dateOfBirth: new Date('1985-03-15'),
        appointments: [],
        medicalFiles: [],
        factures: [],
        createdAt: new Date(),
        updatedAt: new Date(),
        historique: [],
        allergies: ['Pénicilline'],
        chronicConditions: ['Hypertension'],
        totalVisits: 12,
        totalSpent: 45000
      },
      medicalFile: {
        id: '1',
        patient: {} as any,
        doctor: {} as any,
        date: new Date(),
        description: 'Consultation post-opératoire',
        diagnostics: ['Infection post-opératoire'],
        treatments: [],
        prescriptions: [],
        labResults: [],
        radiologyResults: [],
        photos: [],
        referrals: [],
        updatedBy: user!,
        medicalConditions: [],
        notes: [],
        createdAt: new Date(),
        updatedAt: new Date()
      },
      medicines: [
        {
          medicine: {
            id: '1',
            name: 'Amoxicilline 500mg',
            barcode: '1234567890123',
            quantity: 50,
            unit: 'comprimés',
            expiryDate: new Date('2025-08-15'),
            provider: 'Antibio Pharma',
            price: 45.50,
            minStockLevel: 30,
            category: 'antibiotic',
            description: 'Antibiotique à large spectre',
            sideEffects: ['Troubles digestifs', 'Réactions allergiques'],
            dosageInstructions: '500mg 3 fois par jour pendant 7 jours',
            createdAt: new Date(),
            updatedAt: new Date()
          },
          dosage: '500mg',
          duration: '7 jours',
          frequency: '3 fois par jour',
          quantity: 21,
          notes: 'À prendre pendant les repas',
          cost: 956.50
        },
        {
          medicine: {
            id: '2',
            name: 'Ibuprofène 400mg',
            barcode: '2345678901234',
            quantity: 8,
            unit: 'boîtes',
            expiryDate: new Date('2024-12-31'),
            provider: 'Pain Relief Co.',
            price: 320.00,
            minStockLevel: 15,
            category: 'painkiller',
            description: 'Anti-inflammatoire non stéroïdien',
            sideEffects: ['Troubles gastriques', 'Maux de tête'],
            dosageInstructions: '400mg toutes les 6-8 heures si nécessaire',
            createdAt: new Date(),
            updatedAt: new Date()
          },
          dosage: '400mg',
          duration: '5 jours',
          frequency: 'Toutes les 8h si douleur',
          quantity: 15,
          notes: 'Arrêter si troubles gastriques',
          cost: 4800.00
        }
      ],
      notes: 'Prescription post-opératoire. Surveiller les signes d\'infection. Retour si pas d\'amélioration sous 48h.',
      status: 'active',
      totalCost: 5756.50,
      createdAt: new Date('2024-01-20'),
      updatedAt: new Date('2024-01-20')
    },
    {
      id: '2',
      doctor: {
        id: '1',
        firstname: 'Dr. Sarah',
        lastname: 'Benali',
        phone: '0661234567',
        email: 'sarah.benali@clinic.ma',
        gender: 'female',
        role: 'doctor',
        username: 'dr.benali',
        isActive: true,
        createdAt: new Date(),
        updatedAt: new Date(),
        specialization: 'Orthodontie',
        cabinetNumber: 'Cabinet 1',
        cabinet: {
          id: '1',
          name: 'Cabinet 1',
          number: '1',
          type: 'consultation',
          status: 'available',
          equipment: [],
          capacity: 2,
          floor: 1,
          createdAt: new Date(),
          updatedAt: new Date()
        },
        agenda: [],
        patients: [],
        medicalFiles: [],
        prescriptions: [],
        usedMedicines: [],
        messages: [],
        factures: [],
        statistics: [],
        historique: [],
        doctorRole: 'employee',
        workingHours: [],
        consultationFee: 3500,
        rating: 4.8,
        totalPatients: 156,
        totalConsultations: 234,
        access: {
          viewOwnPatients: true,
          viewOwnStats: true,
          accessMedicalModules: true,
          accessFinancialOwn: true,
          globalStats: false,
          adminPrivileges: false
        }
      },
      patient: {
        id: '2',
        firstname: 'Mohamed',
        lastname: 'Alami',
        phone: '0662345678',
        email: 'mohamed.alami@email.com',
        gender: 'male',
        city: 'Oran',
        province: 'Oran',
        patientType: 'NEW_PATIENT',
        dateOfBirth: new Date('1990-07-22'),
        appointments: [],
        medicalFiles: [],
        factures: [],
        createdAt: new Date(),
        updatedAt: new Date(),
        historique: [],
        allergies: [],
        chronicConditions: [],
        totalVisits: 3,
        totalSpent: 12000
      },
      medicalFile: {
        id: '2',
        patient: {} as any,
        doctor: {} as any,
        date: new Date(),
        description: 'Consultation préventive',
        diagnostics: ['Gingivite légère'],
        treatments: [],
        prescriptions: [],
        labResults: [],
        radiologyResults: [],
        photos: [],
        referrals: [],
        updatedBy: user!,
        medicalConditions: [],
        notes: [],
        createdAt: new Date(),
        updatedAt: new Date()
      },
      medicines: [
        {
          medicine: {
            id: '3',
            name: 'Bain de bouche antiseptique',
            barcode: '3456789012345',
            quantity: 15,
            unit: 'flacons',
            expiryDate: new Date('2025-06-30'),
            provider: 'Oral Care Plus',
            price: 850.00,
            minStockLevel: 10,
            category: 'antiseptic',
            description: 'Bain de bouche à la chlorhexidine',
            createdAt: new Date(),
            updatedAt: new Date()
          },
          dosage: '15ml',
          duration: '14 jours',
          frequency: '2 fois par jour',
          quantity: 1,
          notes: 'Après brossage, ne pas rincer à l\'eau',
          cost: 850.00
        }
      ],
      notes: 'Prescription préventive pour améliorer l\'hygiène bucco-dentaire.',
      status: 'completed',
      totalCost: 850.00,
      createdAt: new Date('2024-01-15'),
      updatedAt: new Date('2024-01-29')
    }
  ];

const filteredPrescriptions = mockPrescriptions.filter(prescription => {
    const matchesSearch = 
      prescription.patient.firstname.toLowerCase().includes(searchTerm.toLowerCase()) ||
      prescription.patient.lastname.toLowerCase().includes(searchTerm.toLowerCase()) ||
      prescription.medicines.some(m => m.medicine.name.toLowerCase().includes(searchTerm.toLowerCase()));

const matchesStatus = filterStatus === 'all' || prescription.status === filterStatus;

return matchesSearch && matchesStatus;
  });

const getStatusColor = (status: string) => {
    switch (status) {
      case 'active': return 'text-green-600 bg-green-100 dark:bg-green-900/20 dark:text-green-400';
      case 'completed': return 'text-blue-600 bg-blue-100 dark:bg-blue-900/20 dark:text-blue-400';
      case 'cancelled': return 'text-red-600 bg-red-100 dark:bg-red-900/20 dark:text-red-400';
      default: return 'text-gray-600 bg-gray-100 dark:bg-gray-900/20 dark:text-gray-400';
    }
  };

const getStatusIcon = (status: string) => {
    switch (status) {
      case 'active': return <CheckCircle className="w-4 h-4" />;
      case 'completed': return <CheckCircle className="w-4 h-4" />;
      case 'cancelled': return <XCircle className="w-4 h-4" />;
      default: return <Clock className="w-4 h-4" />;
    }
  };

const getStatusText = (status: string) => {
    switch (status) {
      case 'active': return 'Active';
      case 'completed': return 'Terminée';
      case 'cancelled': return 'Annulée';
      default: return status;
    }
  };

const getCategoryColor = (category: string) => {
    switch (category) {
      case 'antibiotic': return 'bg-red-100 text-red-800 dark:bg-red-900/20 dark:text-red-400';
      case 'painkiller': return 'bg-orange-100 text-orange-800 dark:bg-orange-900/20 dark:text-orange-400';
      case 'antiseptic': return 'bg-blue-100 text-blue-800 dark:bg-blue-900/20 dark:text-blue-400';
      case 'anesthetic': return 'bg-purple-100 text-purple-800 dark:bg-purple-900/20 dark:text-purple-400';
      default: return 'bg-gray-100 text-gray-800 dark:bg-gray-900/20 dark:text-gray-400';
    }
  };

// Statistics
  const totalPrescriptions = filteredPrescriptions.length;
  const activePrescriptions = filteredPrescriptions.filter(p => p.status === 'active').length;
  const totalValue = filteredPrescriptions.reduce((sum, p) => sum + p.totalCost, 0);
  const averageValue = totalValue / totalPrescriptions || 0;

{/* Statistics Cards */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.1 }}
          className="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6"
        >
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-gray-600 dark:text-gray-400 mb-1">Total Prescriptions</p>
              <p className="text-2xl font-bold text-gray-900 dark:text-gray-100">{totalPrescriptions}</p>
            </div>
            <div className="w-12 h-12 bg-blue-100 dark:bg-blue-900/20 rounded-lg flex items-center justify-center">
              <FileText className="w-6 h-6 text-blue-600 dark:text-blue-400" />
            </div>
          </div>
        </motion.div>

<motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.2 }}
          className="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6"
        >
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-gray-600 dark:text-gray-400 mb-1">Prescriptions Actives</p>
              <p className="text-2xl font-bold text-gray-900 dark:text-gray-100">{activePrescriptions}</p>
            </div>
            <div className="w-12 h-12 bg-green-100 dark:bg-green-900/20 rounded-lg flex items-center justify-center">
              <CheckCircle className="w-6 h-6 text-green-600 dark:text-green-400" />
            </div>
          </div>
        </motion.div>

<motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.3 }}
          className="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6"
        >
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-gray-600 dark:text-gray-400 mb-1">Valeur Totale</p>
              <p className="text-2xl font-bold text-gray-900 dark:text-gray-100">{totalValue.toLocaleString()} DA</p>
            </div>
            <div className="w-12 h-12 bg-purple-100 dark:bg-purple-900/20 rounded-lg flex items-center justify-center">
              <Pill className="w-6 h-6 text-purple-600 dark:text-purple-400" />
            </div>
          </div>
        </motion.div>

<motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.4 }}
          className="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6"
        >
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-gray-600 dark:text-gray-400 mb-1">Valeur Moyenne</p>
              <p className="text-2xl font-bold text-gray-900 dark:text-gray-100">{Math.round(averageValue).toLocaleString()} DA</p>
            </div>
            <div className="w-12 h-12 bg-orange-100 dark:bg-orange-900/20 rounded-lg flex items-center justify-center">
              <Calendar className="w-6 h-6 text-orange-600 dark:text-orange-400" />
            </div>
          </div>
        </motion.div>
      </div>

{/* Filters and Search */}
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ delay: 0.5 }}
        className="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6"
      >
        <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between space-y-4 lg:space-y-0 mb-6">
          <div className="relative flex-1 max-w-md">
            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400" />
            <input
              type="text"
              placeholder="Rechercher par patient ou médicament..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="w-full pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
            />
          </div>
          
          <div className="flex items-center space-x-4">
            <select
              value={filterStatus}
              onChange={(e) => setFilterStatus(e.target.value as any)}
              className="border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
            >
              <option value="all">Tous les statuts</option>
              <option value="active">Actives</option>
              <option value="completed">Terminées</option>
              <option value="cancelled">Annulées</option>
            </select>

{/* Prescriptions List */}
        <div className="space-y-6">
          {filteredPrescriptions.map((prescription, index) => (
            <motion.div
              key={prescription.id}
              initial={{ opacity: 0, x: -20 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ delay: index * 0.1 }}
              className="bg-gray-50 dark:bg-gray-700 rounded-lg p-6 hover:shadow-md transition-shadow"
            >
              <div className="flex items-start justify-between mb-4">
                <div className="flex items-start space-x-4">
                  <div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-600 rounded-full flex items-center justify-center">
                    <Pill className="w-6 h-6 text-white" />
                  </div>
                  
                  <div>
                    <div className="flex items-center space-x-3 mb-2">
                      <h3 className="font-semibold text-gray-900 dark:text-gray-100">
                        {prescription.patient.firstname} {prescription.patient.lastname}
                      </h3>
                      <span className={`inline-flex items-center space-x-1 px-3 py-1 rounded-full text-xs font-medium ${getStatusColor(prescription.status)}`}>
                        {getStatusIcon(prescription.status)}
                        <span>{getStatusText(prescription.status)}</span>
                      </span>
                    </div>
                    
                    <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-3">
                      <div className="flex items-center space-x-2">
                        <Calendar className="w-4 h-4 text-gray-400" />
                        <span className="text-sm text-gray-600 dark:text-gray-400">
                          {prescription.createdAt.toLocaleDateString('fr-FR')}
                        </span>
                      </div>
                      <div className="flex items-center space-x-2">
                        <Stethoscope className="w-4 h-4 text-gray-400" />
                        <span className="text-sm text-gray-600 dark:text-gray-400">
                          {prescription.doctor.firstname} {prescription.doctor.lastname}
                        </span>
                      </div>
                      <div className="flex items-center space-x-2">
                        <span className="text-sm font-medium text-gray-900 dark:text-gray-100">
                          Total: {prescription.totalCost.toLocaleString()} DA
                        </span>
                      </div>
                    </div>
                  </div>
                </div>

{/* Medicines List */}
              <div className="bg-white dark:bg-gray-600 rounded-lg p-4 mb-4">
                <h4 className="font-medium text-gray-900 dark:text-gray-100 mb-3">Médicaments prescrits:</h4>
                <div className="space-y-3">
                  {prescription.medicines.map((prescribedMed, idx) => (
                    <div key={idx} className="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-700 rounded-lg">
                      <div className="flex-1">
                        <div className="flex items-center space-x-3 mb-2">
                          <h5 className="font-medium text-gray-900 dark:text-gray-100">
                            {prescribedMed.medicine.name}
                          </h5>
                          <span className={`px-2 py-1 rounded-full text-xs font-medium ${getCategoryColor(prescribedMed.medicine.category)}`}>
                            {prescribedMed.medicine.category}
                          </span>
                        </div>
                        
                        <div className="grid grid-cols-1 md:grid-cols-4 gap-3 text-sm">
                          <div>
                            <span className="text-gray-600 dark:text-gray-400">Dosage:</span>
                            <span className="ml-1 font-medium text-gray-900 dark:text-gray-100">
                              {prescribedMed.dosage}
                            </span>
                          </div>
                          <div>
                            <span className="text-gray-600 dark:text-gray-400">Fréquence:</span>
                            <span className="ml-1 font-medium text-gray-900 dark:text-gray-100">
                              {prescribedMed.frequency}
                            </span>
                          </div>
                          <div>
                            <span className="text-gray-600 dark:text-gray-400">Durée:</span>
                            <span className="ml-1 font-medium text-gray-900 dark:text-gray-100">
                              {prescribedMed.duration}
                            </span>
                          </div>
                          <div>
                            <span className="text-gray-600 dark:text-gray-400">Quantité:</span>
                            <span className="ml-1 font-medium text-gray-900 dark:text-gray-100">
                              {prescribedMed.quantity}
                            </span>
                          </div>
                        </div>
                        
                        {prescribedMed.notes && (
                          <div className="mt-2">
                            <span className="text-gray-600 dark:text-gray-400 text-sm">Notes: </span>
                            <span className="text-sm text-gray-900 dark:text-gray-100">{prescribedMed.notes}</span>
                          </div>
                        )}

{/* Side Effects Warning */}
                        {prescribedMed.medicine.sideEffects && prescribedMed.medicine.sideEffects.length > 0 && (
                          <div className="mt-2 p-2 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded">
                            <div className="flex items-center space-x-2">
                              <AlertTriangle className="w-4 h-4 text-yellow-600 dark:text-yellow-400" />
                              <span className="text-sm font-medium text-yellow-800 dark:text-yellow-300">Effets secondaires possibles:</span>
                            </div>
                            <p className="text-sm text-yellow-700 dark:text-yellow-400 mt-1">
                              {prescribedMed.medicine.sideEffects.join(', ')}
                            </p>
                          </div>
                        )}
                      </div>
                      
                      <div className="text-right ml-4">
                        <span className="text-lg font-semibold text-gray-900 dark:text-gray-100">
                          {prescribedMed.cost.toLocaleString()} DA
                        </span>
                      </div>
                    </div>
                  ))}
                </div>
              </div>

{/* Prescription Notes */}
              {prescription.notes && (
                <div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
                  <h4 className="font-medium text-blue-900 dark:text-blue-300 mb-2">Instructions du médecin:</h4>
                  <p className="text-sm text-blue-800 dark:text-blue-400">{prescription.notes}</p>
                </div>
              )}

{/* Patient Allergies Warning */}
              {prescription.patient.allergies.length > 0 && (
                <div className="mt-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4">
                  <div className="flex items-center space-x-2 mb-2">
                    <AlertTriangle className="w-5 h-5 text-red-600 dark:text-red-400" />
                    <span className="font-medium text-red-800 dark:text-red-300">Allergies du patient:</span>
                  </div>
                  <p className="text-sm text-red-700 dark:text-red-400">
                    {prescription.patient.allergies.join(', ')}
                  </p>
                </div>
              )}
            </motion.div>
          ))}
        </div>

{filteredPrescriptions.length === 0 && (
          <div className="text-center py-12">
            <Pill className="w-16 h-16 text-gray-400 mx-auto mb-4" />
            <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-2">Aucune prescription trouvée</h3>
            <p className="text-gray-600 dark:text-gray-400">
              Créez une nouvelle prescription ou modifiez vos critères de recherche.
            </p>
          </div>
        )}
      </motion.div>
    </div>
  );
};

export default PrescriptionsPage;
[V0_FILE]typescriptreact:file="src/components/Radiology/RadiologyPage.tsx"
"use client"

import type React from "react"
import { useState } from "react"
import { motion } from "framer-motion"
import {
  Plus,
  Search,
  Camera,
  Calendar,
  User,
  Stethoscope,
  Clock,
  CheckCircle,
  XCircle,
  Eye,
  Download,
  Upload,
  FileText,
  Monitor,
} from "lucide-react"
import type { RadiologyResult } from "../../types"
import { useAuth } from "../../contexts/AuthContext"

const RadiologyPage: React.FC = () => {
  const [searchTerm, setSearchTerm] = useState("")
  const [filterStatus, setFilterStatus] = useState<"all" | "pending" | "completed" | "reviewed">("all")
  const [filterType, setFilterType] = useState<"all" | "panoramic" | "lateral" | "3D" | "bitewing" | "periapical">(
    "all",
  )
  const { user } = useAuth()

// Mock radiology results data
  const mockRadiologyResults: RadiologyResult[] = [
    {
      id: "1",
      patient: {
        id: "1",
        firstname: "Amina",
        lastname: "Benali",
        phone: "0661234567",
        email: "amina.benali@email.com",
        gender: "female",
        city: "Alger",
        province: "Alger",
        patientType: "OLD_PATIENT",
        dateOfBirth: new Date("1985-03-15"),
        appointments: [],
        medicalFiles: [],
        factures: [],
        createdAt: new Date(),
        updatedAt: new Date(),
        historique: [],
        allergies: ["Pénicilline"],
        chronicConditions: ["Hypertension"],
        totalVisits: 12,
        totalSpent: 45000,
      },
      medicalFile: {
        id: "1",
        patient: {} as any,
        doctor: {} as any,
        date: new Date(),
        description: "Évaluation pré-implantaire",
        diagnostics: ["Évaluation osseuse"],
        treatments: [],
        prescriptions: [],
        labResults: [],
        radiologyResults: [],
        photos: [],
        referrals: [],
        updatedBy: user!,
        medicalConditions: [],
        notes: [],
        createdAt: new Date(),
        updatedAt: new Date(),
      },
      requestedBy: {
        id: "1",
        firstname: "Dr. Sarah",
        lastname: "Benali",
        phone: "0661234567",
        email: "sarah.benali@clinic.ma",
        gender: "female",
        role: "doctor",
        username: "dr.benali",
        isActive: true,
        createdAt: new Date(),
        updatedAt: new Date(),
        specialization: "Orthodontie",
        cabinetNumber: "Cabinet 1",
        cabinet: {
          id: "1",
          name: "Cabinet 1",
          number: "1",
          type: "consultation",
          status: "available",
          equipment: [],
          capacity: 2,
          floor: 1,
          createdAt: new Date(),
          updatedAt: new Date(),
        },
        agenda: [],
        patients: [],
        medicalFiles: [],
        prescriptions: [],
        usedMedicines: [],
        messages: [],
        factures: [],
        statistics: [],
        historique: [],
        doctorRole: "employee",
        workingHours: [],
        consultationFee: 3500,
        rating: 4.8,
        totalPatients: 156,
        totalConsultations: 234,
        access: {
          viewOwnPatients: true,
          viewOwnStats: true,
          accessMedicalModules: true,
          accessFinancialOwn: true,
          globalStats: false,
          adminPrivileges: false,
        },
      },
      performedBy: user!,
      imageUrl: "/radiology/panoramic-001.jpg",
      type: "panoramic",
      findings:
        "Densité osseuse satisfaisante pour implant. Présence de kyste apical sur 36. Structures anatomiques normales.",
      recommendations: "Traitement endodontique recommandé sur 36 avant pose d'implant. Contrôle dans 3 mois.",
      status: "completed",
      notes: "Image de bonne qualité. Patient coopératif.",
      uploadedBy: user!,
      reviewedBy: {
        id: "1",
        firstname: "Dr. Sarah",
        lastname: "Benali",
        phone: "0661234567",
        email: "sarah.benali@clinic.ma",
        gender: "female",
        role: "doctor",
        username: "dr.benali",
        isActive: true,
        createdAt: new Date(),
        updatedAt: new Date(),
        specialization: "Orthodontie",
        cabinetNumber: "Cabinet 1",
        cabinet: {
          id: "1",
          name: "Cabinet 1",
          number: "1",
          type: "consultation",
          status: "available",
          equipment: [],
          capacity: 2,
          floor: 1,
          createdAt: new Date(),
          updatedAt: new Date(),
        },
        agenda: [],
        patients: [],
        medicalFiles: [],
        prescriptions: [],
        usedMedicines: [],
        messages: [],
        factures: [],
        statistics: [],
        historique: [],
        doctorRole: "employee",
        workingHours: [],
        consultationFee: 3500,
        rating: 4.8,
        totalPatients: 156,
        totalConsultations: 234,
        access: {
          viewOwnPatients: true,
          viewOwnStats: true,
          accessMedicalModules: true,
          accessFinancialOwn: true,
          globalStats: false,
          adminPrivileges: false,
        },
      },
      createdAt: new Date("2024-01-20"),
      completedAt: new Date("2024-01-20"),
    },
    {
      id: "2",
      patient: {
        id: "2",
        firstname: "Mohamed",
        lastname: "Alami",
        phone: "0662345678",
        email: "mohamed.alami@email.com",
        gender: "male",
        city: "Oran",
        province: "Oran",
        patientType: "NEW_PATIENT",
        dateOfBirth: new Date("1990-07-22"),
        appointments: [],
        medicalFiles: [],
        factures: [],
        createdAt: new Date(),
        updatedAt: new Date(),
        historique: [],
        allergies: [],
        chronicConditions: [],
        totalVisits: 3,
        totalSpent: 12000,
      },
      medicalFile: {
        id: "2",
        patient: {} as any,
        doctor: {} as any,
        date: new Date(),
        description: "Évaluation orthodontique",
        diagnostics: ["Malocclusion"],
        treatments: [],
        prescriptions: [],
        labResults: [],
        radiologyResults: [],
        photos: [],
        referrals: [],
        updatedBy: user!,
        medicalConditions: [],
        notes: [],
        createdAt: new Date(),
        updatedAt: new Date(),
      },
      requestedBy: {
        id: "1",
        firstname: "Dr. Sarah",
        lastname: "Benali",
        phone: "0661234567",
        email: "sarah.benali@clinic.ma",
        gender: "female",
        role: "doctor",
        username: "dr.benali",
        isActive: true,
        createdAt: new Date(),
        updatedAt: new Date(),
        specialization: "Orthodontie",
        cabinetNumber: "Cabinet 1",
        cabinet: {
          id: "1",
          name: "Cabinet 1",
          number: "1",
          type: "consultation",
          status: "available",
          equipment: [],
          capacity: 2,
          floor: 1,
          createdAt: new Date(),
          updatedAt: new Date(),
        },
        agenda: [],
        patients: [],
        medicalFiles: [],
        prescriptions: [],
        usedMedicines: [],
        messages: [],
        factures: [],
        statistics: [],
        historique: [],
        doctorRole: "employee",
        workingHours: [],
        consultationFee: 3500,
        rating: 4.8,
        totalPatients: 156,
        totalConsultations: 234,
        access: {
          viewOwnPatients: true,
          viewOwnStats: true,
          accessMedicalModules: true,
          accessFinancialOwn: true,
          globalStats: false,
          adminPrivileges: false,
        },
      },
      performedBy: user!,
      imageUrl: "/radiology/lateral-002.jpg",
      type: "lateral",
      findings: "Profil convexe. Rétrognathie mandibulaire modérée. Incisives supérieures en protrusion.",
      recommendations: "Traitement orthodontique recommandé. Évaluation chirurgicale si nécessaire.",
      status: "pending",
      notes: "En attente de validation par orthodontiste.",
      uploadedBy: user!,
      createdAt: new Date("2024-01-18"),
      completedAt: new Date("2024-01-19"),
    },
  ]

const filteredResults = mockRadiologyResults.filter((result) => {
    const matchesSearch =
      result.patient.firstname.toLowerCase().includes(searchTerm.toLowerCase()) ||
      result.patient.lastname.toLowerCase().includes(searchTerm.toLowerCase()) ||
      result.findings.toLowerCase().includes(searchTerm.toLowerCase())

const matchesStatus = filterStatus === "all" || result.status === filterStatus
    const matchesType = filterType === "all" || result.type === filterType

return matchesSearch && matchesStatus && matchesType
  })

const getStatusColor = (status: string) => {
    switch (status) {
      case "pending":
        return "text-yellow-600 bg-yellow-100 dark:bg-yellow-900/20 dark:text-yellow-400"
      case "completed":
        return "text-green-600 bg-green-100 dark:bg-green-900/20 dark:text-green-400"
      case "reviewed":
        return "text-purple-600 bg-purple-100 dark:bg-purple-900/20 dark:text-purple-400"
      default:
        return "text-gray-600 bg-gray-100 dark:bg-gray-900/20 dark:text-gray-400"
    }
  }

const getStatusIcon = (status: string) => {
    switch (status) {
      case "pending":
        return <Clock className="w-4 h-4" />
      case "completed":
        return <CheckCircle className="w-4 h-4" />
      case "reviewed":
        return <Eye className="w-4 h-4" />
      default:
        return <XCircle className="w-4 h-4" />
    }
  }

const getStatusText = (status: string) => {
    switch (status) {
      case "pending":
        return "En attente"
      case "completed":
        return "Terminé"
      case "reviewed":
        return "Validé"
      default:
        return status
    }
  }

const getTypeColor = (type: string) => {
    switch (type) {
      case "panoramic":
        return "bg-blue-100 text-blue-800 dark:bg-blue-900/20 dark:text-blue-400"
      case "lateral":
        return "bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400"
      case "3D":
        return "bg-purple-100 text-purple-800 dark:bg-purple-900/20 dark:text-purple-400"
      case "bitewing":
        return "bg-orange-100 text-orange-800 dark:bg-orange-900/20 dark:text-orange-400"
      case "periapical":
        return "bg-red-100 text-red-800 dark:bg-red-900/20 dark:text-red-400"
      default:
        return "bg-gray-100 text-gray-800 dark:bg-gray-900/20 dark:text-gray-400"
    }
  }

const getTypeText = (type: string) => {
    switch (type) {
      case "panoramic":
        return "Panoramique"
      case "lateral":
        return "Latérale"
      case "3D":
        return "Scanner 3D"
      case "bitewing":
        return "Rétro-coronaire"
      case "periapical":
        return "Péri-apicale"
      default:
        return type
    }
  }

// Statistics
  const totalResults = filteredResults.length
  const pendingResults = filteredResults.filter((r) => r.status === "pending").length
  const completedResults = filteredResults.filter((r) => r.status === "completed").length
  const reviewedResults = filteredResults.filter((r) => r.status === "reviewed").length

{/* Statistics Cards */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.1 }}
          className="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6"
        >
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-gray-600 dark:text-gray-400 mb-1">Total Examens</p>
              <p className="text-2xl font-bold text-gray-900 dark:text-gray-100">{totalResults}</p>
            </div>
            <div className="w-12 h-12 bg-blue-100 dark:bg-blue-900/20 rounded-lg flex items-center justify-center">
              <Camera className="w-6 h-6 text-blue-600 dark:text-blue-400" />
            </div>
          </div>
        </motion.div>

<motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.2 }}
          className="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6"
        >
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-gray-600 dark:text-gray-400 mb-1">En Attente</p>
              <p className="text-2xl font-bold text-gray-900 dark:text-gray-100">{pendingResults}</p>
            </div>
            <div className="w-12 h-12 bg-yellow-100 dark:bg-yellow-900/20 rounded-lg flex items-center justify-center">
              <Clock className="w-6 h-6 text-yellow-600 dark:text-yellow-400" />
            </div>
          </div>
        </motion.div>

<motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.3 }}
          className="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6"
        >
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-gray-600 dark:text-gray-400 mb-1">Terminés</p>
              <p className="text-2xl font-bold text-gray-900 dark:text-gray-100">{completedResults}</p>
            </div>
            <div className="w-12 h-12 bg-green-100 dark:bg-green-900/20 rounded-lg flex items-center justify-center">
              <CheckCircle className="w-6 h-6 text-green-600 dark:text-green-400" />
            </div>
          </div>
        </motion.div>

<motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.4 }}
          className="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6"
        >
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-gray-600 dark:text-gray-400 mb-1">Validés</p>
              <p className="text-2xl font-bold text-gray-900 dark:text-gray-100">{reviewedResults}</p>
            </div>
            <div className="w-12 h-12 bg-purple-100 dark:bg-purple-900/20 rounded-lg flex items-center justify-center">
              <Eye className="w-6 h-6 text-purple-600 dark:text-purple-400" />
            </div>
          </div>
        </motion.div>
      </div>

<div className="flex items-center space-x-4">
            <select
              value={filterStatus}
              onChange={(e) => setFilterStatus(e.target.value as any)}
              className="border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
            >
              <option value="all">Tous les statuts</option>
              <option value="pending">En attente</option>
              <option value="completed">Terminés</option>
              <option value="reviewed">Validés</option>
            </select>

<select
              value={filterType}
              onChange={(e) => setFilterType(e.target.value as any)}
              className="border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
            >
              <option value="all">Tous les types</option>
              <option value="panoramic">Panoramique</option>
              <option value="lateral">Latérale</option>
              <option value="3D">Scanner 3D</option>
              <option value="bitewing">Rétro-coronaire</option>
              <option value="periapical">Péri-apicale</option>
            </select>

{/* Radiology Results List */}
        <div className="space-y-6">
          {filteredResults.map((result, index) => (
            <motion.div
              key={result.id}
              initial={{ opacity: 0, x: -20 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ delay: index * 0.1 }}
              className="bg-gray-50 dark:bg-gray-700 rounded-lg p-6 hover:shadow-md transition-shadow"
            >
              <div className="flex items-start justify-between mb-4">
                <div className="flex items-start space-x-4">
                  <div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-600 rounded-full flex items-center justify-center">
                    <Camera className="w-6 h-6 text-white" />
                  </div>

<div>
                    <div className="flex items-center space-x-3 mb-2">
                      <h3 className="font-semibold text-gray-900 dark:text-gray-100">
                        {result.patient.firstname} {result.patient.lastname}
                      </h3>
                      <span
                        className={`inline-flex items-center space-x-1 px-3 py-1 rounded-full text-xs font-medium ${getStatusColor(result.status)}`}
                      >
                        {getStatusIcon(result.status)}
                        <span>{getStatusText(result.status)}</span>
                      </span>
                      <span
                        className={`inline-block px-2 py-1 rounded-full text-xs font-medium ${getTypeColor(result.type)}`}
                      >
                        {getTypeText(result.type)}
                      </span>
                    </div>

<div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-3">
                      <div className="flex items-center space-x-2">
                        <Calendar className="w-4 h-4 text-gray-400" />
                        <span className="text-sm text-gray-600 dark:text-gray-400">
                          {result.createdAt.toLocaleDateString("fr-FR")}
                        </span>
                      </div>
                      <div className="flex items-center space-x-2">
                        <Stethoscope className="w-4 h-4 text-gray-400" />
                        <span className="text-sm text-gray-600 dark:text-gray-400">
                          {result.requestedBy.firstname} {result.requestedBy.lastname}
                        </span>
                      </div>
                      <div className="flex items-center space-x-2">
                        <User className="w-4 h-4 text-gray-400" />
                        <span className="text-sm text-gray-600 dark:text-gray-400">
                          {result.performedBy.firstname} {result.performedBy.lastname}
                        </span>
                      </div>
                      {result.completedAt && (
                        <div className="flex items-center space-x-2">
                          <Clock className="w-4 h-4 text-gray-400" />
                          <span className="text-sm text-gray-600 dark:text-gray-400">
                            Terminé le {result.completedAt.toLocaleDateString("fr-FR")}
                          </span>
                        </div>
                      )}
                    </div>
                  </div>
                </div>

{/* Image Preview */}
              <div className="bg-white dark:bg-gray-600 rounded-lg p-4 mb-4">
                <div className="flex items-center justify-between mb-3">
                  <h4 className="font-medium text-gray-900 dark:text-gray-100 flex items-center">
                    <Monitor className="w-4 h-4 mr-2 text-blue-500" />
                    Image Radiologique
                  </h4>
                  <span className="text-xs text-gray-500 dark:text-gray-400">{result.imageUrl}</span>
                </div>
                <div className="bg-gray-100 dark:bg-gray-700 rounded-lg h-48 flex items-center justify-center">
                  <div className="text-center">
                    <Camera className="w-12 h-12 text-gray-400 mx-auto mb-2" />
                    <p className="text-sm text-gray-500 dark:text-gray-400">Aperçu de l'image</p>
                    <p className="text-xs text-gray-400 dark:text-gray-500">{getTypeText(result.type)}</p>
                  </div>
                </div>
              </div>

{/* Findings */}
              <div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4 mb-4">
                <h4 className="font-medium text-blue-900 dark:text-blue-300 mb-2">Observations:</h4>
                <p className="text-sm text-blue-800 dark:text-blue-400">{result.findings}</p>
              </div>

{/* Recommendations */}
              {result.recommendations && (
                <div className="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg p-4 mb-4">
                  <h4 className="font-medium text-green-900 dark:text-green-300 mb-2">Recommandations:</h4>
                  <p className="text-sm text-green-800 dark:text-green-400">{result.recommendations}</p>
                </div>
              )}

{/* Notes */}
              {result.notes && (
                <div className="bg-gray-100 dark:bg-gray-600 rounded-lg p-3 mb-4">
                  <h4 className="font-medium text-gray-900 dark:text-gray-100 mb-1">Notes techniques:</h4>
                  <p className="text-sm text-gray-600 dark:text-gray-400">{result.notes}</p>
                </div>
              )}

{/* Review Information */}
              {result.reviewedBy && (
                <div className="flex items-center justify-between text-sm text-gray-600 dark:text-gray-400">
                  <span>
                    Validé par: {result.reviewedBy.firstname} {result.reviewedBy.lastname}
                  </span>
                  <span>
                    Réalisé par: {result.performedBy.firstname} {result.performedBy.lastname}
                  </span>
                </div>
              )}
            </motion.div>
          ))}
        </div>

{filteredResults.length === 0 && (
          <div className="text-center py-12">
            <Camera className="w-16 h-16 text-gray-400 mx-auto mb-4" />
            <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-2">Aucun examen trouvé</h3>
            <p className="text-gray-600 dark:text-gray-400">
              Créez un nouvel examen radiologique ou modifiez vos critères de recherche.
            </p>
          </div>
        )}
      </motion.div>
    </div>
  )
}

export default RadiologyPage
[V0_FILE]typescriptreact:file="src/components/Statistics/StatisticsPage.tsx"
import React, { useState } from 'react';
import { motion } from 'framer-motion';
import { 
  BarChart, 
  Bar, 
  XAxis, 
  YAxis, 
  CartesianGrid, 
  Tooltip, 
  ResponsiveContainer,
  PieChart,
  Pie,
  Cell,
  LineChart,
  Line,
  AreaChart,
  Area
} from 'recharts';
import { 
  TrendingUp, 
  Users, 
  DollarSign, 
  Calendar,
  Download,
  Filter,
  Clock,
  Star,
  MapPin,
  Activity
} from 'lucide-react';

const StatisticsPage: React.FC = () => {
  const [selectedPeriod, setSelectedPeriod] = useState('month');
  const [selectedMetric, setSelectedMetric] = useState('revenue');

// Mock data for charts with Algerian Dinars
  const monthlyData = [
    { name: 'Jan', patients: 65, revenue: 1450000, appointments: 78, satisfaction: 4.2 },
    { name: 'Fév', patients: 78, revenue: 1720000, appointments: 89, satisfaction: 4.3 },
    { name: 'Mar', patients: 90, revenue: 2010000, appointments: 102, satisfaction: 4.5 },
    { name: 'Avr', patients: 81, revenue: 1890000, appointments: 95, satisfaction: 4.4 },
    { name: 'Mai', patients: 95, revenue: 2250000, appointments: 108, satisfaction: 4.6 },
    { name: 'Jun', patients: 88, revenue: 2080000, appointments: 98, satisfaction: 4.5 },
  ];

const patientTypeData = [
    { name: 'Nouveaux', value: 35, color: '#10B981', count: 847 },
    { name: 'Anciens', value: 55, color: '#3B82F6', count: 1334 },
    { name: 'Urgences', value: 10, color: '#EF4444', count: 242 },
  ];

const serviceData = [
    { name: 'Consultation', count: 120, revenue: 420000, avgPrice: 3500, duration: 30 },
    { name: 'Nettoyage', count: 85, revenue: 212500, avgPrice: 2500, duration: 45 },
    { name: 'Extraction', count: 45, revenue: 225000, avgPrice: 5000, duration: 60 },
    { name: 'Orthodontie', count: 30, revenue: 1350000, avgPrice: 45000, duration: 90 },
    { name: 'Implant', count: 15, revenue: 1125000, avgPrice: 75000, duration: 120 },
    { name: 'Blanchiment', count: 25, revenue: 375000, avgPrice: 15000, duration: 90 },
  ];

const cityData = [
    { name: 'Alger', patients: 1247, revenue: 4250000 },
    { name: 'Oran', patients: 856, revenue: 2890000 },
    { name: 'Constantine', patients: 634, revenue: 2150000 },
    { name: 'Annaba', patients: 423, revenue: 1430000 },
    { name: 'Blida', patients: 387, revenue: 1310000 },
    { name: 'Autres', patients: 298, revenue: 1010000 },
  ];

const doctorPerformance = [
    { name: 'Dr. Benali', patients: 156, revenue: 1890000, rating: 4.8, hours: 180 },
    { name: 'Dr. Alami', patients: 134, revenue: 1650000, rating: 4.6, hours: 165 },
    { name: 'Dr. Zahra', patients: 128, revenue: 1580000, rating: 4.7, hours: 158 },
    { name: 'Dr. Hassani', patients: 98, revenue: 1240000, rating: 4.5, hours: 142 },
  ];

const timeSlotData = [
    { time: '08:00', appointments: 12, efficiency: 85 },
    { time: '09:00', appointments: 18, efficiency: 92 },
    { time: '10:00', appointments: 22, efficiency: 88 },
    { time: '11:00', appointments: 20, efficiency: 90 },
    { time: '14:00', appointments: 25, efficiency: 95 },
    { time: '15:00', appointments: 23, efficiency: 87 },
    { time: '16:00', appointments: 19, efficiency: 83 },
    { time: '17:00', appointments: 15, efficiency: 78 },
  ];

const stats = [
    {
      title: 'Total Patients',
      value: '2,847',
      change: '+12%',
      icon: Users,
      color: 'blue',
      subtext: 'Ce mois'
    },
    {
      title: 'Revenus Totaux',
      value: '2,250,000 DA',
      change: '+15%',
      icon: DollarSign,
      color: 'green',
      subtext: 'Ce mois'
    },
    {
      title: 'Rendez-vous',
      value: '324',
      change: '+8%',
      icon: Calendar,
      color: 'purple',
      subtext: 'Cette semaine'
    },
    {
      title: 'Satisfaction',
      value: '4.6/5',
      change: '+3%',
      icon: Star,
      color: 'orange',
      subtext: 'Note moyenne'
    },
    {
      title: 'Temps Moyen',
      value: '42 min',
      change: '-5%',
      icon: Clock,
      color: 'indigo',
      subtext: 'Par consultation'
    },
    {
      title: 'Taux Présence',
      value: '87%',
      change: '+2%',
      icon: Activity,
      color: 'pink',
      subtext: 'Rendez-vous honorés'
    }
  ];

const formatCurrency = (value: number) => {
    return `${value.toLocaleString()} DA`;
  };

return (
    <div className="space-y-6">
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        className="flex items-center justify-between"
      >
        <div>
          <h1 className="text-3xl font-bold text-gray-900 dark:text-gray-100">Statistiques Avancées</h1>
          <p className="text-gray-600 dark:text-gray-400 mt-1">
            Analysez les performances détaillées de votre clinique
          </p>
        </div>
        <div className="flex items-center space-x-4">
          <select
            value={selectedPeriod}
            onChange={(e) => setSelectedPeriod(e.target.value)}
            className="border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
          >
            <option value="week">Cette semaine</option>
            <option value="month">Ce mois</option>
            <option value="quarter">Ce trimestre</option>
            <option value="year">Cette année</option>
            <option value="custom">Période personnalisée</option>
          </select>
          <select
            value={selectedMetric}
            onChange={(e) => setSelectedMetric(e.target.value)}
            className="border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
          >
            <option value="revenue">Revenus</option>
            <option value="patients">Patients</option>
            <option value="appointments">Rendez-vous</option>
            <option value="satisfaction">Satisfaction</option>
          </select>
          <button className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors flex items-center space-x-2">
            <Download className="w-5 h-5" />
            <span>Exporter PDF</span>
          </button>
        </div>
      </motion.div>

{/* Enhanced Stats Cards */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-4">
        {stats.map((stat, index) => (
          <motion.div
            key={stat.title}
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: index * 0.1 }}
            className="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 hover:shadow-xl transition-shadow"
          >
            <div className="flex items-center justify-between mb-4">
              <div className={`w-12 h-12 bg-${stat.color}-100 dark:bg-${stat.color}-900/20 rounded-lg flex items-center justify-center`}>
                <stat.icon className={`w-6 h-6 text-${stat.color}-600 dark:text-${stat.color}-400`} />
              </div>
              <span className={`text-sm font-medium ${stat.change.startsWith('+') ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'}`}>
                {stat.change}
              </span>
            </div>
            <div>
              <p className="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-1">{stat.value}</p>
              <p className="text-sm font-medium text-gray-600 dark:text-gray-400 mb-1">{stat.title}</p>
              <p className="text-xs text-gray-500 dark:text-gray-500">{stat.subtext}</p>
            </div>
          </motion.div>
        ))}
      </div>

{/* Main Charts */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* Trend Analysis */}
        <motion.div
          initial={{ opacity: 0, x: -20 }}
          animate={{ opacity: 1, x: 0 }}
          className="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6"
        >
          <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-6">Évolution Mensuelle</h3>
          <ResponsiveContainer width="100%" height={300}>
            <AreaChart data={monthlyData}>
              <defs>
                <linearGradient id="colorRevenue" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="5%" stopColor="#3B82F6" stopOpacity={0.8}/>
                  <stop offset="95%" stopColor="#3B82F6" stopOpacity={0.1}/>
                </linearGradient>
                <linearGradient id="colorPatients" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="5%" stopColor="#10B981" stopOpacity={0.8}/>
                  <stop offset="95%" stopColor="#10B981" stopOpacity={0.1}/>
                </linearGradient>
              </defs>
              <CartesianGrid strokeDasharray="3 3" stroke="#374151" />
              <XAxis dataKey="name" stroke="#6B7280" />
              <YAxis stroke="#6B7280" />
              <Tooltip 
                contentStyle={{ 
                  backgroundColor: '#1F2937', 
                  border: 'none', 
                  borderRadius: '8px',
                  color: '#F9FAFB'
                }}
                formatter={(value, name) => [
                  name === 'revenue' ? formatCurrency(value as number) : value,
                  name === 'revenue' ? 'Revenus' : name === 'patients' ? 'Patients' : name
                ]}
              />
              <Area type="monotone" dataKey="revenue" stroke="#3B82F6" fillOpacity={1} fill="url(#colorRevenue)" />
              <Area type="monotone" dataKey="patients" stroke="#10B981" fillOpacity={1} fill="url(#colorPatients)" />
            </AreaChart>
          </ResponsiveContainer>
        </motion.div>

{/* Patient Distribution */}
        <motion.div
          initial={{ opacity: 0, x: 20 }}
          animate={{ opacity: 1, x: 0 }}
          className="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6"
        >
          <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-6">Répartition des Patients</h3>
          <ResponsiveContainer width="100%" height={300}>
            <PieChart>
              <Pie
                data={patientTypeData}
                cx="50%"
                cy="50%"
                outerRadius={100}
                dataKey="value"
                label={({ name, value, count }) => `${name}: ${value}% (${count})`}
              >
                {patientTypeData.map((entry, index) => (
                  <Cell key={`cell-${index}`} fill={entry.color} />
                ))}
              </Pie>
              <Tooltip formatter={(value, name) => [`${value}%`, name]} />
            </PieChart>
          </ResponsiveContainer>
        </motion.div>
      </div>

{/* Service Performance */}
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        className="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6"
      >
        <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-6">Performance des Services</h3>
        <ResponsiveContainer width="100%" height={400}>
          <BarChart data={serviceData}>
            <CartesianGrid strokeDasharray="3 3" stroke="#374151" />
            <XAxis dataKey="name" stroke="#6B7280" />
            <YAxis stroke="#6B7280" />
            <Tooltip 
              contentStyle={{ 
                backgroundColor: '#1F2937', 
                border: 'none', 
                borderRadius: '8px',
                color: '#F9FAFB'
              }}
              formatter={(value, name) => [
                name === 'revenue' ? formatCurrency(value as number) : 
                name === 'avgPrice' ? formatCurrency(value as number) : value,
                name === 'count' ? 'Nombre' : 
                name === 'revenue' ? 'Revenus' : 
                name === 'avgPrice' ? 'Prix Moyen' : 
                name === 'duration' ? 'Durée (min)' : name
              ]}
            />
            <Bar dataKey="count" fill="#3B82F6" name="count" />
            <Bar dataKey="revenue" fill="#10B981" name="revenue" />
          </BarChart>
        </ResponsiveContainer>
      </motion.div>

{/* Geographic and Doctor Performance */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* Geographic Distribution */}
        <motion.div
          initial={{ opacity: 0, x: -20 }}
          animate={{ opacity: 1, x: 0 }}
          className="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6"
        >
          <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-6">Répartition Géographique</h3>
          <div className="space-y-4">
            {cityData.map((city, index) => (
              <div key={city.name} className="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-700 rounded-lg">
                <div className="flex items-center space-x-3">
                  <MapPin className="w-5 h-5 text-blue-600 dark:text-blue-400" />
                  <div>
                    <p className="font-medium text-gray-900 dark:text-gray-100">{city.name}</p>
                    <p className="text-sm text-gray-600 dark:text-gray-400">{city.patients} patients</p>
                  </div>
                </div>
                <div className="text-right">
                  <p className="font-semibold text-gray-900 dark:text-gray-100">{formatCurrency(city.revenue)}</p>
                  <div className="w-24 bg-gray-200 dark:bg-gray-600 rounded-full h-2 mt-1">
                    <div 
                      className="bg-blue-600 h-2 rounded-full" 
                      style={{ width: `${(city.patients / Math.max(...cityData.map(c => c.patients))) * 100}%` }}
                    ></div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </motion.div>

{/* Doctor Performance */}
        <motion.div
          initial={{ opacity: 0, x: 20 }}
          animate={{ opacity: 1, x: 0 }}
          className="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6"
        >
          <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-6">Performance des Docteurs</h3>
          <div className="space-y-4">
            {doctorPerformance.map((doctor, index) => (
              <div key={doctor.name} className="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
                <div className="flex items-center justify-between mb-3">
                  <h4 className="font-medium text-gray-900 dark:text-gray-100">{doctor.name}</h4>
                  <div className="flex items-center space-x-1">
                    <Star className="w-4 h-4 text-yellow-400 fill-current" />
                    <span className="text-sm font-medium text-gray-900 dark:text-gray-100">{doctor.rating}</span>
                  </div>
                </div>
                <div className="grid grid-cols-3 gap-4 text-sm">
                  <div>
                    <p className="text-gray-600 dark:text-gray-400">Patients</p>
                    <p className="font-semibold text-gray-900 dark:text-gray-100">{doctor.patients}</p>
                  </div>
                  <div>
                    <p className="text-gray-600 dark:text-gray-400">Revenus</p>
                    <p className="font-semibold text-gray-900 dark:text-gray-100">{formatCurrency(doctor.revenue)}</p>
                  </div>
                  <div>
                    <p className="text-gray-600 dark:text-gray-400">Heures</p>
                    <p className="font-semibold text-gray-900 dark:text-gray-100">{doctor.hours}h</p>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </motion.div>
      </div>

{/* Time Slot Analysis */}
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        className="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6"
      >
        <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-6">Analyse des Créneaux Horaires</h3>
        <ResponsiveContainer width="100%" height={300}>
          <LineChart data={timeSlotData}>
            <CartesianGrid strokeDasharray="3 3" stroke="#374151" />
            <XAxis dataKey="time" stroke="#6B7280" />
            <YAxis stroke="#6B7280" />
            <Tooltip 
              contentStyle={{ 
                backgroundColor: '#1F2937', 
                border: 'none', 
                borderRadius: '8px',
                color: '#F9FAFB'
              }} 
            />
            <Line type="monotone" dataKey="appointments" stroke="#3B82F6" strokeWidth={3} name="Rendez-vous" />
            <Line type="monotone" dataKey="efficiency" stroke="#10B981" strokeWidth={3} name="Efficacité %" />
          </LineChart>
        </ResponsiveContainer>
      </motion.div>

{/* Detailed Statistics Table */}
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        className="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6"
      >
        <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-6">Statistiques Détaillées par Service</h3>
        <div className="overflow-x-auto">
          <table className="w-full">
            <thead>
              <tr className="border-b border-gray-200 dark:border-gray-700">
                <th className="text-left py-3 px-4 font-medium text-gray-900 dark:text-gray-100">Service</th>
                <th className="text-left py-3 px-4 font-medium text-gray-900 dark:text-gray-100">Patients</th>
                <th className="text-left py-3 px-4 font-medium text-gray-900 dark:text-gray-100">Revenus</th>
                <th className="text-left py-3 px-4 font-medium text-gray-900 dark:text-gray-100">Prix Moyen</th>
                <th className="text-left py-3 px-4 font-medium text-gray-900 dark:text-gray-100">Durée Moy.</th>
                <th className="text-left py-3 px-4 font-medium text-gray-900 dark:text-gray-100">Évolution</th>
                <th className="text-left py-3 px-4 font-medium text-gray-900 dark:text-gray-100">Part de Marché</th>
              </tr>
            </thead>
            <tbody>
              {serviceData.map((service, index) => {
                const totalRevenue = serviceData.reduce((sum, s) => sum + s.revenue, 0);
                const marketShare = ((service.revenue / totalRevenue) * 100).toFixed(1);
                return (
                  <tr key={service.name} className="border-b border-gray-100 dark:border-gray-700">
                    <td className="py-3 px-4 text-gray-900 dark:text-gray-100 font-medium">{service.name}</td>
                    <td className="py-3 px-4 text-gray-600 dark:text-gray-400">{service.count}</td>
                    <td className="py-3 px-4 text-gray-600 dark:text-gray-400">{formatCurrency(service.revenue)}</td>
                    <td className="py-3 px-4 text-gray-600 dark:text-gray-400">{formatCurrency(service.avgPrice)}</td>
                    <td className="py-3 px-4 text-gray-600 dark:text-gray-400">{service.duration} min</td>
                    <td className="py-3 px-4">
                      <span className="text-green-600 dark:text-green-400 font-medium">
                        +{Math.floor(Math.random() * 20 + 5)}%
                      </span>
                    </td>
                    <td className="py-3 px-4">
                      <div className="flex items-center space-x-2">
                        <div className="w-16 bg-gray-200 dark:bg-gray-600 rounded-full h-2">
                          <div 
                            className="bg-blue-600 h-2 rounded-full" 
                            style={{ width: `${marketShare}%` }}
                          ></div>
                        </div>
                        <span className="text-sm text-gray-600 dark:text-gray-400">{marketShare}%</span>
                      </div>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </motion.div>
    </div>
  );
};

export default StatisticsPage;
[V0_FILE]typescriptreact:file="src/components/WaitingRoom/RealTimeWaitingRoom.tsx"
"use client"

import type React from "react"
import { useEffect, useState } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { Volume2, VolumeX, Settings, Users, Clock, Bell } from "lucide-react"
import { useWebSocket } from "../../contexts/WebSocketContext"
import { useWaitingRoom } from "../../contexts/WaitingRoomContext"

const RealTimeWaitingRoom: React.FC = () => {
  const { notifications } = useWebSocket()
  const { currentCall, callHistory, settings, updateSettings } = useWaitingRoom()
  const [currentTime, setCurrentTime] = useState(new Date())
  const [showSettings, setShowSettings] = useState(false)

// Update time every second
  useEffect(() => {
    const timer = setInterval(() => {
      setCurrentTime(new Date())
    }, 1000)
    return () => clearInterval(timer)
  }, [])

// Filter patient call notifications
  const patientCalls = notifications.filter((n) => n.type === "patient")

const formatTime = (date: Date) => {
    return date.toLocaleTimeString("fr-FR", {
      hour: "2-digit",
      minute: "2-digit",
      second: "2-digit",
    })
  }

const formatPatientName = (firstName: string, lastName: string) => {
    switch (settings.displayMode) {
      case "full_name":
        return `${firstName} ${lastName}`
      case "first_name_only":
        return firstName
      case "initials":
        return `${firstName.charAt(0)}. ${lastName.charAt(0)}.`
      case "anonymous":
        return "Patient"
      default:
        return `${firstName} ${lastName}`
    }
  }

return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800 p-8">
      {/* Header */}
      <div className="flex items-center justify-between mb-8">
        <div>
          <h1 className="text-4xl font-bold text-gray-900 dark:text-white mb-2">Salle d'Attente</h1>
          <p className="text-xl text-gray-600 dark:text-gray-300">{formatTime(currentTime)}</p>
        </div>

<div className="flex items-center space-x-4">
          <div className="flex items-center space-x-2 bg-white dark:bg-gray-800 rounded-lg px-4 py-2 shadow-lg">
            <Users className="w-5 h-5 text-blue-500" />
            <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
              {patientCalls.length} appels aujourd'hui
            </span>
          </div>

<button
            onClick={() => setShowSettings(!showSettings)}
            className="p-3 bg-white dark:bg-gray-800 rounded-lg shadow-lg hover:shadow-xl transition-shadow"
          >
            <Settings className="w-5 h-5 text-gray-600 dark:text-gray-300" />
          </button>

<button
            onClick={() => updateSettings({ soundEnabled: !settings.soundEnabled })}
            className={`p-3 rounded-lg shadow-lg hover:shadow-xl transition-all ${
              settings.soundEnabled
                ? "bg-green-500 text-white"
                : "bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-300"
            }`}
          >
            {settings.soundEnabled ? <Volume2 className="w-5 h-5" /> : <VolumeX className="w-5 h-5" />}
          </button>
        </div>
      </div>

{/* Current Call Display */}
      <AnimatePresence>
        {currentCall && (
          <motion.div
            initial={{ opacity: 0, scale: 0.9, y: 50 }}
            animate={{ opacity: 1, scale: 1, y: 0 }}
            exit={{ opacity: 0, scale: 0.9, y: -50 }}
            className="bg-white dark:bg-gray-800 rounded-2xl shadow-2xl p-12 mb-8 border-l-8 border-blue-500"
          >
            <div className="text-center">
              <motion.div
                animate={{ scale: [1, 1.05, 1] }}
                transition={{ duration: 2, repeat: Number.POSITIVE_INFINITY }}
                className="mb-6"
              >
                <Bell className="w-16 h-16 text-blue-500 mx-auto mb-4" />
              </motion.div>

<h2 className="text-6xl font-bold text-gray-900 dark:text-white mb-4">
                {formatPatientName(currentCall.patient.firstname, currentCall.patient.lastname)}
              </h2>

<div className="text-3xl text-gray-600 dark:text-gray-300 mb-6">Cabinet {currentCall.cabinetNumber}</div>

<div className="text-xl text-gray-500 dark:text-gray-400">
                Dr. {currentCall.doctor.firstname} {currentCall.doctor.lastname}
              </div>

{settings.showEstimatedTime && (
                <div className="mt-6 text-lg text-blue-600 dark:text-blue-400">
                  <Clock className="w-5 h-5 inline mr-2" />
                  Temps d'attente estimé: 5-10 minutes
                </div>
              )}
            </div>
          </motion.div>
        )}
      </AnimatePresence>

{/* Recent Calls History */}
      <div className="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6">
        <h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">Appels Récents</h3>

<div className="space-y-4">
          {callHistory.slice(0, 5).map((call, index) => (
            <motion.div
              key={call.id}
              initial={{ opacity: 0, x: -20 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ delay: index * 0.1 }}
              className="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-700 rounded-lg"
            >
              <div className="flex items-center space-x-4">
                <div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-600 rounded-full flex items-center justify-center">
                  <span className="text-white font-semibold">
                    {call.patient.firstname.charAt(0)}
                    {call.patient.lastname.charAt(0)}
                  </span>
                </div>
                <div>
                  <p className="font-medium text-gray-900 dark:text-white">
                    {formatPatientName(call.patient.firstname, call.patient.lastname)}
                  </p>
                  <p className="text-sm text-gray-600 dark:text-gray-300">
                    Cabinet {call.cabinetNumber} - Dr. {call.doctor.firstname} {call.doctor.lastname}
                  </p>
                </div>
              </div>
              <div className="text-sm text-gray-500 dark:text-gray-400">
                {call.timestamp.toLocaleTimeString("fr-FR", {
                  hour: "2-digit",
                  minute: "2-digit",
                })}
              </div>
            </motion.div>
          ))}
        </div>

{callHistory.length === 0 && (
          <div className="text-center py-12 text-gray-500 dark:text-gray-400">
            <Bell className="w-16 h-16 mx-auto mb-4 opacity-50" />
            <p className="text-xl">Aucun appel aujourd'hui</p>
          </div>
        )}
      </div>

{/* Settings Panel */}
      <AnimatePresence>
        {showSettings && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
            onClick={() => setShowSettings(false)}
          >
            <motion.div
              initial={{ scale: 0.9, opacity: 0 }}
              animate={{ scale: 1, opacity: 1 }}
              exit={{ scale: 0.9, opacity: 0 }}
              className="bg-white dark:bg-gray-800 rounded-xl p-6 w-96 max-w-90vw"
              onClick={(e) => e.stopPropagation()}
            >
              <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-6">Paramètres d'Affichage</h3>

<div className="space-y-4">
                <div>
                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                    Mode d'affichage des noms
                  </label>
                  <select
                    value={settings.displayMode}
                    onChange={(e) => updateSettings({ displayMode: e.target.value as any })}
                    className="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
                  >
                    <option value="full_name">Nom complet</option>
                    <option value="first_name_only">Prénom seulement</option>
                    <option value="initials">Initiales</option>
                    <option value="anonymous">Anonyme</option>
                  </select>
                </div>

<div className="flex items-center justify-between">
                  <label className="text-sm font-medium text-gray-700 dark:text-gray-300">Son activé</label>
                  <button
                    onClick={() => updateSettings({ soundEnabled: !settings.soundEnabled })}
                    className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
                      settings.soundEnabled ? "bg-blue-600" : "bg-gray-200 dark:bg-gray-600"
                    }`}
                  >
                    <span
                      className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
                        settings.soundEnabled ? "translate-x-6" : "translate-x-1"
                      }`}
                    />
                  </button>
                </div>

<div className="flex items-center justify-between">
                  <label className="text-sm font-medium text-gray-700 dark:text-gray-300">Animations</label>
                  <button
                    onClick={() => updateSettings({ animationEnabled: !settings.animationEnabled })}
                    className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
                      settings.animationEnabled ? "bg-blue-600" : "bg-gray-200 dark:bg-gray-600"
                    }`}
                  >
                    <span
                      className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
                        settings.animationEnabled ? "translate-x-6" : "translate-x-1"
                      }`}
                    />
                  </button>
                </div>

<div className="flex items-center justify-between">
                  <label className="text-sm font-medium text-gray-700 dark:text-gray-300">
                    Afficher temps d'attente
                  </label>
                  <button
                    onClick={() => updateSettings({ showEstimatedTime: !settings.showEstimatedTime })}
                    className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
                      settings.showEstimatedTime ? "bg-blue-600" : "bg-gray-200 dark:bg-gray-600"
                    }`}
                  >
                    <span
                      className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
                        settings.showEstimatedTime ? "translate-x-6" : "translate-x-1"
                      }`}
                    />
                  </button>
                </div>
              </div>

<div className="mt-6 flex justify-end">
                <button
                  onClick={() => setShowSettings(false)}
                  className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
                >
                  Fermer
                </button>
              </div>
            </motion.div>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  )
}

export default RealTimeWaitingRoom
[V0_FILE]typescriptreact:file="src/components/WaitingRoom/WaitingRoomDisplay.tsx"
"use client"

import type React from "react"
import { useEffect, useState } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { Monitor, User, MapPin, Clock, Stethoscope, Volume2, ArrowLeft } from "lucide-react"
import { useWaitingRoom } from "../../contexts/WaitingRoomContext"
import { useRouter } from "next/navigation"

const WaitingRoomDisplay: React.FC = () => {
  const { currentCall, callHistory } = useWaitingRoom()
  const [currentTime, setCurrentTime] = useState(new Date())
  const router = useRouter()

useEffect(() => {
    const timer = setInterval(() => {
      setCurrentTime(new Date())
    }, 1000)

return () => clearInterval(timer)
  }, [])

const formatTime = (date: Date) => {
    return date.toLocaleTimeString("fr-FR", {
      hour: "2-digit",
      minute: "2-digit",
      second: "2-digit",
    })
  }

const formatDate = (date: Date) => {
    return date.toLocaleDateString("fr-FR", {
      weekday: "long",
      year: "numeric",
      month: "long",
      day: "numeric",
    })
  }

return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-blue-100 dark:from-gray-900 dark:to-gray-800 p-8">
      <div className="max-w-6xl mx-auto">
        {/* Back Button */}
        <motion.button
          initial={{ opacity: 0, x: -20 }}
          animate={{ opacity: 1, x: 0 }}
          onClick={() => router.push("/dashboard")}
          className="mb-6 flex items-center space-x-2 px-4 py-2 bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-shadow"
        >
          <ArrowLeft className="w-5 h-5 text-gray-600 dark:text-gray-400" />
          <span className="text-gray-700 dark:text-gray-300">Retour au tableau de bord</span>
        </motion.button>

{/* Header */}
        <motion.div initial={{ opacity: 0, y: -20 }} animate={{ opacity: 1, y: 0 }} className="text-center mb-12">
          <div className="flex items-center justify-center space-x-4 mb-6">
            <div className="w-16 h-16 bg-gradient-to-br from-blue-500 to-blue-600 rounded-full flex items-center justify-center">
              <Stethoscope className="w-8 h-8 text-white" />
            </div>
            <div>
              <h1 className="text-4xl font-bold text-gray-900 dark:text-gray-100">Clinique Dentaire</h1>
              <p className="text-xl text-gray-600 dark:text-gray-400">Salle d'Attente</p>
            </div>
          </div>

<div className="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 inline-block">
            <div className="flex items-center space-x-6">
              <div className="text-center">
                <Clock className="w-8 h-8 text-blue-600 mx-auto mb-2" />
                <p className="text-3xl font-bold text-gray-900 dark:text-gray-100">{formatTime(currentTime)}</p>
              </div>
              <div className="w-px h-16 bg-gray-300 dark:bg-gray-600"></div>
              <div className="text-center">
                <p className="text-lg text-gray-600 dark:text-gray-400">{formatDate(currentTime)}</p>
              </div>
            </div>
          </div>
        </motion.div>

{/* Current Call */}
        <AnimatePresence mode="wait">
          {currentCall ? (
            <motion.div
              key={currentCall.id}
              initial={{ opacity: 0, scale: 0.8, y: 50 }}
              animate={{ opacity: 1, scale: 1, y: 0 }}
              exit={{ opacity: 0, scale: 0.8, y: -50 }}
              className="bg-gradient-to-r from-green-500 to-green-600 rounded-2xl shadow-2xl p-12 mb-12 text-white"
            >
              <div className="text-center">
                <motion.div
                  animate={{ scale: [1, 1.1, 1] }}
                  transition={{ duration: 2, repeat: Number.POSITIVE_INFINITY }}
                  className="w-24 h-24 bg-white bg-opacity-20 rounded-full flex items-center justify-center mx-auto mb-6"
                >
                  <Volume2 className="w-12 h-12" />
                </motion.div>

<h2 className="text-2xl font-semibold mb-4">Appel en cours</h2>

<div className="bg-white bg-opacity-20 rounded-xl p-8 mb-6">
                  <div className="flex items-center justify-center space-x-8">
                    <div className="text-center">
                      <User className="w-16 h-16 mx-auto mb-4" />
                      <h3 className="text-4xl font-bold mb-2">
                        {currentCall.patient.firstname} {currentCall.patient.lastname}
                      </h3>
                      <p className="text-xl opacity-90">Patient</p>
                    </div>

<div className="text-center">
                      <MapPin className="w-16 h-16 mx-auto mb-4" />
                      <h3 className="text-4xl font-bold mb-2">{currentCall.cabinetNumber}</h3>
                      <p className="text-xl opacity-90">
                        Dr. {currentCall.doctor.firstname} {currentCall.doctor.lastname}
                      </p>
                    </div>
                  </div>
                </div>

<motion.p
                  animate={{ opacity: [0.7, 1, 0.7] }}
                  transition={{ duration: 1.5, repeat: Number.POSITIVE_INFINITY }}
                  className="text-xl"
                >
                  Veuillez vous diriger vers le cabinet indiqué
                </motion.p>
              </div>
            </motion.div>
          ) : (
            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              className="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-12 mb-12 text-center"
            >
              <Monitor className="w-24 h-24 text-gray-400 mx-auto mb-6" />
              <h2 className="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-4">En attente du prochain appel</h2>
              <p className="text-xl text-gray-600 dark:text-gray-400">
                Veuillez patienter, vous serez appelé(e) prochainement
              </p>
            </motion.div>
          )}
        </AnimatePresence>

{/* Call History */}
        {callHistory.length > 0 && (
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            className="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-8"
          >
            <h3 className="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-6 text-center">Derniers Appels</h3>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              {callHistory.slice(0, 6).map((call, index) => (
                <motion.div
                  key={call.id}
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ delay: index * 0.1 }}
                  className="bg-gray-50 dark:bg-gray-700 rounded-lg p-6"
                >
                  <div className="flex items-center space-x-4 mb-4">
                    <div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-600 rounded-full flex items-center justify-center">
                      <User className="w-6 h-6 text-white" />
                    </div>
                    <div>
                      <h4 className="font-semibold text-gray-900 dark:text-gray-100">
                        {call.patient.firstname} {call.patient.lastname}
                      </h4>
                      <p className="text-sm text-gray-600 dark:text-gray-400">{call.cabinetNumber}</p>
                    </div>
                  </div>

<div className="text-sm text-gray-600 dark:text-gray-400">
                    <p>
                      Dr. {call.doctor.firstname} {call.doctor.lastname}
                    </p>
                    <p>{call.timestamp.toLocaleTimeString("fr-FR", { hour: "2-digit", minute: "2-digit" })}</p>
                  </div>
                </motion.div>
              ))}
            </div>
          </motion.div>
        )}

{/* Instructions */}
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 0.5 }}
          className="mt-12 text-center"
        >
          <div className="bg-blue-50 dark:bg-blue-900/20 rounded-xl p-8">
            <h3 className="text-xl font-semibold text-blue-900 dark:text-blue-300 mb-4">
              Instructions pour les Patients
            </h3>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6 text-blue-800 dark:text-blue-400">
              <div>
                <Volume2 className="w-8 h-8 mx-auto mb-2" />
                <p className="font-medium">Écoutez les annonces</p>
                <p className="text-sm">Un signal sonore accompagne chaque appel</p>
              </div>
              <div>
                <MapPin className="w-8 h-8 mx-auto mb-2" />
                <p className="font-medium">Vérifiez le cabinet</p>
                <p className="text-sm">Le numéro du cabinet est affiché clairement</p>
              </div>
              <div>
                <Clock className="w-8 h-8 mx-auto mb-2" />
                <p className="font-medium">Soyez ponctuel</p>
                <p className="text-sm">Présentez-vous rapidement au cabinet indiqué</p>
              </div>
            </div>
          </div>
        </motion.div>
      </div>
    </div>
  )
}

export default WaitingRoomDisplay
[V0_FILE]typescriptreact:file="src/contexts/AuthContext.tsx"
"use client"

import type React from "react"
import { createContext, useContext, useState, useEffect } from "react"
import type { User } from "../types"

interface AuthContextType {
  user: User | null
  isAuthenticated: boolean
  login: (username: string, password: string) => Promise<boolean>
  logout: () => void
  hasAccess: (permission: string) => boolean
  hasRole: (role: string) => boolean
}

const AuthContext = createContext<AuthContextType | undefined>(undefined)

// Mock users data with comprehensive permissions
const mockUsers: (User & { password: string })[] = [
  {
    id: "1",
    firstname: "Admin",
    lastname: "System",
    phone: "0661234567",
    email: "admin@clinic.ma",
    gender: "male",
    role: "admin",
    username: "admin",
    password: "123456",
    isActive: true,
    createdAt: new Date(),
    updatedAt: new Date(),
    access: {
      viewOwnPatients: true,
      viewOwnStats: true,
      accessMedicalModules: true,
      accessFinancialOwn: true,
      globalStats: true,
      adminPrivileges: true,
    },
  },
  {
    id: "2",
    firstname: "Dr. Sarah",
    lastname: "Benali",
    phone: "0661234567",
    email: "sarah.benali@clinic.ma",
    gender: "female",
    role: "doctor",
    username: "dr.benali",
    password: "123456",
    isActive: true,
    specialization: "Orthodontie",
    cabinetNumber: "Cabinet 1",
    consultationFee: 3500,
    rating: 4.8,
    totalPatients: 156,
    totalConsultations: 234,
    doctorRole: "employee",
    createdAt: new Date(),
    updatedAt: new Date(),
    access: {
      viewOwnPatients: true,
      viewOwnStats: true,
      accessMedicalModules: true,
      accessFinancialOwn: true,
      globalStats: false,
      adminPrivileges: false,
    },
  },
  {
    id: "3",
    firstname: "Fatima",
    lastname: "Alami",
    phone: "0662345678",
    email: "fatima.alami@clinic.ma",
    gender: "female",
    role: "receptionist",
    username: "reception",
    password: "123456",
    isActive: true,
    createdAt: new Date(),
    updatedAt: new Date(),
    access: {
      viewOwnPatients: false,
      viewOwnStats: false,
      accessMedicalModules: false,
      accessFinancialOwn: false,
      globalStats: false,
      adminPrivileges: false,
    },
  },
  {
    id: "4",
    firstname: "Ahmed",
    lastname: "Mansouri",
    phone: "0663456789",
    email: "ahmed.mansouri@clinic.ma",
    gender: "male",
    role: "nurse",
    username: "nurse.ahmed",
    password: "123456",
    isActive: true,
    createdAt: new Date(),
    updatedAt: new Date(),
    access: {
      viewOwnPatients: false,
      viewOwnStats: false,
      accessMedicalModules: true,
      accessFinancialOwn: false,
      globalStats: false,
      adminPrivileges: false,
    },
  },
  {
    id: "5",
    firstname: "Youssef",
    lastname: "Tazi",
    phone: "0664567890",
    email: "youssef.tazi@clinic.ma",
    gender: "male",
    role: "manager",
    username: "manager",
    password: "123456",
    isActive: true,
    createdAt: new Date(),
    updatedAt: new Date(),
    access: {
      viewOwnPatients: true,
      viewOwnStats: true,
      accessMedicalModules: true,
      accessFinancialOwn: true,
      globalStats: true,
      adminPrivileges: false,
    },
  },
]

// Comprehensive permission mapping
const rolePermissions: Record<string, string[]> = {
  admin: [
    "dashboard",
    "patients",
    "appointments",
    "waiting_room",
    "medical_files",
    "consultation_history",
    "prescriptions",
    "lab_results",
    "radiology",
    "case_images",
    "billing",
    "my_payments",
    "inventory",
    "medication_scanner",
    "messages",
    "notifications",
    "call_log",
    "call_center",
    "staff",
    "roles_permissions",
    "statistics",
    "patient_feedback",
    "room_management",
    "my_schedule",
    "settings",
    "system_backup",
    "sync",
    "my_profile",
    "change_password",
  ],
  doctor: [
    "dashboard",
    "patients",
    "appointments",
    "waiting_room",
    "medical_files",
    "consultation_history",
    "prescriptions",
    "lab_results",
    "radiology",
    "case_images",
    "billing",
    "my_payments",
    "inventory",
    "medication_scanner",
    "messages",
    "notifications",
    "call_log",
    "statistics",
    "patient_feedback",
    "my_schedule",
    "my_profile",
    "change_password",
  ],
  manager: [
    "dashboard",
    "patients",
    "appointments",
    "waiting_room",
    "medical_files",
    "consultation_history",
    "prescriptions",
    "lab_results",
    "radiology",
    "case_images",
    "billing",
    "my_payments",
    "inventory",
    "medication_scanner",
    "messages",
    "notifications",
    "call_log",
    "call_center",
    "staff",
    "statistics",
    "patient_feedback",
    "room_management",
    "my_schedule",
    "settings",
    "system_backup",
    "sync",
    "my_profile",
    "change_password",
  ],
  receptionist: [
    "dashboard",
    "patients",
    "appointments",
    "waiting_room",
    "messages",
    "notifications",
    "call_log",
    "call_center",
    "my_schedule",
    "my_profile",
    "change_password",
  ],
  nurse: [
    "dashboard",
    "patients",
    "appointments",
    "waiting_room",
    "medical_files",
    "consultation_history",
    "prescriptions",
    "lab_results",
    "case_images",
    "inventory",
    "medication_scanner",
    "messages",
    "notifications",
    "my_schedule",
    "my_profile",
    "change_password",
  ],
  technician: [
    "dashboard",
    "patients",
    "appointments",
    "lab_results",
    "radiology",
    "case_images",
    "inventory",
    "medication_scanner",
    "messages",
    "notifications",
    "my_schedule",
    "my_profile",
    "change_password",
  ],
}

export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const [user, setUser] = useState<User | null>(null)
  const [isAuthenticated, setIsAuthenticated] = useState(false)

useEffect(() => {
    // Check for stored authentication
    const storedUser = localStorage.getItem("clinic_user")
    if (storedUser) {
      try {
        const parsedUser = JSON.parse(storedUser)
        setUser(parsedUser)
        setIsAuthenticated(true)
      } catch (error) {
        console.error("Error parsing stored user:", error)
        localStorage.removeItem("clinic_user")
      }
    }
  }, [])

const login = async (username: string, password: string): Promise<boolean> => {
    try {
      // Simulate API call delay
      await new Promise((resolve) => setTimeout(resolve, 1000))

const foundUser = mockUsers.find((u) => u.username === username && u.password === password && u.isActive)

if (foundUser) {
        const { password: _, ...userWithoutPassword } = foundUser
        setUser(userWithoutPassword)
        setIsAuthenticated(true)
        localStorage.setItem("clinic_user", JSON.stringify(userWithoutPassword))
        return true
      }

return false
    } catch (error) {
      console.error("Login error:", error)
      return false
    }
  }

const logout = () => {
    setUser(null)
    setIsAuthenticated(false)
    localStorage.removeItem("clinic_user")
  }

const hasAccess = (permission: string): boolean => {
    if (!user) return false

// Admin has access to everything
    if (user.role === "admin") return true

// Check role-based permissions
    const userPermissions = rolePermissions[user.role] || []
    return userPermissions.includes(permission)
  }

const hasRole = (role: string): boolean => {
    return user?.role === role
  }

const value: AuthContextType = {
    user,
    isAuthenticated,
    login,
    logout,
    hasAccess,
    hasRole,
  }

return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>
}

export const useAuth = (): AuthContextType => {
  const context = useContext(AuthContext)
  if (context === undefined) {
    throw new Error("useAuth must be used within an AuthProvider")
  }
  return context
}
[V0_FILE]typescriptreact:file="src/contexts/ThemeContext.tsx"
import React, { createContext, useContext, useState, useEffect } from 'react';

interface ThemeContextType {
  isDark: boolean;
  toggleTheme: () => void;
}

const ThemeContext = createContext<ThemeContextType | undefined>(undefined);

export const useTheme = () => {
  const context = useContext(ThemeContext);
  if (context === undefined) {
    throw new Error('useTheme must be used within a ThemeProvider');
  }
  return context;
};

export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const [isDark, setIsDark] = useState(() => {
    const saved = localStorage.getItem('theme');
    return saved === 'dark' || (!saved && window.matchMedia('(prefers-color-scheme: dark)').matches);
  });

useEffect(() => {
    localStorage.setItem('theme', isDark ? 'dark' : 'light');
    if (isDark) {
      document.documentElement.classList.add('dark');
    } else {
      document.documentElement.classList.remove('dark');
    }
  }, [isDark]);

const toggleTheme = () => {
    setIsDark(!isDark);
  };

return (
    <ThemeContext.Provider value={{ isDark, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};
[V0_FILE]typescriptreact:file="src/contexts/WaitingRoomContext.tsx"
import React, { createContext, useContext, useState, useEffect } from 'react';
import { Patient, Doctor, WaitingRoomCall, WaitingRoomSettings } from '../types';

interface WaitingRoomContextType {
  currentCall: WaitingRoomCall | null;
  callHistory: WaitingRoomCall[];
  settings: WaitingRoomSettings;
  callNextPatient: (patient: Patient, doctor: Doctor, cabinetNumber: string) => void;
  updateSettings: (settings: Partial<WaitingRoomSettings>) => void;
  playNotificationSound: () => void;
}

const WaitingRoomContext = createContext<WaitingRoomContextType | undefined>(undefined);

export const useWaitingRoom = () => {
  const context = useContext(WaitingRoomContext);
  if (context === undefined) {
    throw new Error('useWaitingRoom must be used within a WaitingRoomProvider');
  }
  return context;
};

export const WaitingRoomProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const [currentCall, setCurrentCall] = useState<WaitingRoomCall | null>(null);
  const [callHistory, setCallHistory] = useState<WaitingRoomCall[]>([]);
  const [settings, setSettings] = useState<WaitingRoomSettings>({
    displayMode: 'first_name_only',
    autoRefreshInterval: 5,
    soundEnabled: true,
    animationEnabled: true,
    showQueueNumber: false,
    showEstimatedTime: false
  });

const playNotificationSound = () => {
    if (!settings.soundEnabled) return;

// Create audio context for enhanced notification sound
    const audioContext = new (window.AudioContext || (window as any).webkitAudioContext)();
    
    // Create a more pleasant and longer notification sequence
    const playTone = (frequency: number, startTime: number, duration: number, volume: number = 0.3) => {
      const oscillator = audioContext.createOscillator();
      const gainNode = audioContext.createGain();
      
      oscillator.connect(gainNode);
      gainNode.connect(audioContext.destination);
      
      oscillator.frequency.setValueAtTime(frequency, startTime);
      oscillator.type = 'sine'; // Smoother sine wave
      
      gainNode.gain.setValueAtTime(0, startTime);
      gainNode.gain.linearRampToValueAtTime(volume, startTime + 0.1);
      gainNode.gain.linearRampToValueAtTime(volume * 0.8, startTime + duration - 0.2);
      gainNode.gain.exponentialRampToValueAtTime(0.01, startTime + duration);
      
      oscillator.start(startTime);
      oscillator.stop(startTime + duration);
    };

const currentTime = audioContext.currentTime;
    
    // Play a pleasant 4-tone chime sequence (longer duration - 6 seconds total)
    playTone(523.25, currentTime, 1.0, 0.4); // C5
    playTone(659.25, currentTime + 0.4, 1.0, 0.4); // E5
    playTone(783.99, currentTime + 0.8, 1.2, 0.4); // G5
    playTone(1046.50, currentTime + 1.2, 1.0, 0.3); // C6
    
    // Add a second sequence for emphasis (after 2.5 seconds)
    setTimeout(() => {
      const secondTime = audioContext.currentTime;
      playTone(523.25, secondTime, 0.8, 0.3);
      playTone(659.25, secondTime + 0.3, 0.8, 0.3);
      playTone(783.99, secondTime + 0.6, 1.0, 0.3);
    }, 2500);

// Add a final gentle reminder tone (after 5 seconds)
    setTimeout(() => {
      const thirdTime = audioContext.currentTime;
      playTone(659.25, thirdTime, 0.6, 0.2);
      playTone(783.99, thirdTime + 0.3, 0.8, 0.2);
    }, 5000);
  };

const callNextPatient = (patient: Patient, doctor: Doctor, cabinetNumber: string) => {
    const newCall: WaitingRoomCall = {
      id: Date.now().toString(),
      patient,
      doctor,
      cabinetNumber,
      timestamp: new Date(),
      isAnonymized: settings.displayMode === 'anonymous'
    };

setCurrentCall(newCall);
    setCallHistory(prev => [newCall, ...prev.slice(0, 9)]); // Keep last 10 calls
    playNotificationSound();

// Auto-clear current call after 60 seconds (increased for better visibility)
    setTimeout(() => {
      setCurrentCall(null);
    }, 60000);
  };

// Load settings from localStorage on mount
  useEffect(() => {
    const savedSettings = localStorage.getItem('waitingRoomSettings');
    if (savedSettings) {
      setSettings(JSON.parse(savedSettings));
    }
  }, []);

return (
    <WaitingRoomContext.Provider value={{
      currentCall,
      callHistory,
      settings,
      callNextPatient,
      updateSettings,
      playNotificationSound
    }}>
      {children}
    </WaitingRoomContext.Provider>
  );
};
[V0_FILE]typescriptreact:file="src/contexts/WebSocketContext.tsx"
"use client"

import type React from "react"
import { createContext, useContext, useState, useEffect, useCallback, useRef } from "react"
import { toast } from "react-hot-toast"
import { useAuth } from "./AuthContext"
import type { User, Patient } from "../types"

export interface WebSocketMessage {
  type: "notification" | "appointment_update" | "patient_call" | "message" | "status_update" | "user_activity"
  data: any
  timestamp: Date
  from?: User
  to?: User | "all"
}

export interface RealTimeNotification {
  id: string
  type: "info" | "success" | "warning" | "error" | "appointment" | "patient" | "message" | "system"
  title: string
  message: string
  data?: any
  timestamp: Date
  isRead: boolean
  priority: "low" | "medium" | "high" | "urgent"
  actionUrl?: string
  autoHide?: boolean
  duration?: number
}

interface WebSocketContextType {
  isConnected: boolean
  connectionStatus: "connecting" | "connected" | "disconnected" | "error"
  notifications: RealTimeNotification[]
  unreadCount: number
  onlineUsers: User[]

// Methods
  sendMessage: (message: WebSocketMessage) => void
  markNotificationAsRead: (notificationId: string) => void
  markAllNotificationsAsRead: () => void
  clearNotifications: () => void
  callPatient: (patient: Patient, doctor: User, cabinetNumber: string) => void
  updateAppointmentStatus: (appointmentId: string, status: string, notes?: string) => void
  sendDirectMessage: (recipient: User, subject: string, content: string) => void
  broadcastMessage: (subject: string, content: string) => void
  updateUserStatus: (status: "online" | "busy" | "away" | "offline") => void
}

const WebSocketContext = createContext<WebSocketContextType | undefined>(undefined)

export const WebSocketProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const { user, isAuthenticated } = useAuth()
  const [socket, setSocket] = useState<WebSocket | null>(null)
  const [isConnected, setIsConnected] = useState(false)
  const [connectionStatus, setConnectionStatus] = useState<"connecting" | "connected" | "disconnected" | "error">(
    "disconnected",
  )
  const [notifications, setNotifications] = useState<RealTimeNotification[]>([])
  const [onlineUsers, setOnlineUsers] = useState<User[]>([])
  const reconnectTimeoutRef = useRef<NodeJS.Timeout>()
  const heartbeatIntervalRef = useRef<NodeJS.Timeout>()
  const reconnectAttemptsRef = useRef(0)
  const maxReconnectAttempts = 5

// WebSocket URL - in production, this would be your actual WebSocket server
  const WS_URL = process.env.NODE_ENV === "production" ? "wss://your-clinic-api.com/ws" : "ws://localhost:8080/ws"

const connect = useCallback(() => {
    if (!isAuthenticated || !user) return

try {
      setConnectionStatus("connecting")
      const ws = new WebSocket(`${WS_URL}?userId=${user.id}&token=${user.id}`)

ws.onopen = () => {
        console.log("WebSocket connected")
        setIsConnected(true)
        setConnectionStatus("connected")
        setSocket(ws)
        reconnectAttemptsRef.current = 0

// Send initial user status
        ws.send(
          JSON.stringify({
            type: "user_activity",
            data: {
              userId: user.id,
              status: "online",
              timestamp: new Date(),
            },
          }),
        )

// Start heartbeat
        heartbeatIntervalRef.current = setInterval(() => {
          if (ws.readyState === WebSocket.OPEN) {
            ws.send(JSON.stringify({ type: "ping" }))
          }
        }, 30000)

// Show connection success notification
        addNotification({
          type: "success",
          title: "Connexion établie",
          message: "Vous êtes maintenant connecté en temps réel",
          priority: "low",
          autoHide: true,
          duration: 3000,
        })
      }

ws.onmessage = (event) => {
        try {
          const message: WebSocketMessage = JSON.parse(event.data)
          handleIncomingMessage(message)
        } catch (error) {
          console.error("Error parsing WebSocket message:", error)
        }
      }

ws.onclose = (event) => {
        console.log("WebSocket disconnected:", event.code, event.reason)
        setIsConnected(false)
        setConnectionStatus("disconnected")
        setSocket(null)

if (heartbeatIntervalRef.current) {
          clearInterval(heartbeatIntervalRef.current)
        }

// Attempt to reconnect if not a normal closure
        if (event.code !== 1000 && reconnectAttemptsRef.current < maxReconnectAttempts) {
          const delay = Math.min(1000 * Math.pow(2, reconnectAttemptsRef.current), 30000)
          reconnectTimeoutRef.current = setTimeout(() => {
            reconnectAttemptsRef.current++
            connect()
          }, delay)
        }
      }

ws.onerror = (error) => {
        console.error("WebSocket error:", error)
        setConnectionStatus("error")

addNotification({
          type: "error",
          title: "Erreur de connexion",
          message: "Problème de connexion temps réel. Tentative de reconnexion...",
          priority: "medium",
          autoHide: true,
          duration: 5000,
        })
      }
    } catch (error) {
      console.error("Failed to connect WebSocket:", error)
      setConnectionStatus("error")
    }
  }, [isAuthenticated, user])

const disconnect = useCallback(() => {
    if (socket) {
      socket.close(1000, "User logout")
    }
    if (reconnectTimeoutRef.current) {
      clearTimeout(reconnectTimeoutRef.current)
    }
    if (heartbeatIntervalRef.current) {
      clearInterval(heartbeatIntervalRef.current)
    }
    setSocket(null)
    setIsConnected(false)
    setConnectionStatus("disconnected")
    setOnlineUsers([])
  }, [socket])

const addNotification = useCallback((notification: Omit<RealTimeNotification, "id" | "timestamp" | "isRead">) => {
    const newNotification: RealTimeNotification = {
      id: Date.now().toString() + Math.random().toString(36).substr(2, 9),
      timestamp: new Date(),
      isRead: false,
      ...notification,
    }

setNotifications((prev) => [newNotification, ...prev.slice(0, 49)]) // Keep last 50 notifications

// Show toast notification
    const toastOptions = {
      duration: notification.duration || (notification.autoHide ? 4000 : 6000),
      style: {
        background: getNotificationColor(notification.type),
        color: "white",
        fontWeight: "500",
      },
    }

switch (notification.priority) {
      case "urgent":
        toast.error(`🚨 ${notification.title}: ${notification.message}`, toastOptions)
        // Play urgent sound
        playNotificationSound("urgent")
        break
      case "high":
        toast.error(`⚠️ ${notification.title}: ${notification.message}`, toastOptions)
        playNotificationSound("high")
        break
      case "medium":
        toast(`📢 ${notification.title}: ${notification.message}`, toastOptions)
        playNotificationSound("medium")
        break
      case "low":
        if (!notification.autoHide) {
          toast.success(`✅ ${notification.title}: ${notification.message}`, toastOptions)
        }
        break
    }
  }, [])

const getNotificationColor = (type: string): string => {
    switch (type) {
      case "error":
        return "#ef4444"
      case "warning":
        return "#f59e0b"
      case "success":
        return "#10b981"
      case "appointment":
        return "#3b82f6"
      case "patient":
        return "#8b5cf6"
      case "message":
        return "#06b6d4"
      case "system":
        return "#6b7280"
      default:
        return "#3b82f6"
    }
  }

const playNotificationSound = (priority: string) => {
    try {
      const audioContext = new (window.AudioContext || (window as any).webkitAudioContext)()

const playTone = (frequency: number, duration: number, volume = 0.3) => {
        const oscillator = audioContext.createOscillator()
        const gainNode = audioContext.createGain()

oscillator.connect(gainNode)
        gainNode.connect(audioContext.destination)

oscillator.frequency.setValueAtTime(frequency, audioContext.currentTime)
        oscillator.type = "sine"

gainNode.gain.setValueAtTime(0, audioContext.currentTime)
        gainNode.gain.linearRampToValueAtTime(volume, audioContext.currentTime + 0.1)
        gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + duration)

oscillator.start(audioContext.currentTime)
        oscillator.stop(audioContext.currentTime + duration)
      }

switch (priority) {
        case "urgent":
          // Urgent: Fast beeping pattern
          playTone(800, 0.2, 0.5)
          setTimeout(() => playTone(800, 0.2, 0.5), 300)
          setTimeout(() => playTone(800, 0.2, 0.5), 600)
          break
        case "high":
          // High: Two tone alert
          playTone(600, 0.3, 0.4)
          setTimeout(() => playTone(800, 0.3, 0.4), 400)
          break
        case "medium":
          // Medium: Single pleasant tone
          playTone(523.25, 0.5, 0.3)
          break
        default:
          // Low: Soft notification
          playTone(440, 0.3, 0.2)
      }
    } catch (error) {
      console.warn("Could not play notification sound:", error)
    }
  }

const handleIncomingMessage = useCallback(
    (message: WebSocketMessage) => {
      switch (message.type) {
        case "notification":
          addNotification(message.data)
          break

case "appointment_update":
          const { appointment, action, updatedBy } = message.data
          addNotification({
            type: "appointment",
            title: "Mise à jour rendez-vous",
            message: `${action} par ${updatedBy.firstname} ${updatedBy.lastname}`,
            data: appointment,
            priority: "medium",
            actionUrl: "/appointments",
          })
          break

case "patient_call":
          const { patient, doctor, cabinetNumber } = message.data
          addNotification({
            type: "patient",
            title: "Appel patient",
            message: `${patient.firstname} ${patient.lastname} - Cabinet ${cabinetNumber}`,
            data: message.data,
            priority: "high",
            actionUrl: "/waiting-room",
          })
          break

case "message":
          const { from, subject, content } = message.data
          addNotification({
            type: "message",
            title: `Message de ${from.firstname} ${from.lastname}`,
            message: subject,
            data: message.data,
            priority: "medium",
            actionUrl: "/messages",
          })
          break

case "status_update":
          const { users } = message.data
          setOnlineUsers(users)
          break

case "user_activity":
          // Handle user online/offline status
          break

default:
          console.log("Unknown message type:", message.type)
      }
    },
    [addNotification],
  )

const sendMessage = useCallback(
    (message: WebSocketMessage) => {
      if (socket && socket.readyState === WebSocket.OPEN) {
        socket.send(
          JSON.stringify({
            ...message,
            timestamp: new Date(),
            from: user,
          }),
        )
      } else {
        addNotification({
          type: "error",
          title: "Erreur d'envoi",
          message: "Impossible d'envoyer le message. Connexion interrompue.",
          priority: "medium",
        })
      }
    },
    [socket, user, addNotification],
  )

const callPatient = useCallback(
    (patient: Patient, doctor: User, cabinetNumber: string) => {
      sendMessage({
        type: "patient_call",
        data: { patient, doctor, cabinetNumber },
        to: "all",
      })
    },
    [sendMessage],
  )

const updateAppointmentStatus = useCallback(
    (appointmentId: string, status: string, notes?: string) => {
      sendMessage({
        type: "appointment_update",
        data: {
          appointmentId,
          status,
          notes,
          updatedBy: user,
          action: `Statut changé vers: ${status}`,
        },
        to: "all",
      })
    },
    [sendMessage, user],
  )

const sendDirectMessage = useCallback(
    (recipient: User, subject: string, content: string) => {
      sendMessage({
        type: "message",
        data: {
          recipient,
          subject,
          content,
          isPrivate: true,
        },
        to: recipient,
      })
    },
    [sendMessage],
  )

const broadcastMessage = useCallback(
    (subject: string, content: string) => {
      sendMessage({
        type: "message",
        data: {
          subject,
          content,
          isBroadcast: true,
        },
        to: "all",
      })
    },
    [sendMessage],
  )

const updateUserStatus = useCallback(
    (status: "online" | "busy" | "away" | "offline") => {
      sendMessage({
        type: "user_activity",
        data: {
          userId: user?.id,
          status,
          timestamp: new Date(),
        },
        to: "all",
      })
    },
    [sendMessage, user],
  )

const markNotificationAsRead = useCallback((notificationId: string) => {
    setNotifications((prev) =>
      prev.map((notification) =>
        notification.id === notificationId ? { ...notification, isRead: true } : notification,
      ),
    )
  }, [])

const markAllNotificationsAsRead = useCallback(() => {
    setNotifications((prev) => prev.map((notification) => ({ ...notification, isRead: true })))
  }, [])

const clearNotifications = useCallback(() => {
    setNotifications([])
  }, [])

const unreadCount = notifications.filter((n) => !n.isRead).length

// Connect when user is authenticated
  useEffect(() => {
    if (isAuthenticated && user) {
      connect()
    } else {
      disconnect()
    }

return () => {
      disconnect()
    }
  }, [isAuthenticated, user, connect, disconnect])

// Cleanup on unmount
  useEffect(() => {
    return () => {
      if (reconnectTimeoutRef.current) {
        clearTimeout(reconnectTimeoutRef.current)
      }
      if (heartbeatIntervalRef.current) {
        clearInterval(heartbeatIntervalRef.current)
      }
    }
  }, [])

// Handle page visibility change
  useEffect(() => {
    const handleVisibilityChange = () => {
      if (document.hidden) {
        updateUserStatus("away")
      } else {
        updateUserStatus("online")
      }
    }

document.addEventListener("visibilitychange", handleVisibilityChange)
    return () => document.removeEventListener("visibilitychange", handleVisibilityChange)
  }, [updateUserStatus])

const value: WebSocketContextType = {
    isConnected,
    connectionStatus,
    notifications,
    unreadCount,
    onlineUsers,
    sendMessage,
    markNotificationAsRead,
    markAllNotificationsAsRead,
    clearNotifications,
    callPatient,
    updateAppointmentStatus,
    sendDirectMessage,
    broadcastMessage,
    updateUserStatus,
  }

return <WebSocketContext.Provider value={value}>{children}</WebSocketContext.Provider>
}
[V0_FILE]css:file="src/index.css"
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --toast-bg: #ffffff;
  --toast-color: #374151;
  --toast-border: #e5e7eb;
}

.dark {
  --toast-bg: #1f2937;
  --toast-color: #f9fafb;
  --toast-border: #374151;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

.dark ::-webkit-scrollbar-thumb {
  background: #475569;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

.dark ::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}
[V0_FILE]typescriptreact:file="src/main.tsx"
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.tsx';
import './index.css';

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>
);
[V0_FILE]typescript:file="src/types/index.ts"
export interface User {
  id: string
  firstname: string
  lastname: string
  phone: string
  email: string
  gender: "male" | "female"
  role: "admin" | "doctor" | "receptionist" | "nurse" | "technician" | "manager"
  username: string
  isActive: boolean
  createdAt: Date
  updatedAt: Date

// Doctor specific fields
  specialization?: string
  cabinetNumber?: string
  cabinet?: Cabinet
  agenda?: Appointment[]
  patients?: Patient[]
  medicalFiles?: MedicalFile[]
  prescriptions?: Prescription[]
  usedMedicines?: UsedMedicine[]
  messages?: Message[]
  factures?: Facture[]
  statistics?: Statistic[]
  historique?: HistoriqueEntry[]
  doctorRole?: "owner" | "employee" | "partner"
  workingHours?: WorkingHour[]
  consultationFee?: number
  rating?: number
  totalPatients?: number
  totalConsultations?: number
  access?: DoctorAccess
}

export interface DoctorAccess {
  viewOwnPatients: boolean
  viewOwnStats: boolean
  accessMedicalModules: boolean
  accessFinancialOwn: boolean
  globalStats: boolean
  adminPrivileges: boolean
}

export interface WorkingHour {
  id: string
  dayOfWeek: number // 0-6 (Sunday-Saturday)
  startTime: string // HH:MM format
  endTime: string // HH:MM format
  isActive: boolean
}

export interface Patient {
  id: string
  firstname: string
  lastname: string
  phone: string
  email: string
  gender: "male" | "female"
  city: string
  province: string
  patientType: "NEW_PATIENT" | "OLD_PATIENT"
  dateOfBirth: Date
  appointments: Appointment[]
  medicalFiles: MedicalFile[]
  factures: Facture[]
  createdAt: Date
  updatedAt: Date
  historique: HistoriqueEntry[]
  allergies: string[]
  chronicConditions: string[]
  totalVisits: number
  totalSpent: number
  emergencyContact?: EmergencyContact
  insurance?: Insurance
  notes?: string
}

export interface EmergencyContact {
  name: string
  relationship: string
  phone: string
}

export interface Insurance {
  provider: string
  policyNumber: string
  expiryDate: Date
  coveragePercentage: number
}

export interface Appointment {
  id: string
  patient: Patient
  doctor: User
  cabinet: Cabinet
  date: Date
  startTime: string
  endTime: string
  status: "scheduled" | "confirmed" | "in_progress" | "completed" | "cancelled" | "no_show"
  type: "consultation" | "follow_up" | "emergency" | "surgery" | "cleaning"
  reason: string
  notes?: string
  createdBy: User
  createdAt: Date
  updatedAt: Date
  reminderSent: boolean
  estimatedDuration: number
  actualDuration?: number
  services?: Service[]
  priority: "low" | "medium" | "high" | "urgent"
}

export interface Cabinet {
  id: string
  name: string
  number: string
  type: "consultation" | "surgery" | "radiology" | "laboratory"
  status: "available" | "occupied" | "maintenance" | "reserved"
  equipment: Equipment[]
  capacity: number
  floor: number
  createdAt: Date
  updatedAt: Date
}

export interface Equipment {
  id: string
  name: string
  type: string
  status: "working" | "maintenance" | "broken"
  lastMaintenance?: Date
  nextMaintenance?: Date
  serialNumber?: string
  purchaseDate?: Date
  warranty?: Date
}

export interface Service {
  id: string
  name: string
  description: string
  basePrice: number
  durationMinutes: number
  category: "consultation" | "treatment" | "surgery" | "diagnostic" | "preventive"
  isActive: boolean
}

export interface MedicalFile {
  id: string
  patient: Patient
  doctor: User
  date: Date
  description: string
  diagnostics: string[]
  treatments: Treatment[]
  prescriptions: Prescription[]
  labResults: LabResult[]
  radiologyResults: RadiologyResult[]
  photos: ImageResult[]
  referrals: Referral[]
  updatedBy: User
  medicalConditions: MedicalCondition[]
  notes: Note[]
  createdAt: Date
  updatedAt: Date
}

export interface Treatment {
  id: string
  name: string
  description: string
  startDate: Date
  endDate?: Date
  status: "planned" | "in_progress" | "completed" | "cancelled"
  cost: number
  notes?: string
  performedBy: User
}

export interface MedicalCondition {
  id: string
  name: string
  description: string
  severity: "mild" | "moderate" | "severe"
  diagnosedDate: Date
  status: "active" | "resolved" | "chronic"
}

export interface Note {
  id: string
  content: string
  type: "general" | "treatment" | "follow_up" | "warning"
  createdBy: User
  createdAt: Date
  isPrivate: boolean
}

export interface Prescription {
  id: string
  patient: Patient
  doctor: User
  medicalFile: MedicalFile
  medicines: PrescribedMedicine[]
  date: Date
  notes?: string
  status: "active" | "completed" | "cancelled"
  createdAt: Date
  updatedAt: Date
}

export interface PrescribedMedicine {
  medicine: Medicine
  dosage: string
  frequency: string
  duration: string
  quantity: number
  notes?: string
  cost: number
}

export interface Medicine {
  id: string
  name: string
  barcode: string
  quantity: number
  unit: string
  expiryDate: Date
  provider: string
  price: number
  minStockLevel: number
  category: string
  description?: string
  createdAt: Date
  updatedAt: Date
}

export interface UsedMedicine {
  id: string
  medicine: Medicine
  doctor: User
  patient: Patient
  quantity: number
  date: Date
  reason: string
  cost: number
}

export interface LabResult {
  id: string
  patient: Patient
  medicalFile: MedicalFile
  requestedBy: User
  performedBy: User
  testType: string
  results: LabTestResult[]
  status: "pending" | "in_progress" | "completed" | "cancelled"
  notes?: string
  createdAt: Date
  completedAt?: Date
}

export interface LabTestResult {
  parameter: string
  value: string
  unit: string
  referenceRange: string
  status: "normal" | "abnormal" | "critical"
}

export interface RadiologyResult {
  id: string
  patient: Patient
  medicalFile: MedicalFile
  requestedBy: User
  performedBy: User
  imageUrl: string
  type: "panoramic" | "lateral" | "3D" | "bitewing" | "periapical"
  findings: string
  recommendations?: string
  status: "pending" | "completed" | "reviewed"
  notes?: string
  uploadedBy: User
  reviewedBy?: User
  createdAt: Date
  completedAt?: Date
}

export interface ImageResult {
  id: string
  patient: Patient
  medicalFile: MedicalFile
  imageUrl: string
  thumbnailUrl?: string
  caption?: string
  category: "before" | "after" | "during" | "xray" | "clinical"
  tags: string[]
  uploadedBy: User
  createdAt: Date
}

export interface Referral {
  id: string
  patient: Patient
  referringDoctor: User
  referredTo: string
  specialty: string
  reason: string
  urgency: "routine" | "urgent" | "emergency"
  status: "pending" | "scheduled" | "completed"
  date: Date
  notes?: string
}

export interface Facture {
  id: string
  patient: Patient
  doctor: User
  services: Service[]
  medicines?: PrescribedMedicine[]
  totalAmount: number
  amountPaid: number
  discount: number
  tax: number
  paymentMethod: "cash" | "card" | "transfer" | "check" | "insurance"
  status: "paid" | "partial" | "unpaid" | "refunded" | "cancelled"
  date: Date
  dueDate?: Date
  createdBy: User
  notes?: string
  isPrinted: boolean
  barcode: string
  receiptNumber: string
  paymentHistory: Payment[]
  createdAt: Date
  updatedAt: Date
}

export interface Payment {
  id: string
  amount: number
  method: "cash" | "card" | "transfer" | "check" | "insurance"
  reference?: string
  receivedBy: User
  createdAt: Date
}

export interface Message {
  id: string
  sender: User
  recipient: User
  subject: string
  content: string
  isRead: boolean
  priority: "low" | "medium" | "high" | "urgent"
  attachments?: MessageAttachment[]
  createdAt: Date
  readAt?: Date
}

export interface MessageAttachment {
  id: string
  filename: string
  fileUrl: string
  fileSize: number
  mimeType: string
}

export interface Statistic {
  id: string
  doctor: User
  date: Date
  patientsCount: number
  appointmentsCount: number
  revenue: number
  averageConsultationTime: number
  patientSatisfaction?: number
  createdAt: Date
}

export interface HistoriqueEntry {
  id: string
  entityType: "patient" | "appointment" | "medical_file" | "prescription" | "facture"
  entityId: string
  action: "created" | "updated" | "deleted" | "viewed"
  description: string
  performedBy: User
  timestamp: Date
  metadata?: Record<string, any>
}

export interface WaitingRoomCall {
  id: string
  patient: Patient
  doctor: User
  cabinetNumber: string
  timestamp: Date
  status: "active" | "completed"
}

export interface Notification {
  id: string
  recipient: User
  title: string
  message: string
  type: "info" | "warning" | "error" | "success"
  isRead: boolean
  actionUrl?: string
  createdAt: Date
  readAt?: Date
}

export interface SystemBackup {
  id: string
  filename: string
  size: number
  type: "full" | "incremental"
  status: "in_progress" | "completed" | "failed"
  createdBy: User
  createdAt: Date
  completedAt?: Date
  downloadUrl?: string
}

export interface CallLog {
  id: string
  caller: string
  recipient?: User
  duration: number
  type: "incoming" | "outgoing" | "missed"
  status: "answered" | "missed" | "busy" | "no_answer"
  notes?: string
  createdAt: Date
}

export interface PatientFeedback {
  id: string
  patient: Patient
  doctor: User
  appointment: Appointment
  rating: number
  comment?: string
  categories: {
    punctuality: number
    professionalism: number
    communication: number
    facilities: number
    overall: number
  }
  isAnonymous: boolean
  createdAt: Date
}

export interface Role {
  id: string
  name: string
  description: string
  permissions: Permission[]
  isActive: boolean
  createdAt: Date
  updatedAt: Date
}

export interface Permission {
  id: string
  name: string
  resource: string
  action: "create" | "read" | "update" | "delete" | "manage"
  description: string
}

export interface SyncStatus {
  id: string
  module: string
  lastSync: Date
  status: "success" | "failed" | "in_progress"
  recordsProcessed: number
  errors?: string[]
}
[V0_FILE]typescript:file="src/vite-env.d.ts"
/// <reference types="vite/client" />
[V0_FILE]css:file="styles/globals.css"
@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  font-family: Arial, Helvetica, sans-serif;
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 3.9%;
    --primary: 0 0% 9%;
    --primary-foreground: 0 0% 98%;
    --secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;
    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;
    --accent: 0 0% 96.1%;
    --accent-foreground: 0 0% 9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 89.8%;
    --input: 0 0% 89.8%;
    --ring: 0 0% 3.9%;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
    --radius: 0.5rem;
    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
  .dark {
    --background: 0 0% 3.9%;
    --foreground: 0 0% 98%;
    --card: 0 0% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 0 0% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 0 0% 9%;
    --secondary: 0 0% 14.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 0 0% 14.9%;
    --muted-foreground: 0 0% 63.9%;
    --accent: 0 0% 14.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 14.9%;
    --input: 0 0% 14.9%;
    --ring: 0 0% 83.1%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}
[V0_FILE]javascript:file="tailwind.config.js"
/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
    "*.{js,ts,jsx,tsx,mdx}",
  ],
  prefix: "",
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      keyframes: {
        "accordion-down": {
          from: { height: "0" },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: "0" },
        },
        "fade-in-up": {
          "0%": {
            opacity: "0",
            transform: "translateY(20px)",
          },
          "100%": {
            opacity: "1",
            transform: "translateY(0)",
          },
        },
        "slide-in-right": {
          "0%": {
            opacity: "0",
            transform: "translateX(20px)",
          },
          "100%": {
            opacity: "1",
            transform: "translateX(0)",
          },
        },
        "pulse-blue": {
          "0%, 100%": {
            boxShadow: "0 0 0 0 rgba(59, 130, 246, 0.7)",
          },
          "70%": {
            boxShadow: "0 0 0 10px rgba(59, 130, 246, 0)",
          },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
        "fade-in-up": "fade-in-up 0.6s ease-out",
        "slide-in-right": "slide-in-right 0.4s ease-out",
        "pulse-blue": "pulse-blue 2s infinite",
      },
      boxShadow: {
        blue: "0 4px 14px 0 rgba(59, 130, 246, 0.15)",
        "blue-lg": "0 10px 25px -3px rgba(59, 130, 246, 0.1), 0 4px 6px -2px rgba(59, 130, 246, 0.05)",
      },
      backgroundImage: {
        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
        "gradient-conic": "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
        "blue-gradient": "linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%)",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
}
[V0_FILE]json:file="tsconfig.app.json"
{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

/* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "react-jsx",

/* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"]
}
[V0_FILE]json:file="tsconfig.json"
{
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "es6"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"],
      "@/components/*": ["./components/*"],
      "@/contexts/*": ["./contexts/*"],
      "@/types/*": ["./types/*"],
      "@/lib/*": ["./lib/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}
[V0_FILE]json:file="tsconfig.node.json"
{
  "compilerOptions": {
    "target": "ES2022",
    "lib": ["ES2023"],
    "module": "ESNext",
    "skipLibCheck": true,

/* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,

/* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["vite.config.ts"]
}
[V0_FILE]typescript:file="vite.config.ts"
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  optimizeDeps: {
    exclude: ['lucide-react'],
  },
});
[V0_FILE]png:file="public/placeholder-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_ltnHLPFmOkOaxxSXKKeiTtpaz4EK/1uv3SMJqY6_jxcFCTgTEak/public/placeholder-logo.png"
[V0_FILE]xml:file="public/placeholder-logo.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_ltnHLPFmOkOaxxSXKKeiTtpaz4EK/XB_XF8ESrwbAjotfOd5Wmb/public/placeholder-logo.svg"
[V0_FILE]jpg:file="public/placeholder-user.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_ltnHLPFmOkOaxxSXKKeiTtpaz4EK/ONejAluG3EJATcwwA61bXn/public/placeholder-user.jpg"
[V0_FILE]jpg:file="public/placeholder.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_ltnHLPFmOkOaxxSXKKeiTtpaz4EK/BlrBc_c6JuPtjsBHFMcNJn/public/placeholder.jpg"
[V0_FILE]xml:file="public/placeholder.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_ltnHLPFmOkOaxxSXKKeiTtpaz4EK/J0QvC3Vjlpi92ZtRdLC4Mx/public/placeholder.svg"</article></body></html>