RestaurantePRO — Sistema Integral de Gestión para Restaurantes

Estructura del Template

El template está compuesto por 37 archivos HTML y sus correspondientes archivos JS de lógica, organizados de la siguiente manera:

ArchivoMóduloÁreaIndex.htmlShell principal con sidebar y navegaciónCoreLogin.htmlPantalla de inicio de sesiónCoredashboard_gerencial.htmlDashboard Gerencial en Tiempo RealInteligenciaterminal_pos.htmlTerminal de Venta (POS)Punto de Ventapantalla_kds.htmlPantalla de Cocina (KDS)Cocinagestion_menu_digital.htmlMenú DigitalExperiencia Clientegestion_reservas.htmlReservas y Lista de EsperaExperiencia Clientebase_clientes.htmlBase de Clientes (CRM)Experiencia Clientecampanas_fidelizacion.htmlCampañas de FidelizaciónExperiencia Clienteconfiguracion_lealtad.htmlPrograma de LealtadExperiencia Clientegestion_encuestas.htmlEncuestas de SatisfacciónExperiencia Clientecontrol_stock.htmlControl de Stock y AlmacenesInventariogestion_recetas.htmlRecetas y CosteoInventariogestion_proveedores.htmlProveedoresInventarioordenes_compra.htmlÓrdenes de CompraInventarioregistro_mermas.htmlRegistro de MermasInventariotrazabilidad_ingredientes.htmlTrazabilidad de IngredientesInventariogestion_facturacion.htmlFacturación ElectrónicaPunto de Ventagestion_promociones.htmlPromociones y DescuentosPunto de Ventaplanificacion_horarios.htmlHorarios y TurnosPersonalregistro_asistencia.htmlRegistro de AsistenciaPersonalasignacion_secciones.htmlAsignación de Secciones y MesasPersonalevaluaciones_desempeno.htmlEvaluaciones de DesempeñoPersonalgestion_propinas_comisiones.htmlPropinas y ComisionesPersonalanalisis_desempeno_personal.htmlAnálisis de DesempeñoInteligenciaanalisis_clientes_fidelidad.htmlAnálisis de Clientes y FidelidadInteligenciaanalisis_comparativo_sucursales.htmlComparativo entre SucursalesInteligenciaanalisis_rentabilidad_platillo.htmlRentabilidad por PlatilloInteligenciaproyecciones_demanda.htmlProyecciones de DemandaInteligenciareporte_ventas.htmlReporte de VentasInteligenciareporte_financiero_pyg.htmlReporte Financiero PyGInteligenciareporte_mermas_desperdicios.htmlReporte de MermasInteligenciareporte_ocupacion_reservas.htmlReporte de OcupaciónInteligenciareporte_rotacion_inventario.htmlRotación de InventarioInteligenciagestion_sucursales.htmlGestión de SucursalesAdministracióngestion_integraciones.htmlIntegraciones ExternasAdministraciónauditoria_sistema.htmlAuditoría del SistemaAdministraciónCómo funciona la navegación

El archivo Index.html actúa como shell principal. Contiene el topbar, el sidebar y un <iframe> central. Al hacer clic en cualquier ítem del menú lateral, el módulo correspondiente se carga dentro del iframe sin recargar la página.

// Fragmento del mecanismo de carga (Resources_Index.js)
$('.menu-enlace').on('click', function () {
    const page = $(this).data('page');
    if (page) {
        $('#main-content-iframe').attr('src', page + '?t=' + Date.now());
    }
});

Para agregar un nuevo módulo basta con:

1. Crear el archivo mi_modulo.html y su mi_modulo.js en la raíz del proyecto.
2. Agregar un ítem al sidebar en Index.html con data-page="mi_modulo.html".

Personalización de Marca

Todos los colores principales están definidos como variables CSS en la sección :root de cada archivo. Para cambiar la paleta completa basta con editar estos cuatro valores:

:root {
  --color-primary:    #1F3D6C;  /* Azul oscuro — barras, headings */
  --color-secondary:  #FF6B35;  /* Naranja — acciones, hover     */
  --color-tertiary:   #4CAF50;  /* Verde — estados activos        */
  --color-background: #F9FBFC;  /* Fondo general                  */
  --color-text:       #2A3541;  /* Texto base                     */
}

Librerías incluidas (CDN)

LibreríaVersiónUso en el templateBootstrap5.3Grid, modales, badges, formularios, paginaciónFont Awesome6.4Iconografía en toda la interfazChart.js4 (latest)Gráficos de línea, barra, dona y radar en dashboards y reportesFullCalendar6.1.9Calendario de turnos y horarios (planificacion_horarios.html)jQuery3.6Navegación, eventos y manipulación DOM en Index.htmlFlatpickrlatestSelectores de fecha/hora en formularios de asistencia y reservasSelect24.1Selectores mejorados con búsqueda en Index.htmlLeaflet.js1.9.4Mapas interactivos en sucursales, proveedores, clientes y trazabilidadchartjs-plugin-datalabels2Etiquetas de datos en gráficos del reporte de mermasMódulos destacados — Guía de uso

🖥️ Terminal POS (terminal_pos.html)

• Selecciona una mesa desde el plano visual o el selector superior.
• Agrega productos por categoría desde el panel derecho.
• Aplica descuentos, divide la cuenta o envía la orden a cocina.
• Finaliza con el modal de pago (efectivo, tarjeta o mixto).

🍳 Pantalla KDS (pantalla_kds.html)

• Muestra las órdenes pendientes en tarjetas con temporizador.
• El chef hace clic en Listo para marcar cada platillo.
• Las órdenes completadas cambian de color y se archivan automáticamente.

📅 Planificación de Horarios (planificacion_horarios.html)

• Usa el calendario FullCalendar en vista semana o mes.
• Arrastra o crea eventos para asignar turnos por empleado.
• El panel lateral muestra resumen de horas por trabajador.

🕑 Registro de Asistencia (registro_asistencia.html)

• Usa el botón Registro Biométrico para simular el escaneo de huella.
• El botón Registro Manual permite ingresar entrada/salida con justificación y aprobador.
• Filtra por empleado, departamento, fechas y estado.
• Genera reportes en PDF, Excel o CSV desde el botón Generar Reporte.

📦 Control de Stock (control_stock.html)

• Visualiza existencias actuales, alertas de mínimos y movimientos.
• Crea ajustes de inventario con motivo y responsable.
• Enlaza con ordenes_compra.html para reponer automáticamente.

🧪 Trazabilidad de Ingredientes (trazabilidad_ingredientes.html)

• Rastrea cada ingrediente desde el proveedor hasta el platillo final.
• El mapa Leaflet muestra el origen geográfico del ingredient.
• Exporta el historial de lotes para cumplimiento regulatorio.

🔌 Gestión de Integraciones (gestion_integraciones.html)

• Categorías: Delivery (Rappi, Uber Eats, DiDi Food), Contabilidad (Contpaq, SAT), Pagos (Stripe, Mercado Pago), CRM (HubSpot, Facebook) y Otros.
• Cada tarjeta muestra estado de conexión, última sincronización y acciones.
• El modal de configuración incluye API Key, entorno, intervalo de sincronización, webhook URL y mapeo de datos.
• El modal de prueba ejecuta diagnóstico en 4 pasos: conexión, autenticación, permisos y webhook.

🏢 Gestión de Sucursales (gestion_sucursales.html)

• Lista todas las sucursales con estado, ventas del mes y gerente responsable.
• Mapa Leaflet con pines de ubicación por sucursal.
• Modal de alta/edición con datos de contacto, capacidad, horarios y configuración de POS.

📊 Reportes e Inteligencia de Negocio

• Dashboard Gerencial: KPIs en tiempo real, ventas vs. objetivo, ocupación de mesas y top productos.
• Reporte PyG: Estado de resultados mensual con desglose de ingresos, costo de ventas, gastos operativos y utilidad neta.
• Análisis Comparativo Sucursales: Gráficos radar y barras para comparar rendimiento entre locales.
• Proyecciones de Demanda: Curvas predictivas basadas en histórico por hora, día y temporada.
• Análisis de Rentabilidad por Platillo: Margen, costo, popularidad y clasificación ABC de menú.

Flujo de trabajo recomendado para conectar a un backend

1. Cada módulo HTML tiene su archivo .js separado (ej. terminal_pos.js). Las funciones de guardado simulan la operación con setTimeout y alert().
2. Reemplaza esos bloques por llamadas fetch() o $.ajax() apuntando a tu API REST.
3. Los formularios están construidos con HTML estándar; los id de cada campo son semánticos y consistentes.
4. Para autenticación, adapta Login.html para enviar credenciales a tu endpoint y guardar el token en localStorage. Luego añade un interceptor global en Resources_Index.js.