rm-PAGOs/docs/plan/00_PLAN.md

Plan de Desarrollo: Sistema de Gestión de Gastos y Pagos (rm-PAGOs)

Contexto y Arquitectura

• Frontend: Diseños generados por Stitch (HTML, CSS Vainilla, JS). Diseño moderno "Quiet Wealth / Financial Sanctuary".
• Backend: PHP 8.2 (procesamiento ligero, para máxima compatibilidad con el servidor de destino).
• Base de Datos: SQLite3 (liviana, portátil y soportada nativamente por PHP, sin necesidad de un servidor de BD separado).
• Despliegue: Servidor Proxmox LXC srvv-nginx-rm (Debian 12, NGINX 1.22.1, HTTPS activo).

---

Fases de Ejecución

Fase 1: Estructuración y Maquetación (Frontend Static)

Objetivo: Tener todo el diseño web unificado y navegable estáticamente.

1. Crear la estructura de la aplicación DENTRO de la carpeta pagos/ (que es la que se usará para el despliegue). pagos/index.html, pagos/css/, pagos/api/, pagos/db/.
2. Exportar las pantallas generadas en Stitch (Dashboard, Nuevo Gasto, Historial) y acomodarlas como plantillas base (HTML).
3. Configurar el archivo CSS general con las variables del sistema de diseño (Lumina Finance).
4. Enlazar la navegación básica con Javascript o anclas entre pantallas.

Fase 2: Motor de Base de Datos y Backend (PHP/SQLite)

Objetivo: Persistir la información y crear la lógica detrás de las pantallas.

1. Diseñar el esquema de base de datos SQLite (tablas básicas como movimientos y categorias).
2. Crear un archivo clase base en PHP (db.php) para conexión y operaciones CRUD.
3. Crear los endpoints/controladores PHP (api/movimientos.php) que manejen operaciones GET, POST, PUT y DELETE.
4. Ajustar los scripts de inicialización de la BD.

Fase 3: Integración Frontend ↔ Backend (Dinámica)

Objetivo: Darle vida a las pantallas usando Javascript interactuando con PHP.

1. Nuevo Movimiento: Enlazar el formulario "Agregar" usando Fetch/AJAX (Vanilla JS) para enviarle los datos al backend de forma transparente sin refrescar.
2. Dashboard:
   • Calcular saldo dinámico, sumatorias de gastos del mes, etc., usando SQL.
   • Enlazar librería de gráficos (por ejemplo Chart.js) para pintar la dona de categorías leyendo desde la base de datos.
3. Historial: Renderizar la lista de últimos movimientos desde SQLite y añadir sistema de borrado.

Fase 4: Despliegue Configurado (Producción)

Objetivo: Llevar el sistema al servidor srvv-nginx-rm para uso real.

1. Seguridad Básica: Añadir una pantalla de Login o protección sencilla (ya que son datos financieros personales) utilizando las sesiones nativas de PHP o Basic Auth en NGINX.
2. Configuración del Servidor:
   • Crear un subdirectorio o alias en NGINX (ejemplo rmonla.duckdns.org/pagos).
   • Clonar o actualizar por deploy key en /var/www/pagos.
   • Asegurar permisos de escritura a la carpeta db/ para que PHP (usuario www-data) pueda modifciar el archivo .sqlite.
3. Pruebas End-to-End directas desde el teléfono.

---

Roadmap de Próximos Pasos (De Inmediato)

1. Iniciar con la Fase 1, configurando estructura base (index.html, style.css) volcando el HTML de Stitch en un index.
2. Crear un script rápido de inicialización de SQLite.