152 lines
4.3 KiB
HTML
152 lines
4.3 KiB
HTML
{% 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 %}
|
|
|