elevenlabs-webhook-nodejs 1.0.0

package/frontend/src/pages/my-schedule/index.tsx

@@ -0,0 +1,496 @@
+import { useState, useEffect } from "react"
+import { useTranslation } from "react-i18next"
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
+import { toast } from "sonner"
+import { AxiosError } from "axios"
+import { Loader2, Clock, Coffee, Check, X } from "lucide-react"
+
+import { api } from "@/lib/api"
+import {
+  useDoctorCalendarStatus,
+  useDoctorCalendarAuthUrl,
+  useDisconnectDoctorCalendar,
+  useDoctorCalendarList,
+  useSelectDoctorCalendar,
+} from "@/lib/hooks/use-doctor-calendar"
+import { useAuthStore } from "@/stores/auth.store"
+import {
+  useAvailabilityBlocks,
+  useCreateAvailabilityBlock,
+  useDeleteAvailabilityBlock,
+} from "@/lib/hooks/use-availability-blocks"
+import { useClinics } from "@/lib/hooks/use-clinics"
+
+import { PageHeader } from "@/components/shared"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Badge } from "@/components/ui/badge"
+import { Skeleton } from "@/components/ui/skeleton"
+import { Checkbox } from "@/components/ui/checkbox"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import { Alert, AlertDescription } from "@/components/ui/alert"
+import {
+  CalendarOff,
+  Calendar,
+  Plus,
+  Trash2,
+  Stethoscope,
+  Building2,
+  Repeat,
+  Link,
+  Unlink,
+} from "lucide-react"
+import { cn } from "@/lib/utils"
+
+// ─── Types ───────────────────────────────────────────────────
+
+interface WorkingHourEntry {
+  day: number
+  enabled: boolean
+  start: string
+  end: string
+  breakStart?: string
+  breakEnd?: string
+  duration?: number
+}
+
+interface ScheduleData {
+  workingHours: WorkingHourEntry[]
+  appointmentDuration: number
+  specialty: string
+  title: string
+  color: string
+  isAccepting: boolean
+}
+
+const DAYS = [
+  { day: 1, key: "monday" },
+  { day: 2, key: "tuesday" },
+  { day: 3, key: "wednesday" },
+  { day: 4, key: "thursday" },
+  { day: 5, key: "friday" },
+  { day: 6, key: "saturday" },
+  { day: 0, key: "sunday" },
+] as const
+
+const BLOCK_TYPES = ["holiday", "leave", "break_time", "other"] as const
+const BLOCK_BORDERS: Record<string, string> = {
+  holiday: "border-l-green-500",
+  leave: "border-l-blue-500",
+  break_time: "border-l-orange-500",
+  other: "border-l-gray-400",
+}
+
+// ─── Hooks ───────────────────────────────────────────────────
+
+function useMySchedule() {
+  return useQuery({
+    queryKey: ["my-schedule"],
+    queryFn: async () => {
+      const { data } = await api.get<ScheduleData>("/auth/me/schedule")
+      return data
+    },
+  })
+}
+
+function useUpdateMySchedule() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: async (payload: { workingHours?: any; appointmentDuration?: number }) => {
+      const { data } = await api.put<ScheduleData>("/auth/me/schedule", payload)
+      return data
+    },
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ["my-schedule"] })
+      qc.invalidateQueries({ queryKey: ["doctor-profiles"] })
+    },
+  })
+}
+
+// ─── Main Page ───────────────────────────────────────────────
+
+export default function MySchedulePage() {
+  const { t } = useTranslation()
+  const currentUser = useAuthStore((s) => s.user)
+  const { data: schedule, isLoading } = useMySchedule()
+  const updateSchedule = useUpdateMySchedule()
+  const { data: clinics } = useClinics()
+
+  const [hours, setHours] = useState<WorkingHourEntry[]>([])
+  const [defaultDuration, setDefaultDuration] = useState(30)
+  const [errorMessage, setErrorMessage] = useState<string | null>(null)
+  const [initialized, setInitialized] = useState(false)
+
+  useEffect(() => {
+    if (schedule && !initialized) {
+      const wh = Array.isArray(schedule.workingHours) ? schedule.workingHours : []
+      setHours(DAYS.map(({ day }) => {
+        const existing = wh.find((h: any) => h.day === day)
+        return existing ?? { day, enabled: day >= 1 && day <= 5, start: "09:00", end: "17:00" }
+      }))
+      setDefaultDuration(schedule.appointmentDuration ?? 30)
+      setInitialized(true)
+    }
+  }, [schedule, initialized])
+
+  const updateHour = (day: number, field: keyof WorkingHourEntry, value: any) => {
+    setHours((prev) => prev.map((h) => h.day === day ? { ...h, [field]: value } : h))
+  }
+
+  const handleSave = async () => {
+    setErrorMessage(null)
+    try {
+      await updateSchedule.mutateAsync({
+        workingHours: hours,
+        appointmentDuration: defaultDuration,
+      })
+      toast.success(t("users.profileUpdated"))
+    } catch (err) {
+      if (err instanceof AxiosError) {
+        setErrorMessage(err.response?.data?.message || t("users.profileError"))
+      } else {
+        setErrorMessage(t("users.profileError"))
+      }
+    }
+  }
+
+  if (isLoading) {
+    return (
+      <div className="max-w-[800px] mx-auto space-y-6 py-2">
+        <Skeleton className="h-16 w-full rounded-2xl" />
+        <Skeleton className="h-96 w-full rounded-2xl" />
+      </div>
+    )
+  }
+
+  const defaultClinicId = clinics?.find((c) => c.isDefault)?.id ?? clinics?.[0]?.id
+
+  return (
+    <div className="max-w-[800px] mx-auto space-y-6 py-2">
+      {/* Header */}
+      <div className="rounded-2xl border bg-card overflow-hidden">
+        <div className="h-1.5" style={{ backgroundColor: schedule?.color || "#e77d22" }} />
+        <div className="px-6 py-4 flex items-center justify-between">
+          <div>
+            <h1 className="text-lg font-bold">
+              {schedule?.title && <span className="text-muted-foreground font-medium mr-1">{schedule.title}</span>}
+              {currentUser?.firstName} {currentUser?.lastName}
+            </h1>
+            <div className="flex items-center gap-2 mt-0.5">
+              {schedule?.specialty && (
+                <Badge variant="outline" className="text-xs gap-1">
+                  <Stethoscope className="w-3 h-3" />{schedule.specialty}
+                </Badge>
+              )}
+              <span className={cn(
+                "inline-flex items-center gap-1 text-xs font-medium px-2 py-0.5 rounded-full",
+                schedule?.isAccepting
+                  ? "bg-green-500/10 text-green-600"
+                  : "bg-red-500/10 text-red-600",
+              )}>
+                {schedule?.isAccepting ? <Check className="w-3 h-3" /> : <X className="w-3 h-3" />}
+                {schedule?.isAccepting ? t("users.acceptingPatients") : t("users.notAccepting")}
+              </span>
+            </div>
+          </div>
+          <Button onClick={handleSave} disabled={updateSchedule.isPending}>
+            {updateSchedule.isPending
+              ? <><Loader2 className="w-4 h-4 mr-1.5 animate-spin" />{t("common.loading")}</>
+              : t("common.save")}
+          </Button>
+        </div>
+      </div>
+
+      {errorMessage && <Alert variant="destructive"><AlertDescription>{errorMessage}</AlertDescription></Alert>}
+
+      {/* Default duration */}
+      <div className="flex items-center justify-between px-1">
+        <div>
+          <p className="text-sm font-medium">{t("users.apptDuration")}</p>
+          <p className="text-xs text-muted-foreground">{t("users.apptDurationHint")}</p>
+        </div>
+        <div className="flex items-center gap-1.5">
+          <Input type="number" min={5} step={5} value={defaultDuration} onChange={(e) => setDefaultDuration(Number(e.target.value))} className="h-8 w-16 text-center" />
+          <span className="text-xs text-muted-foreground">{t("appointments.minutes")}</span>
+        </div>
+      </div>
+
+      {/* Working Hours */}
+      <Card className="rounded-2xl">
+        <CardHeader>
+          <div className="flex items-center justify-between">
+            <CardTitle className="text-sm uppercase tracking-wide text-muted-foreground">{t("users.workingHours")}</CardTitle>
+            <span className="text-xs text-muted-foreground">{hours.filter((h) => h.enabled).length} {t("users.daysActive")}</span>
+          </div>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-1">
+            {hours.map((h) => {
+              const dayLabel = DAYS.find((d) => d.day === h.day)
+              return (
+                <div key={h.day} className={cn("rounded-lg border transition-colors", h.enabled ? "border-border" : "border-transparent bg-muted/30")}>
+                  <button onClick={() => updateHour(h.day, "enabled", !h.enabled)} className="w-full flex items-center justify-between px-3 py-2.5 cursor-pointer">
+                    <div className="flex items-center gap-2.5">
+                      <div className={cn("w-9 h-5 rounded-full relative transition-colors", h.enabled ? "bg-green-500" : "bg-muted-foreground/20")}>
+                        <span className={cn("absolute top-0.5 left-0.5 w-4 h-4 rounded-full bg-white shadow-sm transition-transform", h.enabled && "translate-x-4")} />
+                      </div>
+                      <span className={cn("text-sm font-medium", !h.enabled && "text-muted-foreground")}>{t(`days.${dayLabel?.key}`)}</span>
+                    </div>
+                    {h.enabled ? (
+                      <span className="text-xs text-muted-foreground">
+                        {h.start} — {h.end} · {h.duration ?? defaultDuration} {t("appointments.minutes")}
+                        {h.breakStart && h.breakEnd && <span className="ml-1.5 text-muted-foreground/60">({t("users.break")}: {h.breakStart}–{h.breakEnd})</span>}
+                      </span>
+                    ) : (
+                      <span className="text-xs text-muted-foreground italic">{t("users.dayOff")}</span>
+                    )}
+                  </button>
+                  {h.enabled && (
+                    <div className="px-3 pb-3 pt-0 space-y-2">
+                      <div className="flex items-center gap-4 flex-wrap">
+                        <div className="flex items-center gap-1.5">
+                          <Clock className="w-3.5 h-3.5 text-muted-foreground shrink-0" />
+                          <span className="text-xs text-muted-foreground w-14">{t("users.workHours")}:</span>
+                          <Input type="time" className="h-8 w-[100px] text-sm" value={h.start} onChange={(e) => updateHour(h.day, "start", e.target.value)} />
+                          <span className="text-muted-foreground text-sm">—</span>
+                          <Input type="time" className="h-8 w-[100px] text-sm" value={h.end} onChange={(e) => updateHour(h.day, "end", e.target.value)} />
+                        </div>
+                        <div className="flex items-center gap-1.5">
+                          <Coffee className="w-3.5 h-3.5 text-muted-foreground shrink-0" />
+                          <span className="text-xs text-muted-foreground w-14">{t("users.break")}:</span>
+                          <Input type="time" className="h-8 w-[100px] text-sm" value={h.breakStart ?? ""} onChange={(e) => updateHour(h.day, "breakStart", e.target.value || undefined)} placeholder="12:00" />
+                          <span className="text-muted-foreground text-sm">—</span>
+                          <Input type="time" className="h-8 w-[100px] text-sm" value={h.breakEnd ?? ""} onChange={(e) => updateHour(h.day, "breakEnd", e.target.value || undefined)} placeholder="13:00" />
+                        </div>
+                      </div>
+                      <div className="flex items-center gap-1.5">
+                        <Clock className="w-3.5 h-3.5 text-muted-foreground shrink-0" />
+                        <span className="text-xs text-muted-foreground w-14">{t("users.slotDur")}:</span>
+                        <Input type="number" min={5} step={5} className="h-8 w-16 text-sm text-center" value={h.duration ?? defaultDuration} onChange={(e) => updateHour(h.day, "duration", e.target.value ? Number(e.target.value) : undefined)} />
+                        <span className="text-xs text-muted-foreground">{t("appointments.minutes")}</span>
+                      </div>
+                    </div>
+                  )}
+                </div>
+              )
+            })}
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Google Calendar */}
+      <GoogleCalendarCard />
+
+      {/* Holidays */}
+      {currentUser && defaultClinicId && (
+        <HolidaysCard clinicId={defaultClinicId} doctorId={currentUser.id} />
+      )}
+    </div>
+  )
+}
+
+// ─── Google Calendar Card ─────────────────────────────────────
+
+function GoogleCalendarCard() {
+  const { t } = useTranslation()
+  const { data: status, isLoading } = useDoctorCalendarStatus()
+  const getAuthUrl = useDoctorCalendarAuthUrl()
+  const disconnect = useDisconnectDoctorCalendar()
+  const { data: calendars, refetch: loadCalendars } = useDoctorCalendarList()
+  const selectCalendar = useSelectDoctorCalendar()
+  const [showCalendars, setShowCalendars] = useState(false)
+
+  const handleConnect = async () => {
+    try {
+      const url = await getAuthUrl.mutateAsync()
+      window.open(url, "_blank")
+    } catch {
+      toast.error(t("clinics.googleError"))
+    }
+  }
+
+  const handleSelectCalendar = async (calId: string, calName: string) => {
+    try {
+      await selectCalendar.mutateAsync({ calendarId: calId, calendarName: calName })
+      setShowCalendars(false)
+      toast.success(t("gcal.calendarSelected"))
+    } catch {
+      toast.error(t("clinics.googleError"))
+    }
+  }
+
+  const handleShowCalendars = async () => {
+    setShowCalendars(true)
+    loadCalendars()
+  }
+
+  return (
+    <Card className="rounded-2xl">
+      <CardHeader>
+        <CardTitle className="text-sm uppercase tracking-wide text-muted-foreground flex items-center gap-2">
+          <Calendar className="w-4 h-4" />
+          Google Calendar
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        {isLoading ? (
+          <Skeleton className="h-12 w-full" />
+        ) : status?.connected ? (
+          <div className="space-y-3">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-3">
+                <span className="w-2.5 h-2.5 rounded-full bg-green-500" />
+                <div>
+                  <p className="text-sm font-medium">{status.email}</p>
+                  {status.calendarName && (
+                    <p className="text-xs text-muted-foreground">{status.calendarName}</p>
+                  )}
+                </div>
+              </div>
+              <div className="flex items-center gap-2">
+                <Button size="sm" variant="outline" onClick={handleShowCalendars}>
+                  {t("gcal.changeCalendar")}
+                </Button>
+                <Button size="sm" variant="outline" onClick={() => disconnect.mutateAsync().then(() => toast.success(t("clinics.googleDisconnected")))} disabled={disconnect.isPending}>
+                  <Unlink className="w-3.5 h-3.5 mr-1" />
+                  {t("clinics.disconnect")}
+                </Button>
+              </div>
+            </div>
+
+            {/* Calendar selector */}
+            {showCalendars && calendars && (
+              <div className="border rounded-lg p-2 space-y-1">
+                <p className="text-xs text-muted-foreground px-2 pb-1">{t("gcal.selectCalendar")}</p>
+                {calendars.map((cal) => (
+                  <button
+                    key={cal.id}
+                    className={cn(
+                      "w-full text-left px-3 py-2 rounded-md text-sm hover:bg-muted transition-colors",
+                      cal.id === status.calendarId && "bg-primary/10 text-primary font-medium",
+                    )}
+                    onClick={() => handleSelectCalendar(cal.id, cal.summary)}
+                  >
+                    {cal.summary}
+                    {cal.primary && <span className="text-xs text-muted-foreground ml-2">(primary)</span>}
+                  </button>
+                ))}
+              </div>
+            )}
+          </div>
+        ) : (
+          <div className="text-center py-6">
+            <Calendar className="w-8 h-8 text-muted-foreground/30 mx-auto mb-2" />
+            <p className="text-sm text-muted-foreground mb-3">{t("gcal.notConnected")}</p>
+            <Button variant="outline" onClick={handleConnect} disabled={getAuthUrl.isPending}>
+              {getAuthUrl.isPending
+                ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" />
+                : <Link className="w-4 h-4 mr-1.5" />}
+              {t("gcal.connect")}
+            </Button>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  )
+}
+
+// ─── Holidays Card ───────────────────────────────────────────
+
+function HolidaysCard({ clinicId, doctorId }: { clinicId: string; doctorId: string }) {
+  const { t } = useTranslation()
+  const { data: blocks } = useAvailabilityBlocks({ clinicId, doctorId })
+  const createBlock = useCreateAvailabilityBlock()
+  const deleteBlock = useDeleteAvailabilityBlock()
+  const [showForm, setShowForm] = useState(false)
+  const [title, setTitle] = useState("")
+  const [type, setType] = useState<string>("leave")
+  const [startDate, setStartDate] = useState("")
+  const [endDate, setEndDate] = useState("")
+  const [recurring, setRecurring] = useState(false)
+
+  const handleAdd = async () => {
+    if (!title || !startDate) return
+    try {
+      await createBlock.mutateAsync({ clinicId, doctorId, title, type, startDate, endDate: endDate || startDate, allDay: true, recurring })
+      setTitle(""); setStartDate(""); setEndDate(""); setShowForm(false)
+      toast.success(t("blocks.created"))
+    } catch { toast.error(t("blocks.createError")) }
+  }
+
+  const myBlocks = (blocks ?? []).filter((b) => b.doctorId === doctorId)
+  const clinicBlocks = (blocks ?? []).filter((b) => !b.doctorId)
+
+  return (
+    <Card className="rounded-2xl">
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <CardTitle className="text-sm uppercase tracking-wide text-muted-foreground flex items-center gap-2">
+            <CalendarOff className="w-4 h-4" />{t("blocks.title")}
+          </CardTitle>
+          {!showForm && <Button size="sm" variant="outline" onClick={() => setShowForm(true)}><Plus className="w-3.5 h-3.5 mr-1" />{t("common.add")}</Button>}
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-3">
+        {showForm && (
+          <div className="rounded-xl border bg-muted/30 p-4 space-y-3">
+            <div className="grid grid-cols-2 gap-3">
+              <div className="space-y-1"><Label className="text-xs">{t("common.name")}</Label><Input className="h-9" placeholder={t("blocks.titlePlaceholder")} value={title} onChange={(e) => setTitle(e.target.value)} /></div>
+              <div className="space-y-1"><Label className="text-xs">{t("common.type")}</Label>
+                <Select value={type} onValueChange={setType}><SelectTrigger className="h-9"><SelectValue>{t(`blocks.type_${type}`)}</SelectValue></SelectTrigger><SelectContent>{BLOCK_TYPES.map((bt) => <SelectItem key={bt} value={bt}>{t(`blocks.type_${bt}`)}</SelectItem>)}</SelectContent></Select>
+              </div>
+            </div>
+            <div className="grid grid-cols-2 gap-3">
+              <div className="space-y-1"><Label className="text-xs">{t("appointments.from")}</Label><Input type="date" className="h-9" value={startDate} onChange={(e) => setStartDate(e.target.value)} /></div>
+              <div className="space-y-1"><Label className="text-xs">{t("appointments.to")}</Label><Input type="date" className="h-9" value={endDate} onChange={(e) => setEndDate(e.target.value)} /></div>
+            </div>
+            <div className="flex items-center justify-between">
+              <label className="flex items-center gap-1.5 text-sm cursor-pointer"><Checkbox checked={recurring} onCheckedChange={(v) => setRecurring(!!v)} />{t("blocks.yearly")}</label>
+              <div className="flex gap-2">
+                <Button size="sm" variant="ghost" onClick={() => setShowForm(false)}>{t("common.cancel")}</Button>
+                <Button size="sm" onClick={handleAdd} disabled={!title || !startDate || createBlock.isPending}>
+                  {createBlock.isPending ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <><Plus className="w-3.5 h-3.5 mr-1" />{t("common.add")}</>}
+                </Button>
+              </div>
+            </div>
+          </div>
+        )}
+        {myBlocks.length > 0 && (
+          <div className="space-y-1.5">
+            {myBlocks.map((b) => (
+              <div key={b.id} className={cn("flex items-center justify-between px-3 py-2.5 rounded-lg border-l-[3px] bg-muted/20 hover:bg-muted/40 group", BLOCK_BORDERS[b.type] ?? "border-l-gray-400")}>
+                <div>
+                  <div className="flex items-center gap-2"><span className="text-sm font-medium">{b.title}</span><Badge variant="outline" className="text-[10px] px-1.5 py-0">{t(`blocks.type_${b.type}`)}</Badge>{b.recurring && <span className="flex items-center gap-0.5 text-[10px] text-muted-foreground"><Repeat className="w-3 h-3" />{t("blocks.yearly")}</span>}</div>
+                  <p className="text-xs text-muted-foreground mt-0.5">{new Date(b.startDate).toLocaleDateString()}{b.startDate !== b.endDate && ` — ${new Date(b.endDate).toLocaleDateString()}`}</p>
+                </div>
+                <button className="opacity-0 group-hover:opacity-100 text-muted-foreground hover:text-destructive transition-all p-1" onClick={() => deleteBlock.mutateAsync(b.id).then(() => toast.success(t("blocks.deleted")))}><Trash2 className="w-4 h-4" /></button>
+              </div>
+            ))}
+          </div>
+        )}
+        {clinicBlocks.length > 0 && (
+          <div className="space-y-1.5">
+            <p className="text-xs font-medium text-muted-foreground flex items-center gap-1.5"><Building2 className="w-3 h-3" />{t("blocks.clinicHolidays")}</p>
+            {clinicBlocks.map((b) => (
+              <div key={b.id} className={cn("px-3 py-2 rounded-lg border-l-[3px] bg-muted/20", BLOCK_BORDERS[b.type] ?? "border-l-gray-400")}>
+                <div className="flex items-center gap-2"><span className="text-sm">{b.title}</span><Badge variant="outline" className="text-[10px] px-1.5 py-0">{t(`blocks.type_${b.type}`)}</Badge></div>
+                <p className="text-xs text-muted-foreground mt-0.5">{new Date(b.startDate).toLocaleDateString()}{b.startDate !== b.endDate && ` — ${new Date(b.endDate).toLocaleDateString()}`}</p>
+              </div>
+            ))}
+          </div>
+        )}
+        {myBlocks.length === 0 && clinicBlocks.length === 0 && !showForm && (
+          <div className="text-center py-6"><CalendarOff className="w-8 h-8 text-muted-foreground/30 mx-auto mb-2" /><p className="text-sm text-muted-foreground">{t("blocks.noBlocks")}</p></div>
+        )}
+      </CardContent>
+    </Card>
+  )
+}