elevenlabs-webhook-nodejs 1.0.0

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

@@ -0,0 +1,328 @@
+import { useState, useEffect } from "react"
+import { useTranslation } from "react-i18next"
+import { useSearchParams } from "react-router-dom"
+import { formatDistanceToNow } from "date-fns"
+import { tr } from "date-fns/locale"
+import { toast } from "sonner"
+import {
+  Plus,
+  Loader2,
+  Trash2,
+  MessageSquare,
+  Phone,
+  Link,
+  Unlink,
+  ShieldCheck,
+  ShieldAlert,
+  Clock,
+} from "lucide-react"
+
+import {
+  useConnectionStatus,
+  useDeleteConnection,
+} from "@/lib/hooks/use-chats"
+import type { WhatsAppConnection } from "@/lib/hooks/use-chats"
+import { api } from "@/lib/api"
+import { useAuthStore } from "@/stores/auth.store"
+
+import { PageHeader, EmptyState } from "@/components/shared"
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import { Skeleton } from "@/components/ui/skeleton"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import { cn } from "@/lib/utils"
+
+// ─── Helpers ────────────────────────────────────────────────
+
+function InstagramIcon({ className }: { className?: string }) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={cn("text-pink-500", className)}>
+      <rect width="20" height="20" x="2" y="2" rx="5" ry="5" />
+      <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
+      <line x1="17.5" x2="17.51" y1="6.5" y2="6.5" />
+    </svg>
+  )
+}
+
+function WhatsAppIcon({ className }: { className?: string }) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" className={cn("text-green-500", className)}>
+      <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" />
+    </svg>
+  )
+}
+
+function tokenStatus(conn: WhatsAppConnection): "healthy" | "expiring" | "expired" {
+  if (!conn.tokenExpiresAt) return "expired"
+  const expires = new Date(conn.tokenExpiresAt)
+  const now = new Date()
+  if (expires < now) return "expired"
+  const daysLeft = (expires.getTime() - now.getTime()) / (1000 * 60 * 60 * 24)
+  if (daysLeft < 7) return "expiring"
+  return "healthy"
+}
+
+// ─── Main Page ───────────────────────────────────────────────
+
+export default function ConnectionsPage() {
+  const { t } = useTranslation()
+  const [searchParams, setSearchParams] = useSearchParams()
+  const { data: connections, isLoading } = useConnectionStatus()
+  const deleteConn = useDeleteConnection()
+  const [connecting, setConnecting] = useState<string | null>(null)
+  const [clinicId, setClinicId] = useState<string>("")
+  const user = useAuthStore((s) => s.user)
+
+  // Get clinics for the selector
+  const [clinics, setClinics] = useState<{ clinic_id: string; clinic_name: string }[]>([])
+  useEffect(() => {
+    api.get("/clinics").then(({ data }) => {
+      const list = (data.data ?? data ?? []).map((c: any) => ({
+        clinic_id: c.clinic_id ?? c.id,
+        clinic_name: c.clinic_name ?? c.name,
+      }))
+      setClinics(list)
+      if (list.length === 1) setClinicId(list[0].clinic_id)
+    }).catch(() => {})
+  }, [])
+
+  // Handle OAuth callback params
+  useEffect(() => {
+    if (searchParams.get("wa") === "connected") {
+      toast.success(t("connections.waConnected"))
+      searchParams.delete("wa")
+      setSearchParams(searchParams, { replace: true })
+    }
+    if (searchParams.get("ig") === "connected") {
+      toast.success(t("connections.igConnected"))
+      searchParams.delete("ig")
+      setSearchParams(searchParams, { replace: true })
+    }
+    const error = searchParams.get("error")
+    if (error) {
+      const key = `connections.error_${error}`
+      const msg = t(key) !== key ? t(key) : t("connections.connectError")
+      toast.error(msg)
+      searchParams.delete("error")
+      setSearchParams(searchParams, { replace: true })
+    }
+  }, [])
+
+  const handleConnect = async (type: "whatsapp" | "instagram") => {
+    if (!clinicId) {
+      toast.error(t("connections.selectClinicFirst"))
+      return
+    }
+    setConnecting(type)
+    try {
+      const endpoint = type === "whatsapp"
+        ? `/meta-auth/connect/${clinicId}`
+        : `/meta-instagram/connect/${clinicId}`
+      const { data } = await api.get(endpoint)
+      window.location.href = data.url
+    } catch (err: any) {
+      toast.error(err?.response?.data?.message || t("connections.connectError"))
+      setConnecting(null)
+    }
+  }
+
+  const handleDelete = async (conn: WhatsAppConnection) => {
+    try {
+      await deleteConn.mutateAsync(conn.id)
+      toast.success(t("connections.disconnected"))
+    } catch {
+      toast.error(t("connections.disconnectError"))
+    }
+  }
+
+  const waConnections = (connections ?? []).filter((c) => c.type === "whatsapp")
+  const igConnections = (connections ?? []).filter((c) => c.type === "instagram")
+
+  return (
+    <div className="space-y-6">
+      <PageHeader
+        title={t("connections.title")}
+        description={t("connections.description")}
+      />
+
+      {/* Connect buttons */}
+      <Card className="rounded-2xl">
+        <CardContent className="pt-6">
+          <div className="flex items-end gap-4">
+            {clinics.length > 1 && (
+              <div className="space-y-1.5">
+                <p className="text-xs text-muted-foreground font-medium">{t("connections.clinic")}</p>
+                <Select value={clinicId} onValueChange={setClinicId}>
+                  <SelectTrigger className="h-9 w-[200px]">
+                    <SelectValue>
+                      {clinics.find((c) => c.clinic_id === clinicId)?.clinic_name || t("connections.selectClinic")}
+                    </SelectValue>
+                  </SelectTrigger>
+                  <SelectContent>
+                    {clinics.map((c) => (
+                      <SelectItem key={c.clinic_id} value={c.clinic_id}>{c.clinic_name}</SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+            )}
+            <Button
+              variant="outline"
+              onClick={() => handleConnect("whatsapp")}
+              disabled={connecting === "whatsapp" || !clinicId}
+            >
+              {connecting === "whatsapp"
+                ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" />
+                : <WhatsAppIcon className="w-4 h-4 mr-1.5" />}
+              {t("connections.connectWhatsApp")}
+            </Button>
+            <Button
+              variant="outline"
+              onClick={() => handleConnect("instagram")}
+              disabled={connecting === "instagram" || !clinicId}
+            >
+              {connecting === "instagram"
+                ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" />
+                : <InstagramIcon className="w-4 h-4 mr-1.5" />}
+              {t("connections.connectInstagram")}
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Connections list */}
+      {isLoading ? (
+        <div className="space-y-3">
+          <Skeleton className="h-20 rounded-2xl" />
+          <Skeleton className="h-20 rounded-2xl" />
+        </div>
+      ) : !connections?.length ? (
+        <EmptyState
+          icon={<Link className="w-6 h-6" />}
+          title={t("connections.noConnections")}
+          description={t("connections.noConnectionsDesc")}
+        />
+      ) : (
+        <div className="space-y-3">
+          {/* WhatsApp */}
+          {waConnections.length > 0 && (
+            <div className="space-y-2">
+              <h3 className="text-xs font-medium uppercase tracking-wide text-muted-foreground flex items-center gap-2">
+                <WhatsAppIcon className="w-3.5 h-3.5" /> WhatsApp
+              </h3>
+              {waConnections.map((conn) => (
+                <ConnectionCard key={conn.id} conn={conn} onDelete={handleDelete} />
+              ))}
+            </div>
+          )}
+
+          {/* Instagram */}
+          {igConnections.length > 0 && (
+            <div className="space-y-2">
+              <h3 className="text-xs font-medium uppercase tracking-wide text-muted-foreground flex items-center gap-2">
+                <InstagramIcon className="w-3.5 h-3.5" /> Instagram
+              </h3>
+              {igConnections.map((conn) => (
+                <ConnectionCard key={conn.id} conn={conn} onDelete={handleDelete} />
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
+
+// ─── Connection Card ────────────────────────────────────────
+
+function ConnectionCard({
+  conn,
+  onDelete,
+}: {
+  conn: WhatsAppConnection
+  onDelete: (c: WhatsAppConnection) => void
+}) {
+  const { t } = useTranslation()
+  const [confirmDelete, setConfirmDelete] = useState(false)
+  const status = tokenStatus(conn)
+  const isWa = conn.type === "whatsapp"
+
+  return (
+    <div className="rounded-xl border bg-card p-4 flex items-center gap-4">
+      {/* Icon */}
+      <div className={cn(
+        "w-10 h-10 rounded-lg flex items-center justify-center shrink-0",
+        isWa ? "bg-green-500/10" : "bg-pink-500/10",
+      )}>
+        {isWa
+          ? <WhatsAppIcon className="w-5 h-5" />
+          : <InstagramIcon className="w-5 h-5" />}
+      </div>
+
+      {/* Info */}
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center gap-2">
+          <p className="text-sm font-medium">{conn.label}</p>
+          {conn.clinic && (
+            <Badge variant="outline" className="text-[9px] px-1.5 py-0 h-4">
+              {conn.clinic.clinic_name}
+            </Badge>
+          )}
+        </div>
+        <div className="flex items-center gap-3 mt-0.5 text-xs text-muted-foreground">
+          {conn.phone && (
+            <span className="font-mono">{conn.phone}</span>
+          )}
+          {conn.connectedAt && (
+            <span className="flex items-center gap-1">
+              <Clock className="w-3 h-3" />
+              {formatDistanceToNow(new Date(conn.connectedAt), { addSuffix: true, locale: tr })}
+            </span>
+          )}
+        </div>
+      </div>
+
+      {/* Token status */}
+      <div className="flex items-center gap-1.5 shrink-0">
+        {status === "healthy" && (
+          <Badge variant="outline" className="text-[10px] gap-1 text-green-600 border-green-500/30">
+            <ShieldCheck className="w-3 h-3" />{t("connections.tokenHealthy")}
+          </Badge>
+        )}
+        {status === "expiring" && (
+          <Badge variant="outline" className="text-[10px] gap-1 text-yellow-600 border-yellow-500/30">
+            <ShieldAlert className="w-3 h-3" />{t("connections.tokenExpiring")}
+          </Badge>
+        )}
+        {status === "expired" && (
+          <Badge variant="outline" className="text-[10px] gap-1 text-red-600 border-red-500/30">
+            <ShieldAlert className="w-3 h-3" />{t("connections.tokenExpired")}
+          </Badge>
+        )}
+      </div>
+
+      {/* Delete */}
+      {confirmDelete ? (
+        <div className="flex items-center gap-1.5 shrink-0">
+          <Button size="sm" variant="outline" className="h-7 text-xs" onClick={() => setConfirmDelete(false)}>
+            {t("common.cancel")}
+          </Button>
+          <Button size="sm" variant="destructive" className="h-7 text-xs" onClick={() => onDelete(conn)}>
+            <Trash2 className="w-3 h-3 mr-1" />{t("common.delete")}
+          </Button>
+        </div>
+      ) : (
+        <Button size="sm" variant="ghost" className="h-8 text-muted-foreground shrink-0" onClick={() => setConfirmDelete(true)}>
+          <Unlink className="w-3.5 h-3.5" />
+        </Button>
+      )}
+    </div>
+  )
+}

package/frontend/src/pages/dashboard.tsx

@@ -0,0 +1,50 @@
+import { useTranslation } from "react-i18next"
+import { Calendar, MessageSquare, TrendingUp, Users } from "lucide-react"
+import { PageHeader, StatCard } from "@/components/shared"
+
+export default function DashboardPage() {
+  const { t } = useTranslation()
+
+  return (
+    <div className="space-y-6">
+      <PageHeader
+        title={t("dashboard.title")}
+        description={t("dashboard.description")}
+      />
+
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+        <StatCard
+          title={t("dashboard.totalPatients")}
+          value="1,284"
+          icon={<Users className="w-4 h-4" />}
+          trend={{ value: "12%", positive: true }}
+          description={t("dashboard.fromLastMonth")}
+        />
+        <StatCard
+          title={t("dashboard.todayAppointments")}
+          value={18}
+          icon={<Calendar className="w-4 h-4" />}
+          description={`3 ${t("dashboard.completed")}, 15 ${t("dashboard.upcoming")}`}
+        />
+        <StatCard
+          title={t("dashboard.activeSessions")}
+          value={5}
+          icon={<MessageSquare className="w-4 h-4" />}
+          trend={{ value: "2", positive: true }}
+          description={t("dashboard.vsYesterday")}
+        />
+        <StatCard
+          title={t("dashboard.openLeads")}
+          value={23}
+          icon={<TrendingUp className="w-4 h-4" />}
+          trend={{ value: "8%", positive: false }}
+          description={t("dashboard.fromLastWeek")}
+        />
+      </div>
+
+      <p className="text-sm text-muted-foreground">
+        Dashboard content coming soon. Visit <a href="/components" className="text-primary hover:underline">/components</a> for the design system.
+      </p>
+    </div>
+  )
+}

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

@@ -0,0 +1,24 @@
+import { useTranslation } from "react-i18next"
+import { PageHeader } from "@/components/shared"
+import { Card, CardContent } from "@/components/ui/card"
+import { Construction } from "lucide-react"
+
+export default function LeadsPage() {
+  const { t } = useTranslation()
+
+  return (
+    <div className="space-y-6">
+      <PageHeader title={t("leads.title")} description={t("leads.description")} />
+      <Card>
+        <CardContent className="flex flex-col items-center justify-center py-16 text-center">
+          <div className="rounded-full bg-muted p-4 mb-4">
+            <Construction className="w-6 h-6 text-muted-foreground" />
+          </div>
+          <p className="text-sm text-muted-foreground mt-1">
+            This page is under construction.
+          </p>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}