elevenlabs-webhook-nodejs 1.0.0

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

@@ -0,0 +1,339 @@
+import { useEffect, useState } from 'react';
+import { useSearchParams, useNavigate } from 'react-router-dom';
+import api from '../../lib/api';
+import type { Lead } from '../../types';
+import { PageHeader } from '@/components/page-header';
+import { StatCard } from '@/components/stat-card';
+import { Pagination } from '@/components/pagination';
+import { ChannelBadge, LeadStatusBadge, CategoryBadge, LEAD_STATUS_OPTIONS } from '@/components/status-badge';
+import { EmptyState } from '@/components/empty-state';
+import { TableLoader } from '@/components/page-loader';
+import { Card, CardContent } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  ContactIcon,
+  CalendarIcon,
+  PhoneIcon,
+  MessageSquareIcon,
+  CheckCircleIcon,
+  XIcon,
+  DownloadIcon,
+} from 'lucide-react';
+import { toast } from 'sonner';
+
+interface AdminLead extends Lead {
+  tenant_name: string;
+}
+
+interface LeadStats {
+  total: number;
+  new: number;
+  contacted: number;
+  appointment_scheduled: number;
+  completed: number;
+  lost: number;
+  phone: number;
+  whatsapp: number;
+}
+
+export default function AdminLeads() {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const navigate = useNavigate();
+  const [leads, setLeads] = useState<AdminLead[]>([]);
+  const [total, setTotal] = useState(0);
+  const [totalPages, setTotalPages] = useState(0);
+  const [loading, setLoading] = useState(true);
+  const [stats, setStats] = useState<LeadStats | null>(null);
+  const [tenants, setTenants] = useState<{ _id: string; name: string }[]>([]);
+
+  const page = parseInt(searchParams.get('page') || '1');
+  const leadStatus = searchParams.get('lead_status') || '';
+  const channel = searchParams.get('channel') || '';
+  const category = searchParams.get('category') || '';
+  const tenantId = searchParams.get('tenant_id') || '';
+  const dateFrom = searchParams.get('date_from') || '';
+  const dateTo = searchParams.get('date_to') || '';
+
+  useEffect(() => {
+    api.get('/admin/leads/stats').then(({ data }) => setStats(data.stats)).catch(() => {});
+    api.get('/admin/tenants?limit=100').then(({ data }) => setTenants(data.tenants)).catch(() => {});
+  }, []);
+
+  useEffect(() => {
+    setLoading(true);
+    const params = new URLSearchParams();
+    params.set('page', String(page));
+    params.set('limit', '30');
+    if (leadStatus) params.set('lead_status', leadStatus);
+    if (channel) params.set('channel', channel);
+    if (category) params.set('category', category);
+    if (tenantId) params.set('tenant_id', tenantId);
+    if (dateFrom) params.set('date_from', dateFrom);
+    if (dateTo) params.set('date_to', dateTo);
+
+    api.get(`/admin/leads?${params}`)
+      .then(({ data }) => {
+        setLeads(data.leads);
+        setTotal(data.total);
+        setTotalPages(data.totalPages);
+      })
+      .finally(() => setLoading(false));
+  }, [page, leadStatus, channel, category, tenantId, dateFrom, dateTo]);
+
+  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);
+  }
+
+  async function exportCsv() {
+    try {
+      const params = new URLSearchParams();
+      if (leadStatus) params.set('lead_status', leadStatus);
+      if (channel) params.set('channel', channel);
+      if (category) params.set('category', category);
+      if (tenantId) params.set('tenant_id', tenantId);
+      if (dateFrom) params.set('date_from', dateFrom);
+      if (dateTo) params.set('date_to', dateTo);
+
+      // Fetch all leads (up to 5000) for CSV
+      params.set('limit', '5000');
+      const { data } = await api.get(`/admin/leads?${params}`);
+      const allLeads: AdminLead[] = data.leads;
+
+      const STATUS_LABELS: Record<string, string> = {
+        new: 'Yeni', contacted: 'Iletisime Gecildi', appointment_scheduled: 'Randevu Alindi',
+        completed: 'Tamamlandi', lost: 'Kayip', expired: 'Suresi Doldu'
+      };
+      const CATEGORY_LABELS: Record<string, string> = {
+        callback_required: 'Geri Arama', appointment_inquiry: 'Randevu', other: 'Diger'
+      };
+      const CHANNEL_LABELS: Record<string, string> = { phone: 'Telefon', whatsapp: 'WhatsApp' };
+
+      function csvEscape(val: string | null | undefined): string {
+        if (!val) return '';
+        if (val.includes('"') || val.includes(',') || val.includes('\n')) {
+          return `"${val.replace(/"/g, '""')}"`;
+        }
+        return val;
+      }
+
+      const header = 'Tenant,Ad,Telefon,Hizmet,Kanal,Durum,Kategori,Ozet,Tarih';
+      const rows = allLeads.map(l => [
+        csvEscape(l.tenant_name),
+        csvEscape(l.name),
+        csvEscape(l.phone),
+        csvEscape(l.service_of_interest),
+        CHANNEL_LABELS[l.channel] || l.channel,
+        STATUS_LABELS[l.lead_status] || l.lead_status,
+        (l.categories || []).map(c => CATEGORY_LABELS[c] || c).join('; '),
+        csvEscape(l.summary),
+        new Date(l.createdAt).toLocaleString('tr-TR')
+      ].join(','));
+
+      const csv = '\uFEFF' + header + '\n' + rows.join('\n');
+      const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = `tum-leadler-${new Date().toISOString().slice(0, 10)}.csv`;
+      a.click();
+      URL.revokeObjectURL(url);
+    } catch {
+      toast.error('CSV indirilemedi');
+    }
+  }
+
+  return (
+    <div>
+      <PageHeader title="Tum Leadler (Admin)">
+        <div className="flex items-center gap-2">
+          <Badge variant="outline" className="text-xs">{total} lead</Badge>
+          <Button variant="outline" size="sm" onClick={exportCsv}>
+            <DownloadIcon className="size-4 mr-1.5" />
+            CSV
+          </Button>
+        </div>
+      </PageHeader>
+
+      {/* Stats */}
+      {stats && (
+        <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 mb-6">
+          <StatCard label="Toplam" value={stats.total} icon={<ContactIcon className="size-5" />} />
+          <StatCard label="Yeni" value={stats.new} icon={<ContactIcon className="size-5 text-sky-500" />} />
+          <StatCard label="Randevu" value={stats.appointment_scheduled} icon={<CheckCircleIcon className="size-5 text-emerald-500" />} />
+          <StatCard label="Kayip" value={stats.lost} icon={<XIcon className="size-5 text-destructive" />} />
+          <StatCard label="Telefon" value={stats.phone} icon={<PhoneIcon className="size-5 text-violet-500" />} />
+          <StatCard label="WhatsApp" value={stats.whatsapp} icon={<MessageSquareIcon className="size-5 text-emerald-500" />} />
+        </div>
+      )}
+
+      {/* Filters */}
+      <div className="flex flex-wrap gap-3 mb-4">
+        <Select value={tenantId || 'all'} onValueChange={v => setFilter('tenant_id', v)}>
+          <SelectTrigger className="w-48">
+            <SelectValue placeholder="Tum Tenantlar" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">Tum Tenantlar</SelectItem>
+            {tenants.map(t => (
+              <SelectItem key={t._id} value={t._id}>{t.name}</SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+
+        <Select value={leadStatus || 'all'} onValueChange={v => setFilter('lead_status', v)}>
+          <SelectTrigger className="w-44">
+            <SelectValue placeholder="Tum Durumlar" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">Tum Durumlar</SelectItem>
+            {LEAD_STATUS_OPTIONS.map(o => (
+              <SelectItem key={o.value} value={o.value}>{o.label}</SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+
+        <Select value={channel || 'all'} onValueChange={v => setFilter('channel', v)}>
+          <SelectTrigger className="w-36">
+            <SelectValue placeholder="Kanal" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">Tum Kanallar</SelectItem>
+            <SelectItem value="phone">Telefon</SelectItem>
+            <SelectItem value="whatsapp">WhatsApp</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 className="flex items-center gap-2">
+          <CalendarIcon className="size-4 text-muted-foreground" />
+          <input
+            type="date"
+            value={dateFrom}
+            onChange={e => setFilter('date_from', e.target.value)}
+            className="h-9 rounded-md border border-input bg-background px-3 text-sm"
+          />
+          <span className="text-muted-foreground text-sm">-</span>
+          <input
+            type="date"
+            value={dateTo}
+            onChange={e => setFilter('date_to', e.target.value)}
+            className="h-9 rounded-md border border-input bg-background px-3 text-sm"
+          />
+        </div>
+
+
+      </div>
+
+      {/* Table */}
+      <Card>
+        <CardContent className="px-0 py-0">
+          {loading ? (
+            <TableLoader rows={10} cols={9} />
+          ) : (
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead className="pl-6">Tenant</TableHead>
+                  <TableHead>Ad</TableHead>
+                  <TableHead>Telefon</TableHead>
+                  <TableHead>Hizmet</TableHead>
+                  <TableHead>Kanal</TableHead>
+                  <TableHead>Durum</TableHead>
+                  <TableHead>Kategori</TableHead>
+                  <TableHead>Ozet</TableHead>
+                  <TableHead className="pr-6">Tarih</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {leads.map(lead => (
+                  <TableRow
+                    key={lead._id}
+                    className="cursor-pointer hover:bg-muted/50"
+                    onClick={() => navigate(`/leads/${lead._id}`)}
+                  >
+                    <TableCell className="pl-6">
+                      <Badge
+                        variant="outline"
+                        className="text-[10px] cursor-pointer hover:bg-accent"
+                        onClick={e => {
+                          e.stopPropagation();
+                          setFilter('tenant_id', String(lead.tenant_id));
+                        }}
+                      >
+                        {lead.tenant_name}
+                      </Badge>
+                    </TableCell>
+                    <TableCell className="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 max-w-xs truncate">
+                      {lead.summary || '-'}
+                    </TableCell>
+                    <TableCell className="text-muted-foreground whitespace-nowrap pr-6">
+                      {new Date(lead.createdAt).toLocaleString('tr-TR')}
+                    </TableCell>
+                  </TableRow>
+                ))}
+                {leads.length === 0 && (
+                  <TableRow>
+                    <TableCell colSpan={9}>
+                      <EmptyState message="Lead bulunamadi" />
+                    </TableCell>
+                  </TableRow>
+                )}
+              </TableBody>
+            </Table>
+          )}
+        </CardContent>
+      </Card>
+
+      <Pagination page={page} totalPages={totalPages} onPageChange={p => setFilter('page', String(p))} />
+    </div>
+  );
+}

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

@@ -0,0 +1,283 @@
+import { useEffect, useState, useCallback } from 'react';
+import api from '@/lib/api';
+import { PageHeader } from '@/components/page-header';
+import { Card, CardContent } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Badge } from '@/components/ui/badge';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { toast } from 'sonner';
+import {
+  Loader2Icon,
+  RefreshCwIcon,
+  SearchIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  AlertTriangleIcon,
+  XCircleIcon,
+  InfoIcon,
+} from 'lucide-react';
+
+interface LogEntry {
+  _id: string;
+  level: string;
+  message: string;
+  meta: Record<string, unknown>;
+  service: string;
+  timestamp: string;
+}
+
+interface Pagination {
+  page: number;
+  limit: number;
+  total: number;
+  pages: number;
+}
+
+interface Stats {
+  info: number;
+  warn: number;
+  error: number;
+  total: number;
+}
+
+const LEVEL_CONFIG: Record<string, { color: string; icon: typeof InfoIcon; badge: string }> = {
+  info: { color: 'text-blue-600', icon: InfoIcon, badge: 'default' },
+  warn: { color: 'text-yellow-600', icon: AlertTriangleIcon, badge: 'warning' },
+  error: { color: 'text-red-600', icon: XCircleIcon, badge: 'destructive' },
+};
+
+function formatTime(iso: string): string {
+  const d = new Date(iso);
+  return d.toLocaleTimeString('tr-TR', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
+}
+
+function formatDate(iso: string): string {
+  const d = new Date(iso);
+  return d.toLocaleDateString('tr-TR', { day: '2-digit', month: '2-digit' });
+}
+
+function MetaValue({ value }: { value: unknown }) {
+  if (value === null || value === undefined) return null;
+  if (typeof value === 'object') {
+    return <span className="text-muted-foreground">{JSON.stringify(value)}</span>;
+  }
+  return <span>{String(value)}</span>;
+}
+
+export default function AdminLogs() {
+  const [logs, setLogs] = useState<LogEntry[]>([]);
+  const [pagination, setPagination] = useState<Pagination>({ page: 1, limit: 100, total: 0, pages: 0 });
+  const [stats, setStats] = useState<Stats>({ info: 0, warn: 0, error: 0, total: 0 });
+  const [loading, setLoading] = useState(true);
+  const [level, setLevel] = useState('all');
+  const [search, setSearch] = useState('');
+  const [searchInput, setSearchInput] = useState('');
+  const [expandedId, setExpandedId] = useState<string | null>(null);
+  const [autoRefresh, setAutoRefresh] = useState(false);
+
+  const loadLogs = useCallback(async (page = 1) => {
+    try {
+      const params = new URLSearchParams({ page: String(page), limit: '100' });
+      if (level !== 'all') params.set('level', level);
+      if (search) params.set('search', search);
+
+      const [logsRes, statsRes] = await Promise.all([
+        api.get(`/admin/logs?${params}`),
+        api.get('/admin/logs/stats'),
+      ]);
+
+      setLogs(logsRes.data.logs);
+      setPagination(logsRes.data.pagination);
+      setStats(statsRes.data);
+    } catch {
+      toast.error('Loglar yuklenemedi');
+    } finally {
+      setLoading(false);
+    }
+  }, [level, search]);
+
+  useEffect(() => {
+    setLoading(true);
+    loadLogs(1);
+  }, [loadLogs]);
+
+  useEffect(() => {
+    if (!autoRefresh) return;
+    const interval = setInterval(() => loadLogs(pagination.page), 5000);
+    return () => clearInterval(interval);
+  }, [autoRefresh, pagination.page, loadLogs]);
+
+  function handleSearch(e: React.FormEvent) {
+    e.preventDefault();
+    setSearch(searchInput);
+  }
+
+  return (
+    <div className="space-y-4">
+      <PageHeader title="Sistem Loglari" description="Son 30 gun (otomatik temizlenir)" />
+
+      {/* Stats */}
+      <div className="grid grid-cols-4 gap-3">
+        <Card className="cursor-pointer" onClick={() => setLevel('all')}>
+          <CardContent className="p-3 text-center">
+            <div className="text-2xl font-bold">{stats.total}</div>
+            <div className="text-[11px] text-muted-foreground">Son 24 Saat</div>
+          </CardContent>
+        </Card>
+        <Card className="cursor-pointer" onClick={() => setLevel('info')}>
+          <CardContent className="p-3 text-center">
+            <div className="text-2xl font-bold text-blue-600">{stats.info}</div>
+            <div className="text-[11px] text-muted-foreground">Info</div>
+          </CardContent>
+        </Card>
+        <Card className="cursor-pointer" onClick={() => setLevel('warn')}>
+          <CardContent className="p-3 text-center">
+            <div className="text-2xl font-bold text-yellow-600">{stats.warn}</div>
+            <div className="text-[11px] text-muted-foreground">Warning</div>
+          </CardContent>
+        </Card>
+        <Card className="cursor-pointer" onClick={() => setLevel('error')}>
+          <CardContent className="p-3 text-center">
+            <div className="text-2xl font-bold text-red-600">{stats.error}</div>
+            <div className="text-[11px] text-muted-foreground">Error</div>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Filters */}
+      <div className="flex items-center gap-2 flex-wrap">
+        <form onSubmit={handleSearch} className="flex items-center gap-2 flex-1 min-w-[200px]">
+          <div className="relative flex-1">
+            <SearchIcon className="absolute left-2.5 top-2.5 size-4 text-muted-foreground" />
+            <Input
+              className="pl-8"
+              placeholder="Mesaj, conversation_id, telefon..."
+              value={searchInput}
+              onChange={e => setSearchInput(e.target.value)}
+            />
+          </div>
+          <Button type="submit" size="sm" variant="outline">Ara</Button>
+        </form>
+        <Select value={level} onValueChange={setLevel}>
+          <SelectTrigger className="w-[120px]">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">Tumu</SelectItem>
+            <SelectItem value="info">Info</SelectItem>
+            <SelectItem value="warn">Warning</SelectItem>
+            <SelectItem value="error">Error</SelectItem>
+          </SelectContent>
+        </Select>
+        <Button
+          size="sm"
+          variant={autoRefresh ? 'default' : 'outline'}
+          onClick={() => setAutoRefresh(!autoRefresh)}
+        >
+          {autoRefresh ? 'Canli' : 'Canli Izle'}
+        </Button>
+        <Button size="sm" variant="outline" onClick={() => loadLogs(pagination.page)} disabled={loading}>
+          <RefreshCwIcon className="size-4" />
+        </Button>
+      </div>
+
+      {/* Log entries */}
+      <Card>
+        <CardContent className="p-0">
+          {loading ? (
+            <div className="flex items-center justify-center py-12">
+              <Loader2Icon className="size-6 animate-spin text-muted-foreground" />
+            </div>
+          ) : logs.length === 0 ? (
+            <div className="text-center py-12 text-muted-foreground text-sm">Log bulunamadi</div>
+          ) : (
+            <div className="divide-y text-xs font-mono">
+              {logs.map(log => {
+                const cfg = LEVEL_CONFIG[log.level] || LEVEL_CONFIG.info;
+                const Icon = cfg.icon;
+                const isExpanded = expandedId === log._id;
+
+                // Extract key meta fields for inline display
+                const { stack, ...displayMeta } = log.meta || {};
+                const inlineKeys = Object.keys(displayMeta).filter(
+                  k => k !== 'service' && k !== 'timestamp' && typeof displayMeta[k] !== 'object',
+                );
+
+                return (
+                  <div
+                    key={log._id}
+                    className="px-3 py-1.5 hover:bg-muted/50 cursor-pointer"
+                    onClick={() => setExpandedId(isExpanded ? null : log._id)}
+                  >
+                    <div className="flex items-start gap-2">
+                      <Icon className={`size-3.5 mt-0.5 shrink-0 ${cfg.color}`} />
+                      <span className="text-muted-foreground shrink-0 w-[70px]">
+                        {formatDate(log.timestamp)} {formatTime(log.timestamp)}
+                      </span>
+                      <span className="font-medium truncate flex-1">{log.message}</span>
+                      {inlineKeys.length > 0 && !isExpanded && (
+                        <span className="text-muted-foreground truncate max-w-[300px]">
+                          {inlineKeys.slice(0, 3).map(k => `${k}=${String(displayMeta[k])}`).join(' ')}
+                          {inlineKeys.length > 3 && ' ...'}
+                        </span>
+                      )}
+                    </div>
+                    {isExpanded && (
+                      <div className="mt-2 ml-5 space-y-1 pb-1">
+                        {Object.entries(displayMeta).map(([key, value]) => (
+                          <div key={key} className="flex gap-2">
+                            <span className="text-muted-foreground shrink-0 w-[140px]">{key}:</span>
+                            <MetaValue value={value} />
+                          </div>
+                        ))}
+                        {stack && (
+                          <pre className="mt-2 text-red-500 whitespace-pre-wrap text-[10px] bg-red-50 dark:bg-red-950/20 rounded p-2">
+                            {String(stack)}
+                          </pre>
+                        )}
+                      </div>
+                    )}
+                  </div>
+                );
+              })}
+            </div>
+          )}
+
+          {/* Pagination */}
+          {pagination.pages > 1 && (
+            <div className="flex items-center justify-between px-3 py-2 border-t text-xs text-muted-foreground">
+              <span>
+                {pagination.total} log, sayfa {pagination.page}/{pagination.pages}
+              </span>
+              <div className="flex gap-1">
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  disabled={pagination.page <= 1}
+                  onClick={() => loadLogs(pagination.page - 1)}
+                >
+                  <ChevronLeftIcon className="size-4" />
+                </Button>
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  disabled={pagination.page >= pagination.pages}
+                  onClick={() => loadLogs(pagination.page + 1)}
+                >
+                  <ChevronRightIcon className="size-4" />
+                </Button>
+              </div>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}