helix-engage/src/components/leads/kpi-cards.tsx

import { cx } from '@/utils/cx';
import type { Lead } from '@/types/entities';

interface KpiCardsProps {
    leads: Lead[];
}

type KpiCard = {
    label: string;
    value: number;
    delta: string;
    deltaColor: string;
    isHero: boolean;
};

export const KpiCards = ({ leads }: KpiCardsProps) => {
    const newCount = leads.filter((l) => l.leadStatus === 'NEW').length;
    const assignedCount = leads.filter((l) => l.assignedAgent !== null).length;
    const contactedCount = leads.filter((l) => l.leadStatus === 'CONTACTED').length;
    const convertedCount = leads.filter((l) => l.leadStatus === 'CONVERTED').length;

    const cards: KpiCard[] = [
        {
            label: 'New Leads Today',
            value: newCount,
            delta: '+12% vs yesterday',
            deltaColor: 'text-success-primary',
            isHero: true,
        },
        {
            label: 'Assigned to CC',
            value: assignedCount,
            delta: '85% assigned',
            deltaColor: 'text-brand-secondary',
            isHero: false,
        },
        {
            label: 'Contacted',
            value: contactedCount,
            delta: '+8% vs yesterday',
            deltaColor: 'text-success-primary',
            isHero: false,
        },
        {
            label: 'Converted',
            value: convertedCount,
            delta: '+3 this week',
            deltaColor: 'text-warning-primary',
            isHero: false,
        },
    ];

    return (
        <div className="flex gap-3">
            {cards.map((card) => (
                <div
                    key={card.label}
                    className={cx(
                        'rounded-2xl p-5 transition hover:shadow-md',
                        card.isHero
                            ? 'flex-[1.3] bg-brand-solid text-white'
                            : 'flex-1 border border-secondary bg-primary',
                    )}
                >
                    <p
                        className={cx(
                            'text-xs font-medium uppercase tracking-wider',
                            card.isHero ? 'text-white/70' : 'text-quaternary',
                        )}
                    >
                        {card.label}
                    </p>
                    <p
                        className={cx(
                            'mt-1 text-display-sm font-bold',
                            card.isHero ? 'text-white' : 'text-primary',
                        )}
                    >
                        {card.value}
                    </p>
                    <p
                        className={cx(
                            'mt-1 text-xs',
                            card.isHero ? 'text-white/80' : card.deltaColor,
                        )}
                    >
                        {card.delta}
                    </p>
                </div>
            ))}
        </div>
    );
};