Initial commit
This commit is contained in:
310
templates/admin_panel.html
Normal file
310
templates/admin_panel.html
Normal file
@@ -0,0 +1,310 @@
|
||||
{% extends 'base.html' %}
|
||||
|
||||
{% block title %}Panel de Administración{% endblock %}
|
||||
|
||||
{% block extra_css %}
|
||||
<style>
|
||||
.admin-container {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
border-bottom: 2px solid #ecf0f1;
|
||||
}
|
||||
|
||||
.tab {
|
||||
padding: 1rem 2rem;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
background: none;
|
||||
font-size: 1rem;
|
||||
color: #7f8c8d;
|
||||
border-bottom: 3px solid transparent;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.tab.active {
|
||||
color: #3498db;
|
||||
border-bottom-color: #3498db;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tab-content.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.albaran-card {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.albaran-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
border-bottom: 1px solid #ecf0f1;
|
||||
}
|
||||
|
||||
.albaran-image {
|
||||
max-width: 100%;
|
||||
max-height: 400px;
|
||||
border-radius: 4px;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.ocr-data {
|
||||
background: #f8f9fa;
|
||||
padding: 1rem;
|
||||
border-radius: 4px;
|
||||
margin: 1rem 0;
|
||||
font-family: monospace;
|
||||
font-size: 0.9rem;
|
||||
white-space: pre-wrap;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.referencias-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.referencias-table th,
|
||||
.referencias-table td {
|
||||
padding: 0.75rem;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #ecf0f1;
|
||||
}
|
||||
|
||||
.referencias-table th {
|
||||
background: #f8f9fa;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.badge {
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 12px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.badge.pendiente {
|
||||
background: #fff3cd;
|
||||
color: #856404;
|
||||
}
|
||||
|
||||
.badge.procesado {
|
||||
background: #d4edda;
|
||||
color: #155724;
|
||||
}
|
||||
|
||||
.badge.clasificacion {
|
||||
background: #f8d7da;
|
||||
color: #721c24;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="admin-container">
|
||||
<h1 style="margin-bottom: 2rem;">Panel de Administración</h1>
|
||||
|
||||
<div class="tabs">
|
||||
<button class="tab active" onclick="showTab('albaranes')">Albaranes</button>
|
||||
<button class="tab" onclick="showTab('clasificacion')">Pendientes de Clasificación</button>
|
||||
</div>
|
||||
|
||||
<div id="tab-albaranes" class="tab-content active">
|
||||
<div id="albaranes-container"></div>
|
||||
</div>
|
||||
|
||||
<div id="tab-clasificacion" class="tab-content">
|
||||
<div id="clasificacion-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_js %}
|
||||
<script>
|
||||
const API_BASE = '/api';
|
||||
|
||||
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();
|
||||
}
|
||||
}
|
||||
|
||||
function loadAlbaranes() {
|
||||
fetch(`${API_BASE}/albaranes/`)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
const albaranes = data.results || data;
|
||||
renderAlbaranes(albaranes);
|
||||
});
|
||||
}
|
||||
|
||||
function loadClasificacion() {
|
||||
fetch(`${API_BASE}/albaranes/?estado_procesado=clasificacion`)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
const albaranes = data.results || data;
|
||||
renderClasificacion(albaranes);
|
||||
});
|
||||
}
|
||||
|
||||
function renderAlbaranes(albaranes) {
|
||||
const container = document.getElementById('albaranes-container');
|
||||
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="/media/${albaran.archivo_path}" class="albaran-image" alt="Albarán">
|
||||
|
||||
<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);
|
||||
});
|
||||
}
|
||||
|
||||
function renderClasificacion(albaranes) {
|
||||
const container = document.getElementById('clasificacion-container');
|
||||
container.innerHTML = '';
|
||||
|
||||
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="/media/${albaran.archivo_path}" class="albaran-image" alt="Albarán">
|
||||
|
||||
<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>
|
||||
</select>
|
||||
<button class="btn btn-primary" onclick="vincularProveedor(${albaran.id})" style="margin-top: 0.5rem;">
|
||||
Vincular Proveedor
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
container.appendChild(card);
|
||||
});
|
||||
|
||||
// Cargar proveedores
|
||||
loadProveedores();
|
||||
}
|
||||
|
||||
function loadProveedores() {
|
||||
fetch(`${API_BASE}/proveedores/`)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
const proveedores = data.results || data;
|
||||
proveedores.forEach(prov => {
|
||||
document.querySelectorAll('select[id^="proveedor-"]').forEach(select => {
|
||||
const option = document.createElement('option');
|
||||
option.value = prov.id;
|
||||
option.textContent = prov.nombre;
|
||||
select.appendChild(option);
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function vincularProveedor(albaranId) {
|
||||
const select = document.getElementById(`proveedor-${albaranId}`);
|
||||
const proveedorId = select.value;
|
||||
|
||||
if (!proveedorId) {
|
||||
alert('Selecciona un proveedor');
|
||||
return;
|
||||
}
|
||||
|
||||
fetch(`${API_BASE}/albaranes/${albaranId}/vincular_proveedor/`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ proveedor_id: proveedorId })
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
alert('Proveedor vinculado correctamente');
|
||||
loadClasificacion();
|
||||
})
|
||||
.catch(error => {
|
||||
alert('Error al vincular proveedor: ' + error.message);
|
||||
});
|
||||
}
|
||||
|
||||
// Cargar inicial
|
||||
loadAlbaranes();
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
100
templates/base.html
Normal file
100
templates/base.html
Normal file
@@ -0,0 +1,100 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{% block title %}Gestión de Pedidos{% endblock %}</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
||||
background: #f5f5f5;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.header {
|
||||
background: #2c3e50;
|
||||
color: white;
|
||||
padding: 1rem 2rem;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.nav {
|
||||
background: #34495e;
|
||||
padding: 0.5rem 2rem;
|
||||
}
|
||||
|
||||
.nav a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
margin-right: 2rem;
|
||||
padding: 0.5rem 1rem;
|
||||
display: inline-block;
|
||||
border-radius: 4px;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.nav a:hover, .nav a.active {
|
||||
background: #2c3e50;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 100%;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 0.5rem 1rem;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 0.9rem;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #3498db;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #2980b9;
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
background: #27ae60;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: #e74c3c;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
{% block extra_css %}{% endblock %}
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>Gestión de Pedidos de Recambios</h1>
|
||||
</div>
|
||||
<nav class="nav">
|
||||
<a href="{% url 'kanban' %}" class="{% if request.resolver_match.url_name == 'kanban' %}active{% endif %}">Kanban</a>
|
||||
<a href="{% url 'referencias-proveedor' %}" class="{% if request.resolver_match.url_name == 'referencias-proveedor' %}active{% endif %}">Proveedores</a>
|
||||
<a href="/admin/" target="_blank">Administración</a>
|
||||
</nav>
|
||||
<div class="container">
|
||||
{% block content %}{% endblock %}
|
||||
</div>
|
||||
{% block extra_js %}{% endblock %}
|
||||
</body>
|
||||
</html>
|
||||
|
||||
319
templates/kanban.html
Normal file
319
templates/kanban.html
Normal file
@@ -0,0 +1,319 @@
|
||||
{% extends 'base.html' %}
|
||||
|
||||
{% block title %}Kanban - Gestión de Pedidos{% endblock %}
|
||||
|
||||
{% block extra_css %}
|
||||
<style>
|
||||
.kanban-container {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
overflow-x: auto;
|
||||
padding: 1rem 0;
|
||||
min-height: calc(100vh - 200px);
|
||||
}
|
||||
|
||||
.kanban-column {
|
||||
flex: 1;
|
||||
min-width: 300px;
|
||||
background: #ecf0f1;
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.column-header {
|
||||
background: #34495e;
|
||||
color: white;
|
||||
padding: 1rem;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 1rem;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.column-header.pendiente-revision { background: #95a5a6; }
|
||||
.column-header.en-revision { background: #f39c12; }
|
||||
.column-header.pendiente-materiales { background: #e74c3c; }
|
||||
.column-header.completado { background: #27ae60; }
|
||||
|
||||
.card {
|
||||
background: white;
|
||||
border-radius: 6px;
|
||||
padding: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
.card.urgente {
|
||||
border-left: 4px solid #e74c3c;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.8; }
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-weight: bold;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.card-subtitle {
|
||||
color: #7f8c8d;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.urgente-badge {
|
||||
background: #e74c3c;
|
||||
color: white;
|
||||
padding: 0.2rem 0.5rem;
|
||||
border-radius: 12px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.referencias-list {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.referencia-item {
|
||||
padding: 0.5rem;
|
||||
margin: 0.25rem 0;
|
||||
border-radius: 4px;
|
||||
font-size: 0.9rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.referencia-item.completo {
|
||||
background: #d5f4e6;
|
||||
color: #27ae60;
|
||||
}
|
||||
|
||||
.referencia-item.parcial {
|
||||
background: #fff3cd;
|
||||
color: #856404;
|
||||
}
|
||||
|
||||
.referencia-item.pendiente {
|
||||
background: #f8d7da;
|
||||
color: #721c24;
|
||||
}
|
||||
|
||||
.referencia-codigo {
|
||||
font-weight: bold;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.filters {
|
||||
background: white;
|
||||
padding: 1rem;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 1rem;
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.filter-input {
|
||||
padding: 0.5rem;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.refresh-btn {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.empty-column {
|
||||
text-align: center;
|
||||
color: #95a5a6;
|
||||
padding: 2rem;
|
||||
font-style: italic;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="filters">
|
||||
<input type="text" id="search-input" class="filter-input" placeholder="Buscar por matrícula o número de pedido...">
|
||||
<select id="estado-filter" class="filter-input">
|
||||
<option value="">Todos los estados</option>
|
||||
<option value="pendiente_revision">Pendiente Revisión</option>
|
||||
<option value="en_revision">En Revisión</option>
|
||||
<option value="pendiente_materiales">Pendiente Materiales</option>
|
||||
<option value="completado">Completado</option>
|
||||
</select>
|
||||
<label>
|
||||
<input type="checkbox" id="urgente-only"> Solo urgentes
|
||||
</label>
|
||||
<button class="btn btn-primary refresh-btn" onclick="loadKanban()">Actualizar</button>
|
||||
</div>
|
||||
|
||||
<div class="kanban-container" id="kanban-container">
|
||||
<div class="kanban-column">
|
||||
<div class="column-header pendiente-revision">Pendiente Revisión</div>
|
||||
<div id="col-pendiente-revision" class="cards-container"></div>
|
||||
</div>
|
||||
<div class="kanban-column">
|
||||
<div class="column-header en-revision">En Revisión</div>
|
||||
<div id="col-en-revision" class="cards-container"></div>
|
||||
</div>
|
||||
<div class="kanban-column">
|
||||
<div class="column-header pendiente-materiales">Pendiente Materiales</div>
|
||||
<div id="col-pendiente-materiales" class="cards-container"></div>
|
||||
</div>
|
||||
<div class="kanban-column">
|
||||
<div class="column-header completado">Completado</div>
|
||||
<div id="col-completado" class="cards-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_js %}
|
||||
<script>
|
||||
const API_BASE = '/api';
|
||||
|
||||
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} - ${pedido.cliente.nombre}</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>
|
||||
`;
|
||||
|
||||
card.onclick = () => {
|
||||
window.location.href = `/admin/gestion_pedidos/pedidocliente/${pedido.id}/change/`;
|
||||
};
|
||||
|
||||
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 => {
|
||||
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));
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function loadKanban() {
|
||||
fetch(`${API_BASE}/kanban/`)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
renderKanban(data);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error al cargar Kanban:', error);
|
||||
});
|
||||
}
|
||||
|
||||
// Filtros
|
||||
document.getElementById('search-input').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';
|
||||
});
|
||||
});
|
||||
|
||||
document.getElementById('estado-filter').addEventListener('change', (e) => {
|
||||
const estado = e.target.value;
|
||||
if (!estado) {
|
||||
loadKanban();
|
||||
return;
|
||||
}
|
||||
|
||||
fetch(`${API_BASE}/pedidos-cliente/?estado=${estado}`)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
const grouped = {
|
||||
'pendiente_revision': [],
|
||||
'en_revision': [],
|
||||
'pendiente_materiales': [],
|
||||
'completado': [],
|
||||
};
|
||||
grouped[estado] = data.results || data;
|
||||
renderKanban(grouped);
|
||||
});
|
||||
});
|
||||
|
||||
// Auto-refresh cada 30 segundos
|
||||
setInterval(loadKanban, 30000);
|
||||
|
||||
// Cargar inicial
|
||||
loadKanban();
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
195
templates/mobile_upload.html
Normal file
195
templates/mobile_upload.html
Normal file
@@ -0,0 +1,195 @@
|
||||
{% extends 'base.html' %}
|
||||
|
||||
{% block title %}Subir Albarán{% endblock %}
|
||||
|
||||
{% block extra_css %}
|
||||
<style>
|
||||
.upload-container {
|
||||
max-width: 600px;
|
||||
margin: 2rem auto;
|
||||
background: white;
|
||||
padding: 2rem;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.upload-area {
|
||||
border: 2px dashed #3498db;
|
||||
border-radius: 8px;
|
||||
padding: 3rem;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
background: #f8f9fa;
|
||||
}
|
||||
|
||||
.upload-area:hover {
|
||||
background: #e9ecef;
|
||||
border-color: #2980b9;
|
||||
}
|
||||
|
||||
.upload-area.dragover {
|
||||
background: #d4edda;
|
||||
border-color: #27ae60;
|
||||
}
|
||||
|
||||
.upload-icon {
|
||||
font-size: 3rem;
|
||||
color: #3498db;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.file-input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.preview-image {
|
||||
max-width: 100%;
|
||||
max-height: 400px;
|
||||
margin-top: 1rem;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.btn-upload {
|
||||
margin-top: 1rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.status-message {
|
||||
margin-top: 1rem;
|
||||
padding: 1rem;
|
||||
border-radius: 4px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.status-message.success {
|
||||
background: #d4edda;
|
||||
color: #155724;
|
||||
border: 1px solid #c3e6cb;
|
||||
}
|
||||
|
||||
.status-message.error {
|
||||
background: #f8d7da;
|
||||
color: #721c24;
|
||||
border: 1px solid #f5c6cb;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="upload-container">
|
||||
<h2 style="margin-bottom: 2rem;">Subir Albarán</h2>
|
||||
|
||||
<div class="upload-area" id="upload-area">
|
||||
<div class="upload-icon">📄</div>
|
||||
<p>Arrastra una imagen aquí o haz clic para seleccionar</p>
|
||||
<p style="font-size: 0.9rem; color: #7f8c8d; margin-top: 0.5rem;">
|
||||
Formatos soportados: JPG, PNG, PDF
|
||||
</p>
|
||||
<input type="file" id="file-input" class="file-input" accept="image/*,.pdf">
|
||||
</div>
|
||||
|
||||
<div id="preview-container" style="display: none;">
|
||||
<img id="preview-image" class="preview-image" alt="Vista previa">
|
||||
<button class="btn btn-primary btn-upload" onclick="uploadFile()">Subir Albarán</button>
|
||||
</div>
|
||||
|
||||
<div id="status-message" class="status-message"></div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_js %}
|
||||
<script>
|
||||
const API_BASE = '/api';
|
||||
let selectedFile = null;
|
||||
|
||||
const uploadArea = document.getElementById('upload-area');
|
||||
const fileInput = document.getElementById('file-input');
|
||||
const previewContainer = document.getElementById('preview-container');
|
||||
const previewImage = document.getElementById('preview-image');
|
||||
const statusMessage = document.getElementById('status-message');
|
||||
|
||||
uploadArea.addEventListener('click', () => fileInput.click());
|
||||
|
||||
uploadArea.addEventListener('dragover', (e) => {
|
||||
e.preventDefault();
|
||||
uploadArea.classList.add('dragover');
|
||||
});
|
||||
|
||||
uploadArea.addEventListener('dragleave', () => {
|
||||
uploadArea.classList.remove('dragover');
|
||||
});
|
||||
|
||||
uploadArea.addEventListener('drop', (e) => {
|
||||
e.preventDefault();
|
||||
uploadArea.classList.remove('dragover');
|
||||
const files = e.dataTransfer.files;
|
||||
if (files.length > 0) {
|
||||
handleFile(files[0]);
|
||||
}
|
||||
});
|
||||
|
||||
fileInput.addEventListener('change', (e) => {
|
||||
if (e.target.files.length > 0) {
|
||||
handleFile(e.target.files[0]);
|
||||
}
|
||||
});
|
||||
|
||||
function handleFile(file) {
|
||||
selectedFile = file;
|
||||
|
||||
if (file.type.startsWith('image/')) {
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
previewImage.src = e.target.result;
|
||||
previewContainer.style.display = 'block';
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
} else if (file.type === 'application/pdf') {
|
||||
previewImage.src = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgZmlsbD0iI2VjZjBmMSIvPjx0ZXh0IHg9IjUwJSIgeT0iNTAlIiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMTgiIGZpbGw9IiM3ZjhjOGQiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGR5PSIuM2VtIj5QREY8L3RleHQ+PC9zdmc+';
|
||||
previewContainer.style.display = 'block';
|
||||
}
|
||||
}
|
||||
|
||||
function uploadFile() {
|
||||
if (!selectedFile) return;
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('archivo', selectedFile);
|
||||
|
||||
statusMessage.style.display = 'none';
|
||||
const btn = document.querySelector('.btn-upload');
|
||||
btn.disabled = true;
|
||||
btn.textContent = 'Subiendo...';
|
||||
|
||||
fetch(`${API_BASE}/albaranes/upload/`, {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
statusMessage.className = 'status-message success';
|
||||
statusMessage.textContent = 'Albarán subido y procesado correctamente';
|
||||
statusMessage.style.display = 'block';
|
||||
|
||||
// Reset
|
||||
setTimeout(() => {
|
||||
selectedFile = null;
|
||||
fileInput.value = '';
|
||||
previewContainer.style.display = 'none';
|
||||
statusMessage.style.display = 'none';
|
||||
btn.disabled = false;
|
||||
btn.textContent = 'Subir Albarán';
|
||||
}, 3000);
|
||||
})
|
||||
.catch(error => {
|
||||
statusMessage.className = 'status-message error';
|
||||
statusMessage.textContent = 'Error al subir el albarán: ' + error.message;
|
||||
statusMessage.style.display = 'block';
|
||||
btn.disabled = false;
|
||||
btn.textContent = 'Subir Albarán';
|
||||
});
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
151
templates/proveedores.html
Normal file
151
templates/proveedores.html
Normal file
@@ -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 %}
|
||||
|
||||
Reference in New Issue
Block a user