// ═══════════════════════════════════════════════════════════ // ADMIN · Core — shell + P09 dashboard · P10 menú · P11 pedidos · P12 analytics // ═══════════════════════════════════════════════════════════ const { useState, useEffect, useMemo } = React; const ADMIN_NAV = [ { id:'dashboard', icon:'space_dashboard', label:'Dashboard' }, { id:'menu', icon:'restaurant_menu', label:'Mi menú' }, { id:'orders', icon:'receipt_long', label:'Pedidos' }, { id:'analytics', icon:'analytics', label:'Analytics' }, { id:'performance', icon:'trending_up', label:'Rendimiento' }, { id:'team', icon:'group', label:'Miembros del equipo' }, { id:'devices', icon:'devices', label:'Dispositivos' }, { id:'settings', icon:'settings', label:'Configuración' }, ]; // ── SHELL ────────────────────────────────────────────────── const AdminShell = ({ active, setActive, children, ordersBadge=0 }) => (
{/* Sidebar */}
Carta
Panel del restaurante
{RESTAURANT.name}
{RESTAURANT.tagline} · Plan Pro
{ADMIN_NAV.map(n => { const on = active === n.id; return (
setActive(n.id)} style={{ display:'flex', alignItems:'center', gap:11, padding:'9.5px 13px', borderRadius:13, marginBottom:2, cursor:'pointer', background: on ? 'rgba(255,255,255,0.15)' : 'transparent', transition:'background 150ms' }}> {n.label} {n.id==='orders' && ordersBadge > 0 && {ordersBadge}}
); })}
V
Valeria Ruiz
Dueña
{/* Main */}
{RESTAURANT.name} / {ADMIN_NAV.find(n=>n.id===active)?.label}
lun 6 jul 2026
{children}
); // ── P22 · Empty state reusable ───────────────────────────── const EmptyState = ({ icon='restaurant', title, body, cta, onCta, cta2, onCta2 }) => (
{title}
{body}
{cta && {cta}} {cta2 && {cta2}}
); // ── KPI card ─────────────────────────────────────────────── const KPI = ({ label, value, sub, subUp=true, icon }) => (
{label}
{value}
{sub &&
{sub}
}
); // ═══ P09 · DASHBOARD ═══════════════════════════════════════ const AdminDashboard = ({ empty, goOrders, setActive, escenario='Normal' }) => { const maxSale = Math.max(...SALES_DATA); const mesas = mesasEscenario(escenario); if (empty) return (
Buenos días, Valeria
Lunes, 6 de julio de 2026
setActive('menu')} cta2="Importar carta PDF" onCta2={() => setActive('menu')}/>
); return (
Buenos días, Valeria
Lunes, 6 de julio de 2026 · servicio de comida en curso
{/* Quick actions — pequeñas */}
{[['add','Platillo','menu'],['receipt_long','Pedidos','orders'],['qr_code_2','Invitar mesero','team']].map(([ic,l,to]) => ( ))}
{/* Alertas — directamente bajo la fecha */}
goOrders(12)} style={{ display:'flex', alignItems:'center', gap:9, background:gradVino, borderRadius:14, padding:'10px 16px', cursor:'pointer', boxShadow:'0 8px 20px rgba(79,23,40,0.25)' }}> Mesa 12 demorada en cocina · 35 min
Mesa 9 espera que la marquen limpia
{/* KPIs */}
{/* Ventas por hora */}
Ventas por hora Hoy · pico proyectado 20 h
{SALES_DATA.map((v,i) => { const now = i === 9; return (
3000 ? 'rgba(184,134,11,0.55)' : C.surfaceHigh }}/> {i%2===0 && {SALES_HOURS[i]}h}
); })}
{/* Top platillos */}
Top platillos
{MENU_SEED.filter(p=>p.active).sort((a,b)=>b.orders-a.orders).slice(0,4).map((p,i) => (
{i+1}
{p.name}
{p.orders} órdenes hoy
{fmt(p.price)}
))}
{/* Mesas en vivo */}
Mesas en vivo
{[['Libre',C.mesaLibre],['Activa',C.dorado],['Alerta',C.primary],['Pagando',C.morado]].map(([l,c]) => ( {l} ))}
{mesas.map(m => { const dot = { libre:C.mesaLibre, activa:C.dorado, alerta:C.primary, pagada:C.morado }[m.estado]; return (
m.estado!=='libre' && goOrders(m.n)} style={{ background:C.surfaceLow, borderRadius:16, padding:'13px 14px', cursor: m.estado==='libre' ? 'default' : 'pointer', position:'relative', overflow:'hidden' }}> {m.estado==='alerta' &&
}
Mesa {m.n}
{m.estado==='libre' ? 'Disponible' : `${m.pax} pers · ${m.min} min`}
); })}
); }; // ═══ P10 · MI MENÚ (CRUD) ══════════════════════════════════ const DishForm = ({ initial, onSave, onClose }) => { const [f, setF] = useState(initial || { name:'', price:'', cat:'Platos fuertes', desc:'', emoji:'🍽️', chef:false, active:true }); const set = (k,v) => setF(x => ({...x, [k]:v})); return (
{initial ? 'Editar platillo' : 'Nuevo platillo'}
Los cambios se publican al instante
Con 8 fotos generamos el modelo 3D para AR (fotogrametría).
set('name',v)} placeholder="Ej. Mole negro de la casa"/>
set('price', v.replace(/\D/g,''))} placeholder="265"/>
Categoría
set('desc',v)} textarea placeholder="Cuéntalo como lo contaría tu chef…"/>
Especialidad del Chef
set('chef',v)}/>
Cancelar onSave({ ...f, price:+f.price })}>Guardar platillo
); }; const PDFModal = ({ onClose }) => (
Carta-LaCeiba-2026.pdf
Fuente del menú importado · 2 páginas
); const AdminMenu = ({ empty, items, setItems }) => { const [form, setForm] = useState(null); // null | 'new' | dish const [showPDF, setShowPDF] = useState(false); const [menuFor, setMenuFor] = useState(null); 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); }; if (empty) return (
Mi menú
setForm('new')} cta2="Importar carta PDF"/> {form && setForm(null)}/>}
); return (
Mi menú
{items.filter(i=>i.active).length} platillos publicados · {items.filter(i=>!i.active).length} pausados
setForm('new')}>Nuevo platillo
{/* Banner PDF importado */}
Menú importado de Carta-LaCeiba-2026.pdf
10 platillos detectados · los comensales también pueden ver el PDF original
{['Entradas','Platos fuertes','Postres','Bebidas'].map(cat => { const catItems = items.filter(p => p.cat === cat); if (!catItems.length) return null; return (
{cat} · {catItems.length}
{catItems.map((p,i) => (
{p.name} {p.chef && }
{p.orders} órdenes este mes · modelo 3D {p.photo ? 'listo' : 'pendiente'}
{fmt(p.price)} toggle(p.id)}/>
setMenuFor(menuFor===p.id ? null : p.id)}/> {menuFor === p.id && (
{[['edit','Editar', () => { setForm(p); setMenuFor(null); }], ['delete','Eliminar', () => { setItems(prev => prev.filter(x=>x.id!==p.id)); setMenuFor(null); }]].map(([ic,l,fn]) => (
e.currentTarget.style.background=C.surfaceLow} onMouseLeave={e=>e.currentTarget.style.background='transparent'}> {l}
))}
)}
))}
); })}
{form && setForm(null)}/>} {showPDF && setShowPDF(false)}/>}
); }; // ═══ P11 · PEDIDOS (dinámica) ══════════════════════════════ const AdminOrders = ({ empty, mesaFilter, clearFilter, escenario='Normal', mesas, updateMesa, perms, setOrderStatus }) => { if (empty) return (
Pedidos
); const mesaInicial = mesaFilter ? (mesas||[]).find(m => m.n === mesaFilter && m.estado !== 'libre') || null : null; // Misma operación que el capitán: Servir/Gestionar, detalle de mesa embebido, pedidos en vivo return (
{}} mesas={mesas} updateMesa={updateMesa} perms={perms} setOrderStatus={setOrderStatus} escenario={escenario} nav={null} topPad={10} initialMesa={mesaInicial} clearInitial={clearFilter}/>
); }; // ═══ P12 · ANALYTICS ═══════════════════════════════════════ const AdminAnalytics = ({ empty }) => { const maxSale = Math.max(...SALES_DATA); if (empty) return (
Analytics
); return (
Analytics
{/* Embudo */}
Embudo de hoy
{[['Escaneos de QR', 214, 1],['Vieron platillos en AR', 183, 0.86],['Agregaron a su orden', 152, 0.71],['Pagaron en Carta', 146, 0.68]].map(([l,v,pct],i) => (
{l} {v}
))}
{/* Heatmap */}
Horas pico
{SALES_HOURS.map((h,i) => { const pct = SALES_DATA[i]/maxSale; const bg = pct>0.8 ? C.primary : pct>0.6 ? C.primaryCont : pct>0.4 ? 'rgba(184,134,11,0.6)' : C.surfaceHigh; return (
{h}h
); })}
{/* Comparativa */}
Esta semana vs la pasada
{[['Lun','$12,480','$10,560',0.85],['Mar','$9,320','$11,200',1.2],['Mié','$14,100','$10,800',0.77],['Jue','$11,670','$9,400',0.81],['Vie','$18,240','$16,900',0.93]].map(([d,cur,prev,r]) => (
{d}
{cur} {prev}
))}
Esta semana Semana pasada
); }; Object.assign(window, { ADMIN_NAV, AdminShell, EmptyState, KPI, AdminDashboard, AdminMenu, AdminOrders, AdminAnalytics, DishForm, PDFModal });