81 lines
4.0 KiB
JavaScript
81 lines
4.0 KiB
JavaScript
document.addEventListener('DOMContentLoaded', async () => {
|
|
try {
|
|
const response = await fetch('api/movimientos.php');
|
|
const data = await response.json();
|
|
|
|
if (data.status === 'success') {
|
|
// Update balance
|
|
document.getElementById('ui-balance').textContent = `$${data.balance.toFixed(2)}`;
|
|
|
|
// Render movements
|
|
const uiMovimientos = document.getElementById('ui-movimientos');
|
|
uiMovimientos.innerHTML = '';
|
|
|
|
data.movimientos.forEach(mov => {
|
|
const isExpense = mov.tipo === 'gasto';
|
|
const sign = isExpense ? '-' : '+';
|
|
const amountColor = isExpense ? 'text-error' : 'text-primary-container';
|
|
|
|
uiMovimientos.innerHTML += `
|
|
<div class="flex items-center justify-between mt-6">
|
|
<div class="flex items-center gap-4">
|
|
<div class="w-12 h-12 rounded-2xl bg-surface-container-highest flex items-center justify-center">
|
|
<span class="material-symbols-outlined text-primary">${mov.categoria_icono || 'payments'}</span>
|
|
</div>
|
|
<div>
|
|
<p class="font-bold text-on-surface">${mov.notas || mov.categoria_nombre}</p>
|
|
<p class="text-xs text-on-surface-variant">${mov.fecha}</p>
|
|
</div>
|
|
</div>
|
|
<p class="font-bold ${amountColor}">${sign}$${parseFloat(mov.monto).toFixed(2)}</p>
|
|
</div>
|
|
`;
|
|
});
|
|
|
|
// Dynamize Donut Chart
|
|
if (data.grafico && data.grafico.length > 0) {
|
|
const totalGastos = data.grafico.reduce((sum, item) => sum + parseFloat(item.total), 0);
|
|
|
|
let svgHtml = `<svg class="w-full h-full transform -rotate-90" viewbox="0 0 36 36">`;
|
|
let legendHtml = '';
|
|
let currentOffset = 0;
|
|
|
|
data.grafico.forEach(cat => {
|
|
const pct = (parseFloat(cat.total) / totalGastos) * 100;
|
|
|
|
// Add SVG segment
|
|
svgHtml += `<circle cx="18" cy="18" fill="none" r="16" stroke="${cat.color_hex}" stroke-dasharray="${pct}, 100" stroke-dashoffset="-${currentOffset}" stroke-linecap="round" stroke-width="4"></circle>`;
|
|
|
|
// Add Legend entry
|
|
legendHtml += `
|
|
<div class="flex items-center justify-between p-3 bg-surface-container-lowest rounded-xl">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-3 h-3 rounded-full" style="background-color: ${cat.color_hex}"></div>
|
|
<span class="text-sm font-semibold">${cat.nombre}</span>
|
|
</div>
|
|
<span class="text-sm text-on-surface-variant">${pct.toFixed(1)}%</span>
|
|
</div>
|
|
`;
|
|
|
|
currentOffset += pct;
|
|
});
|
|
|
|
svgHtml += `</svg>
|
|
<div class="absolute inset-0 flex flex-col items-center justify-center">
|
|
<span class="text-2xl font-bold">$${totalGastos.toFixed(0)}</span>
|
|
<span class="text-[10px] uppercase tracking-widest text-on-surface-variant font-bold">Gastos</span>
|
|
</div>`;
|
|
|
|
document.getElementById('ui-donut-chart').innerHTML = svgHtml;
|
|
document.getElementById('ui-donut-legend').innerHTML = legendHtml;
|
|
} else {
|
|
document.getElementById('ui-donut-chart').innerHTML = `<div class="flex h-full items-center justify-center text-sm text-on-surface-variant">Sin gastos registrados</div>`;
|
|
document.getElementById('ui-donut-legend').innerHTML = '';
|
|
}
|
|
|
|
}
|
|
} catch (e) {
|
|
console.error('Error cargando el dashboard:', e);
|
|
}
|
|
});
|