// v-team.jsx — Team & Media: staff invites, media library, account verification, audit activity // ─── Section shell (mirrors settings sections) ─────────────────────── function TMSection({ icon, title, sub, wire, children, footer }) { return (
{icon}  {title} {wire && }
{sub &&
{sub}
}
{footer}
{children}
 ); } // ─── Invite form + pending invites ─────────────────────────────────── function InvitePanel({ app }) { const [invites, setInvites] = React.useState(STAFF_INVITES); const [email, setEmail] = React.useState(''); const [role, setRole] = React.useState('Staff'); const [busy, setBusy] = React.useState(false); const send = () => { const em = email.trim(); if (!em || !em.includes('@')) { app.toast('Enter a valid email to invite'); return; } setBusy(true); setTimeout(()=>{ setInvites(v=>[{ id:'inv-'+Math.random().toString(16).slice(2,6), email:em, role, sent:'just now', status:'pending' }, ...v]); setEmail(''); setBusy(false); app.toast('Invite created — saved to the invites table'); }, 700); }; const revoke = (id) => { setInvites(v=>v.filter(i=>i.id!==id)); app.toast('Invite revoked'); }; return ( } title="Staff invites" wire="partial" sub="Invite creation and revoke write to the invites table. Email delivery isn't wired yet — share the invite link yourself for now."> {/* create */}
setEmail(e.target.value)} onKeyDown={e=>e.key==='Enter'&&send()} placeholder="teammate@email.com" style={{ flex:1, minWidth:0, boxSizing:'border-box', background:'rgba(255,255,255,0.55)', border:'1px solid var(--soft-line)', borderRadius:10, padding:'10px 12px', fontFamily:'var(--font-body)', fontSize:13, color:'var(--fg-primary)', outline:'none' }}/> :}>{busy?'Saving…':'Invite'}
Managers get menu, orders, campaigns & insights. Staff get orders only.
{/* pending list */} {invites.map((inv,i)=>(
{inv.email}
Sent {inv.sent} · {inv.role}
{inv.status==='expired'?'Expired':'Pending'} Resend revoke(inv.id)}>Revoke
))}
Email delivery & one-tap accept are disabled until their backend contract is validated.
); } // ─── Media library (private lasso-media bucket) ────────────────────── function MediaPanel({ app }) { const [assets, setAssets] = React.useState(MEDIA_ASSETS); const [drag, setDrag] = React.useState(false); const fileRef = React.useRef(null); const addFiles = (files) => { const list = Array.from(files||[]).filter(f=>f.type.startsWith('image/')); if (!list.length) { app.toast('Drop image files (JPG / PNG / WebP)'); return; } list.forEach(f=>{ const id = 'md-'+Math.random().toString(16).slice(2,6); setAssets(a=>[{ id, name:f.name, kind:'Item photo', size:Math.round(f.size/1024)+' KB', path:'fd-2841/menu/'+f.name, status:'uploading', linked:null }, ...a]); setTimeout(()=> setAssets(a=>a.map(x=>x.id===id?{...x,status:'processing'}:x)), 1400); setTimeout(()=> setAssets(a=>a.map(x=>x.id===id?{...x,status:'live'}:x)), 3200); }); app.toast(`Uploading ${list.length} file${list.length>1?'s':''} to your private media bucket…`); }; const M_TONE = { live:'green', processing:'amber', uploading:'blue', archived:'grey' }; const M_LABEL = { live:'Live', processing:'Processing', uploading:'Uploading…', archived:'Archived' }; return ( } title="Media library" wire="partial" sub="Uploads go to your private, vendor-scoped storage bucket. Only your kitchen can touch these files."> {/* dropzone */}
{ e.preventDefault(); setDrag(true); }} onDragLeave={()=>setDrag(false)} onDrop={e=>{ e.preventDefault(); setDrag(false); addFiles(e.dataTransfer.files); }} onClick={()=>fileRef.current && fileRef.current.click()} style={{ border:'1.5px dashed', borderColor: drag?'var(--brand-orange)':'var(--soft-line)', borderRadius:14, padding:'22px 16px', textAlign:'center', cursor:'pointer', background: drag?'rgba(242,140,27,0.07)':'rgba(255,255,255,0.35)', transition:'all 160ms', marginBottom:14 }}> { addFiles(e.target.files); e.target.value=''; }}/>
Drop photos here, or click to upload
lasso-media / fd-2841 / … · private bucket
{/* asset rows */} {assets.map((a)=>(
{a.status==='uploading'||a.status==='processing' ? : }
{a.name}
{a.path} · {a.size}
{a.linked && {a.linked}} {M_LABEL[a.status]} Archive
))}
Archive & moderation are disabled until the ownership contract supports them. Uploads, replaces and deletes are live.
); } // ─── Account verification tracker ──────────────────────────────────── function OnboardPanel() { return ( } title="Account verification" wire="partial" sub="Where Fire & Dough stands in Lasso's vendor checks."> {ONBOARD_STEPS.map((s,i)=>(
{i}
{s.state==='done' ? : }
{s.label} {s.state!=='done' && In review}
{s.note}
))} ); } // ─── Audit activity (read-only) ────────────────────────────────────── function AuditPanel() { const K_ICON = { orders:'receipt', campaigns:'megaphone', team:'users', media:'image', menu:'utensils' }; return ( } title="Recent activity" wire="live" sub="Read-only audit trail. A row is written only when something actually changes."> {AUDIT_ROWS.map((r,i)=>{ const Icon = I[K_ICON[r.kind]] || I.grid; return (
0?'1px solid var(--soft-line)':'none' }}>
{r.actor} · {r.action}
{r.target}
{r.when}
); })} ); } // ─── Screen ────────────────────────────────────────────────────────── function TeamScreen({ app }) { return (
); } Object.assign(window, { TeamScreen });