- | Numero |
+ Número |
Cliente |
Estado |
Fecha |
@@ -229,7 +225,6 @@ export function renderDashboard() {
const { total, totalBilled, paid, unpaid, draft, paidRate, pendingAmount } = calcKPIs(invoices);
- // KPIs
container.querySelector('#kpi-total').textContent = total.toLocaleString('es-ES');
container.querySelector('#kpi-total-sub').innerHTML =
`${paid} pagadas · ` +
@@ -248,10 +243,13 @@ export function renderDashboard() {
? `${unpaid} factura${unpaid !== 1 ? 's' : ''} sin cobrar`
: 'Sin importes pendientes';
- // Chart.js — quarterly bar chart
const canvas = container.querySelector('#db-quarterly-chart');
const q = calcQuarterly(invoices);
+ const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
+ const chartGridColor = isDark ? 'rgba(148, 163, 184, 0.08)' : '#f3f4f6';
+ const chartTickColor = isDark ? '#94a3b8' : '#9ca3af';
+
new Chart(canvas, {
type: 'bar',
data: {
@@ -261,7 +259,7 @@ export function renderDashboard() {
data: q,
backgroundColor: 'rgba(37, 99, 235, 0.85)',
hoverBackgroundColor: 'rgba(29, 78, 216, 1)',
- borderRadius: 4,
+ borderRadius: 6,
borderSkipped: false,
barPercentage: 0.5,
}]
@@ -273,9 +271,9 @@ export function renderDashboard() {
legend: { display: false },
tooltip: {
callbacks: { label: ctx => ` ${formatCurrency(ctx.parsed.y)}` },
- backgroundColor: '#111827',
+ backgroundColor: isDark ? '#1e293b' : '#111827',
titleColor: '#f9fafb',
- bodyColor: '#d1d5db',
+ bodyColor: isDark ? '#cbd5e1' : '#d1d5db',
padding: 10,
cornerRadius: 6,
displayColors: false,
@@ -286,52 +284,48 @@ export function renderDashboard() {
grid: { display: false },
border: { display: false },
ticks: {
- color: '#6b7280',
+ color: chartTickColor,
font: { size: 12, family: 'Inter, system-ui, sans-serif' }
}
},
y: {
- grid: { color: '#f3f4f6' },
+ grid: { color: chartGridColor },
border: { display: false },
ticks: {
- color: '#9ca3af',
+ color: chartTickColor,
font: { size: 11, family: 'Inter, system-ui, sans-serif' },
callback: v => v >= 1000 ? `${(v / 1000).toFixed(0)}k €` : `${v} €`,
maxTicksLimit: 5,
}
}
},
- animation: { duration: 500, easing: 'easeOutQuart' }
+ animation: { duration: 600, easing: 'easeOutQuart' }
}
});
- // Recent activity list
const recent = [...invoices]
.sort((a, b) => new Date(b.date) - new Date(a.date))
.slice(0, 8);
const recentList = container.querySelector('#db-recent-list');
if (recent.length === 0) {
- recentList.innerHTML = 'No hay facturas recientes.
';
+ recentList.innerHTML = `${icons.emptyInboxes || ''}No hay facturas recientes.
`;
} else {
recentList.innerHTML = recent.map(inv => `
-
+ ${icons.fileText}
- ${inv.number || `#${inv.id}`}
- ${inv.clientName || '—'}
+ ${escapeHtml(inv.number || `#${inv.id}`)}
+ ${escapeHtml(inv.clientName || '—')}
${formatCurrency(inv.total)}
${formatDate(inv.date)}
`).join('');
@@ -343,7 +337,6 @@ export function renderDashboard() {
});
}
- // Monitoring table – last 15
const tableRows = [...invoices]
.sort((a, b) => new Date(b.date) - new Date(a.date))
.slice(0, 15);
@@ -354,8 +347,8 @@ export function renderDashboard() {
} else {
tbody.innerHTML = tableRows.map(inv => `
- | ${inv.number || `#${inv.id}`} |
- ${inv.clientName || '—'} |
+ ${escapeHtml(inv.number || `#${inv.id}`)} |
+ ${escapeHtml(inv.clientName || '—')} |
${getStatusBadge(inv.status)} |
${formatDate(inv.date)} |
${formatDate(inv.expireDate)} |
@@ -373,4 +366,4 @@ export function renderDashboard() {
})();
return container;
-}
+}
\ No newline at end of file
diff --git a/src/pages/Facturas.js b/src/pages/Facturas.js
index 7db6462..f1fb928 100755
--- a/src/pages/Facturas.js
+++ b/src/pages/Facturas.js
@@ -1,12 +1,12 @@
import { InvoiceItem } from '../components/InvoiceItem.js';
import { InvoiceModal } from '../components/InvoiceModal.js';
import { apiGet } from '../services/apiClient.js';
+import { icons } from '../services/icons.js';
export function renderFacturasPage() {
const container = document.createElement('div');
- container.className = 'facturas-page';
+ container.className = 'facturas-page page-enter';
- // Estado de paginación
let currentPage = 1;
let totalPages = 1;
const pageSize = 20;
@@ -14,8 +14,6 @@ export function renderFacturasPage() {
let filteredInvoices = [];
let currentFilter = '';
let searchTerm = '';
-
- // Estado de ordenación
let sortKey = null;
let sortDir = 'asc';
@@ -25,14 +23,17 @@ export function renderFacturasPage() {
@@ -61,9 +62,7 @@ export function renderFacturasPage() {
-
- | Cargando facturas... |
-
+ | Cargando facturas... |
@@ -100,7 +99,6 @@ export function renderFacturasPage() {
const formatCurrency = (n) =>
new Intl.NumberFormat('es-ES', { style: 'currency', currency: 'EUR' }).format(n || 0);
- // ── Sort helpers ────────────────────────────────────────────
function sortInvoices(invoices) {
if (!sortKey) return invoices;
return [...invoices].sort((a, b) => {
@@ -135,13 +133,12 @@ export function renderFacturasPage() {
});
}
- // ── Summary ─────────────────────────────────────────────────
function updateSummary(invoices) {
const summaryEl = container.querySelector('.invoices-summary');
if (!invoices.length) { summaryEl.style.display = 'none'; return; }
- const total = invoices.reduce((s, i) => s + (parseFloat(i.total) || 0), 0);
- const pending = invoices.reduce((s, i) => s + (parseFloat(i.remainToPay) || 0), 0);
+ const total = invoices.reduce((s, i) => s + (parseFloat(i.total) || 0), 0);
+ const pending = invoices.reduce((s, i) => s + (parseFloat(i.remainToPay) || 0), 0);
const paid = total - pending;
container.querySelector('[data-summary="count"]').textContent = invoices.length;
@@ -151,16 +148,15 @@ export function renderFacturasPage() {
summaryEl.style.display = 'flex';
}
- // ── Render current page ──────────────────────────────────────
function renderPage(page = 1) {
const invoicesList = container.querySelector('.invoices-list');
currentPage = page;
const sorted = sortInvoices(filteredInvoices);
- totalPages = Math.ceil(sorted.length / pageSize);
+ totalPages = Math.ceil(sorted.length / pageSize);
const startIndex = (page - 1) * pageSize;
- const invoices = sorted.slice(startIndex, startIndex + pageSize);
+ const invoices = sorted.slice(startIndex, startIndex + pageSize);
updatePaginationUI();
updateSortIcons();
@@ -169,7 +165,7 @@ export function renderFacturasPage() {
invoicesList.innerHTML = '';
if (invoices.length === 0) {
- invoicesList.innerHTML = '
| No hay facturas disponibles |
';
+ invoicesList.innerHTML = `
${icons.emptyInvoices} No hay facturasCrea tu primera factura para comenzar. |
`;
return;
}
@@ -179,7 +175,6 @@ export function renderFacturasPage() {
});
}
- // Manejar ver/editar factura
function handleViewInvoice(invoiceId) {
const modal = InvoiceModal(invoiceId, null, () => {
loadAllInvoices();
@@ -187,7 +182,6 @@ export function renderFacturasPage() {
document.body.appendChild(modal);
}
- // Función para cargar todas las facturas
async function loadAllInvoices() {
const invoicesList = container.querySelector('.invoices-list');
@@ -206,7 +200,7 @@ export function renderFacturasPage() {
renderPage(1);
} catch (error) {
console.error('Error al cargar facturas:', error);
- invoicesList.innerHTML = '
| Error al cargar las facturas. Por favor, intenta de nuevo. |
';
+ invoicesList.innerHTML = `
${icons.error} Error al cargarNo se pudieron cargar las facturas. Inténtalo de nuevo. |
`;
}
}
@@ -214,23 +208,21 @@ export function renderFacturasPage() {
loadAllInvoices();
}
- // Función para actualizar la UI de paginación
function updatePaginationUI() {
- const paginationDiv = container.querySelector('.pagination');
+ const paginationDiv = container.querySelector('.pagination');
const currentPageSpan = container.querySelector('.current-page');
const totalPagesSpan = container.querySelector('.total-pages');
const btnPrev = container.querySelector('.btn-prev');
const btnNext = container.querySelector('.btn-next');
currentPageSpan.textContent = currentPage;
- totalPagesSpan.textContent = totalPages;
+ totalPagesSpan.textContent = totalPages;
paginationDiv.style.display = totalPages <= 1 ? 'none' : 'flex';
btnPrev.disabled = currentPage === 1;
btnNext.disabled = currentPage === totalPages;
}
- // ── Sort click listeners ─────────────────────────────────────
container.querySelectorAll('th.sortable').forEach(th => {
th.style.cursor = 'pointer';
th.addEventListener('click', () => {
@@ -245,7 +237,6 @@ export function renderFacturasPage() {
});
});
- // ── Other event listeners ────────────────────────────────────
container.querySelector('.btn-new-invoice').addEventListener('click', () => {
window.location.hash = '#create-invoice';
});
@@ -253,8 +244,8 @@ export function renderFacturasPage() {
const searchInput = container.querySelector('.search-input');
searchInput.addEventListener('input', (e) => {
const inputValue = e.target.value.trim();
- clearTimeout(searchInput.debounceTimer);
- searchInput.debounceTimer = setTimeout(() => {
+ clearTimeout(searchInput._debounceTimer);
+ searchInput._debounceTimer = setTimeout(() => {
searchTerm = /\d/.test(inputValue) ? inputValue : '';
applyFilters();
}, 500);
@@ -280,4 +271,4 @@ export function renderFacturasPage() {
loadAllInvoices();
return container;
-}
+}
\ No newline at end of file
diff --git a/src/pages/SettingsPage.js b/src/pages/SettingsPage.js
index df5a54b..ca0c7a6 100644
--- a/src/pages/SettingsPage.js
+++ b/src/pages/SettingsPage.js
@@ -1,4 +1,5 @@
import { isDarkTheme, toggleTheme } from '../services/theme.js';
+import { icons } from '../services/icons.js';
function decodeTokenPayload(token) {
try {
@@ -50,10 +51,12 @@ export function renderSettingsPage() {
const container = document.createElement('div');
container.className = 'settings-page';
+ const dark = isDarkTheme();
+
container.innerHTML = `
@@ -64,19 +67,33 @@ export function renderSettingsPage() {
Modo oscuro
Cambia entre tema claro y oscuro.
-
+