# Dashboard – Redesign (2025)

Este documento descreve as mudanças de layout, UX e módulos introduzidas no redesign do `views/dashboard/index.php`, mantendo a stack atual e compatível com os sistemas existentes.

## Layout e Navegação
- Abas de navegação (`.tab-nav` / `.tab-btn`) com âncoras: `Resumo`, `Despesas`, `Receitas`, `Tendências`, `Tempo real`, `Agenda`.
- Seções identificáveis via IDs para navegação fluida: `#sec-resumo`, `#sec-despesas`, `#sec-receitas`, `#sec-tendencias`, `#sec-tempo-real`, `#sec-agenda`.
- Espaçamentos consistentes e grid responsivo (utilização de `repeat(auto-fit, minmax(...))`).

## Conteúdo e Agrupamento
- KPIs Financeiros destacados com cores de categoria:
  - Despesas (`accent-expense`, vermelho). Receitas (`accent-revenue`, azul).
  - Ícones intuitivos e tipografia com hierarquia clara (`card.kpi`).
- Quadros financeiros com botões de detalhes (`Detalhes`) para exibir/ocultar tabelas sob demanda.
- Seção de Predições (canvas) e Insights (lista) adicionadas ao final para inteligência de negócios.

## Módulos (Lazy Load)
- `public/js/dashboard/finance-kpis.js`: consome `GET /api/finance/metrics` e preenche KPIs agregados.
- `public/js/dashboard/forecast.js`: suavização exponencial sobre série diária; fallback sintético e desenho em canvas.
- `public/js/dashboard/insights.js`: gera alertas e insights com heurísticas sobre métricas financeiras.
- IntersectionObserver atualizado para incluir `forecast` e `insights`. Ao aplicar filtros globais, módulos ativos são reexecutados.

## Tema e Tooltips
- `public/css/theme.css` atualizado com acentos de categoria (`accent-expense`, `accent-revenue`), estilos de `card.kpi`, `.tab-nav` e `.tab-btn`.
- Tooltips por atributo `data-tip` em elementos-chave (cartões KPI e quadros).

## Compatibilidade e Stack
- Mantidos imports dinâmicos (`import('/js/dashboard/...')`), `credentials:'include'` e utilitários de formatação (`fmtBRL`).
- Sem dependências adicionais; compatível com backends existentes e tolerante a ausência de certas rotas (fallback visual).

## Próximos Incrementos
- Testes A/B simples via query/localStorage e instrumentação (pendente).
- Badges de status coloridos para vencidos e mini-gráficos nos próximos vencimentos.
- Comparativos adicionais por período/meta no gráfico avançado.