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

feat(design): add 16 new components + update 5 pages (ronda 2)

Browse Source 
Bloqueantes POS: modal-pago, ticket-termico, banner-cliente, fkeys-footer, columnas-costo-margen
Componentes nuevos: calculadora-cambio, panel-deslizante, badge-cfdi, arbol-colapsable, tarjeta-metrica, grafica-barras, selector-periodo, etiqueta-codigo-barras
Estados: estado-vacio, banner-offline, modal-confirmacion
Páginas actualizadas: facturación, contabilidad, dashboard, configuración, reportes
This commit is contained in:
Lucy
2026-04-01 07:06:34 +00:00
parent 380698258a
commit ccd3962458
25 changed files with 7153 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

544
docs/design/design-system/components/ticket-termico.html Normal file
View File

@@ -0,0 +1,544 @@
<!DOCTYPE html>
<html lang="es" data-theme="industrial">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nexus Autoparts — Ticket Térmico</title>
<link rel="stylesheet" href="../tokens/tokens.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: var(--font-body); background: var(--color-bg-base);
color: var(--color-text-primary); padding: var(--space-8);
transition: var(--transition-normal);
}
.theme-switcher {
position: sticky; top: 0; z-index: calc(var(--z-modal) + 10);
display: flex; gap: var(--space-2);
padding: var(--space-3) var(--space-4);
background: var(--color-bg-elevated);
border-bottom: 1px solid var(--color-border);
margin: calc(-1 * var(--space-8)); margin-bottom: var(--space-8);
}
.theme-switcher button {
padding: var(--space-2) var(--space-4);
border: 1px solid var(--color-border);
background: var(--color-bg-base); color: var(--color-text-primary);
border-radius: var(--radius-md); cursor: pointer;
font-family: var(--font-body); font-size: var(--text-body-sm);
transition: var(--transition-fast);
}
.theme-switcher button.active {
background: var(--color-primary); color: var(--color-text-inverse);
border-color: var(--color-primary);
}
h1 { font-family: var(--font-heading); font-size: var(--text-h2);
font-weight: var(--heading-weight-primary); margin-bottom: var(--space-2);
color: var(--color-text-accent); }
.subtitle { color: var(--color-text-muted); font-size: var(--text-body); margin-bottom: var(--space-8); }
section { margin-bottom: var(--space-10); }
section > h2 {
font-family: var(--font-heading); font-size: var(--text-h4);
font-weight: var(--heading-weight-secondary); color: var(--color-text-secondary);
margin-bottom: var(--space-4); padding-bottom: var(--space-2);
border-bottom: 1px solid var(--color-border);
}
.label-text {
font-size: var(--text-caption); color: var(--color-text-muted);
text-transform: uppercase; letter-spacing: var(--tracking-widest);
font-weight: var(--font-weight-semibold); margin-bottom: var(--space-3);
}
/* ====== Ticket Sizes ====== */
.tickets-row {
display: flex; gap: var(--space-8); flex-wrap: wrap;
justify-content: center; align-items: flex-start;
}
.ticket-wrapper {
text-align: center;
}
.ticket-label {
font-size: var(--text-body-sm); font-weight: var(--font-weight-semibold);
color: var(--color-text-accent); margin-bottom: var(--space-3);
text-transform: uppercase; letter-spacing: var(--tracking-wide);
}
/* ====== Ticket Base ====== */
.ticket {
background: #ffffff; color: #000000;
font-family: 'Courier New', 'Consolas', monospace;
font-size: 11px; line-height: 1.4;
padding: 12px; text-align: left;
border: 1px dashed #ccc;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.ticket-58 { width: 219px; /* 58mm ≈ 219px at 96dpi */ }
.ticket-80 { width: 302px; /* 80mm ≈ 302px at 96dpi */ }
.ticket .store-name {
font-size: 14px; font-weight: bold; text-align: center;
margin-bottom: 2px;
}
.ticket .store-tagline {
font-size: 9px; text-align: center; color: #555;
margin-bottom: 4px;
}
.ticket .store-info {
font-size: 9px; text-align: center; color: #333;
margin-bottom: 6px; line-height: 1.3;
}
.ticket .divider {
border: none; border-top: 1px dashed #999;
margin: 6px 0;
}
.ticket .divider-double {
border: none; border-top: 2px solid #333;
margin: 6px 0;
}
.ticket .ticket-row {
display: flex; justify-content: space-between;
}
.ticket .ticket-row .left { text-align: left; }
.ticket .ticket-row .right { text-align: right; }
.ticket .folio-line {
font-size: 10px; font-weight: bold;
display: flex; justify-content: space-between;
margin-bottom: 4px;
}
.ticket .item-line {
margin-bottom: 3px;
}
.ticket .item-name {
font-size: 10px; font-weight: bold;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ticket .item-detail {
display: flex; justify-content: space-between;
font-size: 10px; color: #333;
}
.ticket .item-sku {
font-size: 8px; color: #777;
}
.ticket .total-section { margin-top: 4px; }
.ticket .total-line {
display: flex; justify-content: space-between;
font-size: 11px;
}
.ticket .total-line.grand {
font-size: 14px; font-weight: bold;
margin-top: 2px; padding-top: 2px;
border-top: 1px solid #333;
}
.ticket .payment-section {
margin-top: 4px; font-size: 10px;
}
.ticket .footer-section {
text-align: center; margin-top: 8px;
font-size: 9px; color: #555;
}
.ticket .footer-section .thanks {
font-size: 11px; font-weight: bold; color: #000;
margin-bottom: 2px;
}
.ticket .barcode {
text-align: center; margin-top: 6px;
font-size: 24px; letter-spacing: 2px;
font-family: 'Libre Barcode 39', monospace;
}
.ticket .barcode-text {
font-size: 8px; text-align: center; color: #666;
}
/* ====== 80mm extras ====== */
.ticket-80 .item-line-wide {
display: grid; grid-template-columns: auto 1fr auto auto;
gap: 8px; align-items: baseline;
font-size: 10px; margin-bottom: 3px;
}
.ticket-80 .item-line-wide .qty {
font-weight: bold; min-width: 24px; text-align: right;
}
.ticket-80 .item-line-wide .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticket-80 .item-line-wide .price { text-align: right; min-width: 55px; }
.ticket-80 .item-line-wide .subtotal { text-align: right; font-weight: bold; min-width: 60px; }
/* ====== Print Styles ====== */
@media print {
body { background: #fff; padding: 0; }
.theme-switcher, h1, .subtitle, section > h2,
.label-text, .ticket-wrapper .ticket-label,
.print-btn { display: none !important; }
.tickets-row { justify-content: flex-start; }
.ticket {
border: none; box-shadow: none; padding: 4px;
page-break-inside: avoid;
}
}
/* ====== Print Button ====== */
.print-btn {
display: inline-flex; align-items: center; gap: var(--space-2);
padding: var(--space-3) var(--space-6);
background: var(--btn-primary-bg); color: var(--btn-primary-text);
font-family: var(--font-body); font-size: var(--text-body);
font-weight: var(--font-weight-semibold);
border: none; border-radius: var(--radius-md);
cursor: pointer; transition: var(--transition-fast);
margin-bottom: var(--space-4);
}
.print-btn:hover { background: var(--btn-primary-bg-hover); }
</style>
</head>
<body>
<!-- Theme Switcher -->
<div class="theme-switcher">
<button class="active" onclick="setTheme('industrial')">A — Industrial Robusto</button>
<button onclick="setTheme('modern')">B — Técnico Moderno</button>
</div>
<h1>Ticket Térmico</h1>
<p class="subtitle">Layout de impresión para rollos de 58mm y 80mm. Fuente monoespaciada, CSS @media print.</p>
<button class="print-btn" onclick="window.print()">&#x1F5A8; Imprimir Preview</button>
<!-- ============================================== -->
<!-- SECTION: 58mm vs 80mm Side by Side -->
<!-- ============================================== -->
<section>
<h2>Comparativa: 58mm vs 80mm</h2>
<p class="label-text">Ambos formatos con los mismos datos de venta</p>
<div class="tickets-row">
<!-- ===== 58mm Ticket ===== -->
<div class="ticket-wrapper">
<div class="ticket-label">58mm (Mini Printer)</div>
<div class="ticket ticket-58">
<div class="store-name">NEXUS AUTOPARTS</div>
<div class="store-tagline">Tu conexión con las refacciones</div>
<div class="store-info">
Av. Insurgentes Sur 1234<br>
Col. Del Valle, CDMX 03100<br>
Tel: (55) 1234-5678<br>
RFC: NAU210315XX1
</div>
<hr class="divider-double">
<div class="folio-line">
<span>VENTA: V-0847</span>
<span>01/04/2026</span>
</div>
<div class="ticket-row" style="font-size: 9px; color: #555; margin-bottom: 4px;">
<span>Cajero: Carlos M.</span>
<span>14:32</span>
</div>
<hr class="divider">
<!-- Items -->
<div class="item-line">
<div class="item-name">Balatas cer. del. Brembo</div>
<div class="item-sku">SKU: BRM-P68034</div>
<div class="item-detail">
<span>2 x $1,250.00</span>
<span>$2,500.00</span>
</div>
</div>
<div class="item-line">
<div class="item-name">Filtro aceite Wix WL7200</div>
<div class="item-sku">SKU: WIX-7200</div>
<div class="item-detail">
<span>1 x $185.00</span>
<span>$185.00</span>
</div>
</div>
<div class="item-line">
<div class="item-name">Amort. trasero Monroe OESpec</div>
<div class="item-sku">SKU: MON-72364</div>
<div class="item-detail">
<span>2 x $1,071.25</span>
<span>$2,142.50</span>
</div>
</div>
<hr class="divider-double">
<!-- Totals -->
<div class="total-section">
<div class="total-line">
<span>Subtotal:</span><span>$4,161.64</span>
</div>
<div class="total-line">
<span>IVA 16%:</span><span>$665.86</span>
</div>
<div class="total-line grand">
<span>TOTAL:</span><span>$4,827.50</span>
</div>
</div>
<hr class="divider">
<!-- Payment -->
<div class="payment-section">
<div class="ticket-row">
<span>Forma pago:</span><span>Efectivo</span>
</div>
<div class="ticket-row">
<span>Recibido:</span><span>$5,000.00</span>
</div>
<div class="ticket-row" style="font-weight: bold;">
<span>Cambio:</span><span>$172.50</span>
</div>
</div>
<hr class="divider">
<div class="footer-section">
<div class="thanks">¡Gracias por su compra!</div>
<div>Garantía sujeta a condiciones</div>
<div>del fabricante. Conserve su ticket.</div>
<div style="margin-top: 4px;">www.nexusautoparts.com</div>
</div>
<div class="barcode">||||| |||| |||||</div>
<div class="barcode-text">V-2026-0847</div>
</div>
</div>
<!-- ===== 80mm Ticket ===== -->
<div class="ticket-wrapper">
<div class="ticket-label">80mm (Standard POS)</div>
<div class="ticket ticket-80">
<div class="store-name">NEXUS AUTOPARTS</div>
<div class="store-tagline">Tu conexión con las refacciones</div>
<div class="store-info">
Av. Insurgentes Sur 1234, Col. Del Valle<br>
Ciudad de México, CP 03100 | Tel: (55) 1234-5678<br>
RFC: NAU210315XX1
</div>
<hr class="divider-double">
<div class="folio-line">
<span>VENTA: V-2026-0847</span>
<span>01/Abr/2026 14:32</span>
</div>
<div class="ticket-row" style="font-size: 9px; color: #555; margin-bottom: 4px;">
<span>Cajero: Carlos Martínez</span>
<span>Sucursal: Matriz</span>
</div>
<div class="ticket-row" style="font-size: 9px; color: #555; margin-bottom: 2px;">
<span>Cliente: Taller Automotriz García</span>
<span>RFC: TAU150301XX1</span>
</div>
<hr class="divider">
<!-- Column Headers -->
<div class="item-line-wide" style="font-weight: bold; font-size: 9px; color: #555; text-transform: uppercase;">
<span class="qty">Cant</span>
<span class="name">Descripción</span>
<span class="price">P. Unit</span>
<span class="subtotal">Importe</span>
</div>
<hr class="divider" style="margin: 2px 0;">
<!-- Items -->
<div class="item-line-wide">
<span class="qty">2</span>
<span class="name">Balatas cerám. del. Brembo P68034</span>
<span class="price">$1,250.00</span>
<span class="subtotal">$2,500.00</span>
</div>
<div class="item-line-wide">
<span class="qty">1</span>
<span class="name">Filtro aceite Wix WL7200</span>
<span class="price">$185.00</span>
<span class="subtotal">$185.00</span>
</div>
<div class="item-line-wide">
<span class="qty">2</span>
<span class="name">Amortiguador tras. Monroe OESpec 72364</span>
<span class="price">$1,071.25</span>
<span class="subtotal">$2,142.50</span>
</div>
<hr class="divider-double">
<!-- Totals -->
<div class="total-section">
<div class="total-line">
<span>Subtotal (3 artículos, 5 piezas):</span><span>$4,161.64</span>
</div>
<div class="total-line">
<span>IVA 16%:</span><span>$665.86</span>
</div>
<div class="total-line" style="font-size: 10px; color: #777;">
<span>Descuento:</span><span>$0.00</span>
</div>
<div class="total-line grand">
<span>TOTAL:</span><span>$4,827.50</span>
</div>
</div>
<hr class="divider">
<!-- Payment -->
<div class="payment-section">
<div class="ticket-row">
<span>Forma de pago:</span><span>01 — Efectivo</span>
</div>
<div class="ticket-row">
<span>Monto recibido:</span><span>$5,000.00</span>
</div>
<div class="ticket-row" style="font-weight: bold;">
<span>Cambio:</span><span>$172.50</span>
</div>
</div>
<hr class="divider">
<!-- CFDI -->
<div style="font-size: 9px; color: #555; text-align: center; margin: 4px 0;">
CFDI Timbrado: UUID a1b2c3d4-e5f6-7890-abcd-ef1234567890<br>
Uso CFDI: G03 — Gastos en general<br>
Régimen: 601 — General de Ley
</div>
<hr class="divider">
<div class="footer-section">
<div class="thanks">¡Gracias por su compra!</div>
<div>Garantía sujeta a condiciones del fabricante.</div>
<div>Conserve su ticket como comprobante.</div>
<div>Cambios y devoluciones: 15 días con ticket.</div>
<div style="margin-top: 4px;">www.nexusautoparts.com</div>
</div>
<div class="barcode">||||| |||| ||||| ||| ||||</div>
<div class="barcode-text">V-2026-0847</div>
</div>
</div>
</div>
</section>
<!-- ============================================== -->
<!-- SECTION: Ticket Variants -->
<!-- ============================================== -->
<section>
<h2>Variantes de Ticket</h2>
<p class="label-text">Cotización y Corte de Caja</p>
<div class="tickets-row">
<!-- Cotización -->
<div class="ticket-wrapper">
<div class="ticket-label">Cotización (80mm)</div>
<div class="ticket ticket-80">
<div class="store-name">NEXUS AUTOPARTS</div>
<div class="store-info">Av. Insurgentes Sur 1234 | Tel: (55) 1234-5678</div>
<hr class="divider-double">
<div style="text-align: center; font-weight: bold; font-size: 13px; margin: 4px 0;">
*** COTIZACIÓN ***
</div>
<div class="folio-line">
<span>COT-2026-0312</span>
<span>01/Abr/2026</span>
</div>
<div style="font-size: 9px; color: #555; margin-bottom: 4px;">
Cliente: Taller Automotriz García | Vigencia: 7 días
</div>
<hr class="divider">
<div class="item-line-wide" style="font-weight: bold; font-size: 9px;">
<span class="qty">Cant</span><span class="name">Descripción</span>
<span class="price">P. Unit</span><span class="subtotal">Importe</span>
</div>
<hr class="divider" style="margin: 2px 0;">
<div class="item-line-wide">
<span class="qty">2</span><span class="name">Balatas cerám. del. Brembo</span>
<span class="price">$1,250.00</span><span class="subtotal">$2,500.00</span>
</div>
<div class="item-line-wide">
<span class="qty">1</span><span class="name">Filtro aceite Wix WL7200</span>
<span class="price">$185.00</span><span class="subtotal">$185.00</span>
</div>
<hr class="divider-double">
<div class="total-line grand">
<span>TOTAL:</span><span>$2,685.00</span>
</div>
<div style="font-size: 9px; color: #555; text-align: center; margin-top: 6px;">
Precios sujetos a cambio sin previo aviso.<br>
Esta cotización NO es un comprobante fiscal.
</div>
</div>
</div>
<!-- Corte de Caja -->
<div class="ticket-wrapper">
<div class="ticket-label">Corte de Caja (80mm)</div>
<div class="ticket ticket-80">
<div class="store-name">NEXUS AUTOPARTS</div>
<div class="store-info">Sucursal: Matriz | Caja: 01</div>
<hr class="divider-double">
<div style="text-align: center; font-weight: bold; font-size: 13px; margin: 4px 0;">
*** CORTE DE CAJA ***
</div>
<div class="folio-line">
<span>Cajero: Carlos M.</span>
<span>01/Abr/2026</span>
</div>
<div style="font-size: 9px; color: #555; margin-bottom: 4px;">
Apertura: 08:00 | Cierre: 20:00
</div>
<hr class="divider">
<div style="font-weight: bold; font-size: 10px; margin-bottom: 4px;">RESUMEN DE VENTAS</div>
<div class="ticket-row"><span>Ventas realizadas:</span><span>47</span></div>
<div class="ticket-row"><span>Artículos vendidos:</span><span>128</span></div>
<div class="ticket-row"><span>Cancelaciones:</span><span>2</span></div>
<div class="ticket-row"><span>Devoluciones:</span><span>1</span></div>
<hr class="divider">
<div style="font-weight: bold; font-size: 10px; margin-bottom: 4px;">FORMAS DE PAGO</div>
<div class="ticket-row"><span>Efectivo:</span><span>$35,420.00</span></div>
<div class="ticket-row"><span>Tarjeta crédito:</span><span>$12,850.00</span></div>
<div class="ticket-row"><span>Tarjeta débito:</span><span>$8,200.00</span></div>
<div class="ticket-row"><span>Transferencia:</span><span>$5,670.00</span></div>
<hr class="divider-double">
<div class="total-line grand"><span>TOTAL:</span><span>$62,140.00</span></div>
<hr class="divider">
<div style="font-weight: bold; font-size: 10px; margin-bottom: 4px;">EFECTIVO EN CAJA</div>
<div class="ticket-row"><span>Fondo apertura:</span><span>$3,000.00</span></div>
<div class="ticket-row"><span>+ Cobros efectivo:</span><span>$35,420.00</span></div>
<div class="ticket-row"><span>- Retiros:</span><span>$15,000.00</span></div>
<div class="ticket-row" style="font-weight: bold;"><span>Debe haber:</span><span>$23,420.00</span></div>
<div class="ticket-row"><span>Conteo físico:</span><span>$23,380.00</span></div>
<div class="ticket-row" style="color: #c00; font-weight: bold;"><span>Diferencia:</span><span>-$40.00</span></div>
<hr class="divider">
<div class="footer-section">
<div style="margin-top: 20px; font-size: 9px;">
Firma cajero: _______________<br><br>
Firma supervisor: _______________
</div>
</div>
</div>
</div>
</div>
</section>
<script>
function setTheme(theme) {
document.documentElement.setAttribute('data-theme', theme);
document.querySelectorAll('.theme-switcher button').forEach(b => b.classList.remove('active'));
event.target.classList.add('active');
}
</script>
</body>
</html>