elevenlabs-webhook-nodejs 1.0.0

package/frontend/src/pages/patients/photo-sets-tab.tsx

@@ -0,0 +1,616 @@
+import { useState, useRef } 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,
+  Camera,
+  Trash2,
+  Loader2,
+  Upload,
+  Image,
+  ChevronLeft,
+  X,
+} from "lucide-react"
+
+import {
+  usePhotoSets,
+  usePhotoSet,
+  useCreatePhotoSet,
+  useUploadPhoto,
+  useDeletePhoto,
+  useDeletePhotoSet,
+} from "@/lib/hooks/use-photo-sets"
+import type { PhotoSet } from "@/lib/hooks/use-photo-sets"
+
+import { EmptyState } 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 { Badge } from "@/components/ui/badge"
+import { Skeleton } from "@/components/ui/skeleton"
+import { Card, CardContent } 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"
+
+// ─── Constants ───────────────────────────────────────────────
+
+const SET_TYPES = ["before", "after", "progress", "consultation", "other"] as const
+const PHOTO_ANGLES = ["front", "left", "right", "closeup", "other"] as const
+
+// ─── Main Tab ────────────────────────────────────────────────
+
+export function PhotoSetsTab({ patientId }: { patientId: string }) {
+  const { t } = useTranslation()
+  const { data: sets, isLoading } = usePhotoSets(patientId)
+  const [createOpen, setCreateOpen] = useState(false)
+  const [selectedSetId, setSelectedSetId] = useState<string | null>(null)
+  const deleteSet = useDeletePhotoSet()
+
+  if (isLoading) {
+    return (
+      <div className="grid gap-3 grid-cols-2 sm:grid-cols-3 lg:grid-cols-4">
+        {Array.from({ length: 4 }).map((_, i) => (
+          <Skeleton key={i} className="aspect-[4/3] rounded-lg" />
+        ))}
+      </div>
+    )
+  }
+
+  // Detail view for a selected set
+  if (selectedSetId) {
+    return (
+      <PhotoSetDetail
+        patientId={patientId}
+        setId={selectedSetId}
+        onBack={() => setSelectedSetId(null)}
+      />
+    )
+  }
+
+  const items = sets ?? []
+
+  if (items.length === 0) {
+    return (
+      <>
+        <EmptyState
+          icon={<Camera className="w-6 h-6" />}
+          title={t("photos.noSets")}
+          action={
+            <Button variant="outline" size="sm" onClick={() => setCreateOpen(true)}>
+              <Plus className="w-4 h-4 mr-1.5" />
+              {t("photos.newSet")}
+            </Button>
+          }
+        />
+        <CreateSetDialog open={createOpen} onOpenChange={setCreateOpen} patientId={patientId} />
+      </>
+    )
+  }
+
+  const handleDelete = async (set: PhotoSet) => {
+    try {
+      await deleteSet.mutateAsync({ patientId, setId: set.id })
+      toast.success(t("photos.setDeleted"))
+    } catch {
+      toast.error(t("photos.deleteError"))
+    }
+  }
+
+  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("photos.newSet")}
+        </Button>
+      </div>
+
+      <div className="grid gap-3 grid-cols-2 sm:grid-cols-3 lg:grid-cols-4">
+        {items.map((set) => (
+          <PhotoSetCard
+            key={set.id}
+            set={set}
+            patientId={patientId}
+            onClick={() => setSelectedSetId(set.id)}
+            onDelete={() => handleDelete(set)}
+          />
+        ))}
+      </div>
+
+      <CreateSetDialog open={createOpen} onOpenChange={setCreateOpen} patientId={patientId} />
+    </div>
+  )
+}
+
+// ─── Photo Set Card (with cover preview) ─────────────────────
+
+function PhotoSetCard({
+  set,
+  patientId,
+  onClick,
+  onDelete,
+}: {
+  set: PhotoSet
+  patientId: string
+  onClick: () => void
+  onDelete: () => void
+}) {
+  const { t } = useTranslation()
+  const { data: detail } = usePhotoSet(
+    set.photoCount > 0 ? patientId : undefined,
+    set.photoCount > 0 ? set.id : undefined,
+  )
+
+  const coverPhotos = detail?.photos?.slice(0, 4) ?? []
+
+  return (
+    <Card
+      className="cursor-pointer hover:ring-1 hover:ring-primary/30 transition-all group"
+      onClick={onClick}
+    >
+      <CardContent className="p-3">
+        <div className="aspect-[4/3] rounded-md bg-muted overflow-hidden mb-2 relative">
+          {coverPhotos.length === 0 ? (
+            <div className="w-full h-full flex items-center justify-center">
+              <Image className="w-8 h-8 text-muted-foreground/40" />
+            </div>
+          ) : coverPhotos.length === 1 ? (
+            <img src={coverPhotos[0].thumbnailUrl || coverPhotos[0].url} alt="" className="w-full h-full object-cover" loading="lazy" />
+          ) : coverPhotos.length === 2 ? (
+            <div className="grid grid-cols-2 w-full h-full gap-0.5">
+              {coverPhotos.map((p) => (
+                <img key={p.id} src={p.thumbnailUrl || p.url} alt="" className="w-full h-full object-cover" loading="lazy" />
+              ))}
+            </div>
+          ) : coverPhotos.length === 3 ? (
+            <div className="grid grid-cols-2 w-full h-full gap-0.5">
+              <img src={coverPhotos[0].thumbnailUrl || coverPhotos[0].url} alt="" className="w-full h-full object-cover row-span-2" loading="lazy" />
+              <img src={coverPhotos[1].thumbnailUrl || coverPhotos[1].url} alt="" className="w-full h-full object-cover" loading="lazy" />
+              <img src={coverPhotos[2].thumbnailUrl || coverPhotos[2].url} alt="" className="w-full h-full object-cover" loading="lazy" />
+            </div>
+          ) : (
+            <div className="grid grid-cols-2 grid-rows-2 w-full h-full gap-0.5">
+              {coverPhotos.map((p) => (
+                <img key={p.id} src={p.thumbnailUrl || p.url} alt="" className="w-full h-full object-cover" loading="lazy" />
+              ))}
+            </div>
+          )}
+          <span className="absolute bottom-1.5 right-1.5 text-[10px] bg-background/80 backdrop-blur-sm rounded px-1.5 py-0.5 font-medium">
+            {set.photoCount} {t("photos.photos")}
+          </span>
+          <button
+            className="absolute top-1.5 right-1.5 opacity-0 group-hover:opacity-100 transition-opacity bg-background/80 backdrop-blur-sm rounded p-1 hover:text-destructive"
+            onClick={(e) => { e.stopPropagation(); onDelete() }}
+          >
+            <Trash2 className="w-3 h-3" />
+          </button>
+        </div>
+        <div className="space-y-0.5">
+          <p className="text-sm font-medium truncate">
+            {set.label || t(`photos.type_${set.type}`)}
+          </p>
+          <div className="flex items-center gap-1.5">
+            <Badge variant="outline" className="text-[10px] px-1.5 py-0">
+              {t(`photos.type_${set.type}`)}
+            </Badge>
+            <span className="text-[10px] text-muted-foreground">
+              {format(new Date(set.takenAt || set.createdAt), "dd MMM yyyy")}
+            </span>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+// ─── Photo Set Detail ────────────────────────────────────────
+
+function PhotoSetDetail({
+  patientId,
+  setId,
+  onBack,
+}: {
+  patientId: string
+  setId: string
+  onBack: () => void
+}) {
+  const { t } = useTranslation()
+  const { data: set, isLoading } = usePhotoSet(patientId, setId)
+  const [uploadOpen, setUploadOpen] = useState(false)
+  const [lightboxUrl, setLightboxUrl] = useState<string | null>(null)
+  const deletePhoto = useDeletePhoto()
+
+  if (isLoading || !set) {
+    return (
+      <div className="space-y-3">
+        <Skeleton className="h-8 w-48" />
+        <div className="grid gap-3 grid-cols-2 sm:grid-cols-3">
+          {Array.from({ length: 3 }).map((_, i) => (
+            <Skeleton key={i} className="aspect-square rounded-lg" />
+          ))}
+        </div>
+      </div>
+    )
+  }
+
+  const handleDeletePhoto = async (photoId: string) => {
+    try {
+      await deletePhoto.mutateAsync({ patientId, setId, photoId })
+      toast.success(t("photos.photoDeleted"))
+    } catch {
+      toast.error(t("photos.deleteError"))
+    }
+  }
+
+  return (
+    <div className="space-y-4">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <Button variant="ghost" size="sm" onClick={onBack}>
+            <ChevronLeft className="w-4 h-4 mr-1" />
+            {t("common.back")}
+          </Button>
+          <h3 className="text-sm font-medium">{set.label || t(`photos.type_${set.type}`)}</h3>
+          <Badge variant="outline" className="text-xs">{t(`photos.type_${set.type}`)}</Badge>
+        </div>
+        <Button size="sm" onClick={() => setUploadOpen(true)}>
+          <Upload className="w-4 h-4 mr-1.5" />
+          {t("photos.uploadPhoto")}
+        </Button>
+      </div>
+
+      {/* Info */}
+      {set.notes && (
+        <p className="text-xs text-muted-foreground border-l-2 border-muted pl-3">{set.notes}</p>
+      )}
+
+      {/* Photos grid */}
+      {(!set.photos || set.photos.length === 0) ? (
+        <EmptyState
+          icon={<Camera className="w-6 h-6" />}
+          title={t("photos.noPhotos")}
+          action={
+            <Button variant="outline" size="sm" onClick={() => setUploadOpen(true)}>
+              <Upload className="w-4 h-4 mr-1.5" />
+              {t("photos.uploadPhoto")}
+            </Button>
+          }
+        />
+      ) : (
+        <div className="grid gap-3 grid-cols-2 sm:grid-cols-3 lg:grid-cols-4">
+          {set.photos.map((photo) => (
+            <div key={photo.id} className="relative group">
+              <div
+                className="aspect-square rounded-lg overflow-hidden bg-muted cursor-pointer"
+                onClick={() => setLightboxUrl(photo.url)}
+              >
+                <img
+                  src={photo.thumbnailUrl || photo.url}
+                  alt={photo.caption || photo.angle}
+                  className="w-full h-full object-cover"
+                  loading="lazy"
+                />
+              </div>
+              {photo.angle && (
+                <Badge
+                  variant="outline"
+                  className="absolute bottom-1.5 left-1.5 text-[10px] bg-background/80 backdrop-blur-sm"
+                >
+                  {t(`photos.angle_${photo.angle}`)}
+                </Badge>
+              )}
+              <button
+                className="absolute top-1.5 right-1.5 opacity-0 group-hover:opacity-100 transition-opacity bg-background/80 backdrop-blur-sm rounded p-1 hover:text-destructive"
+                onClick={() => handleDeletePhoto(photo.id)}
+              >
+                <Trash2 className="w-3 h-3" />
+              </button>
+              {photo.caption && (
+                <p className="text-xs text-muted-foreground mt-1 truncate">{photo.caption}</p>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Lightbox */}
+      {lightboxUrl && (
+        <Dialog open={!!lightboxUrl} onOpenChange={() => setLightboxUrl(null)}>
+          <DialogContent className="sm:max-w-3xl p-0 overflow-hidden bg-black/95">
+            <DialogHeader className="sr-only">
+              <DialogTitle>Photo</DialogTitle>
+              <DialogDescription>Full size photo</DialogDescription>
+            </DialogHeader>
+            <button
+              className="absolute top-3 right-3 z-10 text-white/70 hover:text-white"
+              onClick={() => setLightboxUrl(null)}
+            >
+              <X className="w-5 h-5" />
+            </button>
+            <img
+              src={lightboxUrl}
+              alt=""
+              className="w-full h-auto max-h-[80vh] object-contain"
+            />
+          </DialogContent>
+        </Dialog>
+      )}
+
+      <UploadPhotoDialog
+        open={uploadOpen}
+        onOpenChange={setUploadOpen}
+        patientId={patientId}
+        setId={setId}
+      />
+    </div>
+  )
+}
+
+// ─── Create Set Dialog ───────────────────────────────────────
+
+function CreateSetDialog({
+  open,
+  onOpenChange,
+  patientId,
+}: {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  patientId: string
+}) {
+  const { t } = useTranslation()
+  const createSet = useCreatePhotoSet()
+  const [errorMessage, setErrorMessage] = useState<string | null>(null)
+
+  const schema = z.object({
+    type: z.string().min(1, t("validation.required")),
+    label: z.string().optional(),
+    notes: z.string().optional(),
+  })
+
+  const form = useForm<z.infer<typeof schema>>({
+    resolver: zodResolver(schema),
+    defaultValues: { type: "before", label: "", notes: "" },
+  })
+
+  const onSubmit = async (values: z.infer<typeof schema>) => {
+    setErrorMessage(null)
+    try {
+      await createSet.mutateAsync({
+        patientId,
+        type: values.type,
+        label: values.label || undefined,
+        notes: values.notes || undefined,
+      })
+      toast.success(t("photos.setCreated"))
+      form.reset()
+      onOpenChange(false)
+    } catch (err) {
+      if (err instanceof AxiosError) {
+        setErrorMessage(err.response?.data?.message || t("photos.saveError"))
+      } else {
+        setErrorMessage(t("photos.saveError"))
+      }
+    }
+  }
+
+  const handleOpenChange = (next: boolean) => {
+    if (!next) { form.reset({ type: "before", label: "", notes: "" }); setErrorMessage(null) }
+    onOpenChange(next)
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogContent className="sm:max-w-sm">
+        <DialogHeader>
+          <DialogTitle>{t("photos.newSet")}</DialogTitle>
+          <DialogDescription>{t("photos.newSetDesc")}</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("common.type")} *</Label>
+            <Select value={form.watch("type")} onValueChange={(val) => form.setValue("type", val)}>
+              <SelectTrigger className="w-full">
+                <SelectValue>{t(`photos.type_${form.watch("type")}`)}</SelectValue>
+              </SelectTrigger>
+              <SelectContent>
+                {SET_TYPES.map((type) => (
+                  <SelectItem key={type} value={type}>{t(`photos.type_${type}`)}</SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="space-y-1.5">
+            <Label className="text-sm">{t("photos.label")}</Label>
+            <Input {...form.register("label")} placeholder={t("photos.labelPlaceholder")} />
+          </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={createSet.isPending}>
+              {createSet.isPending ? <><Loader2 className="w-4 h-4 mr-1.5 animate-spin" />{t("common.loading")}</> : t("common.create")}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+// ─── Upload Photo Dialog ─────────────────────────────────────
+
+function UploadPhotoDialog({
+  open,
+  onOpenChange,
+  patientId,
+  setId,
+}: {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  patientId: string
+  setId: string
+}) {
+  const { t } = useTranslation()
+  const uploadPhoto = useUploadPhoto()
+  const fileInputRef = useRef<HTMLInputElement>(null)
+  const [errorMessage, setErrorMessage] = useState<string | null>(null)
+  const [preview, setPreview] = useState<string | null>(null)
+  const [fileData, setFileData] = useState<{ content: string; contentType: string } | null>(null)
+
+  const schema = z.object({
+    angle: z.string().optional(),
+    caption: z.string().optional(),
+  })
+
+  const form = useForm<z.infer<typeof schema>>({
+    resolver: zodResolver(schema),
+    defaultValues: { angle: "front", caption: "" },
+  })
+
+  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0]
+    if (!file) return
+
+    const reader = new FileReader()
+    reader.onload = () => {
+      const base64 = (reader.result as string).split(",")[1]
+      setFileData({ content: base64, contentType: file.type })
+      setPreview(reader.result as string)
+    }
+    reader.readAsDataURL(file)
+  }
+
+  const onSubmit = async (values: z.infer<typeof schema>) => {
+    if (!fileData) {
+      setErrorMessage(t("photos.selectFile"))
+      return
+    }
+    setErrorMessage(null)
+    try {
+      await uploadPhoto.mutateAsync({
+        patientId,
+        setId,
+        angle: values.angle || undefined,
+        caption: values.caption || undefined,
+        content: fileData.content,
+        contentType: fileData.contentType,
+      })
+      toast.success(t("photos.photoUploaded"))
+      handleOpenChange(false)
+    } catch (err) {
+      if (err instanceof AxiosError) {
+        setErrorMessage(err.response?.data?.message || t("photos.saveError"))
+      } else {
+        setErrorMessage(t("photos.saveError"))
+      }
+    }
+  }
+
+  const handleOpenChange = (next: boolean) => {
+    if (!next) {
+      form.reset({ angle: "front", caption: "" })
+      setErrorMessage(null)
+      setPreview(null)
+      setFileData(null)
+    }
+    onOpenChange(next)
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogContent className="sm:max-w-sm">
+        <DialogHeader>
+          <DialogTitle>{t("photos.uploadPhoto")}</DialogTitle>
+          <DialogDescription>{t("photos.uploadPhotoDesc")}</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>
+          )}
+
+          {/* File picker + preview */}
+          <div
+            className="border-2 border-dashed rounded-lg p-4 text-center cursor-pointer hover:border-primary/50 transition-colors"
+            onClick={() => fileInputRef.current?.click()}
+          >
+            {preview ? (
+              <img src={preview} alt="Preview" className="max-h-40 mx-auto rounded-md" />
+            ) : (
+              <div className="py-4 space-y-1">
+                <Camera className="w-8 h-8 mx-auto text-muted-foreground/50" />
+                <p className="text-sm text-muted-foreground">{t("photos.clickToSelect")}</p>
+              </div>
+            )}
+            <input
+              ref={fileInputRef}
+              type="file"
+              accept="image/*"
+              className="hidden"
+              onChange={handleFileSelect}
+            />
+          </div>
+
+          {/* Angle */}
+          <div className="space-y-1.5">
+            <Label className="text-sm">{t("photos.angle")}</Label>
+            <Select value={form.watch("angle") || "front"} onValueChange={(val) => form.setValue("angle", val)}>
+              <SelectTrigger className="w-full">
+                <SelectValue>{t(`photos.angle_${form.watch("angle") || "front"}`)}</SelectValue>
+              </SelectTrigger>
+              <SelectContent>
+                {PHOTO_ANGLES.map((a) => (
+                  <SelectItem key={a} value={a}>{t(`photos.angle_${a}`)}</SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          {/* Caption */}
+          <div className="space-y-1.5">
+            <Label className="text-sm">{t("photos.caption")}</Label>
+            <Input {...form.register("caption")} placeholder={t("photos.captionPlaceholder")} />
+          </div>
+
+          <DialogFooter>
+            <Button type="button" variant="outline" onClick={() => handleOpenChange(false)}>{t("common.cancel")}</Button>
+            <Button type="submit" disabled={uploadPhoto.isPending || !fileData}>
+              {uploadPhoto.isPending
+                ? <><Loader2 className="w-4 h-4 mr-1.5 animate-spin" />{t("common.loading")}</>
+                : <><Upload className="w-4 h-4 mr-1.5" />{t("common.upload")}</>}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  )
+}