feat: build CC Agent Call Desk with CTI simulation, AI insights, disposition form, and call log

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/components/call-desk/daily-stats.tsx

@@ -0,0 +1,43 @@
+import type { Call } from '@/types/entities';
+
+interface DailyStatsProps {
+    calls: Call[];
+}
+
+const formatAvgDuration = (calls: Call[]): string => {
+    if (calls.length === 0) return '0.0 min';
+    const totalSeconds = calls.reduce((sum, c) => sum + (c.durationSeconds ?? 0), 0);
+    const avgMinutes = totalSeconds / calls.length / 60;
+    return `${avgMinutes.toFixed(1)} min`;
+};
+
+export const DailyStats = ({ calls }: DailyStatsProps) => {
+    const callsHandled = calls.length;
+    const appointmentsBooked = calls.filter((c) => c.disposition === 'APPOINTMENT_BOOKED').length;
+    const followUps = calls.filter((c) => c.disposition === 'FOLLOW_UP_SCHEDULED').length;
+    const avgDuration = formatAvgDuration(calls);
+
+    const stats = [
+        { label: 'Calls Handled', value: String(callsHandled) },
+        { label: 'Appointments Booked', value: String(appointmentsBooked) },
+        { label: 'Follow-ups', value: String(followUps) },
+        { label: 'Avg Duration', value: avgDuration },
+    ];
+
+    return (
+        <div className="flex flex-col gap-3">
+            <h3 className="text-sm font-bold text-primary">Daily Stats</h3>
+            {stats.map((stat) => (
+                <div
+                    key={stat.label}
+                    className="rounded-xl bg-secondary p-4 text-center"
+                >
+                    <div className="text-display-xs font-bold text-primary">{stat.value}</div>
+                    <div className="mt-1 text-xs uppercase tracking-wider text-tertiary">
+                        {stat.label}
+                    </div>
+                </div>
+            ))}
+        </div>
+    );
+};