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
284 lines
9.4 KiB
HTML
284 lines
9.4 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 — Tarjeta Métrica</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);
|
|
}
|
|
|
|
/* ── Metric Card Grid ── */
|
|
.metrics-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
|
gap: var(--space-5);
|
|
}
|
|
|
|
/* ── Metric Card ── */
|
|
.metric-card {
|
|
background: var(--color-bg-elevated);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-lg);
|
|
padding: var(--space-5) var(--space-5) var(--space-4);
|
|
transition: var(--transition-normal);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.metric-card:hover {
|
|
border-color: var(--color-border-accent);
|
|
box-shadow: var(--shadow-md);
|
|
transform: translateY(-2px);
|
|
}
|
|
.metric-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0; left: 0; right: 0;
|
|
height: 3px;
|
|
background: var(--color-primary);
|
|
opacity: 0;
|
|
transition: var(--transition-fast);
|
|
}
|
|
.metric-card:hover::before { opacity: 1; }
|
|
|
|
.metric-header {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
margin-bottom: var(--space-1);
|
|
}
|
|
|
|
.metric-value {
|
|
font-family: var(--font-heading);
|
|
font-size: var(--text-h2);
|
|
font-weight: var(--heading-weight-primary);
|
|
line-height: 1.1;
|
|
color: var(--color-text-primary);
|
|
letter-spacing: var(--tracking-tight);
|
|
}
|
|
|
|
.metric-trend {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--space-1);
|
|
padding: var(--space-1) var(--space-2);
|
|
border-radius: var(--radius-full);
|
|
font-size: var(--text-caption);
|
|
font-weight: var(--font-weight-semibold);
|
|
line-height: 1;
|
|
flex-shrink: 0;
|
|
margin-top: var(--space-1);
|
|
}
|
|
.metric-trend.up {
|
|
background: var(--color-success-light);
|
|
color: var(--color-success-dark);
|
|
}
|
|
.metric-trend.down {
|
|
background: var(--color-error-light);
|
|
color: var(--color-error-dark);
|
|
}
|
|
.metric-trend .arrow {
|
|
font-size: 0.875rem;
|
|
line-height: 1;
|
|
}
|
|
|
|
.metric-label {
|
|
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-4);
|
|
}
|
|
|
|
/* ── Progress Bar ── */
|
|
.metric-progress {
|
|
margin-top: auto;
|
|
}
|
|
.progress-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: var(--space-1);
|
|
}
|
|
.progress-text {
|
|
font-size: var(--text-caption);
|
|
color: var(--color-text-muted);
|
|
}
|
|
.progress-value {
|
|
font-size: var(--text-caption);
|
|
font-weight: var(--font-weight-semibold);
|
|
color: var(--color-text-secondary);
|
|
}
|
|
.progress-track {
|
|
width: 100%;
|
|
height: 6px;
|
|
background: var(--color-surface-3);
|
|
border-radius: var(--radius-full);
|
|
overflow: hidden;
|
|
}
|
|
.progress-fill {
|
|
height: 100%;
|
|
border-radius: var(--radius-full);
|
|
background: var(--color-primary);
|
|
transition: width 0.8s var(--ease-out);
|
|
width: 0;
|
|
}
|
|
.progress-fill.success { background: var(--color-success); }
|
|
.progress-fill.warning { background: var(--color-warning); }
|
|
.progress-fill.danger { background: var(--color-error); }
|
|
|
|
/* ── Icon container ── */
|
|
.metric-icon {
|
|
width: 40px; height: 40px;
|
|
display: flex; align-items: center; justify-content: center;
|
|
border-radius: var(--radius-md);
|
|
background: var(--color-primary-muted);
|
|
color: var(--color-primary);
|
|
font-size: 1.25rem;
|
|
flex-shrink: 0;
|
|
margin-bottom: var(--space-3);
|
|
}
|
|
</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>Tarjeta Métrica</h1>
|
|
<p class="subtitle">Tarjetas de KPI con valor principal, tendencia y barra de progreso vs meta.</p>
|
|
|
|
<section>
|
|
<h2>Dashboard de Ventas</h2>
|
|
<div class="metrics-grid">
|
|
|
|
<!-- Card 1: Ventas Hoy -->
|
|
<div class="metric-card">
|
|
<div class="metric-icon">💰</div>
|
|
<div class="metric-header">
|
|
<span class="metric-value">$48,250</span>
|
|
<span class="metric-trend up"><span class="arrow">▲</span> 12.5%</span>
|
|
</div>
|
|
<div class="metric-label">Ventas Hoy</div>
|
|
<div class="metric-progress">
|
|
<div class="progress-header">
|
|
<span class="progress-text">Meta diaria</span>
|
|
<span class="progress-value">85%</span>
|
|
</div>
|
|
<div class="progress-track">
|
|
<div class="progress-fill" data-width="85"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card 2: Ticket Promedio -->
|
|
<div class="metric-card">
|
|
<div class="metric-icon">🧾</div>
|
|
<div class="metric-header">
|
|
<span class="metric-value">$1,285</span>
|
|
<span class="metric-trend up"><span class="arrow">▲</span> 3.2%</span>
|
|
</div>
|
|
<div class="metric-label">Ticket Promedio</div>
|
|
<div class="metric-progress">
|
|
<div class="progress-header">
|
|
<span class="progress-text">Meta $1,500</span>
|
|
<span class="progress-value">86%</span>
|
|
</div>
|
|
<div class="progress-track">
|
|
<div class="progress-fill" data-width="86"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card 3: Margen Promedio -->
|
|
<div class="metric-card">
|
|
<div class="metric-icon">📊</div>
|
|
<div class="metric-header">
|
|
<span class="metric-value">32.4%</span>
|
|
<span class="metric-trend down"><span class="arrow">▼</span> 1.8%</span>
|
|
</div>
|
|
<div class="metric-label">Margen Promedio</div>
|
|
<div class="metric-progress">
|
|
<div class="progress-header">
|
|
<span class="progress-text">Meta 35%</span>
|
|
<span class="progress-value">93%</span>
|
|
</div>
|
|
<div class="progress-track">
|
|
<div class="progress-fill warning" data-width="93"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card 4: Efectivo en Caja -->
|
|
<div class="metric-card">
|
|
<div class="metric-icon">🏦</div>
|
|
<div class="metric-header">
|
|
<span class="metric-value">$15,800</span>
|
|
<span class="metric-trend up"><span class="arrow">▲</span> 8.7%</span>
|
|
</div>
|
|
<div class="metric-label">Efectivo en Caja</div>
|
|
<div class="metric-progress">
|
|
<div class="progress-header">
|
|
<span class="progress-text">Corte anterior</span>
|
|
<span class="progress-value">105%</span>
|
|
</div>
|
|
<div class="progress-track">
|
|
<div class="progress-fill success" data-width="100"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<script>
|
|
// Animate progress bars on load
|
|
window.addEventListener('DOMContentLoaded', () => {
|
|
setTimeout(() => {
|
|
document.querySelectorAll('.progress-fill').forEach(bar => {
|
|
bar.style.width = bar.dataset.width + '%';
|
|
});
|
|
}, 100);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|