ccd3962458
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
353 lines
12 KiB
HTML
353 lines
12 KiB
HTML
<!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 — Badge CFDI</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);
|
|
}
|
|
|
|
/* Badge base */
|
|
.badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
padding: var(--space-1) var(--space-3);
|
|
border-radius: var(--radius-full);
|
|
font-size: var(--text-caption);
|
|
font-weight: var(--font-weight-semibold);
|
|
letter-spacing: var(--tracking-wide);
|
|
text-transform: uppercase;
|
|
white-space: nowrap;
|
|
transition: var(--transition-fast);
|
|
border: 1px solid transparent;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* Dot indicator */
|
|
.badge .dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: var(--radius-full);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Pendiente — Blue / Primary */
|
|
.badge-pendiente {
|
|
background: var(--color-primary-muted);
|
|
color: var(--color-primary);
|
|
border-color: var(--color-primary);
|
|
}
|
|
.badge-pendiente .dot {
|
|
background: var(--color-primary);
|
|
}
|
|
|
|
/* Enviando — Yellow / Warning */
|
|
.badge-enviando {
|
|
background: var(--color-warning-light);
|
|
color: var(--color-warning-dark);
|
|
border-color: var(--color-warning);
|
|
}
|
|
.badge-enviando .dot {
|
|
background: var(--color-warning);
|
|
animation: pulse-dot 1.5s ease-in-out infinite;
|
|
}
|
|
|
|
/* Timbrada — Green / Success */
|
|
.badge-timbrada {
|
|
background: var(--color-success-light);
|
|
color: var(--color-success-dark);
|
|
border-color: var(--color-success);
|
|
}
|
|
.badge-timbrada .dot {
|
|
background: var(--color-success);
|
|
}
|
|
|
|
/* Fallida — Red / Error */
|
|
.badge-fallida {
|
|
background: var(--color-error-light);
|
|
color: var(--color-error-dark);
|
|
border-color: var(--color-error);
|
|
}
|
|
.badge-fallida .dot {
|
|
background: var(--color-error);
|
|
}
|
|
|
|
/* Cancelada — Gray / Muted */
|
|
.badge-cancelada {
|
|
background: var(--color-surface-2);
|
|
color: var(--color-text-muted);
|
|
border-color: var(--color-border-strong);
|
|
}
|
|
.badge-cancelada .dot {
|
|
background: var(--color-text-muted);
|
|
}
|
|
|
|
/* Pulse animation for Enviando */
|
|
@keyframes pulse-dot {
|
|
0%, 100% { opacity: 1; transform: scale(1); }
|
|
50% { opacity: 0.4; transform: scale(0.75); }
|
|
}
|
|
|
|
/* Badge gallery */
|
|
.badge-gallery {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--space-3);
|
|
align-items: center;
|
|
padding: var(--space-5);
|
|
background: var(--color-surface-1);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-lg);
|
|
}
|
|
|
|
/* Badge sizes */
|
|
.badge-lg {
|
|
padding: var(--space-2) var(--space-4);
|
|
font-size: var(--text-body-sm);
|
|
}
|
|
.badge-lg .dot {
|
|
width: 10px;
|
|
height: 10px;
|
|
}
|
|
|
|
/* CFDI Table */
|
|
.cfdi-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
background: var(--color-bg-elevated);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-lg);
|
|
overflow: hidden;
|
|
}
|
|
.cfdi-table thead {
|
|
background: var(--color-surface-1);
|
|
}
|
|
.cfdi-table th {
|
|
padding: var(--space-3) var(--space-4);
|
|
text-align: left;
|
|
font-size: var(--text-caption);
|
|
font-weight: var(--font-weight-semibold);
|
|
color: var(--color-text-muted);
|
|
text-transform: uppercase;
|
|
letter-spacing: var(--tracking-wider);
|
|
border-bottom: 1px solid var(--color-border);
|
|
}
|
|
.cfdi-table td {
|
|
padding: var(--space-3) var(--space-4);
|
|
font-size: var(--text-body-sm);
|
|
color: var(--color-text-secondary);
|
|
border-bottom: 1px solid var(--color-border);
|
|
vertical-align: middle;
|
|
}
|
|
.cfdi-table tbody tr {
|
|
transition: var(--transition-fast);
|
|
}
|
|
.cfdi-table tbody tr:hover {
|
|
background: var(--color-primary-muted);
|
|
}
|
|
.cfdi-table tbody tr:last-child td {
|
|
border-bottom: none;
|
|
}
|
|
.cfdi-table .folio {
|
|
font-family: var(--font-mono);
|
|
font-weight: var(--font-weight-semibold);
|
|
color: var(--color-text-primary);
|
|
}
|
|
.cfdi-table .uuid {
|
|
font-family: var(--font-mono);
|
|
font-size: var(--text-caption);
|
|
color: var(--color-text-muted);
|
|
}
|
|
.cfdi-table .amount {
|
|
font-family: var(--font-mono);
|
|
text-align: right;
|
|
font-weight: var(--font-weight-semibold);
|
|
color: var(--color-text-primary);
|
|
}
|
|
.cfdi-table th.col-amount { text-align: right; }
|
|
|
|
/* Date column */
|
|
.cfdi-table .date {
|
|
font-size: var(--text-caption);
|
|
color: var(--color-text-muted);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Legend */
|
|
.legend {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--space-4);
|
|
padding: var(--space-4) var(--space-5);
|
|
background: var(--color-surface-1);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-md);
|
|
}
|
|
.legend-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
font-size: var(--text-caption);
|
|
color: var(--color-text-secondary);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="theme-switcher">
|
|
<button class="active" onclick="document.documentElement.dataset.theme='industrial'; this.classList.add('active'); this.nextElementSibling.classList.remove('active')">🔧 Industrial</button>
|
|
<button onclick="document.documentElement.dataset.theme='modern'; this.classList.add('active'); this.previousElementSibling.classList.remove('active')">⚡ Moderno</button>
|
|
</div>
|
|
|
|
<h1>Badge CFDI</h1>
|
|
<p class="subtitle">Indicadores de estatus para comprobantes fiscales digitales (CFDI)</p>
|
|
|
|
<!-- All badges inline -->
|
|
<section>
|
|
<h2>Variantes de Badge</h2>
|
|
<div class="badge-gallery">
|
|
<span class="badge badge-pendiente"><span class="dot"></span>Pendiente</span>
|
|
<span class="badge badge-enviando"><span class="dot"></span>Enviando</span>
|
|
<span class="badge badge-timbrada"><span class="dot"></span>Timbrada</span>
|
|
<span class="badge badge-fallida"><span class="dot"></span>Fallida</span>
|
|
<span class="badge badge-cancelada"><span class="dot"></span>Cancelada</span>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Large size -->
|
|
<section>
|
|
<h2>Tamaño Grande</h2>
|
|
<div class="badge-gallery">
|
|
<span class="badge badge-lg badge-pendiente"><span class="dot"></span>Pendiente</span>
|
|
<span class="badge badge-lg badge-enviando"><span class="dot"></span>Enviando</span>
|
|
<span class="badge badge-lg badge-timbrada"><span class="dot"></span>Timbrada</span>
|
|
<span class="badge badge-lg badge-fallida"><span class="dot"></span>Fallida</span>
|
|
<span class="badge badge-lg badge-cancelada"><span class="dot"></span>Cancelada</span>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Legend -->
|
|
<section>
|
|
<h2>Leyenda</h2>
|
|
<div class="legend">
|
|
<div class="legend-item"><span class="badge badge-pendiente"><span class="dot"></span>Pendiente</span> Generada, sin enviar al PAC</div>
|
|
<div class="legend-item"><span class="badge badge-enviando"><span class="dot"></span>Enviando</span> En proceso de timbrado</div>
|
|
<div class="legend-item"><span class="badge badge-timbrada"><span class="dot"></span>Timbrada</span> Timbrada correctamente por el SAT</div>
|
|
<div class="legend-item"><span class="badge badge-fallida"><span class="dot"></span>Fallida</span> Error al timbrar</div>
|
|
<div class="legend-item"><span class="badge badge-cancelada"><span class="dot"></span>Cancelada</span> Cancelada ante el SAT</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Table context -->
|
|
<section>
|
|
<h2>En Contexto: Lista de CFDI</h2>
|
|
<table class="cfdi-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Folio</th>
|
|
<th>Cliente</th>
|
|
<th>UUID</th>
|
|
<th>Fecha</th>
|
|
<th class="col-amount">Total</th>
|
|
<th>Estatus</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="folio">FA-00142</td>
|
|
<td>Taller Hermanos López</td>
|
|
<td class="uuid">a8d2e1f4-3b7c-...</td>
|
|
<td class="date">01/Abr/2026</td>
|
|
<td class="amount">$18,450.00</td>
|
|
<td><span class="badge badge-timbrada"><span class="dot"></span>Timbrada</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="folio">FA-00141</td>
|
|
<td>Roberto Méndez G.</td>
|
|
<td class="uuid">c3f1a902-7d4e-...</td>
|
|
<td class="date">01/Abr/2026</td>
|
|
<td class="amount">$4,828.50</td>
|
|
<td><span class="badge badge-enviando"><span class="dot"></span>Enviando</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="folio">FA-00140</td>
|
|
<td>Auto Partes del Norte SA</td>
|
|
<td class="uuid">--</td>
|
|
<td class="date">31/Mar/2026</td>
|
|
<td class="amount">$32,100.00</td>
|
|
<td><span class="badge badge-pendiente"><span class="dot"></span>Pendiente</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="folio">FA-00139</td>
|
|
<td>María Elena Ríos</td>
|
|
<td class="uuid">f7e2d301-1a9b-...</td>
|
|
<td class="date">30/Mar/2026</td>
|
|
<td class="amount">$1,250.00</td>
|
|
<td><span class="badge badge-timbrada"><span class="dot"></span>Timbrada</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="folio">FA-00138</td>
|
|
<td>Servicio Automotriz Reyes</td>
|
|
<td class="uuid">b1c4d5e6-8f2a-...</td>
|
|
<td class="date">29/Mar/2026</td>
|
|
<td class="amount">$7,680.00</td>
|
|
<td><span class="badge badge-fallida"><span class="dot"></span>Fallida</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="folio">FA-00137</td>
|
|
<td>Transportes Garza</td>
|
|
<td class="uuid">e9a8b7c6-5d4f-...</td>
|
|
<td class="date">28/Mar/2026</td>
|
|
<td class="amount">$55,200.00</td>
|
|
<td><span class="badge badge-cancelada"><span class="dot"></span>Cancelada</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="folio">FA-00136</td>
|
|
<td>Refaccionaria Central</td>
|
|
<td class="uuid">d2f3e4a5-6b7c-...</td>
|
|
<td class="date">27/Mar/2026</td>
|
|
<td class="amount">$9,320.00</td>
|
|
<td><span class="badge badge-timbrada"><span class="dot"></span>Timbrada</span></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</section>
|
|
</body>
|
|
</html> |