// Reports — manager dashboard with charts for decision-making const ReportsPage = () => { const { SAIF_COMPANIES, SUPPLIERS, DOCUMENTS, POS, PROPOSALS, TICKETS } = window.SaifData; const [period, setPeriod] = React.useState('q2'); // === Aggregations === // Spend by company (sum of PO values) const spendByCo = SAIF_COMPANIES.map(c => ({ co: c, total: POS.filter(p => p.company === c.id).reduce((s, p) => s + p.amount, 0), })).sort((a, b) => b.total - a.total); // Document health per company const docHealthByCo = SAIF_COMPANIES.map(c => { const cosup = SUPPLIERS.filter(s => s.companies.includes(c.id)).map(s => s.id); const docs = DOCUMENTS.filter(d => cosup.includes(d.supplierId)); return { co: c, green: docs.filter(d => d.status === 'green').length, amber: docs.filter(d => d.status === 'amber').length, red: docs.filter(d => d.status === 'red').length, }; }); // Supplier proposals pipeline funnel const supPropsByStatus = (status) => PROPOSALS.filter(p => p.kind === 'supplier' && p.status === status).length; const funnel = [ { stage: 'Submitted', count: PROPOSALS.filter(p => p.kind === 'supplier').length, color: 'oklch(0.55 0.10 235)' }, { stage: 'Under review', count: supPropsByStatus('under-review') + supPropsByStatus('submitted'), color: 'oklch(0.62 0.13 55)' }, { stage: 'Revision iterating', count: supPropsByStatus('revision-requested') + supPropsByStatus('resubmitted'), color: 'oklch(0.74 0.13 75)' }, { stage: 'Approved', count: supPropsByStatus('approved'), color: 'oklch(0.62 0.12 145)' }, ]; // Top suppliers by open value const topSuppliers = [...SUPPLIERS] .filter(s => s.status === 'approved') .sort((a, b) => b.openValue - a.openValue) .slice(0, 5); // Tickets by priority (active only) const activeTickets = TICKETS.filter(t => t.status !== 'resolved' && t.status !== 'closed'); const ticketsByPriority = ['urgent', 'high', 'medium', 'low'].map(p => ({ priority: p, count: activeTickets.filter(t => t.priority === p).length, color: p === 'urgent' ? 'var(--red)' : p === 'high' ? 'var(--amber)' : p === 'medium' ? 'var(--blue)' : 'var(--text-mute)', })); const totalTickets = ticketsByPriority.reduce((s, x) => s + x.count, 0); // Approval cycle time (days per stage — illustrative averages) const cycleTime = [ { stage: 'Registration', days: 1.2, color: 'var(--blue)' }, { stage: 'Procurement Review', days: 2.4, color: 'var(--accent)' }, { stage: 'Final Approval', days: 3.1, color: 'var(--ink)' }, ]; // Monthly trend — illustrative const monthlyTrend = [ { m: 'Dec', proposals: 3, pos: 5 }, { m: 'Jan', proposals: 5, pos: 7 }, { m: 'Feb', proposals: 4, pos: 6 }, { m: 'Mar', proposals: 7, pos: 9 }, { m: 'Apr', proposals: 8, pos: 11 }, { m: 'May', proposals: 6, pos: 8 }, ]; // KPIs const totalSpend = spendByCo.reduce((s, x) => s + x.total, 0); const expiredDocs = DOCUMENTS.filter(d => d.status === 'red').length; const avgApprovalDays = cycleTime.reduce((s, x) => s + x.days, 0).toFixed(1); const winRate = Math.round((funnel[3].count / Math.max(funnel[0].count, 1)) * 100); return (

Reports

Decision-grade insights across spend, documents, proposals, and support.

{/* Spend by company — vertical bars */}

Spend by Company

Total PO value across the group
{/* Proposal pipeline funnel */}

Supplier Proposal Pipeline

Where proposals sit right now
{/* Document health */}

Document Health by Company

Green = valid · Amber = expiring 30d · Red = expired
Valid Expiring Expired
{/* Tickets by priority — donut */}

Active Tickets by Priority

{totalTickets} active across the group
p.count > 0)} total={totalTickets}/>
{ticketsByPriority.map(p => (
{p.priority} {p.count}
))}
{/* Approval cycle time */}

Avg. Approval Cycle Time

Days per stage (last 30 days)
{/* Monthly trend */}

Activity Trend — Last 6 Months

New proposals submitted vs POs issued
Proposals POs
{/* Top suppliers leaderboard */}

Top 5 Suppliers by Open Value

Concentration risk — track if any single supplier is too large
{topSuppliers.map((s, i) => { const share = (s.openValue / topSuppliers.reduce((sum, x) => sum + x.openValue, 0)) * 100; return ( ); })}
#SupplierIndustryOpen ValueSharePOs
{i + 1} {s.name} {s.industry} {fmtCurrency(s.openValue)}
{share.toFixed(0)}%
{s.poCount}
); }; // === Charts (pure SVG) === const SpendBarsChart = ({ data }) => { const max = Math.max(...data.map(d => d.total)) || 1; const W = 460, H = 220, P = 30; const barW = (W - P * 2) / data.length - 14; return ( {[0, 0.25, 0.5, 0.75, 1].map(t => ( ))} {data.map((d, i) => { const h = (d.total / max) * (H - P * 2); const x = P + i * ((W - P * 2) / data.length) + 7; const y = H - P - h; return ( {d.total >= 1000000 ? (d.total / 1000000).toFixed(1) + 'M' : (d.total / 1000).toFixed(0) + 'k'} {d.co.code} ); })} ); }; const StackedBarChart = ({ data }) => { const W = 720, H = 200, P = 30, rowH = 24, gap = 6; const maxTotal = Math.max(...data.map(d => d.green + d.amber + d.red)) || 1; return ( {data.map((d, i) => { const total = d.green + d.amber + d.red; if (total === 0) return null; const y = i * (rowH + gap) + 10; const xBase = 110; const wAvail = W - xBase - 20; const wG = (d.green / maxTotal) * wAvail; const wA = (d.amber / maxTotal) * wAvail; const wR = (d.red / maxTotal) * wAvail; return ( {d.co.name} {total} ); })} ); }; const FunnelChart = ({ stages }) => { const max = Math.max(...stages.map(s => s.count)) || 1; const W = 380, rowH = 50, gap = 4; return ( {stages.map((s, i) => { const w = Math.max((s.count / max) * (W - 130), 60); const x = (W - w) / 2; const y = i * (rowH + gap); return ( {s.stage} {s.count} ); })} ); }; const DonutChart = ({ segments, total }) => { const size = 140, stroke = 24, r = (size - stroke) / 2; const C = 2 * Math.PI * r; let offset = 0; return ( {segments.map((seg, i) => { const len = (seg.count / total) * C; const dasharray = `${len} ${C}`; const dashoffset = -offset; const node = ( ); offset += len; return node; })} {total} tickets ); }; const HorizontalBars = ({ items, valueKey, unit }) => { const max = Math.max(...items.map(i => i[valueKey])) || 1; return (
{items.map(it => { const w = (it[valueKey] / max) * 100; return (
{it.stage} {it[valueKey]}{unit ? ` ${unit}` : ''}
); })}
); }; const LineChart = ({ data }) => { const W = 720, H = 200, P = 30; const maxY = Math.max(...data.flatMap(d => [d.proposals, d.pos])) + 2; const xs = data.map((_, i) => P + i * ((W - P * 2) / (data.length - 1))); const yFor = (v) => H - P - (v / maxY) * (H - P * 2); const propLine = data.map((d, i) => `${xs[i]},${yFor(d.proposals)}`).join(' '); const posLine = data.map((d, i) => `${xs[i]},${yFor(d.pos)}`).join(' '); return ( {[0, 0.25, 0.5, 0.75, 1].map(t => ( ))} {data.map((d, i) => ( {d.m} ))} ); }; Object.assign(window, { ReportsPage });