elevenlabs-webhook-nodejs 1.0.0

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

@@ -0,0 +1,704 @@
+import { useState, useMemo, useCallback } 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,
+  Plus,
+  Stethoscope,
+  MapPin,
+  FileText,
+  User,
+  Phone,
+  CheckCircle,
+  Play,
+  XCircle,
+  UserX,
+  ThumbsUp,
+  Loader2,
+  X,
+  Clock,
+} from "lucide-react"
+
+import {
+  useAppointments,
+  useUpdateAppointmentStatus,
+  useAvailability,
+} from "@/lib/hooks/use-appointments"
+import { useDoctorProfiles } from "@/lib/hooks/use-users"
+import { useClinics, useClinicTimezone } from "@/lib/hooks/use-clinics"
+import { useAuthStore } from "@/stores/auth.store"
+import type { Appointment, AvailabilitySlot } from "@/lib/hooks/use-appointments"
+
+import { PageHeader, AppointmentCalendar, StatusBadge } from "@/components/shared"
+import { Button } from "@/components/ui/button"
+import { Skeleton } from "@/components/ui/skeleton"
+import { Badge } from "@/components/ui/badge"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Separator } from "@/components/ui/separator"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+import { Label } from "@/components/ui/label"
+import { Textarea } from "@/components/ui/textarea"
+
+import { CreateAppointmentDialog } from "@/pages/appointments/create-appointment-dialog"
+
+// ─── Constants ───────────────────────────────────────────────
+
+const DOCTOR_COLORS = [
+  "#e77d22", "#3b82f6", "#10b981", "#8b5cf6", "#f43f5e",
+  "#06b6d4", "#f59e0b", "#ec4899", "#14b8a6", "#6366f1",
+]
+
+function inClinicTZ(iso: string, tz: string) {
+  return new TZDate(iso, tz)
+}
+
+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
+  }
+}
+
+// ─── Main Page ───────────────────────────────────────────────
+
+export default function CalendarPage() {
+  const { t } = useTranslation()
+  const clinicTZ = useClinicTimezone()
+  const currentUser = useAuthStore((s) => s.user)
+  const isDoctor = currentUser?.role === "doctor"
+
+  const [createOpen, setCreateOpen] = useState(false)
+  const [createPrefill, setCreatePrefill] = useState<{ date: string; time: string } | null>(null)
+  const [doctorFilter, setDoctorFilter] = useState(isDoctor && currentUser ? currentUser.id : "all")
+  const [clinicFilter, setClinicFilter] = useState("all")
+  const [selectedAppt, setSelectedAppt] = useState<Appointment | null>(null)
+  const [cancelTarget, setCancelTarget] = useState<string | null>(null)
+  const [cancelReason, setCancelReason] = useState("")
+  const [availabilityDate, setAvailabilityDate] = useState<string | null>(null)
+
+  const { data: doctorProfiles } = useDoctorProfiles()
+  const { data: clinics } = useClinics()
+  const updateStatus = useUpdateAppointmentStatus()
+
+  // Flatten doctors list from profiles
+  const doctors = useMemo(() =>
+    (doctorProfiles ?? []).map((d) => ({
+      id: d.id,
+      firstName: d.firstName,
+      lastName: d.lastName,
+    })),
+    [doctorProfiles],
+  )
+
+  // Default clinic for availability
+  const defaultClinicId = useMemo(() => {
+    if (clinicFilter !== "all") return clinicFilter
+    return clinics?.find((c) => c.isDefault)?.id ?? clinics?.[0]?.id ?? ""
+  }, [clinicFilter, clinics])
+
+  // Availability query
+  const availabilityQuery = availabilityDate && defaultClinicId
+    ? {
+        clinicId: defaultClinicId,
+        date: availabilityDate,
+        doctorId: doctorFilter !== "all" ? doctorFilter : undefined,
+      }
+    : null
+  const { data: availability, isLoading: availabilityLoading } = useAvailability(availabilityQuery)
+
+  // Fetch 5 weeks of appointments for the calendar
+  const dateFrom = useMemo(() => {
+    const start = startOfWeek(new Date(), { weekStartsOn: 1 })
+    return format(addDays(start, -7), "yyyy-MM-dd")
+  }, [])
+  const dateTo = useMemo(() => {
+    const end = endOfWeek(new Date(), { weekStartsOn: 1 })
+    return format(addDays(end, 28), "yyyy-MM-dd")
+  }, [])
+
+  const { data, isLoading } = useAppointments({
+    page: 1,
+    limit: 500,
+    doctorId: doctorFilter !== "all" ? doctorFilter : undefined,
+    clinicId: clinicFilter !== "all" ? clinicFilter : undefined,
+    from: dateFrom,
+    to: dateTo,
+  })
+
+  // Slot duration from selected doctor or default
+  const slotDuration = useMemo(() => {
+    if (doctorFilter !== "all" && doctorProfiles) {
+      const doc = doctorProfiles.find((d) => d.id === doctorFilter)
+      return doc?.profile?.appointmentDuration ?? 30
+    }
+    return 30
+  }, [doctorFilter, doctorProfiles])
+
+  // Map appointments to calendar events
+  const appointmentEvents = 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])
+
+
+  // Doctor colors for calendar
+  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])
+
+  // Working hours: use filtered doctor's hours, or merge all doctors' hours
+  const calendarWorkingHours = useMemo(() => {
+    if (!doctorProfiles) return []
+
+    const toArray = (val: unknown): any[] => {
+      if (Array.isArray(val)) return val
+      if (typeof val === "string") { try { const p = JSON.parse(val); return Array.isArray(p) ? p : [] } catch { return [] } }
+      return []
+    }
+
+    if (doctorFilter !== "all") {
+      const doc = doctorProfiles.find((d) => d.id === doctorFilter)
+      return toArray(doc?.profile?.workingHours)
+    }
+    // Merge: for each day, use the widest window across all doctors
+    const merged = new Map<number, { day: number; enabled: boolean; start: string; end: string }>()
+    for (const doc of doctorProfiles) {
+      for (const wh of toArray(doc.profile?.workingHours)) {
+        if (!wh.enabled) continue
+        const existing = merged.get(wh.day)
+        if (!existing) {
+          merged.set(wh.day, { ...wh })
+        } else {
+          if (wh.start < existing.start) existing.start = wh.start
+          if (wh.end > existing.end) existing.end = wh.end
+        }
+      }
+    }
+    return Array.from(merged.values())
+  }, [doctorProfiles, doctorFilter])
+
+  // Generate available slot events within working hours
+  // NOTE: mirrors backend appointments.service.ts checkAvailability logic
+  // Both use: per-day duration > profile default, breakStart/breakEnd → split ranges
+  const slotEvents = useMemo(() => {
+    if (calendarWorkingHours.length === 0 || !data?.data) return []
+
+    const slots: { id: string; title: string; start: string; end: string; calendarId: string }[] = []
+    const today = new Date()
+    const weekStart = startOfWeek(today, { weekStartsOn: 1 })
+    const activeAppts = data.data.filter((a) => a.status !== "cancelled" && a.status !== "no_show")
+
+    for (let d = 0; d < 7; d++) {
+      const date = addDays(weekStart, d)
+      const dateStr = format(date, "yyyy-MM-dd")
+      const dow = date.getDay()
+
+      const dayConfig = calendarWorkingHours.find((wh) => wh.day === dow) as any
+      if (!dayConfig || !dayConfig.enabled) continue
+
+      // Per-day duration > profile default
+      const daySlotDuration = dayConfig.duration ?? slotDuration
+
+      // Build time ranges (split by break if present)
+      const ranges: { startMin: number; endMin: number }[] = []
+      const [startH, startM] = dayConfig.start.split(":").map(Number)
+      const [endH, endM] = dayConfig.end.split(":").map(Number)
+      const dayStartMin = startH * 60 + startM
+      const dayEndMin = endH * 60 + endM
+
+      if (dayConfig.breakStart && dayConfig.breakEnd) {
+        const [bsH, bsM] = dayConfig.breakStart.split(":").map(Number)
+        const [beH, beM] = dayConfig.breakEnd.split(":").map(Number)
+        ranges.push({ startMin: dayStartMin, endMin: bsH * 60 + bsM })
+        ranges.push({ startMin: beH * 60 + beM, endMin: dayEndMin })
+      } else {
+        ranges.push({ startMin: dayStartMin, endMin: dayEndMin })
+      }
+
+      for (const range of ranges) {
+      let current = range.startMin
+      while (current + daySlotDuration <= range.endMin) {
+        const hh = String(Math.floor(current / 60)).padStart(2, "0")
+        const mm = String(current % 60).padStart(2, "0")
+        const endMin = current + daySlotDuration
+        const ehh = String(Math.floor(endMin / 60)).padStart(2, "0")
+        const emm = String(endMin % 60).padStart(2, "0")
+
+        const slotStartISO = `${dateStr}T${hh}:${mm}:00+03:00`
+        const slotEndISO = `${dateStr}T${ehh}:${emm}:00+03:00`
+        const sMs = new Date(slotStartISO).getTime()
+        const eMs = new Date(slotEndISO).getTime()
+
+        const isBooked = activeAppts.some((appt) => {
+          if (doctorFilter !== "all" && appt.doctorId !== doctorFilter) return false
+          const aS = new Date(appt.startTime).getTime()
+          const aE = new Date(appt.endTime).getTime()
+          return sMs < aE && eMs > aS
+        })
+
+        if (!isBooked) {
+          slots.push({
+            id: `slot:${dateStr}:${hh}:${mm}`,
+            title: t("appointments.slotsAvailable"),
+            start: slotStartISO,
+            end: slotEndISO,
+            calendarId: "available-slot",
+          })
+        }
+
+        current = endMin
+      }
+      } // end range loop
+    }
+    return slots
+  }, [calendarWorkingHours, data?.data, slotDuration, doctorFilter, t])
+
+  // Merge appointment + slot events
+  const calendarEvents = useMemo(
+    () => [...appointmentEvents, ...slotEvents],
+    [appointmentEvents, slotEvents],
+  )
+
+  // Handle event click — slots open create dialog, appointments open detail modal
+  const handleEventClick = useCallback(
+    (event: { id: string }) => {
+      const id = String(event.id)
+      if (id.startsWith("slot:")) {
+        // "slot:2026-04-04:09:00" → date=2026-04-04, time=09:00
+        const parts = id.split(":")
+        const date = parts[1]
+        const time = `${parts[2]}:${parts[3]}`
+        setCreatePrefill({ date, time })
+        setCreateOpen(true)
+        return
+      }
+      const appt = data?.data.find((a) => a.id === id)
+      if (appt) setSelectedAppt(appt)
+    },
+    [data?.data],
+  )
+
+  const handleStatusChange = useCallback(
+    async (appointmentId: string, newStatus: string, cancelledReason?: string) => {
+      try {
+        await updateStatus.mutateAsync({ id: appointmentId, status: newStatus, cancelledReason })
+        toast.success(t("appointments.statusUpdateSuccess"))
+        setSelectedAppt(null)
+      } catch {
+        toast.error(t("appointments.statusUpdateError"))
+      }
+    },
+    [updateStatus, t],
+  )
+
+  const handleCancelConfirm = async () => {
+    if (!cancelTarget) return
+    await handleStatusChange(cancelTarget, "cancelled", cancelReason || undefined)
+    setCancelTarget(null)
+    setCancelReason("")
+  }
+
+  return (
+    <div className="space-y-4">
+      <PageHeader title={t("nav.calendar")} description={t("appointments.description")}>
+        {/* Doctor filter — hidden for doctor role */}
+        {!isDoctor && (
+          <Select
+            value={doctorFilter}
+            onValueChange={setDoctorFilter}
+          >
+            <SelectTrigger className="w-[160px] h-9">
+              <SelectValue placeholder={t("appointments.allDoctors")}>
+                {doctorFilter !== "all"
+                  ? doctors?.find((d) => d.id === doctorFilter)
+                    ? `${doctors.find((d) => d.id === doctorFilter)!.firstName} ${doctors.find((d) => d.id === doctorFilter)!.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>
+        )}
+
+        {clinics && clinics.length > 1 && (
+          <Select
+            value={clinicFilter}
+            onValueChange={setClinicFilter}
+          >
+            <SelectTrigger className="w-[160px] h-9">
+              <SelectValue placeholder={t("patients.allClinics")}>
+                {clinicFilter !== "all"
+                  ? clinics.find((c) => c.id === clinicFilter)?.name
+                  : t("patients.allClinics")}
+              </SelectValue>
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">{t("patients.allClinics")}</SelectItem>
+              {clinics.map((c) => (
+                <SelectItem key={c.id} value={c.id}>{c.name}</SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        )}
+
+        <Button onClick={() => setCreateOpen(true)}>
+          <Plus className="w-4 h-4 mr-1.5" />
+          {t("appointments.newAppointment")}
+        </Button>
+      </PageHeader>
+
+      {/* Doctor color legend */}
+      {calendarDoctors.length > 0 && doctorFilter === "all" && !isDoctor && (
+        <div className="flex items-center gap-3 flex-wrap px-1">
+          {calendarDoctors.map((doc) => (
+            <button
+              key={doc.id}
+              className="flex items-center gap-1.5 text-xs hover:opacity-70 transition-opacity"
+              onClick={() => setDoctorFilter(doc.id)}
+            >
+              <span
+                className="w-2.5 h-2.5 rounded-full shrink-0"
+                style={{ backgroundColor: doc.color }}
+              />
+              {doc.name}
+            </button>
+          ))}
+        </div>
+      )}
+
+      {/* Calendar + Availability Panel */}
+      <div className="flex gap-4">
+        {/* Calendar */}
+        <div className="flex-1 min-w-0">
+          {isLoading ? (
+            <Skeleton className="h-[750px] rounded-xl" />
+          ) : (
+            <div className="rounded-lg border bg-card p-2">
+              <AppointmentCalendar
+                key={`cal-${doctorFilter}-${JSON.stringify(calendarWorkingHours.map((w) => `${w.day}:${w.start}-${w.end}`))}`}
+                events={calendarEvents}
+                doctors={calendarDoctors}
+                workingHours={calendarWorkingHours}
+                timezone={clinicTZ}
+                defaultView="week"
+                onEventClick={handleEventClick}
+                onDateClick={(date) => setAvailabilityDate(typeof date === "string" ? date.slice(0, 10) : format(new Date(), "yyyy-MM-dd"))}
+              />
+            </div>
+          )}
+        </div>
+
+        {/* Availability Sidebar */}
+        {availabilityDate && (
+          <div className="w-64 shrink-0 hidden lg:block">
+            <AvailabilityPanel
+              date={availabilityDate}
+              slots={availability?.slots ?? []}
+              slotDuration={availability?.slotDuration ?? 30}
+              message={availability?.message}
+              isLoading={availabilityLoading}
+              doctorName={
+                doctorFilter !== "all"
+                  ? doctors.find((d) => d.id === doctorFilter)
+                    ? `${doctors.find((d) => d.id === doctorFilter)!.firstName} ${doctors.find((d) => d.id === doctorFilter)!.lastName}`
+                    : undefined
+                  : undefined
+              }
+              onClose={() => setAvailabilityDate(null)}
+              onSlotClick={(slot) => {
+                const time = format(new TZDate(slot.start, clinicTZ), "HH:mm")
+                setCreatePrefill({ date: availabilityDate!, time })
+                setAvailabilityDate(null)
+                setCreateOpen(true)
+              }}
+              t={t}
+            />
+          </div>
+        )}
+      </div>
+
+      {/* Appointment Detail Modal */}
+      {selectedAppt && (
+        <Dialog open={!!selectedAppt} onOpenChange={(open) => { if (!open) setSelectedAppt(null) }}>
+          <DialogContent className="sm:max-w-md">
+            <DialogHeader>
+              <div className="flex items-center justify-between pr-6">
+                <DialogTitle className="text-lg">
+                  {selectedAppt.patient?.displayName ?? selectedAppt.patientName}
+                </DialogTitle>
+                <StatusBadge status={selectedAppt.status} label={t(`status.${selectedAppt.status}`)} />
+              </div>
+              <DialogDescription className="sr-only">{t("common.details")}</DialogDescription>
+            </DialogHeader>
+
+            <div className="space-y-4">
+              <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(selectedAppt.startTime, clinicTZ), "dd MMM yyyy")}</span>
+                  <span className="text-muted-foreground ml-2">
+                    {format(inClinicTZ(selectedAppt.startTime, clinicTZ), "HH:mm")} – {format(inClinicTZ(selectedAppt.endTime, clinicTZ), "HH:mm")}
+                  </span>
+                  <span className="text-muted-foreground ml-1">({selectedAppt.durationMinutes} {t("appointments.minutes")})</span>
+                </div>
+              </div>
+
+              <Separator />
+
+              <div className="grid gap-3 text-sm">
+                <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">{selectedAppt.patient?.displayName ?? selectedAppt.patientName}</p>
+                    <p className="text-muted-foreground flex items-center gap-1">
+                      <Phone className="w-3 h-3" /> {selectedAppt.patientPhone}
+                    </p>
+                  </div>
+                </div>
+                {selectedAppt.doctor && (
+                  <div className="flex items-center gap-3">
+                    <Stethoscope className="w-4 h-4 text-muted-foreground shrink-0" />
+                    <span>{selectedAppt.doctor.firstName} {selectedAppt.doctor.lastName}</span>
+                  </div>
+                )}
+                {selectedAppt.clinic && (
+                  <div className="flex items-center gap-3">
+                    <MapPin className="w-4 h-4 text-muted-foreground shrink-0" />
+                    <span>{selectedAppt.clinic.name}</span>
+                  </div>
+                )}
+                {selectedAppt.treatment && (
+                  <div className="flex items-center gap-3">
+                    <FileText className="w-4 h-4 text-muted-foreground shrink-0" />
+                    <span>{selectedAppt.treatment.name}</span>
+                  </div>
+                )}
+              </div>
+
+              {selectedAppt.notes && (
+                <>
+                  <Separator />
+                  <div className="text-sm">
+                    <p className="text-muted-foreground text-xs mb-1">{t("common.notes")}</p>
+                    <p className="whitespace-pre-wrap">{selectedAppt.notes}</p>
+                  </div>
+                </>
+              )}
+            </div>
+
+            {getStatusActions(selectedAppt.status).length > 0 && (
+              <DialogFooter className="flex-row gap-2 sm:justify-start">
+                {getStatusActions(selectedAppt.status).map((action) => (
+                  <Button
+                    key={action}
+                    size="sm"
+                    variant={action === "cancelled" ? "destructive" : "outline"}
+                    onClick={() => {
+                      if (action === "cancelled") {
+                        setSelectedAppt(null)
+                        setCancelTarget(selectedAppt.id)
+                      } else {
+                        handleStatusChange(selectedAppt.id, action)
+                      }
+                    }}
+                  >
+                    {statusActionIcon(action)}
+                    {t(`appointments.action_${action}`)}
+                  </Button>
+                ))}
+              </DialogFooter>
+            )}
+          </DialogContent>
+        </Dialog>
+      )}
+
+      {/* 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="cal-cancel-reason" className="text-sm">{t("appointments.cancelReason")}</Label>
+            <Textarea
+              id="cal-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={(v) => { setCreateOpen(v); if (!v) setCreatePrefill(null) }}
+        defaultDate={createPrefill?.date}
+        defaultTime={createPrefill?.time}
+      />
+    </div>
+  )
+}
+
+// ─── Availability Panel ──────────────────────────────────────
+
+function AvailabilityPanel({
+  date,
+  slots,
+  slotDuration,
+  message,
+  isLoading,
+  doctorName,
+  onClose,
+  onSlotClick,
+  t,
+}: {
+  date: string
+  slots: AvailabilitySlot[]
+  slotDuration: number
+  message?: string
+  isLoading: boolean
+  doctorName?: string
+  onClose: () => void
+  onSlotClick: (slot: AvailabilitySlot) => void
+  t: (key: string) => string
+}) {
+  const available = slots.filter((s) => s.available)
+  const unavailable = slots.filter((s) => !s.available)
+
+  return (
+    <Card className="h-fit sticky top-4">
+      <CardHeader className="pb-3">
+        <div className="flex items-center justify-between">
+          <CardTitle className="text-sm font-medium">
+            {t("appointments.availability")}
+          </CardTitle>
+          <button onClick={onClose} className="text-muted-foreground hover:text-foreground">
+            <X className="w-4 h-4" />
+          </button>
+        </div>
+        <div className="text-xs text-muted-foreground space-y-0.5">
+          <p className="font-medium text-foreground">
+            {format(new TZDate(date + "T12:00:00", clinicTZ), "dd MMM yyyy, EEEE")}
+          </p>
+          {doctorName && <p>{doctorName}</p>}
+          <p>{slotDuration} {t("appointments.minutes")} {t("appointments.duration").toLowerCase()}</p>
+        </div>
+      </CardHeader>
+      <CardContent className="pt-0">
+        {isLoading ? (
+          <div className="space-y-2">
+            {Array.from({ length: 6 }).map((_, i) => (
+              <Skeleton key={i} className="h-8 w-full rounded" />
+            ))}
+          </div>
+        ) : message ? (
+          <p className="text-xs text-muted-foreground py-4 text-center">{message}</p>
+        ) : slots.length === 0 ? (
+          <p className="text-xs text-muted-foreground py-4 text-center">
+            {t("appointments.noSlotsConfigured")}
+          </p>
+        ) : (
+          <ScrollArea className="max-h-[600px]">
+            <div className="space-y-1">
+              {slots.map((slot, i) => {
+                const startTime = format(new TZDate(slot.start, clinicTZ), "HH:mm")
+                const endTime = format(new TZDate(slot.end, clinicTZ), "HH:mm")
+                return (
+                  <button
+                    key={i}
+                    disabled={!slot.available}
+                    onClick={() => slot.available && onSlotClick(slot)}
+                    className={`w-full flex items-center gap-2 rounded-md px-2.5 py-1.5 text-sm transition-colors ${
+                      slot.available
+                        ? "hover:bg-primary/10 hover:text-primary cursor-pointer"
+                        : "opacity-40 line-through cursor-not-allowed"
+                    }`}
+                  >
+                    <Clock className="w-3.5 h-3.5 shrink-0 text-muted-foreground" />
+                    <span className="font-mono text-xs">{startTime} – {endTime}</span>
+                    {slot.available && (
+                      <span className="ml-auto w-1.5 h-1.5 rounded-full bg-green-500 shrink-0" />
+                    )}
+                  </button>
+                )
+              })}
+            </div>
+            <div className="mt-3 pt-3 border-t text-xs text-muted-foreground flex items-center justify-between">
+              <span>{available.length} {t("appointments.slotsAvailable")}</span>
+              {unavailable.length > 0 && (
+                <span>{unavailable.length} {t("appointments.slotsBooked")}</span>
+              )}
+            </div>
+          </ScrollArea>
+        )}
+      </CardContent>
+    </Card>
+  )
+}