feat(design): add 16 new components + update 5 pages (ronda 2)
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
283
docs/design/design-system/components/tarjeta-metrica.html
Normal file
283
docs/design/design-system/components/tarjeta-metrica.html
Normal file
@@ -0,0 +1,283 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user