Hugging Face's logo

Spaces:
Lukeetah
/
COGOTUD4_ADM
Running

App Files Community
Lukeetah commited on
Commit
dd96b1b
路
verified 路
1 Parent(s): 8157ccc

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +641 -19
index.html CHANGED
@@ -1,19 +1,641 @@
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>La Cogotuda - Panel de Fabricaci贸n</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="preconnect" href="https://fonts.googleapis.com">
9
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;900&display=swap" rel="stylesheet">
11
+ <style>
12
+ body {
13
+ font-family: 'Inter', sans-serif;
14
+ background-color: #FDFBF8;
15
+ color: #1a202c;
16
+ }
17
+ .logo-font {
18
+ font-weight: 900;
19
+ letter-spacing: -0.05em;
20
+ }
21
+ .dashboard-bg {
22
+ background-color: #f0eada;
23
+ }
24
+ .btn-primary {
25
+ background-color: #D95F43;
26
+ color: white;
27
+ transition: background-color 0.3s ease;
28
+ }
29
+ .btn-primary:hover {
30
+ background-color: #b94e36;
31
+ }
32
+ .btn-secondary {
33
+ background-color: #2C4A6E;
34
+ color: white;
35
+ transition: background-color 0.3s ease;
36
+ }
37
+ .btn-secondary:hover {
38
+ background-color: #1f3550;
39
+ }
40
+ .btn-success {
41
+ background-color: #4CAF50;
42
+ color: white;
43
+ }
44
+ .btn-success:hover {
45
+ background-color: #45a049;
46
+ }
47
+ .btn-warning {
48
+ background-color: #FF9800;
49
+ color: white;
50
+ }
51
+ .btn-warning:hover {
52
+ background-color: #e68900;
53
+ }
54
+ .status-pending {
55
+ background-color: #FFF3E0;
56
+ color: #FF9800;
57
+ }
58
+ .status-processing {
59
+ background-color: #E3F2FD;
60
+ color: #2196F3;
61
+ }
62
+ .status-shipped {
63
+ background-color: #E8F5E9;
64
+ color: #4CAF50;
65
+ }
66
+ .status-completed {
67
+ background-color: #F3E5F5;
68
+ color: #9C27B0;
69
+ }
70
+ .progress-bar {
71
+ height: 8px;
72
+ background-color: #e2e8f0;
73
+ border-radius: 4px;
74
+ overflow: hidden;
75
+ }
76
+ .progress-fill {
77
+ height: 100%;
78
+ background-color: #D95F43;
79
+ border-radius: 4px;
80
+ transition: width 0.3s ease;
81
+ }
82
+ .card {
83
+ background: white;
84
+ border-radius: 12px;
85
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
86
+ border: 1px solid #e2e8f0;
87
+ }
88
+ .notification {
89
+ animation: slideIn 0.3s ease-out;
90
+ }
91
+ @keyframes slideIn {
92
+ from {
93
+ transform: translateX(100%);
94
+ opacity: 0;
95
+ }
96
+ to {
97
+ transform: translateX(0);
98
+ opacity: 1;
99
+ }
100
+ }
101
+ </style>
102
+ </head>
103
+ <body>
104
+ <!-- Header -->
105
+ <header class="bg-white/80 backdrop-blur-lg sticky top-0 z-40 border-b border-gray-200">
106
+ <div class="container mx-auto px-6 py-4 flex justify-between items-center">
107
+ <div class="flex items-center space-x-3">
108
+ <img src="https://huggingface.co/spaces/Lukeetah/COGOTUDA/resolve/main/cogotuda.png" alt="Logo La Cogotuda" class="h-10 w-10 object-cover rounded-md shadow-sm">
109
+ <span class="text-2xl logo-font text-gray-800">LA COGOTUDA</span>
110
+ </div>
111
+ <div class="flex items-center space-x-4">
112
+ <span class="text-gray-600">Panel de Fabricaci贸n</span>
113
+ <div class="flex items-center space-x-2">
114
+ <div class="w-3 h-3 bg-green-500 rounded-full"></div>
115
+ <span class="text-sm text-gray-600">En l铆nea</span>
116
+ </div>
117
+ </div>
118
+ </div>
119
+ </header>
120
+
121
+ <main class="py-8">
122
+ <div class="container mx-auto px-6">
123
+ <!-- Dashboard Header -->
124
+ <div class="mb-8">
125
+ <h1 class="text-3xl font-black text-gray-800 mb-2">Panel de Control de Fabricaci贸n</h1>
126
+ <p class="text-gray-600">Gestiona pedidos, producci贸n y env铆os en tiempo real</p>
127
+ </div>
128
+
129
+ <!-- Stats Cards -->
130
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
131
+ <div class="card p-6">
132
+ <div class="flex items-center justify-between">
133
+ <div>
134
+ <p class="text-gray-500 text-sm">Pedidos Pendientes</p>
135
+ <p class="text-3xl font-bold text-gray-800" id="pending-count">12</p>
136
+ </div>
137
+ <div class="bg-orange-100 p-3 rounded-lg">
138
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#D95F43" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>
139
+ </div>
140
+ </div>
141
+ </div>
142
+ <div class="card p-6">
143
+ <div class="flex items-center justify-between">
144
+ <div>
145
+ <p class="text-gray-500 text-sm">En Producci贸n</p>
146
+ <p class="text-3xl font-bold text-gray-800" id="processing-count">8</p>
147
+ </div>
148
+ <div class="bg-blue-100 p-3 rounded-lg">
149
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#2C4A6E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
150
+ </div>
151
+ </div>
152
+ </div>
153
+ <div class="card p-6">
154
+ <div class="flex items-center justify-between">
155
+ <div>
156
+ <p class="text-gray-500 text-sm">Listos para Enviar</p>
157
+ <p class="text-3xl font-bold text-gray-800" id="ready-count">5</p>
158
+ </div>
159
+ <div class="bg-green-100 p-3 rounded-lg">
160
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#4CAF50" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
161
+ </div>
162
+ </div>
163
+ </div>
164
+ <div class="card p-6">
165
+ <div class="flex items-center justify-between">
166
+ <div>
167
+ <p class="text-gray-500 text-sm">Total Hoy</p>
168
+ <p class="text-3xl font-bold text-gray-800" id="total-count">25</p>
169
+ </div>
170
+ <div class="bg-purple-100 p-3 rounded-lg">
171
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#9C27B0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"></path><line x1="3" y1="6" x2="21" y2="6"></line><path d="M16 10a4 4 0 0 1-8 0"></path></svg>
172
+ </div>
173
+ </div>
174
+ </div>
175
+ </div>
176
+
177
+ <!-- Orders Section -->
178
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
179
+ <!-- Pending Orders -->
180
+ <div class="lg:col-span-2">
181
+ <div class="card">
182
+ <div class="p-6 border-b border-gray-200">
183
+ <h2 class="text-xl font-bold text-gray-800">Pedidos Pendientes</h2>
184
+ <p class="text-gray-500 text-sm">Pedidos que requieren atenci贸n inmediata</p>
185
+ </div>
186
+ <div class="p-6">
187
+ <div class="space-y-4" id="pending-orders">
188
+ <!-- Pending orders will be populated here -->
189
+ </div>
190
+ </div>
191
+ </div>
192
+ </div>
193
+
194
+ <!-- Production Queue -->
195
+ <div>
196
+ <div class="card mb-6">
197
+ <div class="p-6 border-b border-gray-200">
198
+ <h2 class="text-xl font-bold text-gray-800">Cola de Producci贸n</h2>
199
+ <p class="text-gray-500 text-sm">Pedidos en proceso de fabricaci贸n</p>
200
+ </div>
201
+ <div class="p-6">
202
+ <div class="space-y-4" id="production-queue">
203
+ <!-- Production queue will be populated here -->
204
+ </div>
205
+ </div>
206
+ </div>
207
+
208
+ <!-- Shipping Queue -->
209
+ <div class="card">
210
+ <div class="p-6 border-b border-gray-200">
211
+ <h2 class="text-xl font-bold text-gray-800">Listos para Enviar</h2>
212
+ <p class="text-gray-500 text-sm">Pedidos completados y preparados</p>
213
+ </div>
214
+ <div class="p-6">
215
+ <div class="space-y-4" id="shipping-queue">
216
+ <!-- Shipping queue will be populated here -->
217
+ </div>
218
+ </div>
219
+ </div>
220
+ </div>
221
+ </div>
222
+ </div>
223
+ </main>
224
+
225
+ <!-- Order Detail Modal -->
226
+ <div id="order-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
227
+ <div class="bg-white rounded-lg shadow-xl w-full max-w-2xl mx-4 max-h-[90vh] overflow-y-auto">
228
+ <div class="p-6 border-b border-gray-200 flex justify-between items-center">
229
+ <h3 class="text-2xl font-bold text-gray-800">Detalles del Pedido</h3>
230
+ <button id="close-modal" class="text-gray-500 hover:text-gray-700">
231
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
232
+ </button>
233
+ </div>
234
+ <div class="p-6" id="order-details-content">
235
+ <!-- Order details will be populated here -->
236
+ </div>
237
+ </div>
238
+ </div>
239
+
240
+ <!-- Notification Container -->
241
+ <div id="notification-container" class="fixed bottom-4 right-4 space-y-2 z-50"></div>
242
+
243
+ <script>
244
+ // Mock data for orders
245
+ const orders = [
246
+ {
247
+ id: "ORD-001",
248
+ customer: "Mar铆a Gonz谩lez",
249
+ email: "maria@example.com",
250
+ date: "2024-01-15",
251
+ items: [
252
+ { name: "Kit 50x70cm", type: "Lino Premium", quantity: 1, price: 4500 }
253
+ ],
254
+ total: 4500,
255
+ status: "pending",
256
+ address: "Av. Corrientes 1234, Buenos Aires",
257
+ phone: "+54 11 1234-5678",
258
+ notes: "Entrega urgente para exposici贸n"
259
+ },
260
+ {
261
+ id: "ORD-002",
262
+ customer: "Juan P茅rez",
263
+ email: "juan@example.com",
264
+ date: "2024-01-15",
265
+ items: [
266
+ { name: "Kit 30x40cm", type: "Algod贸n Universal", quantity: 2, price: 2200 },
267
+ { name: "Kit 80x100cm", type: "Lino Premium", quantity: 1, price: 8900 }
268
+ ],
269
+ total: 13300,
270
+ status: "processing",
271
+ address: "Calle Florida 567, Buenos Aires",
272
+ phone: "+54 11 9876-5432",
273
+ notes: "Incluir tarjeta de regalo"
274
+ },
275
+ {
276
+ id: "ORD-003",
277
+ customer: "Ana Rodr铆guez",
278
+ email: "ana@example.com",
279
+ date: "2024-01-14",
280
+ items: [
281
+ { name: "Kit 50x70cm", type: "Algod贸n Universal", quantity: 1, price: 3000 }
282
+ ],
283
+ total: 3000,
284
+ status: "shipped",
285
+ address: "Av. Santa Fe 890, Buenos Aires",
286
+ phone: "+54 11 5555-4444",
287
+ tracking: "TRK-789456123"
288
+ },
289
+ {
290
+ id: "ORD-004",
291
+ customer: "Carlos L贸pez",
292
+ email: "carlos@example.com",
293
+ date: "2024-01-14",
294
+ items: [
295
+ { name: "Kit 80x100cm", type: "Lino Premium", quantity: 3, price: 26700 }
296
+ ],
297
+ total: 26700,
298
+ status: "completed",
299
+ address: "San Mart铆n 321, Rosario",
300
+ phone: "+54 341 123-4567",
301
+ tracking: "TRK-159753468"
302
+ },
303
+ {
304
+ id: "ORD-005",
305
+ customer: "Laura Mart铆nez",
306
+ email: "laura@example.com",
307
+ date: "2024-01-16",
308
+ items: [
309
+ { name: "Kit 30x40cm", type: "Lino Premium", quantity: 1, price: 1650 }
310
+ ],
311
+ total: 1650,
312
+ status: "pending",
313
+ address: "Belgrano 456, C贸rdoba",
314
+ phone: "+54 351 987-6543",
315
+ notes: "Cliente nuevo, verificar datos"
316
+ }
317
+ ];
318
+
319
+ // DOM Elements
320
+ const pendingOrdersEl = document.getElementById('pending-orders');
321
+ const productionQueueEl = document.getElementById('production-queue');
322
+ const shippingQueueEl = document.getElementById('shipping-queue');
323
+ const orderModal = document.getElementById('order-modal');
324
+ const closeModal = document.getElementById('close-modal');
325
+ const orderDetailsContent = document.getElementById('order-details-content');
326
+ const notificationContainer = document.getElementById('notification-container');
327
+
328
+ // Initialize dashboard
329
+ document.addEventListener('DOMContentLoaded', () => {
330
+ renderOrders();
331
+ updateStats();
332
+ });
333
+
334
+ // Render orders in their respective sections
335
+ function renderOrders() {
336
+ // Clear sections
337
+ pendingOrdersEl.innerHTML = '';
338
+ productionQueueEl.innerHTML = '';
339
+ shippingQueueEl.innerHTML = '';
340
+
341
+ // Filter orders by status
342
+ const pendingOrders = orders.filter(order => order.status === 'pending');
343
+ const processingOrders = orders.filter(order => order.status === 'processing');
344
+ const readyOrders = orders.filter(order => order.status === 'shipped' || order.status === 'completed');
345
+
346
+ // Render pending orders
347
+ if (pendingOrders.length === 0) {
348
+ pendingOrdersEl.innerHTML = '<p class="text-gray-500 text-center py-4">No hay pedidos pendientes</p>';
349
+ } else {
350
+ pendingOrders.forEach(order => {
351
+ pendingOrdersEl.appendChild(createOrderCard(order));
352
+ });
353
+ }
354
+
355
+ // Render production queue
356
+ if (processingOrders.length === 0) {
357
+ productionQueueEl.innerHTML = '<p class="text-gray-500 text-center py-4">No hay pedidos en producci贸n</p>';
358
+ } else {
359
+ processingOrders.forEach(order => {
360
+ productionQueueEl.appendChild(createOrderCard(order));
361
+ });
362
+ }
363
+
364
+ // Render shipping queue
365
+ if (readyOrders.length === 0) {
366
+ shippingQueueEl.innerHTML = '<p class="text-gray-500 text-center py-4">No hay pedidos listos para enviar</p>';
367
+ } else {
368
+ readyOrders.forEach(order => {
369
+ shippingQueueEl.appendChild(createOrderCard(order));
370
+ });
371
+ }
372
+ }
373
+
374
+ // Create order card element
375
+ function createOrderCard(order) {
376
+ const card = document.createElement('div');
377
+ card.className = 'border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow cursor-pointer';
378
+ card.onclick = () => showOrderDetails(order);
379
+
380
+ let statusClass = '';
381
+ let statusText = '';
382
+ switch(order.status) {
383
+ case 'pending':
384
+ statusClass = 'status-pending';
385
+ statusText = 'Pendiente';
386
+ break;
387
+ case 'processing':
388
+ statusClass = 'status-processing';
389
+ statusText = 'En Producci贸n';
390
+ break;
391
+ case 'shipped':
392
+ statusClass = 'status-shipped';
393
+ statusText = 'Enviado';
394
+ break;
395
+ case 'completed':
396
+ statusClass = 'status-completed';
397
+ statusText = 'Completado';
398
+ break;
399
+ }
400
+
401
+ card.innerHTML = `
402
+ <div class="flex justify-between items-start mb-3">
403
+ <div>
404
+ <h4 class="font-bold text-gray-800">${order.id}</h4>
405
+ <p class="text-gray-600 text-sm">${order.customer}</p>
406
+ </div>
407
+ <span class="px-2 py-1 rounded-full text-xs font-medium ${statusClass}">${statusText}</span>
408
+ </div>
409
+ <div class="mb-3">
410
+ <p class="text-gray-800 font-semibold">$${order.total.toLocaleString('es-AR')}</p>
411
+ <p class="text-gray-500 text-sm">${order.date}</p>
412
+ </div>
413
+ <div class="text-sm text-gray-600">
414
+ ${order.items.map(item => `${item.quantity}x ${item.name} (${item.type})`).join('<br>')}
415
+ </div>
416
+ `;
417
+
418
+ return card;
419
+ }
420
+
421
+ // Show order details modal
422
+ function showOrderDetails(order) {
423
+ let statusClass = '';
424
+ let statusText = '';
425
+ switch(order.status) {
426
+ case 'pending':
427
+ statusClass = 'status-pending';
428
+ statusText = 'Pendiente';
429
+ break;
430
+ case 'processing':
431
+ statusClass = 'status-processing';
432
+ statusText = 'En Producci贸n';
433
+ break;
434
+ case 'shipped':
435
+ statusClass = 'status-shipped';
436
+ statusText = 'Enviado';
437
+ break;
438
+ case 'completed':
439
+ statusClass = 'status-completed';
440
+ statusText = 'Completado';
441
+ break;
442
+ }
443
+
444
+ orderDetailsContent.innerHTML = `
445
+ <div class="mb-6">
446
+ <div class="flex justify-between items-start mb-4">
447
+ <div>
448
+ <h3 class="text-xl font-bold text-gray-800">${order.id}</h3>
449
+ <p class="text-gray-600">${order.customer}</p>
450
+ </div>
451
+ <span class="px-3 py-1 rounded-full text-sm font-medium ${statusClass}">${statusText}</span>
452
+ </div>
453
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
454
+ <div>
455
+ <p class="text-gray-500 text-sm">Email</p>
456
+ <p class="text-gray-800">${order.email}</p>
457
+ </div>
458
+ <div>
459
+ <p class="text-gray-500 text-sm">Tel茅fono</p>
460
+ <p class="text-gray-800">${order.phone}</p>
461
+ </div>
462
+ <div>
463
+ <p class="text-gray-500 text-sm">Fecha</p>
464
+ <p class="text-gray-800">${order.date}</p>
465
+ </div>
466
+ <div>
467
+ <p class="text-gray-500 text-sm">Total</p>
468
+ <p class="text-xl font-bold text-gray-800">$${order.total.toLocaleString('es-AR')}</p>
469
+ </div>
470
+ </div>
471
+ </div>
472
+
473
+ <div class="mb-6">
474
+ <h4 class="font-bold text-gray-800 mb-3">Direcci贸n de Env铆o</h4>
475
+ <p class="text-gray-800">${order.address}</p>
476
+ </div>
477
+
478
+ <div class="mb-6">
479
+ <h4 class="font-bold text-gray-800 mb-3">Art铆culos</h4>
480
+ <div class="space-y-3">
481
+ ${order.items.map(item => `
482
+ <div class="flex justify-between items-center p-3 bg-gray-50 rounded-lg">
483
+ <div>
484
+ <p class="font-medium text-gray-800">${item.name}</p>
485
+ <p class="text-gray-600 text-sm">${item.type}</p>
486
+ </div>
487
+ <div class="text-right">
488
+ <p class="font-medium text-gray-800">x${item.quantity}</p>
489
+ <p class="text-gray-600 text-sm">$${item.price.toLocaleString('es-AR')}</p>
490
+ </div>
491
+ </div>
492
+ `).join('')}
493
+ </div>
494
+ </div>
495
+
496
+ ${order.notes ? `
497
+ <div class="mb-6">
498
+ <h4 class="font-bold text-gray-800 mb-3">Notas del Cliente</h4>
499
+ <p class="text-gray-800 bg-yellow-50 p-3 rounded-lg">${order.notes}</p>
500
+ </div>
501
+ ` : ''}
502
+
503
+ ${order.tracking ? `
504
+ <div class="mb-6">
505
+ <h4 class="font-bold text-gray-800 mb-3">N煤mero de Seguimiento</h4>
506
+ <p class="text-gray-800 font-mono bg-blue-50 p-3 rounded-lg">${order.tracking}</p>
507
+ </div>
508
+ ` : ''}
509
+
510
+ <div class="flex flex-wrap gap-3 pt-4 border-t border-gray-200">
511
+ ${order.status === 'pending' ? `
512
+ <button onclick="updateOrderStatus('${order.id}', 'processing')" class="btn-primary px-4 py-2 rounded-lg font-medium">Iniciar Producci贸n</button>
513
+ <button onclick="updateOrderStatus('${order.id}', 'shipped')" class="btn-warning px-4 py-2 rounded-lg font-medium">Marcar como Enviado</button>
514
+ ` : ''}
515
+ ${order.status === 'processing' ? `
516
+ <button onclick="updateOrderStatus('${order.id}', 'shipped')" class="btn-success px-4 py-2 rounded-lg font-medium">Marcar como Enviado</button>
517
+ <button onclick="updateOrderStatus('${order.id}', 'completed')" class="btn-secondary px-4 py-2 rounded-lg font-medium">Completar Pedido</button>
518
+ ` : ''}
519
+ ${order.status === 'shipped' ? `
520
+ <button onclick="updateOrderStatus('${order.id}', 'completed')" class="btn-success px-4 py-2 rounded-lg font-medium">Completar Pedido</button>
521
+ ` : ''}
522
+ <button onclick="deleteOrder('${order.id}')" class="ml-auto text-red-500 hover:text-red-700 px-4 py-2 rounded-lg font-medium">Eliminar Pedido</button>
523
+ </div>
524
+ `;
525
+
526
+ orderModal.classList.remove('hidden');
527
+ }
528
+
529
+ // Close modal
530
+ closeModal.addEventListener('click', () => {
531
+ orderModal.classList.add('hidden');
532
+ });
533
+
534
+ // Close modal when clicking outside
535
+ orderModal.addEventListener('click', (e) => {
536
+ if (e.target === orderModal) {
537
+ orderModal.classList.add('hidden');
538
+ }
539
+ });
540
+
541
+ // Update order status
542
+ function updateOrderStatus(orderId, newStatus) {
543
+ const order = orders.find(o => o.id === orderId);
544
+ if (order) {
545
+ order.status = newStatus;
546
+ renderOrders();
547
+ updateStats();
548
+
549
+ let statusText = '';
550
+ switch(newStatus) {
551
+ case 'processing':
552
+ statusText = 'En Producci贸n';
553
+ break;
554
+ case 'shipped':
555
+ statusText = 'Enviado';
556
+ break;
557
+ case 'completed':
558
+ statusText = 'Completado';
559
+ break;
560
+ }
561
+
562
+ showNotification(`Pedido ${orderId} actualizado a: ${statusText}`, 'success');
563
+ orderModal.classList.add('hidden');
564
+ }
565
+ }
566
+
567
+ // Delete order
568
+ function deleteOrder(orderId) {
569
+ const index = orders.findIndex(o => o.id === orderId);
570
+ if (index !== -1) {
571
+ const order = orders[index];
572
+ orders.splice(index, 1);
573
+ renderOrders();
574
+ updateStats();
575
+ showNotification(`Pedido ${orderId} eliminado`, 'warning');
576
+ orderModal.classList.add('hidden');
577
+ }
578
+ }
579
+
580
+ // Update statistics
581
+ function updateStats() {
582
+ const pendingCount = orders.filter(o => o.status === 'pending').length;
583
+ const processingCount = orders.filter(o => o.status === 'processing').length;
584
+ const readyCount = orders.filter(o => o.status === 'shipped' || o.status === 'completed').length;
585
+ const totalCount = orders.length;
586
+
587
+ document.getElementById('pending-count').textContent = pendingCount;
588
+ document.getElementById('processing-count').textContent = processingCount;
589
+ document.getElementById('ready-count').textContent = readyCount;
590
+ document.getElementById('total-count').textContent = totalCount;
591
+ }
592
+
593
+ // Show notification
594
+ function showNotification(message, type = 'info') {
595
+ const notification = document.createElement('div');
596
+ notification.className = `notification px-4 py-3 rounded-lg shadow-lg max-w-md transform transition-all duration-300`;
597
+
598
+ let bgColor = '';
599
+ switch(type) {
600
+ case 'success':
601
+ bgColor = 'bg-green-500 text-white';
602
+ break;
603
+ case 'warning':
604
+ bgColor = 'bg-yellow-500 text-white';
605
+ break;
606
+ case 'error':
607
+ bgColor = 'bg-red-500 text-white';
608
+ break;
609
+ default:
610
+ bgColor = 'bg-blue-500 text-white';
611
+ }
612
+
613
+ notification.className += ` ${bgColor}`;
614
+ notification.textContent = message;
615
+
616
+ notificationContainer.appendChild(notification);
617
+
618
+ // Remove notification after 3 seconds
619
+ setTimeout(() => {
620
+ notification.style.opacity = '0';
621
+ setTimeout(() => {
622
+ if (notification.parentNode) {
623
+ notification.parentNode.removeChild(notification);
624
+ }
625
+ }, 300);
626
+ }, 3000);
627
+ }
628
+
629
+ // Simulate real-time updates
630
+ setInterval(() => {
631
+ // This would normally be replaced with WebSocket or API calls
632
+ // For demo purposes, we'll just update the timestamp
633
+ const now = new Date();
634
+ if (now.getSeconds() % 30 === 0) {
635
+ // Simulate a new order every 30 seconds
636
+ // In a real app, this would come from a server push
637
+ }
638
+ }, 1000);
639
+ </script>
640
+ </body>
641
+ </html>