/* FinFlow Screens — Expenses (list, detail, new, OCR review, flagged, import) */ const EXPENSE_COLUMNS = ["ID", "Date", "Merchant / memo", "Owner", "Category", "Amount", "Status"]; const ExpenseList = () => { const d = FF_DATA; const [status, setStatus] = React.useState("all"); const [cat, setCat] = React.useState("all"); const [q, setQ] = React.useState(""); const [compact, setCompact] = React.useState(false); const [selected, setSelected] = React.useState([]); const [columnsOpen, setColumnsOpen] = React.useState(false); const [message,setMessage] = React.useState(''); const [confirmDelete,setConfirmDelete] = React.useState(false); const query = q.trim().toLowerCase(); const filtered = d.expenses.filter(e => (status === "all" || e.status === status) && (cat === "all" || e.cat === cat) && (query === "" || [e.merchant, e.memo, e.who, e.id].some(f => String(f||'').toLowerCase().includes(query))) ); const total = filtered.reduce((s, e) => s + e.amount, 0); const selectedTotal = filtered.filter(e => selected.includes(e.id)).reduce((s, e) => s + e.amount, 0); const selectedReviewable = d.expenses.some(e=>selected.includes(e.id)&&['pending','flagged'].includes(e.status)); const allSelected = filtered.length > 0 && filtered.every(e => selected.includes(e.id)); const toggleRow = (id) => setSelected(sel => sel.includes(id) ? sel.filter(x => x !== id) : [...sel, id]); const toggleAll = () => setSelected(allSelected ? [] : filtered.map(e => e.id)); return ( <> setCompact(c=>!c)}/> } /> {FF_SESSION.toast &&
{FF_SESSION.toast}
}
e.status==="pending").length }, { id: "approved",label: "Approved",count: d.expenses.filter(e=>e.status==="approved").length }, { id: "flagged", label: "Flagged", count: d.expenses.filter(e=>e.status==="flagged").length }, { id: "rejected",label: "Rejected",count: d.expenses.filter(e=>e.status==="rejected").length } ]} value={status} onChange={setStatus}/>
setQ(e.target.value)}/>
{columnsOpen && (
{EXPENSE_COLUMNS.map(col => ( ))}
)}
{selected.length > 0 && (
setSelected([])}/> {selected.length} selected · total {new Intl.NumberFormat('en-US', { style:'currency', currency:'USD' }).format(selectedTotal)}
)} {filtered.length === 0 ? {setQ('');setStatus('all');setCat('all');}}>Clear filters}/> : {filtered.map(e => { const cat = d.categories.find(c => c.id === e.cat); return ( ffGo('expense-detail', {expenseId:e.id})} onKeyDown={ffRowKeyDown} aria-label={`${e.id} ${e.merchant}`} style={{cursor:'pointer'}}> ); })}
ID Date Merchant / memo Owner Category Amount Status
ev.stopPropagation()}> {e.id} {fmtDate(e.date)}
{e.merchant}
{e.memo}
 x[0]).join('').slice(0,2)} name={e.who}/>{e.who}
} {confirmDelete && setConfirmDelete(false)} onConfirm={()=>{const count=selected.length; d.expenses=d.expenses.filter(e=>!selected.includes(e.id));setConfirmDelete(false);setMessage(`${count} expense${count===1?'':'s'} deleted.`);setSelected([]);}}/>} ); }; const ExpenseDetail = () => { const d = FF_DATA; const e = d.expenses.find(x => x.id === FF_SESSION.expenseId) || d.expenses[0]; const [commented, setCommented] = React.useState(false); if(!e)return ffGo('new-expense')}>New expense}/>; return ( <> {e.merchant}} sub={`${e.id} · Submitted by ${e.who} on ${fmtDate(e.date)}`} actions={<> } /> {commented &&
Comment added to {e.id} in this prototype.
}
{d.categories.find(c=>c.id===e.cat).name} {fmtDate(e.date)} •••• {e.cardLast4} {e.memo}
Download}>
{e.merchant} · sample receipt
Sample receipt for {e.id}
{[ { who: e.who, act: "Submitted expense", ts: "May 22, 9:12 AM" }, { who: "System", act: "Policy check passed", ts: "May 22, 9:12 AM" }, { who: ffRole() === 'manager' ? FF_DATA.me.manager.name : "Taylor Brooks", act: e.status === 'approved' ? "Manager approved" : "Routed for approval", ts: "May 22, 9:15 AM" }, { who: FF_DATA.me[ffRole()].name, act: "Viewing now", ts: "Just now" } ].map((a, i, arr) => (
x[0]).join('').slice(0,2)} name={a.who}/>
{a.who} · {a.act}
{a.ts}
))}
{[ { name:"Taylor Brooks", title:"Head of Sales", status:"approved" }, { name:"Morgan Ellis", title:"Finance", status:"pending" } ].map((s, i) => (
x[0]).join('').slice(0,2)} name={s.name}/>
{s.name}
{s.title}
))}
{e.policy === "ok" ? "Within policy" : "Policy exception"}
{e.policy === "ok" ? "No policy exception in this sample record." : "This record has a policy exception requiring review."}
); }; const DetailRow = ({ label, children }) => (
{label}
{children}
); const NewExpense = () => { const d = FF_DATA; const [form,setForm] = React.useState({merchant:'',date:'',amount:'',cat:'',memo:'',project:'',payment:''}); const [errors,setErrors] = React.useState({}); const change = (key,value) => {setForm({...form,[key]:value}); if(key === 'amount') setErrors({...errors,amount:ffAmountError(value)});}; const blur = key => { const messages={merchant:'Enter a merchant.',date:'Enter a valid date (YYYY-MM-DD).',cat:'Choose a category.',project:'Choose a project / cost center.',payment:'Choose a payment method.'}; const invalid=key==='merchant'?!form[key].trim():key==='date'?!/^\d{4}-\d{2}-\d{2}$/.test(form.date):!form[key]; setErrors({...errors,[key]:invalid?messages[key]:''}); }; const submit = () => { const problems = {}; if(!form.merchant.trim()) problems.merchant = 'Enter a merchant.'; if(!/^\d{4}-\d{2}-\d{2}$/.test(form.date) || Number.isNaN(Date.parse(form.date)) || new Date(form.date).toISOString().slice(0,10) !== form.date) problems.date = 'Enter a valid date (YYYY-MM-DD).'; const amountError = ffAmountError(form.amount); if(amountError) problems.amount = amountError; if(!form.cat) problems.cat = 'Choose a category.'; if(!form.project) problems.project = 'Choose a project / cost center.'; if(!form.payment) problems.payment = 'Choose a payment method.'; setErrors(problems); if(Object.keys(problems).length) return; const id = 'EXP-' + (Math.max(2841,...d.expenses.map(e => Number(e.id.split('-')[1])))+1); d.expenses.unshift({id,merchant:form.merchant.trim(),date:form.date,amount:Number(form.amount),cat:form.cat,memo:form.memo,who:d.me[ffRole()].name,status:'pending',policy:'ok',cardLast4:form.payment.startsWith('FinFlow')?'4112':'Personal',project:form.project}); ffToast(id + ' submitted for approval. Status: Pending.','expenses'); ffGo('expenses'); }; const fieldError = key => errors[key] &&
{errors[key]}
; return ( <> } /> {Object.values(errors).some(Boolean) &&
Check your expense
    {Object.entries(errors).filter(([,value])=>value).map(([key,value])=>
  • {value}
    • )}
}
change("merchant",e.target.value)} onBlur={()=>blur('merchant')} placeholder="e.g. United Airlines"/>{fieldError("merchant")}
change("date",e.target.value)} onBlur={()=>blur('date')} placeholder="YYYY-MM-DD"/>{fieldError("date")}
change("amount",e.target.value)} placeholder="0.00"/>{fieldError("amount")}
{fieldError("cat")}