// ═══════════════════════════════════════════════════════════ // ADMIN MÓVIL 1 — nav + inicio + menú + pedidos + analytics // ═══════════════════════════════════════════════════════════ const { useState } = React; const AdminMobNav = ({ active, go }) => { const map = { team:'settings', devices:'settings', performance:'settings' }; const cur = map[active] || active; return (
{[ { id:'dashboard', icon:'space_dashboard', label:'Inicio' }, { id:'menu', icon:'restaurant_menu', label:'Menú' }, { id:'orders', icon:'receipt_long', label:'Pedidos' }, { id:'analytics', icon:'monitoring', label:'Analytics' }, { id:'settings', icon:'settings', label:'Config' }, ].map(n => { const on = cur === n.id; return ( ); })}
); }; const MobTop = ({ title, onBack, right }) => (
{onBack ? :
}
{title}
{right ||
}
); const MobScreen = ({ nav, go, children, label }) => (
{children}
); // ═══ INICIO (móvil) ════════════════════════════════════════ const MobHome = ({ go, empty, escenario='Normal' }) => { const [dismissed, setDismissed] = useState([]); const mesasH = mesasEscenario(escenario); const occ = mesasH.filter(m => m.estado !== 'libre').length; const paxTotal = mesasH.reduce((s,m) => s + (m.pax||0), 0); const tops = MENU_SEED.filter(d=>d.active).sort((a,b)=>b.orders-a.orders).slice(0,4); const alerts = [ { id:'inv', stripe:gradDorado, icon:'local_fire_department', color:'#C2410C', text:'Costilla de Res casi agotada — quedan 3 porciones', link:'Ver inventario', to:'menu' }, { id:'rev', stripe:'linear-gradient(180deg,#22C55E,#15803D)', icon:'reviews', color:'#15803D', text:'Nueva reseña ★★★★★ — "Increíble experiencia AR"', link:'Leer comentario', to:'analytics' }, ].filter(a => !dismissed.includes(a.id)); return (
{RESTAURANT.name}
The Digital Sommelier
{empty ? ( go('menu')}/> ) : (
{/* Quick actions */}
{[['restaurant_menu','Menú','menu'],['receipt_long','Pedidos','orders'],['monitoring','Analytics','analytics'],['groups','Equipo','team']].map(([ic,l,to]) => ( ))}
Hoy, miércoles 8 de julio {alerts.length > 0 && }
{/* Alertas */} {alerts.map(a => (
{a.text}
))} {/* Venta del día + satisfacción */}
Venta del día
$12,480 ↗ 8%
Satisfacción
4.7
Prom. mensual: 4.5
{/* Actividad en vivo */}
Actividad en vivo LIVE
{occ}/{mesasH.length}
Mesas
{[['group',String(paxTotal),'Comensales'],['timer','48m','Prom.']].map(([ic,v,l]) => (
{v}
{l}
))}
{/* Más pedidos hoy */}
Más pedidos hoy
{tops.map(d => (
{d.name}
{d.orders}
))}
)} ); }; // ═══ MI MENÚ (móvil) ═══════════════════════════════════════ const MobMenu = ({ go, empty, items, setItems, readOnly=false, embedded=false, title='Mi menú' }) => { const [cat, setCat] = useState('Todos'); const [form, setForm] = useState(null); const cats = ['Todos','Entradas','Platos fuertes','Postres','Bebidas']; const list = cat==='Todos' ? items : items.filter(i => i.cat===cat); const toggle = id => setItems(prev => prev.map(p => p.id===id ? {...p, active:!p.active} : p)); const save = f => { if (f.id) setItems(prev => prev.map(p => p.id===f.id ? {...p, ...f} : p)); else setItems(prev => [...prev, { ...f, id: Math.max(0,...prev.map(p=>p.id))+1, orders:0, chips:[], spice:0, kcal:0, photo:'', maridaje:'—' }]); setForm(null); }; const inner = ( {empty ? ( setForm('new')}/> ) : (
Buscar platillo…
{items.length} PLATILLOS {items.filter(i=>i.active).length} ACTIVOS {items.filter(i=>!i.active).length} PAUSADOS
{cats.map(c => { const n = c==='Todos' ? items.length : items.filter(i=>i.cat===c).length; return ( ); })}
{list.map(p => (
setForm(p)} style={{ display:'flex', alignItems:'center', gap:13, background:'white', borderRadius:26, padding:'12px 15px', marginBottom:11, cursor: readOnly ? 'default' : 'pointer', boxShadow:'0 4px 14px rgba(29,28,23,0.05)', opacity: p.active ? 1 : 0.55, transition:'opacity 250ms' }}>
{p.cat}
{p.name}
{p.active ? 'Disponible' : 'Pausado'}
{fmt(p.price)}
e.stopPropagation()}> toggle(p.id)}/>
))} {/* Borrador */} {!readOnly && (
setForm('new')} style={{ display:'flex', alignItems:'center', gap:13, borderRadius:26, padding:'12px 15px', marginBottom:11, cursor:'pointer', border:`1.5px dashed ${C.outline}55` }}>
Sin categoría
Nuevo platillo
Borrador
$0
)}
{/* FAB */} {!readOnly && ( )} )} {form && !readOnly && setForm(null)}/>} ); if (embedded) return inner; return {inner}; }; // ═══ PEDIDOS (móvil admin) ═════════════════════════════════ const MobOrders = ({ go, empty, escenario='Normal', mesas, updateMesa, perms, setOrderStatus }) => { if (empty) return ( ); // Misma operación que el capitán, con la nav del admin return {}} mesas={mesas} updateMesa={updateMesa} perms={perms} setOrderStatus={setOrderStatus} escenario={escenario} nav={}/>; }; // ═══ ANALYTICS (móvil) ═════════════════════════════════════ const MobAnalytics = ({ go, empty }) => { const [period, setPeriod] = useState('7 días'); const week = [28,31,27,33,38,52,44]; const maxW = Math.max(...week); const pts = week.map((v,i) => `${18 + i*(268/6)},${104 - (v/maxW)*86}`).join(' '); const platos = MENU_SEED.filter(d=>d.active).sort((a,b)=>b.orders-a.orders).slice(0,5); const maxP = platos[0].orders; return ( {empty ? ( ) : (
{['Hoy','7 días','30 días','Personalizado'].map(p => ( ))}
1 – 8 JUL 2026
{/* Ingresos */}
Ingresos
$238,400 ↑ 14%
{['LUN','MAR','MIÉ','JUE','VIE','SÁB','DOM'].map(d => ( {d} ))}
{[['Ticket prom.','$385','↑ 4%'],['Órdenes','619','↑ 12%'],['Comensales','1,847','↑ 8%']].map(([l,v,s]) => (
{l}
{v}
{s}
))}
{/* Rendimiento de platillos */}
Rendimiento de platillos
{platos.map(p => (
{p.name} {p.orders}
))}
Guacamole de Molcajete genera 23% de tus ingresos este periodo.
{/* Insights */}
Insights de Carta
{[ { icon:'visibility', tag:'BAJA CONVERSIÓN', tagBg:'rgba(184,134,11,0.15)', tagColor:'#8A6508', t:'Visto pero no pedido', body:El Mezcal de la Casa tiene alto volumen de vistas en AR pero solo 17% de conversión. Considera revisar precio o descripción. }, { icon:'view_in_ar', tag:'ALTO IMPACTO', tagBg:'rgba(34,197,94,0.13)', tagColor:'#15803D', t:'Impacto del 3D/AR', body:Los platillos con vista 3D se ordenan 2.4× más y generan un ticket 31% mayor. }, ].map(i => (
{i.t} {i.tag}
{i.body}
))} {/* Horas pico */}
Horas pico
{SALES_DATA.map((v,i) => { const pct = v / Math.max(...SALES_DATA); return
0.8 ? C.primary : pct>0.5 ? 'rgba(79,23,40,0.45)' : C.surfaceHigh }}/>; })}
{['9:00','13:00','17:00','22:00'].map(h => {h})}
)} ); }; Object.assign(window, { AdminMobNav, MobTop, MobScreen, MobHome, MobMenu, MobOrders, MobAnalytics });