elevenlabs-webhook-nodejs 1.0.0

package/web/src/pages/Dashboard.tsx

@@ -0,0 +1,336 @@
+import { useEffect, useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import api from '../lib/api';
+import type { CallStats, Call, UsageSummary, Lead } from '../types';
+import { PageHeader } from '@/components/page-header';
+import { StatCard } from '@/components/stat-card';
+import { CallStatusBadge, DirectionBadge, ChannelBadge, LeadStatusBadge, CategoryBadge } from '@/components/status-badge';
+import { EmptyState } from '@/components/empty-state';
+import { PageLoader } from '@/components/page-loader';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Progress } from '@/components/ui/progress';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import {
+  PhoneIcon,
+  CheckCircleIcon,
+  XCircleIcon,
+  PhoneMissedIcon,
+  PhoneIncomingIcon,
+  PhoneOutgoingIcon,
+  ClockIcon,
+  GaugeIcon,
+  ContactIcon,
+  MessageSquareIcon,
+  BotIcon,
+  MicIcon,
+  UsersIcon,
+} from 'lucide-react';
+import {
+  ResponsiveContainer,
+  AreaChart,
+  Area,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  BarChart,
+  Bar,
+} from 'recharts';
+
+interface DailyTrend {
+  date: string;
+  inbound_calls: number;
+  inbound_minutes: number;
+  wa_messages: number;
+}
+
+export default function Dashboard() {
+  const navigate = useNavigate();
+  const [stats, setStats] = useState<CallStats | null>(null);
+  const [recentCalls, setRecentCalls] = useState<Call[]>([]);
+  const [usage, setUsage] = useState<UsageSummary | null>(null);
+  const [todayLeads, setTodayLeads] = useState<Lead[]>([]);
+  const [trend, setTrend] = useState<DailyTrend[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    Promise.all([
+      api.get('/calls/stats').catch(() => null),
+      api.get('/calls?limit=5').catch(() => null),
+      api.get('/billing/usage').catch(() => null),
+      api.get('/leads/today').catch(() => null),
+      api.get('/billing/daily-trend').catch(() => null),
+    ]).then(([statsRes, callsRes, usageRes, leadsRes, trendRes]) => {
+      if (statsRes) setStats(statsRes.data.stats);
+      if (callsRes) setRecentCalls(callsRes.data.calls);
+      if (usageRes) setUsage(usageRes.data.usage);
+      if (leadsRes) setTodayLeads(leadsRes.data.leads);
+      if (trendRes) setTrend(trendRes.data.trend);
+    }).finally(() => setLoading(false));
+  }, []);
+
+  if (loading) return <PageLoader />;
+
+  return (
+    <div>
+      <PageHeader title="Genel Bakis" />
+
+      {/* Plan & Usage */}
+      {usage && (
+        <Card className="mb-6">
+          <CardHeader className="pb-2">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                <GaugeIcon className="size-5 text-muted-foreground" />
+                <CardTitle className="text-base">Kullanim</CardTitle>
+              </div>
+              <span className="text-xs text-muted-foreground">
+                {new Date(usage.period_start).toLocaleDateString('tr-TR')} — {new Date(usage.period_end).toLocaleDateString('tr-TR')}
+              </span>
+            </div>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            {usage.included_wa_chats > 0 && (
+              <UsageBar label="WhatsApp Sohbet" used={usage.wa_used_chats} quota={usage.included_wa_chats} unit="sohbet" />
+            )}
+            {usage.included_inbound_minutes > 0 && (
+              <UsageBar label="Gelen Arama (dakika)" used={usage.inbound_used_minutes} quota={usage.included_inbound_minutes} unit="dk" />
+            )}
+            {usage.included_inbound_calls > 0 && (
+              <UsageBar label="Gelen Arama (adet)" used={usage.inbound_used_calls} quota={usage.included_inbound_calls} unit="adet" />
+            )}
+            {/* Legacy combined quota fallback */}
+            {usage.total_quota > 0 && !usage.included_inbound_minutes && !usage.included_inbound_calls && (
+              <UsageBar
+                label="Toplam Arama"
+                used={usage.used_minutes}
+                quota={usage.total_quota}
+                unit="dk"
+                extra={usage.extra_minutes > 0 ? `(${usage.included_minutes} + ${usage.extra_minutes} ek)` : undefined}
+              />
+            )}
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Inbound Call Stats */}
+      <h3 className="text-sm font-medium text-muted-foreground mb-3">Gelen Aramalar</h3>
+      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
+        <StatCard label="Toplam" value={stats?.inbound ?? 0} icon={<PhoneIncomingIcon className="size-5 text-sky-500" />} />
+        <StatCard label="Tamamlanan" value={stats?.completed ?? 0} icon={<CheckCircleIcon className="size-5 text-emerald-500" />} />
+        <StatCard label="Cevaplanmayan" value={stats?.no_answer ?? 0} icon={<PhoneMissedIcon className="size-5 text-amber-500" />} />
+        <StatCard label="Ort. Sure" value={`${Math.round(stats?.avg_duration ?? 0)}s`} icon={<ClockIcon className="size-5" />} />
+      </div>
+
+      {/* WhatsApp Usage */}
+      {usage && (usage.wa_total_messages > 0 || usage.wa_total_sessions > 0) && (
+        <>
+          <h3 className="text-sm font-medium text-muted-foreground mb-3">WhatsApp</h3>
+          <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
+            <StatCard label="Sohbet" value={usage.wa_billable_chats} icon={<UsersIcon className="size-5 text-emerald-500" />} />
+            <StatCard label="AI Oturum" value={usage.wa_total_sessions} icon={<BotIcon className="size-5 text-sky-500" />} />
+            <StatCard label="Toplam Mesaj" value={usage.wa_total_messages} icon={<MessageSquareIcon className="size-5" />} />
+            <StatCard label="AI Mesaj" value={usage.wa_ai_messages} icon={<BotIcon className="size-5 text-violet-500" />} />
+            {usage.wa_stt_count > 0 && (
+              <StatCard label="Ses Transkripsiyon" value={`${usage.wa_stt_count} (${Math.ceil(usage.wa_stt_seconds)}s)`} icon={<MicIcon className="size-5 text-amber-500" />} />
+            )}
+          </div>
+        </>
+      )}
+
+      {/* Daily Trend Charts */}
+      {trend.length > 1 && (
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
+          <Card>
+            <CardHeader className="pb-2">
+              <CardTitle className="text-sm">Gunluk Gelen Aramalar</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <ResponsiveContainer width="100%" height={220}>
+                <BarChart data={trend}>
+                  <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
+                  <XAxis dataKey="date" tick={{ fontSize: 10 }} tickFormatter={d => d.slice(5)} />
+                  <YAxis tick={{ fontSize: 10 }} allowDecimals={false} />
+                  <Tooltip
+                    labelFormatter={d => new Date(d).toLocaleDateString('tr-TR')}
+                    contentStyle={{ fontSize: 12 }}
+                  />
+                  <Bar dataKey="inbound_calls" name="Arama" fill="#3b82f6" radius={[3, 3, 0, 0]} />
+                </BarChart>
+              </ResponsiveContainer>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader className="pb-2">
+              <CardTitle className="text-sm">Gunluk WhatsApp AI Mesajlari</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <ResponsiveContainer width="100%" height={220}>
+                <AreaChart data={trend}>
+                  <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
+                  <XAxis dataKey="date" tick={{ fontSize: 10 }} tickFormatter={d => d.slice(5)} />
+                  <YAxis tick={{ fontSize: 10 }} allowDecimals={false} />
+                  <Tooltip
+                    labelFormatter={d => new Date(d).toLocaleDateString('tr-TR')}
+                    contentStyle={{ fontSize: 12 }}
+                  />
+                  <Area dataKey="wa_messages" name="AI Mesaj" fill="#10b981" stroke="#059669" fillOpacity={0.3} />
+                </AreaChart>
+              </ResponsiveContainer>
+            </CardContent>
+          </Card>
+        </div>
+      )}
+
+      <Card className="mb-6">
+        <CardHeader>
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <ContactIcon className="size-5 text-muted-foreground" />
+              <CardTitle>Son 24 Saat Leadleri</CardTitle>
+            </div>
+            <div className="flex items-center gap-2">
+              <Badge variant="outline" className="text-xs">{todayLeads.length} lead</Badge>
+              <Link to="/leads" className="text-sm text-muted-foreground hover:underline">Tumunu Gor</Link>
+            </div>
+          </div>
+        </CardHeader>
+        <CardContent className="px-0">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead className="pl-6">Ad</TableHead>
+                <TableHead>Telefon</TableHead>
+                <TableHead>Hizmet</TableHead>
+                <TableHead>Kanal</TableHead>
+                <TableHead>Durum</TableHead>
+                <TableHead>Kategori</TableHead>
+                <TableHead className="pr-6">Ilk Mesaj</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {todayLeads.map(lead => (
+                <TableRow
+                  key={lead._id}
+                  className="cursor-pointer hover:bg-muted/50"
+                  onClick={() => navigate(`/leads/${lead._id}`)}
+                >
+                  <TableCell className="pl-6 font-medium">
+                    {lead.name || '-'}
+                  </TableCell>
+                  <TableCell className="text-muted-foreground">{lead.phone}</TableCell>
+                  <TableCell className="text-muted-foreground max-w-[150px] truncate">{lead.service_of_interest || '-'}</TableCell>
+                  <TableCell><ChannelBadge channel={lead.channel} /></TableCell>
+                  <TableCell><LeadStatusBadge status={lead.lead_status} /></TableCell>
+                  <TableCell>
+                    <div className="flex gap-1 flex-wrap">
+                      {lead.categories?.map(cat => (
+                        <CategoryBadge key={cat} category={cat} />
+                      ))}
+                      {(!lead.categories || lead.categories.length === 0) && <span className="text-muted-foreground">-</span>}
+                    </div>
+                  </TableCell>
+                  <TableCell className="text-muted-foreground whitespace-nowrap pr-6">
+                    {new Date(lead.createdAt).toLocaleTimeString('tr-TR', { hour: '2-digit', minute: '2-digit' })}
+                  </TableCell>
+                </TableRow>
+              ))}
+              {todayLeads.length === 0 && (
+                <TableRow>
+                  <TableCell colSpan={7}>
+                    <EmptyState message="Son 24 saatte lead yok" />
+                  </TableCell>
+                </TableRow>
+              )}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Son Aramalar</CardTitle>
+        </CardHeader>
+        <CardContent className="px-0">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead className="pl-6">Arayan</TableHead>
+                <TableHead>Yon</TableHead>
+                <TableHead>Durum</TableHead>
+                <TableHead>Sure</TableHead>
+                <TableHead className="pr-6">Tarih</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {recentCalls.map(call => (
+                <TableRow key={call._id}>
+                  <TableCell className="pl-6">
+                    <Link to={`/calls/${call._id}`} className="font-medium 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 className="text-muted-foreground pr-6">{new Date(call.createdAt).toLocaleString('tr-TR')}</TableCell>
+                </TableRow>
+              ))}
+              {recentCalls.length === 0 && (
+                <TableRow>
+                  <TableCell colSpan={5}>
+                    <EmptyState message="Henuz arama yok" />
+                  </TableCell>
+                </TableRow>
+              )}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+function UsageBar({ label, used, quota, unit, extra }: {
+  label: string;
+  used: number;
+  quota: number;
+  unit: string;
+  extra?: string;
+}) {
+  const pct = quota > 0 ? Math.min(100, Math.round((used / quota) * 100)) : 0;
+  const overage = Math.max(0, used - quota);
+  return (
+    <div className="space-y-1">
+      <div className="flex items-center justify-between text-sm">
+        <span className="font-medium">{label}</span>
+        <span className="text-muted-foreground">
+          {used} / {quota} {unit}
+          {extra && <span className="text-xs ml-1">{extra}</span>}
+        </span>
+      </div>
+      <Progress
+        value={pct}
+        className={pct > 90 ? '[&>div]:bg-destructive' : pct > 75 ? '[&>div]:bg-amber-500' : ''}
+      />
+      <div className="flex justify-between text-xs text-muted-foreground">
+        {overage > 0 ? (
+          <span className="text-destructive font-medium">Limit asimi: {overage} {unit}</span>
+        ) : (
+          <span>Kalan: {quota - used} {unit}</span>
+        )}
+        <span>%{pct}</span>
+      </div>
+    </div>
+  );
+}

package/web/src/pages/InboundSchedule.tsx

@@ -0,0 +1,246 @@
+import { useEffect, useState } from 'react';
+import api from '@/lib/api';
+import { PageHeader } from '@/components/page-header';
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Label } from '@/components/ui/label';
+import { Loader2Icon, PhoneIcon, ClockIcon, PowerIcon } from 'lucide-react';
+import { toast } from 'sonner';
+import { PageLoader } from '@/components/page-loader';
+import { EmptyState } from '@/components/empty-state';
+
+interface ShiftEntry {
+  day: number;
+  start: string;
+  end: string;
+}
+
+interface InboundCallConfig {
+  _id: string;
+  phone_number: string;
+  label: string;
+  elevenlabs_agent_id: string;
+  schedule_enabled: boolean;
+  schedule: ShiftEntry[];
+  agent_assigned: boolean;
+}
+
+// Generate 15-minute interval time options: 00:00, 00:15, ..., 23:45
+const TIME_OPTIONS: string[] = [];
+for (let h = 0; h < 24; h++) {
+  for (let m = 0; m < 60; m += 15) {
+    TIME_OPTIONS.push(`${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`);
+  }
+}
+
+const DAYS = [
+  { day: 1, label: 'Pzt' },
+  { day: 2, label: 'Sal' },
+  { day: 3, label: 'Car' },
+  { day: 4, label: 'Per' },
+  { day: 5, label: 'Cum' },
+  { day: 6, label: 'Cmt' },
+  { day: 0, label: 'Paz' },
+];
+
+export default function InboundSchedule() {
+  const [configs, setConfigs] = useState<InboundCallConfig[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  async function fetchConfigs() {
+    try {
+      const res = await api.get('/inbound-call/configs');
+      setConfigs(res.data.configs);
+    } catch {
+      toast.error('Yapilandirmalar yuklenemedi');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  useEffect(() => { fetchConfigs(); }, []);
+
+  if (loading) return <PageLoader />;
+
+  return (
+    <div>
+      <PageHeader title="Gelen Arama Programi" />
+
+      {configs.length === 0 ? (
+        <EmptyState
+          icon={<PhoneIcon className="size-8" />}
+          title="Henuz telefon numarasi atanmadi"
+          description="Sistem yoneticisi tarafindan bir telefon numarasi atanmasi gerekiyor."
+        />
+      ) : (
+        <div className="space-y-6">
+          {configs.map(config => (
+            <ConfigCard
+              key={config._id}
+              config={config}
+              onUpdate={fetchConfigs}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function ConfigCard({ config, onUpdate }: { config: InboundCallConfig; onUpdate: () => void }) {
+  const [scheduleEnabled, setScheduleEnabled] = useState(config.schedule_enabled);
+  const [schedule, setSchedule] = useState<ShiftEntry[]>(config.schedule);
+  const [saving, setSaving] = useState(false);
+  const [toggling, setToggling] = useState(false);
+
+  function toggleDay(day: number) {
+    setSchedule(prev => {
+      const exists = prev.find(e => e.day === day);
+      if (exists) return prev.filter(e => e.day !== day);
+      return [...prev, { day, start: '09:00', end: '18:00' }].sort((a, b) => a.day - b.day);
+    });
+  }
+
+  function updateDayTime(day: number, field: 'start' | 'end', value: string) {
+    setSchedule(prev =>
+      prev.map(e => e.day === day ? { ...e, [field]: value } : e)
+    );
+  }
+
+  async function handleSave() {
+    setSaving(true);
+    try {
+      await api.put(`/inbound-call/configs/${config._id}/schedule`, {
+        schedule_enabled: scheduleEnabled,
+        schedule,
+      });
+      toast.success('Program kaydedildi');
+      onUpdate();
+    } catch (err: any) {
+      toast.error(err.response?.data?.error || 'Hata');
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  async function handleToggle(assign: boolean) {
+    setToggling(true);
+    try {
+      await api.post(`/inbound-call/configs/${config._id}/toggle-now`, { assign });
+      toast.success(assign ? 'Agent atandi' : 'Agent kaldirildi');
+      onUpdate();
+    } catch (err: any) {
+      toast.error(err.response?.data?.error || 'Hata');
+    } finally {
+      setToggling(false);
+    }
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <div>
+            <CardTitle className="text-base flex items-center gap-2">
+              <PhoneIcon className="size-4" />
+              {config.phone_number}
+              {config.label && (
+                <span className="text-muted-foreground font-normal">({config.label})</span>
+              )}
+            </CardTitle>
+            <CardDescription className="mt-1">
+              Agent ID: {config.elevenlabs_agent_id}
+            </CardDescription>
+          </div>
+          <div className="flex items-center gap-2">
+            {config.agent_assigned ? (
+              <Badge className="bg-green-100 text-green-800">Agent Aktif</Badge>
+            ) : (
+              <Badge variant="secondary">Agent Devre Disi</Badge>
+            )}
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => handleToggle(!config.agent_assigned)}
+              disabled={toggling}
+            >
+              {toggling ? (
+                <Loader2Icon className="size-4 animate-spin" />
+              ) : (
+                <>
+                  <PowerIcon className="size-4 mr-1" />
+                  {config.agent_assigned ? 'Simdi Kapat' : 'Simdi Ac'}
+                </>
+              )}
+            </Button>
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {/* Schedule Toggle */}
+        <div className="flex items-center gap-2">
+          <Checkbox
+            id={`schedule-${config._id}`}
+            checked={scheduleEnabled}
+            onCheckedChange={(checked) => setScheduleEnabled(!!checked)}
+          />
+          <Label htmlFor={`schedule-${config._id}`} className="text-sm">
+            Otomatik programi etkinlestir
+          </Label>
+        </div>
+
+        {/* Schedule Editor */}
+        {scheduleEnabled && (
+          <div className="space-y-2 pl-0 sm:pl-6">
+            <div className="flex items-center gap-2 text-xs text-muted-foreground">
+              <ClockIcon className="size-3" />
+              Bu saatlerde agent aramalari yanitlamaz (Europe/Istanbul)
+            </div>
+            {DAYS.map(({ day, label }) => {
+              const entry = schedule.find(e => e.day === day);
+              return (
+                <div key={day} className="flex flex-wrap items-center gap-2">
+                  <Button
+                    variant={entry ? 'default' : 'outline'}
+                    size="sm"
+                    className="h-8 w-14 text-xs justify-center shrink-0"
+                    onClick={() => toggleDay(day)}
+                  >
+                    {label}
+                  </Button>
+                  {entry ? (
+                    <div className="flex items-center gap-2">
+                      <select
+                        value={entry.start}
+                        onChange={(e) => updateDayTime(day, 'start', e.target.value)}
+                        className="h-8 w-[90px] rounded-md border border-input bg-background px-2 text-xs"
+                      >
+                        {TIME_OPTIONS.map(t => <option key={t} value={t}>{t}</option>)}
+                      </select>
+                      <span className="text-xs text-muted-foreground">-</span>
+                      <select
+                        value={entry.end}
+                        onChange={(e) => updateDayTime(day, 'end', e.target.value)}
+                        className="h-8 w-[90px] rounded-md border border-input bg-background px-2 text-xs"
+                      >
+                        {TIME_OPTIONS.map(t => <option key={t} value={t}>{t}</option>)}
+                      </select>
+                    </div>
+                  ) : (
+                    <span className="text-xs text-muted-foreground">Kisitlama yok — Agent yanitlar</span>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        )}
+
+        <Button size="sm" onClick={handleSave} disabled={saving}>
+          {saving ? <Loader2Icon className="size-4 animate-spin" /> : 'Kaydet'}
+        </Button>
+      </CardContent>
+    </Card>
+  );
+}