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

feat(ui): dashboard skeletons, empty states, Cmd+K registration, improved loading states

Browse Source
This commit is contained in:
consultoria-as
2026-05-26 08:42:17 +00:00
parent 23dbf54f3f
commit 7020890b0e
2 changed files with 54 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
pos/static/js/dashboard.js
View File

@@ -208,7 +208,7 @@ const Dashboard = (() => {
function setKpiError(valueId, metaId) {
const v = document.getElementById(valueId);
const m = document.getElementById(metaId);
if (v) v.textContent = '--';
if (v) v.innerHTML = '<span style="color:var(--color-error)">--</span>';
if (m) m.innerHTML = '<span class="kpi-meta-text" style="color:var(--color-error)">Error al cargar</span>';
}
@@ -225,7 +225,12 @@ const Dashboard = (() => {
if (!container) return;
if (!registers || registers.length === 0) {
container.innerHTML = '<div class="rank-item" style="justify-content:center;color:var(--color-text-muted);font-size:var(--text-caption);">Sin cajas registradas hoy</div>';
container.innerHTML = renderEmptyState({
icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><path d="M8 21h8M12 17v4"/></svg>',
title: 'Sin cajas hoy',
subtitle: 'Ninguna caja ha sido abierta el día de hoy.',
action: '<a href="/pos/sale" class="btn btn--primary btn--sm">Abrir POS</a>'
});
return;
}
@@ -326,7 +331,12 @@ const Dashboard = (() => {
if (!container) return;
if (!data || !data.data || data.data.length === 0) {
container.innerHTML = '<div class="rank-item" style="justify-content:center;color:var(--color-text-muted);font-size:var(--text-caption);">Sin ventas hoy</div>';
container.innerHTML = renderEmptyState({
icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><path d="M8 21h8M12 17v4"/></svg>',
title: 'Sin ventas hoy',
subtitle: 'Aún no hay transacciones registradas el día de hoy.',
action: '<a href="/pos/sale" class="btn btn--primary btn--sm">Nueva venta</a>'
});
return;
}
@@ -353,7 +363,11 @@ const Dashboard = (() => {
const sorted = Object.values(productMap).sort((a, b) => b.revenue - a.revenue).slice(0, 5);
if (sorted.length === 0) {
container.innerHTML = '<div class="rank-item" style="justify-content:center;color:var(--color-text-muted);font-size:var(--text-caption);">Sin productos vendidos</div>';
container.innerHTML = renderEmptyState({
icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/><path d="M16 10a4 4 0 01-8 0"/></svg>',
title: 'Sin productos vendidos',
subtitle: 'No hay suficiente información para mostrar el ranking.'
});
return;
}
@@ -444,7 +458,12 @@ const Dashboard = (() => {
if (!tbody) return;
if (!data || !data.data || data.data.length === 0) {
tbody.innerHTML = '<tr><td colspan="5" style="text-align:center;color:var(--color-text-muted);font-size:var(--text-caption);">Sin ventas hoy</td></tr>';
tbody.innerHTML = '<tr><td colspan="5">' + renderEmptyState({
icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><path d="M8 21h8M12 17v4"/></svg>',
title: 'Sin ventas hoy',
subtitle: 'Aún no hay transacciones registradas.',
action: '<a href="/pos/sale" class="btn btn--primary btn--sm">Nueva venta</a>'
}) + '</td></tr>';
return;
}
@@ -526,6 +545,17 @@ const Dashboard = (() => {
}, 120000);
}
// Register Cmd+K items
if (typeof registerCmdKItem === 'function') {
registerCmdKItem({ group: 'Principal', label: 'Dashboard', href: '/pos/dashboard', icon: '📊' });
registerCmdKItem({ group: 'Principal', label: 'POS Ventas', href: '/pos/sale', icon: '🛒' });
registerCmdKItem({ group: 'Principal', label: 'Catálogo', href: '/pos/catalog', icon: '📁' });
registerCmdKItem({ group: 'Principal', label: 'Clientes', href: '/pos/customers', icon: '👤' });
registerCmdKItem({ group: 'Principal', label: 'Facturación', href: '/pos/invoicing', icon: '📄' });
registerCmdKItem({ group: 'Principal', label: 'Reportes', href: '/pos/reports', icon: '📈' });
registerCmdKItem({ group: 'Principal', label: 'Configuración', href: '/pos/config', icon: '⚙️' });
}
document.addEventListener('DOMContentLoaded', init);
return { init, setTheme };