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

feat(ui): helpers pos-utils.js (barcode feedback, saved filters, resizable columns, density/touch toggles, notifications dropdown, ticket preview, image comparator, infinite scroll, sparklines) + inventory.html modals + pos-ui.css timeline & kanban

Browse Source
This commit is contained in:
consultoria-as
2026-05-26 09:28:35 +00:00
parent 61bf84b2dc
commit 68d6f81671
4 changed files with 403 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
pos/templates/inventory.html
View File

@@ -34,6 +34,16 @@
<span class="theme-bar__label">Sucursal Centro &mdash; Usuario: H. García</span>
</div>
<div class="theme-bar__right">
<button class="icon-btn" id="notifDropdownBtn" title="Notificaciones" onclick="NotificationsDropdown.toggle()" style="margin-right:8px;">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
<span class="notif-dot" id="headerNotifDot"></span>
</button>
<button class="icon-btn" title="Modo táctil" onclick="TouchModeToggle.set(document.documentElement.getAttribute('data-touch') !== 'true')" style="margin-right:4px;">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="2" width="16" height="20" rx="2" ry="2"/><line x1="12" y1="18" x2="12.01" y2="18"/></svg>
</button>
<button class="icon-btn" title="Densidad" onclick="DensityToggle.set(document.documentElement.getAttribute('data-density') === 'compact' ? 'normal' : 'compact')" style="margin-right:8px;">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" y1="6" x2="20" y2="6"/><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="18" x2="20" y2="18"/></svg>
</button>
<span class="theme-bar__label">Tema:</span>
<button class="theme-btn theme-btn--industrial is-active" data-theme-target="industrial" onclick="setTheme('industrial')">
<span class="theme-btn__swatch"></span>
@@ -908,6 +918,60 @@
</div>
</div>
<!-- ══════════ Product Timeline Modal ══════════ -->
<div class="inv-modal-overlay" id="productTimelineModal">
<div class="inv-modal inv-modal--wide">
<div class="inv-modal__header">
<h3>Timeline del Producto</h3>
<button class="inv-modal__close" onclick="document.getElementById('productTimelineModal').classList.remove('is-open')">&times;</button>
</div>
<div class="inv-modal__body" id="productTimelineBody">
<div class="timeline">
<div class="timeline__item"><div class="timeline__dot"></div><div class="timeline__content"><div class="timeline__date">--</div><div class="timeline__title">Producto creado</div></div></div>
</div>
</div>
<div class="inv-modal__footer">
<button class="btn btn--ghost" onclick="document.getElementById('productTimelineModal').classList.remove('is-open')">Cerrar</button>
</div>
</div>
</div>
<!-- ══════════ Image Comparator Modal ══════════ -->
<div class="inv-modal-overlay" id="imageCompareModal">
<div class="inv-modal">
<div class="inv-modal__header">
<h3>Comparar Imágenes</h3>
<button class="inv-modal__close" onclick="document.getElementById('imageCompareModal').classList.remove('is-open')">&times;</button>
</div>
<div class="inv-modal__body">
<div class="img-compare" id="imgCompareContainer" style="max-height:400px;">
<img class="img-compare__img" src="" id="imgCompareNew" alt="Nueva" />
<div class="img-compare__overlay">
<img src="" id="imgCompareOld" alt="Anterior" />
</div>
<div class="img-compare__handle">↔</div>
</div>
</div>
</div>
</div>
<!-- ══════════ Ticket Preview Modal ══════════ -->
<div class="inv-modal-overlay" id="ticketPreviewModal">
<div class="inv-modal" style="max-width:400px;">
<div class="inv-modal__header">
<h3>Vista previa del ticket</h3>
<button class="inv-modal__close" onclick="document.getElementById('ticketPreviewModal').classList.remove('is-open')">&times;</button>
</div>
<div class="inv-modal__body" id="ticketPreviewBody">
<!-- Populated by JS -->
</div>
<div class="inv-modal__footer">
<button class="btn btn--ghost" onclick="document.getElementById('ticketPreviewModal').classList.remove('is-open')">Cerrar</button>
<button class="btn btn--primary" onclick="window.print()">Imprimir</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>