{/* 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); const [orders, setOrders] = React.useState([]); const [liveError, setLiveError] = React.useState(null); const [liveLoading, setLiveLoading] = React.useState(true); const [advancingId, setAdvancingId] = React.useState(null); const normalizeLiveOrder = (order) => { const state = { payment_pending:{ status:'awaiting_payment', cta:null, next:null }, payment_confirmed:{ status:'new', cta:'Accept order', next:'sent_to_kitchen' }, sent_to_kitchen:{ status:'cooking', cta:'Start preparing', next:'preparing' }, preparing:{ status:'cooking', cta:'Mark ready', next:'ready_for_collection' }, ready_for_collection:{ status:'ready', cta:null, next:null }, agent_assigned:{ status:'delivery', cta:null, next:null }, picked_up:{ status:'delivery', cta:null, next:null }, on_the_way:{ status:'delivery', cta:null, next:null }, delivered:{ status:'completed', cta:null, next:null }, cancelled:{ status:'cancelled', cta:null, next:null }, refunded:{ status:'refunded', cta:null, next:null }, draft:{ status:'draft', cta:null, next:null }, }[order.status] || { status:'draft', cta:null, next:null }; const orderItems = order.items || []; return { id:order.id, name:'Customer', type:order.fulfillment_type === 'collection' ? 'collection' : 'delivery', estate:'Address protected', items:orderItems.map(item=>`${item.quantity}× ${item.name}`).join(', ') || 'Order items', qty:orderItems.reduce((sum,item)=>sum + Number(item.quantity || 0),0), total:Number(order.total || 0), mins:Math.max(0, Math.floor((Date.now()-new Date(order.created_at).getTime())/60000)), status:state.status, live:true, rawStatus:order.status, nextApiStatus:state.next, cta:state.cta, bridge:true, }; }; const refreshLiveOrders = React.useCallback(async () => { setLiveLoading(true); setLiveError(null); try { setOrders((await loadVendorLiveOrders()).map(normalizeLiveOrder)); } catch (error) { setLiveError(error instanceof Error ? error.message : 'Live orders could not be loaded.'); } finally { setLiveLoading(false); } }, []); React.useEffect(()=>{ refreshLiveOrders(); }, [refreshLiveOrders]); const [filter, setFilter] = React.useState('active'); const [metric, setMetric] = React.useState('rev'); const advance = async (id) => { const order = orders.find(item=>item.id===id); if (!order || advancingId || !order.nextApiStatus) return; if (!order.live) { setOrders(os => os.map(o => o.id===id ? { ...o, status: nextStatus(o), mins: 0 } : o)); return; } setAdvancingId(id); try { await transitionVendorOrder(id, order.nextApiStatus); app.toast(`Order moved to ${order.nextApiStatus.replaceAll('_',' ')}`); await refreshLiveOrders(); } catch (error) { app.toast(error instanceof Error ? error.message : 'Order transition failed.'); } finally { setAdvancingId(null); } }; const counts = { active: orders.filter(o=>!TERMINAL_ORDER_STATUSES.has(o.status)).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' ? !TERMINAL_ORDER_STATUSES.has(o.status) : filter==='completed' ? TERMINAL_ORDER_STATUSES.has(o.status) : 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 ( ); })}

{/* column header */}

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

{liveLoading ?

Loading live kitchen queue…

: liveError ?

{liveError}

Try again

: 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)}/>}