Initial commit

frontend/js/admin.js

@@ -0,0 +1,163 @@
+// Admin panel functionality
+
+function showTab(tabName) {
+    document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
+    document.querySelectorAll('.tab-content').forEach(t => t.classList.remove('active'));
+    
+    event.target.classList.add('active');
+    document.getElementById(`tab-${tabName}`).classList.add('active');
+    
+    if (tabName === 'albaranes') {
+        loadAlbaranes();
+    } else if (tabName === 'clasificacion') {
+        loadClasificacion();
+    }
+}
+
+async function loadAlbaranes() {
+    try {
+        const data = await apiRequest('/albaranes/');
+        const albaranes = Array.isArray(data) ? data : (data.results || []);
+        renderAlbaranes(albaranes);
+    } catch (error) {
+        console.error('Error al cargar albaranes:', error);
+    }
+}
+
+async function loadClasificacion() {
+    try {
+        const data = await apiRequest('/albaranes/?estado_procesado=clasificacion');
+        const albaranes = Array.isArray(data) ? data : (data.results || []);
+        renderClasificacion(albaranes);
+    } catch (error) {
+        console.error('Error al cargar clasificación:', error);
+    }
+}
+
+function renderAlbaranes(albaranes) {
+    const container = document.getElementById('albaranes-container');
+    if (!container) return;
+    
+    container.innerHTML = '';
+    
+    albaranes.forEach(albaran => {
+        const card = document.createElement('div');
+        card.className = 'albaran-card';
+        
+        const estadoClass = albaran.estado_procesado === 'procesado' ? 'procesado' :
+                           albaran.estado_procesado === 'clasificacion' ? 'clasificacion' : 'pendiente';
+        
+        card.innerHTML = `
+            <div class="albaran-header">
+                <div>
+                    <h3>Albarán ${albaran.numero_albaran || albaran.id}</h3>
+                    <p>Proveedor: ${albaran.proveedor ? albaran.proveedor.nombre : 'Sin asignar'}</p>
+                    <p>Fecha: ${albaran.fecha_albaran || 'N/A'}</p>
+                </div>
+                <span class="badge ${estadoClass}">${albaran.estado_procesado}</span>
+            </div>
+            
+            <img src="${API_CONFIG.BASE_URL.replace('/api', '')}/media/${albaran.archivo_path}" class="albaran-image" alt="Albarán" onerror="this.style.display='none'">
+            
+            <div class="ocr-data">${JSON.stringify(albaran.datos_ocr || {}, null, 2)}</div>
+            
+            ${albaran.referencias && albaran.referencias.length > 0 ? `
+                <table class="referencias-table">
+                    <thead>
+                        <tr>
+                            <th>Referencia</th>
+                            <th>Descripción</th>
+                            <th>Unidades</th>
+                            <th>Precio</th>
+                            <th>IVA</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        ${albaran.referencias.map(ref => `
+                            <tr>
+                                <td>${ref.referencia}</td>
+                                <td>${ref.denominacion}</td>
+                                <td>${ref.unidades}</td>
+                                <td>${ref.precio_unitario}€</td>
+                                <td>${ref.impuesto_tipo}%</td>
+                            </tr>
+                        `).join('')}
+                    </tbody>
+                </table>
+            ` : ''}
+        `;
+        
+        container.appendChild(card);
+    });
+}
+
+async function renderClasificacion(albaranes) {
+    const container = document.getElementById('clasificacion-container');
+    if (!container) return;
+    
+    container.innerHTML = '';
+    
+    // Cargar proveedores primero
+    let proveedores = [];
+    try {
+        proveedores = await apiRequest('/proveedores/');
+    } catch (error) {
+        console.error('Error al cargar proveedores:', error);
+    }
+    
+    albaranes.forEach(albaran => {
+        const card = document.createElement('div');
+        card.className = 'albaran-card';
+        
+        card.innerHTML = `
+            <div class="albaran-header">
+                <h3>Albarán ${albaran.numero_albaran || albaran.id}</h3>
+            </div>
+            
+            <img src="${API_CONFIG.BASE_URL.replace('/api', '')}/media/${albaran.archivo_path}" class="albaran-image" alt="Albarán" onerror="this.style.display='none'">
+            
+            <div style="margin-top: 1rem;">
+                <label>Asignar Proveedor:</label>
+                <select id="proveedor-${albaran.id}" style="padding: 0.5rem; margin: 0.5rem 0; width: 100%;">
+                    <option value="">Seleccionar proveedor...</option>
+                    ${proveedores.map(prov => `
+                        <option value="${prov.id}">${prov.nombre}</option>
+                    `).join('')}
+                </select>
+                <button class="btn btn-primary" onclick="vincularProveedor(${albaran.id})" style="margin-top: 0.5rem;">
+                    Vincular Proveedor
+                </button>
+            </div>
+        `;
+        
+        container.appendChild(card);
+    });
+}
+
+async function vincularProveedor(albaranId) {
+    const select = document.getElementById(`proveedor-${albaranId}`);
+    if (!select) return;
+    
+    const proveedorId = select.value;
+    
+    if (!proveedorId) {
+        alert('Selecciona un proveedor');
+        return;
+    }
+    
+    try {
+        await apiRequest(`/albaranes/${albaranId}/vincular-proveedor?proveedor_id=${proveedorId}`, {
+            method: 'POST'
+        });
+        alert('Proveedor vinculado correctamente');
+        loadClasificacion();
+    } catch (error) {
+        alert('Error al vincular proveedor: ' + error.message);
+    }
+}
+
+// Cargar inicial
+document.addEventListener('DOMContentLoaded', () => {
+    loadAlbaranes();
+});
+