elevenlabs-webhook-nodejs 1.0.0

package/frontend/src/pages/patients/detail.tsx

@@ -0,0 +1,1195 @@
+import { useState, useRef } from "react"
+import { useParams, useNavigate, Link } from "react-router-dom"
+import { useTranslation } from "react-i18next"
+import { format, formatDistanceToNow } from "date-fns"
+import { toast } from "sonner"
+import {
+  ArrowLeft,
+  Calendar,
+  Clock,
+  Edit2,
+  FileText,
+  MessageSquare,
+  Plus,
+  Trash2,
+  AlertTriangle,
+  Pin,
+  Camera,
+  Stethoscope,
+  User,
+  Phone,
+  Mail,
+  Droplets,
+  Pill,
+  Heart,
+  Cigarette,
+  Wine,
+  Baby,
+  Scissors,
+  Sparkles,
+  Upload,
+  Loader2,
+  ExternalLink,
+} from "lucide-react"
+
+import {
+  usePatient,
+  usePatientNotes,
+  usePatientAppointments,
+  usePatientDocuments,
+  useUploadDocument,
+  useDeleteDocument,
+  useCreateNote,
+  useDeleteNote,
+} from "@/lib/hooks/use-patients"
+import type { PatientDetail, MedicalHistory } from "@/lib/hooks/use-patients"
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { EmptyState, StatusBadge, StatusDot, ConfirmDialog, StatCard } from "@/components/shared"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Skeleton } from "@/components/ui/skeleton"
+import { Avatar, AvatarFallback } from "@/components/ui/avatar"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { Textarea } from "@/components/ui/textarea"
+import { Label } from "@/components/ui/label"
+import { Alert, AlertDescription } from "@/components/ui/alert"
+import { Separator } from "@/components/ui/separator"
+import {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table"
+
+import { EditPatientDialog } from "./edit-patient-dialog"
+import { TreatmentPlansTab } from "./treatment-plans-tab"
+import { PhotoSetsTab } from "./photo-sets-tab"
+import { ExaminationsTab } from "./examinations-tab"
+import { TimelineTab } from "./timeline-tab"
+import { MedicalHistoryDialog } from "./medical-history-dialog"
+import { useMedicalHistory } from "@/lib/hooks/use-medical-history"
+
+function TabCount({ count }: { count: number }) {
+  return (
+    <span className="ml-1.5 inline-flex items-center justify-center min-w-[18px] h-[18px] rounded-full bg-muted text-[10px] font-medium px-1">
+      {count}
+    </span>
+  )
+}
+
+function getInitials(firstName: string, lastName: string): string {
+  return `${firstName.charAt(0)}${lastName.charAt(0)}`.toUpperCase()
+}
+
+function sourceLabel(source: string | undefined, t: (key: string) => string): string {
+  if (!source) return "-"
+  const map: Record<string, string> = {
+    whatsapp: t("patients.sourceWhatsapp"),
+    voice_call: t("patients.sourceVoiceCall"),
+    instagram: t("patients.sourceInstagram"),
+    walk_in: t("patients.sourceWalkIn"),
+    referral: t("patients.sourceReferral"),
+  }
+  return map[source] ?? source
+}
+
+function formatFileSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
+}
+
+// ─── Main Page ───────────────────────────────────────────────
+
+export default function PatientDetailPage() {
+  const { id } = useParams<{ id: string }>()
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+  const [editOpen, setEditOpen] = useState(false)
+
+  const { data: patient, isLoading, isError } = usePatient(id)
+
+  if (isLoading) return <PatientDetailSkeleton />
+
+  if (isError || !patient) {
+    return (
+      <div className="space-y-4">
+        <Button variant="ghost" size="sm" onClick={() => navigate("/patients")}>
+          <ArrowLeft className="w-4 h-4 mr-1.5" />
+          {t("patients.backToPatients")}
+        </Button>
+        <EmptyState
+          icon={<User className="w-6 h-6" />}
+          title={t("errors.unknownError")}
+        />
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Breadcrumb + Back */}
+      <div className="flex items-center gap-3">
+        <Button variant="ghost" size="sm" onClick={() => navigate("/patients")}>
+          <ArrowLeft className="w-4 h-4" />
+        </Button>
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbLink render={<Link to="/" />}>
+                {t("nav.dashboard")}
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbLink render={<Link to="/patients" />}>
+                {t("nav.patients")}
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbPage>{patient.displayName}</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+      </div>
+
+      {/* Patient Header Card */}
+      <PatientHeaderCard patient={patient} onEdit={() => setEditOpen(true)} t={t} />
+
+      {/* Quick Stats */}
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
+        <StatCard
+          title={t("patients.appointments")}
+          value={patient._count.appointments}
+          icon={<Calendar className="w-4 h-4" />}
+        />
+        <StatCard
+          title={t("patients.sessions")}
+          value={patient.totalSessions}
+          icon={<MessageSquare className="w-4 h-4" />}
+        />
+        <StatCard
+          title={t("patients.documents")}
+          value={patient._count.documents}
+          icon={<FileText className="w-4 h-4" />}
+        />
+        <StatCard
+          title={t("common.notes")}
+          value={patient._count.notes}
+          icon={<Edit2 className="w-4 h-4" />}
+        />
+      </div>
+
+      {/* Tabs */}
+      <Tabs defaultValue="overview">
+        <TabsList variant="line" className="w-full justify-start">
+          <TabsTrigger value="overview">{t("patients.overview")}</TabsTrigger>
+          <TabsTrigger value="timeline">{t("patients.timeline")}</TabsTrigger>
+          <TabsTrigger value="appointments">
+            {t("patients.appointments")}
+            {patient._count.appointments > 0 && <TabCount count={patient._count.appointments} />}
+          </TabsTrigger>
+          <TabsTrigger value="plans">{t("treatments.plans")}</TabsTrigger>
+          <TabsTrigger value="notes">
+            {t("common.notes")}
+            {patient._count.notes > 0 && <TabCount count={patient._count.notes} />}
+          </TabsTrigger>
+          <TabsTrigger value="documents">
+            {t("patients.documents")}
+            {patient._count.documents > 0 && <TabCount count={patient._count.documents} />}
+          </TabsTrigger>
+          <TabsTrigger value="photos">{t("patients.photoSets")}</TabsTrigger>
+          <TabsTrigger value="examinations">{t("patients.examinations")}</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="overview" className="mt-4">
+          <OverviewTab patient={patient} t={t} />
+        </TabsContent>
+
+        <TabsContent value="timeline" className="mt-4">
+          <TimelineTab patientId={patient.id} />
+        </TabsContent>
+
+        <TabsContent value="appointments" className="mt-4">
+          <AppointmentsTab patientId={patient.id} t={t} />
+        </TabsContent>
+
+        <TabsContent value="plans" className="mt-4">
+          <TreatmentPlansTab patientId={patient.id} clinicId={patient.clinic?.id} />
+        </TabsContent>
+
+        <TabsContent value="notes" className="mt-4">
+          <NotesTab patientId={patient.id} t={t} />
+        </TabsContent>
+
+        <TabsContent value="documents" className="mt-4">
+          <DocumentsTab patientId={patient.id} t={t} />
+        </TabsContent>
+
+        <TabsContent value="photos" className="mt-4">
+          <PhotoSetsTab patientId={patient.id} />
+        </TabsContent>
+
+        <TabsContent value="examinations" className="mt-4">
+          <ExaminationsTab patientId={patient.id} />
+        </TabsContent>
+      </Tabs>
+
+      {/* Edit Dialog */}
+      <EditPatientDialog
+        open={editOpen}
+        onOpenChange={setEditOpen}
+        patient={patient}
+      />
+    </div>
+  )
+}
+
+// ─── Patient Header Card ─────────────────────────────────────
+
+function PatientHeaderCard({
+  patient,
+  onEdit,
+  t,
+}: {
+  patient: PatientDetail
+  onEdit: () => void
+  t: (key: string) => string
+}) {
+  return (
+    <Card>
+      <CardContent>
+        <div className="flex flex-col sm:flex-row sm:items-center gap-4">
+          {/* Avatar + Name */}
+          <div className="flex items-center gap-4 flex-1 min-w-0">
+            <Avatar size="lg">
+              <AvatarFallback className="text-base font-semibold">
+                {getInitials(patient.firstName, patient.lastName)}
+              </AvatarFallback>
+            </Avatar>
+            <div className="min-w-0 flex-1">
+              <div className="flex items-center gap-2 flex-wrap">
+                <h2 className="text-lg font-semibold truncate">{patient.displayName}</h2>
+                <StatusDot
+                  status={patient.isActive ? "active" : "offline"}
+                  label={patient.isActive ? t("common.active") : t("common.inactive")}
+                />
+              </div>
+              <div className="flex items-center gap-3 mt-1 text-sm text-muted-foreground flex-wrap">
+                {patient.phone && (
+                  <span className="inline-flex items-center gap-1">
+                    <Phone className="w-3.5 h-3.5" />
+                    {patient.phone}
+                  </span>
+                )}
+                {patient.email && (
+                  <span className="inline-flex items-center gap-1">
+                    <Mail className="w-3.5 h-3.5" />
+                    {patient.email}
+                  </span>
+                )}
+              </div>
+              <div className="flex items-center gap-2 mt-2 flex-wrap">
+                {patient.source && (
+                  <Badge variant="secondary" className="text-xs">
+                    {sourceLabel(patient.source, t)}
+                  </Badge>
+                )}
+                {patient.tags.map((tag) => (
+                  <Badge key={tag} variant="outline" className="text-xs">
+                    {tag}
+                  </Badge>
+                ))}
+                {patient.clinic && (
+                  <Badge variant="outline" className="text-xs">
+                    {patient.clinic.name}
+                  </Badge>
+                )}
+              </div>
+            </div>
+          </div>
+
+          {/* Actions */}
+          <div className="flex items-center gap-2 shrink-0">
+            <Button variant="outline" size="sm" onClick={onEdit}>
+              <Edit2 className="w-4 h-4 mr-1.5" />
+              {t("patients.editPatient")}
+            </Button>
+          </div>
+        </div>
+
+        {/* Extra info row */}
+        <div className="flex items-center gap-4 mt-4 pt-4 border-t text-sm text-muted-foreground flex-wrap">
+          {patient.dateOfBirth && (
+            <span className="inline-flex items-center gap-1.5">
+              <Calendar className="w-3.5 h-3.5" />
+              {format(new Date(patient.dateOfBirth), "dd MMM yyyy")}
+            </span>
+          )}
+          {patient.gender && (
+            <span className="capitalize">{t(`patients.${patient.gender}`)}</span>
+          )}
+          {patient.bloodType && (
+            <span className="inline-flex items-center gap-1">
+              <Droplets className="w-3.5 h-3.5" />
+              {patient.bloodType}
+            </span>
+          )}
+          {patient.idNumber && (
+            <span>{t("patients.idNumber")}: {patient.idNumber}</span>
+          )}
+          {patient.firstContactAt && (
+            <span className="inline-flex items-center gap-1.5">
+              <Clock className="w-3.5 h-3.5" />
+              {t("patients.firstContact")}: {formatDistanceToNow(new Date(patient.firstContactAt), { addSuffix: true })}
+            </span>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+// ─── Overview Tab ────────────────────────────────────────────
+
+function OverviewTab({ patient, t }: { patient: PatientDetail; t: (key: string) => string }) {
+  const { data: notes } = usePatientNotes(patient.id)
+  const { data: mh } = useMedicalHistory(patient.id)
+  const latestNotes = (notes ?? []).slice(0, 3)
+  const [mhEditOpen, setMhEditOpen] = useState(false)
+
+  return (
+    <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
+      {/* Medical History — spans 2 cols */}
+      <div className="lg:col-span-2 space-y-4">
+        <MedicalHistorySection
+          medicalHistory={mh ?? undefined}
+          onEdit={() => setMhEditOpen(true)}
+          t={t}
+        />
+        <MedicalHistoryDialog
+          open={mhEditOpen}
+          onOpenChange={setMhEditOpen}
+          patientId={patient.id}
+          medicalHistory={mh ?? undefined}
+        />
+
+        {/* AI Summary */}
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <Sparkles className="w-4 h-4" />
+              {t("patients.aiSummary")}
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            {patient.patient_ai_summary ? (
+              <p className="text-sm text-muted-foreground leading-relaxed">
+                {patient.patient_ai_summary}
+              </p>
+            ) : (
+              <p className="text-sm text-muted-foreground italic">
+                {t("patients.noAiSummary")}
+              </p>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Quick Notes sidebar */}
+      <div className="space-y-4">
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center justify-between">
+              <span>{t("common.notes")}</span>
+              {latestNotes.length > 0 && (
+                <span className="text-xs text-muted-foreground font-normal">
+                  {t("patients.latestNotes")}
+                </span>
+              )}
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            {latestNotes.length === 0 ? (
+              <p className="text-sm text-muted-foreground italic">
+                {t("patients.noNotes")}
+              </p>
+            ) : (
+              <div className="space-y-3">
+                {latestNotes.map((note) => (
+                  <div key={note.id} className="space-y-1">
+                    <div className="flex items-center gap-2">
+                      {note.isPinned && <Pin className="w-3 h-3 text-primary" />}
+                      <span className="text-xs font-medium">{note.author ? `${note.author.firstName} ${note.author.lastName}` : "—"}</span>
+                      <span className="text-xs text-muted-foreground">
+                        {formatDistanceToNow(new Date(note.createdAt), { addSuffix: true })}
+                      </span>
+                    </div>
+                    <p className="text-sm text-muted-foreground line-clamp-2">{note.text}</p>
+                    <Separator />
+                  </div>
+                ))}
+              </div>
+            )}
+          </CardContent>
+        </Card>
+
+        {/* Contact info card */}
+        <Card>
+          <CardHeader>
+            <CardTitle>{t("patients.lastContact")}</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-2 text-sm">
+            {patient.lastContactAt ? (
+              <>
+                <p className="text-muted-foreground">
+                  {format(new Date(patient.lastContactAt), "dd MMM yyyy, HH:mm")}
+                </p>
+                <p className="text-xs text-muted-foreground">
+                  {formatDistanceToNow(new Date(patient.lastContactAt), { addSuffix: true })}
+                </p>
+              </>
+            ) : (
+              <p className="text-muted-foreground italic">-</p>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  )
+}
+
+// ─── Medical History Section ─────────────────────────────────
+
+function MedicalHistorySection({
+  medicalHistory,
+  onEdit,
+  t,
+}: {
+  medicalHistory: MedicalHistory | undefined
+  onEdit: () => void
+  t: (key: string) => string
+}) {
+  if (!medicalHistory || !medicalHistory.anamnesisCompleted) {
+    return (
+      <Card>
+        <CardHeader className="flex flex-row items-center justify-between">
+          <CardTitle>{t("patients.medicalHistory")}</CardTitle>
+          <Button variant="ghost" size="sm" onClick={onEdit}>
+            <Edit2 className="w-3.5 h-3.5 mr-1" />
+            {t("common.edit")}
+          </Button>
+        </CardHeader>
+        <CardContent>
+          <Alert>
+            <AlertTriangle className="w-4 h-4" />
+            <AlertDescription>
+              {t("patients.anamnesisIncomplete")}
+            </AlertDescription>
+          </Alert>
+        </CardContent>
+      </Card>
+    )
+  }
+
+  const mh = medicalHistory
+
+  return (
+    <Card>
+      <CardHeader className="flex flex-row items-center justify-between">
+        <CardTitle>{t("patients.medicalHistory")}</CardTitle>
+        <Button variant="ghost" size="sm" onClick={onEdit}>
+          <Edit2 className="w-3.5 h-3.5 mr-1" />
+          {t("common.edit")}
+        </Button>
+      </CardHeader>
+      <CardContent>
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+          {/* Allergies */}
+          <div className="space-y-1.5">
+            <div className="flex items-center gap-1.5 text-sm font-medium">
+              <Heart className="w-3.5 h-3.5 text-red-500" />
+              {t("patients.allergies")}
+            </div>
+            {mh.allergies.length > 0 ? (
+              <div className="flex flex-wrap gap-1">
+                {mh.allergies.map((a) => (
+                  <Badge key={a} variant="destructive" className="text-xs font-normal">
+                    {a}
+                  </Badge>
+                ))}
+              </div>
+            ) : (
+              <span className="text-sm text-muted-foreground">-</span>
+            )}
+          </div>
+
+          {/* Chronic Conditions */}
+          <div className="space-y-1.5">
+            <div className="flex items-center gap-1.5 text-sm font-medium">
+              <Stethoscope className="w-3.5 h-3.5 text-blue-500" />
+              {t("patients.chronicConditions")}
+            </div>
+            {mh.chronicConditions.length > 0 ? (
+              <div className="flex flex-wrap gap-1">
+                {mh.chronicConditions.map((c) => (
+                  <Badge key={c} variant="secondary" className="text-xs font-normal">
+                    {c}
+                  </Badge>
+                ))}
+              </div>
+            ) : (
+              <span className="text-sm text-muted-foreground">-</span>
+            )}
+          </div>
+
+          {/* Current Medications */}
+          <div className="space-y-1.5">
+            <div className="flex items-center gap-1.5 text-sm font-medium">
+              <Pill className="w-3.5 h-3.5 text-green-500" />
+              {t("patients.medications")}
+            </div>
+            {mh.currentMedications.length > 0 ? (
+              <div className="flex flex-wrap gap-1">
+                {mh.currentMedications.map((m) => (
+                  <Badge key={m} variant="outline" className="text-xs font-normal">
+                    {m}
+                  </Badge>
+                ))}
+              </div>
+            ) : (
+              <span className="text-sm text-muted-foreground">-</span>
+            )}
+          </div>
+
+          {/* Past Surgeries */}
+          <div className="space-y-1.5">
+            <div className="flex items-center gap-1.5 text-sm font-medium">
+              <Scissors className="w-3.5 h-3.5 text-orange-500" />
+              {t("patients.pastSurgeries")}
+            </div>
+            <span className="text-sm text-muted-foreground">
+              {mh.pastSurgeries || "-"}
+            </span>
+          </div>
+
+          {/* Smoking */}
+          <div className="space-y-1.5">
+            <div className="flex items-center gap-1.5 text-sm font-medium">
+              <Cigarette className="w-3.5 h-3.5" />
+              {t("patients.smoking")}
+            </div>
+            <span className="text-sm text-muted-foreground">
+              {mh.smoking ? t("common.yes") : t("common.no")}
+            </span>
+          </div>
+
+          {/* Alcohol */}
+          <div className="space-y-1.5">
+            <div className="flex items-center gap-1.5 text-sm font-medium">
+              <Wine className="w-3.5 h-3.5" />
+              {t("patients.alcohol")}
+            </div>
+            <span className="text-sm text-muted-foreground">
+              {mh.alcohol ? t("common.yes") : t("common.no")}
+            </span>
+          </div>
+
+          {/* Pregnancy Status */}
+          {mh.pregnancyStatus && mh.pregnancyStatus !== "not_applicable" && (
+            <div className="space-y-1.5">
+              <div className="flex items-center gap-1.5 text-sm font-medium">
+                <Baby className="w-3.5 h-3.5 text-pink-500" />
+                {t("patients.pregnancyStatus")}
+              </div>
+              <span className="text-sm text-muted-foreground">
+                {t(`patients.pregnancy_${mh.pregnancyStatus}`)}
+              </span>
+            </div>
+          )}
+        </div>
+
+        {/* Notes */}
+        {mh.notes && (
+          <div className="mt-4 pt-4 border-t space-y-1.5">
+            <p className="text-sm font-medium">{t("common.notes")}</p>
+            <p className="text-sm text-muted-foreground leading-relaxed">{mh.notes}</p>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  )
+}
+
+// ─── Appointments Tab ────────────────────────────────────────
+
+function AppointmentsTab({ patientId, t }: { patientId: string; t: (key: string) => string }) {
+  const { data: appointments, isLoading } = usePatientAppointments(patientId)
+
+  if (isLoading) {
+    return (
+      <div className="space-y-2">
+        {Array.from({ length: 3 }).map((_, i) => (
+          <Skeleton key={i} className="h-12 w-full rounded-lg" />
+        ))}
+      </div>
+    )
+  }
+
+  const items = appointments ?? []
+
+  if (items.length === 0) {
+    return (
+      <EmptyState
+        icon={<Calendar className="w-6 h-6" />}
+        title={t("patients.noAppointments")}
+        action={
+          <Button variant="outline" size="sm">
+            <Plus className="w-4 h-4 mr-1.5" />
+            {t("patients.bookAppointment")}
+          </Button>
+        }
+      />
+    )
+  }
+
+  return (
+    <div className="rounded-xl border border-border bg-card ring-1 ring-foreground/10">
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>{t("common.date")}</TableHead>
+            <TableHead>{t("common.time")}</TableHead>
+            <TableHead className="hidden md:table-cell">{t("appointments.treatment")}</TableHead>
+            <TableHead className="hidden md:table-cell">{t("appointments.doctor")}</TableHead>
+            <TableHead>{t("common.status")}</TableHead>
+            <TableHead className="hidden sm:table-cell">{t("common.type")}</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {items.map((appt) => (
+            <TableRow key={appt.id}>
+              <TableCell className="font-medium">
+                {format(new Date(appt.startTime), "dd MMM yyyy")}
+              </TableCell>
+              <TableCell className="text-muted-foreground">
+                {format(new Date(appt.startTime), "HH:mm")}
+                {appt.endTime && ` - ${format(new Date(appt.endTime), "HH:mm")}`}
+              </TableCell>
+              <TableCell className="hidden md:table-cell text-muted-foreground">
+                {appt.treatment?.name || "-"}
+              </TableCell>
+              <TableCell className="hidden md:table-cell text-muted-foreground">
+                {appt.doctor ? `${appt.doctor.firstName} ${appt.doctor.lastName}` : "-"}
+              </TableCell>
+              <TableCell>
+                <StatusBadge status={appt.status} />
+              </TableCell>
+              <TableCell className="hidden sm:table-cell text-muted-foreground capitalize">
+                {appt.type?.replace(/_/g, " ") || "-"}
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  )
+}
+
+// ─── Notes Tab ───────────────────────────────────────────────
+
+function NotesTab({ patientId, t }: { patientId: string; t: (key: string) => string }) {
+  const { data: notes, isLoading } = usePatientNotes(patientId)
+  const createNote = useCreateNote()
+  const deleteNote = useDeleteNote()
+  const [noteText, setNoteText] = useState("")
+
+  const handleCreateNote = async () => {
+    if (!noteText.trim()) return
+    try {
+      await createNote.mutateAsync({ patientId, text: noteText.trim() })
+      setNoteText("")
+      toast.success(t("patients.noteCreated"))
+    } catch {
+      toast.error(t("errors.unknownError"))
+    }
+  }
+
+  const handleDeleteNote = async (noteId: string) => {
+    try {
+      await deleteNote.mutateAsync({ patientId, noteId })
+      toast.success(t("patients.noteDeleted"))
+    } catch {
+      toast.error(t("errors.unknownError"))
+    }
+  }
+
+  if (isLoading) {
+    return (
+      <div className="space-y-2">
+        {Array.from({ length: 3 }).map((_, i) => (
+          <Skeleton key={i} className="h-20 w-full rounded-lg" />
+        ))}
+      </div>
+    )
+  }
+
+  const items = notes ?? []
+
+  return (
+    <div className="space-y-4">
+      {/* Add Note */}
+      <Card>
+        <CardContent>
+          <div className="space-y-3">
+            <Textarea
+              placeholder={t("patients.notePlaceholder")}
+              value={noteText}
+              onChange={(e) => setNoteText(e.target.value)}
+              className="min-h-20"
+            />
+            <div className="flex justify-end">
+              <Button
+                size="sm"
+                onClick={handleCreateNote}
+                disabled={!noteText.trim() || createNote.isPending}
+              >
+                <Plus className="w-4 h-4 mr-1.5" />
+                {t("patients.addNote")}
+              </Button>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Notes list */}
+      {items.length === 0 ? (
+        <EmptyState
+          icon={<Edit2 className="w-6 h-6" />}
+          title={t("patients.noNotes")}
+        />
+      ) : (
+        <div className="space-y-3">
+          {items.map((note) => (
+            <Card key={note.id}>
+              <CardContent>
+                <div className="flex items-start justify-between gap-3">
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-2 mb-1">
+                      {note.isPinned && <Pin className="w-3.5 h-3.5 text-primary shrink-0" />}
+                      <span className="text-sm font-medium">{note.author ? `${note.author.firstName} ${note.author.lastName}` : "—"}</span>
+                      <span className="text-xs text-muted-foreground">
+                        {format(new Date(note.createdAt), "dd MMM yyyy, HH:mm")}
+                      </span>
+                    </div>
+                    <p className="text-sm text-muted-foreground leading-relaxed whitespace-pre-wrap">
+                      {note.text}
+                    </p>
+                  </div>
+                  <ConfirmDialog
+                    trigger={
+                      <button className="shrink-0 p-1.5 rounded-md hover:bg-muted text-muted-foreground hover:text-destructive transition-colors cursor-pointer">
+                        <Trash2 className="w-3.5 h-3.5" />
+                      </button>
+                    }
+                    title={t("patients.deleteNote")}
+                    description={t("patients.deleteNoteConfirm")}
+                    confirmLabel={t("common.delete")}
+                    cancelLabel={t("common.cancel")}
+                    variant="destructive"
+                    onConfirm={() => handleDeleteNote(note.id)}
+                  />
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+// ─── Documents Tab ───────────────────────────────────────────
+
+function DocumentsTab({ patientId, t }: { patientId: string; t: (key: string) => string }) {
+  const { data: documents, isLoading } = usePatientDocuments(patientId)
+  const uploadMutation = useUploadDocument()
+  const deleteMutation = useDeleteDocument()
+  const [uploadOpen, setUploadOpen] = useState(false)
+  const [selectedFile, setSelectedFile] = useState<File | null>(null)
+  const [docType, setDocType] = useState("other")
+  const [docNotes, setDocNotes] = useState("")
+  const fileInputRef = useRef<HTMLInputElement>(null)
+  const [detailDoc, setDetailDoc] = useState<typeof items[number] | null>(null)
+
+  const docTypes = [
+    { value: "consent_form", label: t("patients.docTypeConsent") },
+    { value: "lab_result", label: t("patients.docTypeLab") },
+    { value: "x_ray", label: t("patients.docTypeXray") },
+    { value: "prescription", label: t("patients.docTypePrescription") },
+    { value: "referral", label: t("patients.docTypeReferral") },
+    { value: "other", label: t("patients.docTypeOther") },
+  ]
+
+  const handleUpload = async () => {
+    if (!selectedFile) return
+
+    const reader = new FileReader()
+    reader.onload = async () => {
+      const base64 = (reader.result as string).split(",")[1]
+      try {
+        await uploadMutation.mutateAsync({
+          patientId,
+          name: selectedFile.name,
+          type: docType,
+          contentType: selectedFile.type,
+          content: base64,
+          notes: docNotes || undefined,
+        })
+        toast.success(t("patients.uploadSuccess"))
+        setUploadOpen(false)
+        setSelectedFile(null)
+        setDocType("other")
+        setDocNotes("")
+      } catch {
+        toast.error(t("patients.uploadError"))
+      }
+    }
+    reader.readAsDataURL(selectedFile)
+  }
+
+  const handleDelete = async (docId: string) => {
+    try {
+      await deleteMutation.mutateAsync({ patientId, docId })
+      toast.success(t("patients.deleteDocSuccess"))
+    } catch {
+      toast.error(t("errors.unknownError"))
+    }
+  }
+
+  const openDocument = (docId: string) => {
+    const token = localStorage.getItem("access_token")
+    window.open(`/api/patients/${patientId}/documents/${docId}/file?token=${token}`, "_blank")
+  }
+
+  if (isLoading) {
+    return (
+      <div className="space-y-2">
+        {Array.from({ length: 3 }).map((_, i) => (
+          <Skeleton key={i} className="h-12 w-full rounded-lg" />
+        ))}
+      </div>
+    )
+  }
+
+  const items = documents ?? []
+
+  return (
+    <div className="space-y-3">
+      <div className="flex justify-end">
+        <Button variant="outline" size="sm" onClick={() => setUploadOpen(true)}>
+          <Upload className="w-4 h-4 mr-1.5" />
+          {t("patients.uploadDocument")}
+        </Button>
+      </div>
+
+      {items.length === 0 ? (
+        <EmptyState
+          icon={<FileText className="w-6 h-6" />}
+          title={t("patients.noDocuments")}
+          action={
+            <Button variant="outline" size="sm" onClick={() => setUploadOpen(true)}>
+              <Upload className="w-4 h-4 mr-1.5" />
+              {t("patients.uploadDocument")}
+            </Button>
+          }
+        />
+      ) : (
+        <div className="rounded-xl border border-border bg-card">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>{t("common.name")}</TableHead>
+                <TableHead className="hidden sm:table-cell">{t("common.type")}</TableHead>
+                <TableHead className="hidden md:table-cell">{t("patients.fileSize")}</TableHead>
+                <TableHead>{t("common.date")}</TableHead>
+                <TableHead className="w-20" />
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {items.map((doc) => (
+                <TableRow key={doc.id} className="cursor-pointer hover:bg-muted/50" onClick={() => setDetailDoc(doc)}>
+                  <TableCell className="font-medium">
+                    <div className="flex items-center gap-2">
+                      <FileText className="w-4 h-4 text-muted-foreground shrink-0" />
+                      <span className="truncate">{doc.name}</span>
+                    </div>
+                  </TableCell>
+                  <TableCell className="hidden sm:table-cell">
+                    <Badge variant="secondary" className="text-xs">
+                      {docTypes.find((d) => d.value === doc.type)?.label || doc.type}
+                    </Badge>
+                  </TableCell>
+                  <TableCell className="hidden md:table-cell text-muted-foreground">
+                    {formatFileSize(doc.sizeBytes)}
+                  </TableCell>
+                  <TableCell className="text-muted-foreground">
+                    {format(new Date(doc.createdAt), "dd MMM yyyy")}
+                  </TableCell>
+                  <TableCell>
+                    <div className="flex items-center gap-1">
+                      <button
+                        className="inline-flex items-center justify-center w-8 h-8 rounded-md hover:bg-muted text-muted-foreground cursor-pointer"
+                        title={t("patients.viewDocument")}
+                        onClick={() => openDocument(doc.id)}
+                      >
+                        <ExternalLink className="w-4 h-4" />
+                      </button>
+                      <ConfirmDialog
+                        trigger={
+                          <button className="inline-flex items-center justify-center w-8 h-8 rounded-md hover:bg-muted text-muted-foreground hover:text-destructive cursor-pointer">
+                            <Trash2 className="w-4 h-4" />
+                          </button>
+                        }
+                        title={t("patients.deleteDocument")}
+                        description={t("patients.deleteDocConfirm")}
+                        confirmLabel={t("common.delete")}
+                        variant="destructive"
+                        onConfirm={() => handleDelete(doc.id)}
+                      />
+                    </div>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      )}
+
+      {/* Upload Dialog */}
+      <Dialog open={uploadOpen} onOpenChange={setUploadOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>{t("patients.uploadDocument")}</DialogTitle>
+            <DialogDescription>{t("patients.uploadDocDesc")}</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4 py-2">
+            {/* File picker */}
+            <div className="space-y-1.5">
+              <Label className="text-sm">{t("patients.selectFile")}</Label>
+              <div
+                className="relative rounded-xl border-2 border-dashed border-border hover:border-primary/50 transition-colors cursor-pointer p-6 text-center"
+                onClick={() => fileInputRef.current?.click()}
+              >
+                <input
+                  ref={fileInputRef}
+                  type="file"
+                  accept="image/*,.pdf,.doc,.docx"
+                  className="hidden"
+                  onChange={(e) => setSelectedFile(e.target.files?.[0] ?? null)}
+                />
+                {selectedFile ? (
+                  <div className="flex items-center gap-3 justify-center">
+                    <FileText className="w-5 h-5 text-primary" />
+                    <div className="text-left">
+                      <p className="text-sm font-medium">{selectedFile.name}</p>
+                      <p className="text-xs text-muted-foreground">{formatFileSize(selectedFile.size)}</p>
+                    </div>
+                  </div>
+                ) : (
+                  <div>
+                    <Upload className="w-6 h-6 text-muted-foreground mx-auto mb-2" />
+                    <p className="text-sm text-muted-foreground">{t("patients.clickToUpload")}</p>
+                  </div>
+                )}
+              </div>
+            </div>
+
+            {/* Type select */}
+            <div className="space-y-1.5">
+              <Label className="text-sm">{t("common.type")}</Label>
+              <Select value={docType} onValueChange={(v) => v && setDocType(v)}>
+                <SelectTrigger className="w-full"><SelectValue /></SelectTrigger>
+                <SelectContent>
+                  {docTypes.map((dt) => (
+                    <SelectItem key={dt.value} value={dt.value}>{dt.label}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            {/* Notes */}
+            <div className="space-y-1.5">
+              <Label className="text-sm">{t("common.notes")}</Label>
+              <Textarea
+                value={docNotes}
+                onChange={(e) => setDocNotes(e.target.value)}
+                placeholder={t("patients.docNotesPlaceholder")}
+                rows={2}
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setUploadOpen(false)}>{t("common.cancel")}</Button>
+            <Button onClick={handleUpload} disabled={!selectedFile || uploadMutation.isPending}>
+              {uploadMutation.isPending ? (
+                <><Loader2 className="w-4 h-4 mr-1.5 animate-spin" />{t("common.loading")}</>
+              ) : (
+                <><Upload className="w-4 h-4 mr-1.5" />{t("patients.uploadDocument")}</>
+              )}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Document Detail Dialog */}
+      <Dialog open={!!detailDoc} onOpenChange={() => setDetailDoc(null)}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2">
+              <FileText className="w-5 h-5 text-muted-foreground" />
+              {detailDoc?.name}
+            </DialogTitle>
+          </DialogHeader>
+          {detailDoc && (
+            <div className="space-y-4 py-2">
+              <div className="grid grid-cols-2 gap-4 text-sm">
+                <div>
+                  <span className="text-muted-foreground text-xs">{t("common.type")}</span>
+                  <p className="font-medium mt-0.5">
+                    <Badge variant="secondary">{docTypes.find((d) => d.value === detailDoc.type)?.label || detailDoc.type}</Badge>
+                  </p>
+                </div>
+                <div>
+                  <span className="text-muted-foreground text-xs">{t("patients.fileSize")}</span>
+                  <p className="font-medium mt-0.5">{formatFileSize(detailDoc.sizeBytes)}</p>
+                </div>
+                <div>
+                  <span className="text-muted-foreground text-xs">{t("common.date")}</span>
+                  <p className="font-medium mt-0.5">{format(new Date(detailDoc.createdAt), "dd MMM yyyy, HH:mm")}</p>
+                </div>
+                <div>
+                  <span className="text-muted-foreground text-xs">{t("patients.uploadedBy")}</span>
+                  <p className="font-medium mt-0.5">
+                    {detailDoc.uploadedBy ? `${detailDoc.uploadedBy.firstName} ${detailDoc.uploadedBy.lastName}` : "—"}
+                  </p>
+                </div>
+              </div>
+              {detailDoc.notes && (
+                <div>
+                  <span className="text-muted-foreground text-xs">{t("common.notes")}</span>
+                  <p className="text-sm mt-0.5 bg-muted/50 rounded-lg p-3">{detailDoc.notes}</p>
+                </div>
+              )}
+              <Separator />
+              <div className="flex gap-2">
+                <Button size="sm" onClick={() => { openDocument(detailDoc.id); }}>
+                  <ExternalLink className="w-4 h-4 mr-1.5" />
+                  {t("patients.openInNewTab")}
+                </Button>
+                <ConfirmDialog
+                  trigger={
+                    <Button variant="destructive" size="sm">
+                      <Trash2 className="w-4 h-4 mr-1.5" />
+                      {t("common.delete")}
+                    </Button>
+                  }
+                  title={t("patients.deleteDocument")}
+                  description={t("patients.deleteDocConfirm")}
+                  confirmLabel={t("common.delete")}
+                  variant="destructive"
+                  onConfirm={() => { handleDelete(detailDoc.id); setDetailDoc(null); }}
+                />
+              </div>
+            </div>
+          )}
+        </DialogContent>
+      </Dialog>
+
+    </div>
+  )
+}
+
+// ─── Loading Skeleton ────────────────────────────────────────
+
+function PatientDetailSkeleton() {
+  return (
+    <div className="space-y-6">
+      {/* Breadcrumb */}
+      <div className="flex items-center gap-3">
+        <Skeleton className="h-8 w-8 rounded-md" />
+        <Skeleton className="h-4 w-48" />
+      </div>
+
+      {/* Header card */}
+      <Card>
+        <CardContent>
+          <div className="flex items-center gap-4">
+            <Skeleton className="h-10 w-10 rounded-full" />
+            <div className="space-y-2 flex-1">
+              <Skeleton className="h-5 w-40" />
+              <Skeleton className="h-4 w-56" />
+              <div className="flex gap-2">
+                <Skeleton className="h-5 w-16 rounded-full" />
+                <Skeleton className="h-5 w-12 rounded-full" />
+              </div>
+            </div>
+            <Skeleton className="h-8 w-24 rounded-md" />
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Stats */}
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
+        {Array.from({ length: 4 }).map((_, i) => (
+          <Card key={i}>
+            <CardHeader className="pb-2">
+              <Skeleton className="h-4 w-20" />
+            </CardHeader>
+            <CardContent>
+              <Skeleton className="h-8 w-12" />
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+
+      {/* Tabs placeholder */}
+      <div className="space-y-4">
+        <Skeleton className="h-8 w-96" />
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
+          <div className="lg:col-span-2 space-y-4">
+            <Card>
+              <CardContent>
+                <div className="space-y-3">
+                  <Skeleton className="h-4 w-32" />
+                  <Skeleton className="h-20 w-full" />
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+          <Card>
+            <CardContent>
+              <div className="space-y-3">
+                <Skeleton className="h-4 w-24" />
+                <Skeleton className="h-16 w-full" />
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </div>
+  )
+}