elevenlabs-webhook-nodejs 1.0.0

package/frontend/src/pages/phone-numbers/detail.tsx

@@ -0,0 +1,427 @@
+import { useState, useEffect } from "react"
+import { useParams, useNavigate, useSearchParams } from "react-router-dom"
+import { useTranslation } from "react-i18next"
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
+import { toast } from "sonner"
+import {
+  ArrowLeft,
+  Loader2,
+  MessageSquare,
+  Phone,
+  Trash2,
+  Calendar,
+  Check,
+  X,
+} from "lucide-react"
+
+import { api } from "@/lib/api"
+import { StatusBadge } 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 { Separator } from "@/components/ui/separator"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Alert, AlertDescription } from "@/components/ui/alert"
+import { cn } from "@/lib/utils"
+
+// ─── Hooks ───────────────────────────────────────────────────
+
+function usePhoneDetail(id: string | undefined) {
+  return useQuery({
+    queryKey: ["phone-number", id],
+    queryFn: async () => {
+      const { data } = await api.get(`/phone-numbers/${id}`)
+      return data
+    },
+    enabled: !!id,
+  })
+}
+
+function useUpdatePhone() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: async ({ id, ...payload }: any) => {
+      const { data } = await api.put(`/phone-numbers/${id}`, payload)
+      return data
+    },
+    onSuccess: (_d, v) => {
+      qc.invalidateQueries({ queryKey: ["phone-number", v.id] })
+      qc.invalidateQueries({ queryKey: ["phone-numbers"] })
+    },
+  })
+}
+
+function useDeletePhone() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: async (id: string) => { await api.delete(`/phone-numbers/${id}`) },
+    onSuccess: () => { qc.invalidateQueries({ queryKey: ["phone-numbers"] }) },
+  })
+}
+
+function useUpdateSchedule() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: async ({ id, ...payload }: any) => {
+      const { data } = await api.put(`/phone-numbers/${id}/schedule`, payload)
+      return data
+    },
+    onSuccess: (_d, v) => {
+      qc.invalidateQueries({ queryKey: ["phone-number", v.id] })
+      qc.invalidateQueries({ queryKey: ["phone-numbers"] })
+    },
+  })
+}
+
+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" },
+]
+
+// ─── Main Page ───────────────────────────────────────────────
+
+export default function PhoneNumberDetailPage() {
+  const { id } = useParams<{ id: string }>()
+  const [searchParams, setSearchParams] = useSearchParams()
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+  const { data: phone, isLoading } = usePhoneDetail(id)
+  const updatePhone = useUpdatePhone()
+  const deletePhone = useDeletePhone()
+  const updateSchedule = useUpdateSchedule()
+
+  const [label, setLabel] = useState("")
+  const [connectError, setConnectError] = useState<string | null>(null)
+  const [connecting, setConnecting] = useState(false)
+  const [scheduleEnabled, setScheduleEnabled] = useState(false)
+  const [scheduleMode, setScheduleMode] = useState<string>("active_hours")
+  const [schedule, setSchedule] = useState<{ day: number; start: string; end: string }[]>([])
+  const [initialized, setInitialized] = useState(false)
+  const [confirmDelete, setConfirmDelete] = useState(false)
+
+  // Handle OAuth callback params
+  useEffect(() => {
+    if (searchParams.get("wa") === "connected") {
+      toast.success(t("phoneNumbers.waConnected"))
+      searchParams.delete("wa")
+      setSearchParams(searchParams, { replace: true })
+    }
+  }, [])
+
+  useEffect(() => {
+    if (phone && !initialized) {
+      setLabel(phone.phone_label || "")
+      setScheduleEnabled(phone.phone_schedule_enabled ?? false)
+      setScheduleMode(phone.phone_schedule_mode || "active_hours")
+      const existing = Array.isArray(phone.phone_schedule) ? phone.phone_schedule : []
+      setSchedule(DAYS.map(({ day }) => {
+        const e = existing.find((s: any) => s.day === day)
+        return e ?? { day, start: "09:00", end: "18:00" }
+      }))
+      setInitialized(true)
+    }
+  }, [phone, initialized])
+
+  const handleSaveLabel = async () => {
+    if (!id) return
+    try {
+      await updatePhone.mutateAsync({ id, label })
+      toast.success(t("phoneNumbers.updated"))
+    } catch { toast.error(t("phoneNumbers.updateError")) }
+  }
+
+  const handleConnectWhatsApp = async () => {
+    if (!phone) return
+    setConnectError(null)
+    setConnecting(true)
+    try {
+      const { data } = await api.get(`/meta-auth/connect/${phone.phone_id}`)
+      window.location.href = data.url
+    } catch (err: any) {
+      setConnectError(err?.response?.data?.message || t("phoneNumbers.waConnectError"))
+      setConnecting(false)
+    }
+  }
+
+  const handleSaveSchedule = async () => {
+    if (!id) return
+    try {
+      await updateSchedule.mutateAsync({
+        id,
+        scheduleEnabled,
+        scheduleMode,
+        schedule: scheduleEnabled ? schedule.filter((s) => s.start && s.end) : [],
+      })
+      toast.success(t("phoneNumbers.scheduleUpdated"))
+    } catch { toast.error(t("phoneNumbers.scheduleError")) }
+  }
+
+  const handleDelete = async () => {
+    if (!id) return
+    try {
+      await deletePhone.mutateAsync(id)
+      toast.success(t("phoneNumbers.deleted"))
+      navigate("/phone-numbers")
+    } catch { toast.error(t("phoneNumbers.deleteError")) }
+  }
+
+  const toggleDay = (day: number, active: boolean) => {
+    setSchedule((prev) => prev.map((s) => s.day === day
+      ? { ...s, start: active ? "09:00" : "", end: active ? "18:00" : "" }
+      : s
+    ))
+  }
+
+  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-48 w-full rounded-2xl" />
+      </div>
+    )
+  }
+
+  if (!phone) {
+    return (
+      <div className="max-w-[800px] mx-auto space-y-4 py-2">
+        <Button variant="ghost" size="sm" onClick={() => navigate("/phone-numbers")}>
+          <ArrowLeft className="w-4 h-4 mr-1.5" />{t("common.back")}
+        </Button>
+        <p className="text-sm text-muted-foreground">{t("phoneNumbers.noNumbers")}</p>
+      </div>
+    )
+  }
+
+  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 bg-green-500" />
+        <div className="px-6 py-4 flex items-center justify-between">
+          <div className="flex items-center gap-4">
+            <button onClick={() => navigate("/phone-numbers")} className="text-muted-foreground hover:text-foreground">
+              <ArrowLeft className="w-5 h-5" />
+            </button>
+            <div className="w-10 h-10 rounded-lg bg-green-500/10 flex items-center justify-center">
+              <MessageSquare className="w-5 h-5 text-green-600" />
+            </div>
+            <div>
+              <h1 className="text-lg font-bold font-mono">{phone.phone_number}</h1>
+              <p className="text-xs text-muted-foreground">{phone.phone_label || "WhatsApp"}</p>
+            </div>
+          </div>
+          <div className="flex items-center gap-2">
+            <StatusBadge
+              status={phone.phone_is_active ? "active" : "expired"}
+              label={phone.phone_is_active ? t("common.active") : t("common.inactive")}
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* Info */}
+      <Card className="rounded-2xl">
+        <CardHeader>
+          <CardTitle className="text-sm uppercase tracking-wide text-muted-foreground">{t("common.details")}</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-3 text-sm">
+          <div className="flex items-center justify-between">
+            <span className="text-muted-foreground">{t("phoneNumbers.waConnection")}</span>
+            {phone.phone_wa_connected ? (
+              <Badge variant="outline" className="text-xs gap-1 text-green-600">
+                <Check className="w-3 h-3" />{t("phoneNumbers.connected")}
+              </Badge>
+            ) : (
+              <Badge variant="outline" className="text-xs gap-1 text-muted-foreground">
+                <X className="w-3 h-3" />{t("phoneNumbers.notConnected")}
+              </Badge>
+            )}
+          </div>
+          <div className="flex items-center justify-between">
+            <span className="text-muted-foreground">{t("phoneNumbers.purpose")}</span>
+            <span>{t(`phoneNumbers.purpose_${phone.phone_purpose}`)}</span>
+          </div>
+          {phone.clinic && (
+            <div className="flex items-center justify-between">
+              <span className="text-muted-foreground">{t("phoneNumbers.clinic")}</span>
+              <span>{phone.clinic.clinic_name}</span>
+            </div>
+          )}
+
+          <Separator />
+
+          {/* Label */}
+          <div className="space-y-1.5">
+            <Label className="text-xs text-muted-foreground">{t("phoneNumbers.label")}</Label>
+            <div className="flex gap-2">
+              <Input value={label} onChange={(e) => setLabel(e.target.value)} placeholder={t("phoneNumbers.labelPlaceholder")} className="h-9" />
+              <Button size="sm" onClick={handleSaveLabel} disabled={updatePhone.isPending}>
+                {updatePhone.isPending ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : t("common.save")}
+              </Button>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* WhatsApp Connection */}
+      {phone.phone_purpose === "whatsapp" && (
+        <Card className="rounded-2xl">
+          <CardHeader>
+            <CardTitle className="text-sm uppercase tracking-wide text-muted-foreground flex items-center gap-2">
+              <MessageSquare className="w-4 h-4" />
+              {t("phoneNumbers.waSetup")}
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            {phone.phone_wa_connected ? (
+              <div className="space-y-2">
+                <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">{t("phoneNumbers.connected")}</p>
+                    <p className="text-xs text-muted-foreground">{t("phoneNumbers.waConnectedDesc")}</p>
+                  </div>
+                </div>
+                {phone.phone_wa_connected_at && (
+                  <p className="text-xs text-muted-foreground pl-5">
+                    {t("phoneNumbers.connectedSince")} {new Date(phone.phone_wa_connected_at).toLocaleDateString()}
+                  </p>
+                )}
+              </div>
+            ) : (
+              <div className="space-y-4">
+                <p className="text-sm text-muted-foreground">{t("phoneNumbers.waSetupDesc")}</p>
+
+                {connectError && (
+                  <Alert variant="destructive" className="py-2.5">
+                    <AlertDescription className="text-sm">{connectError}</AlertDescription>
+                  </Alert>
+                )}
+
+                <div className="text-center py-2">
+                  <Button size="lg" onClick={handleConnectWhatsApp} disabled={connecting}>
+                    {connecting
+                      ? <><Loader2 className="w-4 h-4 mr-1.5 animate-spin" />{t("common.loading")}</>
+                      : <><MessageSquare className="w-4 h-4 mr-1.5" />{t("phoneNumbers.connectWa")}</>}
+                  </Button>
+                  <p className="text-xs text-muted-foreground mt-2">{t("phoneNumbers.waOAuthHint")}</p>
+                </div>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Schedule */}
+      <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">
+              <Calendar className="w-4 h-4" />{t("phoneNumbers.editSchedule")}
+            </CardTitle>
+            <Button size="sm" onClick={handleSaveSchedule} disabled={updateSchedule.isPending}>
+              {updateSchedule.isPending ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : t("common.save")}
+            </Button>
+          </div>
+        </CardHeader>
+        <CardContent className="space-y-3">
+          <label className="flex items-center gap-2 text-sm font-medium">
+            <Checkbox checked={scheduleEnabled} onCheckedChange={(v) => setScheduleEnabled(!!v)} />
+            {t("phoneNumbers.scheduleEnabled")}
+          </label>
+
+          {scheduleEnabled && (
+            <div className="space-y-2">
+              <div className="flex rounded-lg border overflow-hidden w-fit">
+                <button
+                  type="button"
+                  onClick={() => setScheduleMode("active_hours")}
+                  className={cn(
+                    "px-3 py-1.5 text-xs font-medium transition-colors",
+                    scheduleMode === "active_hours"
+                      ? "bg-primary text-primary-foreground"
+                      : "bg-background hover:bg-muted",
+                  )}
+                >
+                  {t("phoneNumbers.mode_active_hours")}
+                </button>
+                <button
+                  type="button"
+                  onClick={() => setScheduleMode("off_hours")}
+                  className={cn(
+                    "px-3 py-1.5 text-xs font-medium transition-colors border-l",
+                    scheduleMode === "off_hours"
+                      ? "bg-primary text-primary-foreground"
+                      : "bg-background hover:bg-muted",
+                  )}
+                >
+                  {t("phoneNumbers.mode_off_hours")}
+                </button>
+              </div>
+              <p className="text-xs text-muted-foreground">{t(`phoneNumbers.mode_${scheduleMode}_hint`)}</p>
+            </div>
+          )}
+
+          {scheduleEnabled && (
+            <div className="space-y-1.5">
+              {DAYS.map(({ day, key }) => {
+                const entry = schedule.find((s) => s.day === day)
+                const isActive = !!(entry?.start && entry?.end)
+                return (
+                  <div key={day} className={cn("flex items-center gap-2 rounded-lg px-3 py-2", !isActive && "bg-muted/30")}>
+                    <Checkbox checked={isActive} onCheckedChange={(v) => toggleDay(day, !!v)} />
+                    <span className={cn("text-sm w-24", !isActive && "text-muted-foreground")}>{t(`days.${key}`)}</span>
+                    {isActive ? (
+                      <>
+                        <Input
+                          type="time" className="h-8 w-[100px] text-sm"
+                          value={entry?.start ?? "09:00"}
+                          onChange={(e) => setSchedule((prev) => prev.map((s) => s.day === day ? { ...s, start: e.target.value } : s))}
+                        />
+                        <span className="text-sm text-muted-foreground">—</span>
+                        <Input
+                          type="time" className="h-8 w-[100px] text-sm"
+                          value={entry?.end ?? "18:00"}
+                          onChange={(e) => setSchedule((prev) => prev.map((s) => s.day === day ? { ...s, end: e.target.value } : s))}
+                        />
+                      </>
+                    ) : (
+                      <span className="text-xs text-muted-foreground italic">{t("users.dayOff")}</span>
+                    )}
+                  </div>
+                )
+              })}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Delete */}
+      <div className="flex justify-end">
+        {confirmDelete ? (
+          <div className="flex items-center gap-2">
+            <span className="text-sm text-muted-foreground">{t("phoneNumbers.deleteConfirm")}</span>
+            <Button variant="outline" size="sm" onClick={() => setConfirmDelete(false)}>{t("common.cancel")}</Button>
+            <Button variant="destructive" size="sm" onClick={handleDelete} disabled={deletePhone.isPending}>
+              {deletePhone.isPending ? <Loader2 className="w-3.5 h-3.5 mr-1.5 animate-spin" /> : <Trash2 className="w-3.5 h-3.5 mr-1.5" />}
+              {t("common.delete")}
+            </Button>
+          </div>
+        ) : (
+          <Button variant="destructive" size="sm" onClick={() => setConfirmDelete(true)}>
+            <Trash2 className="w-3.5 h-3.5 mr-1.5" />
+            {t("phoneNumbers.deleteNumber")}
+          </Button>
+        )}
+      </div>
+    </div>
+  )
+}