} /> {/* Hero row — one dominant number, not four equal tiles. The mind reads "what's the one thing that matters today" faster than it audits a symmetric grid. */}

{financeKpis.slice(1).map((k, i) => )}

{/* Chart split — wide trend line vs. a stacked column of two smaller, differently-shaped blocks (budget bars + category legend), not a second matching chart card. Uneven on purpose. */}

Spend (K) Peak · $67.2K · W22 Avg · $51.4K / wk

42% elapsed}>

{d.budgets.map((b, i) => )}

{/* Borderless — a legend is a list, not a card. */}

Spend by category YTD

{d.categoryBreakdown.map((c, i) => { const cat = d.categories.find(x => x.id === c.cat); return (

{cat.name} ${c.value.toFixed(1)}K · {categoryShares[i]}%

); })}

{/* Data regions — the table is the surface, no card wrapper around it. */}

Pending approvals {e.preventDefault(); ffGo('approvals');}}>View all

{d.expenses.filter(e => e.status === "pending" || e.status === "flagged").slice(0, 6).map(e => ( ffGo('expense-detail',{expenseId:e.id})} onKeyDown={ffRowKeyDown} aria-label={`${e.id} ${e.merchant}`} style={{cursor:'pointer'}}> ))}

ID	Merchant	Owner	Submitted	Amount	Status
{e.id}	{e.merchant}	x[0]).join('').slice(0,2)} name={e.who}/> {e.who}	{fmtDate(e.date)}

Recent activity setCompact(c=>!c)}/>

{d.auditEntries.slice(0, 6).map((a, i) => ( ))}

Time	Actor	Action	Target
{a.ts}	{a.actor}	{a.action}	{a.target}

); }; const ManagerDashboard = () => { const d = FF_DATA; const pendingMine = d.expenses.filter(e => e.status === "pending" || e.status === "flagged"); const teamSpent = d.employees.reduce((sum, employee) => sum + employee.spend, 0); const usedPct = (teamSpent/d.managerBudget*100).toFixed(1); const managerKpis = d.kpis.manager.map(k => k.label === 'Awaiting You' ? {...k,value:String(pendingMine.length)} : k); return ( <> } /> {/* Manager reads differently from Finance Admin — a compact inline stat strip, not four cards, because the numbers here are context for the queue below, not the headline. */} {/* Queue-first, not chart-first — the approvals list is the wide dominant column since that's what a manager actually acts on; the chart is supporting context, narrower. Flips FinanceDashboard's chart-left/detail-right split on purpose. */}

{e.preventDefault(); ffGo('approvals');}}>Open queue} padded={false}>

{pendingMine.slice(0, 5).map(e => (

x[0]).join('').slice(0,2)} name={e.who}/>

{e.merchant}

{e.who} · {e.id}

))}

This month}> ({ cat: e.initials, value: e.spend/1000 }))} height={230} unit="$" precision={2} colorByIndex={false} color="var(--ff-chart-1)" label="Team spend by member this month"/>

Approve all pending under $100 with no policy flags.

{(() => { const quick = pendingMine.filter(e => e.amount < 100 && e.policy === "ok"); const quickTotal = quick.reduce((s, e) => s + e.amount, 0); return (

); })()}

Hotel cap for domestic stays is $300/night
Per diem meals: $75/day
Anything over $500 in advertising → CMO sign-off

); }; const EmployeeDashboard = () => { const d = FF_DATA; const mine = d.expenses.filter(e => e.who === "Casey Parker"); const [compact, setCompact] = React.useState(false); return ( <> } /> {/* Card-led, not number-led or queue-led — the third distinct composition of the three dashboards. An employee's mental model of "my spend" starts with the physical card, not a KPI grid. */}

FinFlow · Virtual

•••• •••• •••• 9032

Holder

Casey Parker

Exp

11/28

{/* Compact stat rows, not KPI cards — supporting context beside the card, not competing tiles. */}

{d.kpis.employee.map((k, i) => (

{k.label} {k.value} {k.delta}

))}

Reimbursement

$320.40

RB-104 · Direct deposit · arrives May 30

My recent expenses

setCompact(c=>!c)}/> {e.preventDefault(); ffGo('expenses');}}>View all

{mine.map(e => ( ffGo('expense-detail',{expenseId:e.id})} onKeyDown={ffRowKeyDown} aria-label={`${e.merchant} ${e.id}`} style={{cursor:'pointer'}}> ))}

Date	Merchant	Amount	Status
{e.date.slice(5)}	{e.merchant} {e.memo}

); }; Object.assign(window, { FinanceDashboard, ManagerDashboard, EmployeeDashboard });