consultoria-as
340d2fcef8
Three-tab panel for warehouse operators: - Column mapping configuration (flexible CSV/Excel field mapping) - File upload with drag-and-drop, progress tracking, error reporting - Searchable paginated inventory view with clear-all option Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
165 lines
7.4 KiB
HTML
165 lines
7.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Bodega — NEXUS AUTOPARTS</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Orbitron:wght@700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="/shared.css">
|
|
<link rel="stylesheet" href="/bodega.css">
|
|
</head>
|
|
<body>
|
|
<div id="shared-nav"></div>
|
|
|
|
<div class="bodega-container">
|
|
<!-- Main Tabs -->
|
|
<div class="bodega-tabs">
|
|
<button class="bodega-tab active" data-tab="mapeo">Mapeo de Columnas</button>
|
|
<button class="bodega-tab" data-tab="subir">Subir Inventario</button>
|
|
<button class="bodega-tab" data-tab="inventario">Mi Inventario</button>
|
|
</div>
|
|
|
|
<!-- ============================================ -->
|
|
<!-- TAB 1: Mapeo de Columnas -->
|
|
<!-- ============================================ -->
|
|
<div id="section-mapeo" class="bodega-section active">
|
|
<div class="section-intro">
|
|
<h2>Mapeo de Columnas</h2>
|
|
<p>Configura como se mapean las columnas de tu archivo CSV/Excel a los campos del sistema. Escribe el nombre exacto de la columna en tu archivo.</p>
|
|
</div>
|
|
|
|
<div class="mapping-form">
|
|
<div class="form-group">
|
|
<label class="form-label">Numero de Parte <span class="required">*</span></label>
|
|
<input id="map-part-number" type="text" class="form-input" placeholder="Ej: PartNo, SKU, Numero...">
|
|
<span class="form-hint">Campo del sistema: part_number</span>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Precio <span class="required">*</span></label>
|
|
<input id="map-price" type="text" class="form-input" placeholder="Ej: Precio, Price, Costo...">
|
|
<span class="form-hint">Campo del sistema: price</span>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Existencias <span class="required">*</span></label>
|
|
<input id="map-stock" type="text" class="form-input" placeholder="Ej: Stock, Qty, Existencia...">
|
|
<span class="form-hint">Campo del sistema: stock</span>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Ubicacion / Sucursal <span class="optional">(opcional)</span></label>
|
|
<input id="map-location" type="text" class="form-input" placeholder="Ej: Sucursal, Bodega, Location...">
|
|
<span class="form-hint">Campo del sistema: location</span>
|
|
</div>
|
|
<div class="form-actions">
|
|
<button id="btn-save-mapping" class="btn btn-primary">Guardar Mapeo</button>
|
|
<span id="mapping-status" class="status-msg"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============================================ -->
|
|
<!-- TAB 2: Subir Inventario -->
|
|
<!-- ============================================ -->
|
|
<div id="section-subir" class="bodega-section">
|
|
<div class="section-intro">
|
|
<h2>Subir Inventario</h2>
|
|
<p>Sube un archivo CSV o Excel con tu inventario. Asegurate de haber configurado el mapeo de columnas primero.</p>
|
|
</div>
|
|
|
|
<div class="upload-zone" id="drop-zone">
|
|
<div class="upload-icon">📦</div>
|
|
<p class="upload-text">Arrastra tu archivo aqui o haz clic para seleccionar</p>
|
|
<p class="upload-hint">CSV, XLS, XLSX — Max 10MB</p>
|
|
<input type="file" id="file-input" accept=".csv,.xls,.xlsx" style="display:none;">
|
|
</div>
|
|
|
|
<div id="selected-file" class="selected-file" style="display:none;">
|
|
<span id="selected-file-name"></span>
|
|
<button id="btn-clear-file" class="btn-icon" title="Quitar archivo">×</button>
|
|
</div>
|
|
|
|
<div class="form-actions">
|
|
<button id="btn-upload" class="btn btn-primary" disabled>Subir Archivo</button>
|
|
<span id="upload-status" class="status-msg"></span>
|
|
</div>
|
|
|
|
<div id="upload-result" class="upload-result" style="display:none;"></div>
|
|
|
|
<div class="history-section">
|
|
<h3>Historial de Cargas</h3>
|
|
<div id="upload-history" class="table-wrap">
|
|
<table class="data-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Archivo</th>
|
|
<th>Estado</th>
|
|
<th>Importados</th>
|
|
<th>Errores</th>
|
|
<th>Fecha</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="history-body">
|
|
<tr><td colspan="5" class="empty-row">Cargando...</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============================================ -->
|
|
<!-- TAB 3: Mi Inventario -->
|
|
<!-- ============================================ -->
|
|
<div id="section-inventario" class="bodega-section">
|
|
<div class="section-intro">
|
|
<h2>Mi Inventario</h2>
|
|
</div>
|
|
|
|
<div class="inventory-toolbar">
|
|
<div class="search-box">
|
|
<input id="inv-search" type="text" class="form-input" placeholder="Buscar por numero de parte o nombre...">
|
|
<button id="btn-inv-search" class="btn btn-primary">Buscar</button>
|
|
</div>
|
|
<button id="btn-clear-all" class="btn btn-danger">Limpiar Todo</button>
|
|
</div>
|
|
|
|
<div class="table-wrap">
|
|
<table class="data-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Numero de Parte</th>
|
|
<th>Nombre</th>
|
|
<th>Precio</th>
|
|
<th>Existencias</th>
|
|
<th>Ubicacion</th>
|
|
<th>Actualizado</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="inv-body">
|
|
<tr><td colspan="6" class="empty-row">Cargando...</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div id="inv-pagination" class="bodega-pagination"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Confirm Modal -->
|
|
<div id="confirm-modal" class="modal-overlay">
|
|
<div class="confirm-box">
|
|
<h3 id="confirm-title">Confirmar</h3>
|
|
<p id="confirm-msg"></p>
|
|
<div class="confirm-actions">
|
|
<button id="confirm-cancel" class="btn btn-secondary">Cancelar</button>
|
|
<button id="confirm-ok" class="btn btn-danger">Confirmar</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Toast container -->
|
|
<div id="toast-container"></div>
|
|
|
|
<script src="/nav.js"></script>
|
|
<script src="/bodega.js"></script>
|
|
</body>
|
|
</html>
|