/* FinFlow mobile screens. MobileFlow supplies navigation, role, and in-memory demo state to the same interactive phone experience in the screen directory and mobile-app.html. */ const noop = () => {}; const MobileStatusBar = ({ theme = "light" }) => (
9:41
); const MobileFrame = ({ children, theme = "light", scrollable = true, fullbleed = false }) => (
{fullbleed &&

FinFlow mobile prototype

} {/* On a real phone the OS already shows a real status bar — the faux one (fake "9:41", fake battery) is only for the desktop gallery mockup. */} {fullbleed ? null : }
{children}
); const MobileSignIn = ({ onNav = noop, onRole = noop, role = "employee", allowRoleChange = true, fullbleed = false }) => { const [email, setEmail] = React.useState('casey.parker@reyonal.com'); const [password, setPassword] = React.useState('finflow'); const [errors, setErrors] = React.useState({}); const signIn = () => { const next = {}; if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.trim())) next.email = 'Enter a valid work email.'; if (!password.trim()) next.password = 'Enter your password.'; setErrors(next); if (!Object.keys(next).length) onNav('home'); }; return (
Welcome
back, {role === 'manager' ? 'Taylor' : 'Casey'}.

{role === 'manager' ? 'Sign in to review your team’s expenses.' : 'Sign in to submit and track your expenses.'}

setEmail(e.target.value)} onBlur={()=>{if(!email.trim())setErrors(current=>({...current,email:'Enter a valid work email.'}));}} style={{background:'rgba(255,255,255,0.08)', border:'1px solid rgba(255,255,255,0.18)', color:'#fff'}}/>{errors.email&&}
setPassword(e.target.value)} onBlur={()=>{if(!password.trim())setErrors(current=>({...current,password:'Enter your password.'}));}} style={{background:'rgba(255,255,255,0.08)', border:'1px solid rgba(255,255,255,0.18)', color:'#fff'}}/>{errors.password&&}
{allowRoleChange &&
}
Reyonal · SSO available
); }; const MobileHome = ({ onNav = noop, role = 'employee', onApprove = noop, onReject = noop, notice = '', fullbleed = false }) => { const d = FF_DATA; if (role === 'manager') return ; return (
Tuesday
Hi, Casey.
My spend · May
$2,184
$316 under your avg · 6 expenses
{d.expenses.filter(e => e.who === "Casey Parker").map(e => (
onNav('timeline', e.id)} style={{padding:'12px 14px', background:'var(--ff-card)', border:'1px solid var(--ff-border)', borderRadius:10, display:'flex', gap:12, alignItems:'center', cursor:'pointer'}}>
{MERCHANT_ICON_MAP[e.merchant] ? : }
{e.merchant}
{e.date.slice(5)} · {FF_DATA.categories.find(c=>c.id===e.cat).name}
))}
); }; const MobileManagerQueue = ({ onNav = noop, onApprove = noop, onReject = noop, fullbleed = false }) => { const [rejecting, setRejecting] = React.useState(null); const [reason, setReason] = React.useState(''); const [error, setError] = React.useState(''); const items = FF_DATA.expenses.filter(e => ['pending','flagged'].includes(e.status)).sort((a,b)=>a.date.localeCompare(b.date)); const beginReject = id => {setRejecting(id);setReason('');setError('');}; const submitReject = () => { if (!reason.trim()) {setError('Enter a reason for this rejection.');return;} onReject(rejecting, reason.trim()); }; return
Manager
Approvals

{items.length} expenses awaiting your decision.

{!items.length ? :
{items.map(e=>
)}
}
{rejecting &&

Reject expense

The submitter will receive this reason.

{['Outside policy','Missing receipt','Needs more detail'].map(value=>)}