// v-menu.jsx — Menu Manager: item table + health score + recommendations const MARGIN_TONE = { high:{tone:'green',label:'High'}, med:{tone:'amber',label:'Medium'}, low:{tone:'red',label:'Low'} }; function MenuRow({ it, app, onOpen, last }) { const m = MARGIN_TONE[it.margin]; return (
onOpen(it)} style={{ display:'grid', gridTemplateColumns:'2.4fr 0.8fr 1fr 1.3fr 0.9fr 1fr 1fr 1.1fr', alignItems:'center', gap:10, padding:'12px 18px', cursor:'pointer', borderBottom: last?'none':'1px solid var(--soft-line)', opacity: it.avail?1:0.62, transition:'background 150ms' }} onMouseEnter={(e)=>e.currentTarget.style.background='var(--bg-elevated)'} onMouseLeave={(e)=>e.currentTarget.style.background='transparent'}> {/* name + photo */}
{it.photoUrl ? : !it.photo && }
{it.name} {it.best && } style={{ fontSize:9.5, padding:'2px 6px' }}>Best seller} {it.isNew && New}
{it.id.toUpperCase()}
{/* price */}
£{it.price.toFixed(2)}
{/* availability */}
{it.avail ? Available : Off}
{/* popularity */}
80?'#2E8B4E':it.pop>55?'#E0992A':'#C13B1F'} h={6}/>
{it.pop}
{/* margin */}
{m.label}
{/* photo */}
{it.photo ? Photo : Missing}
{/* modifiers */}
{it.mods==='full' && Full} {it.mods==='partial' && Partial} {it.mods==='none' && None}
{/* trend + promote */}
); } // ─── Add-item editor (full controls) ───────────────────────────────── function MSeg({ label, options, value, onChange }) { return (
{label}
{options.map(o=>{ const on = o.value===value; return ; })}
); } const FLD_LABEL = { fontFamily:'var(--font-display)', fontWeight:700, fontSize:10.5, letterSpacing:'0.06em', textTransform:'uppercase', color:'var(--warm-stone)', marginBottom:7, display:'block' }; const FLD_INPUT = { width:'100%', boxSizing:'border-box', background:'var(--bg-app)', border:'1px solid var(--soft-line)', borderRadius:9, padding:'10px 12px', fontFamily:'var(--font-body)', fontSize:13.5, color:'var(--fg-primary)', outline:'none' }; // Build-your-own presets — instant scaffolds the vendor can then edit const BYO_TEMPLATES = { pizza: { groups:[ { n:'Size', s:'one', r:true, o:[['10\" personal',0],['12\" classic',2.5],['14\" sharing',4]] }, { n:'Base & crust', s:'one', r:true, o:[['Classic',0],['Stuffed crust',2],['Gluten-free',1.5]] }, { n:'Sauce', s:'one', r:false, o:[['Tomato',0],['BBQ',0],['Garlic base',0.5]] }, { n:'Extra toppings', s:'any', r:false, max:6, o:[['Pepperoni',1.5],['Mushrooms',1],['Nduja',2],['Extra cheese',1.5],['Jalapeños',1],['Red onion',0.8]] }, ]}, burger: { groups:[ { n:'Patty', s:'one', r:true, o:[['Single',0],['Double',3]] }, { n:'Cheese', s:'one', r:false, o:[['American',0.8],['Cheddar',0.8],['No cheese',0]] }, { n:'Toppings', s:'any', r:false, o:[['Bacon',1.5],['Avocado',1.5],['Fried egg',1.2],['Caramelised onion',1]] }, { n:'Sauce', s:'any', r:false, max:2, o:[['Burger sauce',0],['BBQ',0],['Sriracha mayo',0.5]] }, { n:'Make it a meal', s:'one', r:false, o:[['Just the burger',0],['Add fries',3],['Fries & drink',5]] }, ]}, }; const byoUid = ()=> Math.random().toString(36).slice(2,8); // ─── Modifier-group editor (size / toppings / sauces …) ────────────── function ModGroupEditor({ groups, setGroups }) { const patchG=(id,p)=>setGroups(gs=>gs.map(g=>g.id===id?{...g,...p}:g)); const patchO=(gid,oid,p)=>setGroups(gs=>gs.map(g=>g.id!==gid?g:{...g,options:g.options.map(o=>o.id===oid?{...o,...p}:o)})); const addOpt=(gid)=>setGroups(gs=>gs.map(g=>g.id!==gid?g:{...g,options:[...g.options,{id:byoUid(),name:'',price:0}]})); const delOpt=(gid,oid)=>setGroups(gs=>gs.map(g=>g.id!==gid?g:{...g,options:g.options.filter(o=>o.id!==oid)})); const delGroup=(id)=>setGroups(gs=>gs.filter(g=>g.id!==id)); return (
{groups.map((g,gi)=>(
{gi+1} patchG(g.id,{name:e.target.value})} placeholder="Group name — e.g. Size, Toppings" maxLength={28} style={{ ...FLD_INPUT, flex:1, padding:'8px 11px', fontFamily:'var(--font-display)', fontWeight:700, fontSize:13 }}/>
patchG(g.id,{select:v})}/>
patchG(g.id,{required:!g.required})} role="button" style={{ display:'flex', alignItems:'center', gap:7, cursor:'pointer' }}> patchG(g.id,{required:!g.required})}/> Required
{g.select==='any' && (
Max {const n=e.target.value.replace(/\D/g,'');patchG(g.id,{max:n?Math.max(1,parseInt(n)):null});}} placeholder="∞" style={{ ...FLD_INPUT, width:46, padding:'7px 6px', textAlign:'center' }}/>
)}
{g.options.map(o=>(
patchO(g.id,o.id,{name:e.target.value})} placeholder="Option name" maxLength={30} style={{ ...FLD_INPUT, flex:1, padding:'8px 11px' }}/>
+£ patchO(g.id,o.id,{price:parseFloat(e.target.value.replace(/[^0-9.]/g,''))||0})} inputMode="decimal" placeholder="0" style={{ ...FLD_INPUT, width:'100%', boxSizing:'border-box', padding:'8px 8px 8px 26px' }}/>
))}
))}
); } function AddItemModal({ app, onClose, onAdd }) { const [name, setName] = React.useState(''); const [catSel, setCatSel] = React.useState(MENU[0].cat); const [newCat, setNewCat] = React.useState(''); const usingNew = catSel==='__new'; const [price, setPrice] = React.useState(''); const [desc, setDesc] = React.useState(''); const [avail, setAvail] = React.useState(true); const [margin, setMargin] = React.useState('high'); const [photoUrl, setPhotoUrl] = React.useState(null); const [groups, setGroups] = React.useState([]); const fileRef = React.useRef(null); const onFile = (e)=>{ const f=e.target.files&&e.target.files[0]; if(!f) return; const r=new FileReader(); r.onload=()=>setPhotoUrl(r.result); r.readAsDataURL(f); }; const priceNum = parseFloat(price); const catName = usingNew ? newCat.trim() : catSel; const valid = name.trim().length>0 && priceNum>0 && (!usingNew || newCat.trim().length>0); const addGroup=()=>setGroups(gs=>[...gs,{ id:byoUid(), name:'', select:'any', required:false, max:null, options:[{id:byoUid(),name:'',price:0}] }]); const applyTemplate=(k)=>setGroups(BYO_TEMPLATES[k].groups.map(g=>({ id:byoUid(), name:g.n, select:g.s, required:!!g.r, max:g.max??null, options:g.o.map(o=>({ id:byoUid(), name:o[0], price:o[1] })) }))); // build price range from the configured groups const basePrice = priceNum>0?priceNum:0; const reqAdds = groups.filter(g=>g.required&&g.options.length).reduce((s,g)=>s+Math.min(...g.options.map(o=>+o.price||0)),0); const maxAdds = groups.reduce((s,g)=>{ const ps=g.options.map(o=>+o.price||0); if(!ps.length) return s; if(g.select==='one') return s+Math.max(...ps,0); const sorted=ps.filter(p=>p>0).sort((a,b)=>b-a); const lim=g.max||sorted.length; return s+sorted.slice(0,lim).reduce((a,b)=>a+b,0); },0); const optionCount = groups.reduce((s,g)=>s+g.options.filter(o=>o.name.trim()).length,0); const save = ()=>{ if(!valid) return; const modGroups = groups.map(g=>({ name:g.name.trim(), select:g.select, required:!!g.required, max:g.max||null, options:g.options.filter(o=>o.name.trim()).map(o=>({ name:o.name.trim(), price:+o.price||0 })), })).filter(g=>g.name && g.options.length); const mods = modGroups.length===0?'none':modGroups.length>=2?'full':'partial'; onAdd({ id: 'm'+Date.now().toString().slice(-5), name: name.trim(), price: priceNum, avail, pop:0, margin, photo: !!photoUrl, photoUrl: photoUrl||undefined, mods, modGroups, trendDir:'flat', trendPct:0, best:false, isNew:true, desc: desc.trim(), }, catName); }; const m = MARGIN_TONE[margin]; return (
e.stopPropagation()} style={{ width:'100%', maxWidth:600, background:'var(--bg-surface)', borderRadius:20, boxShadow:'var(--shadow-lg)', overflow:'hidden', animation:'v-pop 240ms var(--ease-out)' }}> {/* header */}

Add menu item

New dishes go live on Lasso after a quick review
{/* photo + name + price */}
Photo {photoUrl && }
Item name setName(e.target.value)} placeholder="e.g. Truffle Mushroom Pizza" maxLength={42} style={FLD_INPUT}/>
Price
£ setPrice(e.target.value.replace(/[^0-9.]/g,''))} inputMode="decimal" placeholder="0.00" style={{ ...FLD_INPUT, paddingLeft:26 }}/>
{/* category */}
Category
{MENU.map(c=>{ const on = catSel===c.cat; return ; })}
{usingNew && setNewCat(e.target.value)} placeholder="New category name" maxLength={24} style={{ ...FLD_INPUT, marginTop:9 }}/>}
{/* description */}
Description · optional