{ (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 IconCalendar = () => (); const IconFlame = () => (); const IconPlay = () => (); const IconCheck = () => (); const IconFlag = () => (); const IconEye = () => (); const IconRefresh = () => (); // ─── Main Component ─────────────────────────────────────────────────────────── export default function MyAuditsAnalytics({ audits, statusFilter, // kept for API compatibility; no longer used to EXCLUDE rows auditTypeFilter, monthFilter, }: Props) { // ── Exact-count philosophy ────────────────────────────────────────────── // Every metric below is computed from the FULL `audits` set, so the // dashboard always shows true totals. Table filters (status / type) do NOT // shrink these counts — otherwise "In Progress" would read 0 the moment you // filter the list to "Completed". `monthFilter` is used only to HIGHLIGHT a // bar in the monthly chart, never to drop rows. const data = useMemo(() => audits ?? [], [audits]); const total = data.length; // ── Time windows (string keys → timezone-proof) ───────────────────────── const now = new Date(); const todayKey = keyOf(now); const curMonthKey = todayKey.slice(0, 7); const dow = now.getDay(); // 0 = Sun … 6 = Sat const monday = new Date(now); monday.setDate(now.getDate() - (dow === 0 ? 6 : dow - 1)); const sunday = new Date(monday); sunday.setDate(monday.getDate() + 6); const monKey = keyOf(monday); const sunKey = keyOf(sunday); // ── Operational KPIs ──────────────────────────────────────────────────── const todayCount = data.filter( (a) => dayKey(a.schedule?.schedule_date) === todayKey, ).length; const weekCount = data.filter((a) => { const k = dayKey(a.schedule?.schedule_date); return !!k && k >= monKey && k <= sunKey; // full Mon–Sun week }).length; const inProgressCount = data.filter((a) => a.status === 'IN_PROGRESS').length; const completedMonthCount = data.filter((a) => { if (a.status !== 'COMPLETED') return false; // Prefer updated_at; fall back to schedule_date if it's missing. const mk = monthKey((a as any).updated_at) ?? monthKey(a.schedule?.schedule_date); return mk === curMonthKey; }).length; // ── Category counts (true totals) ─────────────────────────────────────── const initialCount = data.filter((a) => a.audit_type === 'INITIAL').length; const surveillanceCount = data.filter((a) => a.audit_type === 'SURVEILLANCE').length; const recertCount = data.filter((a) => a.audit_type === 'RECERTIFICATION').length; // ── Completion ────────────────────────────────────────────────────────── const completed = data.filter((a) => a.status === 'COMPLETED').length; const completionRate = total > 0 ? Math.round((completed / total) * 100) : 0; // ── By status ─────────────────────────────────────────────────────────── const byStatus = (Object.keys(STATUS_CONFIG) as RowStatus[]).map((key) => ({ key, label: STATUS_CONFIG[key].label, color: STATUS_CONFIG[key].dot, count: data.filter((a) => a.status === key).length, })); // ── By standard ───────────────────────────────────────────────────────── const standardsMap = new Map(); data.forEach((a) => { (a.standards ?? []).forEach((s) => { standardsMap.set(s.name, (standardsMap.get(s.name) ?? 0) + 1); }); }); const byStandard = Array.from(standardsMap.entries()) .map(([name, count]) => ({ name, count })) .sort((a, b) => b.count - a.count) .slice(0, 6); const standardColors = ['#7F77DD', '#5DCAA5', '#EF9F27', '#E24B4A', '#0891b2', '#a855f7']; // ── Monthly chart (timezone-proof month extraction) ───────────────────── const byMonth = useMemo(() => { const map: Record = {}; MONTHS_SHORT.forEach((m) => (map[m] = 0)); data.forEach((a) => { const mn = monthNum(a.schedule?.schedule_date); if (mn && mn >= 1 && mn <= 12) { const m = MONTHS_SHORT[mn - 1]; map[m] = (map[m] ?? 0) + 1; } }); return MONTHS_SHORT.map((m) => ({ month: m, count: map[m] })); }, [data]); const maxMonth = Math.max(...byMonth.map((b) => b.count), 1); return (

{/* ── ROW 1: Main KPIs ─────────────────────────────────────────────── */}

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

{/* ── ROW 2: Category KPIs ─────────────────────────────────────────── */}

} gradientFrom="#3f6212" gradientTo="#65a30d" /> } gradientFrom="#854d0e" gradientTo="#d97706" /> } gradientFrom="#5b21b6" gradientTo="#a855f7" />

{/* ── ROW 3: Status + Standards ─────────────────────────────────────── */}

Status Distribution ({total} audits)

{byStatus.map((s) => (

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

))}

By Standard (top {byStandard.length})

{byStandard.length === 0 ? (

No standards data yet

) : ( byStandard.map((s, i) => { const max = byStandard[0].count; return (

{i + 1}

{s.name} {s.count}

); }) )}

{/* ── ROW 4: Monthly chart ─────────────────────────────────────────── */}

Audits per Month (total: {total})

{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}

); })}

{/* ── ROW 5: Completion rate ───────────────────────────────────────── */}

Completion Rate

{completionRate}%

{completed} of {total} audits closed

); }