elevenlabs-webhook-nodejs 1.0.0

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

@@ -0,0 +1,224 @@
+import { useState } from "react"
+import { useTranslation } from "react-i18next"
+import { useNavigate } from "react-router-dom"
+import { useForm } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { z } from "zod"
+import { toast } from "sonner"
+import { AxiosError } from "axios"
+import {
+  Plus,
+  Building2,
+  Settings,
+  Users,
+  Calendar,
+  Loader2,
+  MapPin,
+  Globe,
+} from "lucide-react"
+
+import { useClinics } from "@/lib/hooks/use-clinics"
+import { useCreateClinic } from "@/lib/hooks/use-clinic-detail"
+
+import { PageHeader, EmptyState } 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 { Card, CardContent } from "@/components/ui/card"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+import { Alert, AlertDescription } from "@/components/ui/alert"
+
+export default function ClinicsPage() {
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+  const { data: clinics, isLoading } = useClinics()
+  const [createOpen, setCreateOpen] = useState(false)
+
+  return (
+    <div className="space-y-6">
+      <PageHeader title={t("clinics.title")} description={t("clinics.description")}>
+        <Button onClick={() => setCreateOpen(true)}>
+          <Plus className="w-4 h-4 mr-1.5" />
+          {t("clinics.newClinic")}
+        </Button>
+      </PageHeader>
+
+      {isLoading ? (
+        <div className="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
+          {Array.from({ length: 3 }).map((_, i) => (
+            <Skeleton key={i} className="h-40 rounded-xl" />
+          ))}
+        </div>
+      ) : !clinics?.length ? (
+        <EmptyState
+          icon={<Building2 className="w-6 h-6" />}
+          title={t("clinics.noClinics")}
+          action={
+            <Button variant="outline" onClick={() => setCreateOpen(true)}>
+              <Plus className="w-4 h-4 mr-1.5" />
+              {t("clinics.newClinic")}
+            </Button>
+          }
+        />
+      ) : (
+        <div className="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
+          {clinics.map((clinic) => (
+            <Card
+              key={clinic.id}
+              className="cursor-pointer hover:ring-1 hover:ring-primary/30 transition-all"
+              onClick={() => navigate(`/clinics/${clinic.id}/settings`)}
+            >
+              <CardContent className="p-5 space-y-3">
+                <div className="flex items-start justify-between">
+                  <div className="flex items-center gap-3">
+                    <div className="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center">
+                      <Building2 className="w-5 h-5 text-primary" />
+                    </div>
+                    <div>
+                      <h3 className="font-semibold text-sm">{clinic.name}</h3>
+                      <p className="text-xs text-muted-foreground">/{clinic.slug}</p>
+                    </div>
+                  </div>
+                  {clinic.isDefault && (
+                    <Badge variant="outline" className="text-[10px]">{t("clinics.default")}</Badge>
+                  )}
+                </div>
+
+                <div className="flex items-center gap-4 text-xs text-muted-foreground">
+                  <span className="flex items-center gap-1">
+                    <Users className="w-3 h-3" />
+                    {clinic.patientCount} {t("clinics.patients")}
+                  </span>
+                  <span className="flex items-center gap-1">
+                    <Calendar className="w-3 h-3" />
+                    {clinic.appointmentCount} {t("clinics.appointments")}
+                  </span>
+                  <span className="flex items-center gap-1">
+                    <Globe className="w-3 h-3" />
+                    {clinic.timezone}
+                  </span>
+                </div>
+
+                <Button size="sm" variant="ghost" className="w-full justify-start text-xs" onClick={(e) => { e.stopPropagation(); navigate(`/clinics/${clinic.id}/settings`) }}>
+                  <Settings className="w-3.5 h-3.5 mr-1.5" />
+                  {t("clinics.settings")}
+                </Button>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      )}
+
+      <CreateClinicDialog open={createOpen} onOpenChange={setCreateOpen} />
+    </div>
+  )
+}
+
+// ─── Create Clinic Dialog ────────────────────────────────────
+
+function CreateClinicDialog({ open, onOpenChange }: { open: boolean; onOpenChange: (v: boolean) => void }) {
+  const { t } = useTranslation()
+  const createClinic = useCreateClinic()
+  const [errorMessage, setErrorMessage] = useState<string | null>(null)
+
+  const schema = z.object({
+    name: z.string().min(1, t("validation.required")),
+    slug: z.string().optional(),
+    address: z.string().optional(),
+    phone: z.string().optional(),
+    email: z.string().optional(),
+    timezone: z.string().optional(),
+  })
+
+  const form = useForm<z.infer<typeof schema>>({
+    resolver: zodResolver(schema),
+    defaultValues: { name: "", slug: "", address: "", phone: "", email: "", timezone: "Europe/Istanbul" },
+  })
+
+  const onSubmit = async (values: z.infer<typeof schema>) => {
+    setErrorMessage(null)
+    try {
+      await createClinic.mutateAsync({
+        name: values.name,
+        slug: values.slug || undefined,
+        address: values.address || undefined,
+        phone: values.phone || undefined,
+        email: values.email || undefined,
+        timezone: values.timezone || undefined,
+      })
+      toast.success(t("clinics.createSuccess"))
+      form.reset()
+      onOpenChange(false)
+    } catch (err) {
+      if (err instanceof AxiosError) {
+        setErrorMessage(err.response?.data?.message || t("clinics.createError"))
+      } else {
+        setErrorMessage(t("clinics.createError"))
+      }
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={(v) => { if (!v) { form.reset(); setErrorMessage(null) }; onOpenChange(v) }}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>{t("clinics.newClinic")}</DialogTitle>
+          <DialogDescription>{t("clinics.newClinicDesc")}</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.name")} *</Label>
+            <Input {...form.register("name")} placeholder={t("clinics.namePlaceholder")} />
+            {form.formState.errors.name && <p className="text-xs text-destructive">{form.formState.errors.name.message}</p>}
+          </div>
+          <div className="grid grid-cols-2 gap-3">
+            <div className="space-y-1.5">
+              <Label className="text-sm">{t("clinics.slug")}</Label>
+              <Input {...form.register("slug")} placeholder="main" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">{t("clinics.timezone")}</Label>
+              <Input {...form.register("timezone")} placeholder="Europe/Istanbul" />
+            </div>
+          </div>
+          <div className="space-y-1.5">
+            <Label className="text-sm">{t("clinics.address")}</Label>
+            <Input {...form.register("address")} />
+          </div>
+          <div className="grid grid-cols-2 gap-3">
+            <div className="space-y-1.5">
+              <Label className="text-sm">{t("common.phone")}</Label>
+              <Input {...form.register("phone")} />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-sm">{t("common.email")}</Label>
+              <Input {...form.register("email")} />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>{t("common.cancel")}</Button>
+            <Button type="submit" disabled={createClinic.isPending}>
+              {createClinic.isPending
+                ? <><Loader2 className="w-4 h-4 mr-1.5 animate-spin" />{t("common.loading")}</>
+                : t("common.create")}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/frontend/src/pages/clinics/settings.tsx

@@ -0,0 +1,412 @@
+import { useState, useEffect } from "react"
+import { useParams, useNavigate, useSearchParams } from "react-router-dom"
+import { useTranslation } from "react-i18next"
+import { toast } from "sonner"
+import { AxiosError } from "axios"
+import {
+  ArrowLeft,
+  Loader2,
+  Building2,
+  Globe,
+  Bot,
+  Clock,
+  Phone,
+  MessageSquare,
+  Shield,
+  Trash2,
+  Plus,
+  Link,
+  Unlink,
+  Calendar,
+} from "lucide-react"
+
+import {
+  useClinicDetail,
+  useUpdateClinic,
+  useCreateMetaConnection,
+  useDeleteMetaConnection,
+  useDisconnectGoogleCalendar,
+} from "@/lib/hooks/use-clinic-detail"
+import type { ClinicDetail } from "@/lib/hooks/use-clinic-detail"
+import { api } from "@/lib/api"
+
+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 {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import { Alert, AlertDescription } from "@/components/ui/alert"
+
+export default function ClinicSettingsPage() {
+  const { id } = useParams<{ id: string }>()
+  const [searchParams, setSearchParams] = useSearchParams()
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+
+  // Handle Instagram OAuth callback
+  useEffect(() => {
+    if (searchParams.get("ig") === "connected") {
+      toast.success(t("clinics.igConnected"))
+      searchParams.delete("ig")
+      setSearchParams(searchParams, { replace: true })
+    }
+  }, [])
+  const { data: clinic, isLoading } = useClinicDetail(id)
+  const updateClinic = useUpdateClinic()
+
+  // Form state
+  const [name, setName] = useState("")
+  const [address, setAddress] = useState("")
+  const [phone, setPhone] = useState("")
+  const [email, setEmail] = useState("")
+  const [timezone, setTimezone] = useState("Europe/Istanbul")
+  const [language, setLanguage] = useState("tr")
+  const [aiProvider, setAiProvider] = useState("openai")
+  const [gracePeriod, setGracePeriod] = useState(180)
+  const [operatorPhone, setOperatorPhone] = useState("")
+  const [operatorPrefix, setOperatorPrefix] = useState("R")
+  const [operatorTimeout, setOperatorTimeout] = useState(24)
+  const [smsEnabled, setSmsEnabled] = useState(false)
+  const [messageRetention, setMessageRetention] = useState(7)
+  const [errorMessage, setErrorMessage] = useState<string | null>(null)
+  const [initialized, setInitialized] = useState(false)
+
+  useEffect(() => {
+    if (clinic && !initialized) {
+      setName(clinic.clinic_name)
+      setAddress(clinic.clinic_address)
+      setPhone(clinic.clinic_phone)
+      setEmail(clinic.clinic_email)
+      setTimezone(clinic.clinic_timezone)
+      setLanguage(clinic.clinic_language)
+      setAiProvider(clinic.clinic_ai_provider)
+      setGracePeriod(clinic.clinic_grace_period_seconds)
+      setOperatorPhone(clinic.clinic_operator_phone ?? "")
+      setOperatorPrefix(clinic.clinic_operator_prefix)
+      setOperatorTimeout(clinic.clinic_operator_timeout_hours)
+      setSmsEnabled(clinic.clinic_sms_enabled)
+      setMessageRetention(clinic.clinic_message_retention_days)
+      setInitialized(true)
+    }
+  }, [clinic, initialized])
+
+  const handleSave = async () => {
+    if (!id) return
+    setErrorMessage(null)
+    try {
+      await updateClinic.mutateAsync({
+        id,
+        name,
+        address: address || undefined,
+        phone: phone || undefined,
+        email: email || undefined,
+        timezone,
+        language,
+        aiProvider,
+        gracePeriodSeconds: gracePeriod,
+        operatorPhone: operatorPhone || null,
+        operatorPrefix,
+        operatorTimeoutHours: operatorTimeout,
+        smsEnabled,
+        messageRetentionDays: messageRetention,
+      })
+      toast.success(t("clinics.updateSuccess"))
+    } catch (err) {
+      if (err instanceof AxiosError) {
+        setErrorMessage(err.response?.data?.message || t("clinics.updateError"))
+      } else {
+        setErrorMessage(t("clinics.updateError"))
+      }
+    }
+  }
+
+  if (isLoading) {
+    return (
+      <div className="max-w-[900px] mx-auto space-y-6 py-2">
+        <Skeleton className="h-16 w-full rounded-2xl" />
+        <div className="grid grid-cols-2 gap-6">
+          <Skeleton className="h-72 rounded-2xl" />
+          <Skeleton className="h-72 rounded-2xl" />
+        </div>
+      </div>
+    )
+  }
+
+  if (!clinic) {
+    return (
+      <div className="max-w-[900px] mx-auto space-y-4 py-2">
+        <Button variant="ghost" size="sm" onClick={() => navigate("/clinics")}>
+          <ArrowLeft className="w-4 h-4 mr-1.5" />{t("common.back")}
+        </Button>
+        <p className="text-sm text-muted-foreground">{t("clinics.noClinics")}</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="max-w-[900px] mx-auto space-y-6 py-2">
+      {/* Header */}
+      <div className="rounded-2xl border bg-card px-6 py-4 flex items-center justify-between">
+        <div className="flex items-center gap-4">
+          <button onClick={() => navigate("/clinics")} className="text-muted-foreground hover:text-foreground">
+            <ArrowLeft className="w-5 h-5" />
+          </button>
+          <div className="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center">
+            <Building2 className="w-5 h-5 text-primary" />
+          </div>
+          <div>
+            <h1 className="text-lg font-bold">{clinic.clinic_name}</h1>
+            <p className="text-xs text-muted-foreground">/{clinic.clinic_slug}</p>
+          </div>
+          {clinic.clinic_is_default && <Badge variant="outline">{t("clinics.default")}</Badge>}
+        </div>
+        <Button onClick={handleSave} disabled={updateClinic.isPending}>
+          {updateClinic.isPending
+            ? <><Loader2 className="w-4 h-4 mr-1.5 animate-spin" />{t("common.loading")}</>
+            : t("common.save")}
+        </Button>
+      </div>
+
+      {errorMessage && <Alert variant="destructive"><AlertDescription>{errorMessage}</AlertDescription></Alert>}
+
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        {/* General */}
+        <Card className="rounded-2xl">
+          <CardHeader><CardTitle className="text-sm uppercase tracking-wide text-muted-foreground flex items-center gap-2"><Building2 className="w-4 h-4" />{t("clinics.general")}</CardTitle></CardHeader>
+          <CardContent className="space-y-3">
+            <div className="space-y-1.5">
+              <Label className="text-xs text-muted-foreground">{t("common.name")}</Label>
+              <Input value={name} onChange={(e) => setName(e.target.value)} className="h-9" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs text-muted-foreground">{t("clinics.address")}</Label>
+              <Input value={address} onChange={(e) => setAddress(e.target.value)} className="h-9" />
+            </div>
+            <div className="grid grid-cols-2 gap-3">
+              <div className="space-y-1.5">
+                <Label className="text-xs text-muted-foreground">{t("common.phone")}</Label>
+                <Input value={phone} onChange={(e) => setPhone(e.target.value)} className="h-9" />
+              </div>
+              <div className="space-y-1.5">
+                <Label className="text-xs text-muted-foreground">{t("common.email")}</Label>
+                <Input value={email} onChange={(e) => setEmail(e.target.value)} className="h-9" />
+              </div>
+            </div>
+            <div className="grid grid-cols-2 gap-3">
+              <div className="space-y-1.5">
+                <Label className="text-xs text-muted-foreground">{t("clinics.timezone")}</Label>
+                <Input value={timezone} onChange={(e) => setTimezone(e.target.value)} className="h-9" />
+              </div>
+              <div className="space-y-1.5">
+                <Label className="text-xs text-muted-foreground">{t("clinics.language")}</Label>
+                <Select value={language} onValueChange={setLanguage}>
+                  <SelectTrigger className="h-9"><SelectValue>{language === "tr" ? "Turkce" : "English"}</SelectValue></SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="tr">Turkce</SelectItem>
+                    <SelectItem value="en">English</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Message retention — simple setting */}
+        <Card className="rounded-2xl">
+          <CardHeader><CardTitle className="text-sm uppercase tracking-wide text-muted-foreground flex items-center gap-2"><Shield className="w-4 h-4" />{t("clinics.dataSettings")}</CardTitle></CardHeader>
+          <CardContent className="space-y-3">
+            <div className="space-y-1.5">
+              <Label className="text-xs text-muted-foreground">{t("clinics.messageRetention")}</Label>
+              <div className="flex items-center gap-1.5">
+                <Input type="number" min={1} value={messageRetention} onChange={(e) => setMessageRetention(Number(e.target.value))} className="h-9 w-20" />
+                <span className="text-xs text-muted-foreground">{t("common.days")}</span>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Meta Connections */}
+      <MetaConnectionsCard clinic={clinic} />
+
+      {/* Google Calendar — hidden until integrated
+      <GoogleCalendarCard clinic={clinic} />
+      */}
+    </div>
+  )
+}
+
+// ─── Meta Connections ────────────────────────────────────────
+
+function MetaConnectionsCard({ clinic }: { clinic: ClinicDetail }) {
+  const { t } = useTranslation()
+  const deleteMeta = useDeleteMetaConnection()
+  const [connectingIg, setConnectingIg] = useState(false)
+
+  const igConnection = clinic.meta_connections.find((c) => c.type === "instagram" && c.isActive)
+  const waConnections = clinic.meta_connections.filter((c) => c.type === "whatsapp")
+
+  const handleConnectInstagram = async () => {
+    setConnectingIg(true)
+    try {
+      const { data } = await api.get(`/meta-instagram/connect/${clinic.clinic_id}`)
+      window.location.href = data.url
+    } catch (err: any) {
+      toast.error(err?.response?.data?.message || t("clinics.metaError"))
+      setConnectingIg(false)
+    }
+  }
+
+  return (
+    <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("clinics.metaConnections")}
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {/* Instagram Connection */}
+        <div className="rounded-xl border p-4 space-y-3">
+          <div className="flex items-center gap-3">
+            <div className="w-9 h-9 rounded-lg bg-pink-500/10 flex items-center justify-center">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="w-5 h-5 text-pink-500">
+                <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>
+            </div>
+            <div className="flex-1">
+              <p className="text-sm font-medium">Instagram DM</p>
+              <p className="text-xs text-muted-foreground">{t("clinics.igDesc")}</p>
+            </div>
+          </div>
+
+          {igConnection ? (
+            <div className="flex items-center justify-between bg-green-500/5 rounded-lg px-3 py-2">
+              <div className="flex items-center gap-2">
+                <span className="w-2 h-2 rounded-full bg-green-500" />
+                <span className="text-sm font-medium">{igConnection.label}</span>
+                {igConnection.displayPhone && (
+                  <span className="text-xs text-muted-foreground">{igConnection.displayPhone}</span>
+                )}
+              </div>
+              <Button
+                size="sm" variant="ghost"
+                className="text-destructive hover:text-destructive h-7"
+                onClick={() => deleteMeta.mutateAsync({ clinicId: clinic.clinic_id, connId: igConnection.id }).then(() => toast.success(t("clinics.metaDisconnected")))}
+              >
+                <Unlink className="w-3.5 h-3.5 mr-1" />{t("clinics.disconnect")}
+              </Button>
+            </div>
+          ) : (
+            <Button variant="outline" onClick={handleConnectInstagram} disabled={connectingIg}>
+              {connectingIg
+                ? <><Loader2 className="w-4 h-4 mr-1.5 animate-spin" />{t("common.loading")}</>
+                : <><Link className="w-4 h-4 mr-1.5" />{t("clinics.connectInstagram")}</>}
+            </Button>
+          )}
+        </div>
+
+        {/* WhatsApp Connections (read-only — managed via Phone Numbers page) */}
+        {waConnections.length > 0 && (
+          <div className="space-y-2">
+            <p className="text-xs text-muted-foreground font-medium uppercase tracking-wide">WhatsApp</p>
+            {waConnections.map((conn) => (
+              <div key={conn.id} className="flex items-center justify-between px-3 py-2.5 rounded-lg border group">
+                <div className="flex items-center gap-3">
+                  <span className={`w-2 h-2 rounded-full ${conn.hasToken ? "bg-green-500" : "bg-red-500"}`} />
+                  <span className="text-sm font-medium">{conn.label}</span>
+                  {conn.displayPhone && <span className="text-xs text-muted-foreground font-mono">{conn.displayPhone}</span>}
+                </div>
+                <button
+                  className="opacity-0 group-hover:opacity-100 text-muted-foreground hover:text-destructive transition-opacity"
+                  onClick={() => deleteMeta.mutateAsync({ clinicId: clinic.clinic_id, connId: conn.id }).then(() => toast.success(t("clinics.metaDisconnected")))}
+                >
+                  <Trash2 className="w-4 h-4" />
+                </button>
+              </div>
+            ))}
+          </div>
+        )}
+
+        {clinic.meta_connections.length === 0 && !igConnection && (
+          <p className="text-sm text-muted-foreground text-center py-2">{t("clinics.noMetaConnections")}</p>
+        )}
+      </CardContent>
+    </Card>
+  )
+}
+
+// ─── Google Calendar ─────────────────────────────────────────
+
+function GoogleCalendarCard({ clinic }: { clinic: ClinicDetail }) {
+  const { t } = useTranslation()
+  const disconnect = useDisconnectGoogleCalendar()
+  const conn = clinic.calendar_connection
+  const isConnected = !!conn?.googleEmail
+
+  const handleConnect = async () => {
+    try {
+      const { data } = await api.get<{ url: string }>(`/google-calendar/auth-url?clinicId=${clinic.clinic_id}`)
+      window.open(data.url, "_blank")
+    } catch {
+      toast.error(t("clinics.googleError"))
+    }
+  }
+
+  const handleDisconnect = async () => {
+    try {
+      await disconnect.mutateAsync(clinic.clinic_id)
+      toast.success(t("clinics.googleDisconnected"))
+    } catch {
+      toast.error(t("clinics.googleError"))
+    }
+  }
+
+  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>
+        {isConnected ? (
+          <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">{conn!.googleEmail}</p>
+                {conn!.calendarName && <p className="text-xs text-muted-foreground">{conn!.calendarName}</p>}
+              </div>
+            </div>
+            <Button size="sm" variant="outline" onClick={handleDisconnect} disabled={disconnect.isPending}>
+              <Unlink className="w-3.5 h-3.5 mr-1" />
+              {t("clinics.disconnect")}
+            </Button>
+          </div>
+        ) : (
+          <div className="text-center py-4">
+            <p className="text-sm text-muted-foreground mb-3">{t("clinics.googleNotConnected")}</p>
+            <Button variant="outline" onClick={handleConnect}>
+              <Link className="w-4 h-4 mr-1.5" />
+              {t("clinics.connectGoogle")}
+            </Button>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  )
+}