From 4eb120927b0f72ab5b198718c5a065e327ad5edd Mon Sep 17 00:00:00 2001 From: JKuijperM Date: Wed, 9 Sep 2026 16:22:08 +0200 Subject: [PATCH] Anade CLAUDE.md y el informe de analisis del proyecto CLAUDE.md documenta la estructura de directorios (que tiene tres niveles llamados expenses_manager y despista), los comandos habituales, las variables de entorno y las decisiones de auth, para no tener que deducirlo de settings.py cada vez. ANALISIS_code.md es un informe de solo lectura sobre UX, deuda tecnica y mantenibilidad, ordenado por impacto. Sirve de lista de trabajo pendiente; varios de sus puntos ya estan resueltos en los commits anteriores. Co-Authored-By: Claude Opus 5 --- ANALISIS_code.md | 181 +++++++++++++++++++++++++++++++++++++++++++++++ CLAUDE.md | 90 +++++++++++++++++++++++ 2 files changed, 271 insertions(+) create mode 100644 ANALISIS_code.md create mode 100644 CLAUDE.md diff --git a/ANALISIS_code.md b/ANALISIS_code.md new file mode 100644 index 0000000..bbd1c25 --- /dev/null +++ b/ANALISIS_code.md @@ -0,0 +1,181 @@ +# Análisis de mejoras — Expenses Manager + +Informe de solo lectura (no se ha modificado ni commiteado nada). Cubre UX/visual, técnico y mantenibilidad, ordenado por impacto dentro de cada bloque. No incluye bugs funcionales. + +> **Nota**: durante el análisis han aparecido dos hallazgos que sí son bugs funcionales (fuera del alcance de este informe, para tu otra lista): +> - `expenses/templates/expenses/income_confirm_delete.html:10` muestra `{{ expense.date }}` en vez de `{{ income.date }}` (esa variable no existe en el contexto de esa vista, así que la fecha sale vacía). Parece un resto de copiar `expense_confirm_delete.html`. +> - `urls.py:36` apunta a `registration/password_help.html`, plantilla que no existe en `templates/registration/` (solo están `password_change_form.html` y `password_change_done.html`). Esa URL rompería con un `TemplateDoesNotExist`. + +--- + +## 1. Visual / UX + +### 1.1 Diseño no responsive: falta viewport y media queries (Alto impacto / Esfuerzo medio) +**Qué**: no hay ninguna etiqueta `` en `base.html` ni `base_auth.html`, y `base.css` (539 líneas) no tiene ni un solo `@media`. Las tablas (`expense_list.html`, `dashboard.html` tablas de comparación, `fuel/list.html` con 7 columnas) se renderizan sin envoltorio de scroll horizontal. +**Dónde**: `expenses/templates/expenses/base.html`, `base_auth.html`, `expenses/static/expenses/css/base.css`. +**Por qué importa**: en móvil el layout se renderiza a tamaño escritorio y se ve reducido/roto; las tablas anchas (fuel, comparación del dashboard) van a desbordar o comprimir columnas ilegibles. +**Esfuerzo**: medio — añadir el meta viewport es trivial, pero meter breakpoints reales y envolver tablas en `overflow-x:auto` toca varias plantillas. + +### 1.2 Plantillas de confirmación de borrado divergentes (Alto impacto / Esfuerzo medio) +**Qué**: las 7 páginas de confirmar-borrado (`expense_confirm_delete.html`, `tag_confirm_delete.html`, `account_confirm_delete.html`, `income_confirm_delete.html`, `categories/confirm_delete.html`, `fuel/confirm_delete.html`, `goals/confirm_delete.html`) son casi idénticas pero cada una tiene su propia mezcla de etiqueta de botón ("Eliminar" vs "Sí, eliminar"), clase CSS (`btn` vs `btn danger`, `btn secondary` vs `btn` a secas) y nivel de encabezado (`h1` vs `h2`). +**Dónde**: las 7 plantillas listadas arriba. +**Por qué importa**: la misma acción destructiva se presenta visualmente distinta según la sección; y como ya demuestra el bug de `income_confirm_delete.html`, copiar-pegar estas plantillas sin unificarlas es justo lo que genera ese tipo de errores. +**Esfuerzo**: medio — unificarlas en un partial (`{% include %}`) con variables (`object_label`, `cancel_url`) o migrar a `DeleteView` con una plantilla genérica. + +### 1.3 Colores hardcodeados y sin variables CSS (Alto impacto / Esfuerzo medio) +**Qué**: `base.css` no define ninguna custom property (`--variable`); los mismos conceptos semánticos (verde éxito, rojo error/peligro) están definidos con 3-4 tonos de hex ligeramente distintos en sitios distintos (`#166534`/`#1e7e34` para verde; `#b91c1c`/`#991b1b`/`#b71c1c` para rojo). Además, `dashboard.html` usa hex literales inline (`#d9534f`/`#5cb85c`, líneas 167, 191, 239) que no coinciden con los que ya existen en `base.css` para el mismo significado ("gasto sube/baja"). +**Dónde**: `expenses/static/expenses/css/base.css`, `expenses/templates/expenses/dashboard.html` (16 `style="..."` inline, concentrados en este archivo). +**Por qué importa**: es la brecha de coherencia visual más clara del proyecto — mismo significado, colores distintos según la página; y dificulta cualquier cambio de paleta futuro (hay que buscar y reemplazar en vez de cambiar una variable). +**Esfuerzo**: medio — introducir `:root { --color-success: ...; --color-danger: ... }` y sustituir tanto en `base.css` como en los inline styles de `dashboard.html`. + +### 1.4 Menú desplegable "Configuraciones" inaccesible por teclado (Medio impacto / Esfuerzo bajo) +**Qué**: el dropdown de navegación (`base.html:24-32`) se abre solo con `:hover` en CSS (`base.css:382-384`), sin `role`, `aria-expanded` ni gestor de teclado/foco. +**Dónde**: `expenses/templates/expenses/base.html:24-32`, `base.css:382-384`. +**Por qué importa**: un usuario que navega solo con teclado no puede llegar nunca a Categorías/Etiquetas/Objetivos — no es solo "buena práctica de accesibilidad", es una ruta completamente bloqueada. +**Esfuerzo**: bajo — añadir `aria-expanded`, un pequeño script de toggle por click/Enter, y `tabindex` en el toggle. + +### 1.5 Selects de filtro sin `