{ (e.currentTarget as HTMLDivElement).style.transform = "translateY(-2px)"; (e.currentTarget as HTMLDivElement).style.boxShadow = "0 8px 28px rgba(15,23,42,0.18), 0 2px 8px rgba(15,23,42,0.1)"; }} 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), 0 1px 4px rgba(15,23,42,0.08)"; }} > {/* Subtle shine overlay */}

{/* Glow circle top-right */}

{/* Icon box — matches the frosted square in screenshot */}

{icon}

{/* Text content */}

{label}

{value}

{sub && (

{sub}

)}

); } // ─── SVG Icons (white, 20×20) ────────────────────────────────────────────── const IconBuilding = () => ( ); const IconCertificate = () => ( ); const IconShield = () => ( ); const IconMapPin = () => ( ); // ─── Main Component ──────────────────────────────────────────────────────── export default function CompanyAnalytics({ companies, cityFilter, standardFilter, monthFilter, }: Props) { // Filter the full dataset const filtered = useMemo(() => { return companies.filter((c) => { if (cityFilter && cityFilter !== "all" && c.city?.trim() !== cityFilter.trim()) return false; if (standardFilter && standardFilter !== "all") { if (!c.standards?.some((s) => s.name === standardFilter)) return false; } if (monthFilter && monthFilter !== "all") { if (!c.created_at) return false; const m = String(new Date(c.created_at).getMonth() + 1).padStart(2, "0"); if (m !== monthFilter) return false; } return true; }); }, [companies, cityFilter, standardFilter, monthFilter]); // ── KPI values ───────────────────────────────────────────────────────────── const totalCompanies = filtered.length; const iso9001Count = filtered.filter((c) => c.standards?.some((s) => s.name === "ISO 9001:2015")).length; const tripleCertified = filtered.filter((c) => c.standards?.length >= 3).length; const topCity = useMemo(() => { const map = new Map(); filtered.forEach((c) => { const city = c.city?.trim() || "Unknown"; map.set(city, (map.get(city) ?? 0) + 1); }); return Array.from(map.entries()).sort((a, b) => b[1] - a[1])[0]?.[0] ?? "—"; }, [filtered]); // Standards breakdown const byStandard = ["ISO 9001:2015", "ISO 14001:2015", "ISO 45001:2018"].map((name) => ({ name, count: filtered.filter((c) => c.standards?.some((s) => s.name === name)).length, })); // Top cities const byCity = Array.from( filtered.reduce((map, c) => { const city = c.city?.trim() || "Unknown"; map.set(city, (map.get(city) ?? 0) + 1); return map; }, new Map()) ) .map(([city, count]) => ({ city, count })) .sort((a, b) => b.count - a.count) .slice(0, 5); // Monthly breakdown (all 12 months) const byMonth = useMemo(() => { const map: Record = {}; MONTHS_SHORT.forEach((m) => (map[m] = 0)); filtered.forEach((c) => { if (c.created_at) { const m = MONTHS_SHORT[new Date(c.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 — corporate blue theme matching your color scheme ── */}

{/* Card 1 — Total Companies: deep navy → corporate blue */} } gradientFrom="#1e3a8a" gradientTo="#2563eb" /> {/* Card 2 — ISO 9001: emerald green (certification color) */} 0 ? Math.round((iso9001Count / totalCompanies) * 100) : 0}% of total`} icon={} gradientFrom="#065f46" gradientTo="#059669" /> {/* Card 3 — Triple Certified: purple (your active/selected accent) */} } gradientFrom="#4c1d95" gradientTo="#7c3aed" /> {/* Card 4 — Top City: slate blue / cyan */} } gradientFrom="#0c4a6e" gradientTo="#0369a1" />

{/* ── Row 1: Standards + Cities ── */}

{/* Standards */}

Standards Distribution ({filtered.length} companies)

{byStandard.map((s) => (

{s.name} {s.count} ({filtered.length > 0 ? Math.round((s.count / filtered.length) * 100) : 0}%)

))}

{/* Cities */}

Top Cities

{byCity.length === 0 ? (

No data for current filters

) : byCity.map((c, i) => (

{i + 1}

{c.city} {c.count}

))}

{/* ── Row 2: Monthly chart — all 12 months with exact counts ── */}

Monthly Registrations (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}

); })}

); }