Initial commit

templates/proveedores.html

@@ -0,0 +1,151 @@
+{% extends 'base.html' %}
+
+{% block title %}Referencias por Proveedor{% endblock %}
+
+{% block extra_css %}
+<style>
+    .proveedores-container {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
+        gap: 1.5rem;
+    }
+    
+    .proveedor-card {
+        background: white;
+        border-radius: 8px;
+        padding: 1.5rem;
+        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    }
+    
+    .proveedor-header {
+        background: #3498db;
+        color: white;
+        padding: 1rem;
+        border-radius: 4px;
+        margin-bottom: 1rem;
+        font-weight: bold;
+        font-size: 1.1rem;
+    }
+    
+    .section-title {
+        font-weight: bold;
+        margin: 1rem 0 0.5rem 0;
+        padding-bottom: 0.5rem;
+        border-bottom: 2px solid #ecf0f1;
+    }
+    
+    .referencia-item {
+        padding: 0.75rem;
+        margin: 0.5rem 0;
+        border-radius: 4px;
+        border-left: 4px solid;
+    }
+    
+    .referencia-item.pendiente {
+        background: #e3f2fd;
+        border-color: #2196f3;
+    }
+    
+    .referencia-item.devolucion {
+        background: #ffebee;
+        border-color: #f44336;
+    }
+    
+    .referencia-codigo {
+        font-weight: bold;
+        font-family: monospace;
+        color: #2c3e50;
+    }
+    
+    .referencia-info {
+        font-size: 0.9rem;
+        color: #7f8c8d;
+        margin-top: 0.25rem;
+    }
+</style>
+{% endblock %}
+
+{% block content %}
+<div class="proveedores-container" id="proveedores-container">
+    <!-- Se llenará con JavaScript -->
+</div>
+{% endblock %}
+
+{% block extra_js %}
+<script>
+const API_BASE = '/api';
+
+function renderProveedores(data) {
+    const container = document.getElementById('proveedores-container');
+    container.innerHTML = '';
+    
+    if (data.length === 0) {
+        container.innerHTML = '<p>No hay referencias pendientes</p>';
+        return;
+    }
+    
+    data.forEach(proveedorData => {
+        const card = document.createElement('div');
+        card.className = 'proveedor-card';
+        
+        const pendientes = proveedorData.referencias_pendientes || [];
+        const devoluciones = proveedorData.referencias_devolucion || [];
+        
+        card.innerHTML = `
+            <div class="proveedor-header">
+                ${proveedorData.proveedor.nombre}
+            </div>
+            
+            ${pendientes.length > 0 ? `
+                <div class="section-title">Referencias Pendientes de Recepción</div>
+                ${pendientes.map(ref => `
+                    <div class="referencia-item pendiente">
+                        <div class="referencia-codigo">${ref.referencia}</div>
+                        <div>${ref.denominacion}</div>
+                        <div class="referencia-info">
+                            Pedidas: ${ref.unidades_pedidas} | Recibidas: ${ref.unidades_recibidas} | Pendiente: ${ref.unidades_pedidas - ref.unidades_recibidas}
+                        </div>
+                    </div>
+                `).join('')}
+            ` : ''}
+            
+            ${devoluciones.length > 0 ? `
+                <div class="section-title">Referencias Pendientes de Abono</div>
+                ${devoluciones.map(dev => `
+                    <div class="referencia-item devolucion">
+                        <div class="referencia-codigo">${dev.referencia}</div>
+                        <div>${dev.denominacion || ''}</div>
+                        <div class="referencia-info">
+                            Unidades: ${dev.unidades} | Fecha: ${new Date(dev.fecha_devolucion).toLocaleDateString('es-ES')}
+                        </div>
+                    </div>
+                `).join('')}
+            ` : ''}
+            
+            ${pendientes.length === 0 && devoluciones.length === 0 ? 
+                '<p style="color: #95a5a6; text-align: center; padding: 2rem;">Sin referencias pendientes</p>' : ''}
+        `;
+        
+        container.appendChild(card);
+    });
+}
+
+function loadProveedores() {
+    fetch(`${API_BASE}/referencias-proveedor/`)
+        .then(response => response.json())
+        .then(data => {
+            renderProveedores(data);
+        })
+        .catch(error => {
+            console.error('Error al cargar proveedores:', error);
+        });
+}
+
+// Auto-refresh cada 30 segundos
+setInterval(loadProveedores, 30000);
+
+// Cargar inicial
+loadProveedores();
+</script>
+{% endblock %}
+