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