|
|
<!DOCTYPE html> |
|
|
<html lang="es"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Sistema de Forecast Inteligente</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script> |
|
|
<style> |
|
|
.sidebar { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.sidebar.collapsed { |
|
|
width: 70px; |
|
|
} |
|
|
.sidebar.collapsed .nav-text { |
|
|
display: none; |
|
|
} |
|
|
.main-content { |
|
|
transition: margin-left 0.3s ease; |
|
|
} |
|
|
.skeleton { |
|
|
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); |
|
|
background-size: 200% 100%; |
|
|
animation: shimmer 1.5s infinite; |
|
|
} |
|
|
@keyframes shimmer { |
|
|
0% { background-position: 200% 0; } |
|
|
100% { background-position: -200% 0; } |
|
|
} |
|
|
.chart-tooltip { |
|
|
background: rgba(0, 0, 0, 0.8); |
|
|
color: white; |
|
|
padding: 8px; |
|
|
border-radius: 4px; |
|
|
font-size: 12px; |
|
|
} |
|
|
.hover-scale:hover { |
|
|
transform: scale(1.05); |
|
|
transition: transform 0.3s ease; |
|
|
} |
|
|
.fade-in { |
|
|
animation: fadeIn 0.5s ease-in; |
|
|
} |
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; } |
|
|
to { opacity: 1; } |
|
|
} |
|
|
.slide-in { |
|
|
animation: slideIn 0.3s ease-out; |
|
|
} |
|
|
@keyframes slideIn { |
|
|
from { transform: translateX(100%); } |
|
|
to { transform: translateX(0); } |
|
|
} |
|
|
.confidence-high { |
|
|
background-color: rgba(40, 167, 69, 0.1); |
|
|
border-left: 4px solid #28a745; |
|
|
} |
|
|
.confidence-medium { |
|
|
background-color: rgba(255, 193, 7, 0.1); |
|
|
border-left: 4px solid #ffc107; |
|
|
} |
|
|
.confidence-low { |
|
|
background-color: rgba(220, 53, 69, 0.1); |
|
|
border-left: 4px solid #dc3545; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 font-sans"> |
|
|
|
|
|
<div id="loadingScreen" class="fixed inset-0 bg-white z-50 flex flex-col items-center justify-center"> |
|
|
<div class="animate-spin rounded-full h-16 w-16 border-t-4 border-b-4 border-blue-500 mb-4"></div> |
|
|
<p class="text-gray-700">Cargando sistema de forecast...</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex h-screen overflow-hidden"> |
|
|
|
|
|
<div id="sidebar" class="sidebar bg-gray-800 text-white w-64 flex flex-col"> |
|
|
|
|
|
<div class="p-4 flex items-center justify-between border-b border-gray-700"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-chart-line text-blue-400 text-2xl mr-3"></i> |
|
|
<span class="text-xl font-bold">ForecastPro</span> |
|
|
</div> |
|
|
<button id="toggleSidebar" class="text-gray-400 hover:text-white"> |
|
|
<i class="fas fa-bars"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="p-4 border-b border-gray-700 flex items-center"> |
|
|
<div class="h-10 w-10 rounded-full bg-blue-500 flex items-center justify-center text-white font-bold"> |
|
|
<span id="userInitials">JD</span> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<p class="font-medium" id="username">Juan Director</p> |
|
|
<p class="text-xs text-gray-400">Director Comercial</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<nav class="flex-1 overflow-y-auto"> |
|
|
<div class="p-2"> |
|
|
<div class="mb-2"> |
|
|
<p class="text-xs uppercase text-gray-500 px-4 py-2">Navegación</p> |
|
|
</div> |
|
|
<ul> |
|
|
<li> |
|
|
<a href="#" class="flex items-center px-4 py-3 text-white bg-gray-700 rounded mx-2"> |
|
|
<i class="fas fa-tachometer-alt mr-3"></i> |
|
|
<span class="nav-text">Dashboard Ejecutivo</span> |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" class="flex items-center px-4 py-3 text-gray-300 hover:text-white hover:bg-gray-700 rounded mx-2"> |
|
|
<i class="fas fa-boxes mr-3"></i> |
|
|
<span class="nav-text">Forecast por Categoría</span> |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" class="flex items-center px-4 py-3 text-gray-300 hover:text-white hover:bg-gray-700 rounded mx-2"> |
|
|
<i class="fas fa-barcode mr-3"></i> |
|
|
<span class="nav-text">Forecast por SKU</span> |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" class="flex items-center px-4 py-3 text-gray-300 hover:text-white hover:bg-gray-700 rounded mx-2"> |
|
|
<i class="fas fa-industry mr-3"></i> |
|
|
<span class="nav-text">Planificación Producción</span> |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" class="flex items-center px-4 py-3 text-gray-300 hover:text-white hover:bg-gray-700 rounded mx-2"> |
|
|
<i class="fas fa-shopping-cart mr-3"></i> |
|
|
<span class="nav-text">Planificación Compras</span> |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" class="flex items-center px-4 py-3 text-gray-300 hover:text-white hover:bg-gray-700 rounded mx-2"> |
|
|
<i class="fas fa-flask mr-3"></i> |
|
|
<span class="nav-text">Simulador de Escenarios</span> |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" class="flex items-center px-4 py-3 text-gray-300 hover:text-white hover:bg-gray-700 rounded mx-2"> |
|
|
<i class="fas fa-chart-bar mr-3"></i> |
|
|
<span class="nav-text">Performance de Modelos</span> |
|
|
</a> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div class="p-2 mt-4"> |
|
|
<div class="mb-2"> |
|
|
<p class="text-xs uppercase text-gray-500 px-4 py-2">Configuración</p> |
|
|
</div> |
|
|
<ul> |
|
|
<li> |
|
|
<a href="#" class="flex items-center px-4 py-3 text-gray-300 hover:text-white hover:bg-gray-700 rounded mx-2"> |
|
|
<i class="fas fa-cog mr-3"></i> |
|
|
<span class="nav-text">Configuración</span> |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" class="flex items-center px-4 py-3 text-gray-300 hover:text-white hover:bg-gray-700 rounded mx-2"> |
|
|
<i class="fas fa-file-alt mr-3"></i> |
|
|
<span class="nav-text">Reportes</span> |
|
|
</a> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<div class="p-4 border-t border-gray-700"> |
|
|
<button id="collapseSidebar" class="w-full flex items-center justify-center text-gray-400 hover:text-white"> |
|
|
<i class="fas fa-chevron-left mr-2"></i> |
|
|
<span class="nav-text">Colapsar</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="main-content flex-1 flex flex-col overflow-hidden"> |
|
|
|
|
|
<header class="bg-white shadow-sm z-10"> |
|
|
<div class="flex items-center justify-between px-6 py-3"> |
|
|
<div class="flex items-center"> |
|
|
<h1 class="text-xl font-semibold text-gray-800">Dashboard Ejecutivo</h1> |
|
|
<div class="ml-4 text-sm breadcrumbs"> |
|
|
<ul> |
|
|
<li>Inicio</li> |
|
|
<li>Dashboard</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="relative"> |
|
|
<button id="notificationsBtn" class="text-gray-600 hover:text-gray-900 relative"> |
|
|
<i class="fas fa-bell text-xl"></i> |
|
|
<span class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">3</span> |
|
|
</button> |
|
|
<div id="notificationsDropdown" class="hidden absolute right-0 mt-2 w-80 bg-white rounded-md shadow-lg z-20 py-1"> |
|
|
<div class="px-4 py-2 border-b border-gray-200"> |
|
|
<h3 class="font-medium">Notificaciones</h3> |
|
|
</div> |
|
|
<div class="max-h-96 overflow-y-auto"> |
|
|
<a href="#" class="block px-4 py-3 hover:bg-gray-100 border-b border-gray-100"> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 text-red-500"> |
|
|
<i class="fas fa-exclamation-circle"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm font-medium">Stock crítico en SKU-4567</p> |
|
|
<p class="text-xs text-gray-500">2 horas atrás</p> |
|
|
</div> |
|
|
</div> |
|
|
</a> |
|
|
<a href="#" class="block px-4 py-3 hover:bg-gray-100 border-b border-gray-100"> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 text-yellow-500"> |
|
|
<i class="fas fa-chart-line"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm font-medium">Modelo Prophet requiere reentrenamiento</p> |
|
|
<p class="text-xs text-gray-500">Ayer, 14:30</p> |
|
|
</div> |
|
|
</div> |
|
|
</a> |
|
|
<a href="#" class="block px-4 py-3 hover:bg-gray-100"> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 text-blue-500"> |
|
|
<i class="fas fa-info-circle"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm font-medium">Nuevo reporte de performance disponible</p> |
|
|
<p class="text-xs text-gray-500">Lunes, 9:00</p> |
|
|
</div> |
|
|
</div> |
|
|
</a> |
|
|
</div> |
|
|
<div class="px-4 py-2 border-t border-gray-200 text-center"> |
|
|
<a href="#" class="text-sm text-blue-600 hover:text-blue-800">Ver todas las notificaciones</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="relative"> |
|
|
<button id="userMenuBtn" class="flex items-center text-gray-600 hover:text-gray-900"> |
|
|
<span class="mr-2 hidden md:inline">Juan Director</span> |
|
|
<div class="h-8 w-8 rounded-full bg-blue-500 flex items-center justify-center text-white font-bold">JD</div> |
|
|
</button> |
|
|
<div id="userMenuDropdown" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg z-20 py-1"> |
|
|
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Mi perfil</a> |
|
|
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Configuración</a> |
|
|
<div class="border-t border-gray-200"></div> |
|
|
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Cerrar sesión</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main class="flex-1 overflow-y-auto p-6 bg-gray-50"> |
|
|
|
|
|
<div class="bg-red-50 border-l-4 border-red-500 p-4 mb-6"> |
|
|
<div class="flex"> |
|
|
<div class="flex-shrink-0"> |
|
|
<i class="fas fa-exclamation-circle text-red-500"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm text-red-700"> |
|
|
<span class="font-medium">Alerta crítica:</span> Stock insuficiente para el SKU-4567 (Bebidas Energéticas). Solo quedan 2 días de inventario según el forecast actual. |
|
|
<a href="#" class="font-medium underline text-red-700 hover:text-red-600 ml-2">Ver detalles</a> |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6"> |
|
|
<div class="bg-white rounded-lg shadow p-6 hover-scale"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-gray-500">Demanda proyectada (7 días)</p> |
|
|
<p class="mt-1 text-3xl font-semibold text-gray-900">12,450</p> |
|
|
</div> |
|
|
<div class="bg-green-100 rounded-full p-3"> |
|
|
<i class="fas fa-arrow-up text-green-600"></i> |
|
|
</div> |
|
|
</div> |
|
|
<p class="mt-2 text-sm text-gray-500"> |
|
|
<span class="text-green-600 font-medium">+8.2%</span> vs semana anterior |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-lg shadow p-6 hover-scale"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-gray-500">Precisión del modelo</p> |
|
|
<p class="mt-1 text-3xl font-semibold text-gray-900">92.4%</p> |
|
|
</div> |
|
|
<div class="bg-blue-100 rounded-full p-3"> |
|
|
<i class="fas fa-brain text-blue-600"></i> |
|
|
</div> |
|
|
</div> |
|
|
<p class="mt-2 text-sm text-gray-500"> |
|
|
<span class="text-green-600 font-medium">+1.5%</span> vs promedio histórico |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-lg shadow p-6 hover-scale"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-gray-500">Stock crítico</p> |
|
|
<p class="mt-1 text-3xl font-semibold text-gray-900">3</p> |
|
|
</div> |
|
|
<div class="bg-red-100 rounded-full p-3"> |
|
|
<i class="fas fa-exclamation-triangle text-red-600"></i> |
|
|
</div> |
|
|
</div> |
|
|
<p class="mt-2 text-sm text-gray-500"> |
|
|
<span class="text-red-600 font-medium">+1</span> vs semana anterior |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-lg shadow p-6 hover-scale"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-gray-500">Margen estimado</p> |
|
|
<p class="mt-1 text-3xl font-semibold text-gray-900">34.2%</p> |
|
|
</div> |
|
|
<div class="bg-yellow-100 rounded-full p-3"> |
|
|
<i class="fas fa-percent text-yellow-600"></i> |
|
|
</div> |
|
|
</div> |
|
|
<p class="mt-2 text-sm text-gray-500"> |
|
|
<span class="text-green-600 font-medium">+2.1%</span> vs semana anterior |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow p-6 mb-6"> |
|
|
<div class="flex flex-col md:flex-row md:items-center md:justify-between mb-4"> |
|
|
<div> |
|
|
<h2 class="text-lg font-semibold text-gray-900">Forecast por categoría (próximas 4 semanas)</h2> |
|
|
<p class="text-sm text-gray-500">Actualizado hoy a las 08:45 AM</p> |
|
|
</div> |
|
|
<div class="mt-2 md:mt-0"> |
|
|
<div class="flex space-x-2"> |
|
|
<select class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2"> |
|
|
<option selected>Todas las categorías</option> |
|
|
<option>Bebidas</option> |
|
|
<option>Snacks</option> |
|
|
<option>Lácteos</option> |
|
|
<option>Congelados</option> |
|
|
</select> |
|
|
<select class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2"> |
|
|
<option selected>Modelo: Prophet</option> |
|
|
<option>XGBoost</option> |
|
|
<option>Random Forest</option> |
|
|
<option>Ensemble</option> |
|
|
</select> |
|
|
<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm font-medium"> |
|
|
<i class="fas fa-download mr-1"></i> Exportar |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="h-96"> |
|
|
<canvas id="forecastChart"></canvas> |
|
|
</div> |
|
|
|
|
|
<div class="mt-4 flex items-center justify-between"> |
|
|
<div class="flex space-x-4"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-3 h-3 bg-blue-500 rounded-full mr-2"></div> |
|
|
<span class="text-sm text-gray-600">Histórico</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-3 h-3 bg-orange-500 rounded-full mr-2"></div> |
|
|
<span class="text-sm text-gray-600">Forecast</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-3 h-3 bg-orange-200 rounded-full mr-2"></div> |
|
|
<span class="text-sm text-gray-600">Banda de confianza</span> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<button class="text-blue-600 hover:text-blue-800 text-sm font-medium"> |
|
|
<i class="fas fa-expand mr-1"></i> Pantalla completa |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6"> |
|
|
|
|
|
<div class="bg-white rounded-lg shadow p-6 lg:col-span-2"> |
|
|
<h2 class="text-lg font-semibold text-gray-900 mb-4">Top Insights</h2> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
<div class="p-4 border border-gray-200 rounded-lg"> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 bg-blue-100 p-2 rounded-full"> |
|
|
<i class="fas fa-chart-line text-blue-600"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<h3 class="text-sm font-medium text-gray-900">Pico esperado en Bebidas Energéticas</h3> |
|
|
<p class="mt-1 text-sm text-gray-600">Se proyecta un aumento del 25% en la demanda para el 15 de junio debido al evento deportivo local.</p> |
|
|
<div class="mt-2 flex space-x-3"> |
|
|
<button class="inline-flex items-center px-3 py-1 border border-blue-600 text-blue-600 rounded-full text-xs font-medium hover:bg-blue-50"> |
|
|
<i class="fas fa-eye mr-1"></i> Ver detalles |
|
|
</button> |
|
|
<button class="inline-flex items-center px-3 py-1 bg-blue-600 text-white rounded-full text-xs font-medium hover:bg-blue-700"> |
|
|
<i class="fas fa-plus-circle mr-1"></i> Programar producción |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="p-4 border border-gray-200 rounded-lg"> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 bg-yellow-100 p-2 rounded-full"> |
|
|
<i class="fas fa-exclamation-triangle text-yellow-600"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<h3 class="text-sm font-medium text-gray-900">Tendencia bajista en Snacks Salados</h3> |
|
|
<p class="mt-1 text-sm text-gray-600">Demanda proyectada disminuye un 12% en las próximas 2 semanas. Revisar estrategia de precios.</p> |
|
|
<div class="mt-2 flex space-x-3"> |
|
|
<button class="inline-flex items-center px-3 py-1 border border-yellow-600 text-yellow-600 rounded-full text-xs font-medium hover:bg-yellow-50"> |
|
|
<i class="fas fa-eye mr-1"></i> Ver detalles |
|
|
</button> |
|
|
<button class="inline-flex items-center px-3 py-1 bg-yellow-600 text-white rounded-full text-xs font-medium hover:bg-yellow-700"> |
|
|
<i class="fas fa-tag mr-1"></i> Crear promoción |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="p-4 border border-gray-200 rounded-lg"> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 bg-green-100 p-2 rounded-full"> |
|
|
<i class="fas fa-lightbulb text-green-600"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<h3 class="text-sm font-medium text-gray-900">Oportunidad promocional en Lácteos</h3> |
|
|
<p class="mt-1 text-sm text-gray-600">Modelo sugiere alta sensibilidad a promociones para yogures naturales (+35% demanda con 10% descuento).</p> |
|
|
<div class="mt-2 flex space-x-3"> |
|
|
<button class="inline-flex items-center px-3 py-1 border border-green-600 text-green-600 rounded-full text-xs font-medium hover:bg-green-50"> |
|
|
<i class="fas fa-eye mr-1"></i> Ver detalles |
|
|
</button> |
|
|
<button class="inline-flex items-center px-3 py-1 bg-green-600 text-white rounded-full text-xs font-medium hover:bg-green-700"> |
|
|
<i class="fas fa-bullhorn mr-1"></i> Planificar campaña |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow p-6"> |
|
|
<h2 class="text-lg font-semibold text-gray-900 mb-4">Acciones rápidas</h2> |
|
|
|
|
|
<div class="space-y-3"> |
|
|
<button class="w-full flex items-center justify-between p-4 bg-blue-50 hover:bg-blue-100 rounded-lg transition-colors"> |
|
|
<div class="flex items-center"> |
|
|
<div class="bg-blue-100 p-2 rounded-full mr-3"> |
|
|
<i class="fas fa-play-circle text-blue-600"></i> |
|
|
</div> |
|
|
<span class="font-medium text-gray-800">Ejecutar simulador de escenarios</span> |
|
|
</div> |
|
|
<i class="fas fa-chevron-right text-gray-400"></i> |
|
|
</button> |
|
|
|
|
|
<button class="w-full flex items-center justify-between p-4 bg-purple-50 hover:bg-purple-100 rounded-lg transition-colors"> |
|
|
<div class="flex items-center"> |
|
|
<div class="bg-purple-100 p-2 rounded-full mr-3"> |
|
|
<i class="fas fa-file-export text-purple-600"></i> |
|
|
</div> |
|
|
<span class="font-medium text-gray-800">Generar reporte ejecutivo</span> |
|
|
</div> |
|
|
<i class="fas fa-chevron-right text-gray-400"></i> |
|
|
</button> |
|
|
|
|
|
<button class="w-full flex items-center justify-between p-4 bg-green-50 hover:bg-green-100 rounded-lg transition-colors"> |
|
|
<div class="flex items-center"> |
|
|
<div class="bg-green-100 p-2 rounded-full mr-3"> |
|
|
<i class="fas fa-chart-pie text-green-600"></i> |
|
|
</div> |
|
|
<span class="font-medium text-gray-800">Analizar performance de modelos</span> |
|
|
</div> |
|
|
<i class="fas fa-chevron-right text-gray-400"></i> |
|
|
</button> |
|
|
|
|
|
<button class="w-full flex items-center justify-between p-4 bg-yellow-50 hover:bg-yellow-100 rounded-lg transition-colors"> |
|
|
<div class="flex items-center"> |
|
|
<div class="bg-yellow-100 p-2 rounded-full mr-3"> |
|
|
<i class="fas fa-bell text-yellow-600"></i> |
|
|
</div> |
|
|
<span class="font-medium text-gray-800">Configurar alertas personalizadas</span> |
|
|
</div> |
|
|
<i class="fas fa-chevron-right text-gray-400"></i> |
|
|
</button> |
|
|
|
|
|
<button class="w-full flex items-center justify-between p-4 bg-red-50 hover:bg-red-100 rounded-lg transition-colors"> |
|
|
<div class="flex items-center"> |
|
|
<div class="bg-red-100 p-2 rounded-full mr-3"> |
|
|
<i class="fas fa-exclamation-triangle text-red-600"></i> |
|
|
</div> |
|
|
<span class="font-medium text-gray-800">Revisar alertas críticas</span> |
|
|
</div> |
|
|
<i class="fas fa-chevron-right text-gray-400"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow overflow-hidden mb-6"> |
|
|
<div class="px-6 py-4 border-b border-gray-200"> |
|
|
<h2 class="text-lg font-semibold text-gray-900">Forecast próximos 7 días</h2> |
|
|
</div> |
|
|
<div class="overflow-x-auto"> |
|
|
<table class="min-w-full divide-y divide-gray-200"> |
|
|
<thead class="bg-gray-50"> |
|
|
<tr> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Fecha</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Forecast</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Rango min-max</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Comparación</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Acciones</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody class="bg-white divide-y divide-gray-200"> |
|
|
<tr class="hover:bg-gray-50"> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Lun, 12 Jun</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1,845</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1,720 - 1,950</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">+5.2%</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> |
|
|
<button class="text-blue-600 hover:text-blue-900 mr-3">Detalles</button> |
|
|
<button class="text-green-600 hover:text-green-900">Acción</button> |
|
|
</td> |
|
|
</tr> |
|
|
<tr class="hover:bg-gray-50"> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Mar, 13 Jun</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1,920</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1,810 - 2,030</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">+7.8%</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> |
|
|
<button class="text-blue-600 hover:text-blue-900 mr-3">Detalles</button> |
|
|
<button class="text-green-600 hover:text-green-900">Acción</button> |
|
|
</td> |
|
|
</tr> |
|
|
<tr class="hover:bg-gray-50"> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Mié, 14 Jun</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2,150</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2,020 - 2,280</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">+10.3%</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> |
|
|
<button class="text-blue-600 hover:text-blue-900 mr-3">Detalles</button> |
|
|
<button class="text-green-600 hover:text-green-900">Acción</button> |
|
|
</td> |
|
|
</tr> |
|
|
<tr class="hover:bg-gray-50"> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Jue, 15 Jun</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2,450</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2,300 - 2,600</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">+15.7%</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> |
|
|
<button class="text-blue-600 hover:text-blue-900 mr-3">Detalles</button> |
|
|
<button class="text-green-600 hover:text-green-900">Acción</button> |
|
|
</td> |
|
|
</tr> |
|
|
<tr class="hover:bg-gray-50"> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Vie, 16 Jun</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2,120</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1,980 - 2,260</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">+8.5%</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> |
|
|
<button class="text-blue-600 hover:text-blue-900 mr-3">Detalles</button> |
|
|
<button class="text-green-600 hover:text-green-900">Acción</button> |
|
|
</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
<div class="px-6 py-4 border-t border-gray-200"> |
|
|
<button class="text-blue-600 hover:text-blue-900 text-sm font-medium"> |
|
|
<i class="fas fa-plus mr-1"></i> Ver más días |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow p-6"> |
|
|
<h2 class="text-lg font-semibold text-gray-900 mb-4">Performance de modelos</h2> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6"> |
|
|
<div class="bg-gray-50 p-4 rounded-lg"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-gray-500">MAPE global</p> |
|
|
<p class="mt-1 text-2xl font-semibold text-green-600">7.2%</p> |
|
|
</div> |
|
|
<div class="bg-green-100 rounded-full p-3"> |
|
|
<i class="fas fa-check-circle text-green-600"></i> |
|
|
</div> |
|
|
</div> |
|
|
<p class="mt-2 text-xs text-gray-500"> |
|
|
<span class="font-medium">Excelente</span> (menor al 10%) |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-50 p-4 rounded-lg"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-gray-500">WAPE global</p> |
|
|
<p class="mt-1 text-2xl font-semibold text-yellow-600">9.8%</p> |
|
|
</div> |
|
|
<div class="bg-yellow-100 rounded-full p-3"> |
|
|
<i class="fas fa-exclamation-circle text-yellow-600"></i> |
|
|
</div> |
|
|
</div> |
|
|
<p class="mt-2 text-xs text-gray-500"> |
|
|
<span class="font-medium">Bueno</span> (cerca del límite del 10%) |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-50 p-4 rounded-lg"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-gray-500">Uptime del sistema</p> |
|
|
<p class="mt-1 text-2xl font-semibold text-green-600">99.7%</p> |
|
|
</div> |
|
|
<div class="bg-green-100 rounded-full p-3"> |
|
|
<i class="fas fa-server text-green-600"></i> |
|
|
</div> |
|
|
</div> |
|
|
<p class="mt-2 text-xs text-gray-500"> |
|
|
<span class="font-medium">Excelente</span> (en los últimos 30 días) |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="h-64"> |
|
|
<canvas id="modelPerformanceChart"></canvas> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="md:hidden fixed bottom-0 left-0 right-0 bg-white shadow-lg z-30"> |
|
|
<div class="flex justify-around"> |
|
|
<a href="#" class="flex flex-col items-center justify-center p-3 text-blue-600"> |
|
|
<i class="fas fa-tachometer-alt text-xl"></i> |
|
|
<span class="text-xs mt-1">Dashboard</span> |
|
|
</a> |
|
|
<a href="#" class="flex flex-col items-center justify-center p-3 text-gray-500"> |
|
|
<i class="fas fa-bell text-xl"></i> |
|
|
<span class="text-xs mt-1">Alertas</span> |
|
|
</a> |
|
|
<a href="#" class="flex flex-col items-center justify-center p-3 text-gray-500"> |
|
|
<i class="fas fa-chart-line text-xl"></i> |
|
|
<span class="text-xs mt-1">Forecast</span> |
|
|
</a> |
|
|
<a href="#" class="flex flex-col items-center justify-center p-3 text-gray-500"> |
|
|
<i class="fas fa-cog text-xl"></i> |
|
|
<span class="text-xs mt-1">Config</span> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
setTimeout(() => { |
|
|
document.getElementById('loadingScreen').style.display = 'none'; |
|
|
|
|
|
|
|
|
initCharts(); |
|
|
setupEventListeners(); |
|
|
}, 1500); |
|
|
|
|
|
function initCharts() { |
|
|
|
|
|
const forecastCtx = document.getElementById('forecastChart').getContext('2d'); |
|
|
const forecastChart = new Chart(forecastCtx, { |
|
|
type: 'line', |
|
|
data: { |
|
|
labels: ['1 Jun', '2 Jun', '3 Jun', '4 Jun', '5 Jun', '6 Jun', '7 Jun', '8 Jun', '9 Jun', '10 Jun', '11 Jun', '12 Jun', '13 Jun', '14 Jun', '15 Jun', '16 Jun', '17 Jun', '18 Jun', '19 Jun', '20 Jun', '21 Jun', '22 Jun', '23 Jun', '24 Jun', '25 Jun', '26 Jun', '27 Jun', '28 Jun', '29 Jun', '30 Jun'], |
|
|
datasets: [ |
|
|
{ |
|
|
label: 'Histórico', |
|
|
data: [1200, 1900, 1700, 1600, 1800, 1500, 2000, 2100, 1900, 2200, 2300, 2100, 2000, 2200, 2400, 2100, 1900, 2000, 2100, 2200, 2300, 2400, 2200, 2100, 2000, 1900, 2100, 2200, 2300, 2400], |
|
|
borderColor: '#3b82f6', |
|
|
backgroundColor: 'transparent', |
|
|
borderWidth: 2, |
|
|
pointRadius: 0, |
|
|
tension: 0.1 |
|
|
}, |
|
|
{ |
|
|
label: 'Forecast', |
|
|
data: [null, null, null, null, null, null, null, null, null, null, null, 1845, 1920, 2150, 2450, 2120, 1950, 2050, 2150, 2250, 2350, 2450, 2250, 2150, 2050, 1950, 2150, 2250, 2350, 2450], |
|
|
borderColor: '#f97316', |
|
|
backgroundColor: 'transparent', |
|
|
borderWidth: 2, |
|
|
borderDash: [5, 5], |
|
|
pointRadius: 0, |
|
|
tension: 0.1 |
|
|
}, |
|
|
{ |
|
|
label: 'Banda de confianza', |
|
|
data: [null, null, null, null, null, null, null, null, null, null, null, 1720, 1810, 2020, 2300, 1980, 1850, 1950, 2050, 2150, 2250, 2350, 2150, 2050, 1950, 1850, 2050, 2150, 2250, 2350], |
|
|
borderColor: 'transparent', |
|
|
backgroundColor: 'rgba(249, 115, 22, 0.1)', |
|
|
borderWidth: 0, |
|
|
pointRadius: 0, |
|
|
tension: 0.1, |
|
|
fill: '1' |
|
|
}, |
|
|
{ |
|
|
label: 'Banda de confianza', |
|
|
data: [null, null, null, null, null, null, null, null, null, null, null, 1950, 2030, 2280, 2600, 2260, 2050, 2150, 2250, 2350, 2450, 2550, 2350, 2250, 2150, 2050, 2250, 2350, 2450, 2550], |
|
|
borderColor: 'transparent', |
|
|
backgroundColor: 'rgba(249, 115, 22, 0.1)', |
|
|
borderWidth: 0, |
|
|
pointRadius: 0, |
|
|
tension: 0.1, |
|
|
fill: '1' |
|
|
} |
|
|
] |
|
|
}, |
|
|
options: { |
|
|
responsive: true, |
|
|
maintainAspectRatio: false, |
|
|
plugins: { |
|
|
legend: { |
|
|
display: false |
|
|
}, |
|
|
tooltip: { |
|
|
mode: 'index', |
|
|
intersect: false, |
|
|
backgroundColor: 'rgba(0, 0, 0, 0.8)', |
|
|
titleFont: { |
|
|
size: 14, |
|
|
weight: 'bold' |
|
|
}, |
|
|
bodyFont: { |
|
|
size: 12 |
|
|
}, |
|
|
callbacks: { |
|
|
label: function(context) { |
|
|
let label = context.dataset.label || ''; |
|
|
if (label) { |
|
|
label += ': '; |
|
|
} |
|
|
if (context.parsed.y !== null) { |
|
|
label += context.parsed.y.toLocaleString(); |
|
|
} |
|
|
return label; |
|
|
} |
|
|
} |
|
|
} |
|
|
}, |
|
|
scales: { |
|
|
x: { |
|
|
grid: { |
|
|
display: false |
|
|
} |
|
|
}, |
|
|
y: { |
|
|
beginAtZero: false, |
|
|
grid: { |
|
|
color: 'rgba(0, 0, 0, 0.05)' |
|
|
}, |
|
|
ticks: { |
|
|
callback: function(value) { |
|
|
return value.toLocaleString(); |
|
|
} |
|
|
} |
|
|
} |
|
|
}, |
|
|
interaction: { |
|
|
mode: 'nearest', |
|
|
axis: 'x', |
|
|
intersect: false |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const modelCtx = document.getElementById('modelPerformanceChart').getContext('2d'); |
|
|
const modelChart = new Chart(modelCtx, { |
|
|
type: 'bar', |
|
|
data: { |
|
|
labels: ['Prophet', 'XGBoost', 'Random Forest', 'Neural Net', 'Ensemble'], |
|
|
datasets: [ |
|
|
{ |
|
|
label: 'MAPE', |
|
|
data: [6.8, 7.5, 8.2, 9.1, 5.9], |
|
|
backgroundColor: '#3b82f6', |
|
|
borderRadius: 4 |
|
|
}, |
|
|
{ |
|
|
label: 'Tiempo (ms)', |
|
|
data: [120, 85, 95, 210, 150], |
|
|
backgroundColor: '#10b981', |
|
|
borderRadius: 4, |
|
|
hidden: true |
|
|
} |
|
|
] |
|
|
}, |
|
|
options: { |
|
|
responsive: true, |
|
|
maintainAspectRatio: false, |
|
|
plugins: { |
|
|
legend: { |
|
|
position: 'top', |
|
|
}, |
|
|
tooltip: { |
|
|
callbacks: { |
|
|
label: function(context) { |
|
|
let label = context.dataset.label || ''; |
|
|
if (label) { |
|
|
label += ': '; |
|
|
} |
|
|
if (context.parsed.y !== null) { |
|
|
if (context.dataset.label === 'MAPE') { |
|
|
label += context.parsed.y + '%'; |
|
|
} else { |
|
|
label += context.parsed.y + 'ms'; |
|
|
} |
|
|
} |
|
|
return label; |
|
|
} |
|
|
} |
|
|
} |
|
|
}, |
|
|
scales: { |
|
|
x: { |
|
|
grid: { |
|
|
display: false |
|
|
} |
|
|
}, |
|
|
y: { |
|
|
beginAtZero: true, |
|
|
grid: { |
|
|
color: 'rgba(0, 0, 0, 0.05)' |
|
|
}, |
|
|
ticks: { |
|
|
callback: function(value) { |
|
|
return value + (this.scale.id === 'y' ? '%' : ''); |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
function setupEventListeners() { |
|
|
|
|
|
document.getElementById('toggleSidebar').addEventListener('click', function() { |
|
|
document.getElementById('sidebar').classList.toggle('collapsed'); |
|
|
document.querySelector('.main-content').classList.toggle('md:ml-64'); |
|
|
document.querySelector('.main-content').classList.toggle('md:ml-20'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('collapseSidebar').addEventListener('click', function() { |
|
|
document.getElementById('sidebar').classList.add('collapsed'); |
|
|
document.querySelector('.main-content').classList.remove('md:ml-64'); |
|
|
document.querySelector('.main-content').classList.add('md:ml-20'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('notificationsBtn').addEventListener('click', function(e) { |
|
|
e.stopPropagation(); |
|
|
document.getElementById('notificationsDropdown').classList.toggle('hidden'); |
|
|
document.getElementById('userMenuDropdown').classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('userMenuBtn').addEventListener('click', function(e) { |
|
|
e.stopPropagation(); |
|
|
document.getElementById('userMenuDropdown').classList.toggle('hidden'); |
|
|
document.getElementById('notificationsDropdown').classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.addEventListener('click', function() { |
|
|
document.getElementById('notificationsDropdown').classList.add('hidden'); |
|
|
document.getElementById('userMenuDropdown').classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.addEventListener('keydown', function(e) { |
|
|
if (e.ctrlKey) { |
|
|
switch (e.key) { |
|
|
case 'd': |
|
|
e.preventDefault(); |
|
|
window.location.href = '#'; |
|
|
break; |
|
|
case 'f': |
|
|
e.preventDefault(); |
|
|
|
|
|
break; |
|
|
case 's': |
|
|
e.preventDefault(); |
|
|
|
|
|
break; |
|
|
case 'r': |
|
|
e.preventDefault(); |
|
|
|
|
|
break; |
|
|
case 'e': |
|
|
e.preventDefault(); |
|
|
|
|
|
break; |
|
|
} |
|
|
} |
|
|
}); |
|
|
} |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=cocovidal/guacolda" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
