Init: MVP de Gestión de Pagos (Stitch UI + SQLite/PHP)

2026-04-08 23:39:24 -03:00
commit aeceba9095
12 changed files with 870 additions and 0 deletions
@@ -0,0 +1,80 @@
+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);
+    }
+});