/* FinFlow Screens — Onboarding, Audit, Notif Center, Help, States */ /* ---------- Onboarding — 6-step, sidebar step list ---------- */ /* Sign in / SSO / password recovery were retired: onb-workspace (workspace creation) is now the single entry point for the mock flow. */ const ONB_STEPS = [ { id:"onb-workspace", label:"Workspace" }, { id:"onb-company", label:"Company details" }, { id:"onb-connect", label:"Connect systems" }, { id:"onb-invite", label:"Invite team" }, { id:"onb-policy", label:"Expense policy" }, { id:"onb-success", label:"Success" }, ]; const OnboardingShell = ({ step, children, title, sub, next, nextId, onNext, back, backId, skip }) => (
Onboarding · Step {step+1} of {ONB_STEPS.length}

{title}

{sub &&

{sub}

}
{children}
{back ? : }
{skip !== false && }
); /* WelcomeWorkspace needs its own heading + a signup-style CTA row instead of the shell's default Continue/Skip footer, so it composes the sidebar directly rather than reusing the generic OnboardingShell body. */ const WelcomeWorkspace = () => { const [name, setName] = React.useState(""); const [email, setEmail] = React.useState(""); const [errors, setErrors] = React.useState({ name: false, email: false }); const handleContinue = () => { const nameOk = name.trim().length > 0; const emailOk = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.trim()); if (!nameOk || !emailOk) { setErrors({ name: !nameOk, email: !emailOk }); return; } FF_SESSION.workspace = name.trim(); ffGo('onb-company'); }; const errorStyle = { borderColor: 'var(--ff-rejected)' }; return (
Get started

Welcome to FinFlow

Let's create your finance workspace.

setErrors(x=>({...x,name:!name.trim()}))} className="ff-input ff-input--lg" placeholder="Your company name" value={name} style={errors.name ? errorStyle : undefined} onChange={e=>{setName(e.target.value); if (errors.name) setErrors(x=>({...x, name:false}));}}/> {errors.name &&
Enter a workspace name.
}
setErrors(x=>({...x,email:!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.trim())}))} className="ff-input ff-input--lg" placeholder="you@company.com" value={email} style={errors.email ? errorStyle : undefined} onChange={e=>{setEmail(e.target.value); if (errors.email) setErrors(x=>({...x, email:false}));}}/> {errors.email &&
Enter a valid company email.
}
or
SOC 2·PCI DSS·GDPR
By continuing, you agree to FinFlow's Terms and Privacy Policy.
); }; const CompanyDetails = () => { const [name,setName]=React.useState(FF_SESSION.workspace||''); const [website,setWebsite]=React.useState(''); const [errors,setErrors]=React.useState({}); const validate=()=>({name:name.trim()?'':'Enter a company name.',website:!website.trim()||/^(https?:\/\/)?[a-z0-9.-]+\.[a-z]{2,}(\/.*)?$/i.test(website.trim())?'':'Enter a valid company website.'}); const submit=()=>{const next=validate();setErrors(next);if(!Object.values(next).some(Boolean)){FF_SESSION.workspace=name.trim();ffToast('Company details saved.','onb-connect');ffGo('onb-connect');}}; return
setName(e.target.value)} onBlur={()=>setErrors({...errors,name:validate().name})}/>
setWebsite(e.target.value)} onBlur={()=>setErrors({...errors,website:validate().website})}/>
 ;}; const ConnectSystems = () => { const [connections,setConnections] = React.useState(FF_SESSION.connections); const [message,setMessage] = React.useState(FF_SESSION.toast||''); const toggle = name => {const next = {...connections,[name]:!connections[name]};FF_SESSION.connections = next;setConnections(next);setMessage(`${name} ${next[name] ? 'connected (demo)' : 'disconnected'}.`);}; return (
Accounting software
{[ { name:"QuickBooks", brand:"quickbooks" }, { name:"Xero", brand:"xero" }, { name:"SAP", brand:"sap" }, { name:"Sage", brand:"sage" }, ].map(a => (
{a.brand ? : }
{a.name}
 ))}
Bank & corporate cards
{[ { name:"Wise", brand:"wise", desc:"Business checking, ACH out" }, { name:"Brex", brand:"brex", desc:"Cards, statements" }, { name:"Plaid · Other", icon:"plugs", desc:"12,000+ institutions" }, ].map(b => (
{b.brand ? : }
{b.name}
{b.desc}
 ))}
Encrypted · Read-only · SOC 2 compliant
FinFlow never moves money on a connected account without an explicit action from your team.
 ); }; const InviteTeam = () => { const [rows, setRows] = React.useState([{e:"taylor.brooks@reyonal.com",r:"Manager"},{e:"casey.parker@reyonal.com",r:"Employee"},{e:"quinn.avery@reyonal.com",r:"Employee"}]); const [errors, setErrors] = React.useState({}); const update = (i, key, value) => setRows(rows.map((row, idx)=>idx===i?{...row,[key]:value}:row)); const submit = () => { const next={}; rows.forEach((row,i)=>{ if(!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(row.e.trim())) next[`invite-${i}`]=`Enter a valid email for invite ${i+1}.`; }); setErrors(next); if(!Object.keys(next).length) ffGo('onb-policy'); }; return
{rows.map((row,i)=>
update(i,'e',e.target.value)} onBlur={()=>setErrors({...errors,...(/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(row.e.trim())?{[`invite-${i}`]:''}:{[`invite-${i}`]:`Enter a valid email for invite ${i+1}.`})})} placeholder="name@company.com"/>
)}
Or bulk-invite via CSV / SCIM (Okta connected)
You can always invite more teammates later.
; }; const ExpensePolicy = () => { const [values,setValues]=React.useState({daily:'500',monthly:'5000',expense:'1000',receipts:'25',travel:'300',meals:'75',office:'200',software:'150'}); const [errors,setErrors]=React.useState({}); const submit=()=>{const next={}; Object.entries(values).forEach(([k,v])=>{if(!/^\d+(\.\d{1,2})?$/.test(v)||Number(v)<=0) next[k]='Enter a positive amount.';}); setErrors(next); if(!Object.keys(next).length) ffGo('onb-success');}; const field=(key,label)=>
setValues({...values,[key]:e.target.value})} onBlur={()=>setErrors({...errors,...(/^(\d+(\.\d{1,2})?)$/.test(values[key])&&Number(values[key])>0?{[key]:''}:{[key]:'Enter a positive amount.'})})}/>
; return
Approval workflow
{["Manager approval","Department approval","Auto-approval under limit"].map((o, i) => ( ))}
Receipt requirement
{["Always","Above amount","Never"].map((o, i) => ( ))}
Spend limits
{field('daily','Daily')}{field('monthly','Monthly')}{field('expense','Per-expense')}{field('receipts','Receipts required over')}
Category limits
{field('travel','Travel per night')}{field('meals','Meals per day')}{field('office','Office per month')}{field('software','Software per month')}
; }; const OnboardingSuccess = () => (

Your workspace is ready.

Review your prototype setup below. Connections are simulated; no external account is linked.

{[ { k:"Workspace", v:FF_SESSION.workspace || "Not configured" }, { k:"Connected bank", v:["Wise","Brex","Plaid · Other"].filter(n=>FF_SESSION.connections[n]).map(n=>n+" (demo)").join(", ") || "Not connected in this prototype" }, { k:"Accounting", v:["QuickBooks","Xero","SAP","Sage"].filter(n=>FF_SESSION.connections[n]).map(n=>n+" (demo)").join(", ") || "Not connected in this prototype" }, { k:"Team members", v:"Invites not sent in this prototype" }, { k:"Policies", v:"Sample policy" }, ].map(s => (
{s.k}
{s.v}
 ))}
What's next
{["Import your first expenses","Issue corporate cards","Create custom approval workflows","View spend analytics"].map(n => (
{n}
))}
); /* ---------- Audit ---------- */ /* Audit actions aren't expense/card statuses, but they still read as a status column — so they borrow the same seven-group semantic system (ff-badge--success/warning/info/review/action/danger/neutral) instead of inventing new colors or defaulting every action to one identical badge. */ const AUDIT_ACTION_GROUP = { "Approved": "success", "Flagged": "review", "Policy Check": "info", "Submitted": "info", "Edited Policy": "neutral", "Issued Card": "neutral", "Sign-in": "neutral", }; const AuditLog = () => { const d = FF_DATA; const [query, setQuery] = React.useState(""); const [filter, setFilter] = React.useState("all"); const entries = d.auditEntries.filter(entry => { const matchesQuery = !query.trim() || `${entry.actor} ${entry.target}`.toLowerCase().includes(query.trim().toLowerCase()); const matchesFilter = filter === "all" || (filter === "approve" && entry.action === "Approved") || (filter === "policy" && entry.action.includes("Policy")) || (filter === "card" && entry.action === "Issued Card") || (filter === "signin" && entry.action === "Sign-in"); return matchesQuery && matchesFilter; }); return ( <> }/>
setQuery(e.target.value)} aria-label="Search audit log"/>
{entries.length === 0 ? ( {setFilter('all');setQuery('');}}>Clear filters}/> ) : ( {entries.map((a, i) => ( ))}
Timestamp (UTC-7)ActorActionTargetIP / agent
{a.ts} {a.actor !== "System" && a.actor !== "Okta SSO" && x[0]).join('').slice(0,2)} name={a.actor}/>}{a.actor} {a.action} {a.target} 10.0.4.221 · Chrome 128
)} ); }; /* ---------- Notif Center ---------- */ const NotificationsCenter = () => { const d = FF_DATA; const [filter, setFilter] = React.useState("all"); const [markedRead, setMarkedRead] = React.useState(false); const visible = filter === "all" ? d.notifications : d.notifications.filter(n => n.kind === filter); return ( <> }/>
{[ {id:"all", label:"All", icon:"tray", count:d.notifications.length}, {id:"approval", label:"Approvals", icon:"check-square", count:d.notifications.filter(n => n.kind === "approval").length}, {id:"policy", label:"Policy", icon:"warning", count:d.notifications.filter(n => n.kind === "policy").length}, {id:"payout", label:"Reimbursements", icon:"arrows-clockwise", count:d.notifications.filter(n => n.kind === "payout").length}, {id:"card", label:"Cards", icon:"credit-card", count:d.notifications.filter(n => n.kind === "card").length} ].map((t) => ( {e.preventDefault();setFilter(t.id);}}> {t.label}{t.count} ))}
{markedRead &&
All notifications marked read.
} {visible.length === 0 ? setFilter('all')}>View all notifications}/> : visible.map((n, i, arr) => (
{n.text}
{n.ts} ago
{!n.read && }
))}
); }; /* ---------- Help ---------- */ const Help = () => { const topics = [ ["Getting started","Connect bank, invite team, set policy","book-open"], ["Expenses & receipts","OCR, categories, mileage, policies","receipt"], ["Cards","Issue, limits, freezes, statements","credit-card"], ["Approvals","Routing, bulk, escalations","check-square"], ["Reports & close","Builder, exports, QBO sync","chart-bar"], ["Admin & security","SSO, SCIM, audit, retention","shield-check"] ]; const [query, setQuery] = React.useState(""); const matches = topics.filter(([title, body]) => `${title} ${body}`.toLowerCase().includes(query.trim().toLowerCase())); return <>
setQuery(e.target.value)} aria-label="Search FinFlow help"/> /
{query &&
{matches.length} help result{matches.length === 1 ? '' : 's'}
}
{matches.map(([t, s, i]) =>
{t}
{s}
)} {query && matches.length === 0 && setQuery('')}>Clear search}/>}
Still stuck? Talk to a human.
Average response · 4 minutes during business hours
 ; }; /* ---------- States: loading / empty / error / success / confirmation ---------- */ const LoadingDashboard = () => ( <>
{[0,1,2].map(i => (
))}
{[0,1,2,3].map(i =>
)}
); const EmptyExpenses = () => ( <>
No expenses yet
When teammates submit expenses or your cards are swiped, you'll see them here.
); const ErrorState = () => ( <>
FinFlow is having trouble
We've been notified. Try again, or check status.finflow.app.
err_id: fff_4b22 · 503
); const SuccessApproval = () => { const items = FF_SESSION.decision?.type === "approved" ? FF_SESSION.decision.items : []; const queue = ffQueue(); const remaining = queue.length; const amount = items.reduce((sum,e)=>sum+e.amount,0); if (!items.length) return ffGo('approvals')}>Open queue}/>; const summary = items.length === 1 ? `${items[0].id} · ${items[0].merchant} · ${new Intl.NumberFormat('en-US',{style:'currency',currency:'USD'}).format(amount)} approved and routed to Finance for payment.` : `${items.length} expenses approved · total ${new Intl.NumberFormat('en-US',{style:'currency',currency:'USD'}).format(amount)}.`; return (

Approved.

{summary}

{items.length > 1 &&
{items.map(e=>
{e.id} · {e.merchant} ·
)}
}
); }; const RejectionReason = () => { const [reason,setReason] = React.useState(''); const [error,setError] = React.useState(''); const submit = () => { if(!reason.trim()) {setError('Enter a rejection reason.');return;} const items = FF_DATA.expenses.filter(e=>FF_SESSION.rejectIds.includes(e.id)); if(ffRole() === 'employee' || !items.length) {setError('Select an expense from the approvals queue before rejecting.');return;} items.forEach(e=>{e.status='rejected';e.decisionNote=reason.trim();}); FF_SESSION.decision = {type:"rejected",items:items.map(e=>({...e})),note:reason.trim()}; FF_DATA.notifications.unshift({kind:'approval',text:`${items.map(e=>e.id).join(', ')} rejected: ${reason.trim()}`,ts:'Just now'}); ffPersistSession(); ffGo('state-rejected'); }; return
{['Missing receipt','Outside expense policy','Duplicate expense'].map(value=>)}