elevenlabs-webhook-nodejs 1.0.0

package/frontend/src/pages/appointments/index.tsx

@@ -0,0 +1,860 @@
+import { useState, useCallback, useMemo } from "react"
+import { useTranslation } from "react-i18next"
+import { format, startOfWeek, endOfWeek, addDays } from "date-fns"
+import { TZDate } from "@date-fns/tz"
+import { toast } from "sonner"
+import {
+  Calendar,
+  MoreHorizontal,
+  Plus,
+  CheckCircle,
+  Play,
+  XCircle,
+  UserX,
+  ThumbsUp,
+  List,
+  LayoutGrid,
+  Loader2,
+  User,
+  Stethoscope,
+  MapPin,
+  FileText,
+  Phone,
+  Clock,
+  Search,
+} from "lucide-react"
+
+import {
+  useAppointments,
+  useUpdateAppointmentStatus,
+  useAvailability,
+} from "@/lib/hooks/use-appointments"
+import { useDoctors } from "@/lib/hooks/use-users"
+import { useClinics, useClinicTimezone } from "@/lib/hooks/use-clinics"
+import { useAuthStore } from "@/stores/auth.store"
+import type { Appointment } from "@/lib/hooks/use-appointments"
+
+import {
+  PageHeader,
+  EmptyState,
+  StatusBadge,
+  DataTableToolbar,
+  DataTablePagination,
+  AppointmentCalendar,
+} from "@/components/shared"
+import type { CalendarEvent } from "@/components/shared/appointment-calendar"
+import { Button } from "@/components/ui/button"
+import { Skeleton } from "@/components/ui/skeleton"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { cn } from "@/lib/utils"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Textarea } from "@/components/ui/textarea"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import { Separator } from "@/components/ui/separator"
+import { Badge } from "@/components/ui/badge"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+
+import { CreateAppointmentDialog } from "./create-appointment-dialog"
+
+// ─── Constants ───────────────────────────────────────────────
+
+const STATUS_OPTIONS = [
+  "scheduled", "confirmed", "in_progress", "completed", "cancelled", "no_show",
+] as const
+
+const DOCTOR_COLORS = [
+  "#e77d22", "#3b82f6", "#10b981", "#8b5cf6", "#f43f5e",
+  "#06b6d4", "#f59e0b", "#ec4899", "#14b8a6", "#6366f1",
+]
+
+// ─── Helpers ─────────────────────────────────────────────────
+
+function getStatusActions(status: string) {
+  const map: Record<string, string[]> = {
+    scheduled: ["confirmed", "cancelled", "no_show"],
+    confirmed: ["in_progress", "cancelled", "no_show"],
+    in_progress: ["completed", "cancelled"],
+  }
+  return map[status] ?? []
+}
+
+function statusActionIcon(action: string) {
+  switch (action) {
+    case "confirmed": return <ThumbsUp className="w-4 h-4 mr-2" />
+    case "in_progress": return <Play className="w-4 h-4 mr-2" />
+    case "completed": return <CheckCircle className="w-4 h-4 mr-2" />
+    case "cancelled": return <XCircle className="w-4 h-4 mr-2" />
+    case "no_show": return <UserX className="w-4 h-4 mr-2" />
+    default: return null
+  }
+}
+
+/** Convert a UTC ISO string to a TZDate in clinic timezone for display formatting */
+function inClinicTZ(iso: string, tz: string) {
+  return new TZDate(iso, tz)
+}
+
+// ─── Main Page ───────────────────────────────────────────────
+
+export default function AppointmentsPage() {
+  const { t } = useTranslation()
+  const clinicTZ = useClinicTimezone()
+  const currentUser = useAuthStore((s) => s.user)
+  const isDoctor = currentUser?.role === "doctor"
+
+  const [viewMode, setViewMode] = useState<"list" | "calendar">("list")
+  const [createOpen, setCreateOpen] = useState(false)
+  const [availOpen, setAvailOpen] = useState(false)
+  const [page, setPage] = useState(1)
+  const [pageSize, setPageSize] = useState(20)
+  const [statusFilter, setStatusFilter] = useState<string>("")
+  const [doctorFilter, setDoctorFilter] = useState<string>(isDoctor && currentUser ? currentUser.id : "")
+  const [dateFrom, setDateFrom] = useState("")
+  const [dateTo, setDateTo] = useState("")
+
+  // For calendar view: fetch current week + buffer
+  const calendarFrom = useMemo(() => {
+    const start = startOfWeek(new Date(), { weekStartsOn: 1 })
+    return format(addDays(start, -7), "yyyy-MM-dd")
+  }, [])
+  const calendarTo = useMemo(() => {
+    const end = endOfWeek(new Date(), { weekStartsOn: 1 })
+    return format(addDays(end, 28), "yyyy-MM-dd")
+  }, [])
+
+  const listQuery = {
+    page,
+    limit: pageSize,
+    status: statusFilter || undefined,
+    doctorId: doctorFilter || undefined,
+    from: dateFrom || undefined,
+    to: dateTo || undefined,
+  }
+
+  const calendarQuery = {
+    page: 1,
+    limit: 500,
+    status: statusFilter || undefined,
+    doctorId: doctorFilter || undefined,
+    from: calendarFrom,
+    to: calendarTo,
+  }
+
+  const { data, isLoading } = useAppointments(viewMode === "list" ? listQuery : calendarQuery)
+  const { data: doctors } = useDoctors()
+  const updateStatus = useUpdateAppointmentStatus()
+
+  const [selectedAppt, setSelectedAppt] = useState<Appointment | null>(null)
+
+  // Cancel dialog state
+  const [cancelTarget, setCancelTarget] = useState<string | null>(null)
+  const [cancelReason, setCancelReason] = useState("")
+
+  const handleStatusChange = useCallback(
+    async (appointmentId: string, newStatus: string, cancelledReason?: string) => {
+      try {
+        await updateStatus.mutateAsync({ id: appointmentId, status: newStatus, cancelledReason })
+        toast.success(t("appointments.statusUpdateSuccess"))
+      } catch {
+        toast.error(t("appointments.statusUpdateError"))
+      }
+    },
+    [updateStatus, t],
+  )
+
+  const handleCancelConfirm = async () => {
+    if (!cancelTarget) return
+    await handleStatusChange(cancelTarget, "cancelled", cancelReason || undefined)
+    setCancelTarget(null)
+    setCancelReason("")
+  }
+
+  const handlePageSizeChange = (size: number) => {
+    setPageSize(size)
+    setPage(1)
+  }
+
+  // Map appointments to calendar events — pass raw UTC ISO strings,
+  // the calendar component converts to clinic timezone via Temporal
+  const calendarEvents: CalendarEvent[] = useMemo(() => {
+    if (!data?.data) return []
+    return data.data
+      .filter((a) => a.status !== "cancelled")
+      .map((appt) => ({
+        id: appt.id,
+        title: `${appt.patientName}${appt.treatment ? ` — ${appt.treatment.name}` : ""}`,
+        start: appt.startTime,
+        end: appt.endTime,
+        calendarId: appt.doctorId ?? "default",
+        description: appt.notes || undefined,
+        people: appt.doctor ? [`${appt.doctor.firstName} ${appt.doctor.lastName}`] : undefined,
+      }))
+  }, [data?.data])
+
+  // Map doctors to calendar colors
+  const calendarDoctors = useMemo(() => {
+    if (!doctors) return []
+    return doctors.map((d, i) => ({
+      id: d.id,
+      name: `${d.firstName} ${d.lastName}`,
+      color: DOCTOR_COLORS[i % DOCTOR_COLORS.length],
+    }))
+  }, [doctors])
+
+  const doctorOptions = [
+    { value: "", label: t("appointments.allDoctors") },
+    ...(doctors ?? []).map((d) => ({
+      value: d.id,
+      label: `${d.firstName} ${d.lastName}`,
+    })),
+  ]
+
+  return (
+    <div className="space-y-6">
+      <PageHeader
+        title={t("appointments.title")}
+        description={t("appointments.description")}
+      >
+        <div className="flex rounded-lg border overflow-hidden">
+          <button
+            onClick={() => setViewMode("list")}
+            className={cn(
+              "flex items-center justify-center h-9 w-9 transition-colors",
+              viewMode === "list"
+                ? "bg-primary text-primary-foreground"
+                : "bg-background hover:bg-muted"
+            )}
+            aria-label="List view"
+          >
+            <List className="w-4 h-4" />
+          </button>
+          <button
+            onClick={() => setViewMode("calendar")}
+            className={cn(
+              "flex items-center justify-center h-9 w-9 transition-colors border-l",
+              viewMode === "calendar"
+                ? "bg-primary text-primary-foreground"
+                : "bg-background hover:bg-muted"
+            )}
+            aria-label="Calendar view"
+          >
+            <LayoutGrid className="w-4 h-4" />
+          </button>
+        </div>
+        <Button variant="outline" onClick={() => setAvailOpen(true)}>
+          <Clock className="w-4 h-4 mr-1.5" />
+          {t("appointments.checkAvailability")}
+        </Button>
+        <Button onClick={() => setCreateOpen(true)}>
+          <Plus className="w-4 h-4 mr-1.5" />
+          {t("appointments.newAppointment")}
+        </Button>
+      </PageHeader>
+
+
+      {/* Filters */}
+      <DataTableToolbar
+        filters={
+          <div className="flex items-center gap-2 flex-wrap">
+            {/* Status filter */}
+            <Select
+              value={statusFilter || undefined}
+              onValueChange={(val) => { setStatusFilter(val === "all" ? "" : val); setPage(1) }}
+            >
+              <SelectTrigger className="w-[150px] h-9">
+                <SelectValue placeholder={t("appointments.allStatuses")}>
+                  {statusFilter ? t(`status.${statusFilter}`) : t("appointments.allStatuses")}
+                </SelectValue>
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">{t("appointments.allStatuses")}</SelectItem>
+                {STATUS_OPTIONS.map((s) => (
+                  <SelectItem key={s} value={s}>{t(`status.${s}`)}</SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+
+            {/* Doctor filter — hidden for doctor role */}
+            {!isDoctor && (
+              <Select
+                value={doctorFilter || undefined}
+                onValueChange={(val) => { setDoctorFilter(val === "all" ? "" : val); setPage(1) }}
+              >
+                <SelectTrigger className="w-[160px] h-9">
+                  <SelectValue placeholder={t("appointments.allDoctors")}>
+                    {doctorFilter
+                      ? doctorOptions.find((o) => o.value === doctorFilter)?.label
+                      : t("appointments.allDoctors")}
+                  </SelectValue>
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">{t("appointments.allDoctors")}</SelectItem>
+                  {(doctors ?? []).map((d) => (
+                    <SelectItem key={d.id} value={d.id}>
+                      {d.firstName} {d.lastName}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            )}
+
+            {/* Date range — list view only */}
+            {viewMode === "list" && (
+              <div className="flex items-center gap-1.5">
+                <Label className="sr-only">{t("appointments.from")}</Label>
+                <Input
+                  type="date"
+                  className="h-9 w-[140px]"
+                  value={dateFrom}
+                  onChange={(e) => { setDateFrom(e.target.value); setPage(1) }}
+                />
+                <span className="text-xs text-muted-foreground">—</span>
+                <Input
+                  type="date"
+                  className="h-9 w-[140px]"
+                  value={dateTo}
+                  onChange={(e) => { setDateTo(e.target.value); setPage(1) }}
+                />
+              </div>
+            )}
+          </div>
+        }
+      />
+
+      {/* Calendar View */}
+      {viewMode === "calendar" ? (
+        isLoading ? (
+          <Skeleton className="h-[700px] rounded-xl" />
+        ) : (
+          <div className="rounded-lg border bg-card p-2">
+            <AppointmentCalendar
+              events={calendarEvents}
+              doctors={calendarDoctors}
+              defaultView="week"
+            />
+          </div>
+        )
+      ) : (
+        /* List View */
+        <>
+          {isLoading ? (
+            <AppointmentTableSkeleton />
+          ) : !data?.data.length ? (
+            <EmptyState
+              icon={<Calendar className="w-6 h-6" />}
+              title={t("appointments.noAppointments")}
+              description={t("appointments.noAppointmentsFilterDesc")}
+              action={
+                <Button variant="outline" onClick={() => setCreateOpen(true)}>
+                  <Plus className="w-4 h-4 mr-1.5" />
+                  {t("appointments.newAppointment")}
+                </Button>
+              }
+            />
+          ) : (
+            <>
+              <div className="rounded-lg border">
+                <Table>
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead>{t("appointments.patient")}</TableHead>
+                      <TableHead className="hidden md:table-cell">{t("appointments.doctor")}</TableHead>
+                      <TableHead>{t("common.date")}</TableHead>
+                      <TableHead className="hidden sm:table-cell">{t("appointments.duration")}</TableHead>
+                      <TableHead className="hidden lg:table-cell">{t("common.type")}</TableHead>
+                      <TableHead>{t("common.status")}</TableHead>
+                      <TableHead className="w-[50px]" />
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {data.data.map((appt) => (
+                      <AppointmentRow
+                        key={appt.id}
+                        appointment={appt}
+                        onStatusChange={handleStatusChange}
+                        onCancelRequest={(id) => setCancelTarget(id)}
+                        onClick={setSelectedAppt}
+                        tz={clinicTZ}
+                        t={t}
+                      />
+                    ))}
+                  </TableBody>
+                </Table>
+              </div>
+
+              <DataTablePagination
+                page={page}
+                pageSize={pageSize}
+                totalItems={data.meta.total}
+                onPageChange={setPage}
+                onPageSizeChange={handlePageSizeChange}
+              />
+            </>
+          )}
+        </>
+      )}
+
+      {/* Appointment Detail Modal */}
+      <AppointmentDetailModal
+        appointment={selectedAppt}
+        onClose={() => setSelectedAppt(null)}
+        onStatusChange={handleStatusChange}
+        onCancelRequest={(id) => { setSelectedAppt(null); setCancelTarget(id) }}
+        tz={clinicTZ}
+        t={t}
+      />
+
+      {/* Cancel Reason Dialog */}
+      <Dialog open={!!cancelTarget} onOpenChange={(open) => { if (!open) { setCancelTarget(null); setCancelReason("") } }}>
+        <DialogContent className="sm:max-w-sm">
+          <DialogHeader>
+            <DialogTitle>{t("appointments.cancelAppointment")}</DialogTitle>
+            <DialogDescription>{t("appointments.cancelConfirm")}</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-2">
+            <Label htmlFor="cancel-reason" className="text-sm">{t("appointments.cancelReason")}</Label>
+            <Textarea
+              id="cancel-reason"
+              rows={3}
+              placeholder={t("appointments.cancelReasonPlaceholder")}
+              value={cancelReason}
+              onChange={(e) => setCancelReason(e.target.value)}
+            />
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => { setCancelTarget(null); setCancelReason("") }}>
+              {t("common.back")}
+            </Button>
+            <Button variant="destructive" onClick={handleCancelConfirm} disabled={updateStatus.isPending}>
+              {updateStatus.isPending ? (
+                <><Loader2 className="w-4 h-4 mr-1.5 animate-spin" />{t("common.loading")}</>
+              ) : (
+                t("appointments.action_cancelled")
+              )}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <CreateAppointmentDialog open={createOpen} onOpenChange={setCreateOpen} />
+      <AvailabilityCheckerDialog open={availOpen} onOpenChange={setAvailOpen} tz={clinicTZ} />
+    </div>
+  )
+}
+
+// ─── Row Component ───────────────────────────────────────────
+
+function AppointmentRow({
+  appointment: appt,
+  onStatusChange,
+  onCancelRequest,
+  onClick,
+  tz,
+  t,
+}: {
+  appointment: Appointment
+  onStatusChange: (id: string, status: string) => void
+  onCancelRequest: (id: string) => void
+  onClick: (appt: Appointment) => void
+  tz: string
+  t: (key: string) => string
+}) {
+  const actions = getStatusActions(appt.status)
+  const typeLabels: Record<string, string> = {
+    appointment: t("appointments.typeAppointment"),
+    walk_in: t("appointments.typeWalkIn"),
+    follow_up: t("appointments.typeFollowUp"),
+    consultation: t("appointments.typeConsultation"),
+  }
+
+  return (
+    <TableRow className="cursor-pointer" onClick={() => onClick(appt)}>
+      <TableCell>
+        <div>
+          <p className="font-medium text-sm">{appt.patient?.displayName ?? appt.patientName}</p>
+          <p className="text-xs text-muted-foreground">{appt.patientPhone}</p>
+        </div>
+      </TableCell>
+      <TableCell className="hidden md:table-cell">
+        {appt.doctor ? `${appt.doctor.firstName} ${appt.doctor.lastName}` : "—"}
+      </TableCell>
+      <TableCell>
+        <div>
+          <p className="text-sm">{format(inClinicTZ(appt.startTime, tz), "dd MMM yyyy")}</p>
+          <p className="text-xs text-muted-foreground">
+            {format(inClinicTZ(appt.startTime, tz), "HH:mm")} – {format(inClinicTZ(appt.endTime, tz), "HH:mm")}
+          </p>
+        </div>
+      </TableCell>
+      <TableCell className="hidden sm:table-cell text-sm">
+        {appt.durationMinutes} {t("appointments.minutes")}
+      </TableCell>
+      <TableCell className="hidden lg:table-cell">
+        <span className="text-sm capitalize">{typeLabels[appt.type] ?? appt.type}</span>
+      </TableCell>
+      <TableCell>
+        <StatusBadge status={appt.status} label={t(`status.${appt.status}`)} />
+      </TableCell>
+      <TableCell>
+        {actions.length > 0 && (
+          <DropdownMenu>
+            <DropdownMenuTrigger
+              className="flex h-8 w-8 items-center justify-center rounded-md hover:bg-muted"
+              onClick={(e) => e.stopPropagation()}
+            >
+              <MoreHorizontal className="w-4 h-4" />
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuGroup>
+                <DropdownMenuLabel>{t("common.actions")}</DropdownMenuLabel>
+              </DropdownMenuGroup>
+              <DropdownMenuSeparator />
+              {actions.map((action) => (
+                <DropdownMenuItem
+                  key={action}
+                  onClick={() =>
+                    action === "cancelled"
+                      ? onCancelRequest(appt.id)
+                      : onStatusChange(appt.id, action)
+                  }
+                >
+                  {statusActionIcon(action)}
+                  {t(`appointments.action_${action}`)}
+                </DropdownMenuItem>
+              ))}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        )}
+      </TableCell>
+    </TableRow>
+  )
+}
+
+// ─── Detail Modal ────────────────────────────────────────────
+
+function AppointmentDetailModal({
+  appointment: appt,
+  onClose,
+  onStatusChange,
+  onCancelRequest,
+  tz,
+  t,
+}: {
+  appointment: Appointment | null
+  onClose: () => void
+  onStatusChange: (id: string, status: string) => void
+  onCancelRequest: (id: string) => void
+  tz: string
+  t: (key: string) => string
+}) {
+  if (!appt) return null
+
+  const actions = getStatusActions(appt.status)
+  const typeLabels: Record<string, string> = {
+    appointment: t("appointments.typeAppointment"),
+    walk_in: t("appointments.typeWalkIn"),
+    follow_up: t("appointments.typeFollowUp"),
+    consultation: t("appointments.typeConsultation"),
+  }
+  const sourceLabels: Record<string, string> = {
+    dashboard: "Dashboard",
+    whatsapp: "WhatsApp",
+    voice_call: t("patients.sourceVoiceCall"),
+    walk_in: t("appointments.typeWalkIn"),
+  }
+
+  return (
+    <Dialog open={!!appt} onOpenChange={(open) => { if (!open) onClose() }}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <div className="flex items-center justify-between pr-6">
+            <DialogTitle className="text-lg">
+              {appt.patient?.displayName ?? appt.patientName}
+            </DialogTitle>
+            <StatusBadge status={appt.status} label={t(`status.${appt.status}`)} />
+          </div>
+          <DialogDescription className="sr-only">{t("common.details")}</DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          {/* Date & Time */}
+          <div className="flex items-center gap-3 text-sm">
+            <Calendar className="w-4 h-4 text-muted-foreground shrink-0" />
+            <div>
+              <span className="font-medium">{format(inClinicTZ(appt.startTime, tz), "dd MMM yyyy")}</span>
+              <span className="text-muted-foreground ml-2">
+                {format(inClinicTZ(appt.startTime, tz), "HH:mm")} – {format(inClinicTZ(appt.endTime, tz), "HH:mm")}
+              </span>
+              <span className="text-muted-foreground ml-1">({appt.durationMinutes} {t("appointments.minutes")})</span>
+            </div>
+          </div>
+
+          <Separator />
+
+          {/* Details grid */}
+          <div className="grid gap-3 text-sm">
+            {/* Patient */}
+            <div className="flex items-start gap-3">
+              <User className="w-4 h-4 text-muted-foreground mt-0.5 shrink-0" />
+              <div>
+                <p className="font-medium">{appt.patient?.displayName ?? appt.patientName}</p>
+                <p className="text-muted-foreground flex items-center gap-1">
+                  <Phone className="w-3 h-3" /> {appt.patientPhone}
+                </p>
+              </div>
+            </div>
+
+            {/* Doctor */}
+            {appt.doctor && (
+              <div className="flex items-center gap-3">
+                <Stethoscope className="w-4 h-4 text-muted-foreground shrink-0" />
+                <span>{appt.doctor.firstName} {appt.doctor.lastName}</span>
+              </div>
+            )}
+
+            {/* Clinic */}
+            {appt.clinic && (
+              <div className="flex items-center gap-3">
+                <MapPin className="w-4 h-4 text-muted-foreground shrink-0" />
+                <span>{appt.clinic.name}</span>
+              </div>
+            )}
+
+            {/* Treatment */}
+            {appt.treatment && (
+              <div className="flex items-center gap-3">
+                <FileText className="w-4 h-4 text-muted-foreground shrink-0" />
+                <span>{appt.treatment.name}</span>
+              </div>
+            )}
+          </div>
+
+          {/* Type & Source */}
+          <div className="flex items-center gap-2 flex-wrap">
+            <Badge variant="outline" className="capitalize">
+              {typeLabels[appt.type] ?? appt.type}
+            </Badge>
+            <Badge variant="outline" className="text-muted-foreground">
+              {sourceLabels[appt.source] ?? appt.source}
+            </Badge>
+          </div>
+
+          {/* Notes */}
+          {appt.notes && (
+            <>
+              <Separator />
+              <div className="text-sm">
+                <p className="text-muted-foreground text-xs mb-1">{t("common.notes")}</p>
+                <p className="whitespace-pre-wrap">{appt.notes}</p>
+              </div>
+            </>
+          )}
+        </div>
+
+        {/* Actions */}
+        {actions.length > 0 && (
+          <DialogFooter className="flex-row gap-2 sm:justify-start">
+            {actions.map((action) => (
+              <Button
+                key={action}
+                size="sm"
+                variant={action === "cancelled" ? "destructive" : "outline"}
+                onClick={() => {
+                  if (action === "cancelled") {
+                    onCancelRequest(appt.id)
+                  } else {
+                    onStatusChange(appt.id, action)
+                    onClose()
+                  }
+                }}
+              >
+                {statusActionIcon(action)}
+                {t(`appointments.action_${action}`)}
+              </Button>
+            ))}
+          </DialogFooter>
+        )}
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+// ─── Availability Checker Dialog ─────────────────────────────
+
+function AvailabilityCheckerDialog({
+  open,
+  onOpenChange,
+  tz,
+}: {
+  open: boolean
+  onOpenChange: (v: boolean) => void
+  tz: string
+}) {
+  const { t } = useTranslation()
+  const { data: doctors } = useDoctors()
+  const { data: clinics } = useClinics()
+  const [date, setDate] = useState("")
+  const [doctorId, setDoctorId] = useState("all")
+
+  const defaultClinicId = clinics?.find((c) => c.isDefault)?.id ?? clinics?.[0]?.id ?? ""
+
+  const availabilityQuery = date && defaultClinicId
+    ? { clinicId: defaultClinicId, date, doctorId: doctorId !== "all" ? doctorId : undefined }
+    : null
+  const { data: availability, isLoading } = useAvailability(availabilityQuery)
+
+  const handleOpenChange = (v: boolean) => {
+    if (!v) { setDate(""); setDoctorId("all") }
+    onOpenChange(v)
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogContent className="sm:max-w-sm">
+        <DialogHeader>
+          <DialogTitle>{t("appointments.checkAvailability")}</DialogTitle>
+          <DialogDescription>{t("appointments.checkAvailabilityDesc")}</DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-3">
+          <div className="grid grid-cols-2 gap-3">
+            <div className="space-y-1.5">
+              <Label className="text-xs text-muted-foreground">{t("common.date")}</Label>
+              <Input type="date" value={date} onChange={(e) => setDate(e.target.value)} className="h-9" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs text-muted-foreground">{t("appointments.doctor")}</Label>
+              <Select value={doctorId} onValueChange={setDoctorId}>
+                <SelectTrigger className="h-9">
+                  <SelectValue>
+                    {doctorId !== "all"
+                      ? doctors?.find((d) => d.id === doctorId)
+                        ? `${doctors.find((d) => d.id === doctorId)!.firstName} ${doctors.find((d) => d.id === doctorId)!.lastName}`
+                        : t("appointments.allDoctors")
+                      : t("appointments.allDoctors")}
+                  </SelectValue>
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">{t("appointments.allDoctors")}</SelectItem>
+                  {(doctors ?? []).map((d) => (
+                    <SelectItem key={d.id} value={d.id}>{d.firstName} {d.lastName}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+
+          {/* Results */}
+          {!date ? (
+            <p className="text-sm text-muted-foreground text-center py-6">{t("appointments.selectDateToCheck")}</p>
+          ) : isLoading ? (
+            <div className="space-y-2 py-4">
+              {Array.from({ length: 4 }).map((_, i) => (
+                <Skeleton key={i} className="h-8 w-full rounded" />
+              ))}
+            </div>
+          ) : availability?.message ? (
+            <p className="text-sm text-muted-foreground text-center py-6">{availability.message}</p>
+          ) : !availability?.slots.length ? (
+            <p className="text-sm text-muted-foreground text-center py-6">{t("appointments.noSlotsConfigured")}</p>
+          ) : (
+            <ScrollArea className="max-h-[300px]">
+              <div className="space-y-1">
+                {availability.slots.map((slot, i) => {
+                  const start = format(new TZDate(slot.start, tz), "HH:mm")
+                  const end = format(new TZDate(slot.end, tz), "HH:mm")
+                  return (
+                    <div
+                      key={i}
+                      className={cn(
+                        "flex items-center justify-between px-3 py-2 rounded-md text-sm",
+                        slot.available ? "hover:bg-primary/5" : "opacity-40",
+                      )}
+                    >
+                      <span className="font-mono text-xs">{start} – {end}</span>
+                      {slot.available ? (
+                        <span className="w-2 h-2 rounded-full bg-green-500" />
+                      ) : (
+                        <span className="text-xs text-muted-foreground">{t("appointments.slotsBooked")}</span>
+                      )}
+                    </div>
+                  )
+                })}
+              </div>
+              <div className="mt-3 pt-3 border-t text-xs text-muted-foreground flex justify-between">
+                <span>{availability.slots.filter((s) => s.available).length} {t("appointments.slotsAvailable")}</span>
+                <span>{availability.slotDuration} {t("appointments.minutes")}</span>
+              </div>
+            </ScrollArea>
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+// ─── Skeleton ────────────────────────────────────────────────
+
+function AppointmentTableSkeleton() {
+  return (
+    <div className="rounded-lg border">
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead><Skeleton className="h-4 w-20" /></TableHead>
+            <TableHead className="hidden md:table-cell"><Skeleton className="h-4 w-16" /></TableHead>
+            <TableHead><Skeleton className="h-4 w-24" /></TableHead>
+            <TableHead className="hidden sm:table-cell"><Skeleton className="h-4 w-12" /></TableHead>
+            <TableHead className="hidden lg:table-cell"><Skeleton className="h-4 w-16" /></TableHead>
+            <TableHead><Skeleton className="h-4 w-16" /></TableHead>
+            <TableHead className="w-[50px]" />
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {Array.from({ length: 5 }).map((_, i) => (
+            <TableRow key={i}>
+              <TableCell><Skeleton className="h-8 w-32" /></TableCell>
+              <TableCell className="hidden md:table-cell"><Skeleton className="h-4 w-24" /></TableCell>
+              <TableCell><Skeleton className="h-8 w-24" /></TableCell>
+              <TableCell className="hidden sm:table-cell"><Skeleton className="h-4 w-12" /></TableCell>
+              <TableCell className="hidden lg:table-cell"><Skeleton className="h-4 w-16" /></TableCell>
+              <TableCell><Skeleton className="h-6 w-20 rounded-full" /></TableCell>
+              <TableCell><Skeleton className="h-8 w-8 rounded" /></TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  )
+}