consultoria-as/Autoparts-DB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(pos): rewrite inventory.js to match design system HTML structure

Browse Source 
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
consultoria-as
2026-04-01 08:29:14 +00:00
parent 761e56e87f
commit 004cca7ccc
2 changed files with 631 additions and 273 deletions
Download Patch File Download Diff File Expand all files Collapse all files

405
pos/templates/inventory.html
View File

@@ -1172,6 +1172,141 @@
padding: var(--space-1); opacity: 0.7; color: inherit;
}
.banner__dismiss:hover { opacity: 1; }
/* =========================================================================
INVENTORY MODALS
========================================================================= */
.inv-modal-overlay {
display: none;
position: fixed;
inset: 0;
z-index: 9000;
background: rgba(0,0,0,0.6);
backdrop-filter: blur(4px);
align-items: center;
justify-content: center;
}
.inv-modal-overlay.is-open {
display: flex;
}
.inv-modal {
background: var(--color-bg-elevated);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
width: 520px;
max-height: 85vh;
overflow-y: auto;
box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.inv-modal--wide {
width: 700px;
}
.inv-modal__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-4) var(--space-5);
border-bottom: 1px solid var(--color-border);
}
.inv-modal__header h3 {
font-family: var(--font-heading);
font-weight: var(--heading-weight-primary);
font-size: var(--text-h5);
color: var(--color-text-primary);
margin: 0;
}
.inv-modal__close {
background: none;
border: none;
font-size: 1.5rem;
color: var(--color-text-muted);
cursor: pointer;
padding: 0 var(--space-1);
line-height: 1;
}
.inv-modal__close:hover {
color: var(--color-text-primary);
}
.inv-modal__body {
padding: var(--space-4) var(--space-5);
}
.inv-modal__footer {
display: flex;
justify-content: flex-end;
gap: var(--space-3);
padding: var(--space-3) var(--space-5);
border-top: 1px solid var(--color-border);
}
.inv-form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-3);
}
.inv-field {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.inv-field--full {
grid-column: 1 / -1;
}
.inv-field label {
font-size: var(--text-caption);
font-weight: var(--font-weight-semibold);
color: var(--color-text-muted);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
}
.inv-field input {
padding: var(--space-2) var(--space-3);
background: var(--color-surface-1);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
color: var(--color-text-primary);
font-family: var(--font-body);
font-size: var(--text-body-sm);
}
.inv-field input:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 2px var(--color-primary-muted);
}
.count-row {
display: flex;
gap: var(--space-2);
align-items: center;
margin-bottom: var(--space-2);
}
.count-row input {
padding: var(--space-2) var(--space-3);
background: var(--color-surface-1);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
color: var(--color-text-primary);
font-family: var(--font-body);
font-size: var(--text-body-sm);
}
/* History table inside modal */
.inv-modal .data-table { width: 100%; }
</style>
</head>
@@ -1430,7 +1565,7 @@
<div class="toolbar">
<div class="search-box">
<svg viewBox="0 0 24 24" stroke-linecap="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
<input type="text" placeholder="Buscar por SKU, nombre, marca…" />
<input type="text" id="productSearch" placeholder="Buscar por SKU, nombre, marca…" />
</div>
<select class="select-filter">
<option value="">Todas las marcas</option>
@@ -1455,125 +1590,34 @@
<svg viewBox="0 0 24 24"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
Columnas
</button>
<button class="btn btn--primary btn--sm" onclick="showCreateModal()">
<svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
Nuevo Producto
</button>
</div>
<div class="table-wrapper">
<table class="data-table">
<table class="data-table" id="stockTable">
<thead>
<tr>
<th>SKU</th>
<th>Nombre del Producto</th>
<th>Barcode</th>
<th>No. Parte</th>
<th>Nombre</th>
<th>Marca</th>
<th>Categoría</th>
<th style="text-align:right">Stock</th>
<th style="text-align:right">Mín</th>
<th style="text-align:right">Máx</th>
<th style="text-align:right">Costo</th>
<th style="text-align:right">Precio 1</th>
<th style="text-align:right">Precio 2</th>
<th style="text-align:right">Precio 3</th>
<th>Ubicación</th>
<th>Estado</th>
<th>Acciones</th>
</tr>
</thead>
<tbody>
<tr>
<td class="td--mono">GAT-50104</td>
<td class="td--primary">Banda de Tiempo Kit</td>
<td>Gates</td>
<td>Motor</td>
<td style="text-align:right" class="td--primary">142</td>
<td style="text-align:right;color:var(--color-text-muted)">20</td>
<td style="text-align:right;color:var(--color-text-muted)">200</td>
<td>A-12-3</td>
<td><span class="badge badge--ok">OK</span></td>
</tr>
<tr>
<td class="td--mono">SKF-6204</td>
<td class="td--primary">Rodamiento Rueda Delantera</td>
<td>SKF</td>
<td>Suspensión</td>
<td style="text-align:right" class="td--primary">8</td>
<td style="text-align:right;color:var(--color-text-muted)">15</td>
<td style="text-align:right;color:var(--color-text-muted)">60</td>
<td>B-05-1</td>
<td><span class="badge badge--low">Bajo</span></td>
</tr>
<tr>
<td class="td--mono">BOC-0258</td>
<td class="td--primary">Bujía Iridium BKR6EIX</td>
<td>Bosch</td>
<td>Eléctrico</td>
<td style="text-align:right" class="td--primary">3</td>
<td style="text-align:right;color:var(--color-text-muted)">10</td>
<td style="text-align:right;color:var(--color-text-muted)">100</td>
<td>C-08-2</td>
<td><span class="badge badge--low">Bajo</span></td>
</tr>
<tr>
<td class="td--mono">MON-G8114</td>
<td class="td--primary">Amortiguador Trasero Derecho</td>
<td>Monroe</td>
<td>Suspensión</td>
<td style="text-align:right" class="td--primary">67</td>
<td style="text-align:right;color:var(--color-text-muted)">10</td>
<td style="text-align:right;color:var(--color-text-muted)">40</td>
<td>B-14-5</td>
<td><span class="badge badge--over">Sobrestock</span></td>
</tr>
<tr>
<td class="td--mono">NGK-LFR6A</td>
<td class="td--primary">Bujía Laser Platinum LFR6A</td>
<td>NGK</td>
<td>Eléctrico</td>
<td style="text-align:right" class="td--primary">88</td>
<td style="text-align:right;color:var(--color-text-muted)">25</td>
<td style="text-align:right;color:var(--color-text-muted)">120</td>
<td>C-02-4</td>
<td><span class="badge badge--ok">OK</span></td>
</tr>
<tr>
<td class="td--mono">BOC-F026</td>
<td class="td--primary">Filtro de Aceite F026407006</td>
<td>Bosch</td>
<td>Filtros</td>
<td style="text-align:right" class="td--primary">5</td>
<td style="text-align:right;color:var(--color-text-muted)">20</td>
<td style="text-align:right;color:var(--color-text-muted)">80</td>
<td>D-01-2</td>
<td><span class="badge badge--low">Bajo</span></td>
</tr>
<tr>
<td class="td--mono">ATE-13046</td>
<td class="td--primary">Pastillas de Freno ATE Power</td>
<td>ATE</td>
<td>Frenos</td>
<td style="text-align:right" class="td--primary">34</td>
<td style="text-align:right;color:var(--color-text-muted)">15</td>
<td style="text-align:right;color:var(--color-text-muted)">50</td>
<td>E-03-1</td>
<td><span class="badge badge--ok">OK</span></td>
</tr>
<tr>
<td class="td--mono">TRW-GDB1</td>
<td class="td--primary">Disco de Freno Ventilado</td>
<td>TRW</td>
<td>Frenos</td>
<td style="text-align:right" class="td--primary">12</td>
<td style="text-align:right;color:var(--color-text-muted)">10</td>
<td style="text-align:right;color:var(--color-text-muted)">30</td>
<td>E-07-3</td>
<td><span class="badge badge--ok">OK</span></td>
</tr>
<tbody id="productTableBody">
</tbody>
</table>
<div class="table-footer">
<span>Mostrando 1–8 de 4,817 productos</span>
<div class="pagination">
<button class="page-btn">&lsaquo;</button>
<button class="page-btn is-active">1</button>
<button class="page-btn">2</button>
<button class="page-btn">3</button>
<span style="padding:0 var(--space-1);color:var(--color-text-muted)">…</span>
<button class="page-btn">602</button>
<button class="page-btn">&rsaquo;</button>
</div>
<div id="productPagination"></div>
</div>
</div>
</div>
@@ -1594,7 +1638,7 @@
</select>
<input type="date" class="select-filter" value="2026-04-01" />
<div class="toolbar__spacer"></div>
<button class="btn btn--primary">
<button class="btn btn--primary" onclick="showPurchaseModal()">
<svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
Nueva Entrada
</button>
@@ -1801,7 +1845,7 @@
<option>En tránsito</option><option>Recibido</option><option>Pendiente</option>
</select>
<div class="toolbar__spacer"></div>
<button class="btn btn--primary">
<button class="btn btn--primary" onclick="showTransferModal()">
<svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
Nuevo Traspaso
</button>
@@ -1888,7 +1932,7 @@
<option>Merma</option><option>Daño</option><option>Corrección</option>
</select>
<div class="toolbar__spacer"></div>
<button class="btn btn--primary">
<button class="btn btn--primary" onclick="showAdjustmentModal()">
<svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
Nuevo Ajuste
</button>
@@ -1983,7 +2027,7 @@
<option>Completado</option><option>En proceso</option><option>Programado</option>
</select>
<div class="toolbar__spacer"></div>
<button class="btn btn--primary">
<button class="btn btn--primary" onclick="showCountModal()">
<svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
Programar Conteo
</button>
@@ -2072,7 +2116,7 @@
TAB 7 — ALERTAS
=================================================================== -->
<div class="tab-panel" id="panel-alertas" role="tabpanel">
<div id="alertsContent">
<!-- Low Stock -->
<div class="section-heading">
<span class="section-heading__title">Stock Bajo</span>
@@ -2251,6 +2295,7 @@
</div>
</div>
</div><!-- /alertsContent -->
</div>
</div><!-- /tab-panels -->
@@ -2334,6 +2379,142 @@
})();
</script>
<!-- ===== MODALS ===== -->
<!-- Create Item Modal -->
<div class="inv-modal-overlay" id="createModal">
<div class="inv-modal">
<div class="inv-modal__header">
<h3>Nuevo Producto</h3>
<button class="inv-modal__close" onclick="closeCreateModal()">&times;</button>
</div>
<div class="inv-modal__body">
<div class="inv-form-grid">
<div class="inv-field"><label>No. Parte *</label><input type="text" id="newPartNumber" placeholder="Ej: GAT-50104" /></div>
<div class="inv-field"><label>Nombre *</label><input type="text" id="newName" placeholder="Nombre del producto" /></div>
<div class="inv-field"><label>Marca</label><input type="text" id="newBrand" placeholder="Marca" /></div>
<div class="inv-field"><label>Barcode</label><input type="text" id="newBarcode" placeholder="Auto-generado si vacío" /></div>
<div class="inv-field"><label>Costo</label><input type="number" id="newCost" step="0.01" placeholder="0.00" /></div>
<div class="inv-field"><label>Precio 1</label><input type="number" id="newPrice1" step="0.01" placeholder="0.00" /></div>
<div class="inv-field"><label>Precio 2</label><input type="number" id="newPrice2" step="0.01" placeholder="0.00" /></div>
<div class="inv-field"><label>Precio 3</label><input type="number" id="newPrice3" step="0.01" placeholder="0.00" /></div>
<div class="inv-field"><label>Stock Mínimo</label><input type="number" id="newMinStock" placeholder="0" /></div>
<div class="inv-field"><label>Stock Inicial</label><input type="number" id="newInitialStock" placeholder="0" /></div>
<div class="inv-field"><label>Ubicación</label><input type="text" id="newLocation" placeholder="Ej: A-12-3" /></div>
</div>
<div id="createResult" style="margin-top:var(--space-3);min-height:1.5em;"></div>
</div>
<div class="inv-modal__footer">
<button class="btn btn--ghost" onclick="closeCreateModal()">Cancelar</button>
<button class="btn btn--primary" onclick="createItem()">Crear Producto</button>
</div>
</div>
</div>
<!-- Purchase Modal -->
<div class="inv-modal-overlay" id="purchaseModal">
<div class="inv-modal">
<div class="inv-modal__header">
<h3>Registrar Compra / Entrada</h3>
<button class="inv-modal__close" onclick="closePurchaseModal()">&times;</button>
</div>
<div class="inv-modal__body">
<div class="inv-form-grid">
<div class="inv-field"><label>ID Producto *</label><input type="number" id="purchaseItemId" placeholder="ID inventario" /></div>
<div class="inv-field"><label>Cantidad *</label><input type="number" id="purchaseQty" placeholder="Cantidad" /></div>
<div class="inv-field"><label>Costo Unitario *</label><input type="number" id="purchaseCost" step="0.01" placeholder="0.00" /></div>
<div class="inv-field"><label>Factura Proveedor</label><input type="text" id="purchaseInvoice" placeholder="No. factura" /></div>
<div class="inv-field inv-field--full"><label>Notas</label><input type="text" id="purchaseNotes" placeholder="Notas adicionales" /></div>
</div>
<div id="purchaseResult" style="margin-top:var(--space-3);min-height:1.5em;"></div>
</div>
<div class="inv-modal__footer">
<button class="btn btn--ghost" onclick="closePurchaseModal()">Cancelar</button>
<button class="btn btn--primary" onclick="recordPurchase()">Registrar Compra</button>
</div>
</div>
</div>
<!-- Transfer Modal -->
<div class="inv-modal-overlay" id="transferModal">
<div class="inv-modal">
<div class="inv-modal__header">
<h3>Nuevo Traspaso</h3>
<button class="inv-modal__close" onclick="closeTransferModal()">&times;</button>
</div>
<div class="inv-modal__body">
<div class="inv-form-grid">
<div class="inv-field"><label>ID Producto *</label><input type="number" id="transferItemId" placeholder="ID inventario" /></div>
<div class="inv-field"><label>Cantidad *</label><input type="number" id="transferQty" placeholder="Cantidad" /></div>
<div class="inv-field"><label>Sucursal Origen *</label><input type="number" id="transferFrom" placeholder="ID sucursal origen" /></div>
<div class="inv-field"><label>Sucursal Destino *</label><input type="number" id="transferTo" placeholder="ID sucursal destino" /></div>
<div class="inv-field inv-field--full"><label>Notas</label><input type="text" id="transferNotes" placeholder="Notas adicionales" /></div>
</div>
<div id="transferResult" style="margin-top:var(--space-3);min-height:1.5em;"></div>
</div>
<div class="inv-modal__footer">
<button class="btn btn--ghost" onclick="closeTransferModal()">Cancelar</button>
<button class="btn btn--primary" onclick="recordTransfer()">Registrar Traspaso</button>
</div>
</div>
</div>
<!-- Adjustment Modal -->
<div class="inv-modal-overlay" id="adjustmentModal">
<div class="inv-modal">
<div class="inv-modal__header">
<h3>Nuevo Ajuste</h3>
<button class="inv-modal__close" onclick="closeAdjustmentModal()">&times;</button>
</div>
<div class="inv-modal__body">
<div class="inv-form-grid">
<div class="inv-field"><label>ID Producto *</label><input type="number" id="adjustItemId" placeholder="ID inventario" /></div>
<div class="inv-field"><label>Cantidad * (negativo=salida)</label><input type="number" id="adjustQty" placeholder="Ej: -3 o +5" /></div>
<div class="inv-field inv-field--full"><label>Razón / Motivo *</label><input type="text" id="adjustReason" placeholder="Motivo del ajuste (obligatorio)" /></div>
</div>
<div id="adjustResult" style="margin-top:var(--space-3);min-height:1.5em;"></div>
</div>
<div class="inv-modal__footer">
<button class="btn btn--ghost" onclick="closeAdjustmentModal()">Cancelar</button>
<button class="btn btn--primary" onclick="recordAdjustment()">Registrar Ajuste</button>
</div>
</div>
</div>
<!-- Physical Count Modal -->
<div class="inv-modal-overlay" id="countModal">
<div class="inv-modal inv-modal--wide">
<div class="inv-modal__header">
<h3>Conteo Físico</h3>
<button class="inv-modal__close" onclick="closeCountModal()">&times;</button>
</div>
<div class="inv-modal__body">
<div id="countLines"></div>
<button class="btn btn--ghost btn--sm" onclick="addCountLine()" style="margin-top:var(--space-2);">+ Agregar Línea</button>
<div id="countResults" style="margin-top:var(--space-4);"></div>
</div>
<div class="inv-modal__footer">
<button class="btn btn--ghost" onclick="closeCountModal()">Cerrar</button>
<button class="btn btn--primary" onclick="startPhysicalCount()">Iniciar Conteo</button>
</div>
</div>
</div>
<!-- History Modal -->
<div class="inv-modal-overlay" id="historyModal">
<div class="inv-modal inv-modal--wide">
<div class="inv-modal__header">
<h3>Historial de Movimientos</h3>
<button class="inv-modal__close" onclick="closeHistoryModal()">&times;</button>
</div>
<div class="inv-modal__body" id="historyContent">
</div>
<div class="inv-modal__footer">
<button class="btn btn--ghost" onclick="closeHistoryModal()">Cerrar</button>
</div>
</div>
</div>
<!-- Offline Banner -->
<div id="offlineBanner" class="banner banner--warning" style="display:none;position:fixed;top:0;left:0;right:0;z-index:9999;border-radius:0;animation:none;">
<span class="banner__icon"></span>