gitea/pedidosClientes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
ronalds
2025-12-05 11:27:16 -03:00
commit 804bacfbe3
87 changed files with 7260 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
frontend/README.md Normal file
View File

@@ -0,0 +1,67 @@
# Frontend - Sistema de Gestión de Pedidos
Frontend separado del backend, construido con HTML, CSS y JavaScript vanilla.
## Estructura
```
frontend/
├── index.html # Página principal (Kanban)
├── proveedores.html # Vista de proveedores
├── upload.html # Subir albaranes
├── admin.html # Panel de administración (pendiente)
├── css/
│ ├── base.css # Estilos base
│ ├── kanban.css # Estilos del Kanban
│ ├── proveedores.css # Estilos de proveedores
│ └── upload.css # Estilos de upload
└── js/
├── config.js # Configuración de API
├── kanban.js # Lógica del Kanban
├── proveedores.js # Lógica de proveedores
└── upload.js # Lógica de upload
```
## Configuración
Editar `js/config.js` para cambiar la URL de la API:
```javascript
const API_CONFIG = {
BASE_URL: 'http://localhost:8000/api',
// En producción: BASE_URL: 'https://tu-dominio.com/api'
};
```
## Ejecutar
### Opción 1: Servidor HTTP simple (Python)
```bash
cd frontend
python -m http.server 3000
```
### Opción 2: Servidor HTTP simple (Node.js)
```bash
cd frontend
npx http-server -p 3000
```
### Opción 3: Servidor de desarrollo (Live Server en VS Code)
Usar la extensión "Live Server" en VS Code
Luego abrir: http://localhost:3000
## Producción
Para producción, puedes:
1. Servir los archivos estáticos con Nginx
2. Usar un CDN
3. Integrar con un framework como React/Vue si prefieres
## Notas
- El frontend se comunica con el backend vía API REST
- CORS está configurado en el backend para permitir todas las origenes
- En producción, configurar CORS para dominios específicos

42
frontend/admin.html Normal file
View File

@@ -0,0 +1,42 @@
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Panel de Administración</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/admin.css">
</head>
<body>
<div class="header">
<h1>Gestión de Pedidos de Recambios</h1>
</div>
<nav class="nav">
<a href="index.html">Kanban</a>
<a href="proveedores.html">Proveedores</a>
<a href="admin.html" class="active">Administración</a>
<a href="upload.html">Subir Albarán</a>
</nav>
<div class="container">
<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>
</div>
<script src="js/config.js"></script>
<script src="js/admin.js"></script>
</body>
</html>

112
frontend/css/admin.css Normal file
View File

@@ -0,0 +1,112 @@
.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;
}

75
frontend/css/base.css Normal file
View File

@@ -0,0 +1,75 @@
* {
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;
}

147
frontend/css/kanban.css Normal file
View File

@@ -0,0 +1,147 @@
.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;
}

59
frontend/css/proveedores.css Normal file
View File

@@ -0,0 +1,59 @@
.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;
}

70
frontend/css/upload.css Normal file
View File

@@ -0,0 +1,70 @@
.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;
}

59
frontend/index.html Normal file
View File

@@ -0,0 +1,59 @@
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gestión de Pedidos - Kanban</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/kanban.css">
</head>
<body>
<div class="header">
<h1>Gestión de Pedidos de Recambios</h1>
</div>
<nav class="nav">
<a href="index.html" class="active">Kanban</a>
<a href="proveedores.html">Proveedores</a>
<a href="admin.html">Administración</a>
<a href="upload.html">Subir Albarán</a>
</nav>
<div class="container">
<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>
</div>
<script src="js/config.js"></script>
<script src="js/kanban.js"></script>
</body>
</html>

163
frontend/js/admin.js Normal file
View 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
View 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
View 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
View 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
View 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';
}
}
}

29
frontend/proveedores.html Normal file
View File

@@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Referencias por Proveedor</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/proveedores.css">
</head>
<body>
<div class="header">
<h1>Gestión de Pedidos de Recambios</h1>
</div>
<nav class="nav">
<a href="index.html">Kanban</a>
<a href="proveedores.html" class="active">Proveedores</a>
<a href="admin.html">Administración</a>
<a href="upload.html">Subir Albarán</a>
</nav>
<div class="container">
<div class="proveedores-container" id="proveedores-container">
<!-- Se llenará con JavaScript -->
</div>
</div>
<script src="js/config.js"></script>
<script src="js/proveedores.js"></script>
</body>
</html>

45
frontend/upload.html Normal file
View File

@@ -0,0 +1,45 @@
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Subir Albarán</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/upload.css">
</head>
<body>
<div class="header">
<h1>Gestión de Pedidos de Recambios</h1>
</div>
<nav class="nav">
<a href="index.html">Kanban</a>
<a href="proveedores.html">Proveedores</a>
<a href="admin.html">Administración</a>
<a href="upload.html" class="active">Subir Albarán</a>
</nav>
<div class="container">
<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>
</div>
<script src="js/config.js"></script>
<script src="js/upload.js"></script>
</body>
</html>