elevenlabs-webhook-nodejs 1.0.0

package/web/src/components/whatsapp/settings/ConnectionTab.tsx

@@ -0,0 +1,236 @@
+import { useState } from 'react';
+import api from '@/lib/api';
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import {
+  Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
+} from '@/components/ui/select';
+import {
+  WifiIcon, WifiOffIcon, Loader2Icon, BotIcon, TimerIcon,
+} from 'lucide-react';
+import { toast } from 'sonner';
+import { QRCodeSVG } from 'qrcode.react';
+
+interface AgentOption {
+  _id: string;
+  phone_number: string;
+  agent_template: string;
+  is_active: boolean;
+}
+
+interface ConnectionTabProps {
+  connStatus: { connected: boolean; status: string } | null;
+  agents: AgentOption[];
+  initialAgentId: string;
+  initialGp: number;
+  onRefreshConnection: () => void;
+}
+
+export default function ConnectionTab({ connStatus, agents, initialAgentId, initialGp, onRefreshConnection }: ConnectionTabProps) {
+  const [connecting, setConnecting] = useState(false);
+  const [disconnecting, setDisconnecting] = useState(false);
+  const [qrCode, setQrCode] = useState<string | null>(null);
+  const [showQr, setShowQr] = useState(false);
+
+  const [selectedAgentId, setSelectedAgentId] = useState(initialAgentId);
+  const [savingAgent, setSavingAgent] = useState(false);
+
+  const [gp, setGp] = useState(initialGp);
+  const [savingGp, setSavingGp] = useState(false);
+
+  async function handleConnect() {
+    setConnecting(true);
+    try {
+      const { data } = await api.post('/whatsapp/connect');
+      const qr = data.checkpoint?.qrcode || data.qr_code_string || data.qr_code || null;
+      if (qr) {
+        setQrCode(qr);
+        setShowQr(true);
+        toast.success('QR kod olusturuldu. WhatsApp ile tarayin.');
+      } else {
+        toast.info('Baglanti baslatildi.');
+      }
+    } catch (err: any) {
+      toast.error(err.response?.data?.error || 'Baglanti hatasi');
+    } finally {
+      setConnecting(false);
+    }
+  }
+
+  async function handleDisconnect() {
+    setDisconnecting(true);
+    try {
+      await api.post('/whatsapp/disconnect');
+      toast.success('WhatsApp baglantisi kesildi');
+      onRefreshConnection();
+    } catch (err: any) {
+      toast.error(err.response?.data?.error || 'Hata');
+    } finally {
+      setDisconnecting(false);
+    }
+  }
+
+  async function handleCheckStatus() {
+    onRefreshConnection();
+    // Also check locally for QR dismissal
+    try {
+      const { data } = await api.get('/whatsapp/connection-status');
+      if (data.connected) {
+        setShowQr(false);
+        toast.success('WhatsApp basariyla baglandi!');
+      } else {
+        toast.info('Henuz baglanmadi. Tekrar deneyin.');
+      }
+    } catch {
+      // ignore
+    }
+  }
+
+  async function handleSaveAgent() {
+    setSavingAgent(true);
+    try {
+      await api.put('/whatsapp/config', {
+        agent_id: selectedAgentId === 'none' ? null : selectedAgentId,
+      });
+      toast.success('Agent kaydedildi');
+    } catch (err: any) {
+      toast.error(err.response?.data?.error || 'Hata');
+    } finally {
+      setSavingAgent(false);
+    }
+  }
+
+  async function handleSaveGp() {
+    setSavingGp(true);
+    try {
+      await api.put('/whatsapp/config', { grace_period_seconds: gp });
+      toast.success('Bekleme suresi kaydedildi');
+    } catch (err: any) {
+      toast.error(err.response?.data?.error || 'Hata');
+    } finally {
+      setSavingGp(false);
+    }
+  }
+
+  return (
+    <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+      {/* Connection */}
+      <Card className="lg:col-span-2">
+        <CardHeader>
+          <CardTitle className="text-base">Baglanti</CardTitle>
+          <CardDescription>WhatsApp hesap baglanti durumu</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="flex flex-wrap items-center gap-3">
+            {connStatus?.connected ? (
+              <WifiIcon className="size-4 text-emerald-500" />
+            ) : (
+              <WifiOffIcon className="size-4 text-muted-foreground" />
+            )}
+            <Badge
+              variant="secondary"
+              className={connStatus?.connected
+                ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-400'
+                : ''}
+            >
+              {connStatus?.connected ? 'Bagli' : connStatus?.status || 'Bagli Degil'}
+            </Badge>
+            {!connStatus?.connected ? (
+              <Button onClick={handleConnect} disabled={connecting} size="sm">
+                {connecting && <Loader2Icon className="size-4 animate-spin mr-1" />}
+                Baglan
+              </Button>
+            ) : (
+              <Button variant="destructive" size="sm" onClick={handleDisconnect} disabled={disconnecting}>
+                {disconnecting && <Loader2Icon className="size-4 animate-spin mr-1" />}
+                Baglanti Kes
+              </Button>
+            )}
+          </div>
+
+          {showQr && qrCode && (
+            <div className="space-y-3">
+              <p className="text-xs text-muted-foreground">WhatsApp uygulamanizda QR kodu tarayin:</p>
+              <div className="flex justify-center p-4 bg-white rounded-md">
+                <QRCodeSVG value={qrCode} size={200} />
+              </div>
+              <Button size="sm" onClick={handleCheckStatus} className="w-full">
+                Durumu Kontrol Et
+              </Button>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Agent Selection */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base flex items-center gap-2">
+            <BotIcon className="size-4" /> AI Agent
+          </CardTitle>
+          <CardDescription>WhatsApp mesajlarini yanitlayacak AI agent</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-3">
+          <div className="flex flex-col sm:flex-row sm:items-center gap-3">
+            <Select value={selectedAgentId} onValueChange={setSelectedAgentId}>
+              <SelectTrigger className="w-full sm:flex-1">
+                <SelectValue placeholder="Agent secin..." />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="none">Agent yok (AI devre disi)</SelectItem>
+                {agents.map(a => (
+                  <SelectItem key={a._id} value={a._id} disabled={!a.is_active}>
+                    {a.agent_template} — {a.phone_number}
+                    {!a.is_active ? ' (pasif)' : ''}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            <Button size="sm" onClick={handleSaveAgent} disabled={savingAgent} className="w-full sm:w-auto">
+              {savingAgent ? <Loader2Icon className="size-4 animate-spin" /> : 'Kaydet'}
+            </Button>
+          </div>
+          {agents.length === 0 && (
+            <p className="text-xs text-muted-foreground">
+              Henuz agent tanimlanmamis. Admin panelinden agent ekleyin.
+            </p>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Grace Period */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base flex items-center gap-2">
+            <TimerIcon className="size-4" /> Bekleme Suresi
+          </CardTitle>
+          <CardDescription>AI devreye girmeden once insanin yanit vermesi icin bekleme suresi</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="flex flex-col sm:flex-row sm:items-center gap-3">
+            <Select value={String(gp)} onValueChange={(v) => setGp(Number(v))}>
+              <SelectTrigger className="w-full sm:flex-1">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="5">5 saniye</SelectItem>
+                <SelectItem value="15">15 saniye</SelectItem>
+                <SelectItem value="30">30 saniye</SelectItem>
+                <SelectItem value="60">1 dakika</SelectItem>
+                <SelectItem value="120">2 dakika</SelectItem>
+                <SelectItem value="180">3 dakika</SelectItem>
+                <SelectItem value="300">5 dakika</SelectItem>
+                <SelectItem value="600">10 dakika</SelectItem>
+                <SelectItem value="900">15 dakika</SelectItem>
+              </SelectContent>
+            </Select>
+            <Button size="sm" onClick={handleSaveGp} disabled={savingGp} className="w-full sm:w-auto">
+              {savingGp ? <Loader2Icon className="size-4 animate-spin" /> : 'Kaydet'}
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/web/src/components/whatsapp/settings/NotificationsTab.tsx

@@ -0,0 +1,109 @@
+import { useState } from 'react';
+import api from '@/lib/api';
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Label } from '@/components/ui/label';
+import {
+  Loader2Icon, PlusIcon, TrashIcon, MessageSquareIcon,
+} from 'lucide-react';
+import { toast } from 'sonner';
+
+interface NotificationsTabProps {
+  initialSmsEnabled: boolean;
+  initialSmsPhones: string[];
+}
+
+export default function NotificationsTab({ initialSmsEnabled, initialSmsPhones }: NotificationsTabProps) {
+  const [smsEnabled, setSmsEnabled] = useState(initialSmsEnabled);
+  const [smsPhones, setSmsPhones] = useState<string[]>(initialSmsPhones);
+  const [newSmsPhone, setNewSmsPhone] = useState('');
+  const [savingSms, setSavingSms] = useState(false);
+
+  async function handleSaveSms() {
+    setSavingSms(true);
+    try {
+      await api.put('/whatsapp/config', {
+        sms_notification_enabled: smsEnabled,
+        sms_notification_phones: smsPhones,
+      });
+      toast.success('SMS bildirim ayarları kaydedildi');
+    } catch (err: any) {
+      toast.error(err.response?.data?.error || 'Hata');
+    } finally {
+      setSavingSms(false);
+    }
+  }
+
+  function addPhone() {
+    if (newSmsPhone.trim()) {
+      setSmsPhones(prev => [...prev, newSmsPhone.trim()]);
+      setNewSmsPhone('');
+    }
+  }
+
+  return (
+    <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+      <Card className="lg:col-span-2">
+        <CardHeader>
+          <CardTitle className="text-base flex items-center gap-2">
+            <MessageSquareIcon className="size-4" /> SMS Bildirimleri
+          </CardTitle>
+          <CardDescription>Randevu oluşturma, iptal ve değişikliklerinde doktora SMS ile bildirim gönderilir (NetGSM)</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-3">
+          <div className="flex items-center gap-2">
+            <Checkbox
+              id="sms-enabled"
+              checked={smsEnabled}
+              onCheckedChange={(checked) => setSmsEnabled(!!checked)}
+            />
+            <Label htmlFor="sms-enabled" className="text-sm">
+              SMS bildirimlerini etkinleştir
+            </Label>
+          </div>
+
+          {smsEnabled && (
+            <div className="space-y-3 pl-0 sm:pl-6">
+              <Label className="text-xs text-muted-foreground">SMS Alıcı Numaraları</Label>
+              <div className="flex flex-col sm:flex-row gap-2">
+                <Input
+                  placeholder="+905551234567"
+                  value={newSmsPhone}
+                  onChange={e => setNewSmsPhone(e.target.value)}
+                  onKeyDown={e => { if (e.key === 'Enter') addPhone(); }}
+                  className="flex-1"
+                />
+                <Button onClick={addPhone} disabled={!newSmsPhone.trim()} size="sm" className="w-full sm:w-auto">
+                  <PlusIcon className="size-4 mr-1 sm:mr-0" /><span className="sm:hidden">Ekle</span>
+                </Button>
+              </div>
+              {smsPhones.length > 0 && (
+                <div className="space-y-1">
+                  {smsPhones.map((phone, idx) => (
+                    <div key={idx} className="flex items-center justify-between py-1.5 px-3 rounded-md border text-sm">
+                      <span className="font-mono text-xs">{phone}</span>
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => setSmsPhones(prev => prev.filter((_, i) => i !== idx))}
+                        className="text-destructive hover:text-destructive h-7 w-7 p-0"
+                      >
+                        <TrashIcon className="size-3.5" />
+                      </Button>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          )}
+
+          <Button size="sm" onClick={handleSaveSms} disabled={savingSms}>
+            {savingSms ? <Loader2Icon className="size-4 animate-spin" /> : 'Kaydet'}
+          </Button>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/web/src/components/whatsapp/settings/OperatorTab.tsx

@@ -0,0 +1,303 @@
+import { useState, useRef } from 'react';
+import api from '@/lib/api';
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import {
+  Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
+} from '@/components/ui/select';
+import {
+  Loader2Icon, StethoscopeIcon, PhoneCallIcon, ImageIcon, XIcon,
+} from 'lucide-react';
+import { toast } from 'sonner';
+
+interface AgentOption {
+  _id: string;
+  phone_number: string;
+  agent_template: string;
+  is_active: boolean;
+}
+
+interface OperatorTabProps {
+  agents: AgentOption[];
+  initialOpEnabled: boolean;
+  initialOpPhone: string;
+  initialOpPrefix: string;
+  initialOpTimeout: number;
+  initialExamplePhotoEnabled: boolean;
+  initialExamplePhotoBase64: string | null;
+  initialExamplePhotoCaption: string;
+  initialCallEnabled: boolean;
+  initialCallPhoneNumberId: string;
+  initialCallAgentId: string;
+}
+
+export default function OperatorTab({
+  agents,
+  initialOpEnabled, initialOpPhone, initialOpPrefix, initialOpTimeout,
+  initialExamplePhotoEnabled, initialExamplePhotoBase64, initialExamplePhotoCaption,
+  initialCallEnabled, initialCallPhoneNumberId, initialCallAgentId,
+}: OperatorTabProps) {
+  const [opEnabled, setOpEnabled] = useState(initialOpEnabled);
+  const [opPhone, setOpPhone] = useState(initialOpPhone);
+  const [opPrefix, setOpPrefix] = useState(initialOpPrefix);
+  const [opTimeout, setOpTimeout] = useState(initialOpTimeout);
+  const [exPhotoEnabled, setExPhotoEnabled] = useState(initialExamplePhotoEnabled);
+  const [exPhotoBase64, setExPhotoBase64] = useState<string | null>(initialExamplePhotoBase64);
+  const [exPhotoCaption, setExPhotoCaption] = useState(initialExamplePhotoCaption);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [savingOp, setSavingOp] = useState(false);
+
+  const [callEnabled, setCallEnabled] = useState(initialCallEnabled);
+  const [callPhoneNumberId, setCallPhoneNumberId] = useState(initialCallPhoneNumberId);
+  const [callAgentId, setCallAgentId] = useState(initialCallAgentId);
+  const [savingCall, setSavingCall] = useState(false);
+
+  async function handleSaveOperator() {
+    setSavingOp(true);
+    try {
+      await api.put('/whatsapp/config', {
+        operator_workflow_enabled: opEnabled,
+        operator_phone: opPhone || null,
+        operator_ref_prefix: opPrefix || 'R',
+        operator_request_timeout_hours: opTimeout,
+        operator_example_photo_enabled: exPhotoEnabled,
+        operator_example_photo_base64: exPhotoBase64 || null,
+        operator_example_photo_caption: exPhotoCaption || '',
+      });
+      toast.success('Estetisyen yönlendirme ayarları kaydedildi');
+    } catch (err: any) {
+      toast.error(err.response?.data?.error || 'Hata');
+    } finally {
+      setSavingOp(false);
+    }
+  }
+
+  async function handleSaveCall() {
+    setSavingCall(true);
+    try {
+      await api.put('/whatsapp/config', {
+        outbound_call_enabled: callEnabled,
+        outbound_call_phone_number_id: callPhoneNumberId || null,
+        outbound_call_agent_id: callAgentId === 'none' ? null : callAgentId,
+      });
+      toast.success('Arama ayarları kaydedildi');
+    } catch (err: any) {
+      toast.error(err.response?.data?.error || 'Hata');
+    } finally {
+      setSavingCall(false);
+    }
+  }
+
+  return (
+    <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+      {/* Operator Workflow */}
+      <Card className="lg:col-span-2">
+        <CardHeader>
+          <CardTitle className="text-base flex items-center gap-2">
+            <StethoscopeIcon className="size-4" /> Estetisyen Yönlendirme
+          </CardTitle>
+          <CardDescription>Hasta fotoğraflarını estetisyene iletip fiyat/değerlendirme yanıtını AI üzerinden hastaya sunma</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-3">
+          <div className="flex items-center gap-2">
+            <Checkbox
+              id="op-enabled"
+              checked={opEnabled}
+              onCheckedChange={(checked) => setOpEnabled(!!checked)}
+            />
+            <Label htmlFor="op-enabled" className="text-sm">
+              Estetisyen yönlendirmeyi etkinleştir
+            </Label>
+          </div>
+
+          {opEnabled && (
+            <div className="space-y-3 pl-0 sm:pl-6">
+              <div className="space-y-1">
+                <Label className="text-xs text-muted-foreground">Estetisyen Telefon Numarası</Label>
+                <Input
+                  placeholder="+905551234567"
+                  value={opPhone}
+                  onChange={e => setOpPhone(e.target.value)}
+                />
+                <p className="text-xs text-muted-foreground">Fotoğrafların iletileceği estetisyenin kişisel WhatsApp numarası</p>
+              </div>
+
+              <div className="flex flex-col sm:flex-row gap-3">
+                <div className="space-y-1 flex-1">
+                  <Label className="text-xs text-muted-foreground">REF Kod Öneki</Label>
+                  <Input
+                    maxLength={1}
+                    placeholder="R"
+                    value={opPrefix}
+                    onChange={e => setOpPrefix(e.target.value.toUpperCase().replace(/[^A-Z]/g, ''))}
+                    className="w-20"
+                  />
+                </div>
+                <div className="space-y-1 flex-1">
+                  <Label className="text-xs text-muted-foreground">Yanıt Bekleme Süresi (saat)</Label>
+                  <Select value={String(opTimeout)} onValueChange={(v) => setOpTimeout(Number(v))}>
+                    <SelectTrigger className="w-full">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="1">1 saat</SelectItem>
+                      <SelectItem value="4">4 saat</SelectItem>
+                      <SelectItem value="8">8 saat</SelectItem>
+                      <SelectItem value="12">12 saat</SelectItem>
+                      <SelectItem value="24">24 saat</SelectItem>
+                      <SelectItem value="48">48 saat</SelectItem>
+                      <SelectItem value="72">72 saat</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+              </div>
+              {/* Example Photo */}
+              <div className="mt-4 pt-4 border-t space-y-3">
+                <div className="flex items-center gap-2">
+                  <Checkbox
+                    id="ex-photo-enabled"
+                    checked={exPhotoEnabled}
+                    onCheckedChange={(checked) => setExPhotoEnabled(!!checked)}
+                  />
+                  <Label htmlFor="ex-photo-enabled" className="text-sm">
+                    Rehber fotoğraf gönder
+                  </Label>
+                </div>
+
+                {exPhotoEnabled && (
+                  <div className="space-y-3 pl-0 sm:pl-6">
+                    <p className="text-xs text-muted-foreground">
+                      AI hastadan fotoğraf isterken önce bu rehber fotoğrafı gönderir (çekim açısı, poz, aydınlatma vb.)
+                    </p>
+
+                    {exPhotoBase64 ? (
+                      <div className="relative inline-block">
+                        <img
+                          src={exPhotoBase64}
+                          alt="Rehber fotoğraf"
+                          className="max-w-[200px] max-h-[200px] rounded-md border object-cover"
+                        />
+                        <Button
+                          variant="destructive"
+                          size="sm"
+                          className="absolute -top-2 -right-2 size-6 p-0 rounded-full"
+                          onClick={() => { setExPhotoBase64(null); if (fileInputRef.current) fileInputRef.current.value = ''; }}
+                        >
+                          <XIcon className="size-3" />
+                        </Button>
+                      </div>
+                    ) : (
+                      <div
+                        className="border-2 border-dashed rounded-md p-6 text-center cursor-pointer hover:bg-muted/50 transition-colors"
+                        onClick={() => fileInputRef.current?.click()}
+                      >
+                        <ImageIcon className="size-8 mx-auto text-muted-foreground mb-2" />
+                        <p className="text-sm text-muted-foreground">Fotoğraf yüklemek için tıklayın</p>
+                      </div>
+                    )}
+
+                    <input
+                      ref={fileInputRef}
+                      type="file"
+                      accept="image/*"
+                      className="hidden"
+                      onChange={(e) => {
+                        const file = e.target.files?.[0];
+                        if (!file) return;
+                        if (file.size > 1.5 * 1024 * 1024) {
+                          toast.error('Fotoğraf çok büyük (max 1.5 MB)');
+                          return;
+                        }
+                        const reader = new FileReader();
+                        reader.onload = () => setExPhotoBase64(reader.result as string);
+                        reader.readAsDataURL(file);
+                      }}
+                    />
+
+                    <div className="space-y-1">
+                      <Label className="text-xs text-muted-foreground">Fotoğraf Açıklaması</Label>
+                      <Textarea
+                        placeholder="Lütfen fotoğrafınızı bu açıdan çekin..."
+                        value={exPhotoCaption}
+                        onChange={e => setExPhotoCaption(e.target.value)}
+                        rows={2}
+                        maxLength={500}
+                      />
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+
+          <Button size="sm" onClick={handleSaveOperator} disabled={savingOp}>
+            {savingOp ? <Loader2Icon className="size-4 animate-spin" /> : 'Kaydet'}
+          </Button>
+        </CardContent>
+      </Card>
+
+      {/* Outbound Call */}
+      <Card className="lg:col-span-2">
+        <CardHeader>
+          <CardTitle className="text-base flex items-center gap-2">
+            <PhoneCallIcon className="size-4" /> Giden Arama
+          </CardTitle>
+          <CardDescription>AI sohbet sırasında hastayı telefon ile arayabilir</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-3">
+          <div className="flex items-center gap-2">
+            <Checkbox
+              id="call-enabled"
+              checked={callEnabled}
+              onCheckedChange={(checked) => setCallEnabled(!!checked)}
+            />
+            <Label htmlFor="call-enabled" className="text-sm">
+              Giden aramayı etkinleştir
+            </Label>
+          </div>
+
+          {callEnabled && (
+            <div className="space-y-3 pl-0 sm:pl-6">
+              <div className="space-y-1">
+                <Label className="text-xs text-muted-foreground">Telefon Numarası ID</Label>
+                <Input
+                  placeholder="Telefon numarası ID'si"
+                  value={callPhoneNumberId}
+                  onChange={e => setCallPhoneNumberId(e.target.value)}
+                />
+                <p className="text-xs text-muted-foreground">Giden arama için kullanılacak telefon numarası ID'si</p>
+              </div>
+
+              <div className="space-y-1">
+                <Label className="text-xs text-muted-foreground">Arama Agenti</Label>
+                <Select value={callAgentId} onValueChange={setCallAgentId}>
+                  <SelectTrigger className="w-full">
+                    <SelectValue placeholder="Agent seçin..." />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="none">Varsayılan (sohbet agenti)</SelectItem>
+                    {agents.map(a => (
+                      <SelectItem key={a._id} value={a._id} disabled={!a.is_active}>
+                        {a.agent_template} — {a.phone_number}
+                        {!a.is_active ? ' (pasif)' : ''}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                <p className="text-xs text-muted-foreground">Arama için farklı bir agent seçebilirsiniz. Boş bırakılırsa sohbet agenti kullanılır.</p>
+              </div>
+            </div>
+          )}
+
+          <Button size="sm" onClick={handleSaveCall} disabled={savingCall}>
+            {savingCall ? <Loader2Icon className="size-4 animate-spin" /> : 'Kaydet'}
+          </Button>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}