Initial commit
This commit is contained in:
163
frontend/js/admin.js
Normal file
163
frontend/js/admin.js
Normal file
@@ -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();
|
||||
});
|
||||
|
||||
32
frontend/js/config.js
Normal file
32
frontend/js/config.js
Normal file
@@ -0,0 +1,32 @@
|
||||
// Configuración de la API
|
||||
const API_CONFIG = {
|
||||
BASE_URL: 'http://localhost:8000/api',
|
||||
// En producción cambiar a: BASE_URL: 'https://tu-dominio.com/api'
|
||||
};
|
||||
|
||||
// Función helper para hacer requests
|
||||
async function apiRequest(endpoint, options = {}) {
|
||||
const url = `${API_CONFIG.BASE_URL}${endpoint}`;
|
||||
const defaultOptions = {
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
};
|
||||
|
||||
const config = { ...defaultOptions, ...options };
|
||||
|
||||
try {
|
||||
const response = await fetch(url, config);
|
||||
|
||||
if (!response.ok) {
|
||||
const error = await response.json().catch(() => ({ detail: 'Error desconocido' }));
|
||||
throw new Error(error.detail || `Error ${response.status}`);
|
||||
}
|
||||
|
||||
return await response.json();
|
||||
} catch (error) {
|
||||
console.error('API Error:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
131
frontend/js/kanban.js
Normal file
131
frontend/js/kanban.js
Normal file
@@ -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();
|
||||
});
|
||||
|
||||
75
frontend/js/proveedores.js
Normal file
75
frontend/js/proveedores.js
Normal file
@@ -0,0 +1,75 @@
|
||||
// Proveedores functionality
|
||||
|
||||
function renderProveedores(data) {
|
||||
const container = document.getElementById('proveedores-container');
|
||||
if (!container) return;
|
||||
|
||||
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 || 'Sin 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);
|
||||
});
|
||||
}
|
||||
|
||||
async function loadProveedores() {
|
||||
try {
|
||||
const data = await apiRequest('/referencias-proveedor/');
|
||||
renderProveedores(data);
|
||||
} catch (error) {
|
||||
console.error('Error al cargar proveedores:', error);
|
||||
alert('Error al cargar los datos: ' + error.message);
|
||||
}
|
||||
}
|
||||
|
||||
// Auto-refresh cada 30 segundos
|
||||
setInterval(loadProveedores, 30000);
|
||||
|
||||
// Cargar inicial
|
||||
document.addEventListener('DOMContentLoaded', loadProveedores);
|
||||
|
||||
105
frontend/js/upload.js
Normal file
105
frontend/js/upload.js
Normal file
@@ -0,0 +1,105 @@
|
||||
// Upload functionality
|
||||
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');
|
||||
|
||||
if (uploadArea && fileInput) {
|
||||
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';
|
||||
}
|
||||
}
|
||||
|
||||
async function uploadFile() {
|
||||
if (!selectedFile) return;
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('archivo', selectedFile);
|
||||
|
||||
statusMessage.style.display = 'none';
|
||||
const btn = document.querySelector('.btn-upload');
|
||||
if (btn) {
|
||||
btn.disabled = true;
|
||||
btn.textContent = 'Subiendo...';
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(`${API_CONFIG.BASE_URL}/albaranes/upload/`, {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const error = await response.json().catch(() => ({ detail: 'Error desconocido' }));
|
||||
throw new Error(error.detail || `Error ${response.status}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
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';
|
||||
if (btn) {
|
||||
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';
|
||||
if (btn) {
|
||||
btn.disabled = false;
|
||||
btn.textContent = 'Subir Albarán';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user