{ (e.currentTarget as HTMLDivElement).style.transform = 'translateY(-2px)'; (e.currentTarget as HTMLDivElement).style.boxShadow = '0 8px 28px rgba(15,23,42,0.18)'; }} onMouseLeave={e => { (e.currentTarget as HTMLDivElement).style.transform = 'translateY(0)'; (e.currentTarget as HTMLDivElement).style.boxShadow = '0 4px 20px rgba(15,23,42,0.14)'; }} >

{icon}

{label}

{value}

{sub &&

{sub}

}

); } // ─── SVG Icons ──────────────────────────────────────────────────────────────── const IconClipboard = () => ( ); const IconCheck = () => ( ); const IconClock = () => ( ); const IconAlert = () => ( ); // ─── Main Component ─────────────────────────────────────────────────────────── export default function InquiryAnalytics({ inquiries, statusFilter, typeFilter, monthFilter }: Props) { // Apply filters to the dataset const filtered = useMemo(() => { return inquiries.filter(inq => { if (statusFilter && statusFilter !== 'all' && inq.status !== statusFilter) return false; if (typeFilter && typeFilter !== 'all' && inq.inquiry_type !== typeFilter) return false; if (monthFilter && monthFilter !== 'all') { if (!inq.created_at) return false; const m = String(new Date(inq.created_at).getMonth() + 1).padStart(2, '0'); if (m !== monthFilter) return false; } return true; }); }, [inquiries, statusFilter, typeFilter, monthFilter]); // ── KPIs ────────────────────────────────────────────────────────────────── const total = filtered.length; const pending = filtered.filter(i => i.status === 'PENDING').length; const draftReady = filtered.filter(i => i.status === 'DRAFT_READY').length; const changes = filtered.filter(i => i.status === 'CHANGES_REQUESTED').length; const confirmed = filtered.filter(i => i.status === 'CLIENT_CONFIRMED').length; const issued = filtered.filter(i => i.status === 'FINAL_ISSUED').length; // By status const byStatus = Object.entries(STATUS_CONFIG).map(([key, cfg]) => ({ key, label: cfg.label, color: cfg.dot, count: filtered.filter(i => i.status === key).length, })); // By type const byType = Object.entries(TYPE_CONFIG).map(([key, cfg]) => ({ key, label: cfg.label, color: cfg.color, count: filtered.filter(i => i.inquiry_type === key).length, })); // Monthly const byMonth = useMemo(() => { const map: Record = {}; MONTHS_SHORT.forEach(m => (map[m] = 0)); filtered.forEach(inq => { if (inq.created_at) { const m = MONTHS_SHORT[new Date(inq.created_at).getMonth()]; map[m] = (map[m] ?? 0) + 1; } }); return MONTHS_SHORT.map(m => ({ month: m, count: map[m] })); }, [filtered]); const maxMonth = Math.max(...byMonth.map(b => b.count), 1); return (

{/* ── KPI Cards ─────────────────────────────────────────────────────── */}

} gradientFrom="#1e3a8a" gradientTo="#2563eb" /> } gradientFrom="#92400e" gradientTo="#f59e0b" /> } gradientFrom="#4c1d95" gradientTo="#7c3aed" /> } gradientFrom="#991b1b" gradientTo="#ef4444" /> } gradientFrom="#065f46" gradientTo="#10b981" />

{/* ── Status + Type breakdown ────────────────────────────────────────── */}

{/* Status distribution */}

Status Distribution ({filtered.length} inquiries)

{byStatus.map(s => (

{s.label} {s.count} ({total > 0 ? Math.round((s.count / total) * 100) : 0}%)

))}

{/* Type distribution */}

Inquiry Type Breakdown

{byType.map((t, i) => (

{i + 1}

{t.label} {t.count}

))}

{/* ── Monthly chart ────────────────────────────────────────────────── */}

Monthly Inquiries (total: {filtered.length})

{byMonth.map(b => { const isActive = monthFilter && monthFilter !== 'all' && String(MONTHS_SHORT.indexOf(b.month) + 1).padStart(2, '0') === monthFilter; return (

0 ? '#14b8a6' : '#f0fdfa', borderRadius: '4px 4px 0 0', height: `${(b.count / maxMonth) * 100}%`, minHeight: b.count > 0 ? 4 : 0, transition: 'height 0.4s, background-color 0.2s', position: 'relative', }}> {b.count > 0 && ( {b.count} )}

{b.month}

); })}

); }