{/* y axis gridlines */} {[1,0.75,0.5,0.25,0].map((f,i)=>(

{metric==='rev' ? '£'+Math.round(max*f).toLocaleString() : Math.round(max*f)}

))} {/* bars */}

14?3:6 }}> {data.map((d,i)=>{ const h = Math.max(3, d[metric]/max*100); const isPeak = i===peakIdx; const on = hover===i; return (

setHover(i)} onMouseLeave={()=>setHover(null)} style={{ flex:1, height:'100%', display:'flex', flexDirection:'column', justifyContent:'flex-end', alignItems:'center', position:'relative', cursor:'default' }}> {on && (

{fmt(d[metric])}

{metric==='rev'?d.ord+' orders':'£'+d.rev.toLocaleString()}

)}

); })}

{/* x labels */}

14?3:6 }}> {data.map((d,i)=>(

14 && i%5!==0 && i!==data.length-1 ? 'hidden':'visible' }}>{d.label}

))}

); } // ─── KPI tile (local) ──────────────────────────────────────────────── function OTile({ icon, value, label, sub, delta, dir }) { const Icon = I[icon] || I.grid; const c = dir==='up' ? '#247a41' : dir==='down' ? '#b0341a' : '#7C675B'; return (

{dir==='up'&&}{dir==='down'&&}{delta}

{value}

{label}

{sub}

); } // ─── Payout statements modal ───────────────────────────────────────── function StatementsModal({ app, onClose }) { return (

e.stopPropagation()} style={{ width:'100%', maxWidth:540, background:'var(--bg-surface)', borderRadius:20, boxShadow:'var(--shadow-lg)', overflow:'hidden', animation:'v-pop 240ms var(--ease-out)' }}>

Payout statements

{PAYOUTS.map((p,i)=>(

{p.period}

{p.id} · gross £{p.gross.toLocaleString()} · fee £{p.fees.toLocaleString()}

£{p.net.toLocaleString()}

{p.status==='paid'?'Paid':'Pending'}

app.toast(`Statement ${p.id} downloaded (PDF)`)} disabled={p.status!=='paid'}>PDF

))}

Statements are generated when a payout settles. Pending periods appear once paid.

); } // ─── Screen ────────────────────────────────────────────────────────── function OrdersScreen({ app }) { const [stmtsOpen, setStmtsOpen] = React.useState(false); // Bridged orders — placed live in the Lasso customer app (demo bridge via localStorage) const readBridge = () => { try { return (JSON.parse(localStorage.getItem('lasso_bridge_orders') || '[]')).map(b => ({ ...b, mins: Math.max(0, Math.floor((Date.now() - (b.ts || Date.now())) / 60000)), })); } catch (e) { return []; } }; const [orders, setOrders] = React.useState(() => [...readBridge(), ...ORDERS]); React.useEffect(() => { const sync = () => setOrders(os => { const known = new Set(os.map(o => o.id)); const fresh = readBridge().filter(b => !known.has(b.id)); return fresh.length ? [...fresh, ...os] : os; }); window.addEventListener('storage', sync); const t = setInterval(sync, 2000); return () => { window.removeEventListener('storage', sync); clearInterval(t); }; }, []); const [filter, setFilter] = React.useState('active'); const [metric, setMetric] = React.useState('rev'); const advance = (id) => setOrders(os => os.map(o => o.id===id ? { ...o, status: nextStatus(o), mins: 0 } : o)); const counts = { active: orders.filter(o=>o.status!=='completed').length, new: orders.filter(o=>o.status==='new').length, cooking: orders.filter(o=>o.status==='cooking').length, ready: orders.filter(o=>o.status==='ready').length, completed: orders.filter(o=>o.status==='completed').length, }; const shown = orders.filter(o => filter==='active' ? o.status!=='completed' : filter==='completed' ? o.status==='completed' : o.status===filter); const range = app.range; const sum = SALES_SUMMARY[range] || SALES_SUMMARY.today; const chartData = range==='today' ? SALES_HOURLY : range==='week' ? SALES_DAILY : SALES_MONTHLY; const rangeWord = range==='today' ? 'today' : range==='week' ? 'this week' : 'this month'; const mixTotal = ORDER_MIX.reduce((s,m)=>s+m.count,0); const deliveryPct = Math.round(ORDER_MIX[0].count/mixTotal*100); const topMaxRev = Math.max(...TOP_SELLERS.map(t=>t.rev)); const tabs = [ { id:'active', label:'Active', n:counts.active }, { id:'new', label:'New', n:counts.new }, { id:'cooking', label:'Cooking', n:counts.cooking }, { id:'ready', label:'Ready', n:counts.ready }, { id:'completed', label:'Completed', n:counts.completed }, ]; return (

} onClick={()=>app.toast('Exporting sales report to CSV…')}>Export

}/> {/* KPI row */}

{/* Live order queue */}

Live order queue

{tabs.map(t=>{ const on = filter===t.id; return ( ); })}

{}} label="Queue updated"/>

{/* column header */}

{['Customer','Fulfilment','Items','Total','Status','Action'].map((h,i)=>( {h} ))}

{shown.length===0 ? (

No {filter==='active'?'open':filter} orders right now.

) : shown.map((o,i)=> )} {/* Sales chart + fulfilment */}

Sales {rangeWord}

£{sum.revenue.toLocaleString()} {sum.revDelta} {sum.orders.toLocaleString()} orders

{range==='today' ? <>Peak trading 20:00–21:00 — staff the kitchen for the evening rush. : <>Weekends drive 38% of takings. Fri–Sun is your window.}

{/* Fulfilment mix */} Fulfilment {rangeWord}

{deliveryPct}%

delivery

{ORDER_MIX.map(m=>(

{m.label} {m.count}

))}

{[['Avg delivery','27 min'],['Avg prep',sum.prep+' min'],['On-time','94%'],['Acceptance',sum.accept+'%']].map(([l,v])=>(

{v}

{l}

))}

{/* Top sellers + payouts */}

{/* Top sellers */}

Top sellers {rangeWord} app.nav('menu')} style={{ fontFamily:'var(--font-display)', fontWeight:800, fontSize:12, color:'var(--brand-orange)', cursor:'pointer' }}>Menu →

{TOP_SELLERS.map((t,i)=>(

{i+1}

{t.name}

{t.qty} sold

£{t.rev}

))}

{/* Payouts */}

Payouts & reconciliation setStmtsOpen(true)} style={{ fontFamily:'var(--font-display)', fontWeight:800, fontSize:12, color:'var(--brand-orange)', cursor:'pointer' }}>Statements →

{['Period','Gross','Lasso fee','Net','Status'].map((h,i)=>( =1&&i<=3?'right':'left' }}>{h} ))}

{PAYOUTS.map((p,i)=>(

{p.period}

{p.id}

£{p.gross.toLocaleString()} −£{p.fees.toLocaleString()} £{p.net.toLocaleString()}

{p.status==='paid'?'Paid':'Pending'}

{p.date}

))}

{stmtsOpen && setStmtsOpen(false)}/>}