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,67 @@
+(function () {
+    const MODAL_HTML = `
+    <div id="rm-modal-overlay" class="fixed inset-0 z-[100] flex items-end justify-center p-6 bg-black/50 backdrop-blur-sm hidden">
+        <div class="w-full max-w-sm bg-white rounded-[2rem] p-6 shadow-2xl space-y-3">
+            <h3 id="rm-modal-title" class="text-base font-bold text-on-surface"></h3>
+            <p id="rm-modal-message" class="text-sm text-on-surface-variant leading-relaxed"></p>
+            <div id="rm-modal-actions" class="flex gap-3 pt-2"></div>
+        </div>
+    </div>
+    <div id="rm-toast" class="fixed bottom-28 left-1/2 -translate-x-1/2 z-[200] px-5 py-3 rounded-full text-sm font-semibold shadow-xl opacity-0 transition-all duration-300 pointer-events-none whitespace-nowrap"></div>
+    `;
+
+    document.addEventListener('DOMContentLoaded', () => {
+        document.body.insertAdjacentHTML('beforeend', MODAL_HTML);
+    });
+
+    function show(title, message, buttons) {
+        document.getElementById('rm-modal-title').textContent = title;
+        document.getElementById('rm-modal-message').textContent = message;
+        const actions = document.getElementById('rm-modal-actions');
+        actions.innerHTML = '';
+        buttons.forEach(({ label, style, action }) => {
+            const b = document.createElement('button');
+            b.textContent = label;
+            const styles = {
+                primary: 'flex-1 py-3 bg-primary text-white rounded-xl font-bold active:scale-95 transition-transform',
+                danger:  'flex-1 py-3 bg-[#ba1a1a] text-white rounded-xl font-bold active:scale-95 transition-transform',
+                secondary: 'flex-1 py-3 bg-[#eceeed] text-[#191c1c] rounded-xl font-semibold active:scale-95 transition-transform',
+            };
+            b.className = styles[style] || styles.secondary;
+            b.onclick = action;
+            actions.appendChild(b);
+        });
+        document.getElementById('rm-modal-overlay').classList.remove('hidden');
+    }
+
+    function hide() {
+        document.getElementById('rm-modal-overlay').classList.add('hidden');
+    }
+
+    window.rmModal = {
+        alert(message, title = 'Aviso') {
+            return new Promise(resolve => {
+                show(title, message, [
+                    { label: 'Aceptar', style: 'primary', action: () => { hide(); resolve(); } }
+                ]);
+            });
+        },
+        confirm(message, title = '¿Confirmar?') {
+            return new Promise(resolve => {
+                show(title, message, [
+                    { label: 'Cancelar', style: 'secondary', action: () => { hide(); resolve(false); } },
+                    { label: 'Eliminar', style: 'danger', action: () => { hide(); resolve(true); } }
+                ]);
+            });
+        },
+        toast(message, type = 'success') {
+            const el = document.getElementById('rm-toast');
+            el.textContent = message;
+            el.className = `fixed bottom-28 left-1/2 -translate-x-1/2 z-[200] px-5 py-3 rounded-full text-sm font-semibold shadow-xl transition-all duration-300 pointer-events-none whitespace-nowrap ${
+                type === 'error' ? 'bg-[#ba1a1a] text-white' : 'bg-[#005050] text-white'
+            }`;
+            el.style.opacity = '1';
+            setTimeout(() => { el.style.opacity = '0'; }, 2500);
+        }
+    };
+})();