# 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.