Interfaz de Usuario - OpenCodeISPC/Sistema-de-Gestion-de-Mesas GitHub Wiki
Link a Mockups de Figma
Link User Persona- SGMB
Link Customer Journey Map - SGMB
1- Estructura del Frontend (Sprint 1)
Wireframes de las principales pantallas del sistema, contemplando los breakpoints de Mobile, Tablet y Desktop.
Registro de Usuario Pantalla de creación de cuenta con selección de rol de acceso (Cocina, Barra, Mozo, Administrador).
Inicio de Sesión Pantalla de login con selección de rol y accesos a registro y recuperación de contraseña.
Detalle de Mesa Pantalla de gestión de pedidos por mesa: catálogo de productos, pedido actual, estado del pedido y acciones de confirmación/cierre.
2- Documentación de la Interfaz de Usuario (Sprint 2)
Documentación ampliada de la interfaz correspondiente a la Evidencia 4 (Sprint 2). El ítem 9- Estructura del Frontend más arriba corresponde a la versión inicial de wireframes del Sprint 1.
Stack tecnológico del Frontend
| Tecnología | Uso en el proyecto |
|---|---|
| Angular 20 | Framework principal (standalone components, Angular Router, Forms) |
| TypeScript | Lenguaje de desarrollo del frontend |
| Bootstrap 5.3.8 | Grid, formularios, utilidades base; convive con las clases propias sgmb-* |
| Bootstrap Icons | Iconografía de toda la interfaz |
| RxJS | Manejo de flujos asíncronos y estado reactivo |
| Angular Router | Ruteo entre pantallas (/, /registro, /recupero-password, /dashboard, /mesas, /pedidos, /comandas, /caja, /producto) |
Estructura por carpetas: features/ (auth, home/dashboard, mesas, mesas/pedidos, comandas, caja, producto), layouts/ (navbar, footer), guards/, interceptors/, services/, models/.
3- Guía de estilos (Design Kit)
Paleta de colores
Colores de marca:
| Token | Hex | Uso |
|---|---|---|
--sgmb-brown |
#8b6f47 |
Color primario: navbar, botones principales, títulos, foco |
--sgmb-brown-dark |
#765a38 |
Hover de elementos marrones |
--sgmb-brown-light |
#a98e72 |
Acentos sobre fondo claro |
--sgmb-bg |
#f7f1eb |
Fondo general de la app |
--sgmb-bg-sidebar |
#f1e3d0 |
Fondo del sidebar del dashboard |
--sgmb-white / --sgmb-black |
#ffffff / #161616 |
Blanco de tarjetas / negro de texto |
Colores de estado (feedback):
| Token | Hex | Uso |
|---|---|---|
--sgmb-green |
#39a447 |
Mesa disponible, pedido listo, confirmar/guardar |
--sgmb-green-dark |
#2f7d35 |
Hover de botones verdes |
--sgmb-orange |
#f28b18 |
Mesa reservada, pedido en preparación |
--sgmb-red |
#e52c2c |
Mesa ocupada, pedido pendiente, liberar/eliminar |
--sgmb-blue |
#1764bd |
Tarjeta "Barra" del dashboard |
Neutros / bordes:
| Token | Hex | Uso |
|---|---|---|
--sgmb-border |
#b79570 |
Bordes de paneles, tabs, inputs |
--sgmb-border-light |
#dfd2c4 |
Bordes suaves entre filas y tarjetas |
Tipografía
| Familia | Uso |
|---|---|
| Georgia / Times New Roman (serif) | Identidad: body base, formularios de autenticación, títulos de paneles y tabs |
| Arial / sans-serif | UI funcional: navbar, footer, tarjetas del dashboard, tablas, comandas, badges |
Escala de referencia
| Elemento | Tamaño | Peso |
|---|---|---|
| Título de bienvenida (Dashboard) | clamp(48px, 5vw, 82px) | 400 |
| H1 de página | 42px | Regular, color brown |
| Título de panel/card (h2) | 23–29px | Regular/bold |
| Subtítulo de sector/tab (h3) | 17–20px | Regular |
| Texto de cuerpo | 13–17px | Regular |
| Texto pequeño / metadatos | 10–14px | Regular, gris |
Espaciado y layout
- Ancho máximo de contenido: 1440–1500px (páginas), 1240px (cards dashboard), 1170px (comandas).
- Padding estándar de página:
68px 55px 45px(desktop) →35px 18px(mobile). - Gap entre tarjetas: 38–55px en grillas principales, 10–24px en grillas densas.
- Border-radius: 5–9px en tarjetas/botones; 24–25px en tabs y selectores tipo píldora.
- Sombra estándar (
--sgmb-shadow):0 1px 4px rgba(75, 51, 27, .16).
Botones
| Variante | Color | Uso |
|---|---|---|
| Primario (marca) | --sgmb-brown / hover --sgmb-brown-dark |
Iniciar sesión, agregar producto, editar |
| Confirmar / Guardar | --sgmb-green / hover --sgmb-green-dark |
Confirmar pedido, confirmar cobro, guardar producto |
| Cancelar / Liberar / Eliminar | Rojo (#e52c2c / #ec3030) |
Liberar mesa, cerrar mesa, eliminar producto |
| Secundario (outline) | Blanco con borde --sgmb-border |
Cancelar formulario, paginación |
Tarjetas (cards)
- Dashboard card: ícono circular por módulo (Mesas=verde, Cocina=naranja, Barra=azul, Caja=rojo), título, descripción y botón al pie.
- Summary card: ícono cuadrado + valor numérico + etiqueta (resúmenes de Mesas y Caja).
- Table card (mesa): color por estado (verde=disponible, rojo=ocupada, naranja=reservada), número, capacidad y acciones rápidas.
- Order card (comanda): ícono de mesa por estado, horario, detalle de ítems, comentarios y botón de acción.
Estados y badges
| Estado | Color | Aparece en |
|---|---|---|
| Disponible / Listo / Pagado | Verde | Mesas, comandas, pagos |
| Ocupada / Pendiente | Rojo | Mesas, comandas |
| Reservada / En preparación | Naranja | Mesas, comandas |
| Atención | Rojo/naranja claro (badge) | Caja — cobros pendientes |
Iconografía
Bootstrap Icons (bi bi-*) en todos los módulos: bi-grid-3x3-gap (mesas), bi-cup-hot/egg-fried (cocina), bi-cup-straw (barra), bi-cash-stack/cash-coin (caja), bi-box-seam (productos), bi-people (usuarios), bi-bar-chart (reportes), bi-shield-check (auditoría).
Breakpoints responsive
| Breakpoint | Ajustes principales |
|---|---|
| ≤ 1200px | Resúmenes de 4 a 2 columnas; layout de mesas + pedido se angosta |
| ≤ 992px | Tablet: se mantiene layout de dos columnas en Mesas con menor gap |
| ≤ 768px | Mobile: sidebar oculto, cards a 1 columna, tabs a ancho completo |
| ≤ 480px | Mobile pequeño: se ocultan estados secundarios, íconos más chicos |
4- Pantallas del sistema (Wireframes)
1. Login (Inicio de sesión)
- Ruta:
/ - Rol / acceso: Todos los roles (Mozo, Cocina, Barra, Administrador)
- Descripción: Punto de entrada a la aplicación. Permite ingresar usuario/contraseña y seleccionar el rol de acceso. Da paso a Registro y Recupero de contraseña.
- Componentes: Formulario centrado sobre fondo beige (
#ead8bd) · Campos usuario/contraseña · Selector de rol (4 botones) · Botón "Iniciar sesión" · Enlaces a Registro y Recupero. - Estados: Rol activo (fondo marrón) · Error de credenciales (a incorporar).
2. Registro de cuenta
- Ruta:
/registro - Rol / acceso: Todos los roles
- Descripción: Alta de nuevos usuarios con selección de rol de acceso.
- Componentes: Nombre completo, email/usuario, contraseña y confirmación · Selector de rol · Botón "Registrarse" · Enlace a Login.
3. Recuperar contraseña
- Ruta:
/recupero-password - Rol / acceso: Todos los roles
- Descripción: Pantalla simplificada para iniciar el flujo de recuperación vía email.
- Componentes: Texto explicativo · Campo de email · Botón de envío.
4. Dashboard (Panel de bienvenida)
- Ruta:
/dashboard - Rol / acceso: Todos los roles autenticados
- Descripción: Pantalla de aterrizaje tras el login, con accesos directos a los 4 módulos operativos.
- Componentes: Navbar con buscador global y usuario · Mensaje de bienvenida · 4 tarjetas: Mesas (verde), Cocina (naranja), Barra (azul), Caja (rojo).
5. Administración de Mesas
- Ruta:
/mesas - Rol / acceso: Mozo / Administrador
- Descripción: Gestión del salón: estado de mesas por sector, resumen de ocupación, reservas próximas y panel de pedido de la mesa seleccionada.
- Componentes: Tabs Mesas/Reservas · Resúmenes (total, disponibles, reservadas, ocupadas) · Grilla de mesas por sector (Salón Principal, Terraza, VIP) · Panel de pedido lateral · Formulario de nueva reserva.
- Estados: Disponible (verde) · Ocupada (rojo) · Reservada (naranja).
6. Panel de Pedido de Mesa
- Ruta:
/pedidos(componente embebido en Mesas) - Rol / acceso: Mozo / Administrador
- Descripción: Panel lateral que administra el pedido de una mesa: productos por categoría (Barra/Cocina), cantidades y total.
- Componentes: Encabezado con N° de mesa y cierre · Categorías colapsables Barra/Cocina · Controles +/- y eliminar por producto · Botón "Agregar producto" · Total · Botones "Confirmar pedido" y "Cerrar mesa".
7. Comandas de Servicio (Cocina / Barra)
- Ruta:
/comandas - Rol / acceso: Cocina / Barra
- Descripción: Tablero kanban de comandas en tres columnas por estado, con selector Cocina/Barra.
- Componentes: Navegación secundaria de módulos · Selector Cocina/Barra · Columnas Pendientes (rojo), En preparación (naranja), Listos (verde) · Tarjeta de comanda con mesa, hora, ítems, observaciones y acción.
8. Gestión de Cobros (Caja)
- Ruta:
/caja - Rol / acceso: Administrador / Caja
- Descripción: Cobros pendientes por mesa y cierre de caja del turno.
- Componentes: Tabs Cobros/Cierre de caja · Resumen (pendientes, cobros del turno, mesas liberadas) · Listado de mesas por cobrar · Detalle de cobro (productos, subtotal, propina, total) · Método de pago e importe recibido · Botones "Confirmar cobro" y "Liberar mesa".
9. Gestión de Productos
- Ruta:
/producto - Rol / acceso: Administrador
- Descripción: ABM de productos del menú.
- Componentes: Buscador y filtro por categoría · Tabla (nombre, categoría, precio, estado, acciones) · Paginación · Botón "Agregar producto" · Formulario de alta/edición.
- Estados: Disponible / No disponible.
User Persona
Para garantizar que la interfaz de la aplicación sea intuitiva, eficiente y responda a las necesidades reales de quienes operarán el sistema, se definieron dos User Personas clave: el personal de salón (Mozo) y el gestor del establecimiento (Administrador).
User Persona 1: El Perfil Operativo (Mozo)
"En las horas pico no tengo tiempo para perder adivinando botones. Necesito una pantalla que sea rápida, limpia y que me permita cargar un pedido sin moverme de la mesa."
- Nombre y Edad: Lucas Martínez (27 años).
- Ocupación: Mozo en gastronomía con 3 años de experiencia.
Objetivos (Goals)
- Registrar y enviar los pedidos a la barra de manera rápida y sin errores de tipeo.
- Visualizar con un simple vistazo en el mapa de mesas cuáles están libres, ocupadas o piden la cuenta.
- Modificar un pedido activo (agregar bebidas o postres) de forma fluida antes de su preparación.
Frustraciones (Pain Points)
- Sistemas lentos, con múltiples pantallas de carga o formularios complejos frente al cliente.
- Falta de sincronización que genera errores de comunicación entre el salón y la barra.
- Interfaces poco amigables para usar desde el celular o tablet en constante movimiento y con ruido ambiente.
CONTEXTO DE USO:
Trabaja bajo presión, de pie y con movilidad constante por el salón los fines de semana y horarios nocturnos. Se conecta principalmente desde un dispositivo móvil mientras atiende mesas en paralelo. A veces hay distracciones de clientes y bullicio.
PERFIL DIGITAL:
Usa WhatsApp e Instagram a diario. Está acostumbrado a aplicaciones de delivery (como PedidosYa) con interacciones táctiles de velocidad inmediata y sin fricciones.
User Persona 2: El Perfil de Gestión (Administrador)
"Necesito controlar el negocio en tiempo real, saber qué se vende más, gestionar al personal y evitar descuadres de caja al cerrar el turno, entre otras cosas."
- Nombre y Edad: Mariana Ruarte (41 años).
- Ocupación: Co-propietaria y administradora del bar.
Objetivos (Goals)
- Monitorear el estado de las mesas, la facturación diaria y los flujos de pedidos desde un panel centralizado.
- Actualizar de forma dinámica la carta de productos (precios, disponibilidad, categorías) de manera instantánea.
- Asignar permisos seguros al personal para evitar errores operativos o modificaciones indebidas.
Frustraciones (Pain Points)
- Desactualización de precios en la carta que genera pérdidas económicas directas.
- Falta de trazabilidad sobre qué usuario registró o cobró un pedido determinado.
- Dificultad para obtener reportes de ventas claros y rápidos al finalizar la jornada laboral.
Contexto de uso:
Se conecta desde su computadora en la administración del local o revisa métricas rápidas desde el celular cuando está fuera del establecimiento. Valora la seguridad, el orden de los datos y los tableros claros.
Perfil digital:
Usa herramientas de gestión, planillas de cálculo, WhatsApp Business y plataformas web corporativas a diario. Prefiere interfaces de escritorio estructuradas pero intuitivas.