// ═══════════════════════════════════════════════════════════ // MESERO — P19a/b onboarding · P20 perfil · P06 mesas · P07 detalle · P08 pedidos // ═══════════════════════════════════════════════════════════ const { useState, useEffect } = React; // ── Nav inferior mesero ──────────────────────────────────── const MeseroNav = ({ active, go }) => (
{[ { id:'mesas', icon:'table_restaurant', label:'Mis mesas' }, { id:'perfil', icon:'person', label:'Mi perfil' }, ].map(n => { const on = active === n.id; return ( ); })}
); // ═══ P19b · INVITACIÓN (mesero existente) ══════════════════ const WaiterInvite = ({ go }) => (
Carta
{RESTAURANT.name}
{RESTAURANT.tagline} · CDMX
Te invita a unirte a su equipo de piso como mesero senior.
{[['schedule','Turno','Mar – Dom · 13:00 a 22:00'],['payments','Propinas','100% directas vía Carta'],['table_restaurant','Zona','Terraza + salón principal']].map(([ic,l,v]) => (
{l} {v}
))}
{/* Tu perfil viaja contigo */}
{WAITER.name}
{WAITER.rating} · {WAITER.reviews} reseñas viajan contigo
go('mesas')}>Rechazar go('mesas')}>Aceptar y unirme
); // ═══ P19a · REGISTRO (mesero nuevo) ════════════════════════ const WaiterRegister = ({ go }) => { const [name, setName] = useState(''); const [phone, setPhone] = useState(''); const [spec, setSpec] = useState(['Vinos','Mezcal']); const opts = ['Vinos','Mezcal','Mariscos','Grupos grandes','Cocina de autor','Postres','Café de especialidad']; return (
go('p19b')}/>
Crea tu perfil de mesero
Es tuyo. Viaja contigo a cualquier restaurante.
Tus especialidades
{opts.map(o => { const on = spec.includes(o); return ; })}
Tu rating y reseñas se acumulan en tu perfil, no en el restaurante. Si cambias de trabajo, tu reputación va contigo.
go('mesas')}>Crear mi perfil
); }; // ═══ P06 · MIS MESAS ═══════════════════════════════════════ const estadoMesa = { libre: { dot:C.mesaLibre, label:'Libre', bg:C.surfaceLow }, activa: { dot:C.success, label:'Activa', bg:'white', anim:'pulseDot 1.4s ease-in-out infinite' }, alerta: { dot:C.rojoVivo, label:'Alerta', bg:'white', anim:'ripple 1.2s ease-out infinite' }, pagada: { dot:C.morado, label:'Pagando', bg:'white' }, }; const MESAS_DE_CARLOS = Object.entries(ASIGN_MESAS).filter(([,w]) => w === 'Carlos Ramírez').map(([n]) => +n); const MisMesas = ({ go, mesas, onMesa, escenario='Normal' }) => { const [vista, setVista] = useState('mesas'); // mesas | pedidos const [soloMias, setSoloMias] = useState(true); const mesasVisibles = soloMias ? mesas.filter(m => MESAS_DE_CARLOS.includes(m.n)) : mesas; const activas = mesasVisibles.filter(m => m.estado !== 'libre').length; const alertas = mesas.filter(m => m.estado === 'alerta'); const [swapOpen, setSwapOpen] = useState(false); const [dismissed, setDismissed] = useState([]); const alertaActiva = alertas.find(m => !dismissed.includes(m.n)); return (
Hola, Carlos
{RESTAURANT.name} · turno de tarde
{[[true,'Mías'],[false,'Todas']].map(([v,l]) => { const on = soloMias === v; return ( ); })}
{/* Indicadores del turno */}
{[['payments','$2,140 hoy'],['receipt_long','9 órdenes'],['timer','4.2 min prom.']].map(([ic,l]) => ( {l} ))}
{alertaActiva && (
onMesa(alertaActiva.n)} style={{ flex:1, cursor:'pointer' }}>
Mesa {alertaActiva.n} — {alertaActiva.fase?.toLowerCase() || 'necesita atención'}
{alertaActiva.min} min · toca para atender
)} {/* Toggle Mesas | Pedidos */}
{[['mesas','table_restaurant','Mesas'],['pedidos','receipt_long','Pedidos']].map(([v,ic,l]) => { const on = vista === v; return ( ); })}
{vista === 'mesas' ? (
{soloMias ? 'Tus mesas asignadas' : 'Todas las mesas'} {activas} de {mesasVisibles.length} ocupadas
) :
}
{vista === 'pedidos' ? ( ) : (
{mesasVisibles.map(m => { const e = estadoMesa[m.estado]; const libre = m.estado === 'libre'; return (
!libre && onMesa(m.n)} {...(libre?{}:pressFx)} style={{ background:e.bg, borderRadius:24, padding:'16px 16px 14px', cursor: libre?'default':'pointer', boxShadow: libre ? 'none' : '0 4px 16px rgba(79,23,40,0.08)', transition:'transform 150ms', position:'relative', overflow:'hidden' }}> {m.estado==='alerta' &&
}
Mesa {m.n} {e.label}
{libre ? (
Lista para recibir
) : (
{m.pax} personas · {m.min} min
{m.fase}
{m.total ? fmt(m.total) : '—'} {m.estado === 'pagada' &&
+ {fmt(m.propina != null ? m.propina : Math.round(m.total*0.15))} propina
}
{m.grupo && grupal}
)}
); })}
)}
{/* Cambio de sesión — tablet compartida */} {swapOpen && setSwapOpen(false)} onDone={() => setSwapOpen(false)}/>}
); }; // ═══ P07 · DETALLE DE MESA ═════════════════════════════════ const DetalleMesa = ({ go, mesa, updateMesa, perms = WAITER_PERMS_DEFAULT, setOrderStatus, embedded = false, onBack, modRequest, setModRequest }) => { const [items, setItems] = useState(() => { const WHO7 = ['Ana','Diego','Sofía']; const servido = !!mesa && (mesa.fase === 'Platos servidos' || mesa.estado === 'pagada'); return itemsDeMesa(mesa ? mesa.n : 7).map((it,i) => ({ ...it, who: mesa && mesa.n === 7 ? (WHO7[i] || 'Mesa') : `Comensal ${i+1}`, listo: servido, cancelado:false })); }); const [notified, setNotified] = useState(false); const [editing, setEditing] = useState(false); const [addOpen, setAddOpen] = useState(false); const [addFor, setAddFor] = useState(null); // platillo esperando "¿para quién?" const [closed, setClosed] = useState(mesa && mesa.estado === 'pagada'); const [paidPct, setPaidPct] = useState(mesa && mesa.estado === 'pagada' ? 100 : 0); const [cashVal, setCashVal] = useState(mesa && mesa.estado === 'pagada'); const [undo, setUndo] = useState(false); const [serveUndo, setServeUndo] = useState(false); const [serveSnap, setServeSnap] = useState([]); const [modSel, setModSel] = useState({}); // El pago avanza solo: 3 comensales pagan desde su teléfono (0→75%) useEffect(() => { if (closed && paidPct < 75) { const x = setTimeout(() => setPaidPct(p => Math.min(75, p+25)), 1500); return () => clearTimeout(x); } }, [closed, paidPct]); if (!mesa) return null; const e = estadoMesa[mesa.estado]; const served = items.filter(i=>i.listo).length; const allServed = items.filter(i=>!i.cancelado).every(i => i.listo); const canEdit = perms.addItems || perms.removeItems || perms.editQty || perms.editPrice; const orderTotal = items.filter(i=>!i.cancelado).reduce((s,it) => s + it.precio*it.q, 0); const setQty = (i, d) => setItems(arr => arr.map((x,j) => j===i ? {...x, q:Math.max(1, x.q+d)} : x)); const setPrecio = (i, v) => setItems(arr => arr.map((x,j) => j===i ? {...x, precio:Math.max(0, +v||0)} : x)); const removeItem = i => setItems(arr => arr.filter((_,j) => j!==i)); const addItem = (d, who) => { setItems(arr => [...arr, { n:d.name, q:1, who, listo:false, precio:d.price, cancelado:false }]); setAddFor(null); setAddOpen(false); }; const cashAmount = Math.round(orderTotal * 0.25); const nPaid = Math.round(paidPct / 25); const paidDone = paidPct >= 100; const cleanReady = paidDone && cashVal; // Cerrar orden: cancela pendientes y abre el cobro, con ventana de deshacer const cerrarOrden = () => { setItems(arr => arr.map(x => x.listo ? x : {...x, cancelado:true})); setClosed(true); setUndo(true); updateMesa(mesa.n, { estado:'pagada', fase:'Cobrando' }); setTimeout(() => setUndo(false), 5000); }; const deshacer = () => { setItems(arr => arr.map(x => ({...x, cancelado:false}))); setClosed(false); setPaidPct(0); setCashVal(false); setUndo(false); updateMesa(mesa.n, { estado:'activa', fase:'Platos servidos' }); }; const limpiar = () => { updateMesa(mesa.n, { estado:'libre', pax:0, min:0, total:0, fase:undefined }); if (setOrderStatus) setOrderStatus('armando'); onBack ? onBack() : go('mesas'); }; return (
{/* Header vino */}
go('mesas')}/>
Mesa {mesa.n}
{mesa.pax} personas · {mesa.min} min en mesa
{e.label}
{mesa.grupo && (
{GROUP.slice(1).map((p,i) => (
0 ? -10 : 0 }}>
))}
Sesión grupal · 3 de 4 confirmaron
)}
{mesa.estado === 'alerta' && (
{mesa.fase} · {mesa.min} min
{notified ? Notificación enviada a cocina : }
)} {/* Solicitud de modificación del comensal — el mesero decide */} {modRequest && modRequest.status === 'pendiente' && (
Solicitud de cambio · {modRequest.from}
Tú decides qué aplicar — puedes aceptar todo, parte o nada
{modRequest.changes.map((c,i) => (
setModSel(s => ({...s, [i]: s[i]===false ? true : false}))} style={{ display:'flex', alignItems:'center', gap:10, padding:'7px 4px', cursor:'pointer' }}>
{modSel[i]!==false && }
{c}
))}
setModRequest({ ...modRequest, status:'rechazada' })}>Rechazar { modRequest.changes.forEach((c,i) => { if (modSel[i] === false) return; const mm = c.match(/^([+\u2212-])(\d+)\s(.+)$/); if (!mm) return; const sign = mm[1] === '+' ? 1 : -1, q = +mm[2], name = mm[3]; setItems(arr => { const idx = arr.findIndex(x => x.n === name && !x.cancelado); if (sign > 0) { if (idx >= 0) return arr.map((x,j) => j===idx ? {...x, q:x.q+q} : x); const d = MENU_SEED.find(dd => dd.name === name); return [...arr, { n:name, q, who:'Comensal 1', listo:false, precio:d?d.price:0, cancelado:false }]; } if (idx < 0) return arr; return arr.map((x,j) => j===idx ? {...x, q:x.q-q} : x).filter(x => x.q > 0); }); }); setModRequest({ ...modRequest, status:'aceptada' }); }}> Aceptar ({modRequest.changes.filter((_,i)=>modSel[i]!==false).length} de {modRequest.changes.length})
)}
Orden {canEdit ? : {served} de {items.length} servidos}
{editing && (
{perms.editQty && Cantidades} {perms.removeItems && Eliminar} {perms.editPrice ? Precios : Precios (sin permiso)}
)}
{items.map((it,i) => editing ? (
{it.n}
para {it.who}
{it.alergia &&
ALERGIA: {it.alergia.toUpperCase()} — sin este ingrediente
}
{perms.editQty ? (
setQty(i,-1)} style={{ background:'transparent' }}/> {it.q} setQty(i,1)} style={{ background:'transparent' }}/>
) : ×{it.q}} {perms.editPrice ?
$ setPrecio(i, ev.target.value.replace(/\D/g,''))} style={{ width:44, border:'none', background:'transparent', fontSize:13.5, fontWeight:700, color:C.charcoal, textAlign:'right', fontFamily:sans }}/>
: {fmt(it.precio*it.q)}} {perms.removeItems && removeItem(i)} style={{ background:'transparent' }}/>}
) : (
{it.q>1?`${it.q}× `:''}{it.n}
para {it.who}
{it.alergia &&
ALERGIA: {it.alergia.toUpperCase()} — sin este ingrediente
}
{!it.listo && en cocina}
))}
{editing && perms.addItems && ( )}
Total de la mesa {fmt(orderTotal)}
{mesa.estado === 'pagada' && (
Propina + {fmt(mesa.propina != null ? mesa.propina : Math.round(orderTotal*0.15))}
)}
{/* Acciones */}
{!closed ? (
{!allServed ? ( { setServeSnap(items.map(x=>x.listo)); setItems(arr => arr.map(x => x.cancelado ? x : {...x, listo:true})); if (setOrderStatus) setOrderStatus('servida'); updateMesa(mesa.n, { estado:'activa', fase:'Platos servidos' }); setServeUndo(true); setTimeout(() => setServeUndo(false), 5000); }}> Todo servido ) : (
Platos servidos
)} Cerrar cuenta
) : cleanReady ? ( Marcar mesa limpia ) : (
{/* Indicador de pago — no interactivo, como '3 de 4 listos' */}
{nPaid} de 4 comensales pagaron {fmt(Math.round(orderTotal*paidPct/100))} de {fmt(orderTotal)}
{paidPct >= 75 && !cashVal ? ( ) : (
Cobro en curso · pagos desde el teléfono de cada comensal
)}
)}
{/* Toast deshacer */} {undo && (
Cuenta cerrada · pendientes cancelados
)} {serveUndo && (
Todos los platos marcados como servidos
)} {/* Sheet agregar producto — 2 pasos */} {addOpen && (
{ setAddOpen(false); setAddFor(null); }} style={{ position:'absolute', inset:0, background:'rgba(29,28,23,0.42)', backdropFilter:'blur(4px)', WebkitBackdropFilter:'blur(4px)' }}/>
{addFor ? (
setAddFor(null)}/>
{addFor.name}
¿Para quién es este platillo?
{['Ana','Diego','Sofía','Mesa'].map(who => ( ))}
) : (
Agregar producto
A la orden de la mesa {mesa.n}
{MENU_SEED.filter(d => d.active).map(d => (
setAddFor(d)} {...pressFx} style={{ display:'flex', alignItems:'center', gap:12, background:'white', borderRadius:18, padding:'9px 13px', marginBottom:8, cursor:'pointer', boxShadow:'0 2px 8px rgba(29,28,23,0.04)', transition:'transform 150ms' }}>
{d.name}
{d.cat}
{fmt(d.price)}
))}
)}
)} {!embedded && }
); }; // ═══ P08 · MIS PEDIDOS — flujo de un toque ═════════════════ const PEDIDOS_FLOW = [ { id:1, lugar:'Mesa 4', icon:'table_restaurant', pax:4, min:1, estado:'pendiente', extra:true, propina:0, items:['2× Tres Leches de Fresa','1× Agua de Jamaica'], total:275, mesero:'Carlos Ramírez' }, { id:2, lugar:'Mesa 7', icon:'table_restaurant', pax:4, min:6, estado:'en cocina', grupo:true, propina:0, items:['1× Costilla de Res 12 h','1× Aguachile Verde'], total:530, mesero:'Carlos Ramírez' }, { id:3, lugar:'Barra', icon:'local_bar', pax:1, min:2, estado:'pendiente', propina:0, items:['2× Mezcal de la Casa','1× Agua de Jamaica'], total:325, mesero:'Mariana López' }, { id:4, lugar:'Mesa 12', icon:'table_restaurant', pax:3, min:10, estado:'en cocina', demorado:true, alergia:'Mariscos', propina:0, items:['3× Tacos al Pastor','2× Agua de Jamaica'], total:345, mesero:'Carlos Ramírez' }, { id:5, lugar:'Mesa 9', icon:'table_restaurant', pax:2, min:12, estado:'pagada', extra:true, propina:42, items:['1× Mole Negro de la Casa'], total:265, mesero:'Carlos Ramírez' }, ]; const FLOW_META = { pendiente: { stripe:C.warning, chipBg:'rgba(245,158,11,0.15)', chipColor:'#92600A', chipIcon:null, label:'Por confirmar', cta:'Aceptar →', ctaBg:gradVino, ctaColor:'white', next:'en cocina' }, 'en cocina': { stripe:C.info, chipBg:'rgba(59,130,246,0.12)', chipColor:'#1D4ED8', chipIcon:'skillet', label:'En cocina', cta:'Marcar servida ✓', ctaBg:C.surfaceHigh, ctaColor:C.charcoal, next:'servida' }, servida: { stripe:C.success, chipBg:'rgba(34,197,94,0.13)', chipColor:'#15803D', chipIcon:'room_service', label:'Servida', cta:'Confirmar pago', ctaBg:gradDorado, ctaColor:'white', next:'pagada' }, pagada: { stripe:C.morado, chipBg:'rgba(126,76,158,0.13)', chipColor:C.morado, chipIcon:'hourglass_top', label:'Pagando', cta:'Marcar limpia', ctaBg:'#22C55E', ctaColor:'white', next:'cerrada' }, cerrada: { stripe:C.mesaLibre, chipBg:C.surfaceHigh, chipColor:C.muted, chipIcon:'check', label:'Cerrada', cta:null }, }; const OrderFlowList = ({ variant='mesero', historial=false, escenario='Normal' }) => { const [orders, setOrders] = useState(() => pedidosEscenario(escenario)); useEffect(() => { setOrders(pedidosEscenario(escenario)); }, [escenario]); const [filter, setFilter] = useState('Todos'); const mine = variant==='mesero' ? orders.filter(o => o.mesero === WAITER.name) : orders; const abiertos = mine.filter(o => o.estado !== 'cerrada'); const cerrados = mine.filter(o => o.estado === 'cerrada'); const atender = (id, key) => setOrders(prev => prev.map(o => o.id===id ? {...o, [key]:false} : o)); const advance = id => setOrders(prev => prev.map(o => { if (o.id !== id) return o; const next = FLOW_META[o.estado].next; return { ...o, estado: next, demorado: false, min: 0 }; })); const filters = [ ['Todos', abiertos.length], ['Pendientes', abiertos.filter(o=>o.estado==='pendiente').length], ['En cocina', abiertos.filter(o=>o.estado==='en cocina').length], ['Por cobrar', abiertos.filter(o=>['servida','pagada'].includes(o.estado)).length], ['Cerradas', cerrados.length], ]; let list = historial || filter==='Cerradas' ? cerrados : abiertos; if (!historial) { if (filter==='Pendientes') list = abiertos.filter(o=>o.estado==='pendiente'); if (filter==='En cocina') list = abiertos.filter(o=>o.estado==='en cocina'); if (filter==='Por cobrar') list = abiertos.filter(o=>['servida','pagada'].includes(o.estado)); } return (
{!historial && (
{filters.map(([f,n]) => ( ))}
)} {list.map(p => { const meta = FLOW_META[p.estado]; return (
{p.lugar} {p.pax > 0 && {p.pax}} {p.min > 0 ? `${p.min} min` : 'ahora'} {meta.chipIcon && }{meta.label}
{p.items.join(', ')} {p.extra && EXTRA}
{p.cliente &&
Cliente: {p.cliente}
} {variant!=='mesero' &&
Atiende {p.mesero}
} {(p.demorado || p.llamo || (p.alergias && Object.keys(p.alergias).length > 0)) && (
{p.demorado &&
DEMORADA · {p.min} MIN
} {p.llamo &&
LLAMÓ AL MESERO
} {p.alergias && Object.entries(p.alergias).map(([dish, al]) => (
{dish.toUpperCase()} — ALERGIA: {al.toUpperCase()}
))}
)}
{p.estado==='pagada' ? Propina {fmt(p.propina||0)} : } {fmt(p.total)}
{meta.cta && ( )}
); })} {list.length === 0 && (
🧾
Nada por aquí
Las órdenes cerradas quedan en "Cerradas".
)}
); }; const MisPedidos = ({ go }) => { const [viewAll, setViewAll] = useState(false); const [swapOpen, setSwapOpen] = useState(false); return (
{viewAll ? 'Pedidos del turno' : 'Mis pedidos'}
{[['mios','Míos'],['todos','Brigada']].map(([k,l]) => { const on = viewAll === (k==='todos'); return ( ); })}
{/* Stats del turno */}
{[['payments','$2,140 hoy'],['receipt_long','9 órdenes'],['timer','4.2 min prom.']].map(([ic,l]) => ( {l} ))}
{/* Cambio de sesión — tablet compartida */} {swapOpen && setSwapOpen(false)} onDone={() => setSwapOpen(false)}/>}
); }; // ═══ P20 · PERFIL PORTABLE ═════════════════════════════════ const WaiterProfile = ({ go, profile = WAITER, nav }) => (
{/* Hero */}
{profile.name}
{profile.badge &&
{profile.badge}
}
{profile.rating} · {profile.reviews} reseñas · {profile.years} años
{profile.languages.map(l => {l})} Perfil verificado
{/* Nota portable */}
Este perfil es tuyo, no del restaurante. Tu reputación te acompaña a donde trabajes.
{/* Especialidades */}
Especialidades
{profile.specialties.map(s => {s})}
{/* Trayectoria */}
Trayectoria
{profile.history.map((h,i) => (
{h.rest}
{h.role} · {h.period}
{h.rating}
))}
{/* Reseñas */}
Reseñas de comensales
{profile.reviewsList.map((r,i) => (
{r.who}
"{r.text}"
{r.tags.map(t => {t})}
))}
{nav !== undefined ? nav : }
); Object.assign(window, { MeseroNav, WaiterInvite, WaiterRegister, MisMesas, DetalleMesa, MisPedidos, WaiterProfile, OrderFlowList, PEDIDOS_FLOW, FLOW_META });