diff --git a/src/pages/DashboardPage.js b/src/pages/DashboardPage.js index 5ddebde..91a3405 100644 --- a/src/pages/DashboardPage.js +++ b/src/pages/DashboardPage.js @@ -68,9 +68,9 @@ function formatDate(dateStr) { function getStatusBadge(status) { const map = { - draft: { label: 'Borrador', cls: 'badge-draft' }, + draft: { label: 'Borrador', cls: 'badge-draft' }, unpaid: { label: 'Pte. Pago', cls: 'badge-unpaid' }, - paid: { label: 'Pagada', cls: 'badge-paid' }, + paid: { label: 'Pagada', cls: 'badge-paid' }, }; const s = map[status] || { label: status || '—', cls: 'badge-draft' }; return `${s.label}`; @@ -78,23 +78,23 @@ function getStatusBadge(status) { function statusDotStyle(status) { const map = { - paid: { bg: '#f0fdf4', color: '#16a34a' }, + paid: { bg: '#f0fdf4', color: '#16a34a' }, unpaid: { bg: '#fffbeb', color: '#b45309' }, - draft: { bg: '#f3f4f6', color: '#6b7280' }, + draft: { bg: '#f3f4f6', color: '#6b7280' }, }; const s = map[status] || map.draft; return `background:${s.bg};color:${s.color}`; } function openInvoiceModal(invoiceId) { - const modal = InvoiceModal(invoiceId, null, () => {}); + const modal = InvoiceModal(invoiceId, null, () => { }); document.body.appendChild(modal); } export function renderDashboard() { - const user = auth.getUser(); + const user = auth.getUser(); const userName = user?.identifier || user?.email || user?.username || 'Usuario'; - const year = new Date().getFullYear(); + const year = new Date().getFullYear(); const container = document.createElement('div'); container.className = 'dashboard'; diff --git a/src/style.css b/src/style.css index 3991e59..87d99cf 100755 --- a/src/style.css +++ b/src/style.css @@ -1750,10 +1750,24 @@ button:disabled { min-height: 1rem; } -.db-sub-green { color: var(--green-600); font-weight: 500; } -.db-sub-amber { color: var(--amber-600); font-weight: 500; } -.db-sub-red { color: var(--red-600); font-weight: 500; } -.db-sub-muted { color: var(--text-secondary); } +.db-sub-green { + color: var(--green-600); + font-weight: 500; +} + +.db-sub-amber { + color: var(--amber-600); + font-weight: 500; +} + +.db-sub-red { + color: var(--red-600); + font-weight: 500; +} + +.db-sub-muted { + color: var(--text-secondary); +} /* Skeleton loaders */ .db-kpi-skeleton { @@ -1772,8 +1786,13 @@ button:disabled { } @keyframes db-shimmer { - 0% { background-position: 200% 0; } - 100% { background-position: -200% 0; } + 0% { + background-position: 200% 0; + } + + 100% { + background-position: -200% 0; + } } /* Middle row: chart + recent */ @@ -1826,7 +1845,9 @@ button:disabled { font-weight: 500; } -.db-see-all:hover { text-decoration: underline; } +.db-see-all:hover { + text-decoration: underline; +} /* Chart body */ .db-chart-body { @@ -1856,9 +1877,13 @@ button:disabled { transition: background var(--transition-fast); } -.db-recent-item:last-child { border-bottom: none; } +.db-recent-item:last-child { + border-bottom: none; +} -.db-recent-item:hover { background: var(--gray-50); } +.db-recent-item:hover { + background: var(--gray-50); +} .db-recent-dot { width: 30px; @@ -1878,7 +1903,9 @@ button:disabled { transition: color var(--transition-fast); } -.db-recent-item:hover .db-recent-arrow { color: var(--gray-500); } +.db-recent-item:hover .db-recent-arrow { + color: var(--gray-500); +} .db-recent-info { flex: 1; @@ -1925,9 +1952,13 @@ button:disabled { } /* Monitoring table */ -.db-table-card { margin-bottom: var(--space-4); } +.db-table-card { + margin-bottom: var(--space-4); +} -.db-table-wrap { overflow-x: auto; } +.db-table-wrap { + overflow-x: auto; +} .db-monitoring-table { width: 100%; @@ -1948,10 +1979,17 @@ button:disabled { white-space: nowrap; } -.db-th-right { text-align: right !important; } +.db-th-right { + text-align: right !important; +} -.db-monitoring-table thead th:first-child { padding-left: var(--space-5); } -.db-monitoring-table thead th:last-child { padding-right: var(--space-5); } +.db-monitoring-table thead th:first-child { + padding-left: var(--space-5); +} + +.db-monitoring-table thead th:last-child { + padding-right: var(--space-5); +} .db-table-row { cursor: pointer; @@ -1965,17 +2003,47 @@ button:disabled { transition: background var(--transition-fast); } -.db-table-row:last-child td { border-bottom: none; } -.db-table-row:hover td { background: var(--gray-50); } +.db-table-row:last-child td { + border-bottom: none; +} -.db-table-row td:first-child { padding-left: var(--space-5); } -.db-table-row td:last-child { padding-right: var(--space-5); } +.db-table-row:hover td { + background: var(--gray-50); +} -.db-cell-num { font-variant-numeric: tabular-nums; font-weight: 500; white-space: nowrap; } -.db-cell-client { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } -.db-cell-right { text-align: right; } -.db-remain-due { color: var(--red-600); font-weight: 600; } -.db-remain-ok { color: var(--green-600); } +.db-table-row td:first-child { + padding-left: var(--space-5); +} + +.db-table-row td:last-child { + padding-right: var(--space-5); +} + +.db-cell-num { + font-variant-numeric: tabular-nums; + font-weight: 500; + white-space: nowrap; +} + +.db-cell-client { + max-width: 180px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.db-cell-right { + text-align: right; +} + +.db-remain-due { + color: var(--red-600); + font-weight: 600; +} + +.db-remain-ok { + color: var(--green-600); +} .db-table-loading { text-align: center; @@ -1995,8 +2063,13 @@ button:disabled { margin: 0; } -.db-error { color: var(--red-600); } -.db-td-center { text-align: center; } +.db-error { + color: var(--red-600); +} + +.db-td-center { + text-align: center; +} /* Recent skeleton */ .db-recent-skeleton { @@ -2029,8 +2102,13 @@ button:disabled { animation: db-shimmer 1.4s infinite; } -.db-skel-lines span:first-child { width: 70%; } -.db-skel-lines span:last-child { width: 50%; } +.db-skel-lines span:first-child { + width: 70%; +} + +.db-skel-lines span:last-child { + width: 50%; +} .db-skel-right { display: flex; @@ -2048,21 +2126,35 @@ button:disabled { animation: db-shimmer 1.4s infinite; } -.db-skel-right span:first-child { width: 60px; } -.db-skel-right span:last-child { width: 44px; } +.db-skel-right span:first-child { + width: 60px; +} + +.db-skel-right span:last-child { + width: 44px; +} /* Responsive */ @media (max-width: 1100px) { - .db-kpi-row { grid-template-columns: repeat(2, 1fr); } + .db-kpi-row { + grid-template-columns: repeat(2, 1fr); + } } @media (max-width: 900px) { - .db-mid-row { grid-template-columns: 1fr; } + .db-mid-row { + grid-template-columns: 1fr; + } } @media (max-width: 580px) { - .db-kpi-row { grid-template-columns: 1fr; } - .db-greeting { font-size: 1.1rem; } + .db-kpi-row { + grid-template-columns: 1fr; + } + + .db-greeting { + font-size: 1.1rem; + } } /* Keep legacy dashboard-subtitle for possible other uses */