Resumen de
Desarrollo de Producto

App de gestión de personal y turnos para restaurantes Quick Service

Fecha
Junio 2026
Versión
teams_v1 · MVP
Plataforma
Web PWA (iOS + Android)
Estado
✓ Funcional
📋

Resumen Ejecutivo

Qué es, para quién es y qué problema resuelve

Welcomeback Teams es una aplicación web progresiva (PWA) de gestión de personal para restaurantes Quick Service. Funciona como un "portal laboral" donde cada trabajador puede ver su turno, iniciar y finalizar su jornada, registrar colaciones y consultar sus ganancias — todo desde el teléfono. Para el administrador, centraliza la planificación de turnos, el control de costos laborales y la proyección de demanda en una sola herramienta.

2
Roles de usuario
7
Secciones funcionales
30+
Features implementados
1
Archivo HTML · PWA

✓ Filosofía de diseño

La app responde las preguntas que el trabajador tiene todos los días: ¿Trabajo hoy? ¿Cuánto llevo ganado? ¿Cuándo vuelvo a trabajar? ¿Cuántas vacaciones me quedan? No es una herramienta de RRHH — es un portal pensado para el empleado.

🏗️

Arquitectura de la Aplicación

Single-file PWA · Tailwind CSS · Chart.js · Vanilla JS

📱 Pantallas principales
PIN (autenticación)
Vista Empleado
Vista Admin
Pantalla Fin de Turno
👤 Portal Empleado
Inicio (turno + ganancias)
Mis Turnos
Equipo (anuncios)
Mi Dinero
Perfil
⚙️ Panel Admin
Dashboard operacional
Calendario de turnos
Equipo (empleados)
Costos Laborales
Forecast de demanda
💾 Datos en memoria
EMPLOYEES (6 empleados)
SHIFTS (turnos semana)
VENTAS_DIA (histórico)
ANNOUNCEMENTS
WEEK_SCHEDULE

Stack técnico: HTML5Tailwind CSS CDNChart.js Vanilla JavaScriptPWA (manifest + service worker) CSS custom animationsDrag & Drop API

👤

Portal del Empleado

Acceso con PIN 1111 · Experiencia mobile-first

🕐
Control de Turno
  • Botón INICIAR TURNO con registro de hora de entrada
  • Timer en tiempo real (horas y minutos trabajados)
  • Badge de estado en top bar (verde "Turno activo" / gris "Fuera de turno")
  • Botón Iniciar/Terminar colación con contador de tiempo de descanso
  • Pantalla de resumen al FINALIZAR TURNO con horas reales y ganancia estimada
📅
Mis Turnos
  • Vista semanal con horario por día y estación asignada
  • Totales de horas vs objetivo semanal
  • Solicitar vacaciones — selección de fechas + nota
  • Solicitar permiso — tipo, fecha y descripción
  • Cambio de turno — selecciona turno y compañero
  • Tomar turno libre — lista de turnos abiertos disponibles
💰
Mi Dinero
  • Resumen de ganancias: hoy / semana / mes (estimado)
  • Desglose: horas trabajadas + bonos + propinas
  • Historial de liquidaciones anteriores con estado "Pagado"
  • Próximo pago estimado con fecha
  • Sección de propinas separada con acumulados
👤
Perfil Personal
  • Datos personales (RUT, teléfono, email)
  • Sección de Documentos: contrato + liquidaciones anteriores
  • Días de vacaciones disponibles / tomados / pendientes
  • Configuración: notificaciones y cambio de PIN
  • Cerrar sesión
📢
Equipo (Anuncios)
  • Feed de comunicados del local
  • Badge "Nuevo" / "Leído" por anuncio
  • Botón "Marcar como leído" individual
  • Autor y fecha de cada comunicado
🔒
Seguridad y UX
  • Autenticación por PIN de 4 dígitos con feedback visual
  • Scroll contenido — imposible ver otras secciones deslizando
  • Safe areas para iPhone (notch + home indicator)
  • Touch targets mínimo 44px para accesibilidad
  • Animaciones de transición suaves entre pantallas
⚙️

Panel de Administración

Acceso con PIN 9999 · Responsive desktop + mobile

📊
Dashboard Operacional
  • KPIs en tiempo real: ventas, pedidos, personal activo, costo laboral %
  • Ventas/hora y tiempo promedio por pedido
  • Gráfico de barras de ventas por hora del día
  • Lista del personal activo en tiempo real con estado
  • Personal activo y ratio laboral conectados a datos reales
📅
Calendario de Turnos
  • Vista semanal con tabla por puesto × día
  • Vista lista alternativa por día
  • Navegación entre semanas (anterior / siguiente)
  • Drag & Drop para mover turnos entre días y puestos
  • Modal de creación/edición: empleado, horario, puesto, color, nota, repetición
  • Filtros por miembro y por puesto en tiempo real
  • Modal de Publicar horario con opciones de notificación
  • Summary bar dinámico: turnos, horas totales y costo estimado real
💡
Dotación Recomendada
  • Panel encima del calendario con recomendación por día
  • Programado vs recomendado (verde OK / ámbar faltan N)
  • Algoritmo basado en ventas históricas por día de semana
  • Se actualiza automáticamente al agregar/quitar turnos
👥
Gestión de Empleados
  • Tabla desktop con columnas: nombre, cargo, estado, próx. turno, horas, tarifa $/hora
  • Cards mobile con estado en tiempo real
  • Panel lateral (desktop) y sheet inferior (mobile) de detalle
  • Ver perfil completo: métricas, turnos semana, documentos, subida de liquidaciones
  • Editar turno: navega directamente al modal de edición del turno
  • Descargar resumen semanal CSV con horas y costos reales por empleado
💸
Costos Laborales
  • KPIs conectados en tiempo real: ventas proyectadas, horas programadas, costo total, ratio %
  • Banner de alerta automático si el ratio supera el objetivo (20%)
  • Gráfico de barras por día (rojo = sobre objetivo / índigo = dentro)
  • Barras de costo por cargo calculadas desde tarifas reales
  • Se actualiza al agregar, editar o eliminar turnos
🔮
Forecast de Demanda
  • Predicción de ventas para mañana desde histórico
  • Pedidos estimados calculados con ticket promedio ($11.500)
  • Pedidos en hora punta (13:00–14:00) calculados automáticamente
  • Dotación recomendada por estación (Caja, Barista, Cocina, Despacho)
  • Gráfico de curva de demanda proyectada por hora
  • "Aplicar dotación": crea turnos abiertos en el calendario automáticamente

Registro de Funcionalidades Implementadas

Listado completo del desarrollo

Funcionalidad Área Descripción Estado
Autenticación PINAmbosPIN de 4 dígitos con feedback visual, error con shake, roles separados (empleado / admin)✓ Listo
Bloqueo de scrollAmbosCada pantalla ocupa exactamente 100vh — imposible ver otras secciones al deslizar✓ Listo
Iniciar / Finalizar turnoEmpleadoTimer en vivo, hora de entrada, toggle de colación con contador, pantalla de resumen al salir✓ Listo
ColaciónEmpleadoIniciar/terminar descanso con timer, el tiempo de colación no cuenta como horas trabajadas✓ Listo
Solicitudes de turnosEmpleado4 modales funcionales: vacaciones, permiso, cambio de turno, tomar turno libre✓ Listo
Calendario semanal adminAdminVista por puesto × día con drag & drop, modal de creación/edición, vista lista alternativa✓ Listo
Día correcto al crear turnoAdminFix bug: turnos nuevos se guardan en el día donde se hace clic, no siempre en Lunes✓ Listo
Filtros de turnosAdminDropdowns por miembro y por puesto que filtran el calendario y la vista lista en tiempo real✓ Listo
Dotación recomendadaAdminPanel encima del calendario con programado vs recomendado por día, basado en ventas históricas✓ Listo
Costo dinámico en turnosAdminSummary bar recalcula costo real usando tarifa/hora de cada empleado al crear/editar/eliminar turno✓ Listo
Tarifa $/hora por empleadoAdminCada empleado tiene su hourlyRate individual visible en tabla, cards, sheet y panel de detalle✓ Listo
Costos Laborales dinámicosAdminKPIs calculados desde SHIFTS + hourlyRate, gráfico por día, barras por cargo, alerta automática✓ Listo
Forecast conectadoAdminVentas, pedidos y dotación calculados desde datos reales; gráfico de curva horaria dinámica✓ Listo
Aplicar dotación recomendadaAdminCrea turnos abiertos en el calendario según forecast y navega a la sección Turnos✓ Listo
Ver perfil completoAdminModal con métricas, turnos de la semana, documentos del empleado y subida de liquidaciones✓ Listo
Editar turno desde empleadoAdminNavega a sección Turnos y abre directamente el modal del primer turno del empleado✓ Listo
Descargar resumen semanal CSVAdminCSV con horas y costos reales por empleado (tarifa individual), compatible con Excel (BOM UTF-8)✓ Listo
Subir liquidacionesAdminÁrea drag-and-drop en perfil de empleado para subir PDF de liquidación mensual✓ Listo
Gráficos legiblesAdminFix Chart.js: contenedores con altura fija para que las gráficas no se expandan al infinito✓ Listo
Publicar horarioAdminModal de publicación con resumen de semana y opción de notificar a afectados o todo el equipo✓ Listo
PWA instalableAmbosBanner de instalación en Android, instrucciones para iOS Safari, service worker silencioso✓ Listo
🚀

Próximos Pasos Sugeridos

Evolución natural del MVP hacia producto completo

Backend & Datos reales
API REST / Supabase
Persistencia real de turnos, empleados y registros de jornada
Auth real por empleado
PIN único por persona, sesión individual con JWT
Integración POS
Ventas reales para forecast y ratio laboral en tiempo real
Funcionalidades RRHH
Aprobación de solicitudes
Flujo de vacaciones y permisos con notificación push
Liquidaciones automáticas
Generación PDF de liquidación desde horas registradas
Multi-local
Gestión de varios locales desde un mismo admin
Inteligencia
Forecast con ML
Modelo de predicción con histórico real y variables externas
Alertas proactivas
Notificación si hay riesgo de subdotación o sobrecosto
Optimización automática
Sugerir el calendario óptimo para minimizar costo manteniendo cobertura
Welcomeback Teams · MVP v1 · Junio 2026 · Documento generado automáticamente