Páginas core

Dashboard (pages/Dashboard.js, TAF-012)

Vista de resumen con jerarquía tipográfica (sin tarjetas KPI de color). Estilos en finance.css con prefijo .taf-dashboard-*.

Componentes compartidos:

• src/components/PageHeader.js — eyebrow, título, description y slot de acciones (data-component="page-header").
• src/components/LucideIcon.js — iconos Lucide SVG inline (sin lucide-react).
• src/components/charts/TrendChart.js y src/components/charts/NetWorthChart.js — ECharts con tokens --cs-*; prop embedded (sin doble .cs-card dentro del panel; figure a ancho completo con márgenes simétricos vía buildEmbeddedChartGrid()) y granularity: "day" | "month"; ResizeObserver + resize() post-layout en mountEcharts.js.

SummaryCard.js sigue disponible para otras vistas; el dashboard ya no lo usa.

Transactions (pages/Transactions.js, TAF-008 / TAF-009 / TAF-010 / TAF-011 / TAF-016)

Vista principal del historial con UI Chroma-Style, filtros reactivos y formularios separados para movimientos y transferencias.

Componentes:

• src/components/PageHeader.js — cabecera compartida (título, lead, acciones)
• src/components/LucideIcon.js — iconos SVG inline (sin lucide-react)
• src/components/FormField.js — label + control + error (Chroma-Style)
• src/components/TransactionForm.js — solo income / expense
• src/components/TransferForm.js — transferencias entre cuentas
• src/components/TransactionFilters.js — barra de filtros
• src/components/ConfirmDialog.js — diálogo reutilizable con Show; overlay a pantalla completa (backdrop + panel centrado), botones cs-btn-outline / cs-btn-destructive, cierre con Escape o clic en el fondo

Estilos: src/styles/finance.css — namespace .taf-transactions-*.

Utilidades de fecha en logic/utils/dates.js: localDateKey, formatGroupDateLabel, todayISO.

Reactividad de filtros (Transactions)

Patrón canónico Chroma (useMemo encadenados + For con getter) — sin API computed/watch.

Causa del bug corregido: Show monta su función children una vez (rama bajo untracked). El listado capturaba listState().groups en ese primer montaje → snapshot estático. Los memos (filteredTransactions, listState) y el useLayoutEffect de animación sí se actualizaban; las filas en pantalla no.

Fix en pages/Transactions.js:

const filteredTransactions = useMemo(
    () => filterTransactions(finance.transactions(), { /* getters de filtro */ }),
    [finance.transactions, filterDateFrom, filterDateTo, filterCategoryId, filterAccountId, filterType, filterSearch],
);

const listState = useMemo(
    () => groupVisibleTransactions(filteredTransactions(), visibleLimit()),
    [filteredTransactions, visibleLimit],
);

useLayoutEffect(() => { /* animateListStagger */ }, [listState, filteredTransactions]);

// Show solo como compuerta vacío/con datos; el listado va en For:
e(For, { each: () => listState().groups, children: (group) => … });

Chroma: Derived State & Dynamic Updates · pitfall Show vs listas: Common Pitfalls §6.

Accounts (pages/Accounts.js, TAF-006)

Lista y formulario cableados a useFinance(). El saldo de cada tarjeta sale de getAccountBalance. Estilos en .taf-accounts-*.

API de store para esta página (y para un listado filtrado futuro): activeAccounts, archivedAccounts, archiveAccount, restoreAccount, setDefaultAccount. removeAccount sigue bloqueado si la cuenta tiene transacciones.

Componentes: AccountCard.js y AccountForm.js (submit/inputs ya conectados).

Convención

• Atributos data-page, data-slot y data-component marcan secciones para pruebas y estilos.
• La lógica de negocio vive en logic/store/ (ledger.js, transactions.js, financeStore.js) y se consume con useFinance() + useMemo donde aplica.