Feature: Historial, DELETE de movimientos y sistema de modales

- Nueva pantalla historial.html con movimientos agrupados por mes - Botón eliminar en cada movimiento con modal de confirmación - js/ui.js: sistema de modales y toasts reutilizables (reemplaza alert/confirm nativos) - API: endpoint GET ?view=historial y método DELETE en movimientos.php - add.html: categorías cargadas dinámicamente desde la API - index.html: "Ver todo" e ícono de nav apuntan a historial.html - Docker: eliminado volumen nombrado db_data para evitar problemas de permisos Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-03 16:06:28 -03:00
parent 5a54fdcfde
commit 1db200343d
8 changed files with 356 additions and 32 deletions
@@ -0,0 +1,102 @@
+document.addEventListener('DOMContentLoaded', async () => {
+    await cargarHistorial();
+});
+
+async function cargarHistorial() {
+    const loading = document.getElementById('ui-loading');
+    const empty   = document.getElementById('ui-empty');
+    const lista   = document.getElementById('ui-lista');
+
+    try {
+        const r = await fetch('api/movimientos.php?view=historial');
+        const data = await r.json();
+
+        loading.classList.add('hidden');
+
+        if (!data.movimientos || data.movimientos.length === 0) {
+            empty.classList.remove('hidden');
+            return;
+        }
+
+        lista.classList.remove('hidden');
+        lista.innerHTML = '';
+
+        // Agrupar por mes
+        const grupos = {};
+        data.movimientos.forEach(mov => {
+            const key = mov.fecha.substring(0, 7); // "2024-03"
+            if (!grupos[key]) grupos[key] = [];
+            grupos[key].push(mov);
+        });
+
+        Object.entries(grupos).forEach(([mes, movs]) => {
+            const [anio, nroMes] = mes.split('-');
+            const nombreMes = new Date(anio, nroMes - 1).toLocaleString('es-AR', { month: 'long', year: 'numeric' });
+
+            lista.innerHTML += `
+            <p class="text-xs uppercase tracking-widest font-bold text-on-surface-variant px-1 pt-5 pb-2">
+                ${nombreMes}
+            </p>
+            <div class="bg-surface-container-lowest rounded-[1.5rem] overflow-hidden divide-y divide-surface-container-low">
+                ${movs.map(mov => renderMovimiento(mov)).join('')}
+            </div>`;
+        });
+
+        // Asignar eventos de delete después de renderizar
+        lista.querySelectorAll('[data-delete-id]').forEach(btn => {
+            btn.addEventListener('click', () => eliminar(btn.dataset.deleteId, btn.dataset.deleteTxt));
+        });
+
+    } catch (e) {
+        loading.classList.add('hidden');
+        rmModal.alert('No se pudo cargar el historial.', 'Error');
+    }
+}
+
+function renderMovimiento(mov) {
+    const isGasto  = mov.tipo === 'gasto';
+    const signo    = isGasto ? '-' : '+';
+    const colorAmt = isGasto ? 'text-[#ba1a1a]' : 'text-[#005050]';
+    const icono    = mov.categoria_icono || 'payments';
+    const titulo   = mov.notas?.trim() ? mov.notas : mov.categoria_nombre;
+    const fecha    = new Date(mov.fecha + 'T12:00:00').toLocaleDateString('es-AR', { day: '2-digit', month: 'short' });
+
+    return `
+    <div class="flex items-center gap-4 px-4 py-3">
+        <div class="w-11 h-11 rounded-xl bg-surface-container-high flex items-center justify-center flex-shrink-0">
+            <span class="material-symbols-outlined text-primary text-[20px]">${icono}</span>
+        </div>
+        <div class="flex-1 min-w-0">
+            <p class="font-semibold text-on-surface text-sm truncate">${titulo}</p>
+            <p class="text-xs text-on-surface-variant">${fecha} · ${mov.categoria_nombre}</p>
+        </div>
+        <p class="font-bold ${colorAmt} text-sm flex-shrink-0">${signo}$${parseFloat(mov.monto).toFixed(2)}</p>
+        <button data-delete-id="${mov.id}" data-delete-txt="${titulo}"
+            class="ml-1 p-2 rounded-xl text-outline hover:text-[#ba1a1a] hover:bg-[#ffdad6] transition-colors flex-shrink-0 active:scale-90">
+            <span class="material-symbols-outlined text-[18px]">delete</span>
+        </button>
+    </div>`;
+}
+
+async function eliminar(id, titulo) {
+    const ok = await rmModal.confirm(`¿Eliminar "${titulo}"?\nEsta acción no se puede deshacer.`, 'Eliminar movimiento');
+    if (!ok) return;
+
+    try {
+        const r = await fetch('api/movimientos.php', {
+            method: 'DELETE',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ id: parseInt(id) })
+        });
+        const data = await r.json();
+
+        if (data.status === 'success') {
+            rmModal.toast('Movimiento eliminado');
+            await cargarHistorial();
+        } else {
+            rmModal.toast(data.message || 'Error al eliminar', 'error');
+        }
+    } catch (e) {
+        rmModal.toast('Error de conexión', 'error');
+    }
+}