elevenlabs-webhook-nodejs 1.0.0

package/web/src/pages/admin/AdminTenantDetail.tsx

@@ -0,0 +1,1317 @@
+import { useEffect, useState } from 'react';
+import { useParams, Link, useNavigate } from 'react-router-dom';
+import api from '../../lib/api';
+import { PageLoader } from '@/components/page-loader';
+import { StatCard } from '@/components/stat-card';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Checkbox } from '@/components/ui/checkbox';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { toast } from 'sonner';
+import { ArrowLeftIcon, Loader2Icon, UsersIcon, BotIcon, PhoneIcon, PhoneOutgoingIcon, MegaphoneIcon, PlusIcon, PencilIcon, CreditCardIcon, TrashIcon, MessageSquareIcon, ReceiptIcon } from 'lucide-react';
+
+const ALL_FEATURES: { key: string; label: string }[] = [
+  { key: 'inbound_agent', label: 'Gelen Arama Agent' },
+  { key: 'outbound_campaigns', label: 'Giden Kampanyalar' },
+  { key: 'survey_builder', label: 'Anket Oluşturucu' },
+  { key: 'whatsapp_notifications', label: 'WhatsApp Bildirimleri' },
+  { key: 'whatsapp_agent', label: 'WhatsApp Agent' },
+  { key: 'google_calendar', label: 'Google Takvim Entegrasyonu' },
+  { key: 'operator_workflow', label: 'Estetisyen Yönlendirme' },
+  { key: 'sms_notifications', label: 'SMS Bildirimleri (NetGSM)' },
+  { key: 'appointment_validation', label: 'Randevu Onay (Toplu Arama)' },
+  { key: 'inbound_call_schedule', label: 'Gelen Arama Programi' },
+  { key: 'voice_transcription', label: 'Sesli Mesaj Transkripsiyonu' },
+  { key: 'chat_continuity', label: 'Chat Continuity' },
+  { key: 'conversation_forwarding', label: 'Konusma Yonlendirme' },
+];
+
+const DEFAULT_SUMMARY_PROMPT = `Sen bir telefon gorusmesi analiz asistanisin. Asagidaki transkripti analiz et ve JSON formatinda Turkce ozet cikar.
+
+KURALLAR:
+- Yanitini YALNIZCA gecerli JSON olarak ver, baska hicbir sey yazma.
+- Markdown, backtick, aciklama veya ek metin ekleme.
+- Bir alan icin anlamli veri yoksa, o alani JSON'a DAHIL ETME.
+- Kisa ve net ol. Her alan en fazla 1-2 cumle olsun.
+
+JSON SEMASI:
+{
+  "arayan": "Arayanin ismi, eger kendini tanittiysa",
+  "amac": "Aramanin amaci, ornegin: Bilgi almak, Randevu talebi, Sikayet, Takip",
+  "talep": "Spesifik talep detayi (randevu zamani, istenen hizmet vb.)",
+  "durum": "Gorusme sonucu ve verilen yanit, 1-2 cumle",
+  "aksiyon": "Yapilmasi gereken takip aksiyonu varsa (geri donus, onay bekleniyor vb.)"
+}
+
+Transkript:
+{transcript}`;
+
+const DEFAULT_WHATSAPP_TEMPLATE = `\u{1F464} {arayan} | \u{1F4CC} {amac} | \u{1F5D3} {talep} | \u{1F4CB} {durum} | \u{1F9ED} {aksiyon}`;
+
+interface Tenant {
+  _id: string;
+  name: string;
+  plan: string;
+  enabled_features: string[];
+  is_active: boolean;
+  deleted_at: string | null;
+  settings: {
+    default_language: string;
+    notification_recipients?: string[];
+    whatsapp_agent?: {
+      whatsapp_bridge_provider?: string;
+      unipile_account_id?: string | null;
+    };
+  };
+  createdAt: string;
+}
+
+interface UserRow { _id: string; name: string; email: string; role: string; createdAt: string }
+interface AgentRow {
+  _id: string;
+  phone_number: string;
+  elevenlabs_agent_id: string;
+  agent_template: string;
+  direction: string;
+  is_active: boolean;
+  post_call_processing: {
+    strategy: string;
+    llm_provider: string;
+    summary_prompt: string;
+    system_message: string;
+    whatsapp_message_template: string;
+  };
+}
+
+const PAYMENT_METHOD_LABELS: Record<string, string> = {
+  cash: 'Nakit',
+  bank_transfer: 'Havale/EFT',
+  other: 'Diger',
+};
+
+interface PaymentRow {
+  _id: string;
+  type: 'subscription' | 'top_up';
+  plan_slug: string;
+  plan_name: string;
+  amount: number;
+  extra_minutes: number;
+  period_start: string;
+  period_end: string;
+  payment_method: string;
+  notes: string;
+  createdAt: string;
+}
+
+export default function AdminTenantDetail() {
+  const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+  const [tenant, setTenant] = useState<Tenant | null>(null);
+  const [users, setUsers] = useState<UserRow[]>([]);
+  const [agents, setAgents] = useState<AgentRow[]>([]);
+  const [callCount, setCallCount] = useState(0);
+  const [campaignCount, setCampaignCount] = useState(0);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+
+  const [name, setName] = useState('');
+  const [plan, setPlan] = useState('');
+  const [features, setFeatures] = useState<string[]>([]);
+
+  const [userDialogOpen, setUserDialogOpen] = useState(false);
+  const [agentDialogOpen, setAgentDialogOpen] = useState(false);
+  const [editingAgent, setEditingAgent] = useState<AgentRow | null>(null);
+  const [payments, setPayments] = useState<PaymentRow[]>([]);
+  const [paymentDialogOpen, setPaymentDialogOpen] = useState(false);
+  const [dbPlans, setDbPlans] = useState<{ slug: string; name: string; price: number; included_minutes: number }[]>([]);
+  const [recipients, setRecipients] = useState<string[]>([]);
+  const [newRecipient, setNewRecipient] = useState('');
+  const [bridgeProvider, setBridgeProvider] = useState('unipile');
+  const [availableProviders, setAvailableProviders] = useState<string[]>([]);
+  const [savingBridge, setSavingBridge] = useState(false);
+  const [savingRecipients, setSavingRecipients] = useState(false);
+
+  useEffect(() => {
+    api.get('/admin/plans')
+      .then(({ data }) => setDbPlans(data.plans.filter((p: any) => p.is_active)))
+      .catch(() => {});
+    api.get('/admin/whatsapp-providers')
+      .then(({ data }) => setAvailableProviders(data.providers))
+      .catch(() => {});
+  }, []);
+
+  useEffect(() => {
+    Promise.all([
+      api.get(`/admin/tenants/${id}`),
+      api.get(`/admin/tenants/${id}/payments`)
+    ]).then(([tenantRes, paymentsRes]) => {
+      setTenant(tenantRes.data.tenant);
+      setUsers(tenantRes.data.users);
+      setAgents(tenantRes.data.agents);
+      setCallCount(tenantRes.data.callCount);
+      setCampaignCount(tenantRes.data.campaignCount);
+      setName(tenantRes.data.tenant.name);
+      setPlan(tenantRes.data.tenant.plan);
+      setFeatures([...tenantRes.data.tenant.enabled_features]);
+      setRecipients(tenantRes.data.tenant.settings?.notification_recipients || []);
+      setBridgeProvider(tenantRes.data.tenant.settings?.whatsapp_agent?.whatsapp_bridge_provider || 'unipile');
+      setPayments(paymentsRes.data.payments);
+    }).finally(() => setLoading(false));
+  }, [id]);
+
+  function toggleFeature(f: string) {
+    setFeatures(prev => prev.includes(f) ? prev.filter(x => x !== f) : [...prev, f]);
+  }
+
+  async function handleSave() {
+    setSaving(true);
+    try {
+      const { data } = await api.put(`/admin/tenants/${id}`, { name, plan, enabled_features: features });
+      setTenant(data.tenant);
+      toast.success('Kaydedildi');
+    } catch (err: any) {
+      toast.error(err.response?.data?.error || 'Hata');
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  async function saveRecipients(updated: string[]) {
+    setSavingRecipients(true);
+    try {
+      await api.put(`/admin/tenants/${id}`, {
+        settings: { notification_recipients: updated }
+      });
+      setRecipients(updated);
+      toast.success('Kaydedildi');
+    } catch (err: any) {
+      toast.error(err.response?.data?.error || 'Hata');
+    } finally {
+      setSavingRecipients(false);
+    }
+  }
+
+  function handleAddRecipient() {
+    const cleaned = newRecipient.replace(/\s/g, '');
+    if (!cleaned) return;
+    if (recipients.includes(cleaned)) {
+      toast.error('Bu numara zaten ekli');
+      return;
+    }
+    setNewRecipient('');
+    saveRecipients([...recipients, cleaned]);
+  }
+
+  function handleRemoveRecipient(number: string) {
+    saveRecipients(recipients.filter(r => r !== number));
+  }
+
+  async function handleSaveBridgeProvider() {
+    setSavingBridge(true);
+    try {
+      await api.put(`/admin/tenants/${id}/whatsapp-bridge`, { provider: bridgeProvider });
+      toast.success('Kopru saglayicisi kaydedildi');
+    } catch (err: any) {
+      toast.error(err.response?.data?.error || 'Hata');
+    } finally {
+      setSavingBridge(false);
+    }
+  }
+
+  async function handleDeactivate() {
+    if (!confirm('Bu tenanti devre disi birakmak istediginize emin misiniz?')) return;
+    try {
+      const { data } = await api.put(`/admin/tenants/${id}/deactivate`);
+      setTenant(data.tenant);
+      toast.success('Tenant devre disi birakildi');
+    } catch (err: any) {
+      toast.error(err.response?.data?.error || 'Hata');
+    }
+  }
+
+  async function handleReactivate() {
+    try {
+      const { data } = await api.put(`/admin/tenants/${id}/reactivate`);
+      setTenant(data.tenant);
+      toast.success('Tenant yeniden etkinlestirildi');
+    } catch (err: any) {
+      toast.error(err.response?.data?.error || 'Hata');
+    }
+  }
+
+  async function handleHardDelete() {
+    if (!confirm('DIKKAT: Bu tenant ve tum verileri kalici olarak silinecek. Bu islem geri alinamaz. Devam etmek istiyor musunuz?')) return;
+    try {
+      await api.delete(`/admin/tenants/${id}`);
+      toast.success('Tenant kalici olarak silindi');
+      navigate('/admin/tenants');
+    } catch (err: any) {
+      toast.error(err.response?.data?.error || 'Hata');
+    }
+  }
+
+  if (loading) return <PageLoader />;
+  if (!tenant) return <p className="text-muted-foreground">Tenant bulunamadi</p>;
+
+  return (
+    <div>
+      <Button variant="ghost" size="sm" asChild className="mb-4">
+        <Link to="/admin/tenants">
+          <ArrowLeftIcon className="size-4 mr-1" />
+          Tenantlara Don
+        </Link>
+      </Button>
+
+      <h1 className="text-2xl font-bold tracking-tight mb-6">{tenant.name}</h1>
+
+      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-4">
+        <StatCard label="Kullanicilar" value={users.length} icon={<UsersIcon className="size-5" />} />
+        <StatCard label="Agentler" value={agents.length} icon={<BotIcon className="size-5" />} />
+        <StatCard label="Aramalar" value={callCount} icon={<PhoneIcon className="size-5" />} />
+        <StatCard label="Kampanyalar" value={campaignCount} icon={<MegaphoneIcon className="size-5" />} />
+      </div>
+
+      <div className="flex items-center justify-between mb-6">
+        <div className="flex gap-2">
+          <Button variant="outline" size="sm" asChild>
+            <Link to={`/admin/tenants/${id}/billable-items`}>
+              <ReceiptIcon className="size-4 mr-1" />
+              Faturalanabilir Kalemler
+            </Link>
+          </Button>
+          <Button variant="outline" size="sm" asChild>
+            <Link to={`/admin/whatsapp?tenant_id=${id}`}>
+              <MessageSquareIcon className="size-4 mr-1" />
+              WhatsApp Sohbetleri
+            </Link>
+          </Button>
+        </div>
+        <div className="flex gap-2">
+          {tenant.is_active === false ? (
+            <>
+              <Button variant="outline" size="sm" onClick={handleReactivate}>
+                Yeniden Etkinlestir
+              </Button>
+              <Button variant="destructive" size="sm" onClick={handleHardDelete}>
+                <TrashIcon className="size-4 mr-1" />
+                Kalici Sil
+              </Button>
+            </>
+          ) : (
+            <Button variant="destructive" size="sm" onClick={handleDeactivate}>
+              Devre Disi Birak
+            </Button>
+          )}
+        </div>
+      </div>
+
+      {tenant.is_active === false && (
+        <Alert variant="destructive" className="mb-6">
+          <AlertDescription>
+            Bu tenant devre disi birakilmis.
+            {tenant.deleted_at && ` (${new Date(tenant.deleted_at).toLocaleDateString('tr-TR')})`}
+          </AlertDescription>
+        </Alert>
+      )}
+
+      {/* Tenant Settings */}
+      <Card className="mb-6">
+        <CardHeader>
+          <CardTitle>Tenant Ayarlari</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4 max-w-md">
+          <div className="space-y-2">
+            <Label>Ad</Label>
+            <Input value={name} onChange={e => setName(e.target.value)} />
+          </div>
+          <div className="space-y-2">
+            <Label>Plan</Label>
+            <Select value={plan} onValueChange={setPlan}>
+              <SelectTrigger>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {dbPlans.map(p => (
+                  <SelectItem key={p.slug} value={p.slug}>
+                    {p.name} — {p.price.toLocaleString('tr-TR')}TL/ay ({p.included_minutes} dk)
+                  </SelectItem>
+                ))}
+                {/* Show current plan if not in DB list */}
+                {plan && !dbPlans.some(p => p.slug === plan) && (
+                  <SelectItem value={plan}>{plan}</SelectItem>
+                )}
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="space-y-3">
+            <Label>Ozellikler</Label>
+            {ALL_FEATURES.map(f => (
+              <div key={f.key} className="flex items-center gap-2">
+                <Checkbox id={`feat-${f.key}`} checked={features.includes(f.key)} onCheckedChange={() => toggleFeature(f.key)} />
+                <Label htmlFor={`feat-${f.key}`} className="text-sm font-normal">{f.label}</Label>
+              </div>
+            ))}
+          </div>
+          <Button onClick={handleSave} disabled={saving}>
+            {saving && <Loader2Icon className="size-4 mr-2 animate-spin" />}
+            Kaydet
+          </Button>
+
+          {/* WhatsApp Bridge Provider — only shown when multiple providers available */}
+          {availableProviders.length > 1 && (
+            <div className="space-y-2 pt-4 border-t">
+              <Label>WhatsApp Kopru Saglayicisi</Label>
+              <div className="flex gap-2 items-center">
+                <Select value={bridgeProvider} onValueChange={setBridgeProvider}>
+                  <SelectTrigger className="w-48">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {availableProviders.map(p => (
+                      <SelectItem key={p} value={p}>
+                        {p === 'unipile' ? 'Unipile (Bulut)' : 'Baileys (Yerel)'}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                <Button
+                  size="sm"
+                  onClick={handleSaveBridgeProvider}
+                  disabled={savingBridge || bridgeProvider === (tenant.settings?.whatsapp_agent?.whatsapp_bridge_provider || 'unipile')}
+                >
+                  {savingBridge && <Loader2Icon className="size-4 mr-2 animate-spin" />}
+                  Kaydet
+                </Button>
+              </div>
+              {tenant.settings?.whatsapp_agent?.unipile_account_id && (
+                <p className="text-xs text-amber-600">
+                  Bu tenant aktif bir WhatsApp baglantisina sahip. Saglayici degistirmek icin once baglantisini kesin.
+                </p>
+              )}
+            </div>
+          )}
+
+        </CardContent>
+      </Card>
+
+      {/* Appointment Validation Config — only when feature enabled */}
+      {features.includes('appointment_validation') && (
+        <AppointmentValidationConfig tenantId={id!} agents={agents} tenant={tenant} />
+      )}
+
+      {/* Conversation Forwarding Config */}
+      {features.includes('conversation_forwarding') && (
+        <ConversationForwardingConfig tenantId={id!} tenant={tenant} />
+      )}
+
+      {/* WhatsApp Recipients */}
+      <Card className="mb-6">
+        <CardHeader>
+          <CardTitle className="text-sm flex items-center gap-2">
+            <MessageSquareIcon className="size-4" />
+            WhatsApp Alicilari
+            <Badge variant="secondary">{recipients.length}</Badge>
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4 max-w-md">
+          <div className="flex gap-2">
+            <Input
+              placeholder="+905551234567"
+              value={newRecipient}
+              onChange={e => setNewRecipient(e.target.value)}
+              onKeyDown={e => {
+                if (e.key === 'Enter') {
+                  e.preventDefault();
+                  handleAddRecipient();
+                }
+              }}
+            />
+            <Button onClick={handleAddRecipient} disabled={savingRecipients || !newRecipient.trim()}>
+              {savingRecipients ? <Loader2Icon className="size-4 animate-spin" /> : <PlusIcon className="size-4" />}
+            </Button>
+          </div>
+          {recipients.length === 0 ? (
+            <p className="text-sm text-muted-foreground">Henuz alici eklenmemis.</p>
+          ) : (
+            <div className="space-y-1">
+              {recipients.map(number => (
+                <div key={number} className="flex items-center justify-between py-2 px-3 rounded-md border">
+                  <div className="flex items-center gap-2">
+                    <PhoneIcon className="size-4 text-muted-foreground" />
+                    <span className="text-sm font-mono">{number}</span>
+                  </div>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => handleRemoveRecipient(number)}
+                    disabled={savingRecipients}
+                    className="text-destructive hover:text-destructive"
+                  >
+                    <TrashIcon className="size-4" />
+                  </Button>
+                </div>
+              ))}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Users */}
+      <Card className="mb-6">
+        <CardHeader className="flex-row items-center justify-between">
+          <CardTitle className="text-sm">
+            Kullanicilar
+            <Badge variant="secondary" className="ml-2">{users.length}</Badge>
+          </CardTitle>
+          <Dialog open={userDialogOpen} onOpenChange={setUserDialogOpen}>
+            <DialogTrigger asChild>
+              <Button size="sm">
+                <PlusIcon className="size-4 mr-1" />
+                Kullanici Ekle
+              </Button>
+            </DialogTrigger>
+            <DialogContent>
+              <DialogHeader>
+                <DialogTitle>Kullanici Olustur</DialogTitle>
+              </DialogHeader>
+              <CreateUserForm tenantId={id!} onDone={(u) => {
+                setUsers([u, ...users]);
+                setUserDialogOpen(false);
+                toast.success('Kullanici olusturuldu');
+              }} />
+            </DialogContent>
+          </Dialog>
+        </CardHeader>
+        <CardContent className="px-0 py-0">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead className="pl-6">Isim</TableHead>
+                <TableHead>E-posta</TableHead>
+                <TableHead>Rol</TableHead>
+                <TableHead className="pr-6">Tarih</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {users.length === 0 ? (
+                <TableRow>
+                  <TableCell colSpan={4} className="text-center text-muted-foreground py-6">
+                    Henuz kullanici yok
+                  </TableCell>
+                </TableRow>
+              ) : users.map(u => (
+                <TableRow key={u._id}>
+                  <TableCell className="pl-6 font-medium">{u.name}</TableCell>
+                  <TableCell className="text-muted-foreground">{u.email}</TableCell>
+                  <TableCell><Badge variant="secondary">{u.role}</Badge></TableCell>
+                  <TableCell className="text-muted-foreground pr-6">{new Date(u.createdAt).toLocaleDateString('tr-TR')}</TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
+
+      {/* Agents */}
+      <Card>
+        <CardHeader className="flex-row items-center justify-between">
+          <CardTitle className="text-sm">
+            Agentler
+            <Badge variant="secondary" className="ml-2">{agents.length}</Badge>
+          </CardTitle>
+          <Dialog open={agentDialogOpen} onOpenChange={setAgentDialogOpen}>
+            <DialogTrigger asChild>
+              <Button size="sm">
+                <PlusIcon className="size-4 mr-1" />
+                Agent Ekle
+              </Button>
+            </DialogTrigger>
+            <DialogContent className="max-h-[85vh] overflow-y-auto">
+              <DialogHeader>
+                <DialogTitle>Agent Olustur</DialogTitle>
+              </DialogHeader>
+              <CreateAgentForm tenantId={id!} onDone={(a) => {
+                setAgents([a, ...agents]);
+                setAgentDialogOpen(false);
+                toast.success('Agent olusturuldu');
+              }} />
+            </DialogContent>
+          </Dialog>
+        </CardHeader>
+        <CardContent className="px-0 py-0">
+          {agents.length === 0 ? (
+            <p className="text-sm text-muted-foreground p-6">Henuz agent yok</p>
+          ) : (
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead className="pl-6">Telefon</TableHead>
+                  <TableHead>ElevenLabs Agent</TableHead>
+                  <TableHead>Durum</TableHead>
+                  <TableHead className="pr-6 w-10"></TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {agents.map(a => (
+                  <TableRow key={a._id}>
+                    <TableCell className="pl-6 font-mono text-sm">{a.phone_number}</TableCell>
+                    <TableCell className="font-mono text-xs text-muted-foreground">{a.elevenlabs_agent_id}</TableCell>
+                    <TableCell>
+                      <Badge variant={a.is_active ? 'secondary' : 'destructive'}
+                        className={a.is_active ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-400' : ''}>
+                        {a.is_active ? 'Aktif' : 'Pasif'}
+                      </Badge>
+                    </TableCell>
+                    <TableCell className="pr-6">
+                      <Button variant="ghost" size="icon" className="size-8" onClick={() => setEditingAgent(a)}>
+                        <PencilIcon className="size-4" />
+                      </Button>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Payments */}
+      <Card className="mt-6">
+        <CardHeader className="flex-row items-center justify-between">
+          <CardTitle className="text-sm">
+            Odeme Gecmisi
+            <Badge variant="secondary" className="ml-2">{payments.length}</Badge>
+          </CardTitle>
+          <Dialog open={paymentDialogOpen} onOpenChange={setPaymentDialogOpen}>
+            <DialogTrigger asChild>
+              <Button size="sm">
+                <PlusIcon className="size-4 mr-1" />
+                Odeme Kaydet
+              </Button>
+            </DialogTrigger>
+            <DialogContent>
+              <DialogHeader>
+                <DialogTitle>Odeme Kaydet</DialogTitle>
+              </DialogHeader>
+              <RecordPaymentForm
+                tenantId={id!}
+                currentPlanSlug={plan}
+                plans={dbPlans}
+                lastPeriodEnd={payments[0]?.period_end}
+                onDone={(p) => {
+                  setPayments([p, ...payments]);
+                  setPaymentDialogOpen(false);
+                  toast.success('Odeme kaydedildi');
+                }}
+              />
+            </DialogContent>
+          </Dialog>
+        </CardHeader>
+        <CardContent className="px-0 py-0">
+          {payments.length === 0 ? (
+            <p className="text-sm text-muted-foreground p-6">Henuz odeme kaydı yok</p>
+          ) : (
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead className="pl-6">Donem</TableHead>
+                  <TableHead>Tur</TableHead>
+                  <TableHead>Plan / Detay</TableHead>
+                  <TableHead>Tutar</TableHead>
+                  <TableHead>Yontem</TableHead>
+                  <TableHead>Notlar</TableHead>
+                  <TableHead className="pr-6">Kayit Tarihi</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {payments.map(p => (
+                  <TableRow key={p._id}>
+                    <TableCell className="pl-6 whitespace-nowrap">
+                      {new Date(p.period_start).toLocaleDateString('tr-TR')} — {new Date(p.period_end).toLocaleDateString('tr-TR')}
+                    </TableCell>
+                    <TableCell>
+                      <Badge variant={p.type === 'top_up' ? 'default' : 'outline'} className="text-[10px]">
+                        {p.type === 'top_up' ? 'Ek Dakika' : 'Abonelik'}
+                      </Badge>
+                    </TableCell>
+                    <TableCell>
+                      <Badge variant="secondary">{p.plan_name}</Badge>
+                      {p.type === 'top_up' && p.extra_minutes > 0 && (
+                        <span className="text-xs text-muted-foreground ml-1">+{p.extra_minutes} dk</span>
+                      )}
+                    </TableCell>
+                    <TableCell className="font-medium">
+                      {p.amount.toLocaleString('tr-TR')}TL
+                    </TableCell>
+                    <TableCell className="text-muted-foreground">
+                      {PAYMENT_METHOD_LABELS[p.payment_method] || p.payment_method}
+                    </TableCell>
+                    <TableCell className="text-muted-foreground text-xs max-w-[200px] truncate">
+                      {p.notes || '-'}
+                    </TableCell>
+                    <TableCell className="text-muted-foreground whitespace-nowrap pr-6">
+                      {new Date(p.createdAt).toLocaleDateString('tr-TR')}
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Edit Agent Dialog */}
+      <Dialog open={!!editingAgent} onOpenChange={(open) => { if (!open) setEditingAgent(null); }}>
+        <DialogContent className="max-h-[85vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>Agent Duzenle</DialogTitle>
+          </DialogHeader>
+          {editingAgent && (
+            <EditAgentForm agent={editingAgent} onDone={(updated) => {
+              setAgents(agents.map(a => a._id === updated._id ? updated : a));
+              setEditingAgent(null);
+              toast.success('Agent guncellendi');
+            }} />
+          )}
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
+
+// ─── Create User Form ───────────────────────────────────────
+
+function CreateUserForm({ tenantId, onDone }: { tenantId: string; onDone: (user: UserRow) => void }) {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [name, setName] = useState('');
+  const [role, setRole] = useState('admin');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setLoading(true);
+    setError('');
+    try {
+      const { data } = await api.post(`/admin/tenants/${tenantId}/users`, { email, password, name, role });
+      onDone(data.user);
+    } catch (err: any) {
+      setError(err.response?.data?.error || 'Hata');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4">
+      {error && <Alert variant="destructive"><AlertDescription>{error}</AlertDescription></Alert>}
+      <div className="space-y-2">
+        <Label>Isim</Label>
+        <Input value={name} onChange={e => setName(e.target.value)} required />
+      </div>
+      <div className="space-y-2">
+        <Label>E-posta</Label>
+        <Input type="email" value={email} onChange={e => setEmail(e.target.value)} required />
+      </div>
+      <div className="space-y-2">
+        <Label>Sifre</Label>
+        <Input type="password" value={password} onChange={e => setPassword(e.target.value)} required minLength={8} />
+      </div>
+      <div className="space-y-2">
+        <Label>Rol</Label>
+        <Select value={role} onValueChange={setRole}>
+          <SelectTrigger><SelectValue /></SelectTrigger>
+          <SelectContent>
+            <SelectItem value="admin">Admin</SelectItem>
+            <SelectItem value="manager">Manager</SelectItem>
+            <SelectItem value="viewer">Viewer</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+      <Button type="submit" disabled={loading} className="w-full">
+        {loading && <Loader2Icon className="size-4 mr-2 animate-spin" />}
+        Olustur
+      </Button>
+    </form>
+  );
+}
+
+// ─── Create Agent Form ──────────────────────────────────────
+
+interface ELAgent {
+  agent_id: string;
+  name: string;
+}
+
+function CreateAgentForm({ tenantId, onDone }: { tenantId: string; onDone: (agent: AgentRow) => void }) {
+  const [phoneNumber, setPhoneNumber] = useState('');
+  const [elevenlabsAgentId, setElevenlabsAgentId] = useState('');
+  const [direction, setDirection] = useState('inbound');
+  const [summaryPrompt, setSummaryPrompt] = useState(DEFAULT_SUMMARY_PROMPT);
+  const [whatsappTemplate, setWhatsappTemplate] = useState(DEFAULT_WHATSAPP_TEMPLATE);
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const [availableAgents, setAvailableAgents] = useState<ELAgent[]>([]);
+  const [loadingAgents, setLoadingAgents] = useState(true);
+
+  useEffect(() => {
+    api.get('/admin/elevenlabs/agents', { params: { page_size: '100' } })
+      .then(({ data }) => setAvailableAgents(
+        (data.agents || []).map((a: any) => ({ agent_id: a.agentId || a.agent_id, name: a.name }))
+      ))
+      .catch(() => setAvailableAgents([]))
+      .finally(() => setLoadingAgents(false));
+  }, []);
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setLoading(true);
+    setError('');
+    try {
+      const { data } = await api.post('/admin/agents', {
+        tenant_id: tenantId,
+        phone_number: phoneNumber,
+        elevenlabs_agent_id: elevenlabsAgentId,
+        direction,
+        post_call_processing: {
+          summary_prompt: summaryPrompt === DEFAULT_SUMMARY_PROMPT ? '' : summaryPrompt,
+          whatsapp_message_template: whatsappTemplate === DEFAULT_WHATSAPP_TEMPLATE ? '' : whatsappTemplate,
+        }
+      });
+      onDone(data.agent);
+    } catch (err: any) {
+      setError(err.response?.data?.error || 'Hata');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4">
+      {error && <Alert variant="destructive"><AlertDescription>{error}</AlertDescription></Alert>}
+
+      <div className="space-y-2">
+        <Label>ElevenLabs Agent</Label>
+        {loadingAgents ? (
+          <div className="flex items-center gap-2 text-sm text-muted-foreground py-2">
+            <Loader2Icon className="size-4 animate-spin" />
+            Agentler yukleniyor...
+          </div>
+        ) : availableAgents.length === 0 ? (
+          <p className="text-sm text-muted-foreground py-2">
+            ElevenLabs'da agent bulunamadi.
+          </p>
+        ) : (
+          <Select value={elevenlabsAgentId} onValueChange={setElevenlabsAgentId}>
+            <SelectTrigger>
+              <SelectValue placeholder="Agent secin..." />
+            </SelectTrigger>
+            <SelectContent>
+              {availableAgents.map(a => (
+                <SelectItem key={a.agent_id} value={a.agent_id}>
+                  {a.name || a.agent_id}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        )}
+      </div>
+
+      <div className="space-y-2">
+        <Label>Telefon Numarasi</Label>
+        <Input placeholder="+905551234567" value={phoneNumber} onChange={e => setPhoneNumber(e.target.value)} required />
+      </div>
+
+      <div className="space-y-2">
+        <Label>Yon</Label>
+        <Select value={direction} onValueChange={setDirection}>
+          <SelectTrigger><SelectValue /></SelectTrigger>
+          <SelectContent>
+            <SelectItem value="inbound">Gelen (Inbound)</SelectItem>
+            <SelectItem value="outbound">Giden (Outbound)</SelectItem>
+            <SelectItem value="both">Her Ikisi (Both)</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      <div className="space-y-2">
+        <Label>Ozet Promptu</Label>
+        <p className="text-xs text-muted-foreground">Transkript icin {'{transcript}'} yer tutucusunu kullanin.</p>
+        <Textarea
+          value={summaryPrompt}
+          onChange={e => setSummaryPrompt(e.target.value)}
+          rows={8}
+        />
+      </div>
+
+      <div className="space-y-2">
+        <Label>WhatsApp Mesaj Sablonu</Label>
+        <p className="text-xs text-muted-foreground">
+          Kullanilabilir degiskenler: {'{summary}'}, {'{caller_number}'}, {'{duration}'}, {'{date}'}
+        </p>
+        <Textarea
+          value={whatsappTemplate}
+          onChange={e => setWhatsappTemplate(e.target.value)}
+          rows={5}
+        />
+      </div>
+
+      <Button type="submit" disabled={loading || !elevenlabsAgentId || !phoneNumber} className="w-full">
+        {loading && <Loader2Icon className="size-4 mr-2 animate-spin" />}
+        Agent Olustur
+      </Button>
+    </form>
+  );
+}
+
+// ─── Edit Agent Form ───────────────────────────────────────
+
+function EditAgentForm({ agent, onDone }: { agent: AgentRow; onDone: (agent: AgentRow) => void }) {
+  const [phoneNumber, setPhoneNumber] = useState(agent.phone_number);
+  const [direction, setDirection] = useState(agent.direction || 'inbound');
+  const dbPrompt = agent.post_call_processing?.summary_prompt || '';
+  const dbTemplate = agent.post_call_processing?.whatsapp_message_template || '';
+  const [summaryPrompt, setSummaryPrompt] = useState(dbPrompt || DEFAULT_SUMMARY_PROMPT);
+  const [whatsappTemplate, setWhatsappTemplate] = useState(dbTemplate || DEFAULT_WHATSAPP_TEMPLATE);
+  const [isActive, setIsActive] = useState(agent.is_active);
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setLoading(true);
+    setError('');
+    try {
+      // Save empty string if user kept the default — backend will use code defaults
+      const promptToSave = summaryPrompt === DEFAULT_SUMMARY_PROMPT ? '' : summaryPrompt;
+      const templateToSave = whatsappTemplate === DEFAULT_WHATSAPP_TEMPLATE ? '' : whatsappTemplate;
+      const { data } = await api.put(`/admin/agents/${agent._id}`, {
+        phone_number: phoneNumber,
+        direction,
+        is_active: isActive,
+        post_call_processing: { summary_prompt: promptToSave, whatsapp_message_template: templateToSave },
+      });
+      onDone(data.agent);
+    } catch (err: any) {
+      setError(err.response?.data?.error || 'Hata');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4">
+      {error && <Alert variant="destructive"><AlertDescription>{error}</AlertDescription></Alert>}
+
+      <div className="space-y-2">
+        <Label>ElevenLabs Agent ID</Label>
+        <Input value={agent.elevenlabs_agent_id} disabled className="font-mono text-xs" />
+      </div>
+
+      <div className="space-y-2">
+        <Label>Telefon Numarasi</Label>
+        <Input value={phoneNumber} onChange={e => setPhoneNumber(e.target.value)} required />
+      </div>
+
+      <div className="space-y-2">
+        <Label>Yon</Label>
+        <Select value={direction} onValueChange={setDirection}>
+          <SelectTrigger><SelectValue /></SelectTrigger>
+          <SelectContent>
+            <SelectItem value="inbound">Gelen (Inbound)</SelectItem>
+            <SelectItem value="outbound">Giden (Outbound)</SelectItem>
+            <SelectItem value="both">Her Ikisi (Both)</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      <div className="space-y-2">
+        <div className="flex items-center justify-between">
+          <Label>Ozet Promptu</Label>
+          {summaryPrompt !== DEFAULT_SUMMARY_PROMPT && (
+            <Button type="button" variant="ghost" size="sm" className="text-xs h-6" onClick={() => setSummaryPrompt(DEFAULT_SUMMARY_PROMPT)}>
+              Varsayilana sifirla
+            </Button>
+          )}
+        </div>
+        <Textarea
+          value={summaryPrompt}
+          onChange={e => setSummaryPrompt(e.target.value)}
+          rows={8}
+        />
+      </div>
+
+      <div className="space-y-2">
+        <div className="flex items-center justify-between">
+          <Label>WhatsApp Mesaj Sablonu</Label>
+          {whatsappTemplate !== DEFAULT_WHATSAPP_TEMPLATE && (
+            <Button type="button" variant="ghost" size="sm" className="text-xs h-6" onClick={() => setWhatsappTemplate(DEFAULT_WHATSAPP_TEMPLATE)}>
+              Varsayilana sifirla
+            </Button>
+          )}
+        </div>
+        <Textarea
+          value={whatsappTemplate}
+          onChange={e => setWhatsappTemplate(e.target.value)}
+          rows={5}
+        />
+      </div>
+
+      <div className="flex items-center gap-2">
+        <Checkbox id="edit-active" checked={isActive} onCheckedChange={(v) => setIsActive(!!v)} />
+        <Label htmlFor="edit-active" className="text-sm font-normal">Aktif</Label>
+      </div>
+
+      <Button type="submit" disabled={loading} className="w-full">
+        {loading && <Loader2Icon className="size-4 mr-2 animate-spin" />}
+        Kaydet
+      </Button>
+    </form>
+  );
+}
+
+// ─── Record Payment Form ─────────────────────────────────────
+
+function RecordPaymentForm({ tenantId, currentPlanSlug, plans, lastPeriodEnd, onDone }: {
+  tenantId: string;
+  currentPlanSlug: string;
+  plans: { slug: string; name: string; price: number; included_minutes: number }[];
+  lastPeriodEnd?: string;
+  onDone: (payment: PaymentRow) => void;
+}) {
+  const [paymentType, setPaymentType] = useState<'subscription' | 'top_up'>('subscription');
+  const [planSlug, setPlanSlug] = useState(currentPlanSlug);
+  const selectedPlan = plans.find(p => p.slug === planSlug);
+  const [amount, setAmount] = useState(selectedPlan?.price?.toString() || '');
+  const [extraMinutes, setExtraMinutes] = useState('');
+  const [periodStart, setPeriodStart] = useState(() => {
+    if (lastPeriodEnd) {
+      const d = new Date(lastPeriodEnd);
+      d.setDate(d.getDate() + 1);
+      return d.toISOString().split('T')[0];
+    }
+    const d = new Date();
+    return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-01`;
+  });
+  const [periodEnd, setPeriodEnd] = useState(() => {
+    if (lastPeriodEnd) {
+      const d = new Date(lastPeriodEnd);
+      d.setDate(d.getDate() + 1);
+      d.setMonth(d.getMonth() + 1);
+      return d.toISOString().split('T')[0];
+    }
+    const d = new Date();
+    d.setMonth(d.getMonth() + 1);
+    return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-01`;
+  });
+  const [paymentMethod, setPaymentMethod] = useState('cash');
+  const [notes, setNotes] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  function handlePlanChange(slug: string) {
+    setPlanSlug(slug);
+    if (paymentType === 'subscription') {
+      const p = plans.find(x => x.slug === slug);
+      if (p) setAmount(p.price.toString());
+    }
+  }
+
+  function handleTypeChange(type: 'subscription' | 'top_up') {
+    setPaymentType(type);
+    if (type === 'subscription') {
+      const p = plans.find(x => x.slug === planSlug);
+      if (p) setAmount(p.price.toString());
+      setExtraMinutes('');
+    } else {
+      setAmount('');
+    }
+  }
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setLoading(true);
+    setError('');
+    try {
+      const { data } = await api.post('/admin/payments', {
+        tenant_id: tenantId,
+        type: paymentType,
+        plan_slug: planSlug,
+        amount: parseFloat(amount),
+        extra_minutes: paymentType === 'top_up' ? parseInt(extraMinutes, 10) : 0,
+        period_start: periodStart,
+        period_end: periodEnd,
+        payment_method: paymentMethod,
+        notes,
+      });
+      onDone(data.payment);
+    } catch (err: any) {
+      setError(err.response?.data?.error || 'Hata');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4">
+      {error && <Alert variant="destructive"><AlertDescription>{error}</AlertDescription></Alert>}
+
+      <div className="space-y-2">
+        <Label>Odeme Turu</Label>
+        <Select value={paymentType} onValueChange={v => handleTypeChange(v as 'subscription' | 'top_up')}>
+          <SelectTrigger>
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="subscription">Abonelik Odemesi</SelectItem>
+            <SelectItem value="top_up">Ek Dakika Yuklemesi</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      <div className="space-y-2">
+        <Label>Plan</Label>
+        <Select value={planSlug} onValueChange={handlePlanChange}>
+          <SelectTrigger>
+            <SelectValue placeholder="Plan secin..." />
+          </SelectTrigger>
+          <SelectContent>
+            {plans.map(p => (
+              <SelectItem key={p.slug} value={p.slug}>
+                {p.name} — {p.price.toLocaleString('tr-TR')}TL/ay
+              </SelectItem>
+            ))}
+            {planSlug && !plans.some(p => p.slug === planSlug) && (
+              <SelectItem value={planSlug}>{planSlug}</SelectItem>
+            )}
+          </SelectContent>
+        </Select>
+      </div>
+
+      {paymentType === 'top_up' && (
+        <div className="space-y-2">
+          <Label>Ek Dakika</Label>
+          <Input
+            type="number"
+            min="1"
+            value={extraMinutes}
+            onChange={e => setExtraMinutes(e.target.value)}
+            placeholder="Orn: 100"
+            required
+          />
+        </div>
+      )}
+
+      <div className="space-y-2">
+        <Label>Tutar (TL)</Label>
+        <Input type="number" step="0.01" value={amount} onChange={e => setAmount(e.target.value)} required />
+      </div>
+
+      <div className="grid grid-cols-2 gap-4">
+        <div className="space-y-2">
+          <Label>Donem Baslangic</Label>
+          <Input type="date" value={periodStart} onChange={e => setPeriodStart(e.target.value)} required />
+        </div>
+        <div className="space-y-2">
+          <Label>Donem Bitis</Label>
+          <Input type="date" value={periodEnd} onChange={e => setPeriodEnd(e.target.value)} required />
+        </div>
+      </div>
+
+      <div className="space-y-2">
+        <Label>Odeme Yontemi</Label>
+        <Select value={paymentMethod} onValueChange={setPaymentMethod}>
+          <SelectTrigger>
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="cash">Nakit</SelectItem>
+            <SelectItem value="bank_transfer">Havale/EFT</SelectItem>
+            <SelectItem value="other">Diger</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      <div className="space-y-2">
+        <Label>Notlar</Label>
+        <Textarea value={notes} onChange={e => setNotes(e.target.value)} rows={2} placeholder="Opsiyonel..." />
+      </div>
+
+      <Button type="submit" disabled={loading || !planSlug || !amount || (paymentType === 'top_up' && !extraMinutes)} className="w-full">
+        {loading && <Loader2Icon className="size-4 mr-2 animate-spin" />}
+        {paymentType === 'top_up' ? 'Ek Dakika Kaydet' : 'Odemeyi Kaydet'}
+      </Button>
+    </form>
+  );
+}
+
+// ─── Appointment Validation Config ────────────────────────────
+
+function ConversationForwardingConfig({ tenantId, tenant }: { tenantId: string; tenant: Tenant }) {
+  const wa = (tenant as any).settings?.whatsapp_agent || {};
+  const [phone, setPhone] = useState(wa.conversation_forwarding_phone || '');
+  const [refPrefix, setRefPrefix] = useState(wa.operator_ref_prefix || 'R');
+  const [saving, setSaving] = useState(false);
+
+  async function handleSave() {
+    setSaving(true);
+    try {
+      await api.put(`/admin/tenants/${tenantId}`, {
+        settings: {
+          whatsapp_agent: {
+            conversation_forwarding_phone: phone || null,
+            operator_ref_prefix: refPrefix || 'R',
+          },
+        },
+      });
+      toast.success('Konusma yonlendirme ayarlari kaydedildi');
+    } catch (err: any) {
+      toast.error(err.response?.data?.error || 'Hata');
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  return (
+    <Card className="mb-6">
+      <CardHeader>
+        <CardTitle className="text-sm flex items-center gap-2">
+          <MessageSquareIcon className="size-4" />
+          Konusma Yonlendirme Ayarlari
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4 max-w-lg">
+        <div className="space-y-2">
+          <Label>Yonlendirme Telefon Numarasi</Label>
+          <Input placeholder="+905551234567" value={phone} onChange={e => setPhone(e.target.value)} />
+        </div>
+        <div className="space-y-2">
+          <Label>REF Kodu Oneki</Label>
+          <Input placeholder="R" value={refPrefix} onChange={e => setRefPrefix(e.target.value.toUpperCase())} className="w-24" />
+        </div>
+        <Button onClick={handleSave} disabled={saving} size="sm">
+          {saving && <Loader2Icon className="size-4 mr-2 animate-spin" />}
+          Kaydet
+        </Button>
+      </CardContent>
+    </Card>
+  );
+}
+
+function AppointmentValidationConfig({ tenantId, agents, tenant }: { tenantId: string; agents: AgentRow[]; tenant: Tenant }) {
+  const wa = (tenant as any).settings?.whatsapp_agent || {};
+  const [agentId, setAgentId] = useState(wa.appointment_validation_agent_id || '');
+  const [phoneNumId, setPhoneNumId] = useState(wa.appointment_validation_phone_number_id || '');
+  const [saving, setSaving] = useState(false);
+  const [elPhoneNumbers, setElPhoneNumbers] = useState<{ phoneNumberId: string; phoneNumber: string; label: string }[]>([]);
+
+  useEffect(() => {
+    api.get('/inbound-call/phone-numbers')
+      .then(res => setElPhoneNumbers(res.data.phoneNumbers || []))
+      .catch(() => {});
+  }, []);
+
+  async function handleSave() {
+    setSaving(true);
+    try {
+      await api.put(`/admin/tenants/${tenantId}`, {
+        settings: {
+          whatsapp_agent: {
+            appointment_validation_agent_id: agentId || null,
+            appointment_validation_phone_number_id: phoneNumId || null,
+          },
+        },
+      });
+      toast.success('Randevu onay ayarlari kaydedildi');
+    } catch (err: any) {
+      toast.error(err.response?.data?.error || 'Hata');
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  return (
+    <Card className="mb-6">
+      <CardHeader>
+        <CardTitle className="text-sm flex items-center gap-2">
+          <PhoneOutgoingIcon className="size-4" />
+          Randevu Onay Ayarlari
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4 max-w-lg">
+        <div className="space-y-2">
+          <Label>Arama Agenti</Label>
+          <Select value={agentId || '__none__'} onValueChange={v => setAgentId(v === '__none__' ? '' : v)}>
+            <SelectTrigger>
+              <SelectValue placeholder="Agent secin" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="__none__">-- Secilmedi --</SelectItem>
+              {agents.filter(a => a.is_active).map(a => (
+                <SelectItem key={a._id} value={a._id}>
+                  {a.agent_template} — {a.phone_number}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          <p className="text-[11px] text-muted-foreground">
+            Randevu onay aramalarinda kullanilacak ElevenLabs agenti
+          </p>
+        </div>
+
+        <div className="space-y-2">
+          <Label>ElevenLabs Telefon Numarasi</Label>
+          <Select value={phoneNumId || '__none__'} onValueChange={v => setPhoneNumId(v === '__none__' ? '' : v)}>
+            <SelectTrigger>
+              <SelectValue placeholder="Telefon numarasi secin" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="__none__">-- Secilmedi --</SelectItem>
+              {elPhoneNumbers.map(pn => (
+                <SelectItem key={pn.phoneNumberId} value={pn.phoneNumberId}>
+                  {pn.phoneNumber} {pn.label ? `(${pn.label})` : ''}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          <p className="text-[11px] text-muted-foreground">
+            Randevu onay aramalarinda kullanilacak telefon numarasi
+          </p>
+        </div>
+
+        <Button onClick={handleSave} disabled={saving} size="sm">
+          {saving && <Loader2Icon className="size-4 mr-2 animate-spin" />}
+          Kaydet
+        </Button>
+      </CardContent>
+    </Card>
+  );
+}