[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_111":112,"_113":114},"routes/embed.x.$handle.$name.$",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":-5},"handle","noelgonzalezsuchi","name","suchi-house-pedidos","path","frontend/components/App.tsx","project",{"_22":49,"_11":12,"_35":50,"_51":-5,"_52":44,"_53":54,"_55":54,"_56":57,"_58":-5,"_59":60,"_61":62,"_63":34,"_64":-5,"_65":-5,"_66":67,"_68":69,"_70":71,"_72":73,"_74":75,"_76":-5,"_77":78,"_79":78,"_80":81,"_82":81,"_83":81,"_84":78,"_85":78,"_86":87,"_88":89,"_90":91,"_92":44},"file",{"_22":23,"_11":24,"_25":26,"_27":28,"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":-5,"_13":46},"permalink","https://www.val.town/x/noelgonzalezsuchi/suchi-house-pedidos/code/frontend/components/App.tsx","extension","id","b539509b-174a-4168-bece-916223ece52c","App.tsx","fileId","01a058f0-c40d-736f-b689-bcad497d29b6","parentId","01a058f0-c40d-736f-b689-c61b8cb51c33","branchId","8c0e03b9-4364-49a7-9f88-4b3a597ffffc","branchVersion",437,"latest",true,"createdAt",["D",1789271527540],"version",120,"fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useMemo, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport {\n bluetoothDisponible,\n conectarImpresora,\n desconectarImpresora,\n estadoImpresora,\n imprimirBluetooth,\n imprimirLogoBluetooth,\n reconectarSiEsPosible,\n suscribirseImpresora,\n} from \"../lib/impresora.ts\";\n\ntype MenuItem = { categoriaOriginal: string; variante: string; producto: string; precio: number; notas: string };\ntype MenuGrupo = { nombre: string; items: MenuItem[] };\ntype PedidoItem = { rowId: string; categoria: string; producto: string; cantidad: number; precioUnitario: number; subtotal: number };\ntype Pedido = {\n id: string;\n tipo: string;\n identificador: string;\n envio: number | null;\n nota: string;\n listo: boolean;\n items: PedidoItem[];\n total: number;\n};\n\nconst OPCIONES_ENVIO = [5, 10, 15, 20, 25, 30];\ntype Alerta = { insumo: string; actual: number; minima: number; unidad: string };\n\nconst MESAS = [\"Mesa 1\", \"Mesa 2\", \"Barra 1\", \"Barra 2\"];\nconst METODOS_PAGO = [\"Efectivo\", \"Tarjeta\", \"Transferencia\"];\nconst PERFILES_SUGERIDOS = [\"Noel\", \"Gustavo\", \"Nasa\", \"Sari\", \"Salma\", \"Renata\", \"Padilla\"];\n\n// El perfil de \"quién está atendiendo\" se guarda en este dispositivo/navegador (no en el\n// servidor) — cada celular/computadora recuerda el suyo, así no hay que elegirlo en cada venta.\nconst LLAVE_PERFIL = \"suchi_perfil\";\nfunction leerPerfilGuardado(): string {\n try {\n return localStorage.getItem(LLAVE_PERFIL) || \"\";\n } catch {\n return \"\";\n }\n}\nfunction guardarPerfil(nombre: string) {\n try {\n localStorage.setItem(LLAVE_PERFIL, nombre);\n } catch {\n // si el navegador bloquea localStorage no pasa nada grave, solo no se recuerda\n }\n}\n\nasync function api(path: string, opts: RequestInit = {}) {\n const res = await fetch(path, {\n ...opts,\n headers: { \"Content-Type\": \"application/json\", ...(opts.headers || {}) },\n });\n const data = await res.json();\n if (!data.ok) throw new Error(data.error || \"Error desconocido\");\n return data;\n}\n\n// Insignia grande y bien contrastada para el ID de pedido — se usa en la lista de\n// pedidos abiertos, en el carrito y en el modal de cobro para que nunca pase desapercibido.\nfunction BadgeId({ id, size = \"md\" }: { id: string; size?: \"sm\" | \"md\" | \"lg\" }) {\n const tam = size === \"lg\" ? \"text-2xl px-3 py-1\" : size === \"md\" ? \"text-base px-2.5 py-1\" : \"text-sm px-2 py-0.5\";\n return #{id};\n}\n\n// Abre una ventana de impresión con el formato de ticket térmico de 80mm. Se usa tanto para\n// imprimir la comanda EN CUALQUIER MOMENTO mientras el pedido sigue abierto (sin necesidad de\n// cobrar) como para reimprimir comanda/cuenta desde el modal de cobro.\n// La comanda (para cocina) se imprime más grande y en negritas que el ticket (para el cliente),\n// para que se pueda leer de un vistazo rápido mientras se está preparando el pedido.\nfunction imprimirTexto(texto: string, titulo: string, opts: { fontSize?: number; bold?: boolean; logo?: boolean } = {}) {\n const { fontSize = 13, bold = false, logo = false } = opts;\n const w = window.open(\"\", \"_blank\", \"width=380,height=600\");\n if (!w) return;\n // Cuando es un ticket para el cliente (logo:true), arriba de todo el texto se imprime el logo\n // real (la imagen, no un dibujo hecho con caracteres), del tamaño de un logo — no del ancho\n // completo del papel. El nombre \"SUCHI HOUSE\" espaciado ya va incluido como texto al final del\n // ticket (ver formatearTicket en backend/ticket.ts), así que aquí no hace falta repetirlo.\n const encabezadoLogo = logo\n ? `

`\n : \"\";\n w.document.write(`\n \n \n ${titulo}\n \n \n ${encabezadoLogo}${texto.replace(/\n \n `);\n w.document.close();\n w.focus();\n w.print();\n}\n\n// Punto único de impresión de toda la app: si hay una impresora Bluetooth conectada, manda los\n// datos directo por ahí (sin diálogos ni ventanas). Si no hay ninguna conectada, o si algo falla\n// al mandarle los datos, cae de regreso a la ventana de impresión normal del navegador (imprimirTexto)\n// para que nunca se quede uno sin poder imprimir.\n// opts.logo: true SOLO para el ticket del cliente — imprime primero el logo real de Suchi House\n// (arriba de todo), y el texto del ticket (que ya trae \"SUCHI HOUSE\" espaciado al final) se\n// imprime justo debajo. La comanda (para cocina) y el corte de caja no llevan logo.\nasync function imprimir(texto: string, titulo: string, opts: { fontSize?: number; bold?: boolean; alturaDoble?: boolean; logo?: boolean } = {}) {\n if (estadoImpresora().conectada) {\n try {\n if (opts.logo) {\n try {\n // Logo chico (50mm), arriba de todo, sin cortar — el texto del ticket sigue después.\n await imprimirLogoBluetooth(\"/frontend/logo-wordmark.svg\", { anchoPx: 360, cortar: false });\n } catch (e) {\n console.error(\"No se pudo imprimir el logo (se imprime el ticket de texto de todas formas):\", e);\n }\n await imprimirBluetooth(texto, { bold: opts.bold, alturaDoble: opts.alturaDoble, cortar: true });\n } else {\n await imprimirBluetooth(texto, { bold: opts.bold, alturaDoble: opts.alturaDoble });\n }\n return;\n } catch (e: any) {\n console.error(\"Falló la impresión por Bluetooth, se usará la ventana de impresión normal:\", e);\n alert(`No se pudo imprimir por Bluetooth (${e.message}). Se abrirá la impresión normal.`);\n }\n }\n imprimirTexto(texto, titulo, { fontSize: opts.fontSize, bold: opts.bold, logo: opts.logo });\n}\n\n// Extrae solo los dígitos de un texto de teléfono (quita espacios, guiones, paréntesis) para\n// armar un link de WhatsApp. Devuelve \"\" si no parece un número usable.\nfunction soloDigitos(texto: string): string {\n const digitos = (texto || \"\").replace(/\\D/g, \"\");\n return digitos.length >= 10 ? digitos : \"\";\n}\n\n// Comparte el texto del ticket por WhatsApp (u otra app) sin necesidad de ninguna cuenta ni\n// configuración extra: usa el share nativo del celular si está disponible (el usuario elige a\n// quién mandarlo), y si no, abre un link directo de WhatsApp — a un número específico cuando lo\n// tenemos (pedidos a domicilio), o al selector de contactos de WhatsApp cuando no.\nasync function compartirTicket(texto: string, telefono?: string) {\n if ((navigator as any).share) {\n try {\n await (navigator as any).share({ text: texto });\n return;\n } catch {\n // el usuario canceló el share nativo — no pasa nada, no hace falta plan B\n return;\n }\n }\n const numero = telefono ? soloDigitos(telefono) : \"\";\n const url = numero\n ? `https://wa.me/52${numero}?text=${encodeURIComponent(texto)}`\n : `https://wa.me/?text=${encodeURIComponent(texto)}`;\n window.open(url, \"_blank\");\n}\n\n// Aviso sonoro (dos \"beeps\") de que cocina marcó un pedido como listo — generado con Web Audio,\n// sin depender de ningún archivo de sonido externo. Si el navegador bloquea el audio (algunos\n// exigen que el usuario haya interactuado antes con la página), simplemente no suena; el aviso\n// visual (banner + insignia \"✅ Listo\") sigue funcionando igual.\nfunction sonarAlertaListo() {\n try {\n const AudioCtx = (window as any).AudioContext || (window as any).webkitAudioContext;\n const ctx = new AudioCtx();\n const beep = (frecuencia: number, inicio: number) => {\n const osc = ctx.createOscillator();\n const gain = ctx.createGain();\n osc.type = \"sine\";\n osc.frequency.value = frecuencia;\n gain.gain.setValueAtTime(0.0001, ctx.currentTime + inicio);\n gain.gain.exponentialRampToValueAtTime(0.3, ctx.currentTime + inicio + 0.02);\n gain.gain.exponentialRampToValueAtTime(0.0001, ctx.currentTime + inicio + 0.35);\n osc.connect(gain);\n gain.connect(ctx.destination);\n osc.start(ctx.currentTime + inicio);\n osc.stop(ctx.currentTime + inicio + 0.4);\n };\n beep(880, 0);\n beep(1046, 0.22);\n } catch {\n // ver comentario de arriba — no truena la app si el audio no se puede reproducir.\n }\n}\n\nexport function App() {\n const [menu, setMenu] = useState([]);\n const [pedidos, setPedidos] = useState([]);\n const [alertas, setAlertas] = useState([]);\n const [cargando, setCargando] = useState(true);\n const [error, setError] = useState(null);\n\n const [grupoActivo, setGrupoActivo] = useState(null);\n const [pedidoActivoId, setPedidoActivoId] = useState(null);\n\n const [modalNuevoPedido, setModalNuevoPedido] = useState(false);\n const [modalCantidad, setModalCantidad] = useState(null);\n const [modalCobro, setModalCobro] = useState<{ id: string; comanda: string; cuenta: string; total: number; telefono: string } | null>(\n null,\n );\n const [modalEnvio, setModalEnvio] = useState(false);\n const [modalHistorial, setModalHistorial] = useState(false);\n const [modalCorte, setModalCorte] = useState<{ resumen: any; texto: string } | null>(null);\n const [modalImpresora, setModalImpresora] = useState(false);\n const [impresora, setImpresora] = useState(estadoImpresora());\n const [modalMetodoPago, setModalMetodoPago] = useState(null); // guarda el id del pedido a cobrar\n const [modalPerfil, setModalPerfil] = useState(false);\n const [modalInsumos, setModalInsumos] = useState(false);\n const [modalChecador, setModalChecador] = useState(false);\n const [modalVentas, setModalVentas] = useState(false);\n const [modalFondoCaja, setModalFondoCaja] = useState(false);\n const [fondoCajaHoy, setFondoCajaHoy] = useState(null);\n const [perfil, setPerfil] = useState(leerPerfilGuardado());\n const [avisoListo, setAvisoListo] = useState(null);\n // Recuerda qué pedidos YA avisamos como \"listo\", para no repetir el sonido/banner en cada\n // poll de 8s mientras el pedido siga sin cobrarse. Es un ref (no state) porque no necesita\n // volver a dibujar nada por sí solo. primeraCarga evita que, al abrir la app, se disparen\n // avisos de pedidos que ya estaban listos desde antes (de una sesión anterior).\n const idsListoAvisados = useRef>(new Set());\n const primeraCarga = useRef(true);\n\n // Al abrir la app, si el navegador ya recuerda un permiso de Bluetooth concedido antes,\n // se reconecta solo (sin volver a pedir emparejar). Y nos suscribimos para que el botón\n // del header refleje conectada/desconectada en cuanto cambie (incluyendo si se apaga la\n // impresora o se va de rango).\n useEffect(() => {\n const cancelar = suscribirseImpresora(() => setImpresora(estadoImpresora()));\n reconectarSiEsPosible().then(() => setImpresora(estadoImpresora()));\n return cancelar;\n }, []);\n\n async function cargarTodo() {\n try {\n const [m, p, a] = await Promise.all([\n api(\"/api/menu\"),\n api(\"/api/pedidos\"),\n api(\"/api/insumos/alertas\"),\n ]);\n setMenu(m.menu);\n // Avisar (sonido + banner) de los pedidos que ACABAN de marcarse \"listo\" desde cocina —\n // solo los nuevos desde el último poll, y nunca en la primerísima carga (esos ya estaban\n // listos de antes, no hace falta re-avisar).\n if (primeraCarga.current) {\n for (const ped of p.pedidos as Pedido[]) {\n if (ped.listo) idsListoAvisados.current.add(ped.id);\n }\n primeraCarga.current = false;\n } else {\n for (const ped of p.pedidos as Pedido[]) {\n if (ped.listo && !idsListoAvisados.current.has(ped.id)) {\n idsListoAvisados.current.add(ped.id);\n sonarAlertaListo();\n setAvisoListo(ped);\n setTimeout(() => setAvisoListo((actual) => (actual?.id === ped.id ? null : actual)), 8000);\n }\n }\n }\n setPedidos(p.pedidos);\n setAlertas(a.alertas);\n // Forma funcional: NO leer \"grupoActivo\" del cierre (closure) de esta función.\n // cargarTodo() se crea una sola vez (useEffect con deps []) y el intervalo de 8s\n // sigue llamando a esa misma copia vieja para siempre — su \"grupoActivo\" capturado\n // se quedó congelado en null desde el primer render. Por eso cada 8s se volvía a\n // \"Maki\": la condición \"!grupoActivo\" de afuera SIEMPRE era true. Usando la forma\n // funcional de setGrupoActivo, React nos da el valor actual de verdad, no el viejo.\n if (m.menu.length > 0) setGrupoActivo((actual) => actual || m.menu[0].nombre);\n setError(null);\n } catch (e: any) {\n setError(e.message);\n } finally {\n setCargando(false);\n }\n }\n\n useEffect(() => {\n cargarTodo();\n const t = setInterval(cargarTodo, 8000);\n return () => clearInterval(t);\n }, []);\n\n // Al abrir la app, revisa si ya se capturó el fondo de caja de HOY. Si no, abre el modal solo\n // (una vez) para pedirlo — así queda registrado desde temprano, sin depender de acordarse de\n // apretar el botón. Si el usuario lo cierra sin llenarlo, siempre puede volver a abrirlo con\n // el botón \"💰 Fondo de caja\" del menú de arriba.\n useEffect(() => {\n api(\"/api/caja/fondo\")\n .then((r) => {\n setFondoCajaHoy(r.monto);\n if (r.monto === null) setModalFondoCaja(true);\n })\n .catch(() => {\n // si falla la consulta no truena la app — el usuario igual puede abrir el modal a mano\n });\n }, []);\n\n const pedidoActivo = useMemo(() => pedidos.find((p) => p.id === pedidoActivoId) || null, [pedidos, pedidoActivoId]);\n const grupo = useMemo(() => menu.find((g) => g.nombre === grupoActivo) || null, [menu, grupoActivo]);\n\n // Borrador de la nota del pedido activo: se resetea solo cuando CAMBIA de pedido (por id), no\n // en cada poll de 8s — si no, se le borraría al que esté escribiendo justo en ese momento.\n const [notaBorrador, setNotaBorrador] = useState(\"\");\n const [guardandoNota, setGuardandoNota] = useState(false);\n useEffect(() => {\n setNotaBorrador(pedidoActivo?.nota || \"\");\n }, [pedidoActivo?.id]);\n\n async function guardarNotaBorrador() {\n if (!pedidoActivo) return;\n setGuardandoNota(true);\n try {\n await guardarNota(pedidoActivo.id, notaBorrador.trim());\n } catch (e: any) {\n alert(\"No se pudo guardar la nota: \" + e.message);\n } finally {\n setGuardandoNota(false);\n }\n }\n\n async function crearPedido(tipo: string, identificador: string) {\n const r = await api(\"/api/pedidos\", { method: \"POST\", body: JSON.stringify({ tipo, identificador }) });\n setModalNuevoPedido(false);\n await cargarTodo();\n setPedidoActivoId(r.id);\n }\n\n async function agregarAlPedido(item: MenuItem, cantidad: number) {\n if (!pedidoActivoId) return;\n const r = await api(`/api/pedidos/${pedidoActivoId}/items`, {\n method: \"POST\",\n body: JSON.stringify({ categoria: item.categoriaOriginal, producto: item.producto, cantidad }),\n });\n setPedidos(r.pedidos);\n setModalCantidad(null);\n }\n\n async function quitarItem(rowId: string) {\n const r = await api(`/api/pedidos/items/${rowId}`, { method: \"DELETE\" });\n setPedidos(r.pedidos);\n }\n\n async function cancelarPedido(id: string) {\n if (!confirm(\"¿Cancelar este pedido? Se perderán los productos agregados.\")) return;\n const r = await api(`/api/pedidos/${id}`, { method: \"DELETE\" });\n setPedidos(r.pedidos);\n if (pedidoActivoId === id) setPedidoActivoId(null);\n }\n\n // Imprime la comanda del pedido activo TAL COMO ESTÁ AHORITA, sin cobrar ni cerrar el\n // pedido — para que cocina pueda empezar a preparar mientras el pedido sigue abierto y\n // se le pueden seguir agregando productos después.\n function imprimirComandaActiva() {\n if (!pedidoActivo) return;\n const ahora = new Date();\n const fecha = ahora.toLocaleDateString(\"es-MX\");\n const hora = ahora.toLocaleTimeString(\"es-MX\", { hour: \"2-digit\", minute: \"2-digit\" });\n const encabezado = pedidoActivo.tipo\n ? `${pedidoActivo.tipo}${pedidoActivo.identificador ? \": \" + pedidoActivo.identificador : \"\"}\\n`\n : \"\";\n const notaLinea = pedidoActivo.nota ? `\\n📝 NOTA: ${pedidoActivo.nota}\\n` : \"\";\n const comanda = `COMANDA — Pedido #${pedidoActivo.id}\\n${encabezado}${fecha} ${hora}${notaLinea}\\n------------------------\\n` +\n pedidoActivo.items.map((it) => `${it.cantidad}x ${it.producto}`).join(\"\\n\\n\");\n imprimir(comanda, \"Comanda\", { fontSize: 22, bold: true, alturaDoble: true });\n }\n\n async function confirmarEnvio(monto: number) {\n if (!pedidoActivoId) return;\n const r = await api(`/api/pedidos/${pedidoActivoId}/envio`, {\n method: \"POST\",\n body: JSON.stringify({ monto }),\n });\n setPedidos(r.pedidos);\n setModalEnvio(false);\n }\n\n async function guardarNota(id: string, nota: string) {\n const r = await api(`/api/pedidos/${id}/nota`, {\n method: \"POST\",\n body: JSON.stringify({ nota }),\n });\n setPedidos(r.pedidos);\n }\n\n async function abrirCorte() {\n if (!confirm(\"¿Generar el corte de caja de hoy? Se sumarán todos los pedidos cobrados del día.\")) return;\n try {\n const r = await api(\"/api/corte\");\n setModalCorte({ resumen: r.resumen, texto: r.texto });\n } catch (e: any) {\n alert(e.message);\n }\n }\n\n // El teléfono (para el botón de WhatsApp) se guarda ANTES de cobrar, porque en cuanto se cobra\n // el pedido se borra de \"activos\" — después de este punto ya no lo podemos volver a leer de ahí.\n async function cobrarPedido(id: string, metodoPago: string) {\n const pedido = pedidos.find((p) => p.id === id);\n const telefono = pedido?.tipo === \"Domicilio\" ? pedido.identificador : \"\";\n const r = await api(`/api/pedidos/${id}/cobrar`, {\n method: \"POST\",\n body: JSON.stringify({ metodoPago, atendioQuien: perfil }),\n });\n setModalCobro({ id, comanda: r.comanda, cuenta: r.cuenta, total: r.total, telefono });\n setModalMetodoPago(null);\n if (pedidoActivoId === id) setPedidoActivoId(null);\n await cargarTodo();\n }\n\n if (cargando) {\n return

Cargando Suchi House…

;\n }\n\n return (\n

\n $\"Suchi$ \n \n Pedidos\n \n

\n {/* \"+ Nuevo pedido\" va primero y aparte (separador a la derecha) porque es el botón\n que más se usa — así siempre está a la vista, sin tener que buscarlo entre los demás. */}\n setModalNuevoPedido(true)}\n >\n + Nuevo pedido\n \n setModalImpresora(true)}\n title=\"Impresora Bluetooth\"\n >\n 🖨️\n \n \n \n 👨‍🍳 Cocina\n \n {/* Tickets se movió aquí, justo después de Cocina, para que quede más al frente y\n se necesite menos scroll para llegar a él (pedido de Noel). */}\n setModalHistorial(true)}\n >\n 🧾 Tickets\n \n setModalPerfil(true)}\n >\n 👤 {perfil || \"Elegir quién atiende\"}\n \n setModalInsumos(true)}\n >\n 📦 Insumos\n \n setModalChecador(true)}\n >\n 🕒 Checador\n \n setModalVentas(true)}\n >\n 📈 Ventas\n \n setModalFondoCaja(true)}\n >\n 💰 Fondo de caja{fondoCajaHoy != null ? \" (\" + \"$\" + fondoCajaHoy.toFixed(0) + \")\" : \"\"}\n \n {/* Corte se queda al final de la barra, como pidió Noel. */}\n \n 📊 Corte\n \n

\n\n {avisoListo && (\n

\n ✅ El pedido #{avisoListo.id} ({avisoListo.tipo} {avisoListo.identificador}) ya está listo en cocina.\n \n

\n )}\n\n {error &&

{error}

}\n\n {alertas.length > 0 && (\n

\n ⚠️ Insumos bajos: {alertas.map((a) => a.insumo).join(\", \")}\n

\n )}\n\n

\n {/* Pedidos abiertos */}\n

Pedidos abiertos ({pedidos.length})

\n {pedidos.length === 0 &&

No hay pedidos abiertos.

}\n

\n {pedidos.map((p) => (\n setPedidoActivoId(p.id)}\n class={`text-left px-3 py-2 rounded-lg border min-w-[160px] transition-colors ${\n p.listo\n ? \"border-green-500 bg-green-950/40 ring-1 ring-green-500/40\"\n : pedidoActivoId === p.id\n ? \"border-amber-500 bg-[#1a3d38] ring-1 ring-amber-500/40 shadow-sm\"\n : \"border-[#2c5f56] bg-[#12302c] hover:border-[#4a8a7e]\"\n }`}\n >\n

\n \n {p.tipo} {p.identificador}\n {p.listo && ✅ Listo}\n {p.nota && 📝}\n

{p.items.length} productos · ${p.total.toFixed(2)}

\n \n ))}\n

\n\n {/* Menú */}\n

Menú

\n {menu.map((g) => (\n setGrupoActivo(g.nombre)}\n class={`px-4 py-2 rounded-full font-semibold whitespace-nowrap transition-colors ${\n grupoActivo === g.nombre\n ? \"bg-amber-500 text-[#0d1f1e] shadow-sm\"\n : \"bg-[#1a3d38] text-[#bcd6cf] hover:bg-[#234f48]\"\n }`}\n >\n {g.nombre}\n \n ))}\n

\n\n {!pedidoActivoId && (\n

\n Selecciona o crea un pedido a la izquierda antes de agregar productos.\n

\n )}\n\n

\n {grupo?.items.map((item, i) => (\n setModalCantidad(item)}\n class=\"bg-[#1a3d38] disabled:opacity-40 hover:bg-[#234f48] active:scale-[0.97] border border-[#2c5f56] rounded-xl p-3 text-left transition\"\n >\n

{item.producto}

${item.precio.toFixed(2)}

\n \n ))}\n

\n\n {/* Carrito del pedido activo */}\n

Pedido actual

\n {!pedidoActivo &&

Sin pedido seleccionado.

}\n {pedidoActivo && (\n

\n \n {pedidoActivo.tipo} {pedidoActivo.identificador}\n

\n {pedidoActivo.items.length === 0 &&

Sin productos todavía.

}\n {pedidoActivo.items.map((it) => (\n

\n {it.cantidad}x {it.producto}\n

${it.precioUnitario.toFixed(2)} c/u

${it.subtotal.toFixed(2)}

\n \n

\n ))}\n

\n\n

\n \n 📝 Nota del pedido (se ve en cocina y se imprime en la comanda)\n \n setNotaBorrador(e.target.value)}\n placeholder=\"Ej. sin aguacate, extra picante...\"\n rows={2}\n class=\"w-full bg-[#1a3d38] border border-[#2c5f56] rounded-lg px-3 py-2 text-sm\"\n />\n {notaBorrador !== (pedidoActivo.nota || \"\") && (\n \n {guardandoNota ? \"Guardando...\" : \"💾 Guardar nota\"}\n \n )}\n

\n\n {pedidoActivo.tipo === \"Domicilio\" && (\n

\n Envío\n \n {pedidoActivo.envio ? \"$\" + pedidoActivo.envio.toFixed(2) : \"Falta agregar\"}\n \n

\n )}\n

\n Total\n ${pedidoActivo.total.toFixed(2)}\n

\n {pedidoActivo.tipo === \"Domicilio\" && (\n setModalEnvio(true)}\n class={`w-full mb-2 py-2 rounded-lg font-semibold transition ${\n pedidoActivo.envio ? \"bg-[#234f48] hover:bg-[#2c5f56]\" : \"bg-amber-500 hover:bg-amber-400 text-[#0d1f1e]\"\n }`}\n >\n 🚚 {pedidoActivo.envio ? \"Cambiar envío\" : \"Agregar envío\"}\n \n )}\n

\n cancelarPedido(pedidoActivo.id)}\n class=\"flex-1 bg-[#234f48] hover:bg-[#2c5f56] py-2 rounded-lg font-semibold\"\n >\n Cancelar\n \n setModalMetodoPago(pedidoActivo.id)}\n class=\"flex-1 bg-green-600 hover:bg-green-500 active:scale-95 disabled:opacity-40 disabled:active:scale-100 py-2 rounded-lg font-semibold transition\"\n >\n Cobrar\n \n

\n \n 🖨️ Imprimir comanda\n \n

\n )}\n

\n\n {modalNuevoPedido && setModalNuevoPedido(false)} onCrear={crearPedido} />}\n {modalCantidad && (\n setModalCantidad(null)} onConfirmar={agregarAlPedido} />\n )}\n {modalCobro && setModalCobro(null)} />}\n {modalMetodoPago && (\n setModalMetodoPago(null)}\n onElegir={(metodo) => cobrarPedido(modalMetodoPago, metodo)}\n />\n )}\n {modalPerfil && (\n setModalPerfil(false)}\n onElegir={(nombre) => {\n setPerfil(nombre);\n guardarPerfil(nombre);\n setModalPerfil(false);\n }}\n />\n )}\n {modalInsumos && setModalInsumos(false)} />}\n {modalChecador && setModalChecador(false)} />}\n {modalEnvio && pedidoActivo && (\n setModalEnvio(false)}\n onConfirmar={confirmarEnvio}\n />\n )}\n {modalHistorial && setModalHistorial(false)} />}\n {modalVentas && setModalVentas(false)} />}\n {modalFondoCaja && (\n setModalFondoCaja(false)}\n onGuardado={(monto) => {\n setFondoCajaHoy(monto);\n setModalFondoCaja(false);\n }}\n />\n )}\n {modalCorte && setModalCorte(null)} />}\n {modalImpresora && (\n setModalImpresora(false)}\n onCambio={() => setImpresora(estadoImpresora())}\n />\n )}\n

\n );\n}\n\nfunction ModalNuevoPedido({ onCerrar, onCrear }: { onCerrar: () => void; onCrear: (tipo: string, identificador: string) => void }) {\n const [tipo, setTipo] = useState<\"Mesa\" | \"Domicilio\" | \"ParaLlevar\">(\"Mesa\");\n const [mesa, setMesa] = useState(MESAS[0]);\n const [nombre, setNombre] = useState(\"\");\n const [telefono, setTelefono] = useState(\"\");\n\n return (\n

Nuevo pedido

\n\n

\n setTipo(\"Mesa\")}\n class={`py-2 rounded-lg font-semibold text-sm ${tipo === \"Mesa\" ? \"bg-red-600\" : \"bg-[#234f48]\"}`}\n >\n Mesa / Barra\n \n setTipo(\"Domicilio\")}\n class={`py-2 rounded-lg font-semibold text-sm ${tipo === \"Domicilio\" ? \"bg-red-600\" : \"bg-[#234f48]\"}`}\n >\n Domicilio\n \n setTipo(\"ParaLlevar\")}\n class={`py-2 rounded-lg font-semibold text-sm ${tipo === \"ParaLlevar\" ? \"bg-red-600\" : \"bg-[#234f48]\"}`}\n >\n Para llevar\n \n

\n\n {tipo === \"Mesa\" && (\n

\n {MESAS.map((m) => (\n setMesa(m)}\n class={`py-2 rounded-lg font-semibold ${mesa === m ? \"bg-red-600\" : \"bg-[#234f48]\"}`}\n >\n {m}\n \n ))}\n

\n )}\n\n {tipo === \"Domicilio\" && (\n

\n setNombre(e.target.value)}\n class=\"w-full bg-[#1a3d38] border border-[#356d63] rounded-lg px-3 py-2 outline-none placeholder-[#7fa99e]\"\n />\n setTelefono(e.target.value)}\n class=\"w-full bg-[#1a3d38] border border-[#356d63] rounded-lg px-3 py-2 outline-none placeholder-[#7fa99e]\"\n />\n

\n )}\n\n {tipo === \"ParaLlevar\" && (\n

Para clientes que piden directo en el mostrador, sin mesa.

\n setNombre(e.target.value)}\n class=\"w-full bg-[#1a3d38] border border-[#356d63] rounded-lg px-3 py-2 outline-none placeholder-[#7fa99e]\"\n />\n

\n )}\n\n

\n \n {\n if (tipo === \"Mesa\") {\n const [t, num] = mesa.split(\" \");\n onCrear(t, num);\n } else if (tipo === \"Domicilio\") {\n if (!nombre.trim()) return alert(\"Escribe el nombre del cliente\");\n onCrear(\"Domicilio\", `${nombre.trim()}${telefono.trim() ? \" — \" + telefono.trim() : \"\"}`);\n } else {\n onCrear(\"Para llevar\", nombre.trim());\n }\n }}\n class=\"flex-1 bg-green-600 py-2 rounded-lg font-semibold\"\n >\n Crear\n \n

\n );\n}\n\nfunction ModalCantidad(\n { item, onCerrar, onConfirmar }: { item: MenuItem; onCerrar: () => void; onConfirmar: (item: MenuItem, cantidad: number) => void },\n) {\n const [cantidad, setCantidad] = useState(1);\n return (\n

{item.producto}

${item.precio.toFixed(2)} c/u

\n\n

\n setCantidad((c) => Math.max(1, c - 1))}\n class=\"w-12 h-12 bg-[#234f48] rounded-full text-2xl font-bold\"\n >\n −\n \n

{cantidad}

\n \n

\n\n

Subtotal: ${(item.precio * cantidad).toFixed(2)}

\n\n

\n \n \n

\n );\n}\n\nfunction ModalCobro(\n { data, onCerrar }: { data: { id: string; comanda: string; cuenta: string; total: number; telefono: string }; onCerrar: () => void },\n) {\n return (\n

✅ Pedido cobrado

\n \n

${data.total.toFixed(2)}

\n\n

\n \n compartirTicket(data.cuenta, data.telefono)}\n class=\"bg-green-700 hover:bg-green-600 py-3 rounded-lg font-semibold\"\n >\n 📲 WhatsApp\n \n

\n\n

{data.cuenta}

\n\n \n

\n );\n}\n\n// Se abre al darle \"Cobrar\" — pide elegir el método de pago ANTES de registrar la venta, para\n// que el corte de caja pueda desglosar cuánto entró en efectivo vs. tarjeta/transferencia.\nfunction ModalMetodoPago({ onCerrar, onElegir }: { onCerrar: () => void; onElegir: (metodo: string) => void }) {\n const [enviando, setEnviando] = useState(null);\n\n async function elegir(metodo: string) {\n setEnviando(metodo);\n try {\n await onElegir(metodo);\n } catch (e: any) {\n // IMPORTANTE: sin este catch, si falla el cobro (Sheets lento, sin internet, etc.) no se\n // avisaba nada — el botón nomás volvía a la normalidad y parecía que sí había cobrado,\n // pero el pedido nunca quedó registrado (por eso a veces \"no aparecía en el historial\").\n alert(\"No se pudo cobrar el pedido: \" + (e?.message || \"error desconocido\") + \"\\n\\nInténtalo de nuevo.\");\n } finally {\n setEnviando(null);\n }\n }\n\n return (\n

💳 ¿Cómo pagó?

Elige el método de pago para registrar la venta.

\n\n

\n {METODOS_PAGO.map((m) => (\n elegir(m)}\n class=\"w-full bg-[#234f48] hover:bg-[#2c5f56] disabled:opacity-50 py-3 rounded-lg font-semibold text-left px-4\"\n >\n {enviando === m ? \"Cobrando...\" : m}\n \n ))}\n

\n\n \n

\n );\n}\n\n// Selector de \"quién está atendiendo\" — se guarda en este dispositivo (ver leerPerfilGuardado /\n// guardarPerfil) y se manda al cobrar cada pedido, para que quede en el ticket y (más adelante)\n// se pueda desglosar el corte de caja por persona.\nfunction ModalPerfil({ actual, onCerrar, onElegir }: { actual: string; onCerrar: () => void; onElegir: (nombre: string) => void }) {\n const [personalizado, setPersonalizado] = useState(\"\");\n\n return (\n

👤 ¿Quién está atendiendo?

Se queda guardado en este celular/computadora hasta que lo cambies.

\n\n

\n {PERFILES_SUGERIDOS.map((nombre) => (\n onElegir(nombre)}\n class={`py-3 rounded-lg font-semibold ${actual === nombre ? \"bg-amber-500 text-[#0d1f1e]\" : \"bg-[#234f48] hover:bg-[#2c5f56]\"}`}\n >\n {nombre}\n \n ))}\n

\n\n

\n setPersonalizado(e.target.value)}\n class=\"flex-1 bg-[#1a3d38] border border-[#356d63] rounded-lg px-3 py-2 outline-none placeholder-[#7fa99e]\"\n />\n personalizado.trim() && onElegir(personalizado.trim())}\n class=\"bg-green-600 hover:bg-green-500 px-4 rounded-lg font-semibold\"\n >\n Usar\n \n

\n\n \n

\n );\n}\n\n// Registrar compra de un insumo: suma la cantidad comprada al stock actual en el Sheet, sin\n// tener que editar el Sheet a mano. No lleva historial de compras todavía — solo ajusta el\n// número de \"Cantidad actual\" (y su Estado OK/BAJO) del insumo elegido.\ntype ProductoReporte = { producto: string; cantidadVendida: number; ingresos: number; numPedidos: number };\ntype ReporteProductos = { desde: string; hasta: string; dias: number; porCantidad: ProductoReporte[]; porIngresos: ProductoReporte[] };\n\n// Muestra qué se vendió más (por piezas y por ingresos) en los últimos N días, para saber qué\n// reabastecer primero. Solo lectura — no modifica nada, a diferencia de ModalInsumos.\nfunction ModalVentas({ onCerrar }: { onCerrar: () => void }) {\n const [dias, setDias] = useState(7);\n const [reporte, setReporte] = useState(null);\n const [vista, setVista] = useState<\"cantidad\" | \"ingresos\">(\"cantidad\");\n const [cargando, setCargando] = useState(true);\n const [error, setError] = useState(null);\n\n useEffect(() => {\n setCargando(true);\n setError(null);\n api(`/api/reportes/top-productos?dias=${dias}`)\n .then((r) => setReporte(r.reporte))\n .catch((e) => setError(e.message))\n .finally(() => setCargando(false));\n }, [dias]);\n\n const lista = reporte ? (vista === \"cantidad\" ? reporte.porCantidad : reporte.porIngresos) : [];\n\n return (\n

📈 Productos más vendidos

\n {reporte && (\n

\n Del {reporte.desde} al {reporte.hasta}\n

\n )}\n\n

\n {[7, 15, 30].map((d) => (\n setDias(d)}\n class={`px-3 py-1.5 rounded-lg text-sm font-semibold ${dias === d ? \"bg-amber-500 text-[#0d1f1e]\" : \"bg-[#234f48]\"}`}\n >\n {d} días\n \n ))}\n

\n setVista(\"cantidad\")}\n class={`flex-1 px-3 py-1.5 rounded-lg text-sm font-semibold ${vista === \"cantidad\" ? \"bg-[#356d63]\" : \"bg-[#1a3d38]\"}`}\n >\n Por piezas\n \n setVista(\"ingresos\")}\n class={`flex-1 px-3 py-1.5 rounded-lg text-sm font-semibold ${vista === \"ingresos\" ? \"bg-[#356d63]\" : \"bg-[#1a3d38]\"}`}\n >\n Por ingresos\n \n

\n\n {cargando &&

Cargando...

}\n {error &&

{error}

}\n\n {!cargando && !error && lista.length === 0 && (\n

No hay ventas registradas en este periodo.

\n )}\n\n {!cargando && lista.length > 0 && (\n

\n {lista.map((p, i) => (\n

\n {i + 1}.\n {p.producto}\n

\n {vista === \"cantidad\" ? `${p.cantidadVendida} pz` : \"$\" + p.ingresos.toFixed(0)}\n

\n {vista === \"cantidad\" ? \"$\" + p.ingresos.toFixed(0) : `${p.cantidadVendida} pz`}\n

\n ))}\n

\n )}\n\n \n

\n );\n}\n\nfunction ModalInsumos({ onCerrar }: { onCerrar: () => void }) {\n const [insumos, setInsumos] = useState<{ insumo: string; unidad: string; actual: number }[]>([]);\n const [cargando, setCargando] = useState(true);\n const [insumoElegido, setInsumoElegido] = useState(\"\");\n const [cantidad, setCantidad] = useState(\"\");\n const [guardando, setGuardando] = useState(false);\n const [mensaje, setMensaje] = useState(null);\n const [error, setError] = useState(null);\n\n useEffect(() => {\n (async () => {\n try {\n const r = await api(\"/api/insumos/lista\");\n const lista = r.insumos as { insumo: string; unidad: string; actual: number }[];\n setInsumos(lista);\n if (lista.length > 0) setInsumoElegido(lista[0].insumo);\n } catch (e: any) {\n setError(e.message);\n } finally {\n setCargando(false);\n }\n })();\n }, []);\n\n async function registrar() {\n const n = parseFloat(cantidad);\n if (!insumoElegido) return setError(\"Elige un insumo\");\n if (isNaN(n) || n <= 0) return setError(\"Escribe una cantidad válida\");\n setError(null);\n setMensaje(null);\n setGuardando(true);\n try {\n const r = await api(\"/api/insumos/compra\", { method: \"POST\", body: JSON.stringify({ insumo: insumoElegido, cantidad: n }) });\n setMensaje(`Listo — ${insumoElegido} ahora tiene ${r.nuevoActual} disponibles.`);\n setCantidad(\"\");\n setInsumos((prev) => prev.map((i) => (i.insumo === insumoElegido ? { ...i, actual: r.nuevoActual } : i)));\n } catch (e: any) {\n setError(e.message);\n } finally {\n setGuardando(false);\n }\n }\n\n const actual = insumos.find((i) => i.insumo === insumoElegido);\n\n return (\n

📦 Registrar compra de insumo

Suma lo que acabas de comprar al stock actual.

\n\n {cargando &&

Cargando insumos...

}\n\n {!cargando && (\n <>\n setInsumoElegido(e.target.value)}\n class=\"w-full bg-[#1a3d38] border border-[#356d63] rounded-lg px-3 py-2 outline-none mb-2\"\n >\n {insumos.map((i) => )}\n \n {actual &&

Actualmente hay {actual.actual} {actual.unidad}.

}\n\n setCantidad(e.target.value)}\n class=\"w-full bg-[#1a3d38] border border-[#356d63] rounded-lg px-3 py-2 outline-none placeholder-[#7fa99e] mb-4\"\n />\n \n )}\n\n {mensaje &&

{mensaje}

}\n {error &&

{error}

}\n\n

\n \n \n {guardando ? \"Guardando...\" : \"Registrar\"}\n \n

\n );\n}\n\n// Checador: cada empleado toca su propio nombre para marcar su entrada o salida (nada de\n// escribir ni elegir de un menú) — pensado para un celular/tablet compartido en el mostrador.\n// El botón de cada quien cambia solo según su estado actual (fuera -> \"Marcar entrada\",\n// dentro -> \"Marcar salida\"), y la lista se refresca sola después de marcar.\ntype EstadoEmpleado = { empleado: string; estado: \"dentro\" | \"fuera\"; horaEntrada: string | null; horaSalida: string | null };\n\nfunction ModalChecador({ onCerrar }: { onCerrar: () => void }) {\n const [estado, setEstado] = useState([]);\n const [cargando, setCargando] = useState(true);\n const [marcando, setMarcando] = useState(null);\n const [error, setError] = useState(null);\n\n async function cargar() {\n try {\n const r = await api(\"/api/asistencia/estado\");\n setEstado(r.estado);\n } catch (e: any) {\n setError(e.message);\n } finally {\n setCargando(false);\n }\n }\n\n useEffect(() => {\n cargar();\n }, []);\n\n async function marcar(empleado: string, accion: \"entrada\" | \"salida\") {\n setError(null);\n setMarcando(empleado);\n try {\n const r = await api(`/api/asistencia/${accion}`, { method: \"POST\", body: JSON.stringify({ empleado }) });\n setEstado(r.estado);\n } catch (e: any) {\n setError(e.message);\n } finally {\n setMarcando(null);\n }\n }\n\n return (\n

🕒 Checador

Toca tu nombre para marcar tu entrada o salida.

\n\n {cargando &&

Cargando...

}\n\n {!cargando && (\n

\n {estado.map((e) => (\n \n

\n \n

{e.empleado}

\n {e.estado === \"dentro\"\n ? `Entró a las ${e.horaEntrada}`\n : e.horaSalida\n ? `Salió a las ${e.horaSalida}`\n : \"Sin registrar hoy\"}\n

\n marcar(e.empleado, e.estado === \"dentro\" ? \"salida\" : \"entrada\")}\n disabled={marcando === e.empleado}\n class={`shrink-0 whitespace-nowrap disabled:opacity-40 text-[#f2ead6] font-semibold px-3 py-1.5 rounded-lg text-sm transition active:scale-95 ${\n e.estado === \"dentro\" ? \"bg-red-600 hover:bg-red-500\" : \"bg-green-600 hover:bg-green-500\"\n }`}\n >\n {marcando === e.empleado ? \"...\" : e.estado === \"dentro\" ? \"Marcar salida\" : \"Marcar entrada\"}\n \n

\n ))}\n

\n )}\n\n {error &&

{error}

}\n\n \n

\n \n );\n}\n\n// Conexión de la impresora térmica Bluetooth (ESC/POS directo, ver frontend/lib/impresora.ts).\n// Una vez conectada, todos los botones de imprimir de la app (comanda, ticket, reimpresiones,\n// corte) la usan automáticamente en vez de abrir la ventana de impresión del navegador.\nfunction ModalImpresora(\n { impresora, onCerrar, onCambio }: {\n impresora: { conectada: boolean; nombre: string | null };\n onCerrar: () => void;\n onCambio: () => void;\n },\n) {\n const [conectando, setConectando] = useState(false);\n const [error, setError] = useState(null);\n\n async function conectar() {\n setError(null);\n setConectando(true);\n try {\n await conectarImpresora();\n onCambio();\n } catch (e: any) {\n setError(e.message);\n } finally {\n setConectando(false);\n }\n }\n\n function desconectar() {\n desconectarImpresora();\n onCambio();\n }\n\n return (\n

🖨️ Impresora Bluetooth

\n\n

\n \n \n {impresora.conectada ? `Conectada: ${impresora.nombre || \"impresora\"}` : \"No conectada\"}\n \n

\n\n {!impresora.conectada && (\n

\n Enciende la impresora y activa su Bluetooth, luego dale \"Conectar\" y elígela de la lista. Solo se\n hace una vez — la próxima vez que abras la app se reconecta sola. (Funciona en Chrome, Android y\n computadora. No funciona en iPhone/Safari — ahí hay que usarla por USB.)\n

\n )}\n\n {error &&

{error}

}\n\n {!bluetoothDisponible() && (\n

\n Este navegador no soporta Bluetooth. Ábrela en Chrome (Android o computadora).\n

\n )}\n\n

\n \n {impresora.conectada\n ? (\n \n )\n : (\n \n {conectando ? \"Buscando...\" : \"Conectar\"}\n \n )}\n

\n );\n}\n\nfunction ModalEnvio(\n { envioActual, onCerrar, onConfirmar }: {\n envioActual: number | null;\n onCerrar: () => void;\n onConfirmar: (monto: number) => void;\n },\n) {\n const [personalizado, setPersonalizado] = useState(\"\");\n\n return (\n

🚚 Costo de envío

Este pedido es a domicilio. Elige el costo de envío antes de cobrar.

\n\n

\n {OPCIONES_ENVIO.map((monto) => (\n onConfirmar(monto)}\n class={`py-3 rounded-lg font-bold transition ${\n envioActual === monto ? \"bg-amber-500 text-[#0d1f1e]\" : \"bg-[#234f48] hover:bg-[#2c5f56]\"\n }`}\n >\n ${monto}\n \n ))}\n

\n\n

Otra cantidad (distancia larga)

\n setPersonalizado(e.target.value)}\n class=\"flex-1 bg-[#1a3d38] border border-[#356d63] rounded-lg px-3 py-2 outline-none placeholder-[#7fa99e]\"\n />\n {\n const monto = parseFloat(personalizado);\n if (isNaN(monto) || monto < 0) return alert(\"Escribe un monto válido\");\n onConfirmar(monto);\n }}\n class=\"bg-green-600 hover:bg-green-500 px-4 rounded-lg font-semibold\"\n >\n Usar\n \n

\n\n \n

\n );\n}\n\n// Historial de pedidos ya cobrados, con buscador y opción de reimprimir el ticket de cualquiera\n// (por ID o nombre) — más un botón directo para reimprimir el último, por si se atoró el papel.\nfunction ModalHistorial({ onCerrar }: { onCerrar: () => void }) {\n const [busqueda, setBusqueda] = useState(\"\");\n const [lista, setLista] = useState([]);\n const [cargando, setCargando] = useState(true);\n const [error, setError] = useState(null);\n\n useEffect(() => {\n (async () => {\n try {\n const r = await api(\"/api/pedidos/historial?limit=100\");\n setLista(r.pedidos);\n } catch (e: any) {\n setError(e.message);\n } finally {\n setCargando(false);\n }\n })();\n }, []);\n\n async function reimprimir(idPedido: string) {\n try {\n const r = await api(`/api/pedidos/${idPedido}/ticket`);\n imprimir(r.cuenta, `Ticket #${idPedido}`, { logo: true });\n } catch (e: any) {\n alert(e.message);\n }\n }\n\n async function reimprimirUltimo() {\n try {\n const r = await api(\"/api/pedidos/ultimo/ticket\");\n imprimir(r.cuenta, `Ticket #${r.idPedido}`, { logo: true });\n } catch (e: any) {\n alert(e.message);\n }\n }\n\n const q = busqueda.trim().toLowerCase();\n const filtrada = q ? lista.filter((p) => p.idPedido.toLowerCase().includes(q) || String(p.cliente || \"\").toLowerCase().includes(q)) : lista;\n\n return (\n

🧾 Historial de tickets

\n\n \n\n setBusqueda(e.target.value)}\n class=\"w-full bg-[#1a3d38] border border-[#356d63] rounded-lg px-3 py-2 outline-none placeholder-[#7fa99e] mb-3\"\n />\n\n

\n {cargando &&

Cargando...

}\n {error &&

{error}

}\n {!cargando && !error && filtrada.length === 0 &&

Sin resultados.

}\n {filtrada.map((p) => (\n

\n \n {p.canal}{p.cliente ? \" — \" + p.cliente : \"\"}\n

{p.fecha} {p.hora} · ${p.total.toFixed(2)}

\n \n

\n ))}\n

\n\n \n

\n );\n}\n\n// Corte de caja: suma todo lo cobrado hoy, desglosado por tipo de pedido, para que no haya que\n// sumar nada a mano al cerrar caja. Se abre solo tras confirmar (ver abrirCorte en App()).\n// Fondo de caja: el efectivo con el que se arranca el día (o que ya hay físicamente en la\n// caja). Se le pregunta al usuario solo (ver el useEffect en App()) si todavía no se ha\n// capturado hoy, y también se puede abrir/editar en cualquier momento con el botón del header.\nfunction ModalFondoCaja(\n { valorActual, onCerrar, onGuardado }: { valorActual: number | null; onCerrar: () => void; onGuardado: (monto: number) => void },\n) {\n const [monto, setMonto] = useState(valorActual != null ? String(valorActual) : \"\");\n const [guardando, setGuardando] = useState(false);\n const [error, setError] = useState(null);\n\n async function guardar() {\n const n = Number(monto);\n if (!isFinite(n) || n < 0) {\n setError(\"Escribe un monto válido.\");\n return;\n }\n setGuardando(true);\n setError(null);\n try {\n await api(\"/api/caja/fondo\", { method: \"POST\", body: JSON.stringify({ monto: n }) });\n onGuardado(n);\n } catch (e: any) {\n setError(e.message);\n } finally {\n setGuardando(false);\n }\n }\n\n return (\n

💰 Fondo de caja de hoy

\n ¿Con cuánto efectivo se arrancó la caja hoy? Con esto, el corte de caja te va a poder decir cuánto efectivo debería haber al cerrar.\n

\n setMonto(e.target.value)}\n placeholder=\"0.00\"\n class=\"w-full bg-[#1a3d38] border border-[#356d63] rounded-lg px-3 py-2 mb-3 text-lg\"\n />\n {error &&

{error}

}\n

\n \n \n {guardando ? \"Guardando...\" : \"Guardar\"}\n \n

\n );\n}\n\nfunction ModalCorte({ data, onCerrar }: { data: { resumen: any; texto: string }; onCerrar: () => void }) {\n const r = data.resumen;\n return (\n

📊 Corte de caja

{r.fecha} · {r.numPedidos} pedidos cobrados

\n\n

\n {r.porCanal.length === 0 &&

Todavía no hay pedidos cobrados hoy.

}\n {r.porCanal.map((c: any) => (\n

\n {c.canal} ({c.numPedidos})\n ${c.total.toFixed(2)}\n

\n ))}\n

\n\n {r.totalEnvios > 0 && (\n

Incluye ${r.totalEnvios.toFixed(2)} de envíos a domicilio.

\n )}\n\n {r.porMetodoPago && r.porMetodoPago.length > 0 && (\n

Por método de pago

\n {r.porMetodoPago.map((m: any) => (\n

\n {m.metodo} ({m.numPedidos})\n ${m.total.toFixed(2)}\n

\n ))}\n

\n )}\n\n

\n Total en caja\n ${r.totalVentas.toFixed(2)}\n

\n\n {r.fondoInicial != null ? (\n

\n Fondo inicial\n ${r.fondoInicial.toFixed(2)}\n

\n Efectivo esperado en caja\n ${r.efectivoEnCaja.toFixed(2)}\n

\n ) : (\n

\n No has capturado el fondo de caja de hoy — usa \"💰 Fondo de caja\" en el menú de arriba para poder ver cuánto efectivo debería haber.\n

\n )}\n\n

\n \n

\n\n \n

\n );\n}\n","deleted",false,"label",[47,48,24],"frontend","components","8f3a6802-82b2-4247-8cf7-f627cfe596c3",["D",1788198568874],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Sistema de pedidos por botones + inventario para Suchi House","imageUrl","userId","fb83bb5a-9aee-4548-804a-06dc8e5f8bba","pinnedFileId","01a058f0-c40d-736f-b689-e16a000d9213","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","01a058ef-c604-7433-a919-134dbc7b0e08","tursoName","8f3a680282b242478cf7f627cfe596c3","tursoHostname","8f3a680282b242478cf7f627cfe596c3-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789501878689],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_9":10,"_110":106},"org",{"_9":10,"_103":104,"_105":106,"_59":60,"_107":108,"_109":44},"branch",{"_37":93,"_11":94,"_22":30,"_95":49,"_96":-5,"_97":-5,"_98":-5,"_99":-5,"_100":-5,"_101":12,"_102":10},"isOwned",469,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","Gonzalez Garcia Noel","avatar","https://lh3.googleusercontent.com/a/ACg8ocIrFrculUXpRQjUt_dP3J-Hz7IQ4pouMXM2lew629FNmup_Ecm8=s96-c","tier","free","canRestrictVals","profileImageUrl","ctx",{"_86":-5,"_144":145,"_146":147,"_148":149,"_150":44,"_151":44,"_152":44,"_153":34,"_154":-5,"_155":-7,"_156":-7,"_157":67,"_158":44,"_159":44,"_160":-5,"_161":44,"_162":44,"_163":44,"_164":-5},"ENV",{"_115":116,"_117":118,"_119":94,"_120":121,"_122":123,"_124":125,"_126":127,"_128":129,"_130":131,"_132":133,"_134":135,"_136":137,"_138":139,"_140":141,"_142":143},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","5015b8df46402d8bba4f485ecc37aec202b0e06b","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town","orgs",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]