El sistema de D'Todito ya está funcionando en internet: los clientes pueden pedir, y cocina, meseros, domiciliarios, caja y administración tienen su propia pantalla. Falta cargar los datos reales del local y dos funciones menores.
Esta bitácora lista lo construido cosa por cosa, en el orden en que se fue haciendo.
- 22 al 26 octBoceto de diseño, observaciones y preferencias del sistema.
- Martes 27Empieza el trabajo en el código y las funcionalidades.
- Jueves 29El sistema está en línea y la página de presentación es la principal.
Jueves 22 a lunes 26
Boceto de diseño
En estos días se diseñó cómo se verá y se sentirá el sistema, antes de escribir código. Se conversaron las observaciones y preferencias del sistema, que guían lo que se construyó después.
- Boceto de la pantalla del cliente (sitio y menú digital para pedir desde el celular).
- Boceto de las pantallas de piso: cocina, mesero y domiciliario.
- Boceto de la pantalla de caja.
- Boceto del panel del administrador (resumen en vivo y gestión del menú).
- Sistema de diseño: colores de la marca (rojo, amarillo y crema), tipografías (Londrina Solid para títulos y Montserrat para textos), botones, tarjetas y íconos.
- Un color y un ícono para cada tipo de pedido: mesa (azul), domicilio (morado) y para llevar (verde azulado).
- Guía de animaciones: cómo se mueven botones, ventanas, avisos y pedidos nuevos.
- Propuesta visual: presentación de 19 diapositivas que reúne todo el diseño para mostrarlo.
Desde el martes 27
Base técnica y base de datos
A partir del martes se empezó a construir. Lo primero fue la base sobre la que se apoya todo lo demás.
- Revisión del paquete de diseño completo y de sus reglas: se sigue al pie de la letra.
- Revisión del sistema de referencia (otro restaurante) del que se toman las funciones: 54 tablas de datos y 133 funciones, para replicar lo que hace, no cómo se ve.
- Limpieza de ese material para que no quede rastro de la marca del sistema de referencia.
- Elección de la tecnología: React y Vite para las pantallas, Supabase para los datos y Cloudflare Pages para publicar.
- Creación del proyecto base de la aplicación, en una carpeta propia y ordenada.
- Colores, tipografías, sombras y animaciones del diseño convertidos en un solo lugar de consulta, para que todas las pantallas se vean iguales.
- Logo de D'Todito en la aplicación, íconos para instalarla en el celular como una app y nombre en la pestaña del navegador.
- Base de datos nueva y propia en Supabase llamada "DE TODITO", conectada al proyecto.
- Carga de las 54 tablas de datos: pedidos, platos, categorías, mesas, clientes, caja, personal, reservas, inventario y más.
- Seguridad por roles: cada persona ve y hace solo lo que le corresponde (administrador, caja, cocina u horno, mesero, domiciliario y cliente sin cuenta). Son 107 reglas de acceso.
- Tres almacenes de archivos, entre ellos uno para los comprobantes de pago que suben los clientes.
- Actualización en tiempo real: cuando entra o cambia un pedido, las pantallas se refrescan solas (21 tablas conectadas).
- Variantes de los platos (por ejemplo tamaño Sencilla o Doble, y combo Solo, Con papas o Papas + gaseosa), con el recargo de cada opción.
- Cálculo del precio en el servidor: aunque alguien intente cambiarlo desde el celular, el precio final lo fija la base de datos.
- Función para que el personal cree pedidos desde sus pantallas.
- Función para que el domiciliario marque que salió con el pedido.
- Función para consultar los datos extra de un pedido en el seguimiento del cliente.
- Corrección de un error de permisos: un cliente sin cuenta no podía crear pedidos a domicilio. Ya puede.
- Cuenta de administrador creada y enlazada con su rol.
- Cuentas de prueba de cocina, mesero, caja y domiciliario enlazadas con sus roles.
- Carta de ejemplo cargada: 6 categorías (Hamburguesas, Perros, Pizzas, Salchipapas, Bebidas y Adicionales), 13 platos con sus variantes y precios.
- Mesas 1 a 8 creadas, más una mesa interna llamada "Personal".
- Ajustes iniciales cargados (domicilios, caja y pagos).
Pedir desde el celular, sin cuenta
Sitio del cliente
Lo que ve y usa quien pide desde el celular, sin crear cuenta.
- Pantalla de bienvenida con la marca al abrir el sitio.
- Inicio con el logo, la dirección y un aviso de "Abierto" o "Cerrado" según el horario.
- Botones de inicio: Ver menú, Reservar y Eventos.
- Promo del día en el inicio, con foto, precio y botón "Lo quiero".
- Accesos rápidos a WhatsApp, Llamar, Instagram y Cómo llegar.
- Horario de atención visible en el inicio.
- Menú por categorías, con una barra para saltar de una a otra.
- Buscador de platos.
- Tarjetas de plato con nombre, descripción y precio "desde".
- Platos agotados se ven apagados y no se pueden pedir.
- Hoja para elegir opciones del plato (tamaño, combo) con el total actualizado al instante.
- Carrito con cantidades que se suman o se quitan.
- Sugerencias "Complementa tu pedido" dentro del carrito (bebidas, papas).
- Elección entre Domicilio y Para llevar.
- Datos del cliente: nombre, celular y dirección.
- Mapa para marcar la puerta exacta con un pin.
- Tarifa del domicilio calculada por la distancia desde el local, antes de enviar.
- Pago por transferencia, con foto del comprobante obligatoria para poder enviar.
- Pago contraentrega (pagar al recibir o al recoger).
- Casilla opcional "Recordar mis datos en este celular", con enlace a cómo se usan.
- Pedir desde la mesa escaneando el código QR de esa mesa.
- Seguimiento del pedido paso a paso (Recibido, Preparando, Listo, Entregado), que se actualiza solo.
- Pestaña "Mi pedido" con un punto de aviso cuando hay un pedido en curso.
- El carrito se conserva si el cliente cambia de página.
- Reservar mesa: elige día, hora y número de personas, y deja nombre y celular.
- Para grupos de 8 personas o más, la reserva pide un depósito de $ 50.000 con comprobante.
- Cotizar un evento: tipo (cumpleaños, empresarial, grado u otro), fecha, invitados y mensaje.
- Política de datos personales, con botón para pedir ver o borrar los propios datos.
- Aviso de consentimiento al hacer un pedido, guardado como constancia.
Las pantallas del piso
Cocina, mesero y domiciliario
Las pantallas de quienes trabajan en el piso.
Cocina, horno y bebidas 10
- Tablero de tickets de pedidos, uno por pedido, con el tipo (mesa, domicilio, para llevar) siempre visible.
- Etiqueta NUEVO en los pedidos que acaban de entrar.
- Sonido de aviso cuando llega un pedido nuevo.
- Cronómetro por pedido, con colores y palabras que suben de intensidad cuanto más espera.
- Marcar cada plato como listo con un toque.
- Cuando todos los platos de un pedido están listos, el pedido avanza solo.
- Las bebidas no retrasan el pedido: no frenan la salida de la comida.
- Aviso cuando caja anula un plato o un pedido.
- Banda de aviso cuando se pierde la conexión a internet.
- Los toques hechos sin conexión se guardan y se envían solos al volver el internet.
Mesero 5
- Vista de mesas con los pedidos de cada una.
- Crear una comanda nueva eligiendo platos y opciones.
- Pedidos por rondas: cada ronda de una mesa sale como un pedido aparte.
- Aviso de platos listos para recoger y llevar a la mesa.
- Marcar el pedido como entregado en la mesa.
Domiciliario 8
- Lista de sus domicilios con la dirección, el cliente y un mapa en cada tarjeta.
- Solo ve los domicilios que caja le asignó.
- Botón "Salí" para avisar que ya salió con el pedido.
- Llamar al cliente con un toque.
- Muestra cuánto cobrar al entregar, o "Ya pagó" si el pedido estaba pagado.
- Hoja de cobro en la puerta: efectivo, tarjeta o transferencia, con el cálculo de las vueltas.
- Marcar "No entregado" eligiendo el motivo, que le llega a caja.
- Contador de efectivo en mano y botón para entregar el dinero a caja al terminar la ruta.
Asistencia del personal 2
- Marcar entrada y salida del turno desde la pantalla del personal.
- Un domiciliario solo puede recibir pedidos si tiene el turno abierto.
Cobrar y coordinar
Caja
La pantalla de quien cobra y coordina los pedidos.
Pedidos 10
- Tablero en tres columnas que separa los pedidos por tipo: mesa, domicilio y para llevar.
- Los pedidos hechos por clientes en la web llegan marcados como NUEVO hasta que caja los confirma.
- Confirmar un pedido de la web para enviarlo a cocina.
- Verificar o rechazar el comprobante de una transferencia.
- Asignar un domiciliario a cada domicilio, mostrando quién está en turno.
- Cancelar un pedido eligiendo el motivo; las estaciones reciben el aviso y queda registrado quién lo hizo.
- Cerrar un pedido sin cobrar, también con motivo.
- Devolver un pedido a cocina cuando hace falta.
- Cambiar un pedido de mesa.
- Crear un pedido nuevo directamente en caja (mostrador o teléfono).
Cobro 10
- Cobro en efectivo, tarjeta o transferencia, o combinando varios medios.
- Billetes sugeridos y cálculo automático de las vueltas.
- Propina, con opción de modo y monto.
- Descuento con motivo.
- Campo de repique en el cobro, para registrarlo cuando aplica.
- Recibo térmico imprimible de 72 mm.
- Dividir la cuenta de una mesa en partes iguales.
- Dividir la cuenta por valores a elección.
- Dividir la cuenta por productos, cada persona paga lo suyo.
- Pagar cada parte por separado, o descartar la división.
Dinero del día 6
- Rendiciones: caja recibe y confirma el efectivo que entrega cada domiciliario.
- Apertura de caja con la base del día.
- Cierre de caja en tres pasos (contar, confirmar, diferencias), con lo contado por cada medio de pago.
- Resultado del cierre por medio de pago: "Cuadra exacto", "Sobró" o "Faltó".
- Registro de egresos del día, que no se pueden borrar.
- Asistencia del personal desde caja: marcar entrada y salida de cada persona.
Trece secciones
Panel del administrador
Trece secciones en el menú lateral. Resumen y Menú siguen el diseño recibido; las demás se armaron con los mismos colores y componentes, como propuesta para revisar.
Resumen 5
- Indicadores del día en vivo: ventas y pedidos por tipo.
- Tabla de domicilios activos con el domiciliario de cada uno.
- Lista de platos agotados con botón para volver a activarlos.
- Insumos por debajo del mínimo, con barra de stock.
- Estado de la caja, rendiciones pendientes y devoluciones pendientes.
Menú 7
- Lista de platos por categoría con foto, precio, estación (cocina, horno o bebidas), disponible y visible.
- Crear y editar categorías y platos.
- Editor de variantes: grupos de opciones con su recargo (tamaño, combo).
- Marcar un plato como agotado u ocultarlo, con efecto inmediato en la web y en caja.
- Promo por día de la semana: elegir plato y precio especial para cada día.
- Foto del plato.
- Carta imprimible o para guardar en PDF.
Mesas y QR 3
- Una tarjeta por mesa con su código QR único.
- Activar o desactivar mesas.
- Imprimir todos los QR.
Domicilios y zonas 5
- Activar el cálculo de tarifa por distancia.
- Ubicación del local (latitud y longitud, o "usar mi ubicación actual").
- Distancia máxima de atención.
- Tarifa base cuando no hay ubicación.
- Zonas de tarifa por kilómetros, agregar y quitar.
Personal y asistencia 3
- Lista del equipo con nombre, rol y cédula.
- Agregar personas y marcarlas como activas o inactivas.
- Asistencia de hoy: quién está trabajando y marcar entrada o salida.
Pedidos 2
- Historial de pedidos por día, con filtros (todos, abiertos, entregados, cancelados) y búsqueda por número, cliente, celular o mesa.
- Detalle de cada pedido: platos, descuento, domicilio, propina, pagos y movimientos paso a paso.
Caja y cierres 6
- Cierres de días anteriores con lo contado por medio de pago.
- Esperado frente a contado, con la diferencia de cada medio.
- Egresos del día y registro de cada cambio al cierre.
- Corregir un cierre, con motivo obligatorio.
- Reabrir un cierre para que caja lo vuelva a hacer, con motivo obligatorio.
- Decidir si caja puede ver lo esperado al cerrar o cuenta a ciegas.
Inventario 3
- Insumos con unidad, cantidad y mínimo, y barra que se pone roja al bajar del mínimo.
- Movimientos de entrada, salida y ajuste, con nota.
- Historial de los últimos movimientos.
Clientes y puntos 3
- Lista de clientes con celular, pedidos, visitas y fecha del último.
- Combo gratis cada 5 visitas, con botón para entregarlo.
- Notas internas por cliente (por ejemplo, alergias).
Reportes 4
- Ventas, pedidos facturados y ticket promedio en 7, 30 o 90 días.
- Gráfica de ventas por día.
- Platos más vendidos.
- Ventas por tipo de pedido y por medio de pago.
Marketing 2
- Calendario de publicaciones: qué se publica, en qué canal y qué día.
- Marcar cada publicación como publicada.
Reservas y eventos 2
- Reservas de mesa próximas y pasadas: confirmar, cancelar y asignar mesa.
- Solicitudes de evento con estado (nueva, contactado, cerrada) y enlace a WhatsApp.
Contenido del inicio 2
- Dirección, celular, Instagram y horario del local, editables sin tocar código.
- Esos datos se actualizan solos en el inicio, el carrito, la carta impresa y las horas de reserva.
Probar de punta a punta
Pruebas y correcciones
Además de construir, se probó el sistema de punta a punta y se corrigió lo que falló.
- Prueba del recorrido completo de un pedido en la base de datos: cliente, confirmación en caja, cocina, mesero o domiciliario, cobro, rendición y cierre. Se hizo sin dejar datos de prueba.
- Prueba del domicilio no entregado, del cambio de mesa y de la cancelación de pedidos.
- Prueba de dividir la cuenta en sus tres modos.
- Prueba de la asistencia del personal y de las tarifas de domicilio por distancia.
- Modo de demostración interno para recorrer todas las pantallas del personal con datos de ejemplo, sin tocar el sistema real.
- Recorrido de las pantallas de cocina, mesero, caja y administración en ese modo, sin errores.
- Pedido real de prueba hecho como cliente desde el sitio (La Todito Doble con papas, para llevar, contraentrega).
- Verificación de que la base guardó el precio correcto ($ 35.400), las opciones elegidas y el seguimiento del pedido.
- Los datos de esa prueba se borraron después.
- Corrección: la cocina marcaba todos los pedidos como NUEVO y sonaba al abrir la pantalla.
- Corrección: la pantalla del domiciliario se ponía en blanco si llegaba un pedido con un estado inesperado.
- Corrección: en el Menú del administrador las columnas se aplastaban y el nombre del plato quedaba ilegible.
- Corrección: el seguimiento decía "Llega en ~~20 min" con doble símbolo.
- Corrección: el aviso emergente se asomaba un poco en la parte de abajo de la pantalla.
- Corrección de contraste: en el acceso del personal el texto de los campos se perdía sobre el fondo oscuro.
- Corrección: "Contenido del inicio" se quedaba cargando si todavía no había datos guardados.
- Revisión de seguridad de la base de datos: lo que queda como aviso es intencional (funciones que el cliente sin cuenta necesita para pedir).
Ya en línea
Publicación en internet y página de presentación
El sistema ya está en línea en dtodito-food.pages.dev.
- Publicación del sistema en Cloudflare Pages.
- Configuración para que cualquier dirección interna (por ejemplo la de caja o la de cada mesa) abra bien al recargar la página.
- Cabeceras de seguridad y reglas para que el sitio cargue rápido.
- Verificación del sitio publicado: el menú carga desde la base real y no hay errores.
- Página de presentación con diseño propio de la marca.
- Banner principal con el titular "DE TODITO." en amarillo grande, sin logo.
- Cinta amarilla que desplaza las categorías de la carta.
- Sección "Más de 10 años" con el número 10+ grande.
- Sección "La carta": una tarjeta de color por categoría, con la cantidad de platos.
- "Para abrir el apetito": un plato por categoría con su precio, tomado en vivo de la carta.
- "Cómo pedir": tres tarjetas, a domicilio, para llevar y en tu mesa con QR.
- Franja de celebraciones con botones para reservar mesa y cotizar un evento.
- "Visítanos": dirección, WhatsApp, llamar, Instagram, cómo llegar y horario.
- Pie de página con el logo y la política de datos.
- Vista previa al compartir el enlace, con el nombre y el logo de D'Todito.
- Dirección elegida: dtodito-food.pages.dev, porque dtodito.pages.dev ya pertenece a otro sitio y no estaba disponible.
- Eliminación del sitio de publicación anterior, para dejar una sola dirección.
- La página de presentación pasó a ser la página principal (dtodito-food.pages.dev); la app de pedidos quedó en /inicio, y los códigos QR de las mesas siguen funcionando igual.
Próximos pasos
Lo que falta por hacer
Cosas por hacer o cargar con los datos reales del negocio.
- Cargar la dirección, el celular, Instagram y el horario reales (panel del administrador, "Contenido del inicio"). Hoy se muestran datos de ejemplo.
- Configurar la llave y el titular para pagos por transferencia.
- Reemplazar la carta de ejemplo por la carta real, con precios y variantes.
- Subir las fotos reales de los platos.
- Datos del recibo impreso: dirección, NIT y teléfono del restaurante.
- Editar un pedido desde caja después de creado.
- Captura de rostro en la asistencia del personal (hoy se marca sin cámara).
- Crear las cuentas definitivas del personal y revisar los roles de cada uno.
- Activar la protección contra contraseñas filtradas en el sistema de acceso.
- Probar el sistema con el personal real en un día de operación.