/* FinFlow Screens — Reports, Cards, Vendors */ const ReportsHome = () => { const d = FF_DATA; return ( <> } />

Plan · Actual}> {d.vendors.slice(0,6).map(v => ( ))}

Vendor	Category	Spend	Δ
{v.name}	{d.categories.find(c=>c.id===v.cat).name}		0 ? 'var(--ff-rejected)' : v.change < 0 ? 'var(--ff-approved)' : 'var(--ff-fg-muted)'}}>{v.change > 0 ? '+' : ''}{v.change.toFixed(1)}%

{[ ["Monthly close packet", "Maren O.", "Monthly · 1st", "May 1, 6:00 AM"], ["Travel by team", "Maren O.", "Weekly · Mon", "May 19, 8:00 AM"], ["Software vendors over $1K", "Dev P.", "Quarterly", "Apr 1, 6:00 AM"], ["Marketing spend by campaign", "Iris C.", "Manual", "May 20, 2:14 PM"] ].map(([n,o,s,l], i) => ( ))}

Name	Owner	Schedule	Last run
{n}	{o}	{s}	{l}

); }; const ReportBuilder = () => ( <> }/>

Dimensions

{["Category","Vendor","Owner","Team","Project","Date"].map(x =>

{x}

)}

Measures

{["Amount","Count","Avg per item","Median","% of budget"].map(x =>

{x}

)}

Rows: Category Columns: Month Measure: Sum(amount) Filter: Last 90 days

({cat: FF_DATA.categories.find(x=>x.id===c.cat).name, value:c.value}))} height={260} unit="$"/>

Report name

Schedule

Email me each run

Share with team

); const SavedReport = () => { const d = FF_DATA; return ( <> }/>

({ cat: d.categories.find(x=>x.id===c.cat).name.slice(0,4), value: c.value }))} height={240} unit="$"/>

); }; const ExportReport = () => ( <>

Format

Date range

Include

Charts Line-items Receipt images

Email to

FinFlow · Monthly Close — April FY26

Arcadia Labs · Generated May 1, 2026

{["$348K","$42K","−2.4%","6/6"].map((x,i)=>(

{x}

))}

Page 1 of 4

); const CardsList = () => { const d = FF_DATA; return ( <> c.status==='active').length} active`} actions={<>}/>

{d.cards.map(c => (

{c.type === "virtual" ? "Virtual" : "Physical"}

•••• •••• •••• {c.last4}

Holder

{c.holder}

{c.status === 'frozen' && Frozen}

))}

); }; const CardDetail = () => { const d = FF_DATA; const c = d.cards[2]; // Luna Park's card return ( <> }/>

Physical

•••• •••• •••• {c.last4}

Holder

{c.holder}

Exp

03/27

CVV

•••

{d.expenses.filter(e => e.cardLast4 === c.last4).map(e => ( ))}

Date	Merchant	Memo	Amount	Status
{e.date}	{e.merchant}	{e.memo}

); }; const SettingRow = ({ label, value }) => (

{label} {value}

); const IssueCard = () => ( <>

Card type

Cardholder

Monthly limit

Per-transaction

Allowed categories

{FF_DATA.categories.map((c, i) => {c.name})}

Notify on each charge

Email + Slack

Virtual · New

•••• •••• •••• ••••

Holder

Iris Chen

Limit

$5,000

); const FreezeCardModal = ({ onClose }) => (

e.stopPropagation()}>

Freeze card · •••• 4112

Luna Park will not be able to charge this card until unfrozen.

Reason (optional)

</div>
        <div className="ff-row" style={{marginTop:12, gap:16}}>
          <label className="ff-row" style={{gap:6, fontSize:13}}><input type="checkbox"/> Notify cardholder</label>
          <label className="ff-row" style={{gap:6, fontSize:13}}><input type="checkbox" defaultChecked/> Add to audit log</label>
        </div>
      </div>
      <div className="ff-modal__foot">
        <button className="ff-btn" onClick={onClose}>Cancel</button>
        <button className="ff-btn ff-btn--primary">Freeze card</button>
      </div>
    </div>
  </div>
);

const VendorsList = () => {
  const d = FF_DATA;
  return (
    <>
      <PageHead eyebrow="Vendors" title="Vendor directory" sub={`${d.vendors.length} vendors active YTD`}
        actions={<><button className="ff-btn"><Icon name="upload-simple" size={14}/> Import W-9s</button><button className="ff-btn ff-btn--primary"><Icon name="plus" size={14}/> Add vendor</button></>}/>
      <Card padded={false}>
        <table className="ff-table">
          <thead><tr><th>Vendor</th><th>Category</th><th className="ff-num">YTD spend</th><th className="ff-num">Δ vs Q1</th><th>Top owner</th><th>Status</th></tr></thead>
          <tbody>
            {d.vendors.map(v => (
              <tr key={v.id}>
                <td><div style={{fontWeight:500}}>{v.name}</div><div style={{fontSize:11, color:'var(--ff-fg-muted)'}}>vendor-{v.id.slice(1).padStart(4, '0')}@arcadialabs.co</div></td>
                <td><span className="ff-badge ff-badge--neutral ff-badge--no-dot">{d.categories.find(c=>c.id===v.cat).name}</span></td>
                <td className="ff-num"><Money value={v.spend}/></td>
                <td className="ff-num" style={{color: v.change > 0 ? 'var(--ff-rejected)' : v.change < 0 ? 'var(--ff-approved)' : 'var(--ff-fg-muted)'}}>{v.change > 0 ? '+' : ''}{v.change.toFixed(1)}%</td>
                <td>Maren O.</td>
                <td><span className="ff-badge ff-badge--approved ff-badge--no-dot"><Icon name="check" size={12}/> W-9 on file</span></td>
              </tr>
            ))}
          </tbody>
        </table>
      </Card>
    </>
  );
};

const VendorDetail = () => {
  const d = FF_DATA;
  const v = d.vendors[1];
  // Build a vendor-specific spend over time
  const vendorTrend = d.spendOverTime.map((p, i) => ({ w: p.w, v: Math.round((p.v * 0.7 + i * 1.4) * 10) / 10 }));
  return (
    <>
      <PageHead eyebrow="Vendor" title={v.name} sub="EIN 47-2210331 · Tax type C-Corp · Net-30"
        actions={<><button className="ff-btn"><Icon name="paperclip" size={14}/> Contracts</button><button className="ff-btn"><Icon name="envelope" size={14}/> Message</button><button className="ff-btn ff-btn--primary">Pay vendor</button></>}/>
      <div className="ff-grid ff-grid--kpis">
        <KpiTile label="YTD Spend" value={`$${(v.spend/1000).toFixed(1)}K`} delta={`${v.change>0?'+':''}${v.change}% vs Q1`} trend={v.change > 0 ? "down" : "up"}/>
        <KpiTile label="Transactions" value="38" delta="3 this week" trend="neutral"/>
        <KpiTile label="Avg invoice" value="$1,086" delta="−4% vs Q1" trend="up"/>
        <KpiTile label="Open invoices" value="2" delta="Both within 30d" trend="neutral"/>
      </div>
      <Card title="Spend over time" style={{marginTop:16}}>
        <LineChart data={vendorTrend} height={220} unit="$"/>
      </Card>
      <Card title="Recent transactions" style={{marginTop:16}} padded={false}>
        <table className="ff-table">
          <thead><tr><th>Date</th><th>Memo</th><th>Owner</th><th className="ff-num">Amount</th><th>Status</th></tr></thead>
          <tbody>
            {[
              ["2026-05-20","Monthly infra","Dev Patel",3204.18,"approved"],
              ["2026-04-22","Monthly infra","Dev Patel",3018.40,"approved"],
              ["2026-03-21","Monthly infra","Dev Patel",2964.22,"approved"]
            ].map(([dt,m,w,a,s], i) => (
              <tr key={i}><td className="ff-tnum" style={{color:'var(--ff-fg-muted)'}}>{dt}</td><td>{m}</td><td>{w}</td><td className="ff-num"><Money value={a}/></td><td><StatusBadge status={s}/></td></tr>
            ))}
          </tbody>
        </table>
      </Card>
    </>
  );
};

Object.assign(window, { ReportsHome, ReportBuilder, SavedReport, ExportReport, CardsList, CardDetail, IssueCard, FreezeCardModal, VendorsList, VendorDetail });