Hugging Face's logo

Spaces:
cocovidal
/
guacolda
Running

App Files Community
cocovidal commited on
Commit
bc65b80
·
verified ·
1 Parent(s): 878f568

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +952 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Guacolda
3
- emoji: 📉
4
- colorFrom: purple
5
- colorTo: purple
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: guacolda
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: gray
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,952 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="es">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Sistema de Forecast Inteligente</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
11
+ <style>
12
+ .sidebar {
13
+ transition: all 0.3s ease;
14
+ }
15
+ .sidebar.collapsed {
16
+ width: 70px;
17
+ }
18
+ .sidebar.collapsed .nav-text {
19
+ display: none;
20
+ }
21
+ .main-content {
22
+ transition: margin-left 0.3s ease;
23
+ }
24
+ .skeleton {
25
+ background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
26
+ background-size: 200% 100%;
27
+ animation: shimmer 1.5s infinite;
28
+ }
29
+ @keyframes shimmer {
30
+ 0% { background-position: 200% 0; }
31
+ 100% { background-position: -200% 0; }
32
+ }
33
+ .chart-tooltip {
34
+ background: rgba(0, 0, 0, 0.8);
35
+ color: white;
36
+ padding: 8px;
37
+ border-radius: 4px;
38
+ font-size: 12px;
39
+ }
40
+ .hover-scale:hover {
41
+ transform: scale(1.05);
42
+ transition: transform 0.3s ease;
43
+ }
44
+ .fade-in {
45
+ animation: fadeIn 0.5s ease-in;
46
+ }
47
+ @keyframes fadeIn {
48
+ from { opacity: 0; }
49
+ to { opacity: 1; }
50
+ }
51
+ .slide-in {
52
+ animation: slideIn 0.3s ease-out;
53
+ }
54
+ @keyframes slideIn {
55
+ from { transform: translateX(100%); }
56
+ to { transform: translateX(0); }
57
+ }
58
+ .confidence-high {
59
+ background-color: rgba(40, 167, 69, 0.1);
60
+ border-left: 4px solid #28a745;
61
+ }
62
+ .confidence-medium {
63
+ background-color: rgba(255, 193, 7, 0.1);
64
+ border-left: 4px solid #ffc107;
65
+ }
66
+ .confidence-low {
67
+ background-color: rgba(220, 53, 69, 0.1);
68
+ border-left: 4px solid #dc3545;
69
+ }
70
+ </style>
71
+ </head>
72
+ <body class="bg-gray-50 font-sans">
73
+ <!-- Loading Screen -->
74
+ <div id="loadingScreen" class="fixed inset-0 bg-white z-50 flex flex-col items-center justify-center">
75
+ <div class="animate-spin rounded-full h-16 w-16 border-t-4 border-b-4 border-blue-500 mb-4"></div>
76
+ <p class="text-gray-700">Cargando sistema de forecast...</p>
77
+ </div>
78
+
79
+ <!-- Main Layout -->
80
+ <div class="flex h-screen overflow-hidden">
81
+ <!-- Sidebar -->
82
+ <div id="sidebar" class="sidebar bg-gray-800 text-white w-64 flex flex-col">
83
+ <!-- Logo and Toggle -->
84
+ <div class="p-4 flex items-center justify-between border-b border-gray-700">
85
+ <div class="flex items-center">
86
+ <i class="fas fa-chart-line text-blue-400 text-2xl mr-3"></i>
87
+ <span class="text-xl font-bold">ForecastPro</span>
88
+ </div>
89
+ <button id="toggleSidebar" class="text-gray-400 hover:text-white">
90
+ <i class="fas fa-bars"></i>
91
+ </button>
92
+ </div>
93
+
94
+ <!-- User Profile -->
95
+ <div class="p-4 border-b border-gray-700 flex items-center">
96
+ <div class="h-10 w-10 rounded-full bg-blue-500 flex items-center justify-center text-white font-bold">
97
+ <span id="userInitials">JD</span>
98
+ </div>
99
+ <div class="ml-3">
100
+ <p class="font-medium" id="username">Juan Director</p>
101
+ <p class="text-xs text-gray-400">Director Comercial</p>
102
+ </div>
103
+ </div>
104
+
105
+ <!-- Main Navigation -->
106
+ <nav class="flex-1 overflow-y-auto">
107
+ <div class="p-2">
108
+ <div class="mb-2">
109
+ <p class="text-xs uppercase text-gray-500 px-4 py-2">Navegación</p>
110
+ </div>
111
+ <ul>
112
+ <li>
113
+ <a href="#" class="flex items-center px-4 py-3 text-white bg-gray-700 rounded mx-2">
114
+ <i class="fas fa-tachometer-alt mr-3"></i>
115
+ <span class="nav-text">Dashboard Ejecutivo</span>
116
+ </a>
117
+ </li>
118
+ <li>
119
+ <a href="#" class="flex items-center px-4 py-3 text-gray-300 hover:text-white hover:bg-gray-700 rounded mx-2">
120
+ <i class="fas fa-boxes mr-3"></i>
121
+ <span class="nav-text">Forecast por Categoría</span>
122
+ </a>
123
+ </li>
124
+ <li>
125
+ <a href="#" class="flex items-center px-4 py-3 text-gray-300 hover:text-white hover:bg-gray-700 rounded mx-2">
126
+ <i class="fas fa-barcode mr-3"></i>
127
+ <span class="nav-text">Forecast por SKU</span>
128
+ </a>
129
+ </li>
130
+ <li>
131
+ <a href="#" class="flex items-center px-4 py-3 text-gray-300 hover:text-white hover:bg-gray-700 rounded mx-2">
132
+ <i class="fas fa-industry mr-3"></i>
133
+ <span class="nav-text">Planificación Producción</span>
134
+ </a>
135
+ </li>
136
+ <li>
137
+ <a href="#" class="flex items-center px-4 py-3 text-gray-300 hover:text-white hover:bg-gray-700 rounded mx-2">
138
+ <i class="fas fa-shopping-cart mr-3"></i>
139
+ <span class="nav-text">Planificación Compras</span>
140
+ </a>
141
+ </li>
142
+ <li>
143
+ <a href="#" class="flex items-center px-4 py-3 text-gray-300 hover:text-white hover:bg-gray-700 rounded mx-2">
144
+ <i class="fas fa-flask mr-3"></i>
145
+ <span class="nav-text">Simulador de Escenarios</span>
146
+ </a>
147
+ </li>
148
+ <li>
149
+ <a href="#" class="flex items-center px-4 py-3 text-gray-300 hover:text-white hover:bg-gray-700 rounded mx-2">
150
+ <i class="fas fa-chart-bar mr-3"></i>
151
+ <span class="nav-text">Performance de Modelos</span>
152
+ </a>
153
+ </li>
154
+ </ul>
155
+ </div>
156
+
157
+ <div class="p-2 mt-4">
158
+ <div class="mb-2">
159
+ <p class="text-xs uppercase text-gray-500 px-4 py-2">Configuración</p>
160
+ </div>
161
+ <ul>
162
+ <li>
163
+ <a href="#" class="flex items-center px-4 py-3 text-gray-300 hover:text-white hover:bg-gray-700 rounded mx-2">
164
+ <i class="fas fa-cog mr-3"></i>
165
+ <span class="nav-text">Configuración</span>
166
+ </a>
167
+ </li>
168
+ <li>
169
+ <a href="#" class="flex items-center px-4 py-3 text-gray-300 hover:text-white hover:bg-gray-700 rounded mx-2">
170
+ <i class="fas fa-file-alt mr-3"></i>
171
+ <span class="nav-text">Reportes</span>
172
+ </a>
173
+ </li>
174
+ </ul>
175
+ </div>
176
+ </nav>
177
+
178
+ <!-- Collapse Button -->
179
+ <div class="p-4 border-t border-gray-700">
180
+ <button id="collapseSidebar" class="w-full flex items-center justify-center text-gray-400 hover:text-white">
181
+ <i class="fas fa-chevron-left mr-2"></i>
182
+ <span class="nav-text">Colapsar</span>
183
+ </button>
184
+ </div>
185
+ </div>
186
+
187
+ <!-- Main Content -->
188
+ <div class="main-content flex-1 flex flex-col overflow-hidden">
189
+ <!-- Top Navigation -->
190
+ <header class="bg-white shadow-sm z-10">
191
+ <div class="flex items-center justify-between px-6 py-3">
192
+ <div class="flex items-center">
193
+ <h1 class="text-xl font-semibold text-gray-800">Dashboard Ejecutivo</h1>
194
+ <div class="ml-4 text-sm breadcrumbs">
195
+ <ul>
196
+ <li>Inicio</li>
197
+ <li>Dashboard</li>
198
+ </ul>
199
+ </div>
200
+ </div>
201
+
202
+ <div class="flex items-center space-x-4">
203
+ <div class="relative">
204
+ <button id="notificationsBtn" class="text-gray-600 hover:text-gray-900 relative">
205
+ <i class="fas fa-bell text-xl"></i>
206
+ <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>
207
+ </button>
208
+ <div id="notificationsDropdown" class="hidden absolute right-0 mt-2 w-80 bg-white rounded-md shadow-lg z-20 py-1">
209
+ <div class="px-4 py-2 border-b border-gray-200">
210
+ <h3 class="font-medium">Notificaciones</h3>
211
+ </div>
212
+ <div class="max-h-96 overflow-y-auto">
213
+ <a href="#" class="block px-4 py-3 hover:bg-gray-100 border-b border-gray-100">
214
+ <div class="flex items-start">
215
+ <div class="flex-shrink-0 text-red-500">
216
+ <i class="fas fa-exclamation-circle"></i>
217
+ </div>
218
+ <div class="ml-3">
219
+ <p class="text-sm font-medium">Stock crítico en SKU-4567</p>
220
+ <p class="text-xs text-gray-500">2 horas atrás</p>
221
+ </div>
222
+ </div>
223
+ </a>
224
+ <a href="#" class="block px-4 py-3 hover:bg-gray-100 border-b border-gray-100">
225
+ <div class="flex items-start">
226
+ <div class="flex-shrink-0 text-yellow-500">
227
+ <i class="fas fa-chart-line"></i>
228
+ </div>
229
+ <div class="ml-3">
230
+ <p class="text-sm font-medium">Modelo Prophet requiere reentrenamiento</p>
231
+ <p class="text-xs text-gray-500">Ayer, 14:30</p>
232
+ </div>
233
+ </div>
234
+ </a>
235
+ <a href="#" class="block px-4 py-3 hover:bg-gray-100">
236
+ <div class="flex items-start">
237
+ <div class="flex-shrink-0 text-blue-500">
238
+ <i class="fas fa-info-circle"></i>
239
+ </div>
240
+ <div class="ml-3">
241
+ <p class="text-sm font-medium">Nuevo reporte de performance disponible</p>
242
+ <p class="text-xs text-gray-500">Lunes, 9:00</p>
243
+ </div>
244
+ </div>
245
+ </a>
246
+ </div>
247
+ <div class="px-4 py-2 border-t border-gray-200 text-center">
248
+ <a href="#" class="text-sm text-blue-600 hover:text-blue-800">Ver todas las notificaciones</a>
249
+ </div>
250
+ </div>
251
+ </div>
252
+
253
+ <div class="relative">
254
+ <button id="userMenuBtn" class="flex items-center text-gray-600 hover:text-gray-900">
255
+ <span class="mr-2 hidden md:inline">Juan Director</span>
256
+ <div class="h-8 w-8 rounded-full bg-blue-500 flex items-center justify-center text-white font-bold">JD</div>
257
+ </button>
258
+ <div id="userMenuDropdown" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg z-20 py-1">
259
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Mi perfil</a>
260
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Configuración</a>
261
+ <div class="border-t border-gray-200"></div>
262
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Cerrar sesión</a>
263
+ </div>
264
+ </div>
265
+ </div>
266
+ </div>
267
+ </header>
268
+
269
+ <!-- Main Content Area -->
270
+ <main class="flex-1 overflow-y-auto p-6 bg-gray-50">
271
+ <!-- Alert Banner -->
272
+ <div class="bg-red-50 border-l-4 border-red-500 p-4 mb-6">
273
+ <div class="flex">
274
+ <div class="flex-shrink-0">
275
+ <i class="fas fa-exclamation-circle text-red-500"></i>
276
+ </div>
277
+ <div class="ml-3">
278
+ <p class="text-sm text-red-700">
279
+ <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.
280
+ <a href="#" class="font-medium underline text-red-700 hover:text-red-600 ml-2">Ver detalles</a>
281
+ </p>
282
+ </div>
283
+ </div>
284
+ </div>
285
+
286
+ <!-- Quick Stats -->
287
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
288
+ <div class="bg-white rounded-lg shadow p-6 hover-scale">
289
+ <div class="flex items-center justify-between">
290
+ <div>
291
+ <p class="text-sm font-medium text-gray-500">Demanda proyectada (7 días)</p>
292
+ <p class="mt-1 text-3xl font-semibold text-gray-900">12,450</p>
293
+ </div>
294
+ <div class="bg-green-100 rounded-full p-3">
295
+ <i class="fas fa-arrow-up text-green-600"></i>
296
+ </div>
297
+ </div>
298
+ <p class="mt-2 text-sm text-gray-500">
299
+ <span class="text-green-600 font-medium">+8.2%</span> vs semana anterior
300
+ </p>
301
+ </div>
302
+
303
+ <div class="bg-white rounded-lg shadow p-6 hover-scale">
304
+ <div class="flex items-center justify-between">
305
+ <div>
306
+ <p class="text-sm font-medium text-gray-500">Precisión del modelo</p>
307
+ <p class="mt-1 text-3xl font-semibold text-gray-900">92.4%</p>
308
+ </div>
309
+ <div class="bg-blue-100 rounded-full p-3">
310
+ <i class="fas fa-brain text-blue-600"></i>
311
+ </div>
312
+ </div>
313
+ <p class="mt-2 text-sm text-gray-500">
314
+ <span class="text-green-600 font-medium">+1.5%</span> vs promedio histórico
315
+ </p>
316
+ </div>
317
+
318
+ <div class="bg-white rounded-lg shadow p-6 hover-scale">
319
+ <div class="flex items-center justify-between">
320
+ <div>
321
+ <p class="text-sm font-medium text-gray-500">Stock crítico</p>
322
+ <p class="mt-1 text-3xl font-semibold text-gray-900">3</p>
323
+ </div>
324
+ <div class="bg-red-100 rounded-full p-3">
325
+ <i class="fas fa-exclamation-triangle text-red-600"></i>
326
+ </div>
327
+ </div>
328
+ <p class="mt-2 text-sm text-gray-500">
329
+ <span class="text-red-600 font-medium">+1</span> vs semana anterior
330
+ </p>
331
+ </div>
332
+
333
+ <div class="bg-white rounded-lg shadow p-6 hover-scale">
334
+ <div class="flex items-center justify-between">
335
+ <div>
336
+ <p class="text-sm font-medium text-gray-500">Margen estimado</p>
337
+ <p class="mt-1 text-3xl font-semibold text-gray-900">34.2%</p>
338
+ </div>
339
+ <div class="bg-yellow-100 rounded-full p-3">
340
+ <i class="fas fa-percent text-yellow-600"></i>
341
+ </div>
342
+ </div>
343
+ <p class="mt-2 text-sm text-gray-500">
344
+ <span class="text-green-600 font-medium">+2.1%</span> vs semana anterior
345
+ </p>
346
+ </div>
347
+ </div>
348
+
349
+ <!-- Main Chart -->
350
+ <div class="bg-white rounded-lg shadow p-6 mb-6">
351
+ <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-4">
352
+ <div>
353
+ <h2 class="text-lg font-semibold text-gray-900">Forecast por categoría (próximas 4 semanas)</h2>
354
+ <p class="text-sm text-gray-500">Actualizado hoy a las 08:45 AM</p>
355
+ </div>
356
+ <div class="mt-2 md:mt-0">
357
+ <div class="flex space-x-2">
358
+ <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">
359
+ <option selected>Todas las categorías</option>
360
+ <option>Bebidas</option>
361
+ <option>Snacks</option>
362
+ <option>Lácteos</option>
363
+ <option>Congelados</option>
364
+ </select>
365
+ <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">
366
+ <option selected>Modelo: Prophet</option>
367
+ <option>XGBoost</option>
368
+ <option>Random Forest</option>
369
+ <option>Ensemble</option>
370
+ </select>
371
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm font-medium">
372
+ <i class="fas fa-download mr-1"></i> Exportar
373
+ </button>
374
+ </div>
375
+ </div>
376
+ </div>
377
+
378
+ <div class="h-96">
379
+ <canvas id="forecastChart"></canvas>
380
+ </div>
381
+
382
+ <div class="mt-4 flex items-center justify-between">
383
+ <div class="flex space-x-4">
384
+ <div class="flex items-center">
385
+ <div class="w-3 h-3 bg-blue-500 rounded-full mr-2"></div>
386
+ <span class="text-sm text-gray-600">Histórico</span>
387
+ </div>
388
+ <div class="flex items-center">
389
+ <div class="w-3 h-3 bg-orange-500 rounded-full mr-2"></div>
390
+ <span class="text-sm text-gray-600">Forecast</span>
391
+ </div>
392
+ <div class="flex items-center">
393
+ <div class="w-3 h-3 bg-orange-200 rounded-full mr-2"></div>
394
+ <span class="text-sm text-gray-600">Banda de confianza</span>
395
+ </div>
396
+ </div>
397
+ <div>
398
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">
399
+ <i class="fas fa-expand mr-1"></i> Pantalla completa
400
+ </button>
401
+ </div>
402
+ </div>
403
+ </div>
404
+
405
+ <!-- Top Insights and Actions -->
406
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
407
+ <!-- Top Insights -->
408
+ <div class="bg-white rounded-lg shadow p-6 lg:col-span-2">
409
+ <h2 class="text-lg font-semibold text-gray-900 mb-4">Top Insights</h2>
410
+
411
+ <div class="space-y-4">
412
+ <div class="p-4 border border-gray-200 rounded-lg">
413
+ <div class="flex items-start">
414
+ <div class="flex-shrink-0 bg-blue-100 p-2 rounded-full">
415
+ <i class="fas fa-chart-line text-blue-600"></i>
416
+ </div>
417
+ <div class="ml-3">
418
+ <h3 class="text-sm font-medium text-gray-900">Pico esperado en Bebidas Energéticas</h3>
419
+ <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>
420
+ <div class="mt-2 flex space-x-3">
421
+ <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">
422
+ <i class="fas fa-eye mr-1"></i> Ver detalles
423
+ </button>
424
+ <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">
425
+ <i class="fas fa-plus-circle mr-1"></i> Programar producción
426
+ </button>
427
+ </div>
428
+ </div>
429
+ </div>
430
+ </div>
431
+
432
+ <div class="p-4 border border-gray-200 rounded-lg">
433
+ <div class="flex items-start">
434
+ <div class="flex-shrink-0 bg-yellow-100 p-2 rounded-full">
435
+ <i class="fas fa-exclamation-triangle text-yellow-600"></i>
436
+ </div>
437
+ <div class="ml-3">
438
+ <h3 class="text-sm font-medium text-gray-900">Tendencia bajista en Snacks Salados</h3>
439
+ <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>
440
+ <div class="mt-2 flex space-x-3">
441
+ <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">
442
+ <i class="fas fa-eye mr-1"></i> Ver detalles
443
+ </button>
444
+ <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">
445
+ <i class="fas fa-tag mr-1"></i> Crear promoción
446
+ </button>
447
+ </div>
448
+ </div>
449
+ </div>
450
+ </div>
451
+
452
+ <div class="p-4 border border-gray-200 rounded-lg">
453
+ <div class="flex items-start">
454
+ <div class="flex-shrink-0 bg-green-100 p-2 rounded-full">
455
+ <i class="fas fa-lightbulb text-green-600"></i>
456
+ </div>
457
+ <div class="ml-3">
458
+ <h3 class="text-sm font-medium text-gray-900">Oportunidad promocional en Lácteos</h3>
459
+ <p class="mt-1 text-sm text-gray-600">Modelo sugiere alta sensibilidad a promociones para yogures naturales (+35% demanda con 10% descuento).</p>
460
+ <div class="mt-2 flex space-x-3">
461
+ <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">
462
+ <i class="fas fa-eye mr-1"></i> Ver detalles
463
+ </button>
464
+ <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">
465
+ <i class="fas fa-bullhorn mr-1"></i> Planificar campaña
466
+ </button>
467
+ </div>
468
+ </div>
469
+ </div>
470
+ </div>
471
+ </div>
472
+ </div>
473
+
474
+ <!-- Quick Actions -->
475
+ <div class="bg-white rounded-lg shadow p-6">
476
+ <h2 class="text-lg font-semibold text-gray-900 mb-4">Acciones rápidas</h2>
477
+
478
+ <div class="space-y-3">
479
+ <button class="w-full flex items-center justify-between p-4 bg-blue-50 hover:bg-blue-100 rounded-lg transition-colors">
480
+ <div class="flex items-center">
481
+ <div class="bg-blue-100 p-2 rounded-full mr-3">
482
+ <i class="fas fa-play-circle text-blue-600"></i>
483
+ </div>
484
+ <span class="font-medium text-gray-800">Ejecutar simulador de escenarios</span>
485
+ </div>
486
+ <i class="fas fa-chevron-right text-gray-400"></i>
487
+ </button>
488
+
489
+ <button class="w-full flex items-center justify-between p-4 bg-purple-50 hover:bg-purple-100 rounded-lg transition-colors">
490
+ <div class="flex items-center">
491
+ <div class="bg-purple-100 p-2 rounded-full mr-3">
492
+ <i class="fas fa-file-export text-purple-600"></i>
493
+ </div>
494
+ <span class="font-medium text-gray-800">Generar reporte ejecutivo</span>
495
+ </div>
496
+ <i class="fas fa-chevron-right text-gray-400"></i>
497
+ </button>
498
+
499
+ <button class="w-full flex items-center justify-between p-4 bg-green-50 hover:bg-green-100 rounded-lg transition-colors">
500
+ <div class="flex items-center">
501
+ <div class="bg-green-100 p-2 rounded-full mr-3">
502
+ <i class="fas fa-chart-pie text-green-600"></i>
503
+ </div>
504
+ <span class="font-medium text-gray-800">Analizar performance de modelos</span>
505
+ </div>
506
+ <i class="fas fa-chevron-right text-gray-400"></i>
507
+ </button>
508
+
509
+ <button class="w-full flex items-center justify-between p-4 bg-yellow-50 hover:bg-yellow-100 rounded-lg transition-colors">
510
+ <div class="flex items-center">
511
+ <div class="bg-yellow-100 p-2 rounded-full mr-3">
512
+ <i class="fas fa-bell text-yellow-600"></i>
513
+ </div>
514
+ <span class="font-medium text-gray-800">Configurar alertas personalizadas</span>
515
+ </div>
516
+ <i class="fas fa-chevron-right text-gray-400"></i>
517
+ </button>
518
+
519
+ <button class="w-full flex items-center justify-between p-4 bg-red-50 hover:bg-red-100 rounded-lg transition-colors">
520
+ <div class="flex items-center">
521
+ <div class="bg-red-100 p-2 rounded-full mr-3">
522
+ <i class="fas fa-exclamation-triangle text-red-600"></i>
523
+ </div>
524
+ <span class="font-medium text-gray-800">Revisar alertas críticas</span>
525
+ </div>
526
+ <i class="fas fa-chevron-right text-gray-400"></i>
527
+ </button>
528
+ </div>
529
+ </div>
530
+ </div>
531
+
532
+ <!-- Forecast Table -->
533
+ <div class="bg-white rounded-lg shadow overflow-hidden mb-6">
534
+ <div class="px-6 py-4 border-b border-gray-200">
535
+ <h2 class="text-lg font-semibold text-gray-900">Forecast próximos 7 días</h2>
536
+ </div>
537
+ <div class="overflow-x-auto">
538
+ <table class="min-w-full divide-y divide-gray-200">
539
+ <thead class="bg-gray-50">
540
+ <tr>
541
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Fecha</th>
542
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Forecast</th>
543
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Rango min-max</th>
544
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Comparación</th>
545
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Acciones</th>
546
+ </tr>
547
+ </thead>
548
+ <tbody class="bg-white divide-y divide-gray-200">
549
+ <tr class="hover:bg-gray-50">
550
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Lun, 12 Jun</td>
551
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1,845</td>
552
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1,720 - 1,950</td>
553
+ <td class="px-6 py-4 whitespace-nowrap">
554
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">+5.2%</span>
555
+ </td>
556
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
557
+ <button class="text-blue-600 hover:text-blue-900 mr-3">Detalles</button>
558
+ <button class="text-green-600 hover:text-green-900">Acción</button>
559
+ </td>
560
+ </tr>
561
+ <tr class="hover:bg-gray-50">
562
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Mar, 13 Jun</td>
563
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1,920</td>
564
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1,810 - 2,030</td>
565
+ <td class="px-6 py-4 whitespace-nowrap">
566
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">+7.8%</span>
567
+ </td>
568
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
569
+ <button class="text-blue-600 hover:text-blue-900 mr-3">Detalles</button>
570
+ <button class="text-green-600 hover:text-green-900">Acción</button>
571
+ </td>
572
+ </tr>
573
+ <tr class="hover:bg-gray-50">
574
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Mié, 14 Jun</td>
575
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2,150</td>
576
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2,020 - 2,280</td>
577
+ <td class="px-6 py-4 whitespace-nowrap">
578
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">+10.3%</span>
579
+ </td>
580
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
581
+ <button class="text-blue-600 hover:text-blue-900 mr-3">Detalles</button>
582
+ <button class="text-green-600 hover:text-green-900">Acción</button>
583
+ </td>
584
+ </tr>
585
+ <tr class="hover:bg-gray-50">
586
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Jue, 15 Jun</td>
587
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2,450</td>
588
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2,300 - 2,600</td>
589
+ <td class="px-6 py-4 whitespace-nowrap">
590
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">+15.7%</span>
591
+ </td>
592
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
593
+ <button class="text-blue-600 hover:text-blue-900 mr-3">Detalles</button>
594
+ <button class="text-green-600 hover:text-green-900">Acción</button>
595
+ </td>
596
+ </tr>
597
+ <tr class="hover:bg-gray-50">
598
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Vie, 16 Jun</td>
599
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2,120</td>
600
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1,980 - 2,260</td>
601
+ <td class="px-6 py-4 whitespace-nowrap">
602
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">+8.5%</span>
603
+ </td>
604
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
605
+ <button class="text-blue-600 hover:text-blue-900 mr-3">Detalles</button>
606
+ <button class="text-green-600 hover:text-green-900">Acción</button>
607
+ </td>
608
+ </tr>
609
+ </tbody>
610
+ </table>
611
+ </div>
612
+ <div class="px-6 py-4 border-t border-gray-200">
613
+ <button class="text-blue-600 hover:text-blue-900 text-sm font-medium">
614
+ <i class="fas fa-plus mr-1"></i> Ver más días
615
+ </button>
616
+ </div>
617
+ </div>
618
+
619
+ <!-- Model Performance -->
620
+ <div class="bg-white rounded-lg shadow p-6">
621
+ <h2 class="text-lg font-semibold text-gray-900 mb-4">Performance de modelos</h2>
622
+
623
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
624
+ <div class="bg-gray-50 p-4 rounded-lg">
625
+ <div class="flex items-center justify-between">
626
+ <div>
627
+ <p class="text-sm font-medium text-gray-500">MAPE global</p>
628
+ <p class="mt-1 text-2xl font-semibold text-green-600">7.2%</p>
629
+ </div>
630
+ <div class="bg-green-100 rounded-full p-3">
631
+ <i class="fas fa-check-circle text-green-600"></i>
632
+ </div>
633
+ </div>
634
+ <p class="mt-2 text-xs text-gray-500">
635
+ <span class="font-medium">Excelente</span> (menor al 10%)
636
+ </p>
637
+ </div>
638
+
639
+ <div class="bg-gray-50 p-4 rounded-lg">
640
+ <div class="flex items-center justify-between">
641
+ <div>
642
+ <p class="text-sm font-medium text-gray-500">WAPE global</p>
643
+ <p class="mt-1 text-2xl font-semibold text-yellow-600">9.8%</p>
644
+ </div>
645
+ <div class="bg-yellow-100 rounded-full p-3">
646
+ <i class="fas fa-exclamation-circle text-yellow-600"></i>
647
+ </div>
648
+ </div>
649
+ <p class="mt-2 text-xs text-gray-500">
650
+ <span class="font-medium">Bueno</span> (cerca del límite del 10%)
651
+ </p>
652
+ </div>
653
+
654
+ <div class="bg-gray-50 p-4 rounded-lg">
655
+ <div class="flex items-center justify-between">
656
+ <div>
657
+ <p class="text-sm font-medium text-gray-500">Uptime del sistema</p>
658
+ <p class="mt-1 text-2xl font-semibold text-green-600">99.7%</p>
659
+ </div>
660
+ <div class="bg-green-100 rounded-full p-3">
661
+ <i class="fas fa-server text-green-600"></i>
662
+ </div>
663
+ </div>
664
+ <p class="mt-2 text-xs text-gray-500">
665
+ <span class="font-medium">Excelente</span> (en los últimos 30 días)
666
+ </p>
667
+ </div>
668
+ </div>
669
+
670
+ <div class="h-64">
671
+ <canvas id="modelPerformanceChart"></canvas>
672
+ </div>
673
+ </div>
674
+ </main>
675
+ </div>
676
+ </div>
677
+
678
+ <!-- Mobile Navigation -->
679
+ <div class="md:hidden fixed bottom-0 left-0 right-0 bg-white shadow-lg z-30">
680
+ <div class="flex justify-around">
681
+ <a href="#" class="flex flex-col items-center justify-center p-3 text-blue-600">
682
+ <i class="fas fa-tachometer-alt text-xl"></i>
683
+ <span class="text-xs mt-1">Dashboard</span>
684
+ </a>
685
+ <a href="#" class="flex flex-col items-center justify-center p-3 text-gray-500">
686
+ <i class="fas fa-bell text-xl"></i>
687
+ <span class="text-xs mt-1">Alertas</span>
688
+ </a>
689
+ <a href="#" class="flex flex-col items-center justify-center p-3 text-gray-500">
690
+ <i class="fas fa-chart-line text-xl"></i>
691
+ <span class="text-xs mt-1">Forecast</span>
692
+ </a>
693
+ <a href="#" class="flex flex-col items-center justify-center p-3 text-gray-500">
694
+ <i class="fas fa-cog text-xl"></i>
695
+ <span class="text-xs mt-1">Config</span>
696
+ </a>
697
+ </div>
698
+ </div>
699
+
700
+ <script>
701
+ // Simulate loading
702
+ setTimeout(() => {
703
+ document.getElementById('loadingScreen').style.display = 'none';
704
+
705
+ // Initialize charts after loading
706
+ initCharts();
707
+ setupEventListeners();
708
+ }, 1500);
709
+
710
+ function initCharts() {
711
+ // Main Forecast Chart
712
+ const forecastCtx = document.getElementById('forecastChart').getContext('2d');
713
+ const forecastChart = new Chart(forecastCtx, {
714
+ type: 'line',
715
+ data: {
716
+ 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'],
717
+ datasets: [
718
+ {
719
+ label: 'Histórico',
720
+ 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],
721
+ borderColor: '#3b82f6',
722
+ backgroundColor: 'transparent',
723
+ borderWidth: 2,
724
+ pointRadius: 0,
725
+ tension: 0.1
726
+ },
727
+ {
728
+ label: 'Forecast',
729
+ 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],
730
+ borderColor: '#f97316',
731
+ backgroundColor: 'transparent',
732
+ borderWidth: 2,
733
+ borderDash: [5, 5],
734
+ pointRadius: 0,
735
+ tension: 0.1
736
+ },
737
+ {
738
+ label: 'Banda de confianza',
739
+ 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],
740
+ borderColor: 'transparent',
741
+ backgroundColor: 'rgba(249, 115, 22, 0.1)',
742
+ borderWidth: 0,
743
+ pointRadius: 0,
744
+ tension: 0.1,
745
+ fill: '1'
746
+ },
747
+ {
748
+ label: 'Banda de confianza',
749
+ 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],
750
+ borderColor: 'transparent',
751
+ backgroundColor: 'rgba(249, 115, 22, 0.1)',
752
+ borderWidth: 0,
753
+ pointRadius: 0,
754
+ tension: 0.1,
755
+ fill: '1'
756
+ }
757
+ ]
758
+ },
759
+ options: {
760
+ responsive: true,
761
+ maintainAspectRatio: false,
762
+ plugins: {
763
+ legend: {
764
+ display: false
765
+ },
766
+ tooltip: {
767
+ mode: 'index',
768
+ intersect: false,
769
+ backgroundColor: 'rgba(0, 0, 0, 0.8)',
770
+ titleFont: {
771
+ size: 14,
772
+ weight: 'bold'
773
+ },
774
+ bodyFont: {
775
+ size: 12
776
+ },
777
+ callbacks: {
778
+ label: function(context) {
779
+ let label = context.dataset.label || '';
780
+ if (label) {
781
+ label += ': ';
782
+ }
783
+ if (context.parsed.y !== null) {
784
+ label += context.parsed.y.toLocaleString();
785
+ }
786
+ return label;
787
+ }
788
+ }
789
+ }
790
+ },
791
+ scales: {
792
+ x: {
793
+ grid: {
794
+ display: false
795
+ }
796
+ },
797
+ y: {
798
+ beginAtZero: false,
799
+ grid: {
800
+ color: 'rgba(0, 0, 0, 0.05)'
801
+ },
802
+ ticks: {
803
+ callback: function(value) {
804
+ return value.toLocaleString();
805
+ }
806
+ }
807
+ }
808
+ },
809
+ interaction: {
810
+ mode: 'nearest',
811
+ axis: 'x',
812
+ intersect: false
813
+ }
814
+ }
815
+ });
816
+
817
+ // Model Performance Chart
818
+ const modelCtx = document.getElementById('modelPerformanceChart').getContext('2d');
819
+ const modelChart = new Chart(modelCtx, {
820
+ type: 'bar',
821
+ data: {
822
+ labels: ['Prophet', 'XGBoost', 'Random Forest', 'Neural Net', 'Ensemble'],
823
+ datasets: [
824
+ {
825
+ label: 'MAPE',
826
+ data: [6.8, 7.5, 8.2, 9.1, 5.9],
827
+ backgroundColor: '#3b82f6',
828
+ borderRadius: 4
829
+ },
830
+ {
831
+ label: 'Tiempo (ms)',
832
+ data: [120, 85, 95, 210, 150],
833
+ backgroundColor: '#10b981',
834
+ borderRadius: 4,
835
+ hidden: true
836
+ }
837
+ ]
838
+ },
839
+ options: {
840
+ responsive: true,
841
+ maintainAspectRatio: false,
842
+ plugins: {
843
+ legend: {
844
+ position: 'top',
845
+ },
846
+ tooltip: {
847
+ callbacks: {
848
+ label: function(context) {
849
+ let label = context.dataset.label || '';
850
+ if (label) {
851
+ label += ': ';
852
+ }
853
+ if (context.parsed.y !== null) {
854
+ if (context.dataset.label === 'MAPE') {
855
+ label += context.parsed.y + '%';
856
+ } else {
857
+ label += context.parsed.y + 'ms';
858
+ }
859
+ }
860
+ return label;
861
+ }
862
+ }
863
+ }
864
+ },
865
+ scales: {
866
+ x: {
867
+ grid: {
868
+ display: false
869
+ }
870
+ },
871
+ y: {
872
+ beginAtZero: true,
873
+ grid: {
874
+ color: 'rgba(0, 0, 0, 0.05)'
875
+ },
876
+ ticks: {
877
+ callback: function(value) {
878
+ return value + (this.scale.id === 'y' ? '%' : '');
879
+ }
880
+ }
881
+ }
882
+ }
883
+ }
884
+ });
885
+ }
886
+
887
+ function setupEventListeners() {
888
+ // Toggle sidebar
889
+ document.getElementById('toggleSidebar').addEventListener('click', function() {
890
+ document.getElementById('sidebar').classList.toggle('collapsed');
891
+ document.querySelector('.main-content').classList.toggle('md:ml-64');
892
+ document.querySelector('.main-content').classList.toggle('md:ml-20');
893
+ });
894
+
895
+ // Collapse sidebar
896
+ document.getElementById('collapseSidebar').addEventListener('click', function() {
897
+ document.getElementById('sidebar').classList.add('collapsed');
898
+ document.querySelector('.main-content').classList.remove('md:ml-64');
899
+ document.querySelector('.main-content').classList.add('md:ml-20');
900
+ });
901
+
902
+ // Notifications dropdown
903
+ document.getElementById('notificationsBtn').addEventListener('click', function(e) {
904
+ e.stopPropagation();
905
+ document.getElementById('notificationsDropdown').classList.toggle('hidden');
906
+ document.getElementById('userMenuDropdown').classList.add('hidden');
907
+ });
908
+
909
+ // User menu dropdown
910
+ document.getElementById('userMenuBtn').addEventListener('click', function(e) {
911
+ e.stopPropagation();
912
+ document.getElementById('userMenuDropdown').classList.toggle('hidden');
913
+ document.getElementById('notificationsDropdown').classList.add('hidden');
914
+ });
915
+
916
+ // Close dropdowns when clicking outside
917
+ document.addEventListener('click', function() {
918
+ document.getElementById('notificationsDropdown').classList.add('hidden');
919
+ document.getElementById('userMenuDropdown').classList.add('hidden');
920
+ });
921
+
922
+ // Keyboard shortcuts
923
+ document.addEventListener('keydown', function(e) {
924
+ if (e.ctrlKey) {
925
+ switch (e.key) {
926
+ case 'd':
927
+ e.preventDefault();
928
+ window.location.href = '#';
929
+ break;
930
+ case 'f':
931
+ e.preventDefault();
932
+ // Focus search
933
+ break;
934
+ case 's':
935
+ e.preventDefault();
936
+ // Open simulator
937
+ break;
938
+ case 'r':
939
+ e.preventDefault();
940
+ // Refresh data
941
+ break;
942
+ case 'e':
943
+ e.preventDefault();
944
+ // Export
945
+ break;
946
+ }
947
+ }
948
+ });
949
+ }
950
+ </script>
951
+ <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>
952
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ ARQUITECTURA GENERAL DEL SISTEMA El sistema debe tener una arquitectura modular con estos componentes core: Motor de predicción con múltiples modelos ML (Prophet, XGBoost, Random Forest, redes neuronales) ETL automatizado que ingeste y limpie datos en tiempo real API de servicios para consultas y actualizaciones Base de datos robusta para históricos, predicciones y metadatos Dashboard web como interfaz principal Sistema de alertas inteligentes con notificaciones automáticas Módulo de simulación para escenarios "what-if" EXPERIENCIA DE USUARIO (UX) Personas y sus necesidades específicas: Director Comercial: Necesita vista estratégica, tendencias y oportunidades comerciales. Su flujo típico sería: Dashboard ejecutivo → Análisis de categorías → Simulación de promociones. Lo usaría diariamente para overview y semanalmente para análisis profundo. Jefe de Producción: Requiere planificación semanal/mensual, capacidad y recursos. Su flujo: Forecast por SKU → Planificación de producción → Alertas de capacidad. Uso diario para planificación y continuo para alertas. Comprador de Insumos: Necesita pedidos precisos, timing y gestión de proveedores. Su flujo: Forecast de insumos → Planificación de compras → Seguimiento de entregas. Revisión diaria, planificación semanal. Analista de BI: Requiere configuración de modelos, análisis de performance y troubleshooting. Su flujo: Monitoreo de modelos → Ajuste de parámetros → Validación de resultados. Uso continuo. Principios de diseño UX fundamentales: Claridad sobre complejidad: La información crítica debe ser visible inmediatamente, con drill-down progresivo (overview → detalles → acciones), jerarquía visual clara con colores y tipografías consistentes. Contexto siempre presente: Breadcrumbs en todas las vistas, timestamps y fuente de datos visible, nivel de confianza del forecast siempre mostrado. Orientado a la acción: Cada insight debe llevar a una acción específica, con botones de acción contextuales y workflows guiados para tareas complejas. DISEÑO DE INTERFAZ DE USUARIO (UI) Navegación principal: Debe tener una estructura clara: Dashboard Ejecutivo como home, Forecast por Categoría, Forecast por SKU, Planificación Producción, Planificación Compras, Simulador de Escenarios, Performance de Modelos, Configuración y Reportes. Dashboard Ejecutivo (pantalla principal): El header debe incluir logo, usuario logueado, notificaciones y configuración. La sección de alertas críticas debe estar prominente, mostrando stock crítico, promociones sugeridas, etc., con opción "Ver Todo". El resumen ejecutivo para próximos 7 días debe mostrar: demanda proyectada con variación porcentual, precisión del modelo con tendencia, stock crítico con indicador visual, margen estimado vs actual con código de colores. Debe incluir un gráfico interactivo de forecast por categoría para las próximas 4 semanas, con zoom y tooltips inteligentes. La sección "Top Insights" debe mostrar hallazgos clave como picos esperados, tendencias bajistas, oportunidades promocionales. Vista de Forecast por Categoría: Cada categoría debe tener su propia vista con nivel de confianza y timestamp de última actualización claramente visibles. Los filtros deben permitir seleccionar período, canal, granularidad temporal, con opciones para exportar y simular. El gráfico principal debe mostrar histórico en línea sólida y forecast en línea punteada, con bandas de confianza en área sombreada, eventos especiales marcados (promociones, feriados), controles de zoom, pan y tooltips inteligentes. La tabla detalle debe mostrar los próximos 7 días con fecha, forecast, rango min-max, comparación vs semana anterior, y botones de acción directa. Las acciones recomendadas deben ser específicas y ejecutables: programar producción, revisar stock, contactar proveedor. Vista de Forecast por SKU: Debe tener un diseño master-detail con búsqueda por nombre o código SKU, filtros avanzados. El panel izquierdo debe listar SKUs con código de colores por nivel de confianza (verde >90%, amarillo 70-90%, rojo <70%). El panel derecho debe mostrar detalle del SKU seleccionado: mini-gráfico de 30 días, tendencia semanal, forecast próxima semana, precisión histórica, próxima producción programada, stock actual con días de cobertura. Planificación de Producción: Debe usar una vista calendario estilo Gantt con vista semanal/mensual configurable. El calendario visual debe mostrar cada línea de producción con productos programados, cantidades, estado de capacidad (OK verde, ajustado amarillo, crítico rojo). Debe incluir un indicador de utilización de capacidad por línea y total. La sección de alertas debe mostrar conflictos: sobrecarga de líneas, falta de insumos, personal insuficiente. Las acciones sugeridas deben ser específicas: redistribuir carga, pedidos urgentes, programar horas extra. Simulador de Escenarios: La configuración del escenario debe permitir seleccionar tipo de cambio (promoción, feriado, competencia, nuevo canal, estacional, personalizado). Debe permitir seleccionar productos afectados con búsqueda, configurar fecha inicio, duración, impacto esperado con slider visual. Los resultados deben mostrar gráfico comparativo baseline vs escenario, resumen ejecutivo con incremento total de demanda, productos más afectados, días pico, insumos adicionales necesarios. Debe identificar riesgos: posibles agotamientos, capacidad al límite, tiempos de entrega críticos. Performance de Modelos: Las métricas generales deben mostrar MAPE global, WAPE global, RMSE global, uptime del sistema, cada una con código de colores (excelente verde, bueno amarillo, malo rojo). La tabla de performance por modelo debe incluir nombre del modelo, MAPE, tiempo de procesamiento, última actualización, status actual. Debe mostrar análisis de errores con gráficos de residuales por tiempo y distribución de errores. Las acciones de mantenimiento deben ser específicas: re-entrenar modelos, optimizar hiperparámetros, revisar features. COMPONENTES ESPECIALIZADOS Sistema de Alertas Inteligentes: El centro de notificaciones debe categorizar alertas: críticas (rojas), importantes (amarillas), informativas (azules). Cada alerta debe mostrar descripción clara, timestamp, botones de acción directa (producir urgente, ver detalles, re-entrenar, usar backup). Centro de Reportes: Debe incluir reportes rápidos pre-configurados: forecast semanal, performance mensual, precisión por SKU, alertas históricas, impacto financiero, plan producción. El generador de reportes personalizados debe permitir seleccionar datos (forecast, histórico, simulaciones), período, productos, granularidad, formato (Excel, PDF, CSV, PowerPoint), método de envío (email, SharePoint, Drive). Debe permitir programar reportes automáticos: resumen semanal a gerencia, plan producción a jefes de línea, performance mensual a BI. DISEÑO RESPONSIVE Y MOBILE Vista Mobile: El dashboard móvil debe priorizar información crítica: alertas en la parte superior, resumen del día con métricas clave, mini-gráfico de tendencias, botones de acciones principales. La navegación debe usar menú hamburguesa con estructura clara y acceso rápido a alertas y usuario. MICROINTERACCIONES Y ANIMACIONES Feedback Visual: Los estados de carga deben usar skeleton screens con shimmer effect para inicial, indicador sutil para actualización, spinner contextual para procesamiento, toast notifications para errores. Las transiciones deben ser suaves: slide entre pantallas (300ms), zoom in para drill-down, fade in/out para datos nuevos, hover effects con scale 1.05x. Interacciones Inteligentes: Los tooltips contextuales deben mostrar información adicional al hacer hover: detalles de precisión, promedio del mes, modelo principal utilizado. Debe incluir shortcuts de teclado: Ctrl+D dashboard, Ctrl+F buscar, Ctrl+S simulador, Ctrl+R actualizar, Ctrl+E exportar, F11 modo presentación. CONFIGURACIÓN Y PERSONALIZACIÓN Panel de Preferencias: Debe permitir personalizar dashboard: widgets favoritos, período default, frecuencia de actualización. La configuración de alertas debe permitir definir umbrales críticos, métodos de notificación (email, SMS, push), horarios de notificación. Los temas visuales deben incluir modo claro/oscuro, high contrast para accesibilidad. Debe permitir configurar idioma y zona horaria. CONSIDERACIONES TÉCNICAS DE UX/UI Performance: La carga inicial debe ser menor a 3 segundos, actualización de datos en menos de 1 segundo, gráficos interactivos fluidos a 60fps. Accesibilidad: Debe cumplir estándares WCAG 2.1: contraste mínimo 4.5:1, navegación por teclado completa, textos alternativos para gráficos, soporte para lectores de pantalla. Consistencia: Debe usar sistema de design tokens: colores corporativos, tipografía consistente (máximo 3 familias), espaciado modular (8px grid), iconografía coherente. Estados del Sistema: Debe manejar claramente: datos cargando, sin datos disponibles, errores de conexión, mantenimiento programado, sesión expirada. Este diseño asegura que cada usuario tenga la información correcta, en el momento correcto, con la posibilidad de actuar inmediatamente, manteniendo la complejidad técnica oculta pero accesible cuando se necesite.