Hugging Face's logo

Spaces:
cocovidal
/
guacolda
Running

App Files Community
guacolda / index.html
cocovidal's picture
cocovidal
Add 3 files
bc65b80 verified
raw
history blame contribute delete
55.5 kB
 <!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">
<!-- Loading Screen -->
<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>
<!-- Main Layout -->
<div class="flex h-screen overflow-hidden">
<!-- Sidebar -->
<div id="sidebar" class="sidebar bg-gray-800 text-white w-64 flex flex-col">
<!-- Logo and Toggle -->
<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>
<!-- User Profile -->
<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>
<!-- Main Navigation -->
<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>
<!-- Collapse Button -->
<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>
<!-- Main Content -->
<div class="main-content flex-1 flex flex-col overflow-hidden">
<!-- Top Navigation -->
<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 Content Area -->
<main class="flex-1 overflow-y-auto p-6 bg-gray-50">
<!-- Alert Banner -->
<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>
<!-- Quick Stats -->
<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>
<!-- Main Chart -->
<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>
<!-- Top Insights and Actions -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
<!-- Top Insights -->
<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>
<!-- Quick Actions -->
<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>
<!-- Forecast Table -->
<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>
<!-- Model Performance -->
<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>
<!-- Mobile Navigation -->
<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>
// Simulate loading
setTimeout(() => {
document.getElementById('loadingScreen').style.display = 'none';
// Initialize charts after loading
initCharts();
setupEventListeners();
}, 1500);
function initCharts() {
// Main Forecast Chart
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
}
}
});
// Model Performance Chart
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() {
// Toggle sidebar
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');
});
// Collapse sidebar
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');
});
// Notifications dropdown
document.getElementById('notificationsBtn').addEventListener('click', function(e) {
e.stopPropagation();
document.getElementById('notificationsDropdown').classList.toggle('hidden');
document.getElementById('userMenuDropdown').classList.add('hidden');
});
// User menu dropdown
document.getElementById('userMenuBtn').addEventListener('click', function(e) {
e.stopPropagation();
document.getElementById('userMenuDropdown').classList.toggle('hidden');
document.getElementById('notificationsDropdown').classList.add('hidden');
});
// Close dropdowns when clicking outside
document.addEventListener('click', function() {
document.getElementById('notificationsDropdown').classList.add('hidden');
document.getElementById('userMenuDropdown').classList.add('hidden');
});
// Keyboard shortcuts
document.addEventListener('keydown', function(e) {
if (e.ctrlKey) {
switch (e.key) {
case 'd':
e.preventDefault();
window.location.href = '#';
break;
case 'f':
e.preventDefault();
// Focus search
break;
case 's':
e.preventDefault();
// Open simulator
break;
case 'r':
e.preventDefault();
// Refresh data
break;
case 'e':
e.preventDefault();
// Export
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>