elevenlabs-webhook-nodejs 1.0.0

package/frontend/src/pages/components-showcase.tsx

@@ -0,0 +1,773 @@
+import { useState } from "react"
+import {
+  Bell,
+  Calendar,
+  ChevronDown,
+  CircleAlert,
+  ClipboardList,
+  Heart,
+  Loader2,
+  Mail,
+  MessageSquare,
+  Moon,
+  PanelLeftClose,
+  PanelLeftOpen,
+  Phone,
+  Plus,
+  Search,
+  Settings,
+  Sun,
+  Trash2,
+  TrendingUp,
+  User,
+  Stethoscope,
+  Camera,
+  CheckCircle,
+  XCircle,
+  AlertTriangle,
+} from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Textarea } from "@/components/ui/textarea"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Checkbox } from "@/components/ui/checkbox"
+import { Switch } from "@/components/ui/switch"
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
+import { Separator } from "@/components/ui/separator"
+import { Avatar, AvatarFallback } from "@/components/ui/avatar"
+import { Badge } from "@/components/ui/badge"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
+import { Progress } from "@/components/ui/progress"
+import { Skeleton } from "@/components/ui/skeleton"
+import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "@/components/ui/breadcrumb"
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
+
+import {
+  PageHeader,
+  StatCard,
+  EmptyState,
+  StatusDot,
+  StatusBadge,
+  ConfirmDialog,
+  DataTableToolbar,
+  DataTablePagination,
+  AppointmentCalendar,
+  ChatBubble,
+  ActivityTimeline,
+  FileUpload,
+  NotificationDropdown,
+  Combobox,
+} from "@/components/shared"
+import type { TimelineItem, Notification as NotificationType } from "@/components/shared"
+
+/* ─── Constants ────────────────────────────────────────── */
+
+const sections = [
+  { id: "buttons", label: "Buttons" },
+  { id: "badges", label: "Badges & Status" },
+  { id: "inputs", label: "Inputs & Forms" },
+  { id: "cards", label: "Cards" },
+  { id: "table", label: "Table" },
+  { id: "tabs", label: "Tabs" },
+  { id: "alerts", label: "Alerts & Progress" },
+  { id: "dialog", label: "Dialog & Dropdown" },
+  { id: "avatars", label: "Avatars & Tooltips" },
+  { id: "skeleton", label: "Skeleton" },
+  { id: "empty", label: "Empty State" },
+  { id: "data-table", label: "Data Table Controls" },
+  { id: "chat", label: "Chat Bubbles" },
+  { id: "timeline", label: "Activity Timeline" },
+  { id: "upload", label: "File Upload" },
+  { id: "notifications", label: "Notifications" },
+  { id: "combobox", label: "Combobox" },
+  { id: "calendar", label: "Calendar" },
+  { id: "confirm", label: "Confirm Dialog" },
+] as const
+
+const sampleTimeline: TimelineItem[] = [
+  { id: "1", title: "Appointment completed", description: "Root canal — Dr. Mehmet", timestamp: new Date(2026, 3, 3, 10, 30), type: "success", icon: <CheckCircle className="w-3.5 h-3.5" /> },
+  { id: "2", title: "AI session resolved", description: "Patient asked about implant pricing. Lead created.", timestamp: new Date(2026, 3, 3, 9, 15), type: "info", icon: <MessageSquare className="w-3.5 h-3.5" /> },
+  { id: "3", title: "Photos uploaded", description: "Before set — 4 photos (front, left, right, smile)", timestamp: new Date(2026, 3, 2, 14, 0), type: "default", icon: <Camera className="w-3.5 h-3.5" /> },
+  { id: "4", title: "Appointment cancelled", description: "Patient no-show for teeth whitening", timestamp: new Date(2026, 3, 1, 16, 0), type: "error", icon: <XCircle className="w-3.5 h-3.5" /> },
+  { id: "5", title: "Treatment plan created", description: "Full Mouth Rehabilitation — 5 items", timestamp: new Date(2026, 2, 28, 11, 0), type: "warning", icon: <ClipboardList className="w-3.5 h-3.5" /> },
+  { id: "6", title: "First contact via WhatsApp", description: "Patient inquired about dental cleaning", timestamp: new Date(2026, 2, 15, 8, 30), type: "info", icon: <Phone className="w-3.5 h-3.5" /> },
+]
+
+const sampleNotifications: NotificationType[] = [
+  { id: "1", title: "New appointment booked", body: "Ayse Yilmaz booked root canal for Apr 8 at 09:00", type: "success", read: false, timestamp: new Date(2026, 3, 3, 10, 5) },
+  { id: "2", title: "Operator request expired", body: "REF: R-AB2X — Doctor did not respond within 24h", type: "error", read: false, timestamp: new Date(2026, 3, 3, 9, 30) },
+  { id: "3", title: "AI session active", body: "New WhatsApp conversation from +90 555 987 6543", type: "info", read: false, timestamp: new Date(2026, 3, 3, 9, 12) },
+  { id: "4", title: "Billing alert", body: "Inbound call minutes at 90% of plan limit", type: "warning", read: true, timestamp: new Date(2026, 3, 2, 17, 0) },
+  { id: "5", title: "Batch validation complete", body: "Monday Appointments — 18 confirmed, 2 rescheduled", type: "success", read: true, timestamp: new Date(2026, 3, 2, 14, 30) },
+]
+
+const patientOptions = [
+  { value: "p1", label: "Ayse Yilmaz", description: "+90 555 123 4567", icon: <User className="w-4 h-4 text-muted-foreground" /> },
+  { value: "p2", label: "Fatma Demir", description: "+90 555 234 5678", icon: <User className="w-4 h-4 text-muted-foreground" /> },
+  { value: "p3", label: "Ahmet Kaya", description: "+90 555 345 6789", icon: <User className="w-4 h-4 text-muted-foreground" /> },
+  { value: "p4", label: "Zeynep Ozturk", description: "+90 555 456 7890", icon: <User className="w-4 h-4 text-muted-foreground" /> },
+  { value: "p5", label: "Murat Celik", description: "+90 555 567 8901", icon: <User className="w-4 h-4 text-muted-foreground" /> },
+  { value: "p6", label: "Selin Yildiz", description: "+90 555 678 9012", icon: <User className="w-4 h-4 text-muted-foreground" /> },
+]
+
+/* ─── Helpers ──────────────────────────────────────────── */
+
+function Section({ id, title, description, children }: { id: string; title: string; description?: string; children: React.ReactNode }) {
+  return (
+    <section id={id} className="scroll-mt-20 space-y-6">
+      <div>
+        <h2 className="text-xl font-semibold tracking-tight">{title}</h2>
+        {description && <p className="text-sm text-muted-foreground mt-1">{description}</p>}
+      </div>
+      {children}
+    </section>
+  )
+}
+
+/* ─── App ──────────────────────────────────────────────── */
+
+function App() {
+  const [darkMode, setDarkMode] = useState(false)
+  const [sidebarOpen, setSidebarOpen] = useState(true)
+  const [activeSection, setActiveSection] = useState("buttons")
+  const [progress, setProgress] = useState(65)
+  const [switchOn, setSwitchOn] = useState(true)
+  const [dialogOpen, setDialogOpen] = useState(false)
+  const [comboValue, setComboValue] = useState("")
+  const [notifications, setNotifications] = useState(sampleNotifications)
+
+  const toggleDark = () => {
+    setDarkMode(!darkMode)
+    document.documentElement.classList.toggle("dark")
+  }
+
+  const scrollTo = (id: string) => {
+    setActiveSection(id)
+    document.getElementById(id)?.scrollIntoView({ behavior: "smooth" })
+  }
+
+  return (
+    <TooltipProvider>
+      <div className="min-h-screen bg-background text-foreground">
+
+        {/* ── Header ─────────────────────────────────── */}
+        <header className="sticky top-0 z-50 border-b border-border bg-background/80 backdrop-blur-md">
+          <div className="max-w-[1440px] mx-auto px-4 h-14 flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <Button variant="ghost" size="icon" onClick={() => setSidebarOpen(!sidebarOpen)} className="lg:flex">
+                {sidebarOpen ? <PanelLeftClose className="w-4 h-4" /> : <PanelLeftOpen className="w-4 h-4" />}
+              </Button>
+              <div className="w-8 h-8 rounded-lg bg-primary flex items-center justify-center shadow-sm">
+                <Heart className="w-4 h-4 text-primary-foreground" />
+              </div>
+              <span className="font-semibold tracking-tight hidden sm:inline">Portal Asistan 7/24</span>
+              <Badge variant="secondary" className="text-[10px] font-mono uppercase tracking-wider hidden sm:inline-flex">Design System</Badge>
+            </div>
+            <div className="flex items-center gap-2">
+              <NotificationDropdown
+                notifications={notifications}
+                onMarkRead={(id) => setNotifications(notifications.map((n) => n.id === id ? { ...n, read: true } : n))}
+                onMarkAllRead={() => setNotifications(notifications.map((n) => ({ ...n, read: true })))}
+                onClear={() => setNotifications([])}
+              />
+              <Button variant="ghost" size="icon" onClick={toggleDark}>
+                {darkMode ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
+              </Button>
+              <Avatar className="w-8 h-8">
+                <AvatarFallback className="bg-primary text-primary-foreground text-xs font-medium">TA</AvatarFallback>
+              </Avatar>
+            </div>
+          </div>
+        </header>
+
+        {/* ── Layout ─────────────────────────────────── */}
+        <div className="max-w-[1440px] mx-auto flex">
+
+          {/* ── Sidebar ───────────────────────────────── */}
+          <aside className={`${sidebarOpen ? "w-52" : "w-0"} shrink-0 sticky top-14 h-[calc(100vh-3.5rem)] border-r border-border overflow-hidden transition-all duration-200`}>
+            <div className="w-52 py-5 px-3 overflow-y-auto h-full">
+              <p className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest mb-2 px-2.5">Components</p>
+              <nav className="space-y-0.5">
+                {sections.map((s) => (
+                  <button
+                    key={s.id}
+                    onClick={() => scrollTo(s.id)}
+                    className={`w-full text-left px-2.5 py-1.5 rounded-md text-[13px] transition-colors ${activeSection === s.id ? "bg-primary/10 text-primary font-medium" : "text-muted-foreground hover:text-foreground hover:bg-muted"}`}
+                  >
+                    {s.label}
+                  </button>
+                ))}
+              </nav>
+              <Separator className="my-5" />
+              <div className="px-2.5 space-y-1.5">
+                <p className="text-[11px] text-muted-foreground">33 shadcn/ui + 14 custom</p>
+                <p className="text-[11px] text-muted-foreground">Tailwind CSS v4</p>
+                <p className="text-[11px] text-muted-foreground">React 19 + Compiler</p>
+              </div>
+            </div>
+          </aside>
+
+          {/* ── Content ───────────────────────────────── */}
+          <main className="flex-1 min-w-0 px-6 lg:px-10 py-8 space-y-14">
+
+            {/* Hero */}
+            <div>
+              <Breadcrumb>
+                <BreadcrumbList>
+                  <BreadcrumbItem><BreadcrumbLink href="#">Dashboard</BreadcrumbLink></BreadcrumbItem>
+                  <BreadcrumbSeparator />
+                  <BreadcrumbItem><BreadcrumbPage>Design System</BreadcrumbPage></BreadcrumbItem>
+                </BreadcrumbList>
+              </Breadcrumb>
+              <div className="mt-3 space-y-1">
+                <h1 className="text-3xl font-bold tracking-tight">Component Showcase</h1>
+                <p className="text-muted-foreground">Every UI primitive themed with <span className="text-primary font-semibold">#e77d22</span> — 47 components ready for production.</p>
+              </div>
+            </div>
+
+            {/* ── Buttons ─────────────────────────────── */}
+            <Section id="buttons" title="Buttons" description="Primary actions, secondary options, and icon triggers.">
+              <Card>
+                <CardContent className="pt-6 space-y-6">
+                  <div>
+                    <p className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest mb-3">Variants</p>
+                    <div className="flex flex-wrap gap-2.5">
+                      <Button>Primary</Button>
+                      <Button variant="secondary">Secondary</Button>
+                      <Button variant="destructive">Destructive</Button>
+                      <Button variant="outline">Outline</Button>
+                      <Button variant="ghost">Ghost</Button>
+                      <Button variant="link">Link</Button>
+                    </div>
+                  </div>
+                  <Separator />
+                  <div>
+                    <p className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest mb-3">Sizes & States</p>
+                    <div className="flex flex-wrap items-center gap-2.5">
+                      <Button size="xs">Extra Small</Button>
+                      <Button size="sm">Small</Button>
+                      <Button>Default</Button>
+                      <Button size="lg">Large</Button>
+                      <Button size="icon"><Plus className="w-4 h-4" /></Button>
+                      <Button disabled>Disabled</Button>
+                      <Button><Loader2 className="w-4 h-4 mr-1.5 animate-spin" />Loading</Button>
+                      <Button><Mail className="w-4 h-4 mr-1.5" />With Icon</Button>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            </Section>
+
+            {/* ── Badges & Status ─────────────────────── */}
+            <Section id="badges" title="Badges & Status" description="Status indicators for every entity in the system.">
+              <Card>
+                <CardContent className="pt-6 space-y-5">
+                  <div>
+                    <p className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest mb-3">shadcn Badges</p>
+                    <div className="flex flex-wrap gap-2">
+                      <Badge>Default</Badge>
+                      <Badge variant="secondary">Secondary</Badge>
+                      <Badge variant="destructive">Destructive</Badge>
+                      <Badge variant="outline">Outline</Badge>
+                    </div>
+                  </div>
+                  <Separator />
+                  <div>
+                    <p className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest mb-3">Appointment Statuses</p>
+                    <div className="flex flex-wrap gap-2">
+                      {["scheduled", "confirmed", "in_progress", "completed", "cancelled", "no_show"].map((s) => <StatusBadge key={s} status={s} />)}
+                    </div>
+                  </div>
+                  <div>
+                    <p className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest mb-3">Sessions, Leads, Campaigns, Calls</p>
+                    <div className="flex flex-wrap gap-2">
+                      {["active", "waiting", "resolved", "new_lead", "contacted", "draft", "running", "paused", "pending", "responded", "expired", "failed", "no_answer", "voicemail"].map((s) => <StatusBadge key={s} status={s} />)}
+                    </div>
+                  </div>
+                  <Separator />
+                  <div>
+                    <p className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest mb-3">Status Dots</p>
+                    <div className="flex flex-wrap gap-6">
+                      <StatusDot status="active" label="Active" pulse />
+                      <StatusDot status="waiting" label="Waiting" pulse />
+                      <StatusDot status="offline" label="Offline" />
+                      <StatusDot status="busy" label="Busy" />
+                      <StatusDot status="completed" label="Done" />
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            </Section>
+
+            {/* ── Inputs & Forms ──────────────────────── */}
+            <Section id="inputs" title="Inputs & Forms" description="Text fields, selects, checkboxes, switches, and radio groups.">
+              <Card>
+                <CardContent className="pt-6 space-y-6">
+                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
+                    <div className="space-y-1.5">
+                      <Label htmlFor="inp-name">Patient Name</Label>
+                      <Input id="inp-name" placeholder="Ayse Yilmaz" />
+                    </div>
+                    <div className="space-y-1.5">
+                      <Label htmlFor="inp-phone">Phone</Label>
+                      <Input id="inp-phone" type="tel" placeholder="+90 555 123 4567" />
+                    </div>
+                    <div className="space-y-1.5">
+                      <Label htmlFor="inp-search">Search</Label>
+                      <div className="relative">
+                        <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+                        <Input id="inp-search" className="pl-9" placeholder="Search patients..." />
+                      </div>
+                    </div>
+                    <div className="space-y-1.5">
+                      <Label>Clinic Branch</Label>
+                      <Select>
+                        <SelectTrigger><SelectValue placeholder="Select clinic" /></SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="kadikoy">Kadikoy</SelectItem>
+                          <SelectItem value="besiktas">Besiktas</SelectItem>
+                          <SelectItem value="atasehir">Atasehir</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                    <div className="space-y-1.5 md:col-span-2">
+                      <Label htmlFor="inp-notes">Clinical Notes</Label>
+                      <Textarea id="inp-notes" placeholder="Enter examination findings..." rows={3} />
+                    </div>
+                  </div>
+                  <Separator />
+                  <div className="flex flex-wrap gap-8">
+                    <div className="flex items-center gap-2">
+                      <Checkbox id="cb-consent" />
+                      <Label htmlFor="cb-consent" className="text-sm">KVKK consent</Label>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <Switch checked={switchOn} onCheckedChange={setSwitchOn} />
+                      <Label className="text-sm">AI Agent {switchOn ? "Active" : "Inactive"}</Label>
+                    </div>
+                  </div>
+                  <Separator />
+                  <div>
+                    <p className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest mb-3">Radio Group</p>
+                    <RadioGroup defaultValue="whatsapp" className="flex gap-4">
+                      {[["whatsapp", "WhatsApp"], ["voice", "Voice Call"], ["instagram", "Instagram"]].map(([v, l]) => (
+                        <div key={v} className="flex items-center gap-2">
+                          <RadioGroupItem value={v} id={`rg-${v}`} />
+                          <Label htmlFor={`rg-${v}`} className="text-sm">{l}</Label>
+                        </div>
+                      ))}
+                    </RadioGroup>
+                  </div>
+                </CardContent>
+              </Card>
+            </Section>
+
+            {/* ── Cards ───────────────────────────────── */}
+            <Section id="cards" title="Cards" description="KPI stat cards and content cards.">
+              <PageHeader title="Dashboard" description="Overview of today's clinic activity">
+                <Button variant="outline" size="sm"><Settings className="w-4 h-4 mr-1.5" />Settings</Button>
+              </PageHeader>
+              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+                <StatCard title="Total Patients" value="1,284" icon={<User className="w-4 h-4" />} trend={{ value: "12%", positive: true }} description="from last month" />
+                <StatCard title="Appointments" value={18} icon={<Calendar className="w-4 h-4" />} description="3 done, 15 upcoming" />
+                <StatCard title="AI Sessions" value={5} icon={<MessageSquare className="w-4 h-4" />} trend={{ value: "2", positive: true }} description="vs yesterday" />
+                <StatCard title="Open Leads" value={23} icon={<TrendingUp className="w-4 h-4" />} trend={{ value: "8%", positive: false }} description="from last week" />
+              </div>
+              <Card>
+                <CardHeader>
+                  <CardTitle>Patient Profile</CardTitle>
+                  <CardDescription>View and manage patient information</CardDescription>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                  <div className="flex items-center gap-4">
+                    <Avatar className="w-14 h-14">
+                      <AvatarFallback className="bg-primary/10 text-primary text-lg font-semibold">AY</AvatarFallback>
+                    </Avatar>
+                    <div>
+                      <p className="font-semibold">Ayse Yilmaz</p>
+                      <p className="text-sm text-muted-foreground">+90 555 123 4567</p>
+                      <div className="flex gap-1.5 mt-1">
+                        <Badge variant="outline" className="text-[10px]">VIP</Badge>
+                        <Badge variant="outline" className="text-[10px]">Dental</Badge>
+                        <StatusBadge status="active" className="text-[10px]" />
+                      </div>
+                    </div>
+                  </div>
+                  <Separator />
+                  <div className="grid grid-cols-3 gap-4 text-sm">
+                    <div><span className="text-muted-foreground text-xs">Last Visit</span><p className="font-medium">Mar 15, 2026</p></div>
+                    <div><span className="text-muted-foreground text-xs">Treatment</span><p className="font-medium">Full Mouth Rehab</p></div>
+                    <div><span className="text-muted-foreground text-xs">Next Appt</span><p className="font-medium">Apr 8, 09:00</p></div>
+                  </div>
+                </CardContent>
+                <CardFooter className="flex gap-2">
+                  <Button size="sm">View Profile</Button>
+                  <Button size="sm" variant="outline">Book Appointment</Button>
+                </CardFooter>
+              </Card>
+            </Section>
+
+            {/* ── Table ───────────────────────────────── */}
+            <Section id="table" title="Table" description="Data grids for appointments, patients, calls, and leads.">
+              <Card>
+                <CardContent className="pt-6">
+                  <Table>
+                    <TableHeader>
+                      <TableRow>
+                        <TableHead>Patient</TableHead>
+                        <TableHead>Treatment</TableHead>
+                        <TableHead>Doctor</TableHead>
+                        <TableHead>Time</TableHead>
+                        <TableHead>Status</TableHead>
+                      </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                      {[
+                        { name: "Ayse Yilmaz", tx: "Root Canal", doc: "Dr. Mehmet", time: "09:00", st: "completed" },
+                        { name: "Fatma Demir", tx: "Implant Consult", doc: "Dr. Elif", time: "10:30", st: "in_progress" },
+                        { name: "Ahmet Kaya", tx: "Whitening", doc: "Dr. Mehmet", time: "14:00", st: "scheduled" },
+                        { name: "Zeynep Ozturk", tx: "Botox", doc: "Dr. Elif", time: "15:30", st: "confirmed" },
+                        { name: "Murat Celik", tx: "Cleaning", doc: "Dr. Mehmet", time: "16:00", st: "no_show" },
+                      ].map((r) => (
+                        <TableRow key={r.name}>
+                          <TableCell className="font-medium">{r.name}</TableCell>
+                          <TableCell>{r.tx}</TableCell>
+                          <TableCell>{r.doc}</TableCell>
+                          <TableCell className="tabular-nums">{r.time}</TableCell>
+                          <TableCell><StatusBadge status={r.st} /></TableCell>
+                        </TableRow>
+                      ))}
+                    </TableBody>
+                  </Table>
+                </CardContent>
+              </Card>
+            </Section>
+
+            {/* ── Tabs ────────────────────────────────── */}
+            <Section id="tabs" title="Tabs" description="Content sections for patient detail pages.">
+              <Tabs defaultValue="overview">
+                <TabsList>
+                  {["Overview", "Appointments", "Treatment Plan", "Before / After", "Documents"].map((t) => (
+                    <TabsTrigger key={t} value={t.toLowerCase().replace(/ \/ /g, "-").replace(/ /g, "-")}>{t}</TabsTrigger>
+                  ))}
+                </TabsList>
+                {["overview", "appointments", "treatment-plan", "before-after", "documents"].map((v) => (
+                  <TabsContent key={v} value={v} className="mt-4">
+                    <Card><CardContent className="pt-6"><p className="text-sm text-muted-foreground">Content for {v.replace(/-/g, " ")} tab.</p></CardContent></Card>
+                  </TabsContent>
+                ))}
+              </Tabs>
+            </Section>
+
+            {/* ── Alerts & Progress ────────────────────── */}
+            <Section id="alerts" title="Alerts & Progress" description="Notifications, warnings, and progress indicators.">
+              <div className="space-y-3">
+                <Alert>
+                  <AlertTriangle className="w-4 h-4" />
+                  <AlertTitle>Anamnesis Incomplete</AlertTitle>
+                  <AlertDescription>Patient Ayse Yilmaz has not completed the medical history form.</AlertDescription>
+                </Alert>
+                <Alert variant="destructive">
+                  <CircleAlert className="w-4 h-4" />
+                  <AlertTitle>Operator Request Expired</AlertTitle>
+                  <AlertDescription>REF: R-AB2X — Doctor did not respond within 24 hours.</AlertDescription>
+                </Alert>
+              </div>
+              <Card>
+                <CardContent className="pt-6 space-y-4">
+                  <div className="space-y-2 max-w-md">
+                    <div className="flex justify-between text-sm">
+                      <span>Treatment Plan Progress</span>
+                      <span className="text-muted-foreground tabular-nums">{progress}%</span>
+                    </div>
+                    <Progress value={progress} />
+                  </div>
+                  <div className="flex gap-2">
+                    <Button size="xs" variant="outline" onClick={() => setProgress(Math.max(0, progress - 15))}>-15%</Button>
+                    <Button size="xs" variant="outline" onClick={() => setProgress(Math.min(100, progress + 15))}>+15%</Button>
+                  </div>
+                </CardContent>
+              </Card>
+            </Section>
+
+            {/* ── Dialog & Dropdown ────────────────────── */}
+            <Section id="dialog" title="Dialog & Dropdown" description="Modal forms and context menus.">
+              <div className="flex flex-wrap gap-3">
+                <Button onClick={() => setDialogOpen(true)}><Plus className="w-4 h-4 mr-1.5" />New Appointment</Button>
+                <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+                  <DialogContent>
+                    <DialogHeader>
+                      <DialogTitle>Book Appointment</DialogTitle>
+                      <DialogDescription>Schedule a new appointment for the patient.</DialogDescription>
+                    </DialogHeader>
+                    <div className="space-y-4 py-2">
+                      <div className="space-y-1.5"><Label>Patient</Label><Input placeholder="Search patient..." /></div>
+                      <div className="grid grid-cols-2 gap-4">
+                        <div className="space-y-1.5"><Label>Date</Label><Input type="date" /></div>
+                        <div className="space-y-1.5"><Label>Time</Label><Input type="time" /></div>
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label>Treatment</Label>
+                        <Select><SelectTrigger><SelectValue placeholder="Select treatment" /></SelectTrigger>
+                          <SelectContent>
+                            <SelectItem value="cleaning">Cleaning</SelectItem>
+                            <SelectItem value="rootcanal">Root Canal</SelectItem>
+                            <SelectItem value="implant">Implant</SelectItem>
+                          </SelectContent>
+                        </Select>
+                      </div>
+                    </div>
+                    <DialogFooter>
+                      <Button variant="outline" onClick={() => setDialogOpen(false)}>Cancel</Button>
+                      <Button onClick={() => setDialogOpen(false)}>Book</Button>
+                    </DialogFooter>
+                  </DialogContent>
+                </Dialog>
+
+                <DropdownMenu>
+                  <DropdownMenuTrigger className="inline-flex items-center gap-1.5 rounded-lg border border-input bg-input-background px-2.5 h-8 text-sm font-medium shadow-xs hover:bg-muted cursor-pointer">
+                    <Settings className="w-4 h-4" /> Actions <ChevronDown className="w-3.5 h-3.5 text-muted-foreground" />
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="start">
+                    <DropdownMenuGroup>
+                      <DropdownMenuLabel>Patient Actions</DropdownMenuLabel>
+                      <DropdownMenuItem><User className="w-4 h-4 mr-2" />View Profile</DropdownMenuItem>
+                      <DropdownMenuItem><Calendar className="w-4 h-4 mr-2" />Book Appointment</DropdownMenuItem>
+                      <DropdownMenuItem><MessageSquare className="w-4 h-4 mr-2" />Send Message</DropdownMenuItem>
+                    </DropdownMenuGroup>
+                    <DropdownMenuSeparator />
+                    <DropdownMenuItem className="text-destructive"><Trash2 className="w-4 h-4 mr-2" />Delete</DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </div>
+            </Section>
+
+            {/* ── Avatars & Tooltips ───────────────────── */}
+            <Section id="avatars" title="Avatars & Tooltips" description="User avatars with tooltip details.">
+              <Card>
+                <CardContent className="pt-6 flex items-center gap-6 flex-wrap">
+                  <div>
+                    <p className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest mb-3">Doctors</p>
+                    <div className="flex -space-x-2">
+                      {[{ i: "M", c: "bg-primary/10 text-primary", n: "Mehmet" }, { i: "E", c: "bg-blue-500/10 text-blue-600", n: "Elif" }, { i: "A", c: "bg-purple-500/10 text-purple-600", n: "Ayse" }].map((d) => (
+                        <Tooltip key={d.i}>
+                          <TooltipTrigger className="cursor-default">
+                            <Avatar className="w-10 h-10 border-2 border-background"><AvatarFallback className={`${d.c} text-sm font-medium`}>{d.i}</AvatarFallback></Avatar>
+                          </TooltipTrigger>
+                          <TooltipContent>Dr. {d.n}</TooltipContent>
+                        </Tooltip>
+                      ))}
+                    </div>
+                  </div>
+                  <Separator orientation="vertical" className="h-12" />
+                  <div>
+                    <p className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest mb-3">Icons</p>
+                    <div className="flex gap-2">
+                      {[{ icon: <Bell className="w-4 h-4" />, tip: "Notifications" }, { icon: <Phone className="w-4 h-4" />, tip: "Call" }, { icon: <Stethoscope className="w-4 h-4" />, tip: "Examination" }].map((t) => (
+                        <Tooltip key={t.tip}>
+                          <TooltipTrigger className="inline-flex items-center justify-center rounded-lg border border-input bg-input-background h-9 w-9 shadow-xs hover:bg-muted cursor-pointer">{t.icon}</TooltipTrigger>
+                          <TooltipContent>{t.tip}</TooltipContent>
+                        </Tooltip>
+                      ))}
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            </Section>
+
+            {/* ── Skeleton ────────────────────────────── */}
+            <Section id="skeleton" title="Skeleton" description="Loading placeholders for async content.">
+              <Card>
+                <CardContent className="pt-6 space-y-6">
+                  <div className="flex items-center gap-4">
+                    <Skeleton className="w-12 h-12 rounded-full" />
+                    <div className="space-y-2 flex-1"><Skeleton className="h-4 w-48" /><Skeleton className="h-3 w-32" /></div>
+                    <Skeleton className="h-8 w-24 rounded-lg" />
+                  </div>
+                  <div className="space-y-2">
+                    <Skeleton className="h-3 w-full" /><Skeleton className="h-3 w-4/5" /><Skeleton className="h-3 w-3/5" />
+                  </div>
+                </CardContent>
+              </Card>
+            </Section>
+
+            {/* ── Empty State ─────────────────────────── */}
+            <Section id="empty" title="Empty State" description="Friendly message when no data exists.">
+              <Card>
+                <EmptyState
+                  icon={<Calendar className="w-6 h-6" />}
+                  title="No appointments today"
+                  description="There are no scheduled appointments for today. Book a new one or check another date."
+                  action={<Button size="sm"><Plus className="w-4 h-4 mr-1.5" />Book Appointment</Button>}
+                />
+              </Card>
+            </Section>
+
+            {/* ── Data Table Controls ──────────────────── */}
+            <Section id="data-table" title="Data Table Controls" description="Toolbar with search/filters and pagination.">
+              <Card>
+                <CardContent className="pt-6 space-y-4">
+                  <DataTableToolbar
+                    searchPlaceholder="Search patients..."
+                    filters={
+                      <Select><SelectTrigger className="w-[150px]"><SelectValue placeholder="All clinics" /></SelectTrigger>
+                        <SelectContent><SelectItem value="all">All Clinics</SelectItem><SelectItem value="kadikoy">Kadikoy</SelectItem></SelectContent>
+                      </Select>
+                    }
+                    actions={<Button size="sm"><Plus className="w-4 h-4 mr-1.5" />Add</Button>}
+                  />
+                  <Separator />
+                  <DataTablePagination page={2} pageSize={20} totalItems={284} onPageChange={() => {}} onPageSizeChange={() => {}} />
+                </CardContent>
+              </Card>
+            </Section>
+
+            {/* ── Chat Bubbles ─────────────────────────── */}
+            <Section id="chat" title="Chat Bubbles" description="WhatsApp-style message display for live chat.">
+              <Card>
+                <CardContent className="pt-6 space-y-3 max-w-lg mx-auto">
+                  <ChatBubble sender="system" text="Session started — AI agent activated" timestamp={new Date(2026, 3, 3, 9, 0)} />
+                  <ChatBubble sender="contact" senderName="Ayse" text="Merhaba, dis temizligi icin randevu almak istiyorum." timestamp={new Date(2026, 3, 3, 9, 1)} />
+                  <ChatBubble sender="ai" text="Merhaba Ayse Hanim! Dis temizligi icin musait zamanlari kontrol ediyorum. Hangi gun uygun olur sizin icin?" timestamp={new Date(2026, 3, 3, 9, 1)} />
+                  <ChatBubble sender="contact" senderName="Ayse" text="Bu cuma olabilir mi?" timestamp={new Date(2026, 3, 3, 9, 2)} />
+                  <ChatBubble sender="ai" text="Cuma gunu 10:00 ve 14:30 saatlerinde musaitlik var. Hangisini tercih edersiniz?" timestamp={new Date(2026, 3, 3, 9, 2)} />
+                  <ChatBubble sender="contact" senderName="Ayse" text="10:00 olsun lutfen" timestamp={new Date(2026, 3, 3, 9, 3)} />
+                  <ChatBubble sender="human" senderName="Receptionist" text="Randevunuz onaylandi. Cuma 10:00'da bekliyoruz!" timestamp={new Date(2026, 3, 3, 9, 5)} />
+                  <ChatBubble sender="contact" senderName="Ayse" text="Tesekkurler!" mediaType="imageMessage" timestamp={new Date(2026, 3, 3, 9, 6)} />
+                </CardContent>
+              </Card>
+            </Section>
+
+            {/* ── Activity Timeline ────────────────────── */}
+            <Section id="timeline" title="Activity Timeline" description="Chronological activity feed for patient detail pages.">
+              <Card>
+                <CardContent className="pt-6">
+                  <ActivityTimeline items={sampleTimeline} />
+                </CardContent>
+              </Card>
+            </Section>
+
+            {/* ── File Upload ──────────────────────────── */}
+            <Section id="upload" title="File Upload" description="Drag-and-drop file upload for documents and photos.">
+              <Card>
+                <CardContent className="pt-6">
+                  <div className="max-w-md mx-auto">
+                    <FileUpload
+                      accept="image/*,.pdf"
+                      multiple
+                      maxFiles={5}
+                      maxSizeMB={10}
+                      label="Upload patient documents"
+                      description="Images and PDFs up to 10MB each. Max 5 files."
+                      onFilesChange={() => {}}
+                    />
+                  </div>
+                </CardContent>
+              </Card>
+            </Section>
+
+            {/* ── Notifications ────────────────────────── */}
+            <Section id="notifications" title="Notifications" description="Real-time notification dropdown with unread tracking.">
+              <Card>
+                <CardContent className="pt-6">
+                  <p className="text-sm text-muted-foreground mb-3">The notification bell in the header above is live — click it to see the dropdown. It shows {notifications.filter((n) => !n.read).length} unread notifications.</p>
+                  <div className="flex gap-3">
+                    <Button size="sm" variant="outline" onClick={() => setNotifications(sampleNotifications)}>Reset Notifications</Button>
+                    <Button size="sm" variant="outline" onClick={() => setNotifications([...notifications, { id: String(Date.now()), title: "New lead created", body: "Patient from WhatsApp ad — interested in implants", type: "info" as const, read: false, timestamp: new Date() }])}>
+                      <Plus className="w-4 h-4 mr-1.5" />Add Notification
+                    </Button>
+                  </div>
+                </CardContent>
+              </Card>
+            </Section>
+
+            {/* ── Combobox ─────────────────────────────── */}
+            <Section id="combobox" title="Combobox" description="Searchable select for patients, doctors, and treatments.">
+              <Card>
+                <CardContent className="pt-6">
+                  <div className="max-w-sm space-y-1.5">
+                    <Label>Select Patient</Label>
+                    <Combobox
+                      options={patientOptions}
+                      value={comboValue}
+                      onSelect={setComboValue}
+                      placeholder="Search patients..."
+                      searchPlaceholder="Type name or phone..."
+                    />
+                    {comboValue && <p className="text-xs text-muted-foreground mt-2">Selected: {patientOptions.find((o) => o.value === comboValue)?.label}</p>}
+                  </div>
+                </CardContent>
+              </Card>
+            </Section>
+
+            {/* ── Calendar ────────────────────────────── */}
+            <Section id="calendar" title="Appointment Calendar" description="Week/day/month views with color-coded doctors and drag-and-drop.">
+              <Card>
+                <CardContent className="pt-6">
+                  <AppointmentCalendar
+                    defaultView="week"
+                    doctors={[
+                      { id: "dr-mehmet", name: "Dr. Mehmet", color: "#e77d22" },
+                      { id: "dr-elif", name: "Dr. Elif", color: "#3b82f6" },
+                      { id: "dr-ayse", name: "Dr. Ayse", color: "#8b5cf6" },
+                    ]}
+                    events={[
+                      { id: "1", title: "Ayse Y. — Root Canal", start: "2026-04-06 09:00", end: "2026-04-06 10:00", calendarId: "dr-mehmet" },
+                      { id: "2", title: "Fatma D. — Implant", start: "2026-04-06 10:30", end: "2026-04-06 11:30", calendarId: "dr-elif" },
+                      { id: "3", title: "Ahmet K. — Whitening", start: "2026-04-06 14:00", end: "2026-04-06 14:30", calendarId: "dr-mehmet" },
+                      { id: "4", title: "Zeynep O. — Botox", start: "2026-04-07 09:00", end: "2026-04-07 09:45", calendarId: "dr-ayse" },
+                      { id: "5", title: "Murat C. — Cleaning", start: "2026-04-07 11:00", end: "2026-04-07 11:30", calendarId: "dr-elif" },
+                      { id: "6", title: "Selin Y. — Consult", start: "2026-04-08 15:00", end: "2026-04-08 15:30", calendarId: "dr-mehmet" },
+                      { id: "7", title: "Can D. — Crown Prep", start: "2026-04-08 10:00", end: "2026-04-08 11:30", calendarId: "dr-ayse" },
+                    ]}
+                  />
+                </CardContent>
+              </Card>
+            </Section>
+
+            {/* ── Confirm Dialog ───────────────────────── */}
+            <Section id="confirm" title="Confirm Dialog" description="Confirmation modals for destructive and important actions.">
+              <div className="flex gap-3">
+                <ConfirmDialog
+                  trigger={<Button variant="destructive" size="sm"><Trash2 className="w-4 h-4 mr-1.5" />Delete Patient</Button>}
+                  title="Delete Patient?"
+                  description="This will permanently deactivate the patient record. This action cannot be undone."
+                  confirmLabel="Delete"
+                  variant="destructive"
+                  onConfirm={() => {}}
+                />
+                <ConfirmDialog
+                  trigger={<Button variant="outline" size="sm">Cancel Appointment</Button>}
+                  title="Cancel Appointment?"
+                  description="The patient will be notified about the cancellation."
+                  confirmLabel="Yes, cancel"
+                  onConfirm={() => {}}
+                />
+              </div>
+            </Section>
+
+          </main>
+        </div>
+
+        {/* ── Footer ─────────────────────────────────── */}
+        <footer className="border-t border-border mt-8">
+          <div className="max-w-[1440px] mx-auto px-6 py-5 flex justify-between items-center text-xs text-muted-foreground">
+            <span>Portal Asistan 7/24 — Clinic Management Platform</span>
+            <span>33 shadcn/ui + 14 custom · Tailwind v4 · React 19</span>
+          </div>
+        </footer>
+      </div>
+    </TooltipProvider>
+  )
+}
+
+export default function ComponentsShowcase() {
+  return <App />
+}