// v-overview.jsx — Profit-ops command center: pacing vs target & vs last week, // delivery focus, reviews & reputation, performance scorecard, next action. // ─── Small shared bits ─────────────────────────────────────────────── function CompareChip({ label, delta, dir }) { const c = dir==='up' ? '#247a41' : dir==='down' ? '#b0341a' : '#7C675B'; return (
{label} {dir==='up'&&}{dir==='down'&&}{delta}
); } // ─── Profit pacing hero ────────────────────────────────────────────── function ProfitHero({ app }) { const p = PROFIT; const expectedByNow = p.revenue.target * p.pace; const projected = Math.round(p.revenue.now / p.pace); const ahead = projected >= p.revenue.target; const projDelta = Math.round((projected/p.revenue.target - 1)*100); const vsLastWeek = Math.round((p.revenue.now/p.revenue.lastWeekToDate - 1)*100); const vsYesterday = Math.round((p.revenue.now/p.revenue.yesterdayToDate - 1)*100); const pacePct = Math.min(100, Math.round(p.revenue.now/p.revenue.target*100)); const expectedPct = Math.round(p.pace*100); const wfMax = Math.max(...p.waterfall.map(w=>Math.abs(w.value))); return (
{/* pacing */}
 Profit today · live {ahead?`On track to beat target`:'Behind pace'}
£{p.net.now.toLocaleString()}
Net profit · {p.net.marginPct}% margin
£{p.revenue.now.toLocaleString()}
Gross sales
{/* pace-to-target bar */}
Gross vs daily target £{p.revenue.now.toLocaleString()} / £{p.revenue.target.toLocaleString()}
{/* "where you should be by now" marker */}
pace
Projected close £{projected.toLocaleString()} — {ahead?{projDelta>=0?'+':''}{projDelta}% over target:{projDelta}% under target}
{/* comparisons */}
=0?'+':''}${vsLastWeek}%`} dir={vsLastWeek>=0?'up':'down'}/> =0?'+':''}${vsYesterday}%`} dir={vsYesterday>=0?'up':'down'}/>
{/* profit waterfall */}
Where today's £ goes
{p.waterfall.map(w=>{ const isNeg = w.value<0; const col = w.kind==='end'?'#2E8B4E': w.kind==='start'?'var(--horse-brown)':'#C13B1F'; return (
{w.label} {isNeg?'−':''}£{Math.abs(w.value).toLocaleString()}
); })}
); } // ─── KPI comparison tile (target + vs last week) ───────────────────── function KpiTile({ k }) { const Icon = I[k.icon] || I.grid; const dirColor = k.dir==='up' ? '#247a41' : k.dir==='down' ? '#b0341a' : '#7C675B'; const hitTarget = k.targetMet; return (
{k.dir==='up'&&}{k.dir==='down'&&}{k.delta}
{k.value}
{k.label}
{hitTarget?:}{k.target} · {k.sub}
); } // ─── Performance scorecard row ─────────────────────────────────────── function ScoreRow({ m, last }) { const good = m.good==='high' ? m.value>=m.target : m.value<=m.target; const fmt = (v)=> m.id==='cancel' ? v.toFixed(1)+m.unit : v+m.unit; return (
{m.label}
{fmt(m.value)}
{m.vsLastWeek}
{good?:}{fmt(m.target)}
); } // ─── Delivery focus ────────────────────────────────────────────────── function DeliveryCard() { const d = DELIVERY; const distMax = Math.max(...d.dist.map(x=>x.pct)); return (
 Delivery focus {d.avgTime<=d.target?'Within target':'Over target'}
{d.onTime}%
on-time
{[['Avg delivery',`${d.avgTime} min`,`target ${d.target}`],['vs last week',`${d.lastWeekTime} min`,'was slower'],['Drivers out',d.driversOut,`${d.driversIdle} idle`],['Late orders',`${d.late}%`,'of today']].map(([l,v,s])=>(
{v}
{l} · {s}
))}
Delivery time distribution
{d.dist.map(x=>(
{x.pct}%
{x.b}
))}
Longest wait: {d.longestWait}
); } // ─── Reviews & reputation ──────────────────────────────────────────── function Stars({ n, s=12 }) { return {[1,2,3,4,5].map(i=>( ))}; } function ReviewsCard({ app }) { const r = REVIEWS; const [replied, setReplied] = React.useState(()=>{ const m={}; r.recent.forEach(rv=>{ if(rv.replied) m[rv.id]='__seed'; }); return m; }); const [composer, setComposer] = React.useState(null); // review being replied to const [showAll, setShowAll] = React.useState(false); const [filter, setFilter] = React.useState('all'); const isReplied = (rv)=> !!replied[rv.id]; const shown = r.recent.slice(0,4); const openCount = r.recent.filter(rv=>!isReplied(rv)).length; const send = (rv, text)=>{ setReplied(m=>({ ...m, [rv.id]:text })); setComposer(null); app.toast(`Reply sent to ${rv.name}`); }; const ReviewRow = ({ rv, last })=>(
{rv.name} · {rv.estate} · {rv.when} {!isReplied(rv) && Needs reply}

{rv.text}

{isReplied(rv) && replied[rv.id]!=='__seed' && (
Your reply
{replied[rv.id]}
)}
{rv.item} {isReplied(rv) ? Replied : }
); const filtered = filter==='all' ? r.recent : filter==='unanswered' ? r.recent.filter(rv=>!isReplied(rv)) : r.recent.filter(rv=>String(rv.stars)===filter); return (
 Reviews & reputation setShowAll(true)}>All reviews →
{r.rating}
{r.count.toLocaleString()} reviews
{r.ratingDelta} · 30d
{r.dist.map(d=>(
{d.s}
=4?'#2E8B4E':d.s===3?'#E0992A':'#C13B1F'} h={6}/>
{d.pct}%
))}
{shown.map((rv,i)=> )}
{openCount} review{openCount!==1?'s':''} awaiting a reply setShowAll(true)} icon={}>Reply to reviews
{composer && setComposer(null)} onSend={send}/>} {showAll && setComposer(rv)} onClose={()=>setShowAll(false)}/>} ); } // quick-reply templates const REPLY_TEMPLATES = [ { tag:'Thank', text:'Thanks so much for the kind words — we love making it and can\u2019t wait to feed you again soon!' }, { tag:'Apologise', text:'We\u2019re really sorry this one missed the mark. That\u2019s not our standard — please reach out and we\u2019ll make it right.' }, { tag:'Missing item', text:'Apologies the order wasn\u2019t complete — we\u2019ve flagged it with the kitchen and would love to make it up to you on your next order.' }, ]; function ReplyComposer({ rv, onClose, onSend }) { const [text, setText] = React.useState(''); return (
e.stopPropagation()} style={{ width:'100%', maxWidth:500, background:'var(--bg-surface)', borderRadius:20, boxShadow:'var(--shadow-lg)', overflow:'hidden', animation:'v-pop 240ms var(--ease-out)' }}>

Reply to {rv.name}

{rv.estate} · {rv.item}

{rv.text}

Quick start
{REPLY_TEMPLATES.map(t=>( ))}