Initial commit

frontend/js/kanban.js

@@ -0,0 +1,131 @@
+// Kanban functionality
+
+function createCard(pedido) {
+    const card = document.createElement('div');
+    card.className = 'card';
+    if (pedido.es_urgente) {
+        card.classList.add('urgente');
+    }
+    
+    const fechaCita = pedido.fecha_cita ? new Date(pedido.fecha_cita).toLocaleString('es-ES') : 'Sin fecha';
+    
+    card.innerHTML = `
+        <div class="card-header">
+            <div>
+                <div class="card-title">Pedido ${pedido.numero_pedido}</div>
+                <div class="card-subtitle">${pedido.cliente?.matricula_vehiculo || 'N/A'} - ${pedido.cliente?.nombre || 'N/A'}</div>
+            </div>
+            ${pedido.es_urgente ? '<span class="urgente-badge">URGENTE</span>' : ''}
+        </div>
+        <div class="card-subtitle" style="margin-bottom: 0.5rem;">Cita: ${fechaCita}</div>
+        <div class="referencias-list">
+            ${(pedido.referencias || []).map(ref => {
+                const estadoClass = ref.estado === 'completo' ? 'completo' : 
+                                   ref.estado === 'parcial' ? 'parcial' : 'pendiente';
+                return `
+                    <div class="referencia-item ${estadoClass}">
+                        <div>
+                            <span class="referencia-codigo">${ref.referencia}</span>
+                            <div style="font-size: 0.8rem;">${ref.denominacion}</div>
+                        </div>
+                        <div style="text-align: right;">
+                            <div>${ref.unidades_solicitadas} unidades</div>
+                            <div style="font-size: 0.8rem;">
+                                Stock: ${ref.unidades_en_stock} | Pendiente: ${ref.unidades_pendientes}
+                            </div>
+                        </div>
+                    </div>
+                `;
+            }).join('')}
+        </div>
+    `;
+    
+    return card;
+}
+
+function renderKanban(data) {
+    const columns = {
+        'pendiente_revision': document.getElementById('col-pendiente-revision'),
+        'en_revision': document.getElementById('col-en-revision'),
+        'pendiente_materiales': document.getElementById('col-pendiente-materiales'),
+        'completado': document.getElementById('col-completado'),
+    };
+    
+    // Limpiar columnas
+    Object.values(columns).forEach(col => {
+        if (col) col.innerHTML = '';
+    });
+    
+    // Renderizar tarjetas
+    Object.entries(data).forEach(([estado, pedidos]) => {
+        const column = columns[estado];
+        if (!column) return;
+        
+        if (pedidos.length === 0) {
+            column.innerHTML = '<div class="empty-column">No hay pedidos</div>';
+        } else {
+            pedidos.forEach(pedido => {
+                column.appendChild(createCard(pedido));
+            });
+        }
+    });
+}
+
+async function loadKanban() {
+    try {
+        const data = await apiRequest('/kanban/');
+        renderKanban(data);
+    } catch (error) {
+        console.error('Error al cargar Kanban:', error);
+        alert('Error al cargar los datos: ' + error.message);
+    }
+}
+
+// Filtros
+document.addEventListener('DOMContentLoaded', () => {
+    const searchInput = document.getElementById('search-input');
+    const estadoFilter = document.getElementById('estado-filter');
+    const urgenteOnly = document.getElementById('urgente-only');
+    
+    if (searchInput) {
+        searchInput.addEventListener('input', (e) => {
+            const search = e.target.value.toLowerCase();
+            document.querySelectorAll('.card').forEach(card => {
+                const text = card.textContent.toLowerCase();
+                card.style.display = text.includes(search) ? 'block' : 'none';
+            });
+        });
+    }
+    
+    if (estadoFilter) {
+        estadoFilter.addEventListener('change', async (e) => {
+            const estado = e.target.value;
+            if (!estado) {
+                loadKanban();
+                return;
+            }
+            
+            try {
+                const data = await apiRequest(`/pedidos-cliente/?estado=${estado}`);
+                const pedidos = Array.isArray(data) ? data : (data.results || []);
+                const grouped = {
+                    'pendiente_revision': [],
+                    'en_revision': [],
+                    'pendiente_materiales': [],
+                    'completado': [],
+                };
+                grouped[estado] = pedidos;
+                renderKanban(grouped);
+            } catch (error) {
+                console.error('Error al filtrar:', error);
+            }
+        });
+    }
+    
+    // Auto-refresh cada 30 segundos
+    setInterval(loadKanban, 30000);
+    
+    // Cargar inicial
+    loadKanban();
+});
+