UI: rediseño responsive desktop + fix categorías + plan actualizado
- Sidebar fija en todas las pantallas (md+): logo, nav, logout - index.html: grid 3/5 + 2/5 en desktop (movimientos | donut chart) - add.html: 2 columnas desktop (form | monto+numpad), botones mobile/desktop unificados - historial.html: max-w-3xl, header con botón Nuevo integrado - dashboard.js: formato de moneda con toLocaleString, skeleton loading, mes dinámico - add.js: lógica simplificada con doSave(), teclado ignora inputs de texto - auth.php + login.php: cookie con httponly y SameSite=Lax - docs/plan/00_PLAN.md: estado actualizado, CLI marcado como fase futura Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Ricardo Monla
co-authored by
Claude Sonnet 4.6
Claude Sonnet 4.6
parent
ead1bf8ffc
commit
7cb6107cb4
+72
-37
@@ -1,48 +1,83 @@
|
||||
# Plan de Desarrollo: Sistema de Gestión de Gastos y Pagos (rm-PAGOs)
|
||||
# Plan de Desarrollo — rm-PAGOs (Quiet Wealth)
|
||||
|
||||
## 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).
|
||||
## Stack
|
||||
| Capa | Tecnología |
|
||||
|------|-----------|
|
||||
| Frontend | HTML + Tailwind CSS (CDN local) + Vanilla JS |
|
||||
| Backend | PHP 8.2 (FastCGI) |
|
||||
| Base de datos | SQLite3 (PDO) |
|
||||
| Auth | Sesión PHP nativa |
|
||||
| Servidor local | Docker Compose: NGINX + PHP-FPM |
|
||||
|
||||
---
|
||||
|
||||
## Fases de Ejecución
|
||||
## Estado actual por pantalla
|
||||
|
||||
### 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.
|
||||
### ✅ login.html — Completa
|
||||
- Formulario propio con diseño Quiet Wealth (sin popup del browser)
|
||||
- Validación de credenciales contra `config.php` (gitignoreado)
|
||||
- Redirección automática si ya hay sesión activa
|
||||
|
||||
### 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.
|
||||
### ✅ index.html — Dashboard
|
||||
- Balance total dinámico desde SQLite
|
||||
- Gráfico donut de distribución de gastos por categoría (SVG puro)
|
||||
- Últimos 5 movimientos con ícono, descripción y monto
|
||||
- Navegación inferior funcional
|
||||
|
||||
### 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.
|
||||
### ✅ add.html — Nuevo movimiento
|
||||
- Selector Gasto / Ingreso
|
||||
- Numpad táctil + soporte teclado físico (desktop)
|
||||
- Categorías cargadas dinámicamente desde la API
|
||||
- Campo fecha (default: hoy) y notas opcionales
|
||||
- POST a la API con redirect al dashboard al guardar
|
||||
|
||||
### 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.
|
||||
### ✅ historial.html — Historial completo
|
||||
- Lista de todos los movimientos agrupados por mes
|
||||
- Botón eliminar con modal de confirmación
|
||||
- Toast de confirmación tras eliminar
|
||||
|
||||
### ✅ API (movimientos.php)
|
||||
- GET dashboard: balance + últimos 5 + donut + categorías
|
||||
- GET ?view=historial: todos los movimientos
|
||||
- POST: nuevo movimiento
|
||||
- DELETE: eliminar por ID
|
||||
|
||||
### ✅ Infraestructura Docker
|
||||
- NGINX + PHP-FPM en contenedores separados
|
||||
- Tailwind CDN descargado en build y servido localmente
|
||||
- Auth por sesión PHP (sin Basic Auth del browser)
|
||||
- Script `_app --status / --start / --stop`
|
||||
|
||||
---
|
||||
|
||||
## 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.
|
||||
## Pendientes / En progreso
|
||||
|
||||
### ✅ UI — Responsive desktop
|
||||
- [x] Sidebar de navegación fijo en pantallas ≥768px (con logout)
|
||||
- [x] Dashboard en 2 columnas en desktop (balance+movimientos | donut)
|
||||
- [x] add.html: formulario + numpad en 2 columnas en desktop
|
||||
- [x] historial.html: ancho extendido en desktop, header con botón Nuevo
|
||||
- [x] Soporte teclado físico en numpad (0-9, punto, Backspace, Enter)
|
||||
|
||||
### 🔶 UI — Polish
|
||||
- [ ] Fecha en formato legible en movimientos recientes del dashboard
|
||||
- [ ] Indicador de mes actual dinámico (hoy hardcodeado como "Octubre 2023")
|
||||
- [ ] El "+12.4% este mes" del balance card → calculado real
|
||||
- [ ] Estado vacío más visual en historial (primer uso)
|
||||
|
||||
### 🔶 Funcionalidades faltantes
|
||||
- [ ] Editar movimiento existente
|
||||
- [ ] Filtro por categoría / mes en historial
|
||||
- [ ] Resumen mensual (ingresos vs gastos del mes)
|
||||
|
||||
### ⏳ Fase futura — CLI
|
||||
- Interfaz de línea de comandos que replique las operaciones de la GUI
|
||||
- Comandos: `pagos add`, `pagos list`, `pagos delete <id>`, `pagos balance`
|
||||
- Mismo SQLite como backend → datos compartidos con la web
|
||||
|
||||
---
|
||||
|
||||
## Notas de arquitectura
|
||||
- Credenciales en `pagos/api/config.php` (gitignoreado, ver `config.example.php`)
|
||||
- SQLite en `pagos/db/finanzas.sqlite` (gitignoreado)
|
||||
- Tailwind CDN se descarga en `docker build` y se copia al volumen en el entrypoint
|
||||
|
||||
Reference in New Issue
Block a user