elevenlabs-webhook-nodejs 1.0.0

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

@@ -0,0 +1,520 @@
+import { useEffect, useState } from 'react';
+import { PageHeader } from '@/components/page-header';
+import { PageLoader } from '@/components/page-loader';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { StatCard } from '@/components/stat-card';
+import {
+  StarIcon,
+  UserIcon,
+  BarChart3Icon,
+  SkipForwardIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  ChevronDownIcon,
+  PhoneIcon,
+  ClockIcon,
+  BotIcon,
+  PlayIcon,
+  PauseIcon,
+  Loader2Icon,
+  Volume2Icon,
+} from 'lucide-react';
+import api from '../../lib/api';
+
+// Inline audio player for expanded evaluation detail
+function InlineAudioPlayer({ conversationId }: { conversationId: string }) {
+  const [state, setState] = useState<'idle' | 'loading' | 'ready' | 'playing' | 'error'>('idle');
+  const [audio, setAudio] = useState<HTMLAudioElement | null>(null);
+  const [progress, setProgress] = useState(0);
+  const [currentTime, setCurrentTime] = useState(0);
+  const [duration, setDuration] = useState(0);
+
+  const load = async () => {
+    setState('loading');
+    try {
+      const { data } = await api.get(
+        `/admin/elevenlabs/conversations/${conversationId}/audio`,
+        { responseType: 'arraybuffer' }
+      );
+      const blob = new Blob([data], { type: 'audio/mpeg' });
+      const url = URL.createObjectURL(blob);
+      const el = new Audio(url);
+
+      el.addEventListener('canplay', () => setState('ready'));
+      el.addEventListener('timeupdate', () => {
+        setCurrentTime(el.currentTime);
+        setDuration(el.duration && isFinite(el.duration) ? el.duration : 0);
+        setProgress(el.duration ? (el.currentTime / el.duration) * 100 : 0);
+      });
+      el.addEventListener('ended', () => setState('ready'));
+      el.addEventListener('play', () => setState('playing'));
+      el.addEventListener('pause', () => { if (el.currentTime < el.duration) setState('ready'); });
+      el.addEventListener('error', () => setState('error'));
+
+      // Fallback
+      setTimeout(() => { if (el.readyState >= 2) setState('ready'); }, 2000);
+
+      setAudio(el);
+      el.play().catch(() => setState('ready'));
+    } catch {
+      setState('error');
+    }
+  };
+
+  const toggle = () => {
+    if (!audio) return;
+    if (audio.paused) { audio.play(); } else { audio.pause(); }
+  };
+
+  const seek = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (!audio || !duration) return;
+    const rect = e.currentTarget.getBoundingClientRect();
+    const pct = (e.clientX - rect.left) / rect.width;
+    audio.currentTime = pct * duration;
+  };
+
+  const fmt = (s: number) => {
+    const m = Math.floor(s / 60);
+    const sec = Math.floor(s % 60);
+    return `${m}:${sec.toString().padStart(2, '0')}`;
+  };
+
+  if (state === 'idle') {
+    return (
+      <Button variant="outline" size="sm" className="gap-1.5 text-xs" onClick={load}>
+        <Volume2Icon className="size-3.5" />
+        Sesi Dinle
+      </Button>
+    );
+  }
+
+  if (state === 'loading') {
+    return (
+      <div className="flex items-center gap-2 text-xs text-muted-foreground">
+        <Loader2Icon className="size-3.5 animate-spin" />
+        Yukleniyor...
+      </div>
+    );
+  }
+
+  if (state === 'error') {
+    return <span className="text-xs text-red-400">Ses yuklenemedi</span>;
+  }
+
+  return (
+    <div className="flex items-center gap-2 w-full">
+      <button onClick={toggle} className="size-7 rounded-full bg-muted hover:bg-muted/80 flex items-center justify-center shrink-0">
+        {state === 'playing' ? <PauseIcon className="size-3" /> : <PlayIcon className="size-3 ml-0.5" />}
+      </button>
+      <div className="relative flex-1 h-5 flex items-center cursor-pointer" onClick={seek}>
+        <div className="absolute inset-x-0 h-1 rounded-full bg-muted" />
+        <div className="absolute left-0 h-1 rounded-full bg-foreground/40" style={{ width: `${progress}%` }} />
+      </div>
+      <span className="text-[10px] text-muted-foreground font-mono shrink-0">
+        {fmt(currentTime)}/{fmt(duration)}
+      </span>
+    </div>
+  );
+}
+
+interface Evaluation {
+  _id: string;
+  conversation_id: string;
+  evaluator_id: string;
+  evaluator_name: string;
+  skipped: boolean;
+  patient_audio_quality: number | null;
+  ai_comprehension: number | null;
+  ai_speech_quality: number | null;
+  ai_content_quality: number | null;
+  no_unnecessary_content: number | null;
+  patient_reached_goal: number | null;
+  overall_score: number;
+  notes: string;
+  createdAt: string;
+  // Enriched fields
+  agentName: string | null;
+  agentId: string | null;
+  callDurationSecs: number;
+  startTimeUnixSecs: number;
+  externalNumber: string | null;
+  cost: number | null;
+  callSuccessful: string | null;
+  transcriptSummary: string | null;
+}
+
+interface Stats {
+  total: number;
+  avg_score: number;
+  avg_patient_audio: number;
+  avg_ai_comprehension: number;
+  avg_ai_speech: number;
+  avg_ai_content: number;
+  avg_no_unnecessary: number;
+  avg_patient_goal: number;
+}
+
+interface EvaluatorStat {
+  _id: string;
+  name: string;
+  count: number;
+  avg_score: number;
+}
+
+const CRITERIA_LABELS: Record<string, string> = {
+  avg_patient_audio: 'Hasta Ses Kalitesi',
+  avg_ai_comprehension: 'YZ Anlama',
+  avg_ai_speech: 'YZ Konusma',
+  avg_ai_content: 'YZ Icerik Kalitesi',
+  avg_no_unnecessary: 'Gereksiz Icerik Yok',
+  avg_patient_goal: 'Sonuca Ulasma',
+};
+
+const DETAIL_CRITERIA: { key: string; label: string }[] = [
+  { key: 'patient_audio_quality', label: 'Hasta Ses' },
+  { key: 'ai_comprehension', label: 'YZ Anlama' },
+  { key: 'ai_speech_quality', label: 'YZ Konusma' },
+  { key: 'ai_content_quality', label: 'YZ Icerik' },
+  { key: 'no_unnecessary_content', label: 'Gereksiz Yok' },
+  { key: 'patient_reached_goal', label: 'Sonuc' },
+];
+
+function Stars({ value, size = 'sm' }: { value: number; size?: 'sm' | 'md' }) {
+  const s = size === 'md' ? 'size-4' : 'size-3';
+  return (
+    <div className="flex gap-0.5">
+      {[1, 2, 3, 4, 5].map((star) => (
+        <StarIcon
+          key={star}
+          className={`${s} ${
+            star <= Math.round(value)
+              ? 'text-yellow-400 fill-yellow-400'
+              : 'text-gray-300'
+          }`}
+        />
+      ))}
+    </div>
+  );
+}
+
+function ScoreBadge({ score }: { score: number }) {
+  const variant = score >= 4 ? 'default' : score >= 2.5 ? 'secondary' : 'destructive';
+  return (
+    <Badge variant={variant} className="text-sm px-2 py-0.5 font-bold">
+      {score.toFixed(1)}
+    </Badge>
+  );
+}
+
+function formatDuration(secs: number): string {
+  const m = Math.floor(secs / 60);
+  const s = secs % 60;
+  return m > 0 ? `${m}dk ${s}sn` : `${s}sn`;
+}
+
+export default function AdminEvaluationDashboard() {
+  const [loading, setLoading] = useState(true);
+  const [evaluations, setEvaluations] = useState<Evaluation[]>([]);
+  const [total, setTotal] = useState(0);
+  const [page, setPage] = useState(1);
+  const [totalPages, setTotalPages] = useState(1);
+  const [stats, setStats] = useState<Stats | null>(null);
+  const [skippedCount, setSkippedCount] = useState(0);
+  const [evaluatorStats, setEvaluatorStats] = useState<EvaluatorStat[]>([]);
+  const [filter, setFilter] = useState({ skipped: '' as string, evaluator_id: '' });
+  const [expandedId, setExpandedId] = useState<string | null>(null);
+
+  const fetchData = async (p = 1) => {
+    setLoading(true);
+    try {
+      const params = new URLSearchParams();
+      params.set('page', String(p));
+      params.set('limit', '15');
+      if (filter.skipped) params.set('skipped', filter.skipped);
+      if (filter.evaluator_id) params.set('evaluator_id', filter.evaluator_id);
+
+      const { data } = await api.get(`/admin/elevenlabs/evaluations?${params.toString()}`);
+      setEvaluations(data.evaluations);
+      setTotal(data.total);
+      setPage(data.page);
+      setTotalPages(data.totalPages);
+      setStats(data.stats);
+      setSkippedCount(data.skippedCount);
+      setEvaluatorStats(data.evaluatorStats);
+    } catch (err) {
+      console.error('Failed to fetch evaluations', err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchData(1);
+  }, [filter]);
+
+  if (loading && evaluations.length === 0) return <PageLoader />;
+
+  return (
+    <div className="space-y-6">
+      <PageHeader title="Arama Raporlari" badge="Degerlendirme" />
+
+      {/* Stats Cards */}
+      {stats && (
+        <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
+          <StatCard
+            title="Toplam Degerlendirme"
+            value={stats.total}
+            icon={<BarChart3Icon className="size-4" />}
+          />
+          <StatCard
+            title="Ortalama Puan"
+            value={stats.avg_score?.toFixed(1) || '-'}
+            icon={<StarIcon className="size-4" />}
+          />
+          <StatCard
+            title="Atlanan"
+            value={skippedCount}
+            icon={<SkipForwardIcon className="size-4" />}
+          />
+          <StatCard
+            title="Degerlendirenler"
+            value={evaluatorStats.length}
+            icon={<UserIcon className="size-4" />}
+          />
+        </div>
+      )}
+
+      {/* Criteria Averages + Evaluator Leaderboard */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+        {stats && (
+          <Card>
+            <CardHeader className="pb-3">
+              <CardTitle className="text-sm">Kriter Ortalamalari</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-2">
+              {Object.entries(CRITERIA_LABELS).map(([key, label]) => {
+                const val = (stats as any)[key] as number;
+                return (
+                  <div key={key} className="flex items-center justify-between">
+                    <span className="text-sm text-muted-foreground">{label}</span>
+                    <div className="flex items-center gap-2">
+                      <Stars value={val || 0} />
+                      <span className="text-sm font-medium w-8 text-right">{val?.toFixed(1) || '-'}</span>
+                    </div>
+                  </div>
+                );
+              })}
+            </CardContent>
+          </Card>
+        )}
+
+        <Card>
+          <CardHeader className="pb-3">
+            <CardTitle className="text-sm">Degerlendirenler</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-2">
+              {evaluatorStats.map((ev, i) => (
+                <div
+                  key={ev._id}
+                  className="flex items-center justify-between p-2 rounded-lg hover:bg-muted/50 cursor-pointer"
+                  onClick={() => setFilter((f) => ({ ...f, evaluator_id: f.evaluator_id === ev._id ? '' : ev._id }))}
+                >
+                  <div className="flex items-center gap-2">
+                    <span className="text-xs text-muted-foreground w-5">{i + 1}.</span>
+                    <span className={`text-sm font-medium ${filter.evaluator_id === ev._id ? 'text-primary' : ''}`}>
+                      {ev.name}
+                    </span>
+                  </div>
+                  <div className="flex items-center gap-3">
+                    <span className="text-xs text-muted-foreground">{ev.count} adet</span>
+                    <ScoreBadge score={ev.avg_score} />
+                  </div>
+                </div>
+              ))}
+              {evaluatorStats.length === 0 && (
+                <p className="text-sm text-muted-foreground text-center py-4">Henuz degerlendirme yok</p>
+              )}
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Filters */}
+      <div className="flex items-center gap-2">
+        <select
+          value={filter.skipped}
+          onChange={(e) => setFilter((f) => ({ ...f, skipped: e.target.value }))}
+          className="h-9 rounded-md border border-input bg-background px-3 text-sm"
+        >
+          <option value="">Tum Degerlendirmeler</option>
+          <option value="false">Puanlananlar</option>
+          <option value="true">Atlananlar</option>
+        </select>
+
+        {filter.evaluator_id && (
+          <Button variant="ghost" size="sm" onClick={() => setFilter((f) => ({ ...f, evaluator_id: '' }))}>
+            Degerlendiren filtresini kaldir
+          </Button>
+        )}
+
+        <span className="text-xs text-muted-foreground ml-auto">{total} sonuc</span>
+      </div>
+
+      {/* Evaluations List */}
+      <div className="space-y-2">
+        {evaluations.map((ev) => {
+          const isExpanded = expandedId === ev._id;
+          return (
+            <Card key={ev._id} className="overflow-hidden">
+              {/* Row — click to expand */}
+              <button
+                className="w-full text-left p-4 flex items-center gap-4 hover:bg-muted/30 transition-colors"
+                onClick={() => setExpandedId(isExpanded ? null : ev._id)}
+              >
+                {/* Score */}
+                <div className="shrink-0 w-12 text-center">
+                  {ev.skipped ? (
+                    <Badge variant="outline" className="text-[10px]">Atlandi</Badge>
+                  ) : (
+                    <ScoreBadge score={ev.overall_score} />
+                  )}
+                </div>
+
+                {/* Main info */}
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-2 flex-wrap">
+                    {ev.agentName && (
+                      <Badge variant="outline" className="text-[10px] py-0 gap-1">
+                        <BotIcon className="size-2.5" />
+                        {ev.agentName}
+                      </Badge>
+                    )}
+                    {ev.externalNumber && (
+                      <Badge variant="outline" className="text-[10px] py-0 gap-1 font-mono">
+                        <PhoneIcon className="size-2.5" />
+                        {ev.externalNumber}
+                      </Badge>
+                    )}
+                    {ev.callDurationSecs > 0 && (
+                      <Badge variant="outline" className="text-[10px] py-0 gap-1">
+                        <ClockIcon className="size-2.5" />
+                        {formatDuration(ev.callDurationSecs)}
+                      </Badge>
+                    )}
+                  </div>
+                  {ev.notes && (
+                    <p className="text-xs text-muted-foreground mt-1 truncate">{ev.notes}</p>
+                  )}
+                </div>
+
+                {/* Right side */}
+                <div className="shrink-0 text-right">
+                  <p className="text-xs text-muted-foreground">{ev.evaluator_name}</p>
+                  <p className="text-[10px] text-muted-foreground">
+                    {new Date(ev.createdAt).toLocaleString('tr-TR', {
+                      day: '2-digit', month: '2-digit', hour: '2-digit', minute: '2-digit',
+                    })}
+                  </p>
+                </div>
+
+                <ChevronDownIcon className={`size-4 text-muted-foreground shrink-0 transition-transform ${isExpanded ? 'rotate-180' : ''}`} />
+              </button>
+
+              {/* Expanded detail */}
+              {isExpanded && (
+                <div className="border-t px-4 py-3 bg-muted/10 space-y-3">
+                  {/* Per-criteria stars */}
+                  {!ev.skipped && (
+                    <div className="grid grid-cols-2 sm:grid-cols-3 gap-2">
+                      {DETAIL_CRITERIA.map(({ key, label }) => {
+                        const val = (ev as any)[key] as number | null;
+                        return (
+                          <div key={key} className="flex items-center justify-between gap-2">
+                            <span className="text-xs text-muted-foreground">{label}</span>
+                            <div className="flex items-center gap-1">
+                              <Stars value={val || 0} size="md" />
+                              <span className="text-xs font-medium w-4">{val || '-'}</span>
+                            </div>
+                          </div>
+                        );
+                      })}
+                    </div>
+                  )}
+
+                  {/* Transcript Summary */}
+                  {ev.transcriptSummary && (
+                    <div>
+                      <p className="text-[10px] text-muted-foreground uppercase tracking-wider mb-1">Ozet</p>
+                      <p className="text-sm">{ev.transcriptSummary}</p>
+                    </div>
+                  )}
+
+                  {/* Notes */}
+                  {ev.notes && (
+                    <div>
+                      <p className="text-[10px] text-muted-foreground uppercase tracking-wider mb-1">Notlar</p>
+                      <p className="text-sm">{ev.notes}</p>
+                    </div>
+                  )}
+
+                  {/* Audio Player */}
+                  <InlineAudioPlayer conversationId={ev.conversation_id} />
+
+                  {/* Meta row */}
+                  <div className="flex items-center gap-3 flex-wrap text-[10px] text-muted-foreground">
+                    <span>Konusma: <a href={`/admin/elevenlabs/conversations/${ev.conversation_id}`} className="text-primary hover:underline font-mono">{ev.conversation_id.slice(0, 20)}...</a></span>
+                    {ev.cost != null && <span>Maliyet: ${ev.cost.toFixed(4)}</span>}
+                    {ev.callSuccessful && <span>Sonuc: {ev.callSuccessful}</span>}
+                    {ev.startTimeUnixSecs > 0 && (
+                      <span>
+                        Arama: {new Date(ev.startTimeUnixSecs * 1000).toLocaleString('tr-TR', {
+                          day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit',
+                        })}
+                      </span>
+                    )}
+                  </div>
+                </div>
+              )}
+            </Card>
+          );
+        })}
+
+        {evaluations.length === 0 && (
+          <Card>
+            <CardContent className="p-8 text-center text-muted-foreground">
+              Degerlendirme bulunamadi
+            </CardContent>
+          </Card>
+        )}
+      </div>
+
+      {/* Pagination */}
+      {totalPages > 1 && (
+        <div className="flex items-center justify-center gap-2">
+          <Button
+            variant="outline"
+            size="sm"
+            disabled={page <= 1}
+            onClick={() => fetchData(page - 1)}
+          >
+            <ChevronLeftIcon className="size-4" />
+          </Button>
+          <span className="text-sm text-muted-foreground">
+            {page} / {totalPages}
+          </span>
+          <Button
+            variant="outline"
+            size="sm"
+            disabled={page >= totalPages}
+            onClick={() => fetchData(page + 1)}
+          >
+            <ChevronRightIcon className="size-4" />
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}