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

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 tracking-wider text-tertiary uppercase">{stat.label}</div>
                </div>
            ))}
        </div>
    );
};