// v-shell.jsx — Lasso vendor dashboard chrome: sidebar nav, topbar, app state, toasts
const NAV = [
{ id:'overview', label:'Overview', icon:I.grid },
{ id:'map', label:'Map Campaigns', icon:I.map },
{ id:'menu', label:'Menu Manager', icon:I.utensils },
{ id:'orders', label:'Orders & Sales', icon:I.receipt },
{ id:'insights', label:'Customer Insights', icon:I.users },
{ id:'campaigns', label:'Campaigns', icon:I.megaphone },
{ id:'trail', label:'Trail Studio', icon:I.sparkle },
{ id:'rewards', label:'Rewards', icon:I.trophy },
{ id:'team', label:'Team & Media', icon:I.image },
{ id:'ops', label:'Back Office', icon:I.layers, soon:true },
{ id:'settings', label:'Settings', icon:I.settings },
];
// ─── Sidebar (floating frosted-glass nav) ────────────────────────────
function Sidebar({ app }) {
const xpPct = Math.round(VENDOR.xp / VENDOR.xpToNext * 100);
return (
Vendor
{/* Vendor card */}
{VENDOR.initials}
{VENDOR.name}
{VENDOR.location}
LEVEL {VENDOR.level}
{VENDOR.xp.toLocaleString()} / {VENDOR.xpToNext.toLocaleString()} XP
{NAV.filter(n=>roleCanSee(app.role, n.id)).map(n=>{
const on = app.page===n.id;
return (
);
})}
Customer data is aggregated. Addresses are never shown.
);
}
// ─── Topbar ──────────────────────────────────────────────────────────
function Topbar({ app, floating=false }) {
const titles = {
overview:'Overview', map:'Map Campaigns', menu:'Menu Manager', orders:'Orders & Sales',
insights:'Customer Insights', campaigns:'Campaigns', rewards:'Rewards', trail:'Trail Studio',
team:'Team & Media', ops:'Back Office', settings:'Settings',
};
const base = { height:floating?60:66, flexShrink:0, display:'flex', alignItems:'center', gap:16, padding:'0 18px 0 22px', zIndex:20 };
const skin = floating
? { background:'rgba(255,255,255,0.5)', backdropFilter:'blur(22px) saturate(150%)', WebkitBackdropFilter:'blur(22px) saturate(150%)', borderRadius:18, border:'1px solid rgba(255,255,255,0.5)', boxShadow:'0 18px 44px -16px rgba(27,18,13,0.45)' }
: { padding:'0 26px', borderBottom:'1px solid var(--soft-line)', background:'var(--bg-app)' };
return (
{titles[app.page]}
Open · accepting orders
{ e.preventDefault(); app.openPalette && app.openPalette(); }} role="button" style={{ flex:1, maxWidth:380, marginLeft:8, display:'flex', alignItems:'center', gap:9, height:42, cursor:'pointer', background: floating?'rgba(255,255,255,0.5)':'var(--bg-surface)', border:'1px solid', borderColor: floating?'rgba(255,255,255,0.5)':'var(--soft-line)', borderRadius:12, padding:'0 13px', boxShadow:'var(--shadow-sm)' }}>
⌘K
} style={{ fontSize:11.5, padding:'5px 11px' }}>{`${VENDOR.streak}-week streak`}
} onClick={()=>app.openBuilder(null)}>New campaign
);
}
// ─── Notifications — action items from real in-app pending state ─────
const NOTIF_ITEMS = [
{ id:'n1', icon:'utensils', text:'2 menu items are switched off', sub:'Garden Veg Stonebake · Dip Trio', nav:'menu' },
{ id:'n2', icon:'users', text:'2 staff invites still pending', sub:'sofia.r… · jake.kitchen…', nav:'team' },
{ id:'n3', icon:'shield', text:'Document verification in review', sub:'Payout verification — admin flow pending', nav:'team' },
{ id:'n4', icon:'image', text:'1 media asset still processing', sub:'loaded-fries-close.jpg', nav:'team' },
{ id:'n5', icon:'megaphone', text:'“Wolverton Win-Back” ends today', sub:'Extend it or let it close', nav:'campaigns' },
];
function NotificationsMenu({ app }) {
const [open, setOpen] = React.useState(false);
const [items, setItems] = React.useState(NOTIF_ITEMS);
const ref = React.useRef(null);
React.useEffect(()=>{
if (!open) return;
const close = (e)=>{ if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
document.addEventListener('mousedown', close);
return ()=>document.removeEventListener('mousedown', close);
}, [open]);
return (
{open && (
Action items
{items.length>0 && setItems([])} style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:11, color:'var(--warm-stone)', cursor:'pointer' }}>Clear all}
{items.length===0 ? (
All clear
Nothing needs your attention right now.
) : (
{items.map(n=>{
const Icon = I[n.icon] || I.info;
return (
);
})}
Derived from live dashboard state — no push/notification feed contract yet.
)}
)}
);
}
// ─── Session menu (avatar → account, role, expiry, sign-out) ────────
function SessionMenu({ app }) {
const [open, setOpen] = React.useState(false);
const ref = React.useRef(null);
const s = app.session.sess;
React.useEffect(()=>{
if (!open) return;
const close = (e)=>{ if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
document.addEventListener('mousedown', close);
return ()=>document.removeEventListener('mousedown', close);
}, [open]);
if (!s) return null;
const r = ROLES[s.role];
const roleTone = s.role==='owner'?'orange':s.role==='manager'?'blue':'grey';
return (
setOpen(o=>!o)} title={`${s.name} · ${r.label}`} style={{ width:40, height:40, borderRadius:'50%', background:'linear-gradient(135deg,#F28C1B,#D85A14)', display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'var(--font-display)', fontWeight:900, fontSize:14, color:'#fff', cursor:'pointer', boxShadow: open?'0 0 0 3px rgba(242,140,27,0.35)':'none' }}>{s.init}
{open && (
{[
{ icon:I.settings, label:'Storefront settings', act:()=>{ setOpen(false); app.nav('settings'); }, hide: !roleCanSee(app.role,'settings') },
{ icon:I.clock, label:'Simulate session expiry', sub:'demo', act:()=>{ setOpen(false); app.session.expire(); } },
{ icon:I.logout, label:'Sign out', danger:true, act:()=>{ setOpen(false); app.session.signOut(); } },
].filter(x=>!x.hide).map((x,i)=>(
))}
)}
);
}
// ─── Toast ───────────────────────────────────────────────────────────
function ToastHost({ toast, onDone }) {
React.useEffect(()=>{ if(!toast) return; const t=setTimeout(onDone, 2600); return ()=>clearTimeout(t); }, [toast]);
if (!toast) return null;
return (
{toast}
);
}
// ─── Empty / placeholder screen (Orders, Insights, Settings stubs) ──
function ComingSoon({ icon:Icon, title, blurb, points }) {
return (
{points.map((p,i)=>(
{p}
))}
);
}
function OrdersStub() {
return ;
}
function InsightsStub() {
return ;
}
function SettingsStub() {
return ;
}
// ─── Command palette (⌘K — search, routing, quick actions) ───────
function CommandPalette({ app, onClose }) {
const [q, setQ] = React.useState('');
const [sel, setSel] = React.useState(0);
const inputRef = React.useRef(null);
const listRef = React.useRef(null);
React.useEffect(()=>{ if (inputRef.current) inputRef.current.focus(); }, []);
const all = React.useMemo(()=>{
const tabs = NAV.filter(n=>!n.soon && roleCanSee(app.role, n.id)).map(n=>({
group:'Go to', label:n.label, icon:n.icon, run:()=>app.nav(n.id) }));
const actions = [
{ group:'Actions', label:'New campaign', sub:'Open the campaign builder', icon:I.plus, run:()=>app.openBuilder(null), hide:!roleCanSee(app.role,'campaigns') },
{ group:'Actions', label:'Invite a teammate', sub:'Team & Media', icon:I.users, run:()=>app.nav('team'), hide:!roleCanSee(app.role,'team') },
{ group:'Actions', label:'Payout statements', sub:'Settings · Payouts', icon:I.receipt, run:()=>app.nav('settings'), hide:!roleCanSee(app.role,'settings') },
{ group:'Actions', label:'Storefront settings', sub:'Hours, delivery zone, profile', icon:I.settings, run:()=>app.nav('settings'), hide:!roleCanSee(app.role,'settings') },
].filter(a=>!a.hide);
const estates = ESTATES.map(e=>({
group:'Estates', label:e.name, sub:`${e.customers.toLocaleString()} customers · opportunity ${e.opportunity}`, icon:I.pin,
run:()=>{ app.setSelected(e.id); app.nav('map'); }, hide:!roleCanSee(app.role,'map') })).filter(a=>!a.hide);
const menu = MENU.flatMap(c=>c.items.map(it=>({
group:'Menu items', label:it.name, sub:`${c.cat} · £${it.price.toFixed(2)}${it.avail?'':' · switched off'}`, icon:I.utensils,
run:()=>app.nav('menu'), hide:!roleCanSee(app.role,'menu') }))).filter(a=>!a.hide);
const camps = ACTIVE_CAMPAIGNS.map(c=>({
group:'Campaigns', label:c.name, sub:`${c.area} · ${c.status}`, icon:I.megaphone,
run:()=>app.openCampaign(c.id), hide:!roleCanSee(app.role,'campaigns') })).filter(a=>!a.hide);
return { tabs, actions, estates, menu, camps };
}, [app.role]);
const query = q.trim().toLowerCase();
const match = (it)=> it.label.toLowerCase().includes(query) || (it.sub||'').toLowerCase().includes(query) || it.group.toLowerCase().includes(query);
const results = query
? [...all.estates, ...all.menu, ...all.camps, ...all.tabs, ...all.actions].filter(match).slice(0, 14)
: [...all.tabs, ...all.actions];
React.useEffect(()=>{ setSel(0); }, [q]);
const pick = (it)=>{ onClose(); it.run(); };
const onKey = (e)=>{
if (e.key==='ArrowDown') { e.preventDefault(); setSel(s=>Math.min(s+1, results.length-1)); }
else if (e.key==='ArrowUp') { e.preventDefault(); setSel(s=>Math.max(s-1, 0)); }
else if (e.key==='Enter') { e.preventDefault(); if (results[sel]) pick(results[sel]); }
else if (e.key==='Escape') { e.preventDefault(); onClose(); }
};
React.useEffect(()=>{
const el = listRef.current && listRef.current.querySelector(`[data-cp-idx="${sel}"]`);
if (el && listRef.current) {
const lr = listRef.current, top = el.offsetTop, bot = top + el.offsetHeight;
if (top < lr.scrollTop) lr.scrollTop = top - 6;
else if (bot > lr.scrollTop + lr.clientHeight) lr.scrollTop = bot - lr.clientHeight + 6;
}
}, [sel, q]);
let lastGroup = null;
return (
e.stopPropagation()} style={{ width:'100%', maxWidth:560, margin:'0 24px', background:'var(--bg-surface)', borderRadius:18, boxShadow:'var(--shadow-lg)', overflow:'hidden', animation:'v-pop 200ms var(--ease-out)' }}>
setQ(e.target.value)} onKeyDown={onKey} placeholder="Search or jump to…"
style={{ border:'none', outline:'none', background:'transparent', flex:1, fontFamily:'var(--font-body)', fontSize:15, color:'var(--fg-primary)' }}/>
esc
{results.length===0 && (
No matches for “{q}”
)}
{results.map((it,i)=>{
const header = it.group!==lastGroup ? it.group : null; lastGroup = it.group;
const on = i===sel;
return (
{header && {header}
}
setSel(i)} onClick={()=>pick(it)} role="button" style={{ display:'flex', alignItems:'center', gap:11, padding:'9px 10px', borderRadius:10, cursor:'pointer', background: on?'var(--bg-warm)':'transparent' }}>
{it.label}
{it.sub && {it.sub}}
{on && ↵}
);
})}
↑↓ navigate
↵ open
esc close
);
}
Object.assign(window, { NAV, Sidebar, Topbar, SessionMenu, NotificationsMenu, ToastHost, ComingSoon, OrdersStub, InsightsStub, SettingsStub, CommandPalette });