elevenlabs-webhook-nodejs 1.0.0

package/web/src/pages/Calls.tsx

@@ -0,0 +1,188 @@
+import { useEffect, useState } from 'react';
+import { Link, useSearchParams } from 'react-router-dom';
+import api from '../lib/api';
+import type { Call } from '../types';
+import { PageHeader } from '@/components/page-header';
+import { CallStatusBadge, DirectionBadge, SentimentBadge, CategoryBadge } from '@/components/status-badge';
+import { EmptyState } from '@/components/empty-state';
+import { Pagination } from '@/components/pagination';
+import { TableLoader } from '@/components/page-loader';
+import { Card, CardContent } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+
+export default function Calls() {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const [calls, setCalls] = useState<Call[]>([]);
+  const [total, setTotal] = useState(0);
+  const [totalPages, setTotalPages] = useState(0);
+  const [loading, setLoading] = useState(true);
+
+  const page = parseInt(searchParams.get('page') || '1');
+  const direction = searchParams.get('direction') || '';
+  const status = searchParams.get('status') || '';
+  const sentiment = searchParams.get('sentiment') || '';
+  const category = searchParams.get('category') || '';
+
+  useEffect(() => {
+    setLoading(true);
+    const params = new URLSearchParams();
+    params.set('page', String(page));
+    params.set('limit', '20');
+    if (direction) params.set('direction', direction);
+    if (status) params.set('status', status);
+    if (sentiment) params.set('sentiment', sentiment);
+    if (category) params.set('category', category);
+
+    api.get(`/calls?${params}`)
+      .then(({ data }) => {
+        setCalls(data.calls);
+        setTotal(data.total);
+        setTotalPages(data.totalPages);
+      })
+      .finally(() => setLoading(false));
+  }, [page, direction, status, sentiment, category]);
+
+  function setFilter(key: string, value: string) {
+    const params = new URLSearchParams(searchParams);
+    if (value && value !== 'all') {
+      params.set(key, value);
+    } else {
+      params.delete(key);
+    }
+    if (key !== 'page') params.set('page', '1');
+    setSearchParams(params);
+  }
+
+  return (
+    <div>
+      <PageHeader title="Aramalar">
+        <Badge variant="outline" className="text-xs">
+          {total} arama
+        </Badge>
+      </PageHeader>
+
+      <div className="flex gap-3 mb-4">
+        <Select value={direction || 'all'} onValueChange={v => setFilter('direction', v)}>
+          <SelectTrigger className="w-40">
+            <SelectValue placeholder="Tum Yonler" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">Tum Yonler</SelectItem>
+            <SelectItem value="inbound">Gelen</SelectItem>
+            <SelectItem value="outbound">Giden</SelectItem>
+          </SelectContent>
+        </Select>
+
+        <Select value={status || 'all'} onValueChange={v => setFilter('status', v)}>
+          <SelectTrigger className="w-44">
+            <SelectValue placeholder="Tum Durumlar" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">Tum Durumlar</SelectItem>
+            <SelectItem value="completed">Tamamlandi</SelectItem>
+            <SelectItem value="failed">Basarisiz</SelectItem>
+            <SelectItem value="no_answer">Cevaplanmadi</SelectItem>
+          </SelectContent>
+        </Select>
+
+        <Select value={sentiment || 'all'} onValueChange={v => setFilter('sentiment', v)}>
+          <SelectTrigger className="w-36">
+            <SelectValue placeholder="Duygu" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">Tum Duygular</SelectItem>
+            <SelectItem value="positive">Olumlu</SelectItem>
+            <SelectItem value="neutral">Notr</SelectItem>
+            <SelectItem value="negative">Olumsuz</SelectItem>
+          </SelectContent>
+        </Select>
+
+        <Select value={category || 'all'} onValueChange={v => setFilter('category', v)}>
+          <SelectTrigger className="w-40">
+            <SelectValue placeholder="Kategori" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">Tum Kategoriler</SelectItem>
+            <SelectItem value="callback_required">Geri Arama</SelectItem>
+            <SelectItem value="appointment_inquiry">Randevu</SelectItem>
+            <SelectItem value="other">Diger</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      <Card>
+        <CardContent className="px-0 py-0">
+          {loading ? (
+            <TableLoader rows={8} cols={7} />
+          ) : (
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead className="pl-6">Arayan</TableHead>
+                  <TableHead>Yon</TableHead>
+                  <TableHead>Durum</TableHead>
+                  <TableHead>Sure</TableHead>
+                  <TableHead>Etiketler</TableHead>
+                  <TableHead>Ozet</TableHead>
+                  <TableHead className="pr-6">Tarih</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {calls.map(call => (
+                  <TableRow key={call._id}>
+                    <TableCell className="pl-6">
+                      <Link to={`/calls/${call._id}`} className="font-medium text-primary hover:underline">
+                        {call.caller_number}
+                      </Link>
+                    </TableCell>
+                    <TableCell><DirectionBadge direction={call.direction} /></TableCell>
+                    <TableCell><CallStatusBadge status={call.status} /></TableCell>
+                    <TableCell className="text-muted-foreground">{call.duration_seconds}s</TableCell>
+                    <TableCell>
+                      <div className="flex flex-wrap gap-1">
+                        <SentimentBadge sentiment={call.sentiment} />
+                        {call.categories?.map(cat => (
+                          <CategoryBadge key={cat} category={cat} />
+                        ))}
+                      </div>
+                    </TableCell>
+                    <TableCell className="text-muted-foreground max-w-xs truncate">
+                      {call.llm_summary || '-'}
+                    </TableCell>
+                    <TableCell className="text-muted-foreground whitespace-nowrap pr-6">
+                      {new Date(call.createdAt).toLocaleString('tr-TR')}
+                    </TableCell>
+                  </TableRow>
+                ))}
+                {calls.length === 0 && (
+                  <TableRow>
+                    <TableCell colSpan={7}>
+                      <EmptyState message="Arama bulunamadi" />
+                    </TableCell>
+                  </TableRow>
+                )}
+              </TableBody>
+            </Table>
+          )}
+        </CardContent>
+      </Card>
+
+      <Pagination page={page} totalPages={totalPages} onPageChange={p => setFilter('page', String(p))} />
+    </div>
+  );
+}

package/web/src/pages/CampaignDetail.tsx

@@ -0,0 +1,216 @@
+import { useEffect, useState } from 'react';
+import { useParams, Link } from 'react-router-dom';
+import api from '../lib/api';
+import { PageLoader } from '@/components/page-loader';
+import { StatCard } from '@/components/stat-card';
+import { CampaignStatusBadge, CallStatusBadge } from '@/components/status-badge';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { toast } from 'sonner';
+import {
+  ArrowLeftIcon,
+  BarChart3Icon,
+  PlayIcon,
+  PauseIcon,
+  SquareIcon,
+  Loader2Icon,
+} from 'lucide-react';
+
+interface Campaign {
+  _id: string;
+  name: string;
+  status: 'draft' | 'scheduled' | 'running' | 'paused' | 'completed';
+  survey_id: { _id: string; name: string; status: string } | null;
+  agent_id: { _id: string; phone_number: string; agent_template: string } | null;
+  phone_list: { number: string; status: string; attempts: number }[];
+  schedule: {
+    start_date: string;
+    end_date: string;
+    daily_start_time: string;
+    daily_end_time: string;
+    max_concurrent_calls: number;
+    max_retries: number;
+  };
+  stats: {
+    total: number;
+    completed: number;
+    failed: number;
+    no_answer: number;
+    voicemail: number;
+    pending: number;
+  };
+  createdAt: string;
+}
+
+export default function CampaignDetail() {
+  const { id } = useParams<{ id: string }>();
+  const [campaign, setCampaign] = useState<Campaign | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [actionLoading, setActionLoading] = useState('');
+
+  useEffect(() => {
+    setLoading(true);
+    api.get(`/campaigns/${id}`)
+      .then(({ data }) => setCampaign(data.campaign))
+      .finally(() => setLoading(false));
+  }, [id]);
+
+  async function doAction(action: string) {
+    setActionLoading(action);
+    try {
+      const { data } = await api.post(`/campaigns/${id}/${action}`);
+      setCampaign(data.campaign);
+      toast.success('Islem basarili');
+    } catch (err: any) {
+      toast.error(err.response?.data?.error || 'Hata');
+    } finally {
+      setActionLoading('');
+    }
+  }
+
+  if (loading) return <PageLoader />;
+  if (!campaign) return <p className="text-muted-foreground">Kampanya bulunamadi</p>;
+
+  const st = campaign.stats;
+
+  return (
+    <div>
+      <div className="flex items-center justify-between mb-4">
+        <Button variant="ghost" size="sm" asChild>
+          <Link to="/campaigns">
+            <ArrowLeftIcon className="size-4 mr-1" />
+            Kampanyalara Don
+          </Link>
+        </Button>
+        <Button variant="outline" size="sm" asChild>
+          <Link to={`/campaigns/${id}/results`}>
+            <BarChart3Icon className="size-4 mr-1" />
+            Sonuclar
+          </Link>
+        </Button>
+      </div>
+
+      <div className="flex items-start justify-between mb-6">
+        <div>
+          <h1 className="text-2xl font-bold tracking-tight">{campaign.name}</h1>
+          <CampaignStatusBadge status={campaign.status} />
+        </div>
+        <div className="flex gap-2">
+          {campaign.status === 'draft' && (
+            <ActionBtn label="Baslat" action="start" icon={<PlayIcon className="size-4" />} loading={actionLoading} onClick={doAction} />
+          )}
+          {campaign.status === 'running' && (
+            <ActionBtn label="Duraklat" action="pause" icon={<PauseIcon className="size-4" />} loading={actionLoading} onClick={doAction} variant="secondary" />
+          )}
+          {campaign.status === 'paused' && (
+            <ActionBtn label="Devam Et" action="resume" icon={<PlayIcon className="size-4" />} loading={actionLoading} onClick={doAction} />
+          )}
+          {['running', 'paused', 'scheduled'].includes(campaign.status) && (
+            <ActionBtn label="Durdur" action="stop" icon={<SquareIcon className="size-4" />} loading={actionLoading} onClick={doAction} variant="destructive" />
+          )}
+        </div>
+      </div>
+
+      <div className="grid grid-cols-2 lg:grid-cols-6 gap-3 mb-6">
+        <StatCard label="Toplam" value={st.total} />
+        <StatCard label="Bekleyen" value={st.pending} />
+        <StatCard label="Tamamlanan" value={st.completed} />
+        <StatCard label="Basarisiz" value={st.failed} />
+        <StatCard label="Cevaplanmayan" value={st.no_answer} />
+        <StatCard label="Sesli Mesaj" value={st.voicemail} />
+      </div>
+
+      <div className="grid grid-cols-2 gap-4 mb-6">
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-sm">Detaylar</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-2 text-sm">
+            <InfoRow label="Anket" value={campaign.survey_id?.name || '-'} />
+            <InfoRow label="Agent" value={campaign.agent_id?.phone_number || '-'} />
+            <InfoRow label="Olusturulma" value={new Date(campaign.createdAt).toLocaleDateString('tr-TR')} />
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-sm">Zamanlama</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-2 text-sm">
+            <InfoRow label="Baslangic" value={new Date(campaign.schedule.start_date).toLocaleDateString('tr-TR')} />
+            <InfoRow label="Bitis" value={new Date(campaign.schedule.end_date).toLocaleDateString('tr-TR')} />
+            <InfoRow label="Gunluk Saat" value={`${campaign.schedule.daily_start_time} - ${campaign.schedule.daily_end_time}`} />
+            <InfoRow label="Esz. Arama" value={String(campaign.schedule.max_concurrent_calls)} />
+            <InfoRow label="Maks Tekrar" value={String(campaign.schedule.max_retries)} />
+          </CardContent>
+        </Card>
+      </div>
+
+      {campaign.phone_list.length > 0 && (
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-sm">
+              Telefon Listesi
+              <Badge variant="secondary" className="ml-2">{campaign.phone_list.length}</Badge>
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="px-0 py-0 max-h-72 overflow-y-auto">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead className="pl-6">Numara</TableHead>
+                  <TableHead>Durum</TableHead>
+                  <TableHead className="pr-6">Deneme</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {campaign.phone_list.slice(0, 50).map((p, i) => (
+                  <TableRow key={i}>
+                    <TableCell className="pl-6 font-mono text-sm">{p.number}</TableCell>
+                    <TableCell><CallStatusBadge status={p.status} /></TableCell>
+                    <TableCell className="text-muted-foreground pr-6">{p.attempts}</TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+            {campaign.phone_list.length > 50 && (
+              <p className="text-xs text-muted-foreground text-center py-2">
+                ...ve {campaign.phone_list.length - 50} daha
+              </p>
+            )}
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  );
+}
+
+function ActionBtn({ label, action, icon, loading, onClick, variant = 'default' }: {
+  label: string; action: string; icon: React.ReactNode; loading: string;
+  onClick: (action: string) => void;
+  variant?: 'default' | 'secondary' | 'destructive';
+}) {
+  return (
+    <Button variant={variant} size="sm" onClick={() => onClick(action)} disabled={loading === action}>
+      {loading === action ? <Loader2Icon className="size-4 animate-spin" /> : icon}
+      <span className="ml-1">{label}</span>
+    </Button>
+  );
+}
+
+function InfoRow({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="flex justify-between">
+      <span className="text-muted-foreground">{label}</span>
+      <span className="font-medium">{value}</span>
+    </div>
+  );
+}

package/web/src/pages/CampaignNew.tsx

@@ -0,0 +1,277 @@
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import api from '../lib/api';
+import { PageHeader } from '@/components/page-header';
+import { PageLoader } from '@/components/page-loader';
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Button } from '@/components/ui/button';
+import { Textarea } from '@/components/ui/textarea';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Loader2Icon, ArrowRightIcon, ArrowLeftIcon, RocketIcon } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+interface SurveyOption { _id: string; name: string; status: string }
+interface AgentOption { _id: string; phone_number: string; agent_template: string; direction: string }
+
+export default function CampaignNew() {
+  const navigate = useNavigate();
+  const [step, setStep] = useState(1);
+  const [surveys, setSurveys] = useState<SurveyOption[]>([]);
+  const [agents, setAgents] = useState<AgentOption[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState('');
+
+  const [name, setName] = useState('');
+  const [surveyId, setSurveyId] = useState('');
+  const [agentId, setAgentId] = useState('');
+  const [startDate, setStartDate] = useState('');
+  const [endDate, setEndDate] = useState('');
+  const [dailyStart, setDailyStart] = useState('09:00');
+  const [dailyEnd, setDailyEnd] = useState('18:00');
+  const [maxConcurrent, setMaxConcurrent] = useState(1);
+  const [maxRetries, setMaxRetries] = useState(3);
+  const [phoneNumbers, setPhoneNumbers] = useState('');
+
+  useEffect(() => {
+    Promise.all([
+      api.get('/surveys'),
+      api.get('/agents')
+    ]).then(([surveyRes, agentRes]) => {
+      setSurveys(surveyRes.data.surveys.filter((s: SurveyOption) => s.status === 'active'));
+      setAgents(agentRes.data.agents);
+    }).finally(() => setLoading(false));
+  }, []);
+
+  async function handleCreate() {
+    setSaving(true);
+    setError('');
+    try {
+      const { data } = await api.post('/campaigns', {
+        name,
+        survey_id: surveyId,
+        agent_id: agentId,
+        schedule: {
+          start_date: startDate,
+          end_date: endDate,
+          daily_start_time: dailyStart,
+          daily_end_time: dailyEnd,
+          max_concurrent_calls: maxConcurrent,
+          max_retries: maxRetries,
+          retry_delay_minutes: 60
+        }
+      });
+
+      const campaignId = data.campaign._id;
+      const numbers = phoneNumbers.split('\n').map(n => n.trim()).filter(Boolean);
+      if (numbers.length > 0) {
+        await api.post(`/campaigns/${campaignId}/phone-list`, { numbers });
+      }
+
+      navigate(`/campaigns/${campaignId}`);
+    } catch (err: any) {
+      setError(err.response?.data?.error || 'Kampanya olusturulamadi');
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  if (loading) return <PageLoader />;
+
+  const canNext1 = name && surveyId && agentId;
+  const canNext2 = startDate && endDate;
+
+  return (
+    <div className="max-w-2xl">
+      <PageHeader title="Yeni Kampanya" />
+
+      {/* Step indicator */}
+      <div className="flex gap-2 mb-8">
+        {[1, 2, 3].map(s => (
+          <div key={s} className="flex-1 flex flex-col items-center gap-1.5">
+            <div className={cn(
+              "h-1.5 w-full rounded-full transition-colors",
+              s <= step ? "bg-primary" : "bg-muted"
+            )} />
+            <span className={cn(
+              "text-[10px]",
+              s <= step ? "text-foreground" : "text-muted-foreground"
+            )}>
+              {s === 1 ? "Bilgiler" : s === 2 ? "Zamanlama" : "Telefon Listesi"}
+            </span>
+          </div>
+        ))}
+      </div>
+
+      {error && (
+        <Alert variant="destructive" className="mb-4">
+          <AlertDescription>{error}</AlertDescription>
+        </Alert>
+      )}
+
+      {step === 1 && (
+        <Card>
+          <CardHeader>
+            <CardTitle>Temel Bilgiler</CardTitle>
+            <CardDescription>Kampanya adi, anket ve agent secin</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="space-y-2">
+              <Label>Kampanya Adi</Label>
+              <Input value={name} onChange={e => setName(e.target.value)} placeholder="Ornek: Subat Memnuniyet Anketi" />
+            </div>
+            <div className="space-y-2">
+              <Label>Anket</Label>
+              <Select value={surveyId} onValueChange={setSurveyId}>
+                <SelectTrigger>
+                  <SelectValue placeholder="Anket secin..." />
+                </SelectTrigger>
+                <SelectContent>
+                  {surveys.map(s => (
+                    <SelectItem key={s._id} value={s._id}>{s.name}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              {surveys.length === 0 && (
+                <p className="text-xs text-amber-600">Aktif anket bulunamadi. Once bir anket olusturun.</p>
+              )}
+            </div>
+            <div className="space-y-2">
+              <Label>Agent</Label>
+              <Select value={agentId} onValueChange={setAgentId}>
+                <SelectTrigger>
+                  <SelectValue placeholder="Agent secin..." />
+                </SelectTrigger>
+                <SelectContent>
+                  {agents.map(a => (
+                    <SelectItem key={a._id} value={a._id}>{a.phone_number} ({a.agent_template})</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="flex justify-end">
+              <Button onClick={() => setStep(2)} disabled={!canNext1}>
+                Devam
+                <ArrowRightIcon className="size-4 ml-1" />
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {step === 2 && (
+        <Card>
+          <CardHeader>
+            <CardTitle>Zamanlama</CardTitle>
+            <CardDescription>Kampanya tarih ve saat ayarlarini yapin</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="grid grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <Label>Baslangic Tarihi</Label>
+                <Input type="date" value={startDate} onChange={e => setStartDate(e.target.value)} />
+              </div>
+              <div className="space-y-2">
+                <Label>Bitis Tarihi</Label>
+                <Input type="date" value={endDate} onChange={e => setEndDate(e.target.value)} />
+              </div>
+              <div className="space-y-2">
+                <Label>Gunluk Baslangic</Label>
+                <Input type="time" value={dailyStart} onChange={e => setDailyStart(e.target.value)} />
+              </div>
+              <div className="space-y-2">
+                <Label>Gunluk Bitis</Label>
+                <Input type="time" value={dailyEnd} onChange={e => setDailyEnd(e.target.value)} />
+              </div>
+              <div className="space-y-2">
+                <Label>Eszamanli Arama</Label>
+                <Input type="number" min={1} max={10} value={maxConcurrent}
+                  onChange={e => setMaxConcurrent(Number(e.target.value))} />
+              </div>
+              <div className="space-y-2">
+                <Label>Maks Tekrar</Label>
+                <Input type="number" min={0} max={10} value={maxRetries}
+                  onChange={e => setMaxRetries(Number(e.target.value))} />
+              </div>
+            </div>
+            <div className="flex justify-between">
+              <Button variant="outline" onClick={() => setStep(1)}>
+                <ArrowLeftIcon className="size-4 mr-1" />
+                Geri
+              </Button>
+              <Button onClick={() => setStep(3)} disabled={!canNext2}>
+                Devam
+                <ArrowRightIcon className="size-4 ml-1" />
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {step === 3 && (
+        <Card>
+          <CardHeader>
+            <CardTitle>Telefon Listesi</CardTitle>
+            <CardDescription>Her satira bir telefon numarasi yazin. Sonra da ekleyebilirsiniz.</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <Textarea
+              value={phoneNumbers}
+              onChange={e => setPhoneNumbers(e.target.value)}
+              rows={8}
+              placeholder={"+905301234567\n+905309876543\n+905551112233"}
+              className="font-mono"
+            />
+            <p className="text-xs text-muted-foreground">
+              {phoneNumbers.split('\n').filter(n => n.trim()).length} numara girildi
+            </p>
+
+            <div className="border-t pt-4">
+              <h3 className="text-sm font-semibold mb-3">Ozet</h3>
+              <div className="text-sm space-y-1.5">
+                <SummaryRow label="Ad" value={name} />
+                <SummaryRow label="Anket" value={surveys.find(s => s._id === surveyId)?.name || '-'} />
+                <SummaryRow label="Agent" value={agents.find(a => a._id === agentId)?.phone_number || '-'} />
+                <SummaryRow label="Tarih" value={`${startDate} — ${endDate}`} />
+                <SummaryRow label="Saat" value={`${dailyStart} — ${dailyEnd}`} />
+              </div>
+            </div>
+
+            <div className="flex justify-between">
+              <Button variant="outline" onClick={() => setStep(2)}>
+                <ArrowLeftIcon className="size-4 mr-1" />
+                Geri
+              </Button>
+              <Button onClick={handleCreate} disabled={saving}>
+                {saving ? (
+                  <Loader2Icon className="size-4 mr-2 animate-spin" />
+                ) : (
+                  <RocketIcon className="size-4 mr-1" />
+                )}
+                {saving ? 'Olusturuluyor...' : 'Kampanya Olustur'}
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  );
+}
+
+function SummaryRow({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="flex justify-between">
+      <span className="text-muted-foreground">{label}</span>
+      <span className="font-medium">{value}</span>
+    </div>
+  );
+}