/* ============================================================ admin.jsx — Login + shell + tablero de órdenes en vivo ============================================================ */ function Admin({ go }) { const store = useStore(); const auth = store.getAuth(); React.useEffect(() => { store.seedDemo(); }, []); if (!auth) return ; return ; } /* ---------------- LOGIN ---------------- */ function AdminLogin({ go }) { const store = useStore(); const [user, setUser] = React.useState("admin"); const [pass, setPass] = React.useState(""); const [err, setErr] = React.useState(false); const submit = (e) => { e.preventDefault(); if (store.login(user, pass)) setErr(false); else setErr(true); }; return (
Panel cajero · cocina

Iniciar sesión

Acceso para staff de Brothers.

{["admin", "cajero"].map((u) => ( ))}
setPass(e.target.value)} placeholder="••••" />
{err &&
Usuario o contraseña incorrectos
}
Demo · usuario admin o cajero · clave 1234
); } /* ---------------- SHELL ---------------- */ function AdminShell({ go, auth }) { const store = useStore(); const [tab, setTab] = React.useState("ordenes"); const [detail, setDetail] = React.useState(null); const [sound, setSound] = React.useState(true); const orders = store.getOrders(); const prevCount = React.useRef(orders.length); const [flash, setFlash] = React.useState(false); // detectar orden nueva → sonido + flash React.useEffect(() => { if (orders.length > prevCount.current) { if (sound) beep(); setFlash(true); setTimeout(() => setFlash(false), 1800); } prevCount.current = orders.length; }, [orders.length]); const nav = [["ordenes", "Órdenes", Ic.list], ["reportes", "Reportes", Ic.chart], ["stock", "Stock", Ic.box]]; const activeOrders = orders.filter((o) => !["entregado", "cancelado"].includes(o.status)); return (
{/* sidebar */} {/* main */}
{flash && (
¡Nueva orden entrante!
)} {tab === "ordenes" && } {tab === "reportes" && } {tab === "stock" && }
{detail && setDetail(null)} />}
); } function beep() { try { const ctx = new (window.AudioContext || window.webkitAudioContext)(); [0, 0.18].forEach((t, i) => { const o = ctx.createOscillator(), g = ctx.createGain(); o.type = "sine"; o.frequency.value = i ? 1180 : 880; o.connect(g); g.connect(ctx.destination); g.gain.setValueAtTime(0.001, ctx.currentTime + t); g.gain.exponentialRampToValueAtTime(0.25, ctx.currentTime + t + 0.02); g.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + t + 0.16); o.start(ctx.currentTime + t); o.stop(ctx.currentTime + t + 0.18); }); } catch (e) {} } /* ---------------- ORDERS BOARD ---------------- */ const STATUS_META = { recibido: { label: "Recibido", color: "#e9b949", bg: "rgba(233,185,73,.12)" }, preparacion: { label: "En preparación", color: "#ea7b1b", bg: "rgba(234,123,27,.12)" }, listo: { label: "Listo", color: "#5aa9ff", bg: "rgba(90,169,255,.12)" }, camino: { label: "En camino", color: "#9b7bff", bg: "rgba(155,123,255,.12)" }, entregado: { label: "Entregado", color: "#3fae6b", bg: "rgba(63,174,107,.12)" }, cancelado: { label: "Cancelado", color: "#d8533c", bg: "rgba(216,83,60,.12)" }, }; function OrdersBoard({ onDetail }) { const store = useStore(); const orders = store.getOrders(); const [filter, setFilter] = React.useState("activas"); const filtered = orders.filter((o) => filter === "todas" ? true : filter === "activas" ? !["entregado", "cancelado"].includes(o.status) : o.status === filter ); // métricas del día const today = orders.filter((o) => new Date(o.createdAt).toDateString() === new Date().toDateString()); const sales = today.filter((o) => o.status !== "cancelado").reduce((s, o) => s + o.total, 0); const avg = today.length ? Math.round(sales / today.filter(o => o.status !== "cancelado").length) : 0; return (

Órdenes

En vivo · se actualiza solo

{/* mini métricas del día */}
!["entregado", "cancelado"].includes(o.status)).length} />
{/* filters */}
{[["activas", "Activas"], ["recibido", "Recibidos"], ["preparacion", "En prep."], ["camino", "En camino"], ["todas", "Todas"]].map(([id, l]) => ( ))}
{filtered.length === 0 ? (
No hay órdenes en esta vista.
) : (
{filtered.map((o) => )}
)}
); } function Metric({ label, value, accent }) { return (
{label}
{value}
); } function timeAgo(ts) { const m = Math.floor((Date.now() - ts) / 60000); if (m < 1) return "recién"; if (m < 60) return `hace ${m} min`; return `hace ${Math.floor(m / 60)}h`; } function OrderCard({ order, onDetail }) { const store = useStore(); const meta = STATUS_META[order.status]; const flow = store.STATUS_FLOW; const idx = flow.indexOf(order.status); const next = idx >= 0 && idx < flow.length - 1 ? flow[idx + 1] : null; return (
{order.id} {order.mode === "delivery" ? : }
{timeAgo(order.createdAt)} · {order.name}
{meta.label}
{order.lines.slice(0, 3).map((l, i) => (
{l.qty}× {l.name}{l.variant !== "single" && · {l.variant === "double" ? "doble" : "pinta"}}
))} {order.lines.length > 3 &&
+{order.lines.length - 3} más…
}
{money(order.total)}
{order.status !== "cancelado" && order.status !== "entregado" && ( )} {next ? ( ) : (
{order.status === "entregado" ? "✓ Entregado" : "Cancelado"}
)}
); } /* ---------------- ORDER DETAIL DRAWER ---------------- */ function OrderDetail({ order, onClose }) { const store = useStore(); const live = store.getOrders().find((o) => o.id === order.id) || order; const meta = STATUS_META[live.status]; const payLabel = { transferencia: "Transferencia", mp: "Mercado Pago", sena: "Seña + efectivo", efectivo: "Efectivo" }[live.pay] || live.pay; const waText = `¡Hola ${live.name}! Tu pedido ${live.id} está: ${meta.label}. — Brothers Food.lst 🍔`; return ( <>
); } function DetRow({ icon: Icon, v }) { return
{v}
; } Object.assign(window, { Admin });