setRole('launch')} style={{ display:'flex', alignItems:'baseline', gap:8, cursor:'pointer' }}>
Carta
Prototipo
{/* Selector de rol */}
{['comensal','mesero','capitan','admin'].map(r => {
const on = route.role === r;
return (
);
})}
{/* Toggle web/móvil (solo admin) */}
{route.role === 'admin' && (
{[['web','desktop_windows'],['movil','smartphone']].map(([v,ic]) => {
const on = adminView === v;
return (
);
})}
)}
{/* Selector de pantalla */}
{screens.length > 0 && (
)}
);
};
// ── APP ────────────────────────────────────────────────────
const App = () => {
const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
const saved = useMemo(() => { try { return JSON.parse(localStorage.getItem('carta-proto-route')||'{}'); } catch(e) { return {}; } }, []);
const isValid = (role, screen) => !!(SCREEN_MAP[role] && SCREEN_MAP[role].some(s => s.id === screen));
const [route, setRoute] = useState(() => isValid(saved.role, saved.screen)
? { role: saved.role, screen: saved.screen }
: saved.role === 'launch' && saved.screen === 'gate' ? { role:'launch', screen:'gate' }
: { role:'launch', screen:'scan' });
const [mem, setMem] = useState(() => {
const def = { comensal:'p17a', mesero:'p19b', capitan:'c-inicio', admin:'onboarding' };
const m = saved.mem || {};
const out = {};
Object.keys(def).forEach(k => { out[k] = isValid(k, m[k]) ? m[k] : def[k]; });
return out;
});
const [adminView, setAdminView] = useState(saved.adminView === 'movil' ? 'movil' : 'web');
const [showMap, setShowMap] = useState(false);
// Estado comensal
const [order, setOrder] = useState(saved.order || [{ id:1, qty:1 }]);
const [dish, setDish] = useState(null);
const [dishFrom, setDishFrom] = useState('ar');
// Estado mesero
const [mesas, setMesas] = useState(() => mesasEscenario(t.meseroEscenario));
const [mesaN, setMesaN] = useState(7);
// Estado admin
const [menuItems, setMenuItems] = useState(MENU_SEED);
const [mesaFilter, setMesaFilter] = useState(null);
const adminEmpty = t.adminDensity === 'Vacío';
// Estado compartido entre apps
const [orderStatus, setOrderStatus] = useState('armando'); // armando|enviada|preparando|servida
const [waiterPerms, setWaiterPerms] = useState(WAITER_PERMS_DEFAULT);
const [captainChoice, setCaptainChoice] = useState({ mode:'designar', who:'Carlos Ramírez' });
const [capMesaOpen, setCapMesaOpen] = useState(null);
const [modDraft, setModDraft] = useState(null); // borrador de modificación del comensal
const [modRequest, setModRequest] = useState(null); // solicitud enviada al mesero
const [cuentaState, setCuentaState] = useState('abierta'); // abierta | cerrada | pagando
useEffect(() => { setMesas(mesasEscenario(t.meseroEscenario)); }, [t.meseroEscenario]);
// Simula avance de cocina (el mesero también lo dispara desde su app)
useEffect(() => {
if (orderStatus==='enviada') { const x=setTimeout(()=>setOrderStatus('preparando'), 3500); return ()=>clearTimeout(x); }
if (orderStatus==='preparando') { const x=setTimeout(()=>setOrderStatus('servida'), 7000); return ()=>clearTimeout(x); }
if (orderStatus==='ampliacion') { const x=setTimeout(()=>setOrderStatus('servida'), 6000); return ()=>clearTimeout(x); }
}, [orderStatus]);
// Cierre de cuenta grupal: cuando el último integrante cierra → Pagando
useEffect(() => {
if (cuentaState === 'cerrada') {
const x = setTimeout(() => {
setCuentaState('pagando');
setMesas(prev => prev.map(m => m.n===7 ? {...m, estado:'pagada', fase:'Pagando'} : m));
}, 5000);
return () => clearTimeout(x);
}
}, [cuentaState]);
// El comensal salta a la pantalla de seguimiento cuando su orden avanza
useEffect(() => {
if (route.role==='comensal' && (orderStatus==='preparando' || orderStatus==='servida')
&& !['tracking','checkout','success'].includes(route.screen)) jump('comensal','tracking');
}, [orderStatus]);
useEffect(() => {
localStorage.setItem('carta-proto-route', JSON.stringify({ ...route, mem, order, adminView }));
}, [route, mem, order, adminView]);
const jump = (role, screen) => {
if (role !== 'launch' && !isValid(role, screen)) screen = SCREEN_MAP[role][0].id;
if (screen === 'dish' && !dish) setDish(MENU_SEED[0]);
if (screen === 'checkout' && !order.length) setOrder([{ id:1, qty:1 }]);
setRoute({ role, screen });
if (role !== 'launch') setMem(m => ({ ...m, [role]: screen }));
};
const go = screen => jump(route.role, screen);
const setRole = role => role === 'launch' ? setRoute({ role:'launch', screen:'scan' }) : jump(role, mem[role]);
const openDish = (d, from) => { setDish(d); setDishFrom(from || route.screen); go('dish'); };
const updateMesa = (n, patch) => setMesas(prev => prev.map(m => m.n===n ? {...m, ...patch} : m));
// ── Comensal ──
const comensalScreen = () => {
const props = { go, order, groupReady: t.friendsReady + 1 };
switch (route.screen) {
case 'p17a': return