D'Todito Fast Food

Sistema integral · Bitácora de avance

Todo lo construido, cosa por cosa

Registro del sistema de D'Todito Fast Food, desde el boceto de diseño hasta el sitio en línea. Actualizada el jueves 29 de octubre de 2026.

Ver el sitio en vivo
185cosas construidas desde el martes 27
6pantallas por rol: cliente, cocina, mesero, domiciliario, caja y administración
13secciones en el panel del administrador
54tablas de datos con seguridad por roles
10pasos por completar con los datos reales

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.

  1. 22 al 26 octBoceto de diseño, observaciones y preferencias del sistema.
  2. Martes 27Empieza el trabajo en el código y las funcionalidades.
  3. 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

8 entregables

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.

  1. Boceto de la pantalla del cliente (sitio y menú digital para pedir desde el celular).
  2. Boceto de las pantallas de piso: cocina, mesero y domiciliario.
  3. Boceto de la pantalla de caja.
  4. Boceto del panel del administrador (resumen en vivo y gestión del menú).
  5. 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.
  6. Un color y un ícono para cada tipo de pedido: mesa (azul), domicilio (morado) y para llevar (verde azulado).
  7. Guía de animaciones: cómo se mueven botones, ventanas, avisos y pedidos nuevos.
  8. 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

23 cosas

A partir del martes se empezó a construir. Lo primero fue la base sobre la que se apoya todo lo demás.

  1. Revisión del paquete de diseño completo y de sus reglas: se sigue al pie de la letra.
  2. 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.
  3. Limpieza de ese material para que no quede rastro de la marca del sistema de referencia.
  4. Elección de la tecnología: React y Vite para las pantallas, Supabase para los datos y Cloudflare Pages para publicar.
  5. Creación del proyecto base de la aplicación, en una carpeta propia y ordenada.
  6. Colores, tipografías, sombras y animaciones del diseño convertidos en un solo lugar de consulta, para que todas las pantallas se vean iguales.
  7. 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.
  8. Base de datos nueva y propia en Supabase llamada "DE TODITO", conectada al proyecto.
  9. Carga de las 54 tablas de datos: pedidos, platos, categorías, mesas, clientes, caja, personal, reservas, inventario y más.
  10. 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.
  11. Tres almacenes de archivos, entre ellos uno para los comprobantes de pago que suben los clientes.
  12. Actualización en tiempo real: cuando entra o cambia un pedido, las pantallas se refrescan solas (21 tablas conectadas).
  13. 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.
  14. Cálculo del precio en el servidor: aunque alguien intente cambiarlo desde el celular, el precio final lo fija la base de datos.
  15. Función para que el personal cree pedidos desde sus pantallas.
  16. Función para que el domiciliario marque que salió con el pedido.
  17. Función para consultar los datos extra de un pedido en el seguimiento del cliente.
  18. Corrección de un error de permisos: un cliente sin cuenta no podía crear pedidos a domicilio. Ya puede.
  19. Cuenta de administrador creada y enlazada con su rol.
  20. Cuentas de prueba de cocina, mesero, caja y domiciliario enlazadas con sus roles.
  21. Carta de ejemplo cargada: 6 categorías (Hamburguesas, Perros, Pizzas, Salchipapas, Bebidas y Adicionales), 13 platos con sus variantes y precios.
  22. Mesas 1 a 8 creadas, más una mesa interna llamada "Personal".
  23. Ajustes iniciales cargados (domicilios, caja y pagos).

Pedir desde el celular, sin cuenta

Sitio del cliente

29 cosas

Lo que ve y usa quien pide desde el celular, sin crear cuenta.

  1. Pantalla de bienvenida con la marca al abrir el sitio.
  2. Inicio con el logo, la dirección y un aviso de "Abierto" o "Cerrado" según el horario.
  3. Botones de inicio: Ver menú, Reservar y Eventos.
  4. Promo del día en el inicio, con foto, precio y botón "Lo quiero".
  5. Accesos rápidos a WhatsApp, Llamar, Instagram y Cómo llegar.
  6. Horario de atención visible en el inicio.
  7. Menú por categorías, con una barra para saltar de una a otra.
  8. Buscador de platos.
  9. Tarjetas de plato con nombre, descripción y precio "desde".
  10. Platos agotados se ven apagados y no se pueden pedir.
  11. Hoja para elegir opciones del plato (tamaño, combo) con el total actualizado al instante.
  12. Carrito con cantidades que se suman o se quitan.
  13. Sugerencias "Complementa tu pedido" dentro del carrito (bebidas, papas).
  14. Elección entre Domicilio y Para llevar.
  15. Datos del cliente: nombre, celular y dirección.
  16. Mapa para marcar la puerta exacta con un pin.
  17. Tarifa del domicilio calculada por la distancia desde el local, antes de enviar.
  18. Pago por transferencia, con foto del comprobante obligatoria para poder enviar.
  19. Pago contraentrega (pagar al recibir o al recoger).
  20. Casilla opcional "Recordar mis datos en este celular", con enlace a cómo se usan.
  21. Pedir desde la mesa escaneando el código QR de esa mesa.
  22. Seguimiento del pedido paso a paso (Recibido, Preparando, Listo, Entregado), que se actualiza solo.
  23. Pestaña "Mi pedido" con un punto de aviso cuando hay un pedido en curso.
  24. El carrito se conserva si el cliente cambia de página.
  25. Reservar mesa: elige día, hora y número de personas, y deja nombre y celular.
  26. Para grupos de 8 personas o más, la reserva pide un depósito de $ 50.000 con comprobante.
  27. Cotizar un evento: tipo (cumpleaños, empresarial, grado u otro), fecha, invitados y mensaje.
  28. Política de datos personales, con botón para pedir ver o borrar los propios datos.
  29. Aviso de consentimiento al hacer un pedido, guardado como constancia.

Las pantallas del piso

Cocina, mesero y domiciliario

25 cosas

Las pantallas de quienes trabajan en el piso.

Cocina, horno y bebidas 10

  1. Tablero de tickets de pedidos, uno por pedido, con el tipo (mesa, domicilio, para llevar) siempre visible.
  2. Etiqueta NUEVO en los pedidos que acaban de entrar.
  3. Sonido de aviso cuando llega un pedido nuevo.
  4. Cronómetro por pedido, con colores y palabras que suben de intensidad cuanto más espera.
  5. Marcar cada plato como listo con un toque.
  6. Cuando todos los platos de un pedido están listos, el pedido avanza solo.
  7. Las bebidas no retrasan el pedido: no frenan la salida de la comida.
  8. Aviso cuando caja anula un plato o un pedido.
  9. Banda de aviso cuando se pierde la conexión a internet.
  10. Los toques hechos sin conexión se guardan y se envían solos al volver el internet.

Mesero 5

  1. Vista de mesas con los pedidos de cada una.
  2. Crear una comanda nueva eligiendo platos y opciones.
  3. Pedidos por rondas: cada ronda de una mesa sale como un pedido aparte.
  4. Aviso de platos listos para recoger y llevar a la mesa.
  5. Marcar el pedido como entregado en la mesa.

Domiciliario 8

  1. Lista de sus domicilios con la dirección, el cliente y un mapa en cada tarjeta.
  2. Solo ve los domicilios que caja le asignó.
  3. Botón "Salí" para avisar que ya salió con el pedido.
  4. Llamar al cliente con un toque.
  5. Muestra cuánto cobrar al entregar, o "Ya pagó" si el pedido estaba pagado.
  6. Hoja de cobro en la puerta: efectivo, tarjeta o transferencia, con el cálculo de las vueltas.
  7. Marcar "No entregado" eligiendo el motivo, que le llega a caja.
  8. Contador de efectivo en mano y botón para entregar el dinero a caja al terminar la ruta.

Asistencia del personal 2

  1. Marcar entrada y salida del turno desde la pantalla del personal.
  2. Un domiciliario solo puede recibir pedidos si tiene el turno abierto.

Cobrar y coordinar

Caja

26 cosas

La pantalla de quien cobra y coordina los pedidos.

Pedidos 10

  1. Tablero en tres columnas que separa los pedidos por tipo: mesa, domicilio y para llevar.
  2. Los pedidos hechos por clientes en la web llegan marcados como NUEVO hasta que caja los confirma.
  3. Confirmar un pedido de la web para enviarlo a cocina.
  4. Verificar o rechazar el comprobante de una transferencia.
  5. Asignar un domiciliario a cada domicilio, mostrando quién está en turno.
  6. Cancelar un pedido eligiendo el motivo; las estaciones reciben el aviso y queda registrado quién lo hizo.
  7. Cerrar un pedido sin cobrar, también con motivo.
  8. Devolver un pedido a cocina cuando hace falta.
  9. Cambiar un pedido de mesa.
  10. Crear un pedido nuevo directamente en caja (mostrador o teléfono).

Cobro 10

  1. Cobro en efectivo, tarjeta o transferencia, o combinando varios medios.
  2. Billetes sugeridos y cálculo automático de las vueltas.
  3. Propina, con opción de modo y monto.
  4. Descuento con motivo.
  5. Campo de repique en el cobro, para registrarlo cuando aplica.
  6. Recibo térmico imprimible de 72 mm.
  7. Dividir la cuenta de una mesa en partes iguales.
  8. Dividir la cuenta por valores a elección.
  9. Dividir la cuenta por productos, cada persona paga lo suyo.
  10. Pagar cada parte por separado, o descartar la división.

Dinero del día 6

  1. Rendiciones: caja recibe y confirma el efectivo que entrega cada domiciliario.
  2. Apertura de caja con la base del día.
  3. Cierre de caja en tres pasos (contar, confirmar, diferencias), con lo contado por cada medio de pago.
  4. Resultado del cierre por medio de pago: "Cuadra exacto", "Sobró" o "Faltó".
  5. Registro de egresos del día, que no se pueden borrar.
  6. Asistencia del personal desde caja: marcar entrada y salida de cada persona.

Trece secciones

Panel del administrador

47 cosas

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

  1. Indicadores del día en vivo: ventas y pedidos por tipo.
  2. Tabla de domicilios activos con el domiciliario de cada uno.
  3. Lista de platos agotados con botón para volver a activarlos.
  4. Insumos por debajo del mínimo, con barra de stock.
  5. Estado de la caja, rendiciones pendientes y devoluciones pendientes.

Menú 7

  1. Lista de platos por categoría con foto, precio, estación (cocina, horno o bebidas), disponible y visible.
  2. Crear y editar categorías y platos.
  3. Editor de variantes: grupos de opciones con su recargo (tamaño, combo).
  4. Marcar un plato como agotado u ocultarlo, con efecto inmediato en la web y en caja.
  5. Promo por día de la semana: elegir plato y precio especial para cada día.
  6. Foto del plato.
  7. Carta imprimible o para guardar en PDF.

Mesas y QR 3

  1. Una tarjeta por mesa con su código QR único.
  2. Activar o desactivar mesas.
  3. Imprimir todos los QR.

Domicilios y zonas 5

  1. Activar el cálculo de tarifa por distancia.
  2. Ubicación del local (latitud y longitud, o "usar mi ubicación actual").
  3. Distancia máxima de atención.
  4. Tarifa base cuando no hay ubicación.
  5. Zonas de tarifa por kilómetros, agregar y quitar.

Personal y asistencia 3

  1. Lista del equipo con nombre, rol y cédula.
  2. Agregar personas y marcarlas como activas o inactivas.
  3. Asistencia de hoy: quién está trabajando y marcar entrada o salida.

Pedidos 2

  1. Historial de pedidos por día, con filtros (todos, abiertos, entregados, cancelados) y búsqueda por número, cliente, celular o mesa.
  2. Detalle de cada pedido: platos, descuento, domicilio, propina, pagos y movimientos paso a paso.

Caja y cierres 6

  1. Cierres de días anteriores con lo contado por medio de pago.
  2. Esperado frente a contado, con la diferencia de cada medio.
  3. Egresos del día y registro de cada cambio al cierre.
  4. Corregir un cierre, con motivo obligatorio.
  5. Reabrir un cierre para que caja lo vuelva a hacer, con motivo obligatorio.
  6. Decidir si caja puede ver lo esperado al cerrar o cuenta a ciegas.

Inventario 3

  1. Insumos con unidad, cantidad y mínimo, y barra que se pone roja al bajar del mínimo.
  2. Movimientos de entrada, salida y ajuste, con nota.
  3. Historial de los últimos movimientos.

Clientes y puntos 3

  1. Lista de clientes con celular, pedidos, visitas y fecha del último.
  2. Combo gratis cada 5 visitas, con botón para entregarlo.
  3. Notas internas por cliente (por ejemplo, alergias).

Reportes 4

  1. Ventas, pedidos facturados y ticket promedio en 7, 30 o 90 días.
  2. Gráfica de ventas por día.
  3. Platos más vendidos.
  4. Ventas por tipo de pedido y por medio de pago.

Marketing 2

  1. Calendario de publicaciones: qué se publica, en qué canal y qué día.
  2. Marcar cada publicación como publicada.

Reservas y eventos 2

  1. Reservas de mesa próximas y pasadas: confirmar, cancelar y asignar mesa.
  2. Solicitudes de evento con estado (nueva, contactado, cerrada) y enlace a WhatsApp.

Contenido del inicio 2

  1. Dirección, celular, Instagram y horario del local, editables sin tocar código.
  2. 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

17 cosas

Además de construir, se probó el sistema de punta a punta y se corrigió lo que falló.

  1. 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.
  2. Prueba del domicilio no entregado, del cambio de mesa y de la cancelación de pedidos.
  3. Prueba de dividir la cuenta en sus tres modos.
  4. Prueba de la asistencia del personal y de las tarifas de domicilio por distancia.
  5. Modo de demostración interno para recorrer todas las pantallas del personal con datos de ejemplo, sin tocar el sistema real.
  6. Recorrido de las pantallas de cocina, mesero, caja y administración en ese modo, sin errores.
  7. Pedido real de prueba hecho como cliente desde el sitio (La Todito Doble con papas, para llevar, contraentrega).
  8. Verificación de que la base guardó el precio correcto ($ 35.400), las opciones elegidas y el seguimiento del pedido.
  9. Los datos de esa prueba se borraron después.
  10. Corrección: la cocina marcaba todos los pedidos como NUEVO y sonaba al abrir la pantalla.
  11. Corrección: la pantalla del domiciliario se ponía en blanco si llegaba un pedido con un estado inesperado.
  12. Corrección: en el Menú del administrador las columnas se aplastaban y el nombre del plato quedaba ilegible.
  13. Corrección: el seguimiento decía "Llega en ~~20 min" con doble símbolo.
  14. Corrección: el aviso emergente se asomaba un poco en la parte de abajo de la pantalla.
  15. Corrección de contraste: en el acceso del personal el texto de los campos se perdía sobre el fondo oscuro.
  16. Corrección: "Contenido del inicio" se quedaba cargando si todavía no había datos guardados.
  17. 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

18 cosas

El sistema ya está en línea en dtodito-food.pages.dev.

  1. Publicación del sistema en Cloudflare Pages.
  2. 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.
  3. Cabeceras de seguridad y reglas para que el sitio cargue rápido.
  4. Verificación del sitio publicado: el menú carga desde la base real y no hay errores.
  5. Página de presentación con diseño propio de la marca.
  6. Banner principal con el titular "DE TODITO." en amarillo grande, sin logo.
  7. Cinta amarilla que desplaza las categorías de la carta.
  8. Sección "Más de 10 años" con el número 10+ grande.
  9. Sección "La carta": una tarjeta de color por categoría, con la cantidad de platos.
  10. "Para abrir el apetito": un plato por categoría con su precio, tomado en vivo de la carta.
  11. "Cómo pedir": tres tarjetas, a domicilio, para llevar y en tu mesa con QR.
  12. Franja de celebraciones con botones para reservar mesa y cotizar un evento.
  13. "Visítanos": dirección, WhatsApp, llamar, Instagram, cómo llegar y horario.
  14. Pie de página con el logo y la política de datos.
  15. Vista previa al compartir el enlace, con el nombre y el logo de D'Todito.
  16. Dirección elegida: dtodito-food.pages.dev, porque dtodito.pages.dev ya pertenece a otro sitio y no estaba disponible.
  17. Eliminación del sitio de publicación anterior, para dejar una sola dirección.
  18. 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

10 por hacer

Cosas por hacer o cargar con los datos reales del negocio.

  1. Cargar la dirección, el celular, Instagram y el horario reales (panel del administrador, "Contenido del inicio"). Hoy se muestran datos de ejemplo.
  2. Configurar la llave y el titular para pagos por transferencia.
  3. Reemplazar la carta de ejemplo por la carta real, con precios y variantes.
  4. Subir las fotos reales de los platos.
  5. Datos del recibo impreso: dirección, NIT y teléfono del restaurante.
  6. Editar un pedido desde caja después de creado.
  7. Captura de rostro en la asistencia del personal (hoy se marca sin cámara).
  8. Crear las cuentas definitivas del personal y revisar los roles de cada uno.
  9. Activar la protección contra contraseñas filtradas en el sistema de acceso.
  10. Probar el sistema con el personal real en un día de operación.