Páginas secundarias (wireframes)
Categories, Budgets y Reports en Targ-Apps-Finance.
Categories (pages/Categories.js, TAF-007)
CRUD conectado a useFinance() con UI Chroma-Style (.cs-card, .cs-btn, tabs) y CategoryForm sobre FormField.
| Bloque | Implementación |
|---|---|
| Seed | defaultCategories.js sembrado en FinanceProvider con seedIfEmpty |
| Tabs | Filtro reactivo por income / expense (botones .cs-btn) |
| Lista | Tarjetas por categoría con swatch de color, icono y acciones |
| Formulario | CategoryForm + FormField; validación de nombre único por tipo; entrada animada |
| Eliminar | removeCategory; bloqueado si hay transacciones (toast + botón deshabilitado) |
Budgets (pages/Budgets.js, TAF-014)
Lógica conectada a useFinance() con UI tipo ledger (.taf-budgets-*):
| Bloque | Implementación |
|---|---|
| Cabecera | PageHeader + CTA «Nuevo presupuesto» con icono Lucide plus |
| Periodo | Barra .taf-budgets-period con mes activo (currentPeriod) y contador de categorías |
| Lista | Map sobre budgets() con BudgetProgress (.taf-budgets-item) |
| Formulario | BudgetForm + addBudget (panel .taf-budgets-form-panel, toggle con Show) |
| Progreso | getBudgetSpent / getBudgetProgress — barra contenida cobre/ámbar/rojo según data-status: ok, warning, exceeded |
| Vacío | EmptyState con icono pieChart y CTA «Nuevo presupuesto» |
| Duplicados | Rechazados si ya existe presupuesto monthly para la categoría |
Solo categorías expense pueden tener presupuesto. Eliminar vía icono trash2 en cada ítem.
Reports (pages/Reports.js, TAF-013)
Reportes con jerarquía tipográfica y pestañas estilo ledger. Estilos en finance.css con prefijo .taf-reports-*. ECharts (CDN globalThis.echarts) y cálculos en logic/reportCalculations.js:
| Bloque | Implementación |
|---|---|
| Header | PageHeader — eyebrow «Análisis», título «Reportes» |
| Selector de rango (firma visual) | .taf-reports-period — pestañas con subrayado cobre: Este mes / Trimestre / Año (hookState) |
| Indicadores del periodo | .taf-reports-ledger — ingresos, gastos, resultado y % de ahorro en fila tipográfica (sin tarjetas de color) |
| Gastos por categoría | CategoryDonutChart + groupExpensesByCategory + desglose con barras cobre (.taf-reports-breakdown) |
| Tendencia mensual | TrendChart — últimos 6 meses (mensual); gráficos embebidos sin doble tarjeta (embedded) |
| Patrimonio | NetWorthChart — panel ancho .taf-reports-panel--wide; mensual (6 meses) |
| Tooltips y leyendas | buildChartTooltip() + getChartTheme() (confine, appendToBody, posición dentro del view rect; evita recorte en paneles embebidos) |
| Estado vacío | EmptyState — «Sin movimientos para analizar» con CTA a transacciones |
| Animación | animateCards al cambiar rango |
| Carga de gráficos | Spinner .chart-loader (--cs-primary); aria-busy en contenedor |
Los wrappers viven en src/components/charts/ (mountEcharts.js, chartStyles.js con cva). Sin dependencias React — solo el runtime ECharts del CDN. Si no hay datos, se muestra el mensaje vacío (data-slot="empty") y no el spinner.
API de cálculos (logic/reportCalculations.js):
getRangeBounds,filterTransactionsByRangegroupExpensesByCategory/groupByCategorygroupIncomeExpenseByMonth/groupByMonthgroupIncomeExpenseByDay— día 1 al fin del mes (dashboard,granularity: "day")computeNetWorthTrendcomputeNetWorthTrendByDay— patrimonio diario del mes en cursohasChartData
Los datos provienen de useFinance().transactions, categories, activeAccounts — sin duplicar fórmulas de ledger.js.
Convención
Atributos data-page, data-slot, data-wireframe y data-status para pruebas e implementación.