elevenlabs-webhook-nodejs 1.0.0

package/frontend/src/pages/patients/treatment-plans-tab.tsx

@@ -0,0 +1,598 @@
+import { useState } from "react"
+import { useTranslation } from "react-i18next"
+import { useForm } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { z } from "zod"
+import { format } from "date-fns"
+import { toast } from "sonner"
+import { AxiosError } from "axios"
+import {
+  Plus,
+  ChevronDown,
+  ChevronRight,
+  Trash2,
+  Loader2,
+  CheckCircle,
+  Circle,
+  Clock,
+  XCircle,
+  Play,
+  ClipboardList,
+} from "lucide-react"
+
+import {
+  useTreatmentPlans,
+  useCreateTreatmentPlan,
+  useUpdateTreatmentPlan,
+  useDeleteTreatmentPlan,
+  useAddPlanItem,
+  useUpdatePlanItem,
+  useRemovePlanItem,
+} from "@/lib/hooks/use-treatment-plans"
+import type { TreatmentPlan, PlanItem } from "@/lib/hooks/use-treatment-plans"
+import { useTreatments } from "@/lib/hooks/use-treatments"
+import { useDoctors } from "@/lib/hooks/use-users"
+import { useClinics } from "@/lib/hooks/use-clinics"
+
+import { EmptyState, StatusBadge, Combobox } from "@/components/shared"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Textarea } from "@/components/ui/textarea"
+import { Skeleton } from "@/components/ui/skeleton"
+import { Badge } from "@/components/ui/badge"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+import { Alert, AlertDescription } from "@/components/ui/alert"
+
+// ─── Status helpers ──────────────────────────────────────────
+
+const ITEM_STATUSES = ["planned", "scheduled", "in_progress", "completed", "cancelled"] as const
+
+function itemStatusIcon(status: string) {
+  switch (status) {
+    case "completed": return <CheckCircle className="w-4 h-4 text-green-500" />
+    case "in_progress": return <Play className="w-4 h-4 text-blue-500" />
+    case "scheduled": return <Clock className="w-4 h-4 text-yellow-500" />
+    case "cancelled": return <XCircle className="w-4 h-4 text-red-500" />
+    default: return <Circle className="w-4 h-4 text-muted-foreground" />
+  }
+}
+
+// ─── Main Tab ────────────────────────────────────────────────
+
+export function TreatmentPlansTab({ patientId, clinicId }: { patientId: string; clinicId?: string }) {
+  const { t } = useTranslation()
+  const { data: plans, isLoading } = useTreatmentPlans(patientId)
+  const [createOpen, setCreateOpen] = useState(false)
+  const [expandedPlan, setExpandedPlan] = useState<string | null>(null)
+
+  if (isLoading) {
+    return (
+      <div className="space-y-3">
+        {Array.from({ length: 2 }).map((_, i) => (
+          <Skeleton key={i} className="h-20 w-full rounded-lg" />
+        ))}
+      </div>
+    )
+  }
+
+  const items = plans ?? []
+
+  if (items.length === 0) {
+    return (
+      <>
+        <EmptyState
+          icon={<ClipboardList className="w-6 h-6" />}
+          title={t("treatments.noPlans")}
+          action={
+            <Button variant="outline" size="sm" onClick={() => setCreateOpen(true)}>
+              <Plus className="w-4 h-4 mr-1.5" />
+              {t("treatments.newPlan")}
+            </Button>
+          }
+        />
+        <CreatePlanDialog
+          open={createOpen}
+          onOpenChange={setCreateOpen}
+          patientId={patientId}
+          clinicId={clinicId}
+        />
+      </>
+    )
+  }
+
+  return (
+    <div className="space-y-3">
+      <div className="flex justify-end">
+        <Button size="sm" onClick={() => setCreateOpen(true)}>
+          <Plus className="w-4 h-4 mr-1.5" />
+          {t("treatments.newPlan")}
+        </Button>
+      </div>
+
+      {items.map((plan) => (
+        <PlanCard
+          key={plan.tplan_id}
+          plan={plan}
+          patientId={patientId}
+          expanded={expandedPlan === plan.tplan_id}
+          onToggle={() => setExpandedPlan(expandedPlan === plan.tplan_id ? null : plan.tplan_id)}
+        />
+      ))}
+
+      <CreatePlanDialog
+        open={createOpen}
+        onOpenChange={setCreateOpen}
+        patientId={patientId}
+        clinicId={clinicId}
+      />
+    </div>
+  )
+}
+
+// ─── Plan Card ───────────────────────────────────────────────
+
+function PlanCard({
+  plan,
+  patientId,
+  expanded,
+  onToggle,
+}: {
+  plan: TreatmentPlan
+  patientId: string
+  expanded: boolean
+  onToggle: () => void
+}) {
+  const { t } = useTranslation()
+  const [addItemOpen, setAddItemOpen] = useState(false)
+  const deletePlan = useDeleteTreatmentPlan()
+  const updateItem = useUpdatePlanItem()
+  const removeItem = useRemovePlanItem()
+
+  const completedCount = plan.items.filter((i) => i.tpitem_status === "completed").length
+  const totalCount = plan.items.length
+  const progress = totalCount > 0 ? Math.round((completedCount / totalCount) * 100) : 0
+
+  const handleDeletePlan = async () => {
+    try {
+      await deletePlan.mutateAsync({ planId: plan.tplan_id, patientId })
+      toast.success(t("treatments.planDeleted"))
+    } catch (err) {
+      const msg = err instanceof AxiosError ? err.response?.data?.message : t("treatments.deleteError")
+      toast.error(msg)
+    }
+  }
+
+  const handleItemStatusChange = async (item: PlanItem, newStatus: string) => {
+    try {
+      await updateItem.mutateAsync({
+        planId: plan.tplan_id,
+        itemId: item.tpitem_id,
+        patientId,
+        status: newStatus,
+      })
+      toast.success(t("treatments.itemUpdated"))
+    } catch {
+      toast.error(t("treatments.saveError"))
+    }
+  }
+
+  const handleRemoveItem = async (item: PlanItem) => {
+    try {
+      await removeItem.mutateAsync({
+        planId: plan.tplan_id,
+        itemId: item.tpitem_id,
+        patientId,
+      })
+      toast.success(t("treatments.itemRemoved"))
+    } catch (err) {
+      const msg = err instanceof AxiosError ? err.response?.data?.message : t("treatments.deleteError")
+      toast.error(msg)
+    }
+  }
+
+  return (
+    <Card>
+      <CardHeader className="pb-2 cursor-pointer" onClick={onToggle}>
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            {expanded
+              ? <ChevronDown className="w-4 h-4 text-muted-foreground" />
+              : <ChevronRight className="w-4 h-4 text-muted-foreground" />}
+            <CardTitle className="text-sm font-medium">{plan.tplan_name}</CardTitle>
+            <StatusBadge status={plan.tplan_status} />
+          </div>
+          <div className="flex items-center gap-3 text-xs text-muted-foreground">
+            <span>{completedCount}/{totalCount}</span>
+            {plan.doctor && (
+              <span>{plan.doctor.user_first_name} {plan.doctor.user_last_name}</span>
+            )}
+            <span>{format(new Date(plan.tplan_created_at), "dd MMM yyyy")}</span>
+            {plan.tplan_status === "active" && (
+              <button
+                onClick={(e) => { e.stopPropagation(); handleDeletePlan() }}
+                className="text-muted-foreground hover:text-destructive transition-colors"
+                disabled={deletePlan.isPending}
+              >
+                <Trash2 className="w-3.5 h-3.5" />
+              </button>
+            )}
+          </div>
+        </div>
+        {/* Progress bar */}
+        {totalCount > 0 && (
+          <div className="w-full bg-muted rounded-full h-1.5 mt-2">
+            <div
+              className="bg-green-500 h-1.5 rounded-full transition-all"
+              style={{ width: `${progress}%` }}
+            />
+          </div>
+        )}
+      </CardHeader>
+
+      {expanded && (
+        <CardContent className="pt-0 space-y-2">
+          {plan.tplan_notes && (
+            <p className="text-xs text-muted-foreground whitespace-pre-wrap border-l-2 border-muted pl-3 mb-3">
+              {plan.tplan_notes}
+            </p>
+          )}
+
+          {/* Items */}
+          {plan.items.length === 0 ? (
+            <p className="text-xs text-muted-foreground text-center py-4">
+              {t("treatments.noItems")}
+            </p>
+          ) : (
+            <div className="space-y-1">
+              {plan.items.map((item) => (
+                <div
+                  key={item.tpitem_id}
+                  className="flex items-center gap-3 rounded-md px-2 py-1.5 hover:bg-muted/50 group"
+                >
+                  {itemStatusIcon(item.tpitem_status)}
+                  <div className="flex-1 min-w-0">
+                    <span className={`text-sm ${item.tpitem_status === "completed" ? "line-through text-muted-foreground" : ""}`}>
+                      {item.tpitem_name}
+                    </span>
+                    {item.tpitem_tooth_number && (
+                      <Badge variant="outline" className="ml-2 text-[10px] px-1.5 py-0">
+                        #{item.tpitem_tooth_number}
+                      </Badge>
+                    )}
+                  </div>
+                  <Select
+                    value={item.tpitem_status}
+                    onValueChange={(val) => handleItemStatusChange(item, val)}
+                  >
+                    <SelectTrigger className="h-7 w-[120px] text-xs opacity-0 group-hover:opacity-100 transition-opacity">
+                      <SelectValue>
+                        {t(`status.${item.tpitem_status}`)}
+                      </SelectValue>
+                    </SelectTrigger>
+                    <SelectContent>
+                      {ITEM_STATUSES.map((s) => (
+                        <SelectItem key={s} value={s}>{t(`status.${s}`)}</SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                  <button
+                    onClick={() => handleRemoveItem(item)}
+                    className="opacity-0 group-hover:opacity-100 transition-opacity text-muted-foreground hover:text-destructive"
+                  >
+                    <Trash2 className="w-3.5 h-3.5" />
+                  </button>
+                </div>
+              ))}
+            </div>
+          )}
+
+          {/* Actions */}
+          <div className="flex items-center gap-2 pt-2 border-t">
+            <Button size="sm" variant="outline" onClick={() => setAddItemOpen(true)}>
+              <Plus className="w-3.5 h-3.5 mr-1" />
+              {t("treatments.addItem")}
+            </Button>
+            {plan.tplan_status === "active" && (
+              <Button
+                size="sm"
+                variant="ghost"
+                className="text-destructive hover:text-destructive"
+                onClick={handleDeletePlan}
+                disabled={deletePlan.isPending}
+              >
+                <Trash2 className="w-3.5 h-3.5 mr-1" />
+                {t("common.delete")}
+              </Button>
+            )}
+          </div>
+
+          <AddItemDialog
+            open={addItemOpen}
+            onOpenChange={setAddItemOpen}
+            planId={plan.tplan_id}
+            patientId={patientId}
+          />
+        </CardContent>
+      )}
+    </Card>
+  )
+}
+
+// ─── Create Plan Dialog ──────────────────────────────────────
+
+function CreatePlanDialog({
+  open,
+  onOpenChange,
+  patientId,
+  clinicId: clinicIdProp,
+}: {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  patientId: string
+  clinicId?: string
+}) {
+  const { t } = useTranslation()
+  const createPlan = useCreateTreatmentPlan()
+  const { data: doctors } = useDoctors()
+  const { data: clinics } = useClinics()
+  const [errorMessage, setErrorMessage] = useState<string | null>(null)
+
+  const schema = z.object({
+    name: z.string().min(1, t("validation.required")),
+    doctorId: z.string().optional(),
+    notes: z.string().optional(),
+  })
+
+  const form = useForm<z.infer<typeof schema>>({
+    resolver: zodResolver(schema),
+    defaultValues: { name: "", doctorId: "", notes: "" },
+  })
+
+  const resolvedClinicId = clinicIdProp || clinics?.find((c) => c.isDefault)?.id || clinics?.[0]?.id || ""
+
+  const onSubmit = async (values: z.infer<typeof schema>) => {
+    setErrorMessage(null)
+    if (!resolvedClinicId) {
+      setErrorMessage("No clinic available")
+      return
+    }
+    try {
+      await createPlan.mutateAsync({
+        patientId,
+        clinicId: resolvedClinicId,
+        name: values.name,
+        doctorId: values.doctorId || undefined,
+        notes: values.notes || undefined,
+      })
+      toast.success(t("treatments.planCreated"))
+      form.reset()
+      onOpenChange(false)
+    } catch (err) {
+      if (err instanceof AxiosError) {
+        setErrorMessage(err.response?.data?.message || t("treatments.saveError"))
+      } else {
+        setErrorMessage(t("treatments.saveError"))
+      }
+    }
+  }
+
+  const handleOpenChange = (next: boolean) => {
+    if (!next) { form.reset(); setErrorMessage(null) }
+    onOpenChange(next)
+  }
+
+  const doctorOptions = (doctors ?? []).map((d) => ({
+    value: d.id,
+    label: `${d.firstName} ${d.lastName}`,
+  }))
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogContent className="sm:max-w-sm">
+        <DialogHeader>
+          <DialogTitle>{t("treatments.newPlan")}</DialogTitle>
+          <DialogDescription>{t("treatments.planDesc")}</DialogDescription>
+        </DialogHeader>
+        <form noValidate onSubmit={(e) => { e.preventDefault(); form.handleSubmit(onSubmit)(e) }} className="space-y-3">
+          {errorMessage && (
+            <Alert variant="destructive" className="py-2.5">
+              <AlertDescription className="text-sm">{errorMessage}</AlertDescription>
+            </Alert>
+          )}
+          <div className="space-y-1.5">
+            <Label className="text-sm">{t("treatments.planName")} *</Label>
+            <Input {...form.register("name")} placeholder={t("treatments.planNamePlaceholder")} />
+            {form.formState.errors.name && (
+              <p className="text-xs text-destructive">{form.formState.errors.name.message}</p>
+            )}
+          </div>
+          <div className="space-y-1.5">
+            <Label className="text-sm">{t("appointments.doctor")}</Label>
+            <Select
+              value={form.watch("doctorId") || "none"}
+              onValueChange={(val) => form.setValue("doctorId", val === "none" ? "" : val)}
+            >
+              <SelectTrigger className="w-full">
+                <SelectValue placeholder={t("appointments.selectDoctor")}>
+                  {form.watch("doctorId")
+                    ? doctorOptions.find((d) => d.value === form.watch("doctorId"))?.label
+                    : t("appointments.selectDoctor")}
+                </SelectValue>
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="none">{t("appointments.selectDoctor")}</SelectItem>
+                {doctorOptions.map((d) => (
+                  <SelectItem key={d.value} value={d.value}>{d.label}</SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="space-y-1.5">
+            <Label className="text-sm">{t("common.notes")}</Label>
+            <Textarea rows={2} {...form.register("notes")} />
+          </div>
+          <DialogFooter>
+            <Button type="button" variant="outline" onClick={() => handleOpenChange(false)}>
+              {t("common.cancel")}
+            </Button>
+            <Button type="submit" disabled={createPlan.isPending}>
+              {createPlan.isPending
+                ? <><Loader2 className="w-4 h-4 mr-1.5 animate-spin" />{t("common.loading")}</>
+                : t("common.create")}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+// ─── Add Item Dialog ─────────────────────────────────────────
+
+function AddItemDialog({
+  open,
+  onOpenChange,
+  planId,
+  patientId,
+}: {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  planId: string
+  patientId: string
+}) {
+  const { t } = useTranslation()
+  const addItem = useAddPlanItem()
+  const { data: treatments } = useTreatments()
+  const [errorMessage, setErrorMessage] = useState<string | null>(null)
+
+  const schema = z.object({
+    name: z.string().min(1, t("validation.required")),
+    treatmentId: z.string().optional(),
+    toothNumber: z.string().optional(),
+    notes: z.string().optional(),
+  })
+
+  const form = useForm<z.infer<typeof schema>>({
+    resolver: zodResolver(schema),
+    defaultValues: { name: "", treatmentId: "", toothNumber: "", notes: "" },
+  })
+
+  const treatmentOptions = (treatments ?? []).map((tr) => ({
+    value: tr.id,
+    label: tr.name,
+    description: tr.category || undefined,
+  }))
+
+  // Auto-fill name when treatment selected
+  const handleTreatmentSelect = (treatmentId: string) => {
+    form.setValue("treatmentId", treatmentId)
+    if (treatmentId) {
+      const tr = treatments?.find((t) => t.id === treatmentId)
+      if (tr && !form.getValues("name")) {
+        form.setValue("name", tr.name)
+      }
+    }
+  }
+
+  const onSubmit = async (values: z.infer<typeof schema>) => {
+    setErrorMessage(null)
+    try {
+      await addItem.mutateAsync({
+        planId,
+        patientId,
+        name: values.name,
+        treatmentId: values.treatmentId || undefined,
+        toothNumber: values.toothNumber || undefined,
+        notes: values.notes || undefined,
+      })
+      toast.success(t("treatments.itemAdded"))
+      form.reset()
+      onOpenChange(false)
+    } catch (err) {
+      if (err instanceof AxiosError) {
+        setErrorMessage(err.response?.data?.message || t("treatments.saveError"))
+      } else {
+        setErrorMessage(t("treatments.saveError"))
+      }
+    }
+  }
+
+  const handleOpenChange = (next: boolean) => {
+    if (!next) { form.reset(); setErrorMessage(null) }
+    onOpenChange(next)
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogContent className="sm:max-w-sm">
+        <DialogHeader>
+          <DialogTitle>{t("treatments.addItem")}</DialogTitle>
+          <DialogDescription>{t("treatments.addItemDesc")}</DialogDescription>
+        </DialogHeader>
+        <form noValidate onSubmit={(e) => { e.preventDefault(); form.handleSubmit(onSubmit)(e) }} className="space-y-3">
+          {errorMessage && (
+            <Alert variant="destructive" className="py-2.5">
+              <AlertDescription className="text-sm">{errorMessage}</AlertDescription>
+            </Alert>
+          )}
+          {/* Treatment selector */}
+          <div className="space-y-1.5">
+            <Label className="text-sm">{t("appointments.treatment")}</Label>
+            <Combobox
+              options={treatmentOptions}
+              value={form.watch("treatmentId") ?? ""}
+              onSelect={handleTreatmentSelect}
+              placeholder={t("appointments.selectTreatment")}
+              searchPlaceholder={t("common.search")}
+              emptyText={t("common.noResults")}
+            />
+          </div>
+          {/* Name */}
+          <div className="space-y-1.5">
+            <Label className="text-sm">{t("common.name")} *</Label>
+            <Input {...form.register("name")} />
+            {form.formState.errors.name && (
+              <p className="text-xs text-destructive">{form.formState.errors.name.message}</p>
+            )}
+          </div>
+          {/* Tooth number */}
+          <div className="space-y-1.5">
+            <Label className="text-sm">{t("treatments.toothNumber")}</Label>
+            <Input {...form.register("toothNumber")} placeholder="e.g. 14, 36" />
+          </div>
+          {/* Notes */}
+          <div className="space-y-1.5">
+            <Label className="text-sm">{t("common.notes")}</Label>
+            <Textarea rows={2} {...form.register("notes")} />
+          </div>
+          <DialogFooter>
+            <Button type="button" variant="outline" onClick={() => handleOpenChange(false)}>
+              {t("common.cancel")}
+            </Button>
+            <Button type="submit" disabled={addItem.isPending}>
+              {addItem.isPending
+                ? <><Loader2 className="w-4 h-4 mr-1.5 animate-spin" />{t("common.loading")}</>
+                : t("common.add")}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  )
+}