chore(release): prepara versao 2.7.1

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

.env.example

@@ -17,6 +17,11 @@ POSTGRES_DB=openmonetis_db
 # Gere com: openssl rand -base64 32
 BETTER_AUTH_SECRET=your-secret-key-here-change-this
 BETTER_AUTH_URL=http://localhost:3000
+# Defina como true para bloquear novos cadastros
+DISABLE_SIGNUP=false
+# Duração de sessões persistentes quando "Manter conectado" estiver marcado
+AUTH_SESSION_EXPIRES_IN_DAYS=30
+AUTH_SESSION_UPDATE_AGE_HOURS=24
 
 # === Portas ===
 APP_PORT=3000
@@ -54,9 +59,12 @@ UMAMI_DOMAINS=
 ANTHROPIC_API_KEY=
 OPENAI_API_KEY=
 GOOGLE_GENERATIVE_AI_API_KEY=
+MINIMAX_API_KEY=
 OPENROUTER_API_KEY=
+OLLAMA_BASE_URL=http://127.0.0.1:11434/v1
+OLLAMA_API_KEY=
 
 # === Logo.dev (Opcional) ===
 # Logos automáticos de estabelecimentos. Cadastre em https://www.logo.dev
 LOGO_DEV_TOKEN=
-LOGO_DEV_SECRET_KEY=
+LOGO_DEV_SECRET_KEY=

.github/workflows/docker-publish.yml

@@ -13,22 +13,19 @@ on:
 
 env:
   DOCKER_IMAGE_NAME: openmonetis
-  FORCE_JAVASCRIPT_ACTIONS_TO_NODE24: true
 
 jobs:
   quality:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5
 
       - name: Setup pnpm
         uses: pnpm/action-setup@v4
-        with:
-          version: 10.33.0
 
       - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v5
         with:
           node-version: 22
           cache: 'pnpm'
@@ -48,7 +45,7 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5
 
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v3

.github/workflows/release.yml

@@ -5,9 +5,6 @@ on:
     branches:
       - main
 
-env:
-  FORCE_JAVASCRIPT_ACTIONS_TO_NODE24: true
-
 jobs:
   release:
     runs-on: ubuntu-latest
@@ -16,7 +13,7 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5
         with:
           fetch-depth: 0
 

.vscode/settings.json

@@ -1,32 +0,0 @@
-{
-	"files.exclude": {
-		"**/.git": true,
-		"**/.svn": true,
-		"**/.hg": true,
-		"**/.DS_Store": true,
-		"**/Thumbs.db": true,
-		"**/node_modules": true,
-		"node_modules": true,
-		"**/.vscode": true,
-		".vscode": true,
-		"**/.next": true,
-		".next": true
-	},
-	"editor.defaultFormatter": "biomejs.biome",
-	"editor.formatOnSave": true,
-	"editor.codeActionsOnSave": {
-		"source.organizeImports": "never",
-		"source.organizeImports.biome": "always",
-		"source.fixAll": "never",
-		"source.fixAll.biome": "always",
-		"source.fixAll.eslint": "never"
-	},
-	"[json]": {
-		"editor.defaultFormatter": "biomejs.biome"
-	},
-	"prettier.enable": false,
-	"editor.fontSize": 15,
-	"[jsonc]": {
-		"editor.defaultFormatter": "vscode.json-language-features"
-	}
-}

CHANGELOG.md

@@ -5,6 +5,187 @@ Todas as mudanças notáveis deste projeto serão documentadas neste arquivo.
 O formato é baseado em [Keep a Changelog](https://keepachangelog.com/pt-BR/1.1.0/),
 e este projeto adere ao [Versionamento Semântico](https://semver.org/lang/pt-BR/).
 
+## [2.7.1] - 2026-05-30
+
+Esta versão melhora a clareza dos fluxos de lançamento e a experiência do dashboard. Boletos de receita agora diferenciam pagamentos de recebimentos, a navegação mensal ficou mais direta e o painel ganhou atalhos mais úteis com personalização simplificada.
+
+### Adicionado
+- Preferências: nova opção para exibir ou ocultar o card `Resumo da operação` no modal de lançamento.
+- Navegação mensal: ao passar o mouse, focar ou clicar no período selecionado, agora é possível abrir um seletor e ir diretamente para outro mês.
+
+### Alterado
+- Documentação: o guia visual foi reescrito com os tokens, temas, componentes e práticas de acessibilidade atuais; o README agora apresenta a identidade visual e as preferências disponíveis.
+- Dashboard: os cards de receitas e despesas agora oferecem um atalho discreto para abrir os lançamentos da pessoa principal filtrados pelo tipo e período.
+- Dashboard: a configuração e a reordenação de widgets agora partem de uma única ação `Personalizar`, com controle de visibilidade durante a edição.
+- Dashboard: em telas pequenas, os atalhos para receita, despesa e anotação foram agrupados no menu `Adicionar`.
+- Dashboard: os títulos dos widgets agora usam sentence case para reduzir ruído visual.
+- Dashboard: os widgets receberam uma revisão ampla de UX, com hierarquia visual mais clara, listas compactas, textos mais diretos, estados acessíveis e navegação interna consistente.
+- Dashboard: o widget `Comportamento de pagamento` foi renomeado para `Distribuição de despesas`.
+- Dashboard: limites de orçamento agora aparecem apenas no widget de despesas por categoria.
+- Dashboard: o widget `Panorama de gastos` agora exibe todos os lançamentos sem filtro adicional por cartão.
+- Navegação: o menu de finanças agora oferece submenus para abrir diretamente as faturas dos cartões e os extratos das contas ativas.
+- Lançamentos: ao passar o mouse sobre `Filtros`, os filtros ativos agora aparecem em um painel compacto com remoção individual e ação para limpar todos de uma vez.
+
+### Corrigido
+- Dashboard: o saldo consolidado do widget `Minhas contas` não inclui mais contas inativas.
+- Boletos: lançamentos de receita agora exibem ações e status como `Receber`, `Recebido` e `Recebido em`, enquanto despesas continuam usando `Pagar`, `Pago` e `Pago em`.
+- Dashboard: o modal de baixa de boleto agora usa textos de recebimento e conta de destino para receitas.
+- Calendário e pessoas: os detalhes de boletos de receita agora preservam a nomenclatura de recebimento.
+
+## [2.7.0] - 2026-05-28
+
+Esta versão amplia o OpenMonetis para quem usa o app todos os dias e para quem prefere mais controle sobre os próprios dados. Os Insights ganham novas opções de IA, incluindo modelos locais via Ollama, enquanto a autenticação fica mais confortável em dispositivos pessoais. Também entram melhorias práticas em contas, lançamentos compartilhados, filtros, relatórios e dashboard, deixando os fluxos financeiros mais completos e fáceis de revisar.
+
+### Adicionado
+- Autenticação: a tela de login agora tem a opção "Manter conectado neste dispositivo", usando a persistência nativa do Better Auth para evitar novo login ao reabrir o navegador ou PWA.
+- Autenticação: novas variáveis `AUTH_SESSION_EXPIRES_IN_DAYS` e `AUTH_SESSION_UPDATE_AGE_HOURS` para configurar, em ambientes self-hosted, a duração e a renovação de sessões persistentes.
+- Contas: o extrato de uma conta agora tem um atalho "Adicionar rendimento" ao lado de "Ajustar saldo", abrindo um modal simples com valor e data para criar uma receita paga na conta atual, com categoria `Rendimentos`, forma de pagamento `Transferência bancária` e pessoa admin.
+- Insights: adicionado suporte ao provider MiniMax via `vercel-minimax-ai-provider`, incluindo os modelos M2.7, M2.7 Highspeed, M2.5, M2.5 Highspeed, M2.1, M2.1 Highspeed e M2.
+- Insights: adicionado suporte ao provider Ollama via endpoint OpenAI-compatible, com modelos sugeridos `llama3.2`, `llama3.1`, `qwen2.5` e `mistral`, além de input para qualquer modelo instalado localmente.
+- Configuração: adicionadas as variáveis `MINIMAX_API_KEY`, `OLLAMA_BASE_URL` e `OLLAMA_API_KEY` aos exemplos de ambiente, ao assistente de setup e à documentação.
+- Dependências: adicionada `@ai-sdk/openai-compatible` para integrar provedores compatíveis com a API da OpenAI, incluindo Ollama.
+- Lançamentos: o campo "Dividir com" agora permite selecionar múltiplas pessoas e exibe um campo de valor para cada participante escolhido.
+- Lançamentos: o modal de criação e edição agora exibe um card compacto de resumo da operação abaixo dos anexos, incluindo forma de pagamento, destino, categoria, pessoas, valores divididos e quantidade de lançamentos que serão criados.
+
+### Alterado
+- Contas: o modal "Adicionar rendimento" usa o mesmo seletor de data do modal de lançamentos e os botões de rendimento e ajuste de saldo agora exibem tooltip.
+- Categorias: o header de `/categories/[categoryId]` agora usa três blocos de métrica alinhados para total do mês selecionado, total do mês anterior e variação.
+- Dashboard: o botão expansível dos widgets passou de "Ver tudo" para "Expandir", com visual secundário e gradiente inferior mais compacto para diferenciar melhor a ação de abrir o modal dos links que navegam para páginas completas.
+- Insights: a resolução de modelos foi centralizada em `model-provider.ts`, reduzindo ramificações na action de geração e preservando OpenAI, Anthropic, Google, MiniMax e OpenRouter.
+- Insights: o aviso de privacidade agora diferencia providers externos de providers locais como Ollama.
+- Lançamentos: o filtro de categorias agora separa as opções em grupos de `Despesas` e `Receitas`, preservando ícones e busca dentro do seletor.
+- Lançamentos: a configuração de divisão foi movida para um modal dedicado e minimalista, com seleção direta de participantes, divisão igual e conferência do total distribuído.
+- Lançamentos: a validação de divisão agora aceita uma lista de participações, exige pessoas distintas e confere se a soma dos valores bate com o total do lançamento.
+- Lançamentos: os textos de edição de lançamentos divididos foram ajustados para tratar divisões com mais de duas pessoas.
+- Lançamentos: o card "Dividir lançamento" agora mostra avatares discretos antes dos nomes das pessoas selecionadas e remove as vírgulas entre os nomes no resumo.
+- Relatórios: em `/reports/category-trends`, o seletor de categorias não exibe mais a ação `Todas`; quando há seleção ativa, mostra apenas `Limpar seleção` e resume múltiplas escolhas pela contagem.
+- Relatórios: em `/reports/category-trends`, as tabelas agora usam os cabeçalhos `Categoria Despesa` e `Categoria Receita` e não exibem mais o ponto colorido antes do nome da categoria.
+
+### Corrigido
+- Categorias: em `/categories/[categoryId]`, o percentual de variação do header agora aparece sem `+` quando já há uma etiqueta indicando aumento, queda ou estabilidade.
+- Dashboard: os modais "Ver tudo" dos widgets agora reservam espaço para a barra de rolagem, evitando que ela fique sobreposta aos valores alinhados à direita.
+- Insights: o seletor de modelo do OpenRouter mantém o provider selecionado enquanto o usuário digita um modelo customizado sem `/`, evitando voltar automaticamente para o provider padrão.
+- Relatórios: em `/reports/category-trends`, a busca do seletor de categorias agora pesquisa pelo nome da categoria, e não apenas pelo ID interno, incluindo correspondência sem acentos.
+
+## [2.6.4] - 2026-05-23
+
+Esta versão reúne o polimento final antes da próxima publicação: melhora o fluxo de antecipação de parcelas, deixa os dialogs de lançamentos mais seguros e consistentes, e incorpora as contribuições vindas dos PRs abertos para nomes de logos e ajustes no cadastro de transações.
+
+### Adicionado
+- Logos: adicionado um dicionário de nomes de exibição para logos, com busca normalizada sem acentos e fallback para o comportamento anterior quando não houver mapeamento específico (PR #69).
+- Lançamentos: o dialog de adicionar múltiplos lançamentos agora pede confirmação antes de descartar alterações não salvas ao fechar ou cancelar (PR #70).
+
+### Alterado
+- Lançamentos: o modal "Histórico de Antecipações" agora segue o padrão do modal de detalhes, com `Fechar` e `Desfazer Antecipação` no rodapé, contagem dentro do conteúdo e cards de antecipação reorganizados em blocos mais escaneáveis.
+- Lançamentos: a antecipação de parcelas agora só permite selecionar parcelas futuras ao período escolhido, evitando antecipar a parcela do próprio mês sem bloquear parcelas seguintes da mesma compra.
+- Lançamentos: ao criar uma antecipação, o cache do histórico da série agora é invalidado e o modal refaz a busca ao abrir.
+- Lançamentos: ao adicionar uma nova linha no dialog de múltiplos lançamentos, a data passa a seguir a última transação informada em vez de voltar para a data atual (PR #72).
+
+### Corrigido
+- Lançamentos: ajustado o espaçamento horizontal da área rolável do dialog de adicionar transação para preservar o alinhamento dos campos e botões (PR #71).
+
+## [2.6.3] - 2026-05-22
+
+Esta versão concentra os ajustes feitos depois da `2.6.2` em um único ciclo público. O foco está em dar mais precisão aos filtros de lançamentos por período real de compra e em polir a análise de parcelas para priorizar parcelamentos mais próximos da quitação sem causar saltos visuais nos cards.
+
+### Adicionado
+- Lançamentos: o drawer de filtros agora permite informar data inicial e data final para filtrar a tabela por `data_compra`.
+
+### Alterado
+- Lançamentos: quando um intervalo de datas está ativo, a consulta server-side deixa de limitar os dados a um único mês e usa o intervalo real de compra, mantendo paginação e exportação alinhadas ao que aparece na tabela.
+- Relatórios: os cards de `/reports/installment-analysis` agora são ordenados pelo percentual pago em ordem decrescente, mantendo a data da compra como critério de desempate.
+- Relatórios: em `/reports/installment-analysis`, o contador de parcelas selecionadas agora aparece discretamente no botão "detalhes", sem criar uma área extra no corpo do card.
+
+### Corrigido
+- Relatórios: selecionar parcelas em um card de `/reports/installment-analysis` não força mais os outros cards da mesma linha a reservarem espaço vazio para o resumo de seleção.
+
+## [2.6.2] - 2026-05-21
+
+Esta versão corrige o build da imagem Docker depois da atualização para `pnpm@11.1.3`. A etapa de dependências dentro do Docker não recebia a configuração do workspace, então o install congelado falhava ao comparar os `overrides` e as políticas de build com o lockfile.
+
+### Corrigido
+- Docker: o `Dockerfile` agora usa `pnpm@11.1.3` em todos os estágios e copia `pnpm-workspace.yaml` antes do `pnpm install --frozen-lockfile`, garantindo que `overrides` e `allowBuilds` sejam aplicados também no build da imagem.
+
+## [2.6.1] - 2026-05-21
+
+Esta versão corrige o pipeline de publicação após o salto para a `2.6.0`. O build do GitHub Actions falhava antes mesmo de instalar as dependências porque o workflow ainda fixava uma versão antiga do `pnpm`, enquanto o projeto já declarava `pnpm@11.1.3` no `packageManager`.
+
+### Corrigido
+- CI: o workflow de build deixou de fixar uma versão diferente do `pnpm`, usando a versão declarada em `packageManager` para evitar conflito no `pnpm/action-setup`.
+- CI: a política de builds do `pnpm` foi migrada para `allowBuilds`, permitindo explicitamente os scripts necessários de `core-js`, `esbuild`, `sharp` e `unrs-resolver` durante o install no GitHub Actions.
+
+## [2.6.0] - 2026-05-21
+
+Esta versão implementa melhorias pensadas para o uso real do dia a dia. O OpenMonetis passa a lidar melhor com parcelamentos que já começaram, recupera atalhos importantes no extrato, deixa a revisão de importações mais precisa e dá mais controle para quem mantém uma instância self-hosted. Também entram correções de consistência no dashboard, em cartões, no tratamento da categoria `Pagamentos` e nas datas vindas de planilhas.
+
+### Adicionado
+- Autenticação: nova variável `DISABLE_SIGNUP=true` para bloquear novos cadastros. Quando ativa, a tela de cadastro deixa de aparecer na navegação, `/signup` redireciona para login/dashboard e a API de signup responde `403`.
+- Lançamentos: compras parceladas agora podem começar em uma parcela intermediária, como `5 de 10`. O sistema gera apenas as parcelas restantes e preserva o cálculo do valor unitário com base no total original.
+- Logos: adicionado o logo da Bipa à biblioteca local de marcas.
+- Relatórios: a análise de parcelas agora separa parcelas acompanhadas daquelas que ficaram fora do acompanhamento quando o parcelamento começa no meio da série.
+
+### Alterado
+- Contas: a página de extrato em `/accounts/[accountId]` voltou a exibir os botões "Nova Receita" e "Nova Despesa", alinhando o fluxo com as demais telas de lançamentos.
+- Cartões: os cards de `/cards` agora mostram o valor da fatura do mês atual junto dos indicadores de limite. O limite utilizado passa a considerar faturas em aberto, não apenas o status interno do lançamento.
+- Lançamentos: ao criar um lançamento a partir do extrato de uma conta, o diálogo já abre com essa conta selecionada como destino padrão.
+- Importação: os controles globais da revisão de extrato foram realinhados à esquerda, com espaçamento mais compacto e larguras mais consistentes.
+
+### Corrigido
+- Dashboard: o widget "Status de Pagamento" voltou a mostrar corretamente os valores em "A Pagar", somando despesas pelo valor absoluto e mantendo reembolsos como abatimento.
+- Importação: datas vindas de planilhas agora preservam o dia informado no Excel, evitando que `20/05/2026` apareça como `19/05/2026` em fusos como `America/Sao_Paulo`.
+- Importação: o seletor de categoria por linha agora mostra apenas categorias compatíveis com o tipo detectado do lançamento, separando receitas e despesas durante a revisão do extrato.
+- Importação: cada linha da revisão de extrato agora permite escolher uma pessoa específica, enquanto o campo global continua servindo como atalho para aplicar a pessoa nos lançamentos selecionados.
+- Lançamentos: despesas comuns na categoria `Pagamentos` voltaram a poder ser editadas, removidas, copiadas e importadas. A proteção continua valendo apenas para pagamentos automáticos de fatura com nota técnica `AUTO_FATURA:`.
+
+### Dependências
+- Stack core: `pnpm` 10.33.0 → 11.1.3.
+- Auth: `better-auth` e `@better-auth/passkey` 1.6.10 → 1.6.11.
+- AI SDKs: `@ai-sdk/anthropic` 3.0.76 → 3.0.78, `@ai-sdk/google` 3.0.71 → 3.0.75, `@ai-sdk/openai` 3.0.63 → 3.0.64 e `ai` 6.0.177 → 6.0.185.
+- AWS: `@aws-sdk/client-s3` e `@aws-sdk/s3-request-presigner` 3.1045.0 → 3.1050.0.
+- UI e dados: `@tanstack/react-query` 5.100.9 → 5.100.11, `date-fns` 4.1.0 → 4.2.1, `jspdf-autotable` 5.0.7 → 5.0.8, `pg` 8.20.0 → 8.21.0 e `react-day-picker` 10.0.0 → 10.0.1.
+- Dev tooling: `@types/node` 25.6.2 → 25.9.1, `@types/react` 19.2.14 → 19.2.15, `knip` 6.12.2 → 6.14.1, `tsx` 4.21.0 → 4.22.3 e novo `babel-plugin-react-compiler` 1.0.0.
+
+## [2.5.7] - 2026-05-14
+
+Esta versão faz um polimento visual no relatório de análise de parcelas, deixando o estabelecimento como referência principal do card e mantendo o cartão visível de forma mais discreta no contexto da compra.
+
+### Alterado
+- Relatórios: em `/reports/installment-analysis`, os cards de parcelas passam a usar o logo do estabelecimento como avatar principal; o logo do cartão agora aparece menor ao lado do nome do cartão, tanto no card quanto no modal de detalhes.
+- Relatórios: a página de análise de parcelas pré-carrega os mapeamentos de logos de estabelecimentos para evitar troca visual após o primeiro render.
+- Lançamentos: o campo de anexos no modal agora aceita arquivos colados com `Ctrl+V`, mantendo o botão para buscar arquivos normalmente.
+- Lançamentos: o modal agora usa uma única área interna de rolagem, com cabeçalho e rodapé estáveis, reduzindo travadas ao rolar e ao abrir "Condições, anotações e anexos".
+- Anotações: tarefas agora podem ser editadas inline no modal "Atualizar anotação"; clicar no texto abre o input e o botão de remover vira botão de salvar naquela linha.
+
+### Corrigido
+- Relatórios: o join com cartões na análise de parcelas agora também valida `cards.userId`, mantendo o filtro de ownership explícito na consulta.
+
+## [2.5.6] - 2026-05-07
+
+Esta versão entrega um conjunto de melhorias em torno do fluxo de lançamentos: filtros mais úteis, divisão por porcentagem, indicador de orçamento dentro do modal e correção de um bug em totais por pessoa que considerava contas excluídas do saldo. Também inclui ajustes de robustez no display da calculadora (sem mais overflow do modal com valores longos) e o fix do cache de RSC nos filtros multi-seleção.
+
+### Adicionado
+- Lançamentos: filtro por faixa de valor (mín/máx) com debounce e persistência via query string (`amountMin`/`amountMax`).
+- Lançamentos: botão "Limpar" discreto ao lado do botão "Filtros", visível apenas quando há filtros ativos.
+- Modal de lançamento: toggle compacto R$/% no card "Dividir lançamento", permitindo distribuir o valor por porcentagem entre as pessoas. Cada input em modo % exibe o valor convertido em R$ logo abaixo, no mesmo padrão visual do `InlinePeriodPicker`.
+- Modal de lançamento: indicador de orçamento ao lado do nome da categoria selecionada, mostrando `R$ gasto de R$ orçado (%)` com cores semânticas (verde / âmbar / vermelho) conforme o consumo. Suprimido quando o input divide a linha com o tipo de transação (caso pré-lançamentos). Implementado via `getCategoryBudgetSummaryAction` e `fetchCategoryBudgetSummary` em `features/budgets`.
+
+### Alterado
+- Calculadora: display com tamanho de fonte adaptativo (de `text-3xl` a `text-sm`) conforme o comprimento da expressão, mais `truncate` funcional via `min-w-0` nos containers flex. Resolve o overflow do modal com valores muito longos (ex: `9.999.999.999 × 9.999.999.999`).
+
+### Corrigido
+- Pessoas: "Totais do mês" em `/payers/[id]` deixa de somar lançamentos vinculados a contas marcadas como `excludeFromBalance` (ex: "Ajuste de saldo"). Adicionado `excludeTransactionsFromExcludedAccounts()` em 6 queries de `src/shared/lib/payers/details.ts`.
+- Orçamentos: `fetchBudgetsForUser` e `fetchCategoryBudgetSummary` agora respeitam o filtro de contas excluídas do saldo, alinhando o gasto exibido na tela de Orçamentos com o badge de orçamento dentro do modal de lançamento.
+- Lançamentos: tabela de resultados agora reflete corretamente a remoção de um valor em filtros multi-seleção (Pessoa, Conta/Cartão, Categoria, Condição, Forma de Pagamento). Adicionado `router.refresh()` em `handleMultiFilterChange` para invalidar o cache de segmento do router (issue #54).
+
+### Dependências
+- Stack core: `next` 16.2.4 → 16.2.6, `react`/`react-dom` 19.2.5 → 19.2.6.
+- UI: `react-day-picker` 9 → 10 (major), `tailwindcss` / `@tailwindcss/postcss` 4.2.4 → 4.3.0, `tailwind-merge` 3.5.0 → 3.6.0.
+- Auth: `better-auth` 1.6.9 → 1.6.10 e `@better-auth/passkey` 1.6.9 → 1.6.10.
+- AI SDKs: `@ai-sdk/anthropic` 3.0.74 → 3.0.76, `@ai-sdk/google` 3.0.67 → 3.0.71, `@ai-sdk/openai` 3.0.60 → 3.0.63, `ai` 6.0.175 → 6.0.177.
+- AWS: `@aws-sdk/client-s3` e `@aws-sdk/s3-request-presigner` 3.1042.0 → 3.1045.0.
+- E-mail: `resend` 6.12.2 → 6.12.3.
+- Dev tooling: `@biomejs/biome` 2.4.14 → 2.4.15, `knip` 6.11.0 → 6.12.2, `@types/node` 25.6.0 → 25.6.2.
+
 ## [2.5.5] - 2026-05-06
 
 Esta versão melhora a navegação por históricos e lançamentos. O changelog ganhou uma linha do tempo mais leve, colapsável e fácil de escanear; os filtros de lançamentos passam a aceitar múltiplas pessoas, categorias, formas de pagamento, condições e contas/cartões na mesma busca; e os diálogos adotam as animações compartilhadas do design system. Também há pequenos polimentos de texto e layout para deixar a interface mais consistente.

DESIGN.md

@@ -1,389 +1,178 @@
-# Design System Inspired by OpenMonetis
+# Design System do OpenMonetis
 
-## 1. Visual Theme & Atmosphere
+Este documento descreve a identidade visual implementada no OpenMonetis. Ele deve
+ser usado como referência ao criar telas, revisar componentes e manter a
+experiência consistente entre dashboard, relatórios, formulários e landing page.
 
-OpenMonetis embodies a warm, approachable financial management aesthetic grounded in trust and transparency. The design system combines a rich warm-orange accent palette with a sophisticated warm-neutral foundation, creating an interface that feels both professional and inviting. The typography and spacing work together to emphasize clarity and hierarchy, supporting the open-source ethos of personal financial control. The visual atmosphere prioritizes legibility and calm navigation, with generous whitespace and deliberate color restraint—the bold orange is reserved for critical calls-to-action and highlights, while the warm grays and blacks anchor the interface with stability and focus.
+## 1. Direção visual
 
-**Key Characteristics**
-- Warm, approachable color story with a dominant orange accent (`#FF7733`)
-- Generous whitespace and breathing room between sections
-- High contrast between backgrounds and text for accessibility
-- Clear typographic hierarchy using Inter for all text and UI
-- Minimal elevation and shadow treatment—mostly flat design
-- Subtle border accents in warm grays to define surfaces
-- Open-source transparency reflected in straightforward, honest design language
+O OpenMonetis busca tornar a gestão financeira clara e acolhedora. A interface
+usa superfícies quentes, poucos elementos decorativos e uma cor laranja de
+destaque para orientar o olhar sem transformar toda ação em urgência.
 
-## 2. Color Palette & Roles
+Princípios:
 
-### Primary
-- **Primary Accent** (`#FF7733`): Used for primary call-to-action buttons, highlights, and key interactive elements throughout the interface; draws user attention to the most important actions
-- **Primary Dark** (`#443732`): Warm-brown anchor color used extensively for text, headings, and interactive elements; provides the primary text color across the system
+- priorizar legibilidade e hierarquia em telas com muitos dados;
+- usar laranja para ações principais, seleção e foco;
+- manter superfícies leves no tema claro e contraste confortável no tema escuro;
+- aplicar cores semânticas para comunicar estado, não como decoração;
+- preservar espaço suficiente entre blocos para evitar ruído visual;
+- favorecer componentes responsivos e navegação acessível por teclado.
 
-### Interactive
-- **Interactive Neutral** (`#0F0D0C`): Near-black used for primary text and strong emphasis elements; highest contrast state
-- **Interactive Overlay** (`#0006`): Transparent black overlay at 24% opacity; used for hover states, modals, and depth layering
+## 2. Fonte de verdade
 
-### Neutral Scale
-- **Neutral 900** (`#2A2827`): Very dark warm gray; used for secondary text and disabled states
-- **Neutral 800** (`#322C2A`): Dark warm gray; alternative text color for lower-emphasis content
-- **Neutral 700** (`#676260`): Medium warm gray; used for tertiary text, captions, and metadata
-- **Neutral 50** (`#FCF7F6`): Almost-white warm cream; primary background color for light surfaces
-- **Neutral 100** (`#F8F6F4`): Very light warm gray; secondary background and subtle surface distinction
-- **Neutral 200** (`#F5F2EF`): Light warm gray; tertiary background and card interiors
-- **Neutral 300** (`#F0EEEC`): Pale warm gray; border and divider lines
+Os tokens globais estão definidos em
+[`src/app/globals.css`](./src/app/globals.css). Componentes reutilizáveis ficam
+em [`src/shared/components/ui/`](./src/shared/components/ui/) e seguem o padrão
+do shadcn/ui com Radix UI e Tailwind CSS 4.
 
-### Surface & Borders
-- **Surface** (`#FFFFFF`): Pure white; primary card and container background; high-contrast surface
-- **Border Light** (`#F0EEEC`): Pale warm gray used for subtle borders between elements
-- **Border Dark** (`#2A2827`): Dark warm gray; stronger borders for defined card boundaries
+Ao implementar uma tela:
 
-### Semantic / Status
-- **Success** (`#0E9D6E`): Green used for positive status indicators, confirmation states, and success messages
-- **Warning** (`#F7A439`): Amber used for cautionary states, warnings, and attention-drawing alerts
-- **Error** (`#F53F2D`): Red-orange used for error states, destructive actions, and validation failures
-- **Error Alt** (`#D40C1A`): Deep red alternative for critical errors and danger states
+1. use classes semânticas como `bg-background`, `bg-card`, `text-foreground`,
+   `text-muted-foreground`, `border-border` e `ring-ring`;
+2. reutilize os componentes em `src/shared/components/ui/`;
+3. evite cores hexadecimais e valores arbitrários quando já existir um token;
+4. valide os dois temas antes de concluir a alteração.
 
-## 3. Typography Rules
+## 3. Cores
 
-### Font Family
-**Primary:** Inter (sans-serif)
-Fallback: `Inter, system-ui, -apple-system, sans-serif`
+A paleta é definida em OKLCH para manter uma percepção de contraste mais
+consistente. Não copie os valores para componentes: use os tokens semânticos.
 
-**Monospace:** ui-monospace
-Fallback: `ui-monospace, 'Courier New', monospace`
+| Token | Papel |
+|---|---|
+| `background` | Fundo geral da aplicação |
+| `foreground` | Texto principal |
+| `card` / `card-foreground` | Cards e conteúdo em destaque |
+| `popover` / `popover-foreground` | Menus, popovers e overlays |
+| `primary` / `primary-foreground` | Ações principais, foco e seleção |
+| `secondary` / `secondary-foreground` | Ações secundárias e superfícies discretas |
+| `muted` / `muted-foreground` | Apoio visual, descrições e metadados |
+| `accent` / `accent-foreground` | Hover e seleção leve |
+| `success` | Confirmações, recebimentos e estados positivos |
+| `warning` | Atenção, vencimentos e estados intermediários |
+| `info` | Informações auxiliares |
+| `destructive` | Erros e ações destrutivas |
+| `border`, `input`, `ring` | Bordas, campos e foco |
 
-### Hierarchy
+### Gráficos
 
-| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
-|------|------|------|--------|-------------|----------------|-------|
-| Display / H1 | Inter | 60px | 600 | 60px | 0px | Page titles and hero headlines; maximum visual impact |
-| Heading H2 | Inter | 36px | 600 | 40px | 0px | Section headers and major subsections |
-| Heading H3 | Inter | 16px | 600 | 20px | 0px | Card titles and smaller section headers |
-| Body | Inter | 20px | 400 | 28px | 0px | Descriptive text, paragraphs, and long-form content |
-| Body Secondary | Inter | 16px | 400 | 24px | 0px | Standard body text, list items, and descriptions |
-| Emphasis / Span | Inter | 14px | 500 | 20px | 0px | Emphasized text, labels, and badge content |
-| Button | Inter | 14px | 500 | 20px | 0px | All button text; medium weight for clarity |
-| Caption | Inter | 14px | 400 | 20px | 0px | Metadata, timestamps, and small supporting text |
-| Code | ui-monospace | 14px | 400 | 20px | 0px | Code blocks and technical content |
+Gráficos usam `chart-1` a `chart-10`. Visualizações que precisam de uma escala
+sequencial quente podem usar `data-1` a `data-6`. A cor nunca deve ser o único
+meio de distinguir uma série: inclua legenda, rótulo ou tooltip.
 
-### Principles
-- **Contrast & Clarity:** Text color `#0F0D0C` on light backgrounds; `#FFFFFF` on dark backgrounds
-- **Weight Hierarchy:** Use 600 weight for all headings; 500 for interactive/emphasized text; 400 for body
-- **Scale Progression:** Sizes increase in meaningful increments (14 → 16 → 20 → 36 → 60); maintain consistent rhythm
-- **Line Height:** Body text uses 1.4× line height multiplier for comfortable reading; headings use tighter ratio (1:1) for impact
-- **Readability First:** Avoid line lengths over 80 characters for long-form content; increase line height on smaller screens
+### Tema escuro
 
-## 4. Component Stylings
+O tema escuro redefine a mesma camada semântica dentro de `.dark`. Não crie uma
+segunda árvore de componentes para suportá-lo. Prefira tokens e, somente quando
+necessário, variantes Tailwind `dark:`.
 
-### Buttons
+## 4. Tipografia
 
-#### Primary Button
-- **Background:** `#FF7733`
-- **Text Color:** `#FFFFFF`
-- **Font Size:** `14px`
-- **Font Weight:** `500`
-- **Font Family:** `Inter`
-- **Padding:** `8px 16px`
-- **Border Radius:** `9.2px`
-- **Border:** `0px solid transparent`
-- **Height:** `40px`
-- **Box Shadow:** `none`
-- **Hover State:** Darken background to `#E55F1F`; add subtle shadow `0px 2px 8px rgba(0, 0, 0, 0.12)`
-- **Active State:** Darken further to `#CC5118`; increase shadow
-- **Disabled State:** Background `#E8E3E0`; text color `#999890`; cursor not-allowed
+A família principal é **Bricolage Grotesque**, carregada com `next/font` em
+[`public/fonts/font_index.ts`](./public/fonts/font_index.ts). Os pesos
+disponíveis são `500`, `600` e `700`, com fallback para Arial e fontes sans-serif
+do sistema.
 
-#### Secondary Button
-- **Background:** `#FFFFFF`
-- **Text Color:** `#2A2827`
-- **Font Size:** `14px`
-- **Font Weight:** `500`
-- **Font Family:** `Inter`
-- **Padding:** `8px 24px`
-- **Border Radius:** `9.2px`
-- **Border:** `1px solid #F0EEEC`
-- **Height:** `40px`
-- **Box Shadow:** `0px 1px 3px rgba(0, 0, 0, 0.06)`
-- **Hover State:** Background `#F8F6F4`; border color `#E8E3E0`
-- **Active State:** Background `#F0EEEC`; border color `#D5CCCA`
-- **Disabled State:** Background `#FAFAF8`; text color `#BFBAB7`; border color `#F0EEEC`
+Diretrizes:
 
-#### Ghost Button
-- **Background:** `transparent`
-- **Text Color:** `#443732`
-- **Font Size:** `14px`
-- **Font Weight:** `500`
-- **Font Family:** `Inter`
-- **Padding:** `6px 8px`
-- **Border Radius:** `9.2px`
-- **Border:** `0px solid transparent`
-- **Height:** `32px`
-- **Box Shadow:** `none`
-- **Hover State:** Background `rgba(68, 55, 50, 0.05)`
-- **Active State:** Background `rgba(68, 55, 50, 0.1)`
-- **Disabled State:** Text color `#BFBAB7`; cursor not-allowed
+- corpo e controles: `text-sm` ou `text-base`;
+- descrições e metadados: `text-sm text-muted-foreground`;
+- títulos de card: `text-base font-medium`;
+- títulos de modal: `text-lg font-semibold`;
+- títulos de página: hierarquia responsiva conforme a densidade da tela;
+- números financeiros: destaque por peso e alinhamento, sem depender apenas da
+  cor.
 
-#### Icon Button
-- **Background:** `transparent`
-- **Icon Color:** `#443732`
-- **Size:** `32px` × `32px`
-- **Border Radius:** `9.2px`
-- **Border:** `0px solid transparent`
-- **Padding:** `0px`
-- **Box Shadow:** `none`
-- **Hover State:** Background `rgba(68, 55, 50, 0.08)`
-- **Active State:** Background `rgba(68, 55, 50, 0.12)`
+## 5. Espaçamento, raio e elevação
 
-### Cards & Containers
+A escala base é de `0.25rem` (`4px`). Prefira a escala padrão do Tailwind para
+padding, gap e margens. O raio base é `0.7rem`, exposto pelas classes
+`rounded-sm`, `rounded-md`, `rounded-lg` e `rounded-xl`.
 
-#### Standard Card
-- **Background:** `#FFFFFF`
-- **Border:** `1px solid #F0EEEC`
-- **Border Radius:** `11.2px`
-- **Padding:** `24px`
-- **Box Shadow:** `none`
-- **Text Color:** `#2A2827`
-- **Hover State:** Border color `#E8E3E0`; box-shadow `0px 4px 12px rgba(0, 0, 0, 0.08)`
+Sombras também são tokens. Cards comuns usam `shadow-xs`; menus, tooltips e
+modais podem subir de nível conforme a necessidade. Evite adicionar sombra forte
+a cada bloco: bordas e diferença de superfície devem resolver a maior parte da
+hierarquia.
 
-#### Card with Top Border
-- **Background:** `#FFFFFF`
-- **Border:** `1px solid #F0EEEC`
-- **Border Radius:** `15.2px 15.2px 0px 0px` (top corners only)
-- **Padding:** `24px`
-- **Box Shadow:** `none`
-- **Top Border Color:** `#FF7733` (3px height implied)
+## 6. Componentes
 
-#### Surface Container (Header/Nav)
-- **Background:** `#FF7733`
-- **Height:** `64px`
-- **Padding:** `0px 24px`
-- **Box Shadow:** `none`
-- **Text Color:** `#FFFFFF`
-- **Border:** `0px solid transparent`
+### Botões
 
-#### Light Surface
-- **Background:** `#F8F6F4`
-- **Border:** `0px solid transparent`
-- **Border Radius:** `11.2px`
-- **Padding:** `16px`
-- **Box Shadow:** `none`
+Use [`Button`](./src/shared/components/ui/button.tsx) e suas variantes:
 
-### Inputs & Forms
+| Variante | Uso |
+|---|---|
+| `default` | Ação principal da tela ou do fluxo |
+| `secondary` | Ação complementar |
+| `outline` | Ação neutra com contorno |
+| `ghost` | Ação discreta em barras e grupos |
+| `link` | Ação textual |
+| `destructive` | Exclusão ou operação irreversível |
+| `navbar` | Ferramentas da navegação superior |
 
-#### Text Input
-- **Background:** `#FFFFFF`
-- **Border:** `1px solid #F0EEEC`
-- **Border Radius:** `9.2px`
-- **Padding:** `12px 16px`
-- **Font Size:** `16px`
-- **Text Color:** `#2A2827`
-- **Line Height:** `24px`
-- **Placeholder Color:** `#999890`
-- **Focus State:** Border color `#FF7733`; box-shadow `0px 0px 0px 3px rgba(255, 119, 51, 0.1)`
-- **Error State:** Border color `#F53F2D`; background `#FEF5F3`
-- **Disabled State:** Background `#F8F6F4`; text color `#BFBAB7`; border color `#F0EEEC`
+Não coloque duas ações `default` competindo na mesma região. Para ícones sem
+rótulo visível, inclua `aria-label` ou texto apenas para leitores de tela.
 
-#### Select / Dropdown
-- **Background:** `#FFFFFF`
-- **Border:** `1px solid #F0EEEC`
-- **Border Radius:** `9.2px`
-- **Padding:** `12px 16px`
-- **Font Size:** `16px`
-- **Text Color:** `#2A2827`
-- **Focus State:** Border color `#FF7733`; outline `0px`
-- **Hover State:** Background `#FAFAF8`
+### Cards
 
-#### Checkbox & Radio
-- **Size:** `20px` × `20px`
-- **Border Radius:** `4px` (checkbox), `50%` (radio)
-- **Border:** `2px solid #F0EEEC`
-- **Background:** `#FFFFFF`
-- **Checked Background:** `#FF7733`
-- **Checked Border:** `2px solid #FF7733`
-- **Checked Icon Color:** `#FFFFFF`
-- **Focus:** Border `2px solid #FF7733`; box-shadow `0px 0px 0px 3px rgba(255, 119, 51, 0.1)`
+Use [`Card`](./src/shared/components/ui/card.tsx) para agrupar informações
+relacionadas. O componente já define fundo, borda, sombra leve, raio e destaque
+de hover. Não transforme todo conteúdo em card: listas densas e tabelas podem
+usar uma única superfície.
 
-### Navigation
+### Formulários
 
-#### Primary Navigation
-- **Background:** `#FF7733`
-- **Height:** `64px`
-- **Padding:** `0px 48px`
-- **Display:** flex; align-items: center; gap `32px`
-- **Link Color:** `#FFFFFF`
-- **Link Font Size:** `16px`
-- **Link Font Weight:** `400`
-- **Link Hover:** Opacity `0.8`
-- **Link Active:** Text decoration underline; opacity `1.0`
+Campos devem usar os componentes compartilhados, como `Input`, `Select`,
+`Checkbox`, `Switch` e `DatePicker`. Eles já aplicam foco com `ring`, estados
+desabilitados e integração visual com os temas. Sempre associe controles a
+`Label` e apresente erros próximos ao campo correspondente.
 
-#### Secondary Navigation / Tabs
-- **Background:** `transparent`
-- **Border Bottom:** `2px solid #F0EEEC`
-- **Tab Padding:** `16px 24px`
-- **Tab Color:** `#676260`
-- **Tab Font Size:** `16px`
-- **Tab Hover:** Color `#443732`
-- **Tab Active:** Color `#FF7733`; border-bottom color `#FF7733`
+### Diálogos
 
-#### Breadcrumb Navigation
-- **Font Size:** `14px`
-- **Color:** `#676260`
-- **Separator:** `/` with `0px 8px` margin
-- **Link Color:** `#443732`
-- **Link Hover:** Color `#FF7733`
-- **Current (Active):** Color `#2A2827`; font-weight `500`
+Use [`Dialog`](./src/shared/components/ui/dialog.tsx) para tarefas focadas. Em
+mobile, o conteúdo respeita a largura disponível; em telas maiores, o modal pode
+ganhar mais espaço. Botões do rodapé devem preservar a ordem e a hierarquia da
+ação principal.
 
-### Badges & Status Indicators
+### Feedback
 
-#### Badge – Default
-- **Background:** `#F8F6F4`
-- **Text Color:** `#443732`
-- **Padding:** `4px 12px`
-- **Border Radius:** `20px`
-- **Font Size:** `12px`
-- **Font Weight:** `500`
-- **Border:** `0px solid transparent`
+Use toast para retorno breve, `Alert` para contexto persistente e componentes em
+[`src/shared/components/feedback/`](./src/shared/components/feedback/) para
+estados vazios, status e confirmações. Textos visíveis ao usuário devem estar em
+português claro.
 
-#### Badge – Success
-- **Background:** `#E8F5F0`
-- **Text Color:** `#0E9D6E`
-- **Padding:** `4px 12px`
-- **Border Radius:** `20px`
-- **Font Size:** `12px`
-- **Font Weight:** `500`
+## 7. Layout e navegação
 
-#### Badge – Warning
-- **Background:** `#FEF5E8`
-- **Text Color:** `#F7A439`
-- **Padding:** `4px 12px`
-- **Border Radius:** `20px`
-- **Font Size:** `12px`
-- **Font Weight:** `500`
+As páginas protegidas usam uma navbar fixa e um contêiner central com largura
+máxima `max-w-8xl`, padding lateral responsivo e espaçamento vertical enxuto. A
+navegação principal fica em
+[`src/shared/components/navigation/navbar/`](./src/shared/components/navigation/navbar/).
 
-#### Badge – Error
-- **Background:** `#FEF5F3`
-- **Text Color:** `#F53F2D`
-- **Padding:** `4px 12px`
-- **Border Radius:** `20px`
-- **Font Size:** `12px`
-- **Font Weight:** `500`
+Padrões:
 
-## 5. Layout Principles
+- telas do App Router devem continuar finas;
+- conteúdo principal começa abaixo da navbar fixa (`pt-16`);
+- use uma coluna em telas pequenas e expanda grids progressivamente;
+- tabelas e gráficos devem preservar leitura em viewport estreita;
+- ações essenciais precisam continuar alcançáveis por toque e teclado.
 
-### Spacing System
-- **Base Unit:** `4px`
-- **Scale:** `4px`, `8px`, `12px`, `16px`, `24px`, `32px`, `48px`, `56px`, `64px`, `80px`, `96px`, `128px`
+## 8. Acessibilidade
 
-**Usage Contexts:**
-- **4–8px:** Tight spacing within compact components (icon-text pairs, inline elements)
-- **12–16px:** Standard padding inside cards, inputs, and buttons
-- **24–32px:** Section gaps, spacing between components on a page
-- **48–64px:** Large section separations, hero spacing
-- **80–128px:** Hero margins, page-level vertical rhythm
+- mantenha foco visível com os tokens `ring`;
+- use HTML semântico antes de adicionar ARIA;
+- não comunique estado apenas por cor;
+- associe labels a inputs;
+- forneça nome acessível para botões de ícone;
+- confira contraste e navegação por teclado nos temas claro e escuro;
+- mantenha áreas de toque confortáveis em mobile.
 
-### Grid & Container
-- **Max Width:** `1440px` for full-width containers
-- **Content Width:** `1152px` for typical page layouts
-- **Column Strategy:** 12-column grid system; gutter `24px`
-- **Container Padding:** `48px` on desktop (left + right)
-- **Section Pattern:** Full-width containers with internal max-width constraint
+## 9. Checklist de revisão visual
 
-### Whitespace Philosophy
-OpenMonetis prioritizes breathing room and visual clarity. Whitespace is intentional and strategic—surrounding headings, separating card groups, and framing key messages. The warm neutral backgrounds (`#F8F6F4`, `#F5F2EF`) create natural visual separation without hard borders. Minimum margin between major sections is `64px` vertically; minimum padding inside containers is `16px`.
-
-### Border Radius Scale
-- **Sharp Corners:** `0px` (utility container tops, category selectors)
-- **Subtle Radius:** `9.2px` (buttons, small inputs, icon buttons)
-- **Standard Radius:** `11.2px` (cards, standard containers, modals)
-- **Rounded Top:** `15.2px 15.2px 0px 0px` (card headers, sheet-style containers)
-- **Pill Shape:** `24px` (badges, full-rounded tags, avatar images)
-- **Circle:** `50%` (avatar images, radial elements)
-
-## 6. Depth & Elevation
-
-| Level | Treatment | Use |
-|-------|-----------|-----|
-| Flat (None) | No shadow, `border: 1px solid #F0EEEC` | Default cards, inputs, containers; baseline surfaces |
-| Subtle (sm) | `0px 1px 3px rgba(0, 0, 0, 0.06)` | Secondary buttons, hover states on light surfaces |
-| Medium (md) | `0px 4px 12px rgba(0, 0, 0, 0.08)` | Elevated cards on hover, floating actions |
-| Deep (lg) | `0px 10px 24px rgba(0, 0, 0, 0.12)` | Modals, dropdowns, popover menus |
-
-**Shadow Philosophy:**
-The design system uses restrained shadow treatment aligned with a flat-modern aesthetic. Shadows emerge subtly on interaction (hover, focus) rather than as default styling. The primary depth cue is border color (`#F0EEEC`), which maintains visual hierarchy without excessive z-depth. When shadows are used, they employ warm-tinted blacks (`rgba(0, 0, 0, 0.06–0.12)`) to harmonize with the warm neutral palette.
-
-## 7. Do's and Don'ts
-
-### Do
-- Use the primary orange (`#FF7733`) exclusively for the most important call-to-action buttons
-- Apply generous padding (`24px–48px`) around sections and inside cards for breathing room
-- Stack elements vertically with `24–32px` gaps for clear visual rhythm
-- Use warm grays (`#443732`, `#2A2827`) for all body text to maintain the warm aesthetic
-- Apply `9.2px` border radius consistently to all interactive elements (buttons, inputs)
-- Keep line heights at `1.4×` or greater for comfortable reading on body text
-- Use semantic colors (`#0E9D6E` success, `#F7A439` warning, `#F53F2D` error) intentionally
-- Test contrast ratios; maintain WCAG AA minimum (4.5:1 for body text)
-- Use the `Inter` typeface exclusively for consistency
-- Implement focus states with a `3px` colored outline or border
-
-### Don't
-- Don't use orange anywhere except primary CTAs and critical highlights
-- Don't reduce padding below `12px` inside cards or `8px` inside compact buttons
-- Don't use dark backgrounds (`#0F0D0C`) for body text on light surfaces; stick to `#2A2827` or `#443732`
-- Don't apply shadows as default styling; reserve them for elevated states (hover, focus, modal)
-- Don't mix border radius values on the same component type; stick to defined scale
-- Don't increase line height above `1.6×` for headings; tighten for impact
-- Don't use the error color (`#F53F2D`) for general emphasis; reserve for genuine errors
-- Don't create new colors outside the palette; use opacity if gradation is needed
-- Don't apply multiple shadows to a single element; layer a maximum of two shadow values
-- Don't forget to include focus/keyboard navigation states on all interactive elements
-
-## 8. Responsive Behavior
-
-### Breakpoints
-
-| Breakpoint | Width | Key Changes |
-|-----------|-------|-------------|
-| Mobile | `375px–599px` | Single column; container padding `16px`; font sizes reduce 1–2 sizes; gap scale halved |
-| Tablet | `600px–1023px` | Two-column grid; container padding `32px`; button height `36px`; heading sizes reduce slightly |
-| Desktop | `1024px+` | Full 12-column grid; container padding `48px`; full-scale typography; max-width `1440px` |
-
-### Touch Targets
-- **Minimum Interactive Size:** `44px` × `44px` for mobile; `40px` × `40px` for desktop
-- **Button Padding:** `12px` vertical, `16px` horizontal (minimum)
-- **Link Padding:** `6px` vertical, `8px` horizontal minimum
-- **Icon Button:** `32px` × `32px` minimum (32px on mobile preferred)
-- **Spacing Between Targets:** `8px` minimum to avoid accidental activation
-
-### Collapsing Strategy
-- **Navigation:** Horizontal nav on desktop collapses to hamburger menu on tablet; menu items stack vertically with `12px` gap
-- **Grid:** 12-column layout on desktop → 6-column on tablet → 2-column (stacked) on mobile
-- **Cards:** Three-column card layouts collapse to single column on mobile; padding reduces from `24px` to `16px`
-- **Typography:** Display (60px) → 36px on tablet → 28px on mobile; body (20px) → 18px on tablet → 16px on mobile
-- **Spacing:** All spacing scale values reduce by 25–33% on mobile (e.g., `24px` gap → `16px` on tablet, `12px` on mobile)
-- **Buttons:** Full-width on mobile (padding `0px`); inline (auto-width) on desktop
-- **Inputs:** Full-width on mobile; constrained width on desktop
-
-## 9. Agent Prompt Guide
-
-### Quick Color Reference
-- **Primary CTA:** Warm Orange (`#FF7733`) — Buttons, highlights, key interactions
-- **Primary Text:** Warm Brown (`#443732`) — Headings, strong emphasis
-- **Secondary Text:** Dark Neutral (`#2A2827`) — Body text, card content
-- **Background:** White (`#FFFFFF`) — Cards, primary surfaces
-- **Background Alt:** Cream (`#FCF7F6`) — Alternative surfaces, light containers
-- **Border:** Pale Gray (`#F0EEEC`) — Card borders, divider lines
-- **Success:** Green (`#0E9D6E`) — Confirmation, positive states
-- **Warning:** Amber (`#F7A439`) — Cautions, attention states
-- **Error:** Red-Orange (`#F53F2D`) — Errors, destructive actions
-- **Disabled:** Light Gray (`#E8E3E0`) — Inactive elements, inaccessible states
-
-### Iteration Guide
-1. **Always use `#FF7733` for primary buttons** and all main call-to-action elements; secondary buttons use `#FFFFFF` with `#F0EEEC` border
-2. **Typography is always `Inter`** with weights 400 (body), 500 (emphasis), and 600 (headings); size hierarchy: 14 → 16 → 20 → 36 → 60px
-3. **Spacing base is `4px`**; use multiples from the scale (8, 12, 16, 24, 32, 48, 64, 80, 96, 128px); never arbitrary values
-4. **Border radius:** Apply `9.2px` to all buttons and inputs, `11.2px` to cards, `15.2px 15.2px 0px 0px` to top-bordered containers
-5. **Cards default to `#FFFFFF` background with `1px solid #F0EEEC` border**; add shadow only on hover (0px 4px 12px rgba(0, 0, 0, 0.08))
-6. **Form inputs:** Padding `12px 16px`, border `1px solid #F0EEEC`, focus state `border: 1px solid #FF7733` + `box-shadow: 0px 0px 0px 3px rgba(255, 119, 51, 0.1)`
-7. **Navigation background is always `#FF7733`** with white text; links in content use `#443732` with underline on active
-8. **Maintain 1.4× line height minimum for body text**; tighten headings to 1:1 or 1.2:1 ratio
-9. **Contrast validation:** Text `#0F0D0C` or `#2A2827` on light backgrounds (WCAG AA); text `#FFFFFF` on `#FF7733` (WCAG AAA)
-10. **Responsive collapse:** Reduce padding and font by 25% on mobile; stack multi-column layouts to single column; full-width buttons on mobile only
+- O componente compartilhado existente foi reutilizado?
+- As cores usam tokens semânticos?
+- A tela funciona em tema claro e escuro?
+- O layout continua legível em mobile?
+- Foco, labels e nomes acessíveis estão presentes?
+- Estados vazio, carregando, erro e sucesso foram considerados?
+- Valores financeiros continuam fáceis de comparar?

Dockerfile

@@ -5,12 +5,13 @@
 # ============================================
 FROM node:22-alpine AS deps
 
-RUN corepack enable && corepack prepare pnpm@10.33.0 --activate
+ARG PNPM_VERSION=11.1.3
+RUN corepack enable && corepack prepare pnpm@${PNPM_VERSION} --activate
 
 WORKDIR /app
 
 # Copiar apenas arquivos de dependências para aproveitar cache
-COPY package.json pnpm-lock.yaml* ./
+COPY package.json pnpm-lock.yaml* pnpm-workspace.yaml ./
 
 # Criar pasta public para o postinstall do pdfjs-dist
 RUN mkdir -p public
@@ -23,7 +24,8 @@ RUN pnpm install --frozen-lockfile
 # ============================================
 FROM node:22-alpine AS builder
 
-RUN corepack enable && corepack prepare pnpm@10.33.0 --activate
+ARG PNPM_VERSION=11.1.3
+RUN corepack enable && corepack prepare pnpm@${PNPM_VERSION} --activate
 
 WORKDIR /app
 
@@ -52,7 +54,8 @@ RUN pnpm build
 # ============================================
 FROM node:22-alpine AS runner
 
-RUN corepack enable && corepack prepare pnpm@10.33.0 --activate
+ARG PNPM_VERSION=11.1.3
+RUN corepack enable && corepack prepare pnpm@${PNPM_VERSION} --activate
 
 WORKDIR /app
 

README.md

@@ -8,7 +8,7 @@
 
 > **⚠️ Não há versão online hospedada.** Você precisa clonar o repositório e rodar localmente ou no seu próprio servidor.
 
-[![Version](https://img.shields.io/badge/version-2.5.5-blue?style=flat-square)](CHANGELOG.md)
+[![Version](https://img.shields.io/badge/version-2.7.1-blue?style=flat-square)](CHANGELOG.md)
 [![Next.js](https://img.shields.io/badge/Next.js-black?style=flat-square&logo=next.js)](https://nextjs.org/)
 [![TypeScript](https://img.shields.io/badge/TypeScript-blue?style=flat-square&logo=typescript)](https://www.typescriptlang.org/)
 [![PostgreSQL](https://img.shields.io/badge/PostgreSQL-blue?style=flat-square&logo=postgresql)](https://www.postgresql.org/)
@@ -36,9 +36,11 @@
 - [Backup](#-backup)
 - [Storage S3 Compatível](#-storage-s3-compatível)
 - [Variáveis de Ambiente](#-variáveis-de-ambiente)
+- [Design System](#-design-system)
 - [Arquitetura](#-arquitetura)
 - [Contribuindo](#-contribuindo)
 - [Apoie o Projeto](#-apoie-o-projeto)
+- [Star History](#-star-history)
 - [Licença](#-licença)
 
 ---
@@ -61,9 +63,9 @@ A ideia é simples: ter um lugar onde consigo ver todas as minhas contas, cartõ
 
 ### Funcionalidades
 
-💰 **Contas e transações** — Contas bancárias, cartões, dinheiro. Receitas, despesas e transferências. Categorização, filtros combináveis, extratos detalhados e importação de extratos OFX e XLS/XLSX com detecção automática de categoria.
+💰 **Contas e transações** — Contas bancárias, cartões, dinheiro. Receitas, despesas, rendimentos e transferências. Categorização, divisão de lançamentos entre várias pessoas, filtros combináveis com intervalo de datas, extratos detalhados e importação de extratos OFX e XLS/XLSX com detecção automática de categoria.
 
-📊 **Dashboard e relatórios** — Widgets interativos de métricas, gráficos de evolução, comparativos por categoria, tendências, uso de cartões, top estabelecimentos. Exportação em PDF e Excel.
+📊 **Dashboard e relatórios** — Widgets personalizáveis, métricas com atalhos para lançamentos, gráficos de evolução, comparativos por categoria, tendências, uso de cartões, top estabelecimentos e navegação direta entre meses pelo seletor de período. Exportação em PDF e Excel.
 
 💳 **Faturas de cartão** — Acompanhe faturas por período, controle limites e vencimentos.
 
@@ -71,7 +73,7 @@ A ideia é simples: ter um lugar onde consigo ver todas as minhas contas, cartõ
 
 💸 **Parcelamentos avançados** — Séries de parcelas, antecipação com cálculo de desconto, análise consolidada.
 
-🤖 **Insights com IA** — Análises geradas por Claude, GPT, Gemini ou OpenRouter. Insights personalizados e histórico salvo.
+🤖 **Insights com IA** — Análises geradas por Claude, GPT, Gemini, MiniMax, OpenRouter ou modelos locais via Ollama. Insights personalizados e histórico salvo.
 
 👥 **Gestão colaborativa** — Pagadores com permissões (admin/viewer), notificações automáticas por e-mail, códigos de compartilhamento.
 
@@ -85,7 +87,7 @@ A ideia é simples: ter um lugar onde consigo ver todas as minhas contas, cartõ
   <img src="./public/images/companion-preview-light.webp" alt="OpenMonetis Companion" width="300" height="600" />
 </p>
 
-⚙️ **Personalização** — Tema dark/light, modo privacidade e changelog visual para acompanhar as novidades do app.
+⚙️ **Personalização** — Tema dark/light, modo privacidade, ordem das colunas, exibição de anotações, tamanho máximo de anexos, resumo opcional no modal de lançamento e changelog visual para acompanhar as novidades do app.
 
 ### Stack técnica
 
@@ -93,9 +95,10 @@ A ideia é simples: ter um lugar onde consigo ver todas as minhas contas, cartõ
 - **PostgreSQL** + **Drizzle ORM**
 - **Better Auth** (email/senha, OAuth, Passkeys/WebAuthn)
 - **shadcn/ui** (Radix UI) + **Tailwind CSS**
+- **Bricolage Grotesque** via `next/font`
 - **Docker** (multi-stage build)
 - **Biome** (linting + formatting)
-- **Vercel AI SDK** (Claude, GPT, Gemini, OpenRouter)
+- **Vercel AI SDK** (Claude, GPT, Gemini, MiniMax, OpenRouter, Ollama)
 
 ---
 
@@ -127,10 +130,11 @@ Só quer rodar o OpenMonetis. **Não precisa clonar o repositório nem instalar
 # 1. Baixe o compose
 curl -fsSL https://raw.githubusercontent.com/felipegcoutinho/openmonetis/main/docker-compose.yml -o docker-compose.yml
 
-# 2. Crie um .en na mesma pasta.
+# 2. Crie um .env na mesma pasta.
 # .env mínimo recomendado para produção
 BETTER_AUTH_SECRET=gere-um-valor-com-openssl-rand-base64-32
 BETTER_AUTH_URL=http://seu-dominio.com
+DISABLE_SIGNUP=false # opcional: true bloqueia novos cadastros
 
 # 3. Suba tudo
 docker compose up -d
@@ -443,6 +447,11 @@ POSTGRES_USER=openmonetis
 POSTGRES_PASSWORD=openmonetis_dev_password
 POSTGRES_DB=openmonetis_db
 
+# Autenticação
+DISABLE_SIGNUP=false # true bloqueia novos cadastros
+AUTH_SESSION_EXPIRES_IN_DAYS=30 # duração de sessões persistentes
+AUTH_SESSION_UPDATE_AGE_HOURS=24 # frequência de renovação da sessão
+
 # S3 Server (opcional, necessario para anexos)
 S3_ENDPOINT=
 S3_REGION=
@@ -465,7 +474,10 @@ RESEND_FROM_EMAIL=
 ANTHROPIC_API_KEY=
 OPENAI_API_KEY=
 GOOGLE_GENERATIVE_AI_API_KEY=
+MINIMAX_API_KEY=
 OPENROUTER_API_KEY=
+OLLAMA_BASE_URL=http://localhost:11434/v1
+OLLAMA_API_KEY=
 
 # Logo.dev (opcional, necessário para logos automáticos de estabelecimentos)
 # Ambas as variáveis são runtime — basta definir no host; nenhum build arg necessário.
@@ -473,6 +485,38 @@ LOGO_DEV_TOKEN=
 LOGO_DEV_SECRET_KEY=
 ```
 
+### IA local com Ollama
+
+O provider Ollama permite gerar insights usando modelos locais. Instale e suba o Ollama no host onde o modelo ficará disponível:
+
+```bash
+ollama pull llama3.2
+ollama serve
+```
+
+Configure a URL OpenAI-compatible no `.env`:
+
+```env
+OLLAMA_BASE_URL=http://localhost:11434/v1
+# Opcional; normalmente o Ollama local não exige chave.
+OLLAMA_API_KEY=
+```
+
+Se o OpenMonetis estiver rodando dentro de um container Docker e o Ollama estiver no host, `localhost` aponta para o próprio container. Nesse caso, use uma URL acessível a partir do container, como `http://host.docker.internal:11434/v1` quando disponível, ou o endereço da rede Docker/host configurado no seu ambiente.
+
+---
+
+## 🎨 Design System
+
+O OpenMonetis usa uma identidade visual própria com superfícies quentes, laranja
+como cor de destaque, temas claro e escuro e tipografia Bricolage Grotesque. A
+interface é construída com tokens semânticos em OKLCH, Tailwind CSS 4 e
+componentes compartilhados baseados em shadcn/ui e Radix UI.
+
+As regras de cores, tipografia, componentes, responsividade e acessibilidade
+estão documentadas no [`DESIGN.md`](DESIGN.md). Use esse guia como referência ao
+criar telas ou alterar componentes visuais.
+
 ---
 
 ## 🏗️ Arquitetura
@@ -575,6 +619,18 @@ Outras formas de contribuir: ⭐ estrela no repo, reportar bugs, melhorar docs,
 
 ---
 
+## ⭐ Star History
+
+<a href="https://www.star-history.com/?repos=felipegcoutinho%2Fopenmonetis&type=date&legend=top-left">
+ <picture>
+   <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/chart?repos=felipegcoutinho/openmonetis&type=date&theme=dark&legend=top-left" />
+   <source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/chart?repos=felipegcoutinho/openmonetis&type=date&legend=top-left" />
+   <img alt="Star History Chart" src="https://api.star-history.com/chart?repos=felipegcoutinho/openmonetis&type=date&legend=top-left" />
+ </picture>
+</a>
+
+---
+
 ## 📄 Licença
 
 **Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International** (CC BY-NC-SA 4.0).

biome.json

@@ -1,5 +1,5 @@
 {
-	"$schema": "https://biomejs.dev/schemas/2.4.14/schema.json",
+	"$schema": "https://biomejs.dev/schemas/2.4.15/schema.json",
 	"vcs": {
 		"enabled": true,
 		"clientKind": "git",

drizzle/0030_complete_umar.sql

@@ -0,0 +1 @@
+ALTER TABLE "preferencias_usuario" ADD COLUMN "mostrar_resumo_lancamento" boolean DEFAULT true NOT NULL;

drizzle/meta/_journal.json

@@ -204,6 +204,13 @@
 			"when": 1777648189399,
 			"tag": "0029_friendly_spitfire",
 			"breakpoints": true
+		},
+		{
+			"idx": 30,
+			"version": "7",
+			"when": 1780150535055,
+			"tag": "0030_complete_umar",
+			"breakpoints": true
 		}
 	]
 }

package.json

@@ -1,8 +1,8 @@
 {
 	"name": "openmonetis",
-	"version": "2.5.5",
+	"version": "2.7.1",
 	"private": true,
-	"packageManager": "pnpm@10.33.0",
+	"packageManager": "pnpm@11.1.3",
 	"scripts": {
 		"dev": "next dev --turbopack",
 		"db:seed": "tsx scripts/mock-data.ts",
@@ -31,12 +31,13 @@
 		"mockup": "tsx scripts/mock-data.ts"
 	},
 	"dependencies": {
-		"@ai-sdk/anthropic": "^3.0.74",
-		"@ai-sdk/google": "^3.0.67",
-		"@ai-sdk/openai": "^3.0.60",
-		"@aws-sdk/client-s3": "^3.1042.0",
-		"@aws-sdk/s3-request-presigner": "^3.1042.0",
-		"@better-auth/passkey": "^1.6.9",
+		"@ai-sdk/anthropic": "^3.0.79",
+		"@ai-sdk/google": "^3.0.79",
+		"@ai-sdk/openai": "^3.0.65",
+		"@ai-sdk/openai-compatible": "^2.0.48",
+		"@aws-sdk/client-s3": "^3.1050.0",
+		"@aws-sdk/s3-request-presigner": "^3.1050.0",
+		"@better-auth/passkey": "^1.6.11",
 		"@dnd-kit/core": "^6.3.1",
 		"@dnd-kit/sortable": "^10.0.0",
 		"@dnd-kit/utilities": "^3.2.2",
@@ -63,53 +64,50 @@
 		"@radix-ui/react-toggle-group": "1.1.11",
 		"@radix-ui/react-tooltip": "1.2.8",
 		"@remixicon/react": "4.9.0",
-		"@tanstack/react-query": "^5.100.9",
+		"@tanstack/react-query": "^5.100.14",
 		"@tanstack/react-table": "8.21.3",
-		"@tanstack/react-virtual": "^3.13.24",
-		"ai": "^6.0.175",
-		"better-auth": "1.6.9",
+		"@tanstack/react-virtual": "^3.13.26",
+		"ai": "^6.0.191",
+		"better-auth": "1.6.11",
 		"canvas-confetti": "^1.9.4",
 		"class-variance-authority": "0.7.1",
 		"clsx": "2.1.1",
 		"cmdk": "^1.1.1",
-		"date-fns": "^4.1.0",
+		"date-fns": "^4.3.0",
 		"drizzle-orm": "0.45.2",
 		"exceljs": "^4.4.0",
 		"jspdf": "^4.2.1",
-		"jspdf-autotable": "^5.0.7",
-		"next": "16.2.4",
+		"jspdf-autotable": "^5.0.8",
+		"next": "16.2.6",
 		"next-themes": "0.4.6",
 		"pdfjs-dist": "^5.7.284",
-		"pg": "8.20.0",
-		"react": "19.2.5",
-		"react-day-picker": "^9.14.0",
-		"react-dom": "19.2.5",
+		"pg": "8.21.0",
+		"react": "19.2.6",
+		"react-day-picker": "^10.0.1",
+		"react-dom": "19.2.6",
 		"recharts": "3.8.1",
-		"resend": "^6.12.2",
+		"resend": "^6.12.4",
 		"sonner": "2.0.7",
-		"tailwind-merge": "3.5.0",
+		"tailwind-merge": "3.6.0",
 		"tw-animate-css": "^1.4.0",
 		"vaul": "1.1.2",
+		"vercel-minimax-ai-provider": "^0.0.2",
 		"zod": "4.4.3"
 	},
-	"pnpm": {
-		"overrides": {
-			"defu": "6.1.7"
-		}
-	},
 	"devDependencies": {
-		"@biomejs/biome": "2.4.14",
-		"@tailwindcss/postcss": "4.2.4",
+		"@biomejs/biome": "2.4.15",
+		"@tailwindcss/postcss": "4.3.0",
 		"@types/canvas-confetti": "^1.9.0",
-		"@types/node": "25.6.0",
+		"@types/node": "25.9.1",
 		"@types/pg": "^8.20.0",
-		"@types/react": "19.2.14",
+		"@types/react": "19.2.15",
 		"@types/react-dom": "19.2.3",
+		"babel-plugin-react-compiler": "^1.0.0",
 		"dotenv": "^17.4.2",
 		"drizzle-kit": "0.31.10",
-		"knip": "^6.11.0",
-		"tailwindcss": "4.2.4",
-		"tsx": "4.21.0",
+		"knip": "^6.14.2",
+		"tailwindcss": "4.3.0",
+		"tsx": "4.22.3",
 		"typescript": "6.0.3"
 	}
 }

pnpm-workspace.yaml

@@ -1,5 +1,35 @@
-onlyBuiltDependencies:
-  - core-js
-  - esbuild
-  - sharp
-  - unrs-resolver
+packages:
+  - '.'
+
+allowBuilds:
+  core-js: true
+  esbuild: true
+  sharp: true
+  unrs-resolver: true
+
+minimumReleaseAgeExclude:
+  - '@aws-sdk/client-s3@3.1050.0'
+  - '@aws-sdk/s3-request-presigner@3.1050.0'
+  - '@types/node@25.9.1'
+  - '@types/react@19.2.15'
+  - '@aws-sdk/client-s3@3.1054.0'
+  - '@aws-sdk/core@3.974.14'
+  - '@aws-sdk/credential-provider-env@3.972.40'
+  - '@aws-sdk/credential-provider-http@3.972.42'
+  - '@aws-sdk/credential-provider-ini@3.972.44'
+  - '@aws-sdk/credential-provider-login@3.972.44'
+  - '@aws-sdk/credential-provider-node@3.972.45'
+  - '@aws-sdk/credential-provider-process@3.972.40'
+  - '@aws-sdk/credential-provider-sso@3.972.44'
+  - '@aws-sdk/credential-provider-web-identity@3.972.44'
+  - '@aws-sdk/middleware-bucket-endpoint@3.972.16'
+  - '@aws-sdk/middleware-flexible-checksums@3.974.22'
+  - '@aws-sdk/middleware-sdk-s3@3.972.43'
+  - '@aws-sdk/nested-clients@3.997.12'
+  - '@aws-sdk/s3-request-presigner@3.1054.0'
+  - '@aws-sdk/signature-v4-multi-region@3.996.29'
+  - '@aws-sdk/token-providers@3.1054.0'
+  - '@aws-sdk/xml-builder@3.972.26'
+
+overrides:
+  defu: 6.1.7

public/fonts/font_index.ts

@@ -1,10 +1,10 @@
-import { Inter } from "next/font/google";
+import { Bricolage_Grotesque } from "next/font/google";
 
-export const inter = Inter({
+export const bricolage = Bricolage_Grotesque({
 	subsets: ["latin"],
 	display: "swap",
-	variable: "--font-inter",
-	fallback: ["ui-sans-serif", "system-ui"],
+	variable: "--font-bricolage",
+	fallback: ["arial", "ui-sans-serif", "system-ui"],
 	weight: ["500", "600", "700"],
 	preload: true,
 });

public/providers/minimax.svg

@@ -0,0 +1 @@
+<svg height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>MiniMax</title><defs><linearGradient id="lobe-icons-minimax-gradient" x1="0%" x2="100.182%" y1="50.057%" y2="50.057%"><stop offset="0%" stop-color="#E2167E"/><stop offset="100%" stop-color="#FE603C"/></linearGradient></defs><path d="M16.278 2c1.156 0 2.093.927 2.093 2.07v12.501a.74.74 0 00.744.709.74.74 0 00.743-.709V9.099a2.06 2.06 0 012.071-2.049A2.06 2.06 0 0124 9.1v6.561a.649.649 0 01-.652.645.649.649 0 01-.653-.645V9.1a.762.762 0 00-.766-.758.762.762 0 00-.766.758v7.472a2.037 2.037 0 01-2.048 2.026 2.037 2.037 0 01-2.048-2.026v-12.5a.785.785 0 00-.788-.753.785.785 0 00-.789.752l-.001 15.904A2.037 2.037 0 0113.441 22a2.037 2.037 0 01-2.048-2.026V18.04c0-.356.292-.645.652-.645.36 0 .652.289.652.645v1.934c0 .263.142.506.372.638.23.131.514.131.744 0a.734.734 0 00.372-.638V4.07c0-1.143.937-2.07 2.093-2.07zm-5.674 0c1.156 0 2.093.927 2.093 2.07v11.523a.648.648 0 01-.652.645.648.648 0 01-.652-.645V4.07a.785.785 0 00-.789-.78.785.785 0 00-.789.78v14.013a2.06 2.06 0 01-2.07 2.048 2.06 2.06 0 01-2.071-2.048V9.1a.762.762 0 00-.766-.758.762.762 0 00-.766.758v3.8a2.06 2.06 0 01-2.071 2.049A2.06 2.06 0 010 12.9v-1.378c0-.357.292-.646.652-.646.36 0 .653.29.653.646V12.9c0 .418.343.757.766.757s.766-.339.766-.757V9.099a2.06 2.06 0 012.07-2.048 2.06 2.06 0 012.071 2.048v8.984c0 .419.343.758.767.758.423 0 .766-.339.766-.758V4.07c0-1.143.937-2.07 2.093-2.07z" fill="url(#lobe-icons-minimax-gradient)" fill-rule="nonzero"/></svg>

setup.mjs

@@ -229,14 +229,22 @@ if (await askYesNo("  E-mail via Resend (notificações e convites)?")) {
 let anthropicKey = "";
 let openaiKey = "";
 let googleAiKey = "";
+let minimaxKey = "";
 let openrouterKey = "";
-if (await askYesNo("  Insights com IA (Claude, GPT, Gemini, OpenRouter)?")) {
+let ollamaBaseUrl = "";
+let ollamaApiKey = "";
+if (await askYesNo("  Insights com IA (Claude, GPT, Gemini, MiniMax, OpenRouter)?")) {
   console.log(`  ${c.dim}Deixe em branco o que não for usar${c.reset}`);
   anthropicKey = await ask("  ANTHROPIC_API_KEY: ");
   openaiKey = await ask("  OPENAI_API_KEY: ");
   googleAiKey = await ask("  GOOGLE_GENERATIVE_AI_API_KEY: ");
+  minimaxKey = await ask("  MINIMAX_API_KEY: ");
   openrouterKey = await ask("  OPENROUTER_API_KEY: ");
 }
+if (await askYesNo("  Insights locais com Ollama?")) {
+  ollamaBaseUrl = await askDefault("  OLLAMA_BASE_URL", "http://localhost:11434/v1");
+  ollamaApiKey = await ask("  OLLAMA_API_KEY (opcional): ");
+}
 
 // Domínio público
 let publicDomain = "";
@@ -285,6 +293,9 @@ const envContent = [
   "# === Better Auth ===",
   `BETTER_AUTH_SECRET=${authSecret}`,
   `BETTER_AUTH_URL=${betterAuthUrl}`,
+  "DISABLE_SIGNUP=false",
+  "AUTH_SESSION_EXPIRES_IN_DAYS=30",
+  "AUTH_SESSION_UPDATE_AGE_HOURS=24",
   "",
   "# === Portas ===",
   "APP_PORT=3000",
@@ -310,7 +321,10 @@ const envContent = [
   opt("ANTHROPIC_API_KEY", anthropicKey),
   opt("OPENAI_API_KEY", openaiKey),
   opt("GOOGLE_GENERATIVE_AI_API_KEY", googleAiKey),
+  opt("MINIMAX_API_KEY", minimaxKey),
   opt("OPENROUTER_API_KEY", openrouterKey),
+  opt("OLLAMA_BASE_URL", ollamaBaseUrl),
+  opt("OLLAMA_API_KEY", ollamaApiKey),
 ].join("\n");
 
 writeFileSync(join(targetDir, ".env"), envContent);

src/app/(auth)/login/page.tsx

@@ -1,5 +1,6 @@
 import { LoginForm } from "@/features/auth/components/login-form";
+import { isSignupDisabled } from "@/shared/lib/auth/signup";
 
 export default function LoginPage() {
-	return <LoginForm />;
+	return <LoginForm signupDisabled={isSignupDisabled()} />;
 }

src/app/(auth)/signup/page.tsx

@@ -1,5 +1,11 @@
+import { redirect } from "next/navigation";
 import { SignupForm } from "@/features/auth/components/signup-form";
+import { isSignupDisabled } from "@/shared/lib/auth/signup";
 
 export default function SignupPage() {
+	if (isSignupDisabled()) {
+		redirect("/login");
+	}
+
 	return <SignupForm />;
 }

src/app/(dashboard)/accounts/[accountId]/statement/page.tsx

@@ -3,6 +3,7 @@ import { notFound } from "next/navigation";
 import { connection } from "next/server";
 import { AccountDialog } from "@/features/accounts/components/account-dialog";
 import { AccountStatementCard } from "@/features/accounts/components/account-statement-card";
+import { AddYieldDialog } from "@/features/accounts/components/add-yield-dialog";
 import { AdjustBalanceDialog } from "@/features/accounts/components/adjust-balance-dialog";
 import type { Account } from "@/features/accounts/components/types";
 import {
@@ -31,6 +32,7 @@ import MonthNavigation from "@/shared/components/month-picker/month-navigation";
 import { Button } from "@/shared/components/ui/button";
 import { getUserId } from "@/shared/lib/auth/server";
 import { loadLogoOptions } from "@/shared/lib/logo/options";
+import { getBusinessDateString } from "@/shared/utils/date";
 import { parsePeriodParam } from "@/shared/utils/period";
 
 type PageSearchParams = Promise<ResolvedSearchParams>;
@@ -43,6 +45,26 @@ type PageProps = {
 const capitalize = (value: string) =>
 	value.length > 0 ? value[0]?.toUpperCase().concat(value.slice(1)) : value;
 
+const resolveDefaultPaymentMethod = (
+	accountType: string | null | undefined,
+) => {
+	if (accountType === "Dinheiro") return "Dinheiro";
+	if (accountType === "Pré-Pago | VR/VA") return "Pré-Pago | VR/VA";
+
+	return "Pix";
+};
+
+const resolveDefaultYieldDate = (period: string) => {
+	const today = getBusinessDateString();
+	if (today.startsWith(period)) return today;
+
+	const [year, month] = period.split("-").map((part) => Number(part));
+	if (!year || !month) return today;
+
+	const lastDay = new Date(year, month, 0).getDate();
+	return `${period}-${String(lastDay).padStart(2, "0")}`;
+};
+
 export default async function Page({ params, searchParams }: PageProps) {
 	await connection();
 	const { accountId } = await params;
@@ -100,6 +122,7 @@ export default async function Page({ params, searchParams }: PageProps) {
 		accountSummary;
 
 	const periodLabel = `${capitalize(monthName)} de ${year}`;
+	const defaultYieldDate = resolveDefaultYieldDate(selectedPeriod);
 
 	const accountDialogData: Account = {
 		id: account.id,
@@ -143,11 +166,17 @@ export default async function Page({ params, searchParams }: PageProps) {
 				totalExpenses={totalExpenses}
 				logo={account.logo}
 				balanceAdjustment={
-					<AdjustBalanceDialog
-						accountId={account.id}
-						period={selectedPeriod}
-						currentBalance={currentBalance}
-					/>
+					<>
+						<AddYieldDialog
+							accountId={account.id}
+							defaultDate={defaultYieldDate}
+						/>
+						<AdjustBalanceDialog
+							accountId={account.id}
+							period={selectedPeriod}
+							currentBalance={currentBalance}
+						/>
+					</>
 				}
 				actions={
 					<AccountDialog
@@ -197,7 +226,11 @@ export default async function Page({ params, searchParams }: PageProps) {
 						accountId: account.id,
 						settledOnly: true,
 					}}
-					allowCreate={false}
+					allowCreate
+					defaultAccountId={account.id}
+					defaultPaymentMethod={resolveDefaultPaymentMethod(
+						account.accountType,
+					)}
 					noteAsColumn={userPreferences?.statementNoteAsColumn ?? false}
 					columnOrder={userPreferences?.transactionsColumnOrder ?? null}
 					attachmentMaxSizeMb={userPreferences?.attachmentMaxSizeMb ?? 50}

src/app/(dashboard)/accounts/layout.tsx

@@ -16,8 +16,7 @@ export default function RootLayout({
 				icon={<RiBankLine />}
 				title="Contas"
 				subtitle="Acompanhe todas as contas do mês selecionado incluindo receitas,
-        despesas e transações previstas. Use o seletor abaixo para navegar pelos
-        meses e visualizar as movimentações correspondentes."
+        despesas e transações previstas."
 			/>
 			{children}
 		</section>

src/app/(dashboard)/cards/[cardId]/invoice/page.tsx

@@ -134,6 +134,8 @@ export default async function Page({ params, searchParams }: PageProps) {
 		accountName,
 		limitInUse: 0,
 		limitAvailable: limitAmount,
+		currentInvoiceAmount: 0,
+		currentInvoiceLabel: "",
 	};
 
 	const { totalAmount, invoiceStatus, paymentDate } = invoiceData;

src/app/(dashboard)/cards/layout.tsx

@@ -16,8 +16,7 @@ export default function RootLayout({
 				icon={<RiBankCard2Line />}
 				title="Cartões"
 				subtitle="Acompanhe todas os cartões do mês selecionado incluindo faturas, limites
-        e transações previstas. Use o seletor abaixo para navegar pelos meses e
-        visualizar as movimentações correspondentes."
+        e transações previstas."
 			/>
 			{children}
 		</section>

src/app/(dashboard)/dashboard/page.tsx

@@ -27,6 +27,10 @@ export default async function Page({ searchParams }: PageProps) {
 	const { dashboardData, preferences, quickActionOptions } =
 		await fetchDashboardPageData(user.id, selectedPeriod);
 	const { dashboardWidgets } = preferences;
+	const adminPayerSlug =
+		quickActionOptions.payerOptions.find(
+			(option) => option.value === quickActionOptions.defaultPayerId,
+		)?.slug ?? null;
 
 	const logoMappings = await prefetchLogoMappings(
 		user.id,
@@ -37,7 +41,11 @@ export default async function Page({ searchParams }: PageProps) {
 		<main className="flex flex-col gap-4">
 			<DashboardWelcome name={user.name} />
 			<MonthNavigation />
-			<DashboardMetricsCards metrics={dashboardData.metrics} />
+			<DashboardMetricsCards
+				metrics={dashboardData.metrics}
+				period={selectedPeriod}
+				adminPayerSlug={adminPayerSlug}
+			/>
 			<LogoPrefetchProvider mappings={logoMappings}>
 				<DashboardGridEditable
 					data={dashboardData}

src/app/(dashboard)/insights/loading.tsx

@@ -1,39 +1,125 @@
+import { Card, CardContent } from "@/shared/components/ui/card";
 import { Skeleton } from "@/shared/components/ui/skeleton";
 
-/**
- * Loading state para a página de insights com IA
- */
+const providers = [
+	"openai",
+	"anthropic",
+	"google",
+	"minimax",
+	"openrouter",
+	"ollama",
+];
+
+const summaryRows = ["period", "data-source"];
+
 export default function InsightsLoading() {
 	return (
 		<main className="flex flex-col gap-6">
-			<div className="space-y-6 pt-4">
-				{/* Header */}
-				<div className="space-y-2">
-					<Skeleton className="h-10 w-64 rounded-md bg-foreground/10" />
-					<Skeleton className="h-6 w-96 rounded-md bg-foreground/10" />
+			<Card className="flex w-full flex-row items-center justify-between gap-2 px-3 py-3 sm:px-4">
+				<div className="flex items-center gap-2">
+					<Skeleton className="size-8 bg-foreground/10" />
+					<Skeleton className="h-8 w-40 bg-foreground/10" />
+					<Skeleton className="size-8 bg-foreground/10" />
 				</div>
+			</Card>
 
-				{/* Grid de insights */}
-				<div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
-					{Array.from({ length: 4 }).map((_, i) => (
-						<div key={i} className="rounded-md border p-6 space-y-4">
-							<div className="flex items-start justify-between">
-								<div className="space-y-2 flex-1">
-									<Skeleton className="h-6 w-48 rounded-md bg-foreground/10" />
-									<Skeleton className="h-4 w-full rounded-md bg-foreground/10" />
-									<Skeleton className="h-4 w-3/4 rounded-md bg-foreground/10" />
+			<section className="space-y-4">
+				<div className="grid items-stretch gap-4 xl:grid-cols-[minmax(0,1fr)_340px]">
+					<div className="space-y-4">
+						<Card className="border-border/70 bg-card/95 shadow-sm">
+							<CardContent className="space-y-6">
+								<div className="space-y-2">
+									<Skeleton className="h-8 w-64 bg-foreground/10" />
+									<Skeleton className="h-4 w-full max-w-2xl bg-foreground/10" />
+									<Skeleton className="h-4 w-3/4 max-w-xl bg-foreground/10" />
+								</div>
+
+								<div className="space-y-3">
+									<div className="space-y-2">
+										<Skeleton className="h-4 w-28 bg-foreground/10" />
+										<Skeleton className="h-3 w-80 max-w-full bg-foreground/10" />
+									</div>
+
+									<div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
+										{providers.map((provider) => (
+											<div
+												className="flex min-h-24 items-start gap-3 rounded-2xl border p-4"
+												key={provider}
+											>
+												<Skeleton className="mt-1 size-4 shrink-0 rounded-full bg-foreground/10" />
+												<Skeleton className="size-8 shrink-0 rounded-full bg-foreground/10" />
+												<div className="flex-1 space-y-2">
+													<Skeleton className="h-4 w-20 bg-foreground/10" />
+													<Skeleton className="h-3 w-full bg-foreground/10" />
+													<Skeleton className="h-3 w-3/4 bg-foreground/10" />
+												</div>
+											</div>
+										))}
+									</div>
+								</div>
+							</CardContent>
+						</Card>
+
+						<Card className="border-border/70 bg-card/95 shadow-sm">
+							<CardContent className="space-y-6">
+								<div className="space-y-3">
+									<div className="space-y-2">
+										<Skeleton className="h-4 w-32 bg-foreground/10" />
+										<Skeleton className="h-3 w-72 max-w-full bg-foreground/10" />
+									</div>
+									<Skeleton className="h-9 w-full max-w-72 bg-foreground/10" />
+								</div>
+
+								<div className="flex items-center justify-between gap-3">
+									<Skeleton className="h-9 w-24 bg-foreground/10" />
+									<Skeleton className="h-9 w-32 bg-foreground/10" />
+								</div>
+							</CardContent>
+						</Card>
+					</div>
+
+					<Card className="border-border/70 bg-card/95 shadow-sm">
+						<CardContent className="flex flex-col gap-4">
+							<div className="flex items-center gap-3">
+								<Skeleton className="size-9 rounded-xl bg-foreground/10" />
+								<div className="space-y-2">
+									<Skeleton className="h-4 w-32 bg-foreground/10" />
+									<Skeleton className="h-3 w-24 bg-foreground/10" />
 								</div>
-								<Skeleton className="size-8 rounded-full bg-foreground/10" />
 							</div>
-							<div className="space-y-2">
-								<Skeleton className="h-3 w-full rounded-md bg-foreground/10" />
-								<Skeleton className="h-3 w-full rounded-md bg-foreground/10" />
-								<Skeleton className="h-3 w-2/3 rounded-md bg-foreground/10" />
+
+							<Skeleton className="h-9 w-full bg-foreground/10" />
+							<Skeleton className="h-8 w-full bg-foreground/10" />
+
+							<div className="space-y-4">
+								{summaryRows.map((row) => (
+									<div className="flex gap-3" key={row}>
+										<Skeleton className="size-4 shrink-0 bg-foreground/10" />
+										<div className="flex-1 space-y-2">
+											<Skeleton className="h-3 w-24 bg-foreground/10" />
+											<Skeleton className="h-3 w-full bg-foreground/10" />
+										</div>
+									</div>
+								))}
 							</div>
-						</div>
-					))}
+
+							<div className="space-y-3">
+								<Skeleton className="h-3 w-32 bg-foreground/10" />
+								<div className="flex items-center gap-3">
+									<Skeleton className="size-8 rounded-full bg-foreground/10" />
+									<div className="flex-1 space-y-2">
+										<Skeleton className="h-4 w-20 bg-foreground/10" />
+										<Skeleton className="h-3 w-32 bg-foreground/10" />
+									</div>
+								</div>
+							</div>
+
+							<Skeleton className="h-20 w-full rounded-2xl bg-foreground/10" />
+							<Skeleton className="h-20 w-full rounded-2xl bg-foreground/10" />
+						</CardContent>
+					</Card>
 				</div>
-			</div>
+			</section>
 		</main>
 	);
 }

src/app/(dashboard)/layout.tsx

@@ -1,10 +1,12 @@
 import { connection } from "next/server";
 import { fetchDashboardNavbarData } from "@/features/dashboard/lib/navbar-queries";
 import { AppNavbar } from "@/shared/components/navigation/navbar/app-navbar";
+import { AppPreferencesProvider } from "@/shared/components/providers/app-preferences-provider";
 import { LogoDevProvider } from "@/shared/components/providers/logo-dev-provider";
 import { PrivacyProvider } from "@/shared/components/providers/privacy-provider";
 import { getUserSession } from "@/shared/lib/auth/server";
 import { isLogoDevEnabled } from "@/shared/lib/logo/server";
+import { fetchAppPreferences } from "@/shared/lib/preferences/queries";
 
 export default async function DashboardLayout({
 	children,
@@ -13,26 +15,32 @@ export default async function DashboardLayout({
 }>) {
 	await connection();
 	const session = await getUserSession();
-	const navbarData = await fetchDashboardNavbarData(session.user.id);
+	const [navbarData, appPreferences] = await Promise.all([
+		fetchDashboardNavbarData(session.user.id),
+		fetchAppPreferences(session.user.id),
+	]);
 	const logoDevEnabled = isLogoDevEnabled();
 
 	return (
 		<LogoDevProvider enabled={logoDevEnabled}>
-			<PrivacyProvider>
-				<AppNavbar
-					user={{ ...session.user, image: session.user.image ?? null }}
-					payerAvatarUrl={navbarData.payerAvatarUrl}
-					inboxPendingCount={navbarData.inboxPendingCount}
-					notificationsSnapshot={navbarData.notificationsSnapshot}
-				/>
-				<div className="relative flex flex-1 flex-col pt-16">
-					<div className="@container/main flex flex-1 flex-col gap-2">
-						<div className="flex flex-col gap-4 py-5 md:gap-6 w-full max-w-8xl mx-auto px-4 ">
-							{children}
+			<AppPreferencesProvider {...appPreferences}>
+				<PrivacyProvider>
+					<AppNavbar
+						user={{ ...session.user, image: session.user.image ?? null }}
+						payerAvatarUrl={navbarData.payerAvatarUrl}
+						inboxPendingCount={navbarData.inboxPendingCount}
+						notificationsSnapshot={navbarData.notificationsSnapshot}
+						financeLinks={navbarData.financeLinks}
+					/>
+					<div className="relative flex flex-1 flex-col pt-16">
+						<div className="@container/main flex flex-1 flex-col gap-2">
+							<div className="flex flex-col gap-4 py-5 md:gap-6 w-full max-w-8xl mx-auto px-4 ">
+								{children}
+							</div>
 						</div>
 					</div>
-				</div>
-			</PrivacyProvider>
+				</PrivacyProvider>
+			</AppPreferencesProvider>
 		</LogoDevProvider>
 	);
 }

src/app/(dashboard)/payers/[payerId]/page.tsx

@@ -85,6 +85,10 @@ const EMPTY_FILTERS: TransactionSearchFilters = {
 	settledFilter: null,
 	attachmentFilter: null,
 	dividedFilter: null,
+	amountMinFilter: null,
+	amountMaxFilter: null,
+	dateStartFilter: null,
+	dateEndFilter: null,
 };
 
 const createEmptySlugMaps = (): SlugMaps => ({

src/app/(dashboard)/reports/installment-analysis/loading.tsx

@@ -0,0 +1,61 @@
+import { Card, CardContent, CardHeader } from "@/shared/components/ui/card";
+import { Skeleton } from "@/shared/components/ui/skeleton";
+
+const installmentCards = ["first", "second", "third"];
+
+export default function Loading() {
+	return (
+		<main className="flex flex-col gap-4 pb-8">
+			<Card className="border-none bg-primary/10 shadow-none">
+				<CardContent className="flex flex-col items-start justify-center gap-2 py-2">
+					<Skeleton className="h-4 w-64 bg-foreground/10" />
+					<Skeleton className="h-9 w-36 bg-foreground/10" />
+					<Skeleton className="h-4 w-32 bg-foreground/10" />
+				</CardContent>
+			</Card>
+
+			<Skeleton className="h-8 w-36 bg-foreground/10" />
+
+			<div className="grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-3">
+				{installmentCards.map((card) => (
+					<Card key={card} className="overflow-hidden">
+						<CardHeader className="pb-0">
+							<div className="flex items-start gap-2">
+								<Skeleton className="mt-1 size-4 shrink-0 bg-foreground/10" />
+								<Skeleton className="size-10 shrink-0 rounded-full bg-foreground/10" />
+								<div className="flex-1 space-y-2">
+									<Skeleton className="h-5 w-32 bg-foreground/10" />
+									<Skeleton className="h-4 w-24 bg-foreground/10" />
+								</div>
+								<Skeleton className="h-5 w-16 rounded-full bg-foreground/10" />
+							</div>
+						</CardHeader>
+
+						<CardContent>
+							<div className="mb-4 grid grid-cols-2 gap-4 rounded-lg bg-primary/5 p-4">
+								<div className="space-y-2">
+									<Skeleton className="h-3 w-24 bg-foreground/10" />
+									<Skeleton className="h-6 w-20 bg-foreground/10" />
+								</div>
+								<div className="flex flex-col items-end gap-2">
+									<Skeleton className="h-3 w-16 bg-foreground/10" />
+									<Skeleton className="h-6 w-20 bg-foreground/10" />
+								</div>
+							</div>
+
+							<div className="mb-4 space-y-2">
+								<div className="flex items-center justify-between">
+									<Skeleton className="h-3 w-40 bg-foreground/10" />
+									<Skeleton className="h-3 w-16 bg-foreground/10" />
+								</div>
+								<Skeleton className="h-2.5 w-full bg-foreground/10" />
+							</div>
+
+							<Skeleton className="h-8 w-full bg-foreground/10" />
+						</CardContent>
+					</Card>
+				))}
+			</div>
+		</main>
+	);
+}

src/app/(dashboard)/reports/installment-analysis/page.tsx

@@ -1,16 +1,24 @@
 import { connection } from "next/server";
 import { InstallmentAnalysisPage } from "@/features/dashboard/components/installment-analysis/installment-analysis-page";
 import { fetchInstallmentAnalysis } from "@/features/dashboard/expenses/installment-analysis-queries";
+import { LogoPrefetchProvider } from "@/shared/components/entity-avatar";
 import { getUser } from "@/shared/lib/auth/server";
+import { prefetchLogoMappings } from "@/shared/lib/logo/prefetch-server";
 
 export default async function Page() {
 	await connection();
 	const user = await getUser();
 	const data = await fetchInstallmentAnalysis(user.id);
+	const logoMappings = await prefetchLogoMappings(
+		user.id,
+		data.installmentGroups.map((group) => group.name),
+	);
 
 	return (
 		<main className="flex flex-col gap-4 pb-8">
-			<InstallmentAnalysisPage data={data} />
+			<LogoPrefetchProvider mappings={logoMappings}>
+				<InstallmentAnalysisPage data={data} />
+			</LogoPrefetchProvider>
 		</main>
 	);
 }

src/app/(dashboard)/settings/page.tsx

@@ -82,6 +82,9 @@ export default async function Page() {
 									userPreferences?.transactionsColumnOrder ?? null
 								}
 								attachmentMaxSizeMb={userPreferences?.attachmentMaxSizeMb ?? 50}
+								showTransactionSummary={
+									userPreferences?.showTransactionSummary ?? true
+								}
 							/>
 						</div>
 					</Card>

src/app/(dashboard)/transactions/layout.tsx

@@ -16,8 +16,7 @@ export default function RootLayout({
 				icon={<RiArrowLeftRightLine />}
 				title="Lançamentos"
 				subtitle="Acompanhe todos os lançamentos financeiros do mês selecionado incluindo
-        receitas, despesas e transações previstas. Use o seletor abaixo para
-        navegar pelos meses e visualizar as movimentações correspondentes."
+        receitas, despesas e transações previstas."
 			/>
 			{children}
 		</section>

src/app/(landing-page)/page.tsx

@@ -30,6 +30,7 @@ import { Badge } from "@/shared/components/ui/badge";
 import { Button } from "@/shared/components/ui/button";
 import { Card, CardContent } from "@/shared/components/ui/card";
 import { getOptionalUserSession } from "@/shared/lib/auth/server";
+import { isSignupDisabled } from "@/shared/lib/auth/signup";
 
 export default async function Page() {
 	const [session, headersList, githubStats] = await Promise.all([
@@ -43,6 +44,7 @@ export default async function Page() {
 		"",
 	).replace(/:\d+$/, "");
 	const isPublicDomain = !!(publicDomain && hostname === publicDomain);
+	const signupDisabled = isSignupDisabled();
 	const metricsItems = getMetricsItems(githubStats.stars, githubStats.forks);
 
 	return (
@@ -86,20 +88,23 @@ export default async function Page() {
 										Entrar
 									</Button>
 								</Link>
-								<Link href="/signup">
-									<Button
-										variant="ghost"
-										size="sm"
-										className="h-9 text-primary-foreground/75 hover:bg-primary-foreground/10 hover:text-primary-foreground shadow-none dark:text-white/75 dark:hover:bg-white/10 dark:hover:text-white"
-									>
-										Começar
-									</Button>
-								</Link>
+								{!signupDisabled && (
+									<Link href="/signup">
+										<Button
+											variant="ghost"
+											size="sm"
+											className="h-9 text-primary-foreground/75 hover:bg-primary-foreground/10 hover:text-primary-foreground shadow-none dark:text-white/75 dark:hover:bg-white/10 dark:hover:text-white"
+										>
+											Começar
+										</Button>
+									</Link>
+								)}
 							</div>
 						))}
 					<MobileNav
 						isPublicDomain={isPublicDomain}
 						isLoggedIn={!!session?.user}
+						signupDisabled={signupDisabled}
 					/>
 				</nav>
 			</NavbarShell>

src/app/api/inbox/batch/route.ts

@@ -86,7 +86,7 @@ export async function POST(request: Request) {
 		const body = await request.json();
 		const { items } = inboxBatchSchema.parse(body);
 
-		// Processar todos os itens em paralelo
+		// lançar todos os itens em paralelo
 		const settled = await Promise.allSettled(
 			items.map((item) =>
 				db
@@ -119,7 +119,7 @@ export async function POST(request: Request) {
 			return {
 				clientId: item?.clientId,
 				success: false,
-				error: "Erro ao processar notificação",
+				error: "Erro ao lançar notificação",
 			};
 		});
 
@@ -160,7 +160,7 @@ export async function POST(request: Request) {
 
 		console.error("[API] Error creating batch inbox items:", error);
 		return NextResponse.json(
-			{ error: "Erro ao processar notificações" },
+			{ error: "Erro ao lançar notificações" },
 			{ status: 500 },
 		);
 	}

src/app/api/inbox/route.ts

@@ -127,7 +127,7 @@ export async function POST(request: Request) {
 
 		console.error("[API] Error creating inbox item:", error);
 		return NextResponse.json(
-			{ error: "Erro ao processar notificação" },
+			{ error: "Erro ao lançar notificação" },
 			{ status: 500 },
 		);
 	}

src/app/globals.css

@@ -28,7 +28,7 @@
   --accent: oklch(94.8% 0.009 65);
   --accent-foreground: var(--foreground);
 
-  --success: oklch(61.685% 0.13077 162.978);
+  --success: oklch(63.924% 0.1657 151.561);
   --success-foreground: oklch(98% 0.01 150);
   --warning: oklch(78.357% 0.15147 68.301);
   --warning-foreground: oklch(20% 0.04 85);
@@ -41,9 +41,9 @@
   --input: var(--border);
   --ring: var(--primary);
 
-  --chart-1: var(--color-emerald-500);
-  --chart-2: var(--color-red-500);
-  --chart-3: var(--color-amber-500);
+  --chart-1: var(--color-orange-600);
+  --chart-2: var(--color-orange-400);
+  --chart-3: var(--color-orange-200);
   --chart-4: var(--color-blue-500);
   --chart-5: var(--color-pink-500);
   --chart-6: var(--color-stone-500);
@@ -90,7 +90,7 @@
 
 .dark {
   --background: oklch(18% 0.004 55);
-  --foreground: oklch(93% 0.008 80);
+  --foreground: #feefe1;
   --card: oklch(21.531% 0.00369 48.293);
   --card-foreground: var(--foreground);
   --popover: oklch(24% 0.004 55);
@@ -117,13 +117,13 @@
   --destructive: oklch(62% 0.2 28);
   --destructive-foreground: oklch(98% 0.005 30);
 
-  --border: oklch(24.957% 0.00355 48.274);
+  --border: oklch(24.576% 0.0072 67.399);
   --input: var(--border);
   --ring: var(--primary);
 
-  --chart-1: var(--color-emerald-500);
-  --chart-2: var(--color-orange-500);
-  --chart-3: var(--color-indigo-500);
+  --chart-1: var(--color-orange-600);
+  --chart-2: var(--color-orange-400);
+  --chart-3: var(--color-orange-200);
   --chart-4: var(--color-amber-500);
   --chart-5: var(--color-pink-500);
   --chart-6: var(--color-stone-500);
@@ -170,7 +170,7 @@
 }
 
 @theme inline {
-  --default-font-family: var(--font-inter);
+  --default-font-family: var(--font-bricolage);
   --color-background: var(--background);
   --color-foreground: var(--foreground);
   --color-card: var(--card);

src/app/layout.tsx

@@ -4,7 +4,7 @@ import { QueryProvider } from "@/shared/components/providers/query-provider";
 import { ThemeProvider } from "@/shared/components/providers/theme-provider";
 import { Toaster } from "@/shared/components/ui/sonner";
 import "./globals.css";
-import { inter } from "@/public/fonts/font_index";
+import { bricolage } from "@/public/fonts/font_index";
 
 export const metadata: Metadata = {
 	title: {
@@ -24,7 +24,7 @@ export default function RootLayout({
 		<html
 			data-scroll-behavior="smooth"
 			lang="pt-BR"
-			className={`${inter.variable}`}
+			className={`${bricolage.className}`}
 			suppressHydrationWarning
 		>
 			<head>

src/db/schema.ts

@@ -154,6 +154,9 @@ export const userPreferences = pgTable("preferencias_usuario", {
 		string[] | null
 	>(),
 	attachmentMaxSizeMb: integer("attachment_max_size_mb").notNull().default(50),
+	showTransactionSummary: boolean("mostrar_resumo_lancamento")
+		.notNull()
+		.default(true),
 	dashboardWidgets: jsonb("dashboard_widgets").$type<{
 		order: string[];
 		hidden: string[];
@@ -495,7 +498,7 @@ export const inboxItems = pgTable(
 			withTimezone: true,
 		}).notNull(),
 
-		// Dados parseados (editáveis pelo usuário antes de processar)
+		// Dados parseados (editáveis pelo usuário antes de lançar)
 		parsedName: text("parsed_name"), // Nome do estabelecimento
 		parsedAmount: numeric("parsed_amount", { precision: 12, scale: 2 }),
 

src/features/accounts/actions.ts

@@ -32,9 +32,20 @@ import {
 	formatCurrency,
 	formatDecimalForDbRequired,
 } from "@/shared/utils/currency";
-import { getBusinessTodayDate, getTodayInfo } from "@/shared/utils/date";
+import {
+	getBusinessTodayDate,
+	getTodayInfo,
+	parseLocalDateString,
+} from "@/shared/utils/date";
+import { derivePeriodFromDate } from "@/shared/utils/period";
 import { normalizeFilePath } from "@/shared/utils/string";
 
+const ACCOUNT_YIELD_CATEGORY_NAME = "Rendimentos";
+const ACCOUNT_YIELD_CATEGORY_ICON = "RiFundsLine";
+const ACCOUNT_YIELD_TRANSACTION_NAME = "Rendimento";
+const ACCOUNT_YIELD_CONDITION = INITIAL_BALANCE_CONDITION;
+const ACCOUNT_YIELD_PAYMENT_METHOD = "Transferência bancária" as const;
+
 const accountBaseSchema = z.object({
 	name: z
 		.string({ message: "Informe o nome da conta." })
@@ -408,6 +419,107 @@ const adjustAccountBalanceSchema = z.object({
 
 type AdjustAccountBalanceInput = z.infer<typeof adjustAccountBalanceSchema>;
 
+const addAccountYieldSchema = z.object({
+	accountId: uuidSchema("FinancialAccount"),
+	amount: z
+		.number({ message: "Valor inválido." })
+		.positive("Informe um valor maior que zero."),
+	date: z
+		.string({ message: "Data inválida." })
+		.trim()
+		.regex(/^\d{4}-\d{2}-\d{2}$/u, "Data inválida."),
+});
+
+type AddAccountYieldInput = z.infer<typeof addAccountYieldSchema>;
+
+export async function addAccountYieldAction(
+	input: AddAccountYieldInput,
+): Promise<ActionResult> {
+	try {
+		const user = await getUser();
+		const data = addAccountYieldSchema.parse(input);
+		const adminPayerId = await getAdminPayerId(user.id);
+
+		if (!adminPayerId) {
+			throw new Error(
+				"Pessoa com papel administrador não encontrada. Crie uma pessoa admin antes de adicionar rendimentos.",
+			);
+		}
+
+		const purchaseDate = parseLocalDateString(data.date);
+		if (Number.isNaN(purchaseDate.getTime())) {
+			throw new Error("Data inválida.");
+		}
+
+		await db.transaction(async (tx: typeof db) => {
+			const account = await tx.query.financialAccounts.findFirst({
+				columns: { id: true },
+				where: and(
+					eq(financialAccounts.id, data.accountId),
+					eq(financialAccounts.userId, user.id),
+				),
+			});
+
+			if (!account) {
+				throw new Error("Conta não encontrada.");
+			}
+
+			const existingCategory = await tx.query.categories.findFirst({
+				columns: { id: true },
+				where: and(
+					eq(categories.userId, user.id),
+					eq(categories.type, "receita"),
+					eq(categories.name, ACCOUNT_YIELD_CATEGORY_NAME),
+				),
+			});
+
+			const category =
+				existingCategory ??
+				(
+					await tx
+						.insert(categories)
+						.values({
+							name: ACCOUNT_YIELD_CATEGORY_NAME,
+							type: "receita",
+							icon: ACCOUNT_YIELD_CATEGORY_ICON,
+							userId: user.id,
+						})
+						.returning({ id: categories.id })
+				)[0];
+
+			if (!category) {
+				throw new Error(
+					"Não foi possível preparar a categoria de rendimentos.",
+				);
+			}
+
+			await tx.insert(transactions).values({
+				condition: ACCOUNT_YIELD_CONDITION,
+				name: ACCOUNT_YIELD_TRANSACTION_NAME,
+				paymentMethod: ACCOUNT_YIELD_PAYMENT_METHOD,
+				note: null,
+				amount: formatDecimalForDbRequired(data.amount),
+				purchaseDate,
+				transactionType: "Receita" as const,
+				period: derivePeriodFromDate(data.date),
+				isSettled: true,
+				userId: user.id,
+				accountId: data.accountId,
+				cardId: null,
+				categoryId: category.id,
+				payerId: adminPayerId,
+			});
+		});
+
+		revalidateForEntity("accounts", user.id);
+		revalidateForEntity("transactions", user.id);
+
+		return { success: true, message: "Rendimento adicionado com sucesso." };
+	} catch (error) {
+		return handleActionError(error);
+	}
+}
+
 export async function adjustAccountBalanceAction(
 	input: AdjustAccountBalanceInput,
 ): Promise<ActionResult> {

src/features/accounts/components/account-dialog.tsx

@@ -23,7 +23,7 @@ import {
 } from "@/shared/components/ui/dialog";
 import { useControlledState } from "@/shared/hooks/use-controlled-state";
 import { useFormState } from "@/shared/hooks/use-form-state";
-import { deriveNameFromLogo, normalizeLogo } from "@/shared/lib/logo";
+import { getLogoDisplayName, normalizeLogo } from "@/shared/lib/logo";
 import {
 	formatInitialBalanceInput,
 	normalizeDecimalInput,
@@ -66,7 +66,7 @@ const buildInitialValues = ({
 }): AccountFormValues => {
 	const fallbackLogo = logoOptions[0] ?? "";
 	const selectedLogo = normalizeLogo(account?.logo) || fallbackLogo;
-	const derivedName = deriveNameFromLogo(selectedLogo);
+	const derivedName = getLogoDisplayName(selectedLogo);
 
 	return {
 		name: account?.name ?? derivedName,

src/features/accounts/components/account-statement-card.tsx

@@ -82,7 +82,7 @@ export function AccountStatementCard({
 					</div>
 
 					{/* Linha 2 — saldo final (hero) */}
-					<div className="space-y-4">
+					<div className="space-y-3">
 						<p className="text-sm text-muted-foreground ">
 							Saldo ao final do período
 						</p>

src/features/accounts/components/add-yield-dialog.tsx

@@ -0,0 +1,155 @@
+"use client";
+
+import { RiCalculatorLine, RiFundsLine } from "@remixicon/react";
+import { useRouter } from "next/navigation";
+import { useEffect, useState, useTransition } from "react";
+import { toast } from "sonner";
+import { addAccountYieldAction } from "@/features/accounts/actions";
+import { CalculatorDialogButton } from "@/shared/components/calculator/calculator-dialog";
+import { Button } from "@/shared/components/ui/button";
+import { CurrencyInput } from "@/shared/components/ui/currency-input";
+import { DatePicker } from "@/shared/components/ui/date-picker";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/shared/components/ui/dialog";
+import { Label } from "@/shared/components/ui/label";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipTrigger,
+} from "@/shared/components/ui/tooltip";
+
+type AddYieldDialogProps = {
+	accountId: string;
+	defaultDate: string;
+};
+
+export function AddYieldDialog({
+	accountId,
+	defaultDate,
+}: AddYieldDialogProps) {
+	const router = useRouter();
+	const [open, setOpen] = useState(false);
+	const [isPending, startTransition] = useTransition();
+	const [amount, setAmount] = useState("");
+	const [date, setDate] = useState(defaultDate);
+
+	useEffect(() => {
+		if (open) {
+			setAmount("");
+			setDate(defaultDate);
+		}
+	}, [open, defaultDate]);
+
+	const handleSave = () => {
+		const numericAmount = Number(amount);
+
+		if (!Number.isFinite(numericAmount) || numericAmount <= 0) {
+			toast.error("Informe um valor maior que zero.");
+			return;
+		}
+
+		if (!date) {
+			toast.error("Informe a data do rendimento.");
+			return;
+		}
+
+		startTransition(async () => {
+			const result = await addAccountYieldAction({
+				accountId,
+				amount: numericAmount,
+				date,
+			});
+
+			if (result.success) {
+				toast.success(result.message);
+				setOpen(false);
+				router.refresh();
+				return;
+			}
+
+			toast.error(result.error);
+		});
+	};
+
+	return (
+		<Dialog open={open} onOpenChange={setOpen}>
+			<Tooltip>
+				<TooltipTrigger asChild>
+					<DialogTrigger asChild>
+						<Button
+							type="button"
+							variant="ghost"
+							size="icon-sm"
+							className="text-primary hover:text-primary"
+							aria-label="Adicionar rendimento"
+						>
+							<RiFundsLine className="size-4" />
+						</Button>
+					</DialogTrigger>
+				</TooltipTrigger>
+				<TooltipContent>Adicionar rendimento</TooltipContent>
+			</Tooltip>
+			<DialogContent className="sm:max-w-md">
+				<DialogHeader>
+					<DialogTitle>Adicionar rendimento</DialogTitle>
+					<DialogDescription>
+						Registre um rendimento como receita paga nesta conta.
+					</DialogDescription>
+				</DialogHeader>
+				<div className="space-y-4">
+					<div className="space-y-2">
+						<Label htmlFor="yield-amount">Valor</Label>
+						<div className="relative">
+							<CurrencyInput
+								id="yield-amount"
+								value={amount}
+								onValueChange={setAmount}
+								autoFocus
+								className="pr-10"
+								placeholder="R$ 0,00"
+							/>
+							<CalculatorDialogButton
+								variant="ghost"
+								size="icon-sm"
+								className="absolute right-1 top-1/2 h-7 w-7 -translate-y-1/2"
+								onSelectValue={setAmount}
+							>
+								<RiCalculatorLine className="h-4 w-4 text-muted-foreground" />
+							</CalculatorDialogButton>
+						</div>
+					</div>
+					<div className="space-y-2">
+						<Label htmlFor="yield-date">Data</Label>
+						<DatePicker
+							id="yield-date"
+							value={date}
+							onChange={setDate}
+							placeholder="Data"
+							required
+						/>
+					</div>
+				</div>
+				<DialogFooter>
+					<Button
+						type="button"
+						variant="outline"
+						onClick={() => setOpen(false)}
+						disabled={isPending}
+					>
+						Cancelar
+					</Button>
+					<Button type="button" onClick={handleSave} disabled={isPending}>
+						{isPending ? "Salvando..." : "Adicionar"}
+					</Button>
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
+	);
+}

src/features/accounts/components/adjust-balance-dialog.tsx

@@ -17,6 +17,11 @@ import {
 	DialogTrigger,
 } from "@/shared/components/ui/dialog";
 import { Label } from "@/shared/components/ui/label";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipTrigger,
+} from "@/shared/components/ui/tooltip";
 import { formatCurrency } from "@/shared/utils/currency";
 
 type AdjustBalanceDialogProps = {
@@ -79,17 +84,22 @@ export function AdjustBalanceDialog({
 
 	return (
 		<Dialog open={open} onOpenChange={setOpen}>
-			<DialogTrigger asChild>
-				<Button
-					type="button"
-					variant="ghost"
-					size="icon-sm"
-					className="text-muted-foreground hover:text-foreground"
-					aria-label="Ajustar saldo"
-				>
-					<RiEqualizerLine className="size-4" />
-				</Button>
-			</DialogTrigger>
+			<Tooltip>
+				<TooltipTrigger asChild>
+					<DialogTrigger asChild>
+						<Button
+							type="button"
+							variant="ghost"
+							size="icon-sm"
+							className="text-primary hover:text-primary"
+							aria-label="Ajustar saldo"
+						>
+							<RiEqualizerLine className="size-4" />
+						</Button>
+					</DialogTrigger>
+				</TooltipTrigger>
+				<TooltipContent>Ajustar saldo</TooltipContent>
+			</Tooltip>
 			<DialogContent className="sm:max-w-md">
 				<DialogHeader>
 					<DialogTitle>Ajustar saldo</DialogTitle>

src/features/auth/components/login-form.tsx

@@ -4,6 +4,7 @@ import { useRouter } from "next/navigation";
 import { type FormEvent, useEffect, useState } from "react";
 import { toast } from "sonner";
 import { Button } from "@/shared/components/ui/button";
+import { Checkbox } from "@/shared/components/ui/checkbox";
 import {
 	Field,
 	FieldDescription,
@@ -21,15 +22,24 @@ import { GoogleAuthButton } from "./google-auth-button";
 
 type DivProps = React.ComponentProps<"div">;
 
+interface LoginFormProps extends DivProps {
+	signupDisabled?: boolean;
+}
+
 const authLinkClassName =
 	"font-medium text-foreground/88 underline decoration-border underline-offset-4 transition-colors hover:text-foreground hover:decoration-foreground/30 focus-visible:rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40";
 
-export function LoginForm({ className, ...props }: DivProps) {
+export function LoginForm({
+	className,
+	signupDisabled = false,
+	...props
+}: LoginFormProps) {
 	const router = useRouter();
 	const isGoogleAvailable = googleSignInAvailable;
 
 	const [email, setEmail] = useState("");
 	const [password, setPassword] = useState("");
+	const [rememberMe, setRememberMe] = useState(false);
 
 	const [error, setError] = useState("");
 	const [loadingEmail, setLoadingEmail] = useState(false);
@@ -52,7 +62,7 @@ export function LoginForm({ className, ...props }: DivProps) {
 				email,
 				password,
 				callbackURL: "/dashboard",
-				rememberMe: false,
+				rememberMe,
 			},
 			{
 				onRequest: () => {
@@ -178,6 +188,24 @@ export function LoginForm({ className, ...props }: DivProps) {
 							/>
 						</Field>
 
+						<div className="flex items-start gap-3">
+							<Checkbox
+								id="remember-me"
+								checked={rememberMe}
+								onCheckedChange={(checked) => setRememberMe(checked === true)}
+								disabled={loadingEmail || loadingGoogle || loadingPasskey}
+								className="mt-0.5"
+							/>
+							<div className="grid gap-1">
+								<FieldLabel
+									htmlFor="remember-me"
+									className="cursor-pointer font-medium"
+								>
+									Manter conectado neste dispositivo
+								</FieldLabel>
+							</div>
+						</div>
+
 						<Field>
 							<Button
 								type="submit"
@@ -233,12 +261,14 @@ export function LoginForm({ className, ...props }: DivProps) {
 							</div>
 						</Field>
 
-						<FieldDescription className="pt-1 text-center">
-							Não tem uma conta?{" "}
-							<a href="/signup" className={authLinkClassName}>
-								Inscreva-se
-							</a>
-						</FieldDescription>
+						{!signupDisabled && (
+							<FieldDescription className="pt-1 text-center">
+								Não tem uma conta?{" "}
+								<a href="/signup" className={authLinkClassName}>
+									Inscreva-se
+								</a>
+							</FieldDescription>
+						)}
 
 						<FieldDescription className="text-center text-sm text-muted-foreground">
 							<a href="/" className={authLinkClassName}>

src/features/budgets/actions.ts

@@ -3,6 +3,10 @@
 import { and, eq } from "drizzle-orm";
 import { z } from "zod";
 import { budgets, categories } from "@/db/schema";
+import {
+	type CategoryBudgetSummary,
+	fetchCategoryBudgetSummary,
+} from "@/features/budgets/queries";
 import {
 	handleActionError,
 	revalidateForEntity,
@@ -204,6 +208,34 @@ export async function deleteBudgetAction(
 	}
 }
 
+const getCategoryBudgetSummarySchema = z.object({
+	categoryId: uuidSchema("Category"),
+	period: periodSchema,
+});
+
+type GetCategoryBudgetSummaryInput = z.input<
+	typeof getCategoryBudgetSummarySchema
+>;
+
+export async function getCategoryBudgetSummaryAction(
+	input: GetCategoryBudgetSummaryInput,
+): Promise<ActionResult<CategoryBudgetSummary | null>> {
+	try {
+		const user = await getUser();
+		const data = getCategoryBudgetSummarySchema.parse(input);
+		const summary = await fetchCategoryBudgetSummary(
+			user.id,
+			data.categoryId,
+			data.period,
+		);
+		return { success: true, message: "ok", data: summary };
+	} catch (error) {
+		return handleActionError(
+			error,
+		) as ActionResult<CategoryBudgetSummary | null>;
+	}
+}
+
 const duplicatePreviousMonthSchema = z.object({
 	period: periodSchema,
 });

src/features/budgets/queries.ts

@@ -1,6 +1,12 @@
 import { and, asc, eq, inArray, isNull, or, sql, sum } from "drizzle-orm";
-import { budgets, categories, transactions } from "@/db/schema";
+import {
+	budgets,
+	categories,
+	financialAccounts,
+	transactions,
+} from "@/db/schema";
 import { ACCOUNT_AUTO_INVOICE_NOTE_PREFIX } from "@/shared/lib/accounts/constants";
+import { excludeTransactionsFromExcludedAccounts } from "@/shared/lib/accounts/query-filters";
 import { db } from "@/shared/lib/db";
 import { getAdminPayerId } from "@/shared/lib/payers/get-admin-id";
 
@@ -75,6 +81,10 @@ export async function fetchBudgetsForUser(
 				totalAmount: sum(transactions.amount).as("totalAmount"),
 			})
 			.from(transactions)
+			.leftJoin(
+				financialAccounts,
+				eq(transactions.accountId, financialAccounts.id),
+			)
 			.where(
 				and(
 					eq(transactions.userId, userId),
@@ -86,6 +96,7 @@ export async function fetchBudgetsForUser(
 						isNull(transactions.note),
 						sql`${transactions.note} NOT LIKE ${`${ACCOUNT_AUTO_INVOICE_NOTE_PREFIX}%`}`,
 					),
+					excludeTransactionsFromExcludedAccounts(),
 				),
 			)
 			.groupBy(transactions.categoryId);
@@ -127,3 +138,57 @@ export async function fetchBudgetsForUser(
 
 	return { budgets: budgetList, categoriesOptions };
 }
+
+export type CategoryBudgetSummary = {
+	amount: number;
+	spent: number;
+};
+
+export async function fetchCategoryBudgetSummary(
+	userId: string,
+	categoryId: string,
+	period: string,
+): Promise<CategoryBudgetSummary | null> {
+	const [adminPayerId, budget] = await Promise.all([
+		getAdminPayerId(userId),
+		db.query.budgets.findFirst({
+			columns: { amount: true },
+			where: and(
+				eq(budgets.userId, userId),
+				eq(budgets.categoryId, categoryId),
+				eq(budgets.period, period),
+			),
+		}),
+	]);
+
+	if (!adminPayerId || !budget) return null;
+
+	const totals = await db
+		.select({
+			totalAmount: sum(transactions.amount).as("totalAmount"),
+		})
+		.from(transactions)
+		.leftJoin(
+			financialAccounts,
+			eq(transactions.accountId, financialAccounts.id),
+		)
+		.where(
+			and(
+				eq(transactions.userId, userId),
+				eq(transactions.period, period),
+				eq(transactions.transactionType, "Despesa"),
+				eq(transactions.payerId, adminPayerId),
+				eq(transactions.categoryId, categoryId),
+				or(
+					isNull(transactions.note),
+					sql`${transactions.note} NOT LIKE ${`${ACCOUNT_AUTO_INVOICE_NOTE_PREFIX}%`}`,
+				),
+				excludeTransactionsFromExcludedAccounts(),
+			),
+		);
+
+	return {
+		amount: toNumber(budget.amount),
+		spent: Math.abs(toNumber(totals[0]?.totalAmount ?? 0)),
+	};
+}

src/features/calendar/components/event-modal.tsx

@@ -81,6 +81,8 @@ const renderLancamento = (
 
 const renderBoleto = (event: Extract<CalendarEvent, { type: "boleto" }>) => {
 	const isPaid = Boolean(event.transaction.isSettled);
+	const isIncome = event.transaction.transactionType === "Receita";
+	const settlementLabel = isIncome ? "Recebido" : "Pago";
 	const dueDateLabel = formatFinancialDateLabel(
 		event.transaction.dueDate,
 		"Vence em",
@@ -89,7 +91,7 @@ const renderBoleto = (event: Extract<CalendarEvent, { type: "boleto" }>) => {
 	const paymentDateLabel = isPaid
 		? formatFinancialDateLabel(
 				event.transaction.boletoPaymentDate,
-				"Pago em",
+				`${settlementLabel} em`,
 				DATE_FORMAT,
 			)
 		: null;
@@ -109,7 +111,9 @@ const renderBoleto = (event: Extract<CalendarEvent, { type: "boleto" }>) => {
 							<span className="text-success">{paymentDateLabel}</span>
 						)}
 					</div>
-					<Badge variant="outline">{isPaid ? "Pago" : "Pendente"}</Badge>
+					<Badge variant="outline">
+						{isPaid ? settlementLabel : "Pendente"}
+					</Badge>
 				</div>
 				<MoneyValues
 					className="font-medium whitespace-nowrap"

src/features/cards/components/card-dialog.tsx

@@ -24,7 +24,7 @@ import {
 	DEFAULT_CARD_BRANDS,
 	DEFAULT_CARD_STATUS,
 } from "@/shared/lib/cards/constants";
-import { deriveNameFromLogo, normalizeLogo } from "@/shared/lib/logo";
+import { getLogoDisplayName, normalizeLogo } from "@/shared/lib/logo";
 import {
 	formatLimitInput,
 	normalizeDecimalInput,
@@ -59,7 +59,7 @@ const buildInitialValues = ({
 }): CardFormValues => {
 	const fallbackLogo = logoOptions[0] ?? "";
 	const selectedLogo = normalizeLogo(card?.logo) || fallbackLogo;
-	const derivedName = deriveNameFromLogo(selectedLogo);
+	const derivedName = getLogoDisplayName(selectedLogo);
 
 	return {
 		name: card?.name ?? derivedName,

src/features/cards/components/card-item.tsx

@@ -1,6 +1,8 @@
 "use client";
 
 import {
+	RiCalendarCloseLine,
+	RiCalendarScheduleLine,
 	RiChat3Line,
 	RiDeleteBin5Line,
 	RiFileList2Line,
@@ -33,6 +35,8 @@ interface CardItemProps {
 	limit: number;
 	limitInUse?: number;
 	limitAvailable?: number;
+	currentInvoiceAmount: number;
+	currentInvoiceLabel: string;
 	accountName: string;
 	logo?: string | null;
 	note?: string | null;
@@ -52,6 +56,8 @@ export function CardItem({
 	limit,
 	limitInUse,
 	limitAvailable,
+	currentInvoiceAmount,
+	currentInvoiceLabel,
 	accountName: _accountName,
 	logo,
 	note,
@@ -77,7 +83,7 @@ export function CardItem({
 
 	return (
 		<Card className="flex flex-col p-6 w-full">
-			<CardHeader className="space-y-2 p-0">
+			<CardHeader className="space-y-1 p-0">
 				<div className="flex items-start justify-between gap-2">
 					<div className="flex flex-1 items-center gap-2">
 						{logoPath ? (
@@ -146,15 +152,17 @@ export function CardItem({
 					)}
 				</div>
 
-				<div className="flex items-center justify-between border-y py-3 text-sm text-muted-foreground">
-					<span>
-						Fecha em{" "}
+				<div className="flex items-center justify-between text-sm text-muted-foreground rounded-lg py-4 px-2 bg-primary/5">
+					<span className="inline-flex items-center gap-1">
+						<RiCalendarCloseLine className="size-4" aria-hidden />
+						Fecha{" "}
 						<span className="font-semibold text-foreground">
 							dia {formatDay(closingDay)}
 						</span>
 					</span>
-					<span>
-						Vence em{" "}
+					<span className="inline-flex items-center gap-1">
+						<RiCalendarScheduleLine className="size-4" aria-hidden />
+						Vence{" "}
 						<span className="font-semibold text-foreground">
 							dia {formatDay(dueDay)}
 						</span>
@@ -165,29 +173,40 @@ export function CardItem({
 			<CardContent className="flex flex-1 flex-col gap-4 px-0">
 				<div className="flex flex-col gap-0.5">
 					<span className="text-xs text-muted-foreground">
-						Limite disponível
+						{currentInvoiceLabel}
 					</span>
 					<MoneyValues
-						amount={available}
-						className="text-xl font-semibold text-success"
+						amount={currentInvoiceAmount}
+						className="text-xl font-semibold text-info"
 					/>
 				</div>
 
-				<div className="grid grid-cols-2 gap-2">
-					<div className="flex flex-col gap-0.5">
+				<div className="flex gap-2 justify-between w-full">
+					<div className="flex min-w-0 flex-col gap-0.5">
 						<span className="text-xs text-muted-foreground">Limite total</span>
 						<MoneyValues
 							amount={limit}
 							className="text-sm font-semibold text-foreground"
 						/>
 					</div>
-					<div className="flex flex-col gap-0.5">
+
+					<div className="flex min-w-0 flex-col gap-0.5">
 						<span className="text-xs text-muted-foreground">
 							Limite utilizado
 						</span>
 						<MoneyValues
 							amount={used}
-							className="text-sm font-semibold text-destructive"
+							className="text-sm font-semibold text-primary"
+						/>
+					</div>
+
+					<div className="flex min-w-0 flex-col gap-0.5">
+						<span className="text-xs text-muted-foreground">
+							Limite disponível
+						</span>
+						<MoneyValues
+							amount={available}
+							className="text-sm font-semibold text-success"
 						/>
 					</div>
 				</div>
@@ -200,7 +219,7 @@ export function CardItem({
 						aria-label={`${usagePercent.toFixed(0)}% do limite utilizado`}
 					/>
 					<span className="text-xs text-muted-foreground">
-						{usagePercent.toFixed(1)}% utilizado
+						{usagePercent.toFixed(0)}% utilizado
 					</span>
 				</div>
 			</CardContent>
@@ -220,7 +239,7 @@ export function CardItem({
 					className="flex items-center gap-1 font-medium text-primary transition-opacity hover:opacity-80"
 				>
 					<RiFileList2Line className="size-4" aria-hidden />
-					ver fatura
+					fatura
 				</button>
 				<button
 					type="button"

src/features/cards/components/cards-page.tsx

@@ -130,7 +130,7 @@ export function CardsPage({
 		}
 
 		return (
-			<div className="grid gap-4 grid-cols-1 sm:grid-cols-2 xl:grid-cols-3">
+			<div className="grid gap-4 grid-cols-1 sm:grid-cols-1 xl:grid-cols-3">
 				{list.map((card) => (
 					<CardItem
 						key={card.id}
@@ -142,6 +142,8 @@ export function CardsPage({
 						limit={card.limit}
 						limitInUse={card.limitInUse ?? null}
 						limitAvailable={card.limitAvailable ?? card.limit ?? null}
+						currentInvoiceAmount={card.currentInvoiceAmount}
+						currentInvoiceLabel={card.currentInvoiceLabel}
 						accountName={card.accountName}
 						logo={card.logo}
 						note={card.note}

src/features/cards/components/types.ts

@@ -12,6 +12,8 @@ export type Card = {
 	accountName: string;
 	limitInUse: number;
 	limitAvailable: number;
+	currentInvoiceAmount: number;
+	currentInvoiceLabel: string;
 };
 
 export type CardFormValues = {

src/features/cards/queries.ts

@@ -1,7 +1,23 @@
-import { and, eq, ilike, isNull, ne, not, or, sql } from "drizzle-orm";
-import { cards, financialAccounts, transactions } from "@/db/schema";
+import {
+	and,
+	eq,
+	ilike,
+	isNotNull,
+	isNull,
+	ne,
+	not,
+	or,
+	sql,
+} from "drizzle-orm";
+import { cards, financialAccounts, invoices, transactions } from "@/db/schema";
 import { db } from "@/shared/lib/db";
+import { INVOICE_PAYMENT_STATUS } from "@/shared/lib/invoices";
 import { loadLogoOptions } from "@/shared/lib/logo/options";
+import {
+	formatPeriodMonthShort,
+	getCurrentPeriod,
+	parsePeriod,
+} from "@/shared/utils/period";
 
 type CardData = {
 	id: string;
@@ -15,6 +31,8 @@ type CardData = {
 	limit: number;
 	limitInUse: number;
 	limitAvailable: number;
+	currentInvoiceAmount: number;
+	currentInvoiceLabel: string;
 	accountId: string;
 	accountName: string;
 };
@@ -25,6 +43,11 @@ type AccountSimple = {
 	logo: string | null;
 };
 
+function formatCurrentInvoiceLabel(period: string) {
+	const { year } = parsePeriod(period);
+	return `Fatura ${formatPeriodMonthShort(period)}. ${year}`;
+}
+
 async function fetchCardsByStatus(
 	userId: string,
 	archived: boolean,
@@ -33,59 +56,94 @@ async function fetchCardsByStatus(
 	accounts: AccountSimple[];
 	logoOptions: string[];
 }> {
-	const [cardRows, accountRows, logoOptions, usageRows] = await Promise.all([
-		db.query.cards.findMany({
-			orderBy: (table, { desc }) => [desc(table.name)],
-			where: and(
-				eq(cards.userId, userId),
-				archived
-					? ilike(cards.status, "inativo")
-					: not(ilike(cards.status, "inativo")),
-			),
-			with: {
-				financialAccount: {
-					columns: {
-						id: true,
-						name: true,
+	const currentPeriod = getCurrentPeriod();
+	const currentInvoiceLabel = formatCurrentInvoiceLabel(currentPeriod);
+	const [cardRows, accountRows, logoOptions, usageRows, invoiceRows] =
+		await Promise.all([
+			db.query.cards.findMany({
+				orderBy: (table, { desc }) => [desc(table.name)],
+				where: and(
+					eq(cards.userId, userId),
+					archived
+						? ilike(cards.status, "inativo")
+						: not(ilike(cards.status, "inativo")),
+				),
+				with: {
+					financialAccount: {
+						columns: {
+							id: true,
+							name: true,
+						},
 					},
 				},
-			},
-		}),
-		db.query.financialAccounts.findMany({
-			orderBy: (table, { desc }) => [desc(table.name)],
-			where: eq(financialAccounts.userId, userId),
-			columns: {
-				id: true,
-				name: true,
-				logo: true,
-			},
-		}),
-		loadLogoOptions(),
-		db
-			.select({
-				cardId: transactions.cardId,
-				total: sql<number>`coalesce(sum(${transactions.amount}), 0)`,
-			})
-			.from(transactions)
-			.where(
-				and(
-					eq(transactions.userId, userId),
-					or(isNull(transactions.isSettled), eq(transactions.isSettled, false)),
-					// Recorrente no cartão: só consome limite quando a data da ocorrência já passou
-					or(
-						ne(transactions.condition, "Recorrente"),
-						sql`${transactions.purchaseDate} <= current_date`,
+			}),
+			db.query.financialAccounts.findMany({
+				orderBy: (table, { desc }) => [desc(table.name)],
+				where: eq(financialAccounts.userId, userId),
+				columns: {
+					id: true,
+					name: true,
+					logo: true,
+				},
+			}),
+			loadLogoOptions(),
+			db
+				.select({
+					cardId: transactions.cardId,
+					total: sql<number>`coalesce(sum(${transactions.amount}), 0)`,
+				})
+				.from(transactions)
+				.leftJoin(
+					invoices,
+					and(
+						eq(invoices.userId, transactions.userId),
+						eq(invoices.cardId, transactions.cardId),
+						eq(invoices.period, transactions.period),
 					),
-				),
-			)
-			.groupBy(transactions.cardId),
-	]);
+				)
+				.where(
+					and(
+						eq(transactions.userId, userId),
+						isNotNull(transactions.cardId),
+						or(
+							isNull(invoices.paymentStatus),
+							ne(invoices.paymentStatus, INVOICE_PAYMENT_STATUS.PAID),
+						),
+						// Recorrente no cartão: só consome limite quando a data da ocorrência já passou
+						or(
+							ne(transactions.condition, "Recorrente"),
+							sql`${transactions.purchaseDate} <= current_date`,
+						),
+					),
+				)
+				.groupBy(transactions.cardId),
+			db
+				.select({
+					cardId: transactions.cardId,
+					total: sql<number>`coalesce(sum(${transactions.amount}), 0)`,
+				})
+				.from(transactions)
+				.where(
+					and(
+						eq(transactions.userId, userId),
+						eq(transactions.period, currentPeriod),
+					),
+				)
+				.groupBy(transactions.cardId),
+		]);
 
 	const usageMap = new Map<string, number>();
 	usageRows.forEach((row: { cardId: string | null; total: number | null }) => {
 		if (!row.cardId) return;
 		usageMap.set(row.cardId, Number(row.total ?? 0));
 	});
+	const invoiceMap = new Map<string, number>();
+	invoiceRows.forEach(
+		(row: { cardId: string | null; total: number | null }) => {
+			if (!row.cardId) return;
+			invoiceMap.set(row.cardId, Math.abs(Number(row.total ?? 0)));
+		},
+	);
 
 	const cardList = cardRows.map((card) => ({
 		id: card.id,
@@ -99,13 +157,15 @@ async function fetchCardsByStatus(
 		limit: Number(card.limit),
 		limitInUse: (() => {
 			const total = usageMap.get(card.id) ?? 0;
-			return total < 0 ? Math.abs(total) : 0;
+			return Math.abs(total);
 		})(),
 		limitAvailable: (() => {
 			const total = usageMap.get(card.id) ?? 0;
-			const inUse = total < 0 ? Math.abs(total) : 0;
+			const inUse = Math.abs(total);
 			return Math.max(Number(card.limit) - inUse, 0);
 		})(),
+		currentInvoiceAmount: invoiceMap.get(card.id) ?? 0,
+		currentInvoiceLabel,
 		accountId: card.accountId,
 		accountName:
 			(card.financialAccount as { name?: string } | null)?.name ??

src/features/categories/components/category-detail-header.tsx

@@ -5,6 +5,7 @@ import { Card } from "@/shared/components/ui/card";
 import type { CategoryType } from "@/shared/lib/categories/constants";
 import { currencyFormatter } from "@/shared/utils/currency";
 import { formatPercentage } from "@/shared/utils/percentage";
+import { cn } from "@/shared/utils/ui";
 
 type CategorySummary = {
 	id: string;
@@ -32,19 +33,40 @@ export function CategoryDetailHeader({
 	percentageChange,
 	transactionCount,
 }: CategoryDetailHeaderProps) {
+	const absoluteChange = currentTotal - previousTotal;
 	const variationLabel =
 		typeof percentageChange === "number"
 			? formatPercentage(percentageChange, {
 					minimumFractionDigits: 1,
 					maximumFractionDigits: 1,
 					absolute: true,
-					signDisplay: percentageChange === 0 ? "auto" : "always",
 				})
 			: "—";
+	const hasComparison = typeof percentageChange === "number";
+	const isFlat = absoluteChange === 0;
+	const changeDirection =
+		absoluteChange > 0 ? "increase" : absoluteChange < 0 ? "decrease" : "flat";
+	const comparisonTone =
+		isFlat || !hasComparison
+			? "neutral"
+			: category.type === "receita"
+				? changeDirection === "increase"
+					? "positive"
+					: "negative"
+				: changeDirection === "decrease"
+					? "positive"
+					: "negative";
+	const statusLabel = !hasComparison
+		? "Sem comparação"
+		: isFlat
+			? "Estável"
+			: changeDirection === "increase"
+				? "Aumento"
+				: "Queda";
 
 	return (
-		<Card className="px-4">
-			<div className="flex flex-col gap-6 lg:flex-row lg:items-center lg:justify-between">
+		<Card className="px-5 py-5">
+			<div className="flex flex-col gap-5">
 				<div className="flex items-start gap-3">
 					<CategoryIconBadge
 						icon={category.icon}
@@ -59,41 +81,59 @@ export function CategoryDetailHeader({
 							<TransactionTypeBadge kind={category.type} />
 							<span>
 								{transactionCount}{" "}
-								{transactionCount === 1 ? "lançamento" : "lançamentos"} no{" "}
-								período
+								{transactionCount === 1 ? "lançamento" : "lançamentos"} em{" "}
+								{currentPeriodLabel}
 							</span>
 						</div>
 					</div>
 				</div>
 
-				<div className="grid w-full gap-4 sm:grid-cols-2 lg:w-auto lg:grid-cols-3">
-					<div>
+				<div className="grid gap-3 md:grid-cols-3">
+					<div className="rounded-lg border p-3">
 						<p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
 							Total em {currentPeriodLabel}
 						</p>
-						<p className="mt-1 text-2xl font-semibold">
+						<p className="mt-1 text-3xl font-semibold tracking-tight">
 							{currencyFormatter.format(currentTotal)}
 						</p>
 					</div>
-					<div>
+
+					<div className="rounded-lg border p-3">
 						<p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
 							Total em {previousPeriodLabel}
 						</p>
-						<p className="mt-1 text-lg font-semibold text-muted-foreground">
+						<p className="mt-1 text-2xl font-semibold tracking-tight text-muted-foreground">
 							{currencyFormatter.format(previousTotal)}
 						</p>
 					</div>
-					<div>
+
+					<div className="rounded-lg border p-3">
 						<p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
-							Variação vs mês anterior
+							Variação
 						</p>
-						<PercentageChangeIndicator
-							value={percentageChange}
-							label={variationLabel}
-							positiveTrend={category.type === "receita" ? "up" : "down"}
-							className="mt-1 gap-1 text-lg font-semibold"
-							iconClassName="size-4"
-						/>
+						<div className="mt-2 flex flex-wrap items-center gap-2">
+							<span
+								className={cn(
+									"inline-flex h-6 items-center rounded-sm border px-2 text-xs font-medium",
+									comparisonTone === "positive" &&
+										"border-success/30 bg-success/5 text-success",
+									comparisonTone === "negative" &&
+										"border-destructive/30 bg-destructive/5 text-destructive",
+									comparisonTone === "neutral" &&
+										"border-muted-foreground/30 bg-muted/30 text-muted-foreground",
+								)}
+							>
+								{statusLabel}
+							</span>
+							<PercentageChangeIndicator
+								value={percentageChange}
+								label={variationLabel}
+								positiveTrend={category.type === "receita" ? "up" : "down"}
+								className="gap-1 text-lg font-semibold"
+								iconClassName="size-4"
+								showFlatIcon
+							/>
+						</div>
 					</div>
 				</div>
 			</div>

src/features/dashboard/bills/bills-helpers.ts

@@ -1,18 +1,28 @@
 import type { DashboardBill } from "@/features/dashboard/bills/bills-queries";
 import type { PaymentDialogState } from "@/features/dashboard/payments/use-payment-dialog-controller";
-import { getBusinessDateString, isDateOnlyPast } from "@/shared/utils/date";
+import {
+	getBusinessDateString,
+	isDateOnlyPast,
+	parseUtcDateString,
+	toDateOnlyString,
+} from "@/shared/utils/date";
 import {
 	buildFinancialStatusLabel,
 	buildRelativeFinancialStatusLabel,
 	formatFinancialDateLabel,
+	formatRelativeFinancialDateLabel,
 } from "@/shared/utils/financial-dates";
 
 export type BillDialogState = PaymentDialogState;
 type BillStatusDateItem = Pick<
 	DashboardBill,
-	"dueDate" | "boletoPaymentDate" | "isSettled"
+	"dueDate" | "boletoPaymentDate" | "isSettled" | "transactionType"
 >;
 
+export const isIncomeBill = (bill: Pick<DashboardBill, "transactionType">) => {
+	return bill.transactionType === "Receita";
+};
+
 export const formatBillDateLabel = (value: string | null, prefix?: string) => {
 	return formatFinancialDateLabel(value, prefix);
 };
@@ -22,10 +32,15 @@ export const buildBillStatusLabel = (bill: BillStatusDateItem) => {
 		isSettled: bill.isSettled,
 		dueDate: bill.dueDate,
 		paidAt: bill.boletoPaymentDate,
+		paidPrefix: isIncomeBill(bill) ? "Recebido em" : "Pago em",
 	});
 };
 
 export const buildBillWidgetStatusLabel = (bill: BillStatusDateItem) => {
+	if (bill.isSettled && isIncomeBill(bill)) {
+		return formatRelativeFinancialDateLabel(bill.boletoPaymentDate, "received");
+	}
+
 	return buildRelativeFinancialStatusLabel({
 		isSettled: bill.isSettled,
 		dueDate: bill.dueDate,
@@ -43,6 +58,34 @@ export const isBillOverdue = (bill: DashboardBill) => {
 	return isDateOnlyPast(bill.dueDate);
 };
 
+export const formatBillWidgetOverdueLabel = (
+	bill: Pick<DashboardBill, "dueDate" | "isSettled" | "transactionType">,
+): string | null => {
+	if (bill.isSettled) {
+		return null;
+	}
+
+	const dueDateValue = toDateOnlyString(bill.dueDate);
+	const todayValue = getBusinessDateString();
+	if (!dueDateValue || dueDateValue >= todayValue) {
+		return null;
+	}
+
+	const dueDate = parseUtcDateString(dueDateValue);
+	const today = parseUtcDateString(todayValue);
+	if (!dueDate || !today) {
+		return null;
+	}
+
+	const overdueDays = Math.round(
+		(today.getTime() - dueDate.getTime()) / (24 * 60 * 60 * 1000),
+	);
+	const overdueLabel = isIncomeBill(bill) ? "Atrasada" : "Atrasado";
+	return overdueDays === 1
+		? `${overdueLabel} · venceu ontem`
+		: `${overdueLabel} · venceu há ${overdueDays} dias`;
+};
+
 export const getBillStatusBadgeVariant = (
 	statusLabel: string,
 ): "success" | "info" => {

src/features/dashboard/bills/bills-queries.ts

@@ -6,6 +6,7 @@ export type DashboardBill = {
 	boletoPaymentDate: string | null;
 	isSettled: boolean;
 	accountId: string | null;
+	transactionType: string;
 };
 
 export type BillPaymentAccountOption = {

src/features/dashboard/components/bills/bill-list-item.tsx

@@ -1,9 +1,11 @@
-import { RiCheckboxCircleFill, RiExternalLinkLine } from "@remixicon/react";
+import { RiCheckboxCircleFill } from "@remixicon/react";
 import Link from "next/link";
 import {
 	buildBillStatusLabel,
 	buildBillWidgetStatusLabel,
+	formatBillWidgetOverdueLabel,
 	isBillOverdue,
+	isIncomeBill,
 } from "@/features/dashboard/bills/bills-helpers";
 import type { DashboardBill } from "@/features/dashboard/bills/bills-queries";
 import { EstablishmentLogo } from "@/shared/components/entity-avatar";
@@ -36,8 +38,10 @@ export function BillListItem({ bill, period, onPay }: BillListItemProps) {
 	const statusLabel = buildBillWidgetStatusLabel(bill);
 	const absoluteStatusLabel = buildBillStatusLabel(bill);
 	const overdue = isBillOverdue(bill);
+	const income = isIncomeBill(bill);
+	const overdueLabel = formatBillWidgetOverdueLabel(bill);
 	const statusTooltipLabel =
-		statusLabel && statusLabel !== absoluteStatusLabel
+		overdueLabel || (statusLabel && statusLabel !== absoluteStatusLabel)
 			? absoluteStatusLabel
 			: null;
 	const href = buildTransactionsHref(bill.name, period);
@@ -53,10 +57,6 @@ export function BillListItem({ bill, period, onPay }: BillListItemProps) {
 						className="inline-flex max-w-full items-center gap-1 text-sm font-medium text-foreground underline-offset-2 hover:text-primary hover:underline"
 					>
 						<span className="truncate">{bill.name}</span>
-						<RiExternalLinkLine
-							className="size-3 shrink-0 text-muted-foreground"
-							aria-hidden
-						/>
 					</Link>
 					<div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
 						{statusLabel ? (
@@ -67,9 +67,10 @@ export function BillListItem({ bill, period, onPay }: BillListItemProps) {
 											className={cn(
 												"cursor-help rounded-full py-0.5",
 												bill.isSettled && "text-success font-semibold",
+												overdue && "text-destructive font-semibold",
 											)}
 										>
-											{statusLabel}
+											{overdueLabel ?? statusLabel}
 										</span>
 									</TooltipTrigger>
 									<TooltipContent side="top">
@@ -81,9 +82,10 @@ export function BillListItem({ bill, period, onPay }: BillListItemProps) {
 									className={cn(
 										"rounded-full py-0.5",
 										bill.isSettled && "text-success font-semibold",
+										overdue && "text-destructive font-semibold",
 									)}
 								>
-									{statusLabel}
+									{overdueLabel ?? statusLabel}
 								</span>
 							)
 						) : null}
@@ -93,29 +95,35 @@ export function BillListItem({ bill, period, onPay }: BillListItemProps) {
 
 			<div className="flex shrink-0 flex-col items-end">
 				<MoneyValues className="font-medium" amount={bill.amount} />
-				<Button
-					type="button"
-					size="sm"
-					variant="link"
-					className="h-auto p-0 disabled:opacity-100"
-					disabled={bill.isSettled}
-					onClick={() => onPay(bill.id)}
-				>
-					{bill.isSettled ? (
-						<span className="flex items-center gap-0.5 text-success">
-							<RiCheckboxCircleFill className="size-3.5" /> Pago
-						</span>
-					) : overdue ? (
-						<span className="overdue-blink">
-							<span className="overdue-blink-primary text-destructive">
-								Atrasado
+				{bill.isSettled ? (
+					<span className="flex h-7 items-center gap-0.5 text-xs font-medium text-success">
+						<RiCheckboxCircleFill className="size-3.5" />{" "}
+						{income ? "Recebido" : "Pago"}
+					</span>
+				) : (
+					<Button
+						type="button"
+						size="sm"
+						variant="link"
+						className="-mr-1.5 h-7 px-1.5 py-0"
+						onClick={() => onPay(bill.id)}
+					>
+						{overdue ? (
+							<span className="overdue-blink">
+								<span className="overdue-blink-primary text-destructive">
+									{income ? "Atrasada" : "Atrasado"}
+								</span>
+								<span className="overdue-blink-secondary">
+									{income ? "Receber" : "Pagar"}
+								</span>
 							</span>
-							<span className="overdue-blink-secondary">Pagar</span>
-						</span>
-					) : (
-						"Pagar"
-					)}
-				</Button>
+						) : income ? (
+							"Receber"
+						) : (
+							"Pagar"
+						)}
+					</Button>
+				)}
 			</div>
 		</li>
 	);

src/features/dashboard/components/bills/bill-payment-dialog.tsx

@@ -7,6 +7,7 @@ import {
 	type BillDialogState,
 	formatBillDateLabel,
 	getBillStatusBadgeVariant,
+	isIncomeBill,
 } from "@/features/dashboard/bills/bills-helpers";
 import type {
 	BillPaymentAccountOption,
@@ -66,11 +67,13 @@ export function BillPaymentDialog({
 	onConfirm,
 }: BillPaymentDialogProps) {
 	const isProcessing = modalState === "processing" || isPending;
+	const income = bill ? isIncomeBill(bill) : false;
+	const settlementLabel = income ? "Recebido" : "Pago";
 	const dueLabel = bill
 		? formatBillDateLabel(bill.dueDate, "Vencimento:")
 		: null;
 	const paidLabel = bill
-		? formatBillDateLabel(bill.boletoPaymentDate, "Pago em:")
+		? formatBillDateLabel(bill.boletoPaymentDate, `${settlementLabel} em:`)
 		: null;
 	const isBillPending = bill ? !bill.isSettled : false;
 	const paymentDateValue = paymentDate.toISOString().split("T")[0] ?? "";
@@ -103,8 +106,8 @@ export function BillPaymentDialog({
 			>
 				{modalState === "success" ? (
 					<PaymentSuccess
-						title="Pagamento registrado!"
-						description="Atualizamos o status do boleto para pago. Em instantes ele aparecerá como baixado no histórico."
+						title={income ? "Recebimento registrado!" : "Pagamento registrado!"}
+						description={`Atualizamos o status do boleto para ${income ? "recebido" : "pago"}. Em instantes ele aparecerá como baixado no histórico.`}
 						onClose={onClose}
 					/>
 				) : (
@@ -112,10 +115,12 @@ export function BillPaymentDialog({
 						<DialogHeader>
 							<div className="mb-1 flex items-center gap-3">
 								<div>
-									<DialogTitle>Confirmar pagamento</DialogTitle>
+									<DialogTitle>
+										{income ? "Confirmar recebimento" : "Confirmar pagamento"}
+									</DialogTitle>
 									<DialogDescription className="mt-1 text-xs">
 										{isBillPending
-											? "Escolha a conta de origem e a data em que o boleto foi pago."
+											? `Escolha a conta de ${income ? "destino" : "origem"} e a data em que o boleto foi ${income ? "recebido" : "pago"}.`
 											: "Boleto"}
 									</DialogDescription>
 								</div>
@@ -158,12 +163,15 @@ export function BillPaymentDialog({
 										<div className="flex items-center gap-1.5 text-muted-foreground">
 											<RiCalendarLine className="size-3.5" />
 											<span className="text-xs font-medium uppercase">
-												{bill.isSettled ? "Pago em" : "Vencimento"}
+												{bill.isSettled
+													? `${settlementLabel} em`
+													: "Vencimento"}
 											</span>
 										</div>
 										<p className="font-semibold">
 											{bill.isSettled
-												? (paidLabel?.replace("Pago em: ", "") ?? "—")
+												? (paidLabel?.replace(`${settlementLabel} em: `, "") ??
+													"—")
 												: (dueLabel?.replace("Vencimento: ", "") ?? "—")}
 										</p>
 									</Card>
@@ -175,7 +183,7 @@ export function BillPaymentDialog({
 									<div className="space-y-3">
 										<div className="space-y-2">
 											<Label htmlFor="bill-widget-payment-account">
-												Conta de pagamento
+												Conta de {income ? "recebimento" : "pagamento"}
 											</Label>
 											<Select
 												value={paymentAccountId}
@@ -212,7 +220,7 @@ export function BillPaymentDialog({
 
 										<div className="space-y-2">
 											<Label htmlFor="bill-widget-payment-date">
-												Data do pagamento
+												Data do {income ? "recebimento" : "pagamento"}
 											</Label>
 											<DatePicker
 												id="bill-widget-payment-date"
@@ -231,8 +239,8 @@ export function BillPaymentDialog({
 										<span className="text-sm text-muted-foreground">
 											Status atual
 										</span>
-										<Badge variant={getBillStatusBadgeVariant("Pago")}>
-											Pago
+										<Badge variant={getBillStatusBadgeVariant(settlementLabel)}>
+											{settlementLabel}
 										</Badge>
 									</div>
 								)}

src/features/dashboard/components/bills/bills-list.tsx

@@ -15,7 +15,7 @@ export function BillsList({ bills, period, onPay }: BillsListProps) {
 			<WidgetEmptyState
 				icon={<RiBarcodeFill className="size-6 text-muted-foreground" />}
 				title="Nenhum boleto cadastrado para o período selecionado"
-				description="Cadastre boletos para monitorar os pagamentos aqui."
+				description="Cadastre boletos para monitorar os vencimentos aqui."
 			/>
 		);
 	}

src/features/dashboard/components/bills/bills-widget-view.tsx

@@ -41,9 +41,7 @@ export function BillsWidgetView({
 }: BillsWidgetViewProps) {
 	return (
 		<>
-			<div className="flex flex-col gap-4">
-				<BillsList bills={bills} period={period} onPay={onOpenPaymentDialog} />
-			</div>
+			<BillsList bills={bills} period={period} onPay={onOpenPaymentDialog} />
 
 			<BillPaymentDialog
 				bill={selectedBill}

src/features/dashboard/components/category-breakdown/category-breakdown-chart.tsx

@@ -96,7 +96,7 @@ export function CategoryBreakdownChart({
 	}, [categories, chartConfig]);
 
 	return (
-		<div className="flex items-center gap-4">
+		<div className="flex flex-col items-center gap-4 sm:flex-row">
 			<ChartContainer config={chartConfig} className="h-[280px] flex-1">
 				<PieChart>
 					<Pie
@@ -143,7 +143,7 @@ export function CategoryBreakdownChart({
 				</PieChart>
 			</ChartContainer>
 
-			<div className="min-w-[140px] flex flex-col gap-2">
+			<div className="grid w-full grid-cols-2 gap-2 sm:min-w-[140px] sm:w-auto sm:grid-cols-1">
 				{chartData.map((entry, index) => (
 					<div key={`legend-${index}`} className="flex items-center gap-2">
 						<div

src/features/dashboard/components/category-breakdown/category-breakdown-list-item.tsx

@@ -1,4 +1,3 @@
-import { RiExternalLinkLine, RiWallet3Line } from "@remixicon/react";
 import Link from "next/link";
 import type { DashboardCategoryBreakdownItem } from "@/features/dashboard/categories/category-breakdown-helpers";
 import { PercentageChangeIndicator } from "@/features/dashboard/components/percentage-change-indicator";
@@ -11,13 +10,14 @@ type CategoryBreakdownListItemConfig = {
 	shareLabel: string;
 	percentageDigits: number;
 	positiveTrend: "up" | "down";
-	includeBudgetAmount: boolean;
+	showBudget: boolean;
 };
 
 type CategoryBreakdownListItemProps = {
 	category: DashboardCategoryBreakdownItem;
 	periodParam: string;
 	config: CategoryBreakdownListItemConfig;
+	position: number;
 };
 
 const formatPercentage = (value: number, digits: number) =>
@@ -31,8 +31,9 @@ export function CategoryBreakdownListItem({
 	category,
 	periodParam,
 	config,
+	position,
 }: CategoryBreakdownListItemProps) {
-	const hasBudget = category.budgetAmount !== null;
+	const hasBudget = config.showBudget && category.budgetAmount !== null;
 	const budgetExceeded =
 		hasBudget &&
 		category.budgetUsedPercentage !== null &&
@@ -44,7 +45,10 @@ export function CategoryBreakdownListItem({
 
 	return (
 		<div>
-			<div className="flex items-center justify-between gap-3 transition-all duration-300 py-2">
+			<div className="flex items-center justify-between gap-2 transition-all duration-300 py-1.5">
+				<span className="w-3 shrink-0 text-left text-xs font-medium text-muted-foreground">
+					{position}
+				</span>
 				<div className="flex min-w-0 flex-1 items-center gap-2">
 					<CategoryIconBadge
 						icon={category.categoryIcon}
@@ -54,16 +58,12 @@ export function CategoryBreakdownListItem({
 						<div className="flex items-center gap-2">
 							<Link
 								href={`/categories/${category.categoryId}?periodo=${periodParam}`}
-								className="flex max-w-full items-center gap-1 text-sm font-medium text-foreground underline-offset-2 hover:underline"
+								className="flex max-w-full items-center gap-1 text-sm font-medium text-foreground underline-offset-2 hover:text-primary hover:underline"
 							>
 								<span className="truncate">{category.categoryName}</span>
-								<RiExternalLinkLine
-									className="size-3 shrink-0 text-muted-foreground"
-									aria-hidden
-								/>
 							</Link>
 						</div>
-						<div className="flex flex-wrap items-center gap-x-2 gap-y-0.5 text-xs text-muted-foreground">
+						<div className="flex flex-wrap items-center gap-x-1 text-xs text-muted-foreground">
 							<span>
 								{formatPercentage(
 									category.percentageOfTotal,
@@ -71,37 +71,29 @@ export function CategoryBreakdownListItem({
 								)}{" "}
 								da {config.shareLabel}
 							</span>
-							{hasBudget && category.budgetUsedPercentage !== null ? (
-								<>
-									<span aria-hidden>·</span>
-									<span
-										className={`flex items-center gap-1 ${budgetExceeded ? "text-destructive" : "text-info"}`}
-									>
-										<RiWallet3Line className="size-3 shrink-0" />
-										{budgetExceeded ? (
-											<>
-												excedeu{" "}
-												<span className="font-medium">
-													{formatCurrency(exceededAmount)}
-												</span>
-											</>
-										) : (
-											<>
-												{formatPercentage(
-													category.budgetUsedPercentage,
-													config.percentageDigits,
-												)}{" "}
-												do limite
-												{config.includeBudgetAmount &&
-												category.budgetAmount !== null
-													? ` ${formatCurrency(category.budgetAmount)}`
-													: ""}
-											</>
-										)}
-									</span>
-								</>
-							) : null}
 						</div>
+						{hasBudget && category.budgetUsedPercentage !== null ? (
+							<div
+								className={`mt-0.5 text-xs ${budgetExceeded ? "text-destructive" : "text-info"}`}
+							>
+								{budgetExceeded ? (
+									<>
+										Limite excedido em{" "}
+										<span className="font-medium">
+											{formatCurrency(exceededAmount)}
+										</span>
+									</>
+								) : (
+									<>
+										{formatPercentage(
+											category.budgetUsedPercentage,
+											config.percentageDigits,
+										)}{" "}
+										do limite utilizado
+									</>
+								)}
+							</div>
+						) : null}
 					</div>
 				</div>
 

src/features/dashboard/components/category-breakdown/category-breakdown-list.tsx

@@ -5,7 +5,7 @@ type CategoryBreakdownListConfig = {
 	shareLabel: string;
 	percentageDigits: number;
 	positiveTrend: "up" | "down";
-	includeBudgetAmount: boolean;
+	showBudget: boolean;
 };
 
 type CategoryBreakdownListProps = {
@@ -20,13 +20,14 @@ export function CategoryBreakdownList({
 	config,
 }: CategoryBreakdownListProps) {
 	return (
-		<div>
-			{categories.map((category) => (
+		<div className="flex flex-col">
+			{categories.map((category, index) => (
 				<CategoryBreakdownListItem
 					key={category.categoryId}
 					category={category}
 					periodParam={periodParam}
 					config={config}
+					position={index + 1}
 				/>
 			))}
 		</div>

src/features/dashboard/components/category-breakdown/category-breakdown-widget-view.tsx

@@ -34,7 +34,7 @@ const VARIANT_CONFIG = {
 		shareLabel: "receita total",
 		percentageDigits: 1,
 		positiveTrend: "up",
-		includeBudgetAmount: true,
+		showBudget: false,
 	},
 	expense: {
 		emptyTitle: "Nenhuma despesa encontrada",
@@ -43,7 +43,7 @@ const VARIANT_CONFIG = {
 		shareLabel: "despesa total",
 		percentageDigits: 0,
 		positiveTrend: "down",
-		includeBudgetAmount: false,
+		showBudget: true,
 	},
 } as const;
 

src/features/dashboard/components/dashboard-grid-editable.tsx

@@ -21,6 +21,7 @@ import {
 	RiCloseLine,
 	RiDragMove2Line,
 	RiEyeOffLine,
+	RiSettings4Line,
 	RiTodoLine,
 } from "@remixicon/react";
 import { useMemo, useState, useTransition } from "react";
@@ -41,6 +42,12 @@ import {
 import { NoteDialog } from "@/features/notes/components/note-dialog";
 import { TransactionDialog } from "@/features/transactions/components/dialogs/transaction-dialog/transaction-dialog";
 import { Button } from "@/shared/components/ui/button";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuTrigger,
+} from "@/shared/components/ui/dropdown-menu";
 import { ExpandableWidgetCard } from "@/shared/components/widgets/expandable-widget-card";
 
 type DashboardGridEditableProps = {
@@ -60,6 +67,9 @@ export function DashboardGridEditable({
 }: DashboardGridEditableProps) {
 	const [isEditing, setIsEditing] = useState(false);
 	const [isPending, startTransition] = useTransition();
+	const [isMobileIncomeOpen, setIsMobileIncomeOpen] = useState(false);
+	const [isMobileExpenseOpen, setIsMobileExpenseOpen] = useState(false);
+	const [isMobileNoteOpen, setIsMobileNoteOpen] = useState(false);
 
 	// Initialize widget order and hidden state
 	const [widgetOrder, setWidgetOrder] = useState<string[]>(
@@ -132,14 +142,6 @@ export function DashboardGridEditable({
 			: [...hiddenWidgets, widgetId];
 
 		setHiddenWidgets(newHidden);
-
-		// Salvar automaticamente ao toggle
-		startTransition(async () => {
-			await updateWidgetPreferences({
-				order: widgetOrder,
-				hidden: newHidden,
-			});
-		});
 	};
 
 	const handleHideWidget = (widgetId: string) => {
@@ -182,6 +184,8 @@ export function DashboardGridEditable({
 				setWidgetOrder(DEFAULT_WIDGET_ORDER);
 				setHiddenWidgets([]);
 				setMyAccountsShowExcluded(true);
+				setOriginalOrder(DEFAULT_WIDGET_ORDER);
+				setOriginalHidden([]);
 				toast.success("Preferências restauradas!");
 			} else {
 				toast.error(result.error ?? "Erro ao restaurar");
@@ -195,7 +199,68 @@ export function DashboardGridEditable({
 			<div className="flex flex-wrap items-center justify-between gap-2">
 				{!isEditing ? (
 					<div className="flex w-full min-w-0 flex-col gap-1 sm:w-auto sm:flex-row sm:items-center sm:gap-2">
-						<div className="-mb-1 grid w-full grid-cols-3 gap-1 pb-1 sm:mb-0 sm:flex sm:w-auto sm:items-center sm:gap-2 sm:overflow-visible sm:pb-0">
+						<div className="sm:hidden">
+							<DropdownMenu>
+								<DropdownMenuTrigger asChild>
+									<Button size="sm" variant="outline" className="w-full gap-2">
+										<RiAddFill className="size-4 text-primary" />
+										Adicionar
+									</Button>
+								</DropdownMenuTrigger>
+								<DropdownMenuContent align="start" className="w-48">
+									<DropdownMenuItem
+										onSelect={() => setIsMobileIncomeOpen(true)}
+									>
+										<RiAddFill className="text-success/80" />
+										Nova receita
+									</DropdownMenuItem>
+									<DropdownMenuItem
+										onSelect={() => setIsMobileExpenseOpen(true)}
+									>
+										<RiAddFill className="text-destructive/80" />
+										Nova despesa
+									</DropdownMenuItem>
+									<DropdownMenuItem onSelect={() => setIsMobileNoteOpen(true)}>
+										<RiTodoLine className="text-info/80" />
+										Nova anotação
+									</DropdownMenuItem>
+								</DropdownMenuContent>
+							</DropdownMenu>
+							<TransactionDialog
+								mode="create"
+								open={isMobileIncomeOpen}
+								onOpenChange={setIsMobileIncomeOpen}
+								payerOptions={quickActionOptions.payerOptions}
+								splitPayerOptions={quickActionOptions.splitPayerOptions}
+								defaultPayerId={quickActionOptions.defaultPayerId}
+								accountOptions={quickActionOptions.accountOptions}
+								cardOptions={quickActionOptions.cardOptions}
+								categoryOptions={quickActionOptions.categoryOptions}
+								estabelecimentos={quickActionOptions.estabelecimentos}
+								defaultPeriod={period}
+								defaultTransactionType="Receita"
+							/>
+							<TransactionDialog
+								mode="create"
+								open={isMobileExpenseOpen}
+								onOpenChange={setIsMobileExpenseOpen}
+								payerOptions={quickActionOptions.payerOptions}
+								splitPayerOptions={quickActionOptions.splitPayerOptions}
+								defaultPayerId={quickActionOptions.defaultPayerId}
+								accountOptions={quickActionOptions.accountOptions}
+								cardOptions={quickActionOptions.cardOptions}
+								categoryOptions={quickActionOptions.categoryOptions}
+								estabelecimentos={quickActionOptions.estabelecimentos}
+								defaultPeriod={period}
+								defaultTransactionType="Despesa"
+							/>
+							<NoteDialog
+								mode="create"
+								open={isMobileNoteOpen}
+								onOpenChange={setIsMobileNoteOpen}
+							/>
+						</div>
+						<div className="hidden items-center gap-2 sm:flex">
 							<TransactionDialog
 								mode="create"
 								payerOptions={quickActionOptions.payerOptions}
@@ -269,6 +334,12 @@ export function DashboardGridEditable({
 				<div className="flex w-full items-center justify-end gap-2 sm:w-auto">
 					{isEditing ? (
 						<>
+							<WidgetSettingsDialog
+								hiddenWidgets={hiddenWidgets}
+								onToggleWidget={handleToggleWidget}
+								onReset={handleReset}
+								triggerLabel="Visibilidade"
+							/>
 							<Button
 								variant="outline"
 								size="sm"
@@ -290,21 +361,15 @@ export function DashboardGridEditable({
 							</Button>
 						</>
 					) : (
-						<div className="grid w-full grid-cols-2 gap-2 sm:flex sm:w-auto">
-							<WidgetSettingsDialog
-								hiddenWidgets={hiddenWidgets}
-								onToggleWidget={handleToggleWidget}
-								onReset={handleReset}
-								triggerClassName="w-full sm:w-auto"
-							/>
+						<div className="w-full sm:w-auto">
 							<Button
 								variant="outline"
 								size="sm"
 								onClick={handleStartEditing}
 								className="w-full gap-2 sm:w-auto"
 							>
-								<RiDragMove2Line className="size-4" />
-								Reordenar
+								<RiSettings4Line className="size-4" />
+								Personalizar
 							</Button>
 						</div>
 					)}
@@ -330,7 +395,7 @@ export function DashboardGridEditable({
 							>
 								<div className="relative">
 									{isEditing && (
-										<div className="absolute inset-0 z-10 bg-background/50 backdrop-blur-xs rounded-lg border border-dashed border-primary flex items-center justify-center">
+										<div className="absolute inset-0 z-10 bg-background/60 backdrop-blur-[1.5px] rounded-lg border border-dashed border-primary flex items-center justify-center">
 											<div className="flex flex-col items-center gap-2">
 												<RiDragMove2Line className="size-8 text-primary" />
 												<span className="text-xs font-medium">

src/features/dashboard/components/dashboard-metrics-cards.tsx

@@ -1,13 +1,16 @@
 import {
 	RiArrowLeftRightLine,
 	RiArrowRightDownLine,
+	RiArrowRightLine,
 	RiArrowRightUpLine,
 	RiCalendar2Line,
 } from "@remixicon/react";
+import Link from "next/link";
 import { MetricsCardInfoButton } from "@/features/dashboard/components/metrics-card-info-button";
 import { PercentageChangeIndicator } from "@/features/dashboard/components/percentage-change-indicator";
 import type { DashboardCardMetrics } from "@/features/dashboard/overview/dashboard-metrics-queries";
 import MoneyValues from "@/shared/components/money-values";
+import { Badge } from "@/shared/components/ui/badge";
 import {
 	Card,
 	CardContent,
@@ -17,10 +20,13 @@ import {
 } from "@/shared/components/ui/card";
 import { Separator } from "@/shared/components/ui/separator";
 import { formatPercentage } from "@/shared/utils/percentage";
+import { formatPeriodForUrl } from "@/shared/utils/period";
 import { cn } from "@/shared/utils/ui";
 
 type DashboardMetricsCardsProps = {
 	metrics: DashboardCardMetrics;
+	period: string;
+	adminPayerSlug: string | null;
 };
 
 type Trend = "up" | "down" | "flat";
@@ -35,6 +41,7 @@ const CARDS = [
 		icon: RiArrowRightDownLine,
 		invertTrend: false,
 		iconClass: "text-success",
+		transactionType: "receita",
 		helpTitle: "Como calculamos receitas",
 		helpLines: [
 			"Somamos os lançamentos do tipo Receita no período selecionado.",
@@ -52,6 +59,7 @@ const CARDS = [
 		icon: RiArrowRightUpLine,
 		invertTrend: true,
 		iconClass: "text-destructive",
+		transactionType: "despesa",
 		helpTitle: "Como calculamos despesas",
 		helpLines: [
 			"Somamos os lançamentos do tipo Despesa no período selecionado.",
@@ -69,6 +77,7 @@ const CARDS = [
 		icon: RiArrowLeftRightLine,
 		invertTrend: false,
 		iconClass: "text-warning",
+		transactionType: null,
 		helpTitle: "Como calculamos o balanço",
 		helpLines: [
 			"Partimos de receitas menos despesas do período.",
@@ -85,6 +94,7 @@ const CARDS = [
 		icon: RiCalendar2Line,
 		invertTrend: false,
 		iconClass: "text-cyan-600",
+		transactionType: null,
 		helpTitle: "Como calculamos o previsto",
 		helpLines: [
 			"Acumulamos o balanço mês a mês até o período atual.",
@@ -102,26 +112,31 @@ const getTrend = (current: number, previous: number): Trend => {
 	return "flat";
 };
 
-const getPercentChange = (current: number, previous: number): string => {
+const getPercentChange = (current: number, previous: number): string | null => {
 	const EPSILON = 0.01;
 
 	if (Math.abs(previous) < EPSILON) {
 		if (Math.abs(current) < EPSILON) return "0%";
-		return "—";
+		return null;
 	}
 
 	const change = ((current - previous) / Math.abs(previous)) * 100;
-	if (!Number.isFinite(change)) return "—";
+	if (!Number.isFinite(change)) return null;
+	if (Math.abs(change) < TREND_THRESHOLD) return "0%";
 	if (change > 999) return "+999%";
 	if (change < -999) return "-999%";
 	return formatPercentage(change, {
-		maximumFractionDigits: 2,
-		minimumFractionDigits: 2,
+		maximumFractionDigits: 0,
+		minimumFractionDigits: 0,
 		signDisplay: "always",
 	});
 };
 
-export function DashboardMetricsCards({ metrics }: DashboardMetricsCardsProps) {
+export function DashboardMetricsCards({
+	metrics,
+	period,
+	adminPayerSlug,
+}: DashboardMetricsCardsProps) {
 	return (
 		<div className="grid grid-cols-1 gap-3 @xl/main:grid-cols-2 @5xl/main:grid-cols-4">
 			{CARDS.map(
@@ -132,6 +147,7 @@ export function DashboardMetricsCards({ metrics }: DashboardMetricsCardsProps) {
 					icon: Icon,
 					invertTrend,
 					iconClass,
+					transactionType,
 					helpTitle,
 					helpLines,
 				}) => {
@@ -141,47 +157,78 @@ export function DashboardMetricsCards({ metrics }: DashboardMetricsCardsProps) {
 						metric.current,
 						metric.previous,
 					);
+					const transactionsHref = transactionType
+						? `/transactions?periodo=${formatPeriodForUrl(period)}&type=${transactionType}${adminPayerSlug ? `&payer=${adminPayerSlug}` : ""}`
+						: null;
 
 					return (
-						<Card key={label} className="gap-2 overflow-hidden">
+						<Card key={label} className="gap-2 overflow-hidden py-6">
 							<CardHeader className="gap-1">
-								<CardTitle className="flex items-center gap-1">
-									<Icon className={cn("size-4", iconClass)} aria-hidden />
-									{label}
-									<MetricsCardInfoButton
-										label={label}
-										helpTitle={helpTitle}
-										helpLines={helpLines}
-									/>
-								</CardTitle>
+								<div className="flex items-center justify-between gap-2">
+									<CardTitle className="flex items-center gap-1">
+										<Icon className={cn("size-4", iconClass)} aria-hidden />
+										{label}
+										<MetricsCardInfoButton
+											label={label}
+											helpTitle={helpTitle}
+											helpLines={helpLines}
+										/>
+									</CardTitle>
+									{transactionsHref ? (
+										<Link
+											href={transactionsHref}
+											className="rounded-sm px-1 text-muted-foreground/60 transition-colors hover:bg-accent hover:text-primary focus-visible:outline-none focus-visible:ring-ring/50 focus-visible:ring-[3px]"
+											aria-label={`Ver lançamentos de ${label.toLowerCase()}`}
+										>
+											<RiArrowRightLine className="size-4" aria-hidden />
+										</Link>
+									) : null}
+								</div>
 								<CardDescription className="mt-1 tracking-tight">
 									{subtitle}
 								</CardDescription>
 								<Separator className="mt-1" />
 							</CardHeader>
 
-							<CardContent className="flex flex-col gap-3">
-								<div className="flex flex-wrap items-center justify-between gap-2 mt-1">
-									<MoneyValues
-										className="text-2xl leading-none font-medium"
-										amount={metric.current}
-									/>
-									<PercentageChangeIndicator
-										trend={trend}
-										label={percentChange}
-										positiveTrend={invertTrend ? "down" : "up"}
-										showFlatIcon
-										className="gap-1"
-										iconClassName="size-3.5"
-									/>
-								</div>
+							<CardContent className="flex flex-col">
+								<div className="flex items-start justify-between mt-1">
+									<div className="flex flex-col gap-2 min-w-0">
+										<div className="flex flex-wrap items-center">
+											<MoneyValues
+												className="text-2xl leading-none"
+												amount={metric.current}
+											/>
+										</div>
 
-								<div className="text-xs text-muted-foreground">
-									<MoneyValues
-										className="inline text-xs font-medium text-muted-foreground"
-										amount={metric.previous}
-									/>
-									<span className="ml-1">no mês anterior</span>
+										<div className="text-xs text-muted-foreground gap-1 flex items-center">
+											<span className="text-muted-foreground/50">vs</span>
+											<MoneyValues
+												className="inline text-xs"
+												amount={metric.previous}
+											/>
+											<Badge
+												variant="secondary"
+												aria-hidden={!percentChange}
+												className={cn(
+													"w-14 justify-center px-0 text-xs",
+													!percentChange && "invisible",
+												)}
+											>
+												{percentChange ? (
+													<PercentageChangeIndicator
+														trend={trend}
+														label={percentChange}
+														positiveTrend={invertTrend ? "down" : "up"}
+														showFlatIcon={false}
+														className="shrink-0 justify-center text-center text-xs tabular-nums"
+														iconClassName="hidden"
+													/>
+												) : (
+													<span className="tabular-nums">0%</span>
+												)}
+											</Badge>
+										</div>
+									</div>
 								</div>
 							</CardContent>
 						</Card>

src/features/dashboard/components/goals-progress/goals-progress-item.tsx

@@ -1,5 +1,5 @@
 import { RiPencilLine } from "@remixicon/react";
-import { PercentageChangeIndicator } from "@/features/dashboard/components/percentage-change-indicator";
+import Link from "next/link";
 import {
 	clampGoalProgress,
 	formatGoalProgressPercentage,
@@ -9,24 +9,28 @@ import { CategoryIconBadge } from "@/shared/components/entity-avatar";
 import MoneyValues from "@/shared/components/money-values";
 import { Button } from "@/shared/components/ui/button";
 import { Progress } from "@/shared/components/ui/progress";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipTrigger,
+} from "@/shared/components/ui/tooltip";
+import { cn } from "@/shared/utils";
+import { formatPeriodForUrl } from "@/shared/utils/period";
 
 type GoalProgressItemProps = {
 	item: GoalProgressItemData;
-	index: number;
 	onEdit: (item: GoalProgressItemData) => void;
 };
 
-export function GoalProgressItem({
-	item,
-	index,
-	onEdit,
-}: GoalProgressItemProps) {
+export function GoalProgressItem({ item, onEdit }: GoalProgressItemProps) {
 	const progressValue = clampGoalProgress(item.usedPercentage, 0, 100);
-	const percentageDelta = item.usedPercentage - 100;
 	const isExceeded = item.status === "exceeded";
+	const isCritical = item.status === "critical";
+	const exceededAmount = Math.max(item.spentAmount - item.budgetAmount, 0);
+	const usedPercentageLabel = formatGoalProgressPercentage(item.usedPercentage);
 
 	return (
-		<div className="group transition-all duration-300 py-2">
+		<li className="group py-2 transition-all duration-300">
 			<div className="flex items-start justify-between gap-3">
 				<div className="flex min-w-0 flex-1 items-start gap-2">
 					<CategoryIconBadge
@@ -35,46 +39,72 @@ export function GoalProgressItem({
 						size="md"
 					/>
 					<div className="min-w-0 flex-1">
-						<p className="truncate text-sm font-medium text-foreground">
-							{item.categoryName}
-						</p>
+						{item.categoryId ? (
+							<Link
+								href={`/categories/${item.categoryId}?periodo=${formatPeriodForUrl(item.period)}`}
+								className="block truncate text-sm font-medium text-foreground underline-offset-2 hover:text-primary hover:underline"
+							>
+								{item.categoryName}
+							</Link>
+						) : (
+							<p className="truncate text-sm font-medium text-foreground">
+								{item.categoryName}
+							</p>
+						)}
 						<p className="mt-0.5 text-xs text-muted-foreground">
 							<MoneyValues className="font-medium" amount={item.spentAmount} />{" "}
 							de{" "}
 							<MoneyValues className="font-medium" amount={item.budgetAmount} />
-							<PercentageChangeIndicator
-								value={percentageDelta}
-								label={formatGoalProgressPercentage(percentageDelta, true)}
-								positiveTrend="down"
-								className="ml-1.5 align-middle"
-							/>
+							<span aria-hidden> · </span>
+							<span
+								className={cn(
+									"font-medium",
+									isExceeded && "text-destructive",
+									isCritical && "text-warning",
+								)}
+							>
+								{isExceeded ? (
+									<>
+										<MoneyValues amount={exceededAmount} /> acima do limite
+									</>
+								) : (
+									`${usedPercentageLabel} utilizado`
+								)}
+							</span>
 						</p>
 					</div>
 				</div>
 
-				<div className="flex shrink-0 items-center gap-2">
-					<Button
-						type="button"
-						variant="link"
-						size="icon-sm"
-						className="transition-opacity text-primary hover:opacity-80"
-						onClick={() => onEdit(item)}
-						aria-label={`Atualizar orçamento de ${item.categoryName}`}
-					>
-						<RiPencilLine className="size-3.5" />
-					</Button>
-				</div>
+				<Tooltip>
+					<TooltipTrigger asChild>
+						<Button
+							type="button"
+							variant="ghost"
+							size="icon-sm"
+							className="shrink-0 text-primary/70 opacity-70 transition-all hover:text-primary hover:opacity-100 focus-visible:text-primary focus-visible:opacity-100 group-hover:opacity-100 group-focus-within:opacity-100"
+							onClick={() => onEdit(item)}
+							aria-label={`Atualizar orçamento de ${item.categoryName}`}
+						>
+							<RiPencilLine className="size-3.5" />
+						</Button>
+					</TooltipTrigger>
+					<TooltipContent side="top">Atualizar orçamento</TooltipContent>
+				</Tooltip>
 			</div>
 			<div className="ml-11 mt-1.5">
 				<Progress
 					value={progressValue}
-					className={
-						isExceeded
-							? "**:data-[slot=progress-indicator]:bg-destructive bg-destructive/20"
-							: undefined
-					}
+					className={cn(
+						isExceeded && "bg-destructive/20",
+						isCritical && "bg-warning/20",
+					)}
+					indicatorClassName={cn(
+						isExceeded && "bg-destructive",
+						isCritical && "bg-warning",
+					)}
+					aria-label={`${usedPercentageLabel} do orçamento utilizado em ${item.categoryName}`}
 				/>
 			</div>
-		</div>
+		</li>
 	);
 }

src/features/dashboard/components/goals-progress/goals-progress-list.tsx

@@ -21,13 +21,8 @@ export function GoalsProgressList({ items, onEdit }: GoalsProgressListProps) {
 
 	return (
 		<ul className="flex flex-col">
-			{items.map((item, index) => (
-				<GoalProgressListItem
-					key={item.id}
-					item={item}
-					index={index}
-					onEdit={onEdit}
-				/>
+			{items.map((item) => (
+				<GoalProgressListItem key={item.id} item={item} onEdit={onEdit} />
 			))}
 		</ul>
 	);

src/features/dashboard/components/installment-analysis/installment-analysis-page.tsx

@@ -130,7 +130,7 @@ export function InstallmentAnalysisPage({
 	return (
 		<div className="flex flex-col gap-4">
 			{/* Card de resumo principal */}
-			<Card className="border-none bg-primary/10 dark:bg-primary/10">
+			<Card className="border-none bg-primary/10 shadow-none">
 				<CardContent className="flex flex-col items-start justify-center gap-2 py-2">
 					<p className="text-sm text-muted-foreground">
 						Se você pagar tudo que está selecionado:

src/features/dashboard/components/installment-analysis/installment-group-card.tsx

@@ -3,13 +3,14 @@
 import {
 	RiBankCard2Line,
 	RiCheckboxCircleFill,
-	RiEyeLine,
+	RiFileList2Line,
 	RiTimeLine,
 } from "@remixicon/react";
 import { format } from "date-fns";
 import { ptBR } from "date-fns/locale";
 import Image from "next/image";
 import { useState } from "react";
+import { EstablishmentLogo } from "@/shared/components/entity-avatar";
 import MoneyValues from "@/shared/components/money-values";
 import { Badge } from "@/shared/components/ui/badge";
 import { Button } from "@/shared/components/ui/button";
@@ -29,6 +30,7 @@ import {
 	DialogTitle,
 } from "@/shared/components/ui/dialog";
 import { Progress } from "@/shared/components/ui/progress";
+import { resolveLogoSrc } from "@/shared/lib/logo";
 import { cn } from "@/shared/utils";
 import type { InstallmentGroup } from "./types";
 
@@ -62,8 +64,8 @@ export function InstallmentGroupCard({
 	const hasSelection = selectedInstallments.size > 0;
 
 	const progress =
-		group.totalInstallments > 0
-			? (group.paidInstallments / group.totalInstallments) * 100
+		group.trackedInstallments > 0
+			? (group.paidInstallments / group.trackedInstallments) * 100
 			: 0;
 
 	const selectedAmount = group.pendingInstallments
@@ -79,6 +81,12 @@ export function InstallmentGroupCard({
 		(sum, i) => sum + i.amount,
 		0,
 	);
+	const cardLogoSrc = resolveLogoSrc(group.cartaoLogo);
+	const cardName = group.cartaoName ?? "Compra parcelada";
+	const untrackedLabel =
+		group.untrackedInstallments === 1
+			? "1 parcela anterior fora do acompanhamento"
+			: `${group.untrackedInstallments} parcelas anteriores fora do acompanhamento`;
 
 	return (
 		<>
@@ -111,25 +119,24 @@ export function InstallmentGroupCard({
 						{/* Info principal */}
 						<div className="flex-1 min-w-0">
 							<div className="flex items-center gap-3 flex-wrap">
-								{group.cartaoLogo ? (
-									<Image
-										src={`/logos/${group.cartaoLogo}`}
-										alt={group.cartaoName ?? "Cartão"}
-										width={40}
-										height={40}
-										className="size-10 rounded-full object-cover"
-									/>
-								) : (
-									<div className="size-10 flex items-center justify-center">
-										<RiBankCard2Line className="size-5 text-muted-foreground" />
-									</div>
-								)}
+								<EstablishmentLogo name={group.name} size={40} />
 								<div className="flex-1 min-w-0">
 									<CardTitle className="text-base truncate">
 										{group.name}
 									</CardTitle>
-									<CardDescription className="text-xs">
-										{group.cartaoName ?? "Compra parcelada"}
+									<CardDescription className="flex min-w-0 items-center gap-1 text-xs">
+										{cardLogoSrc ? (
+											<Image
+												src={cardLogoSrc}
+												alt={`Logo do cartão ${cardName}`}
+												width={18}
+												height={18}
+												className="size-4.5 shrink-0 rounded-full object-cover"
+											/>
+										) : (
+											<RiBankCard2Line className="size-3.5 shrink-0 text-muted-foreground/70" />
+										)}
+										<span className="truncate">{cardName}</span>
 									</CardDescription>
 								</div>
 							</div>
@@ -147,10 +154,10 @@ export function InstallmentGroupCard({
 
 				<CardContent>
 					{/* Grid de valores */}
-					<div className="grid grid-cols-2 gap-4 p-4 rounded-lg bg-muted/50 mb-4">
+					<div className="grid grid-cols-2 gap-4 p-4 rounded-lg bg-primary/5 mb-4">
 						<div className="space-y-1">
 							<p className="text-xs text-muted-foreground font-medium">
-								Valor total
+								Valor acompanhado
 							</p>
 							<MoneyValues
 								amount={totalAmount}
@@ -165,7 +172,7 @@ export function InstallmentGroupCard({
 								amount={pendingAmount}
 								className={cn(
 									"text-lg font-semibold",
-									pendingAmount > 0 ? "text-amber-600" : "text-success-600",
+									pendingAmount > 0 ? "text-primary" : "text-success",
 								)}
 							/>
 						</div>
@@ -177,48 +184,46 @@ export function InstallmentGroupCard({
 							<div className="flex items-center gap-1 text-muted-foreground">
 								<RiCheckboxCircleFill className="size-3.5 text-success" />
 								<span>
-									{group.paidInstallments} de {group.totalInstallments} parcelas
-									pagas
+									{group.paidInstallments} de {group.trackedInstallments}{" "}
+									parcelas acompanhadas pagas
 								</span>
 							</div>
 							{unpaidCount > 0 && (
 								<div className="flex items-center gap-1 text-muted-foreground">
-									<RiTimeLine className="size-3.5 text-amber-600" />
+									<RiTimeLine className="size-3.5" />
 									<span>
 										{unpaidCount} {unpaidCount === 1 ? "pendente" : "pendentes"}
 									</span>
 								</div>
 							)}
 						</div>
-						<Progress value={progress} className="h-2.5" />
+						<Progress
+							value={progress}
+							className="h-2.5 bg-muted"
+							indicatorClassName="bg-success"
+						/>
+						{group.untrackedInstallments > 0 && (
+							<p className="text-xs text-muted-foreground">{untrackedLabel}</p>
+						)}
 					</div>
 
-					{/* Valor selecionado */}
-					{hasSelection && (
-						<div className="flex items-center justify-between p-3 rounded-lg bg-primary/5 border border-primary/20 mb-4">
-							<span className="text-sm font-medium text-foreground">
-								{selectedInstallments.size}{" "}
-								{selectedInstallments.size === 1
-									? "parcela selecionada"
-									: "parcelas selecionadas"}
-							</span>
-							<MoneyValues
-								amount={selectedAmount}
-								className="text-base font-semibold text-primary"
-							/>
-						</div>
-					)}
-
 					{/* Botão para abrir detalhes */}
 					<Button
 						type="button"
-						variant="outline"
+						variant="secondary"
 						size="sm"
-						className="w-full gap-1.5"
+						className="relative w-full justify-center gap-1.5"
 						onClick={() => setIsDetailsOpen(true)}
 					>
-						<RiEyeLine className="size-4" />
-						Ver detalhes ({group.pendingInstallments.length} parcelas)
+						<span className="inline-flex items-center gap-1.5">
+							<RiFileList2Line className="size-4" />
+							detalhes
+						</span>
+						{hasSelection && (
+							<span className="absolute right-2 rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary">
+								{selectedInstallments.size} sel.
+							</span>
+						)}
 					</Button>
 				</CardContent>
 			</Card>
@@ -228,18 +233,26 @@ export function InstallmentGroupCard({
 				<DialogContent className="max-w-md max-h-[80vh] flex flex-col">
 					<DialogHeader>
 						<div className="flex items-center gap-3">
-							{group.cartaoLogo ? (
-								<img
-									src={`/logos/${group.cartaoLogo}`}
-									alt={group.cartaoName ?? "Cartão"}
-									className="size-8 rounded-full object-cover"
-								/>
-							) : (
-								<div className="size-8 rounded-full bg-muted flex items-center justify-center">
-									<RiBankCard2Line className="size-4 text-muted-foreground" />
+							<EstablishmentLogo name={group.name} size={32} />
+							<div className="min-w-0">
+								<DialogTitle className="truncate text-base">
+									{group.name}
+								</DialogTitle>
+								<div className="mt-0.5 flex min-w-0 items-center gap-1.5 text-xs text-muted-foreground">
+									{cardLogoSrc ? (
+										<Image
+											src={cardLogoSrc}
+											alt={`Logo do cartão ${cardName}`}
+											width={14}
+											height={14}
+											className="size-3.5 shrink-0 rounded-full object-cover opacity-75"
+										/>
+									) : (
+										<RiBankCard2Line className="size-3.5 shrink-0 text-muted-foreground/70" />
+									)}
+									<span className="truncate">{cardName}</span>
 								</div>
-							)}
-							<DialogTitle className="text-base">{group.name}</DialogTitle>
+							</div>
 						</div>
 						<DialogDescription className="sr-only">
 							Detalhes das parcelas do grupo {group.name}

src/features/dashboard/components/installment-expenses/installment-expense-list-item.tsx

@@ -9,6 +9,7 @@ import {
 	TooltipContent,
 	TooltipTrigger,
 } from "@/shared/components/ui/tooltip";
+import { getPaymentMethodIcon } from "@/shared/utils/icons";
 
 type InstallmentExpenseListItemProps = {
 	expense: InstallmentExpense;
@@ -20,6 +21,7 @@ export function InstallmentExpenseListItem({
 	const {
 		compactLabel,
 		isLast,
+		remainingLabel,
 		remainingInstallments,
 		remainingAmount,
 		endDate,
@@ -27,7 +29,7 @@ export function InstallmentExpenseListItem({
 	} = buildInstallmentExpenseDisplay(expense);
 
 	return (
-		<div className="flex items-center gap-3 transition-all duration-300 py-2">
+		<div className="flex items-center gap-2 transition-all duration-300 py-1.5">
 			<EstablishmentLogo name={expense.name} size={37} />
 
 			<div className="min-w-0 flex-1">
@@ -65,15 +67,32 @@ export function InstallmentExpenseListItem({
 					/>
 				</div>
 
-				<p className="text-xs text-muted-foreground">
-					{endDate ? `Termina em ${endDate}` : null}
-					{" · Restante "}
-					<MoneyValues
-						amount={remainingAmount}
-						className="inline-block font-semibold"
-					/>{" "}
-					({remainingInstallments})
-				</p>
+				<div className="flex items-center justify-between gap-2 text-xs text-muted-foreground">
+					<span className="inline-flex min-w-0 items-center gap-1">
+						<span
+							className="inline-flex shrink-0 [&_svg]:size-3.5"
+							title={expense.paymentMethod}
+						>
+							{getPaymentMethodIcon(expense.paymentMethod)}
+							<span className="sr-only">{expense.paymentMethod}</span>
+						</span>
+						{endDate ? <span className="shrink-0">Até {endDate}</span> : null}
+					</span>
+					<span className="shrink-0">
+						{remainingInstallments === 0 ? (
+							"Quitado"
+						) : (
+							<>
+								{remainingLabel}:{" "}
+								<MoneyValues
+									amount={remainingAmount}
+									className="inline-block font-semibold"
+								/>{" "}
+								({remainingInstallments}x)
+							</>
+						)}
+					</span>
+				</div>
 
 				<Progress value={progress} className="mt-1 h-2" />
 			</div>

src/features/dashboard/components/installment-expenses/installment-expenses-list.tsx

@@ -14,17 +14,17 @@ export function InstallmentExpensesList({
 		return (
 			<WidgetEmptyState
 				icon={<RiNumbersLine className="size-6 text-muted-foreground" />}
-				title="Nenhuma despesa parcelada"
+				title="Nenhuma despesa parcelada encontrada"
 				description="Lançamentos parcelados aparecerão aqui conforme forem registrados."
 			/>
 		);
 	}
 
 	return (
-		<ul className="flex flex-col">
+		<div className="flex flex-col">
 			{expenses.map((expense) => (
 				<InstallmentExpenseListItem key={expense.id} expense={expense} />
 			))}
-		</ul>
+		</div>
 	);
 }

src/features/dashboard/components/invoices/invoice-list-item.tsx

@@ -1,10 +1,11 @@
-import { RiCheckboxCircleFill, RiExternalLinkLine } from "@remixicon/react";
+import { RiCheckboxCircleFill, RiGroupLine } from "@remixicon/react";
 import Link from "next/link";
 import { PercentageChangeIndicator } from "@/features/dashboard/components/percentage-change-indicator";
 import {
 	buildInvoiceDetailsHref,
 	buildInvoiceInitials,
 	formatInvoicePaymentDate,
+	formatInvoiceWidgetOverdueLabel,
 	formatInvoiceWidgetPaymentDate,
 	getInvoiceShareLabel,
 	parseInvoiceDueDate,
@@ -48,9 +49,13 @@ export function InvoiceListItem({ invoice, onPay }: InvoiceListItemProps) {
 	const absolutePaymentInfo = formatInvoicePaymentDate(invoice.paidAt);
 	const breakdown = invoice.pagadorBreakdown ?? [];
 	const hasBreakdown = breakdown.length > 0;
+	const hasMultiplePayers = breakdown.length > 1;
 	const detailHref = buildInvoiceDetailsHref(invoice.cardId, invoice.period);
+	const overdueLabel = formatInvoiceWidgetOverdueLabel(dueInfo.date);
 	const dueTooltipLabel =
-		dueInfo.label !== absoluteDueInfo.label ? absoluteDueInfo.label : null;
+		overdueLabel || dueInfo.label !== absoluteDueInfo.label
+			? absoluteDueInfo.label
+			: null;
 	const paymentTooltipLabel =
 		paymentInfo?.label && paymentInfo.label !== absolutePaymentInfo?.label
 			? absolutePaymentInfo?.label
@@ -63,15 +68,11 @@ export function InvoiceListItem({ invoice, onPay }: InvoiceListItemProps) {
 			className="inline-flex max-w-full items-center gap-1 text-sm font-medium text-foreground underline-offset-2 hover:text-primary hover:underline"
 		>
 			<span className="truncate">{invoice.cardName}</span>
-			<RiExternalLinkLine
-				className="size-3 shrink-0 text-muted-foreground"
-				aria-hidden
-			/>
 		</Link>
 	);
 
 	return (
-		<div className="flex items-center justify-between transition-all duration-300 py-1.5">
+		<li className="flex items-center justify-between transition-all duration-300 py-1.5">
 			<div className="flex min-w-0 flex-1 items-center gap-2 py-1">
 				<InvoiceLogo
 					cardName={invoice.cardName}
@@ -81,70 +82,99 @@ export function InvoiceListItem({ invoice, onPay }: InvoiceListItemProps) {
 				/>
 
 				<div className="min-w-0">
-					{hasBreakdown ? (
-						<HoverCard openDelay={150}>
-							<HoverCardTrigger asChild>{linkNode}</HoverCardTrigger>
-							<HoverCardContent align="start" className="w-80 space-y-3">
-								<p className="text-xs text-muted-foreground">
-									Distribuição por pessoa
-								</p>
-								<ul className="space-y-2">
-									{breakdown.map((share, index) => (
-										<li
-											key={`${invoice.id}-${
-												share.payerId ?? share.pagadorName ?? index
-											}`}
-											className="flex items-center gap-3"
-										>
-											<Avatar className="size-9">
-												<AvatarImage
-													src={getAvatarSrc(share.pagadorAvatar)}
-													alt={`Avatar de ${share.pagadorName}`}
-												/>
-												<AvatarFallback>
-													{buildInvoiceInitials(share.pagadorName)}
-												</AvatarFallback>
-											</Avatar>
-											<div className="min-w-0 flex-1">
-												<p className="truncate text-sm font-medium text-foreground">
-													{share.pagadorName}
-												</p>
-												<p className="text-xs text-muted-foreground">
-													{getInvoiceShareLabel(
-														share.amount,
-														Math.abs(invoice.totalAmount),
-													)}
-												</p>
-											</div>
-											<div className="flex shrink-0 flex-col items-end gap-0.5 text-sm font-medium text-foreground">
-												<MoneyValues
-													className="font-medium"
-													amount={share.amount}
-												/>
-												<PercentageChangeIndicator
-													value={share.percentageChange}
-												/>
-											</div>
-										</li>
-									))}
-								</ul>
-							</HoverCardContent>
-						</HoverCard>
-					) : (
-						linkNode
-					)}
+					<div className="flex max-w-full items-center gap-1">
+						{hasBreakdown ? (
+							<HoverCard openDelay={150}>
+								<HoverCardTrigger asChild>{linkNode}</HoverCardTrigger>
+								<HoverCardContent align="start" className="w-80 space-y-3">
+									<p className="text-xs text-muted-foreground">
+										Distribuição por pessoa
+									</p>
+									<ul className="space-y-2">
+										{breakdown.map((share, index) => (
+											<li
+												key={`${invoice.id}-${
+													share.payerId ?? share.pagadorName ?? index
+												}`}
+												className="flex items-center gap-3"
+											>
+												<Avatar className="size-9">
+													<AvatarImage
+														src={getAvatarSrc(share.pagadorAvatar)}
+														alt={`Avatar de ${share.pagadorName}`}
+													/>
+													<AvatarFallback>
+														{buildInvoiceInitials(share.pagadorName)}
+													</AvatarFallback>
+												</Avatar>
+												<div className="min-w-0 flex-1">
+													<p className="truncate text-sm font-medium text-foreground">
+														{share.pagadorName}
+													</p>
+													<p className="text-xs text-muted-foreground">
+														{getInvoiceShareLabel(
+															share.amount,
+															Math.abs(invoice.totalAmount),
+														)}
+													</p>
+												</div>
+												<div className="flex shrink-0 flex-col items-end gap-0.5 text-sm font-medium text-foreground">
+													<MoneyValues
+														className="font-medium"
+														amount={share.amount}
+													/>
+													<PercentageChangeIndicator
+														value={share.percentageChange}
+													/>
+												</div>
+											</li>
+										))}
+									</ul>
+								</HoverCardContent>
+							</HoverCard>
+						) : (
+							linkNode
+						)}
+						{hasMultiplePayers ? (
+							<Tooltip>
+								<TooltipTrigger asChild>
+									<span className="inline-flex shrink-0 cursor-help text-muted-foreground">
+										<RiGroupLine className="size-3.5" aria-hidden />
+										<span className="sr-only">Ver distribuição por pessoa</span>
+									</span>
+								</TooltipTrigger>
+								<TooltipContent side="top">
+									Ver distribuição por pessoa
+								</TooltipContent>
+							</Tooltip>
+						) : null}
+					</div>
 
 					<div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
 						{!isPaid ? (
 							dueTooltipLabel ? (
 								<Tooltip>
 									<TooltipTrigger asChild>
-										<span className="cursor-help">{dueInfo.label}</span>
+										<span
+											className={
+												isOverdue
+													? "cursor-help font-semibold text-destructive"
+													: "cursor-help"
+											}
+										>
+											{overdueLabel ?? dueInfo.label}
+										</span>
 									</TooltipTrigger>
 									<TooltipContent side="top">{dueTooltipLabel}</TooltipContent>
 								</Tooltip>
 							) : (
-								<span>{dueInfo.label}</span>
+								<span
+									className={
+										isOverdue ? "font-semibold text-destructive" : undefined
+									}
+								>
+									{overdueLabel ?? dueInfo.label}
+								</span>
 							)
 						) : null}
 						{isPaid && paymentInfo ? (
@@ -174,30 +204,31 @@ export function InvoiceListItem({ invoice, onPay }: InvoiceListItemProps) {
 					className="font-medium"
 					amount={Math.abs(invoice.totalAmount)}
 				/>
-				<Button
-					type="button"
-					size="sm"
-					variant="link"
-					className="h-auto p-0 disabled:opacity-100"
-					disabled={isPaid}
-					onClick={() => onPay(invoice.id)}
-				>
-					{isPaid ? (
-						<span className="flex items-center gap-0.5 text-success">
-							<RiCheckboxCircleFill className="size-3.5" /> Pago
-						</span>
-					) : isOverdue ? (
-						<span className="overdue-blink">
-							<span className="overdue-blink-primary text-destructive">
-								Atrasado
+				{isPaid ? (
+					<span className="flex h-7 items-center gap-0.5 text-xs font-medium text-success">
+						<RiCheckboxCircleFill className="size-3.5" /> Pago
+					</span>
+				) : (
+					<Button
+						type="button"
+						size="sm"
+						variant="link"
+						className="-mr-1.5 h-7 px-1.5 py-0"
+						onClick={() => onPay(invoice.id)}
+					>
+						{isOverdue ? (
+							<span className="overdue-blink">
+								<span className="overdue-blink-primary text-destructive">
+									Atrasado
+								</span>
+								<span className="overdue-blink-secondary">Pagar</span>
 							</span>
-							<span className="overdue-blink-secondary">Pagar</span>
-						</span>
-					) : (
-						<span>Pagar</span>
-					)}
-				</Button>
+						) : (
+							<span>Pagar</span>
+						)}
+					</Button>
+				)}
 			</div>
-		</div>
+		</li>
 	);
 }

src/features/dashboard/components/invoices/invoices-widget-view.tsx

@@ -39,9 +39,7 @@ export function InvoicesWidgetView({
 }: InvoicesWidgetViewProps) {
 	return (
 		<>
-			<div className="flex flex-col gap-4">
-				<InvoicesList invoices={invoices} onPay={onOpenPaymentDialog} />
-			</div>
+			<InvoicesList invoices={invoices} onPay={onOpenPaymentDialog} />
 
 			<InvoicePaymentDialog
 				invoice={selectedInvoice}

src/features/dashboard/components/metrics-card-info-button.tsx

@@ -2,10 +2,10 @@
 
 import { RiInformationLine } from "@remixicon/react";
 import {
-	HoverCard,
-	HoverCardContent,
-	HoverCardTrigger,
-} from "@/shared/components/ui/hover-card";
+	Tooltip,
+	TooltipContent,
+	TooltipTrigger,
+} from "@/shared/components/ui/tooltip";
 
 type MetricsCardInfoButtonProps = {
 	label: string;
@@ -19,8 +19,8 @@ export function MetricsCardInfoButton({
 	helpLines,
 }: MetricsCardInfoButtonProps) {
 	return (
-		<HoverCard openDelay={150}>
-			<HoverCardTrigger asChild>
+		<Tooltip>
+			<TooltipTrigger asChild>
 				<button
 					type="button"
 					className="inline-flex items-center rounded-full text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/60"
@@ -28,17 +28,22 @@ export function MetricsCardInfoButton({
 				>
 					<RiInformationLine className="size-4" aria-hidden />
 				</button>
-			</HoverCardTrigger>
-			<HoverCardContent align="start" className="w-80 space-y-3">
+			</TooltipTrigger>
+			<TooltipContent
+				align="start"
+				side="bottom"
+				sideOffset={8}
+				className="max-w-80 space-y-3 p-3 text-left"
+			>
 				<div className="space-y-1">
-					<p className="text-sm font-medium text-foreground">{helpTitle}</p>
+					<p className="text-sm font-medium text-background">{helpTitle}</p>
 				</div>
-				<ul className="space-y-2 text-xs text-muted-foreground">
+				<ul className="space-y-2 text-xs text-background/80">
 					{helpLines.map((line) => (
 						<li key={`${label}-${line}`}>{line}</li>
 					))}
 				</ul>
-			</HoverCardContent>
-		</HoverCard>
+			</TooltipContent>
+		</Tooltip>
 	);
 }

src/features/dashboard/components/notes/note-list-item.tsx

@@ -1,4 +1,8 @@
-import { RiFileList2Line, RiPencilLine } from "@remixicon/react";
+import {
+	RiCalendarLine,
+	RiFileList2Line,
+	RiPencilLine,
+} from "@remixicon/react";
 import type { Note } from "@/features/notes/components/types";
 import {
 	buildNoteDisplayTitle,
@@ -7,6 +11,11 @@ import {
 } from "@/features/notes/lib/formatters";
 import { Badge } from "@/shared/components/ui/badge";
 import { Button } from "@/shared/components/ui/button";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipTrigger,
+} from "@/shared/components/ui/tooltip";
 
 type NoteListItemProps = {
 	note: Note;
@@ -21,43 +30,59 @@ export function NoteListItem({
 }: NoteListItemProps) {
 	const displayTitle = buildNoteDisplayTitle(note.title);
 	const createdAtLabel = formatNoteCreatedAt(note.createdAt);
+	const isTask = note.type === "tarefa";
 
 	return (
-		<div className="group flex items-center justify-between gap-2 transition-all duration-300 py-2">
+		<li className="group flex items-center justify-between gap-2 py-1.5 transition-all duration-300">
 			<div className="min-w-0 flex-1">
 				<p className="truncate text-sm font-medium text-foreground">
 					{displayTitle}
 				</p>
-				<div className="mt-1 flex items-center gap-2">
-					<Badge variant="outline" className="h-5 px-1.5 text-xs">
-						{getNoteTasksSummary(note)}
-					</Badge>
+				<div className="mt-1 flex min-w-0 items-center gap-2">
+					{isTask ? (
+						<Badge variant="outline" className="h-5 px-1.5 text-xs">
+							{getNoteTasksSummary(note)}
+						</Badge>
+					) : null}
 					<p className="truncate text-xs text-muted-foreground">
-						{createdAtLabel}
+						<span className="inline-flex items-center gap-1">
+							<RiCalendarLine className="size-3.5 shrink-0" />
+							{createdAtLabel}
+						</span>
 					</p>
 				</div>
 			</div>
 
-			<div className="flex shrink-0 items-center">
-				<Button
-					variant="link"
-					size="icon-sm"
-					className="transition-opacity text-primary hover:opacity-80"
-					onClick={() => onOpenEdit(note)}
-					aria-label={`Editar anotação ${displayTitle}`}
-				>
-					<RiPencilLine className="size-4" />
-				</Button>
-				<Button
-					variant="link"
-					size="icon-sm"
-					className="transition-opacity text-primary hover:opacity-80"
-					onClick={() => onOpenDetails(note)}
-					aria-label={`Ver detalhes da anotação ${displayTitle}`}
-				>
-					<RiFileList2Line className="size-4" />
-				</Button>
+			<div className="flex shrink-0 items-center gap-0.5">
+				<Tooltip>
+					<TooltipTrigger asChild>
+						<Button
+							variant="ghost"
+							size="icon-sm"
+							className="text-primary/70 opacity-70 transition-all hover:text-primary hover:opacity-100 focus-visible:text-primary focus-visible:opacity-100 group-hover:opacity-100 group-focus-within:opacity-100"
+							onClick={() => onOpenEdit(note)}
+							aria-label={`Editar anotação ${displayTitle}`}
+						>
+							<RiPencilLine className="size-4" />
+						</Button>
+					</TooltipTrigger>
+					<TooltipContent side="top">Editar anotação</TooltipContent>
+				</Tooltip>
+				<Tooltip>
+					<TooltipTrigger asChild>
+						<Button
+							variant="ghost"
+							size="icon-sm"
+							className="text-primary/70 opacity-70 transition-all hover:text-primary hover:opacity-100 focus-visible:text-primary focus-visible:opacity-100 group-hover:opacity-100 group-focus-within:opacity-100"
+							onClick={() => onOpenDetails(note)}
+							aria-label={`Ver detalhes da anotação ${displayTitle}`}
+						>
+							<RiFileList2Line className="size-4" />
+						</Button>
+					</TooltipTrigger>
+					<TooltipContent side="top">Ver detalhes</TooltipContent>
+				</Tooltip>
 			</div>
-		</div>
+		</li>
 	);
 }

src/features/dashboard/components/notes/notes-widget-view.tsx

@@ -27,7 +27,7 @@ export function NotesWidgetView({
 }: NotesWidgetViewProps) {
 	return (
 		<>
-			<div className="flex flex-col gap-4 px-0">
+			<div className="flex flex-col px-0">
 				<NotesList
 					notes={notes}
 					onOpenEdit={onOpenEdit}

src/features/dashboard/components/payment-overview/payment-breakdown-list-item.tsx

@@ -1,4 +1,3 @@
-import { RiExternalLinkLine } from "@remixicon/react";
 import Link from "next/link";
 import type { ReactNode } from "react";
 import {
@@ -24,13 +23,18 @@ export type PaymentBreakdownListItemData = {
 
 type PaymentBreakdownListItemProps = {
 	item: PaymentBreakdownListItemData;
+	position: number;
 };
 
 export function PaymentBreakdownListItem({
 	item,
+	position,
 }: PaymentBreakdownListItemProps) {
 	return (
-		<div className="flex items-center gap-3 transition-all duration-300 py-1.5">
+		<div className="flex items-center gap-2 transition-all duration-300 py-1">
+			<span className="w-3 shrink-0 text-left text-xs font-medium text-muted-foreground">
+				{position}
+			</span>
 			<div
 				className="flex size-9.5 shrink-0 items-center justify-center rounded-full"
 				style={{
@@ -49,22 +53,20 @@ export function PaymentBreakdownListItem({
 							className="inline-flex items-center gap-1 text-sm font-medium text-foreground underline-offset-2 hover:text-primary hover:underline"
 						>
 							<span className="truncate">{item.title}</span>
-							<RiExternalLinkLine
-								className="size-3 shrink-0 text-muted-foreground"
-								aria-hidden
-							/>
 						</Link>
 					) : (
 						<p className="text-sm font-medium text-foreground">{item.title}</p>
 					)}
-					<MoneyValues className="font-medium" amount={item.amount} />
+					<MoneyValues className="shrink-0 font-medium" amount={item.amount} />
 				</div>
 
 				<div className="flex items-center justify-between text-xs text-muted-foreground">
 					<span>
 						{formatPaymentBreakdownTransactionsLabel(item.transactions)}
 					</span>
-					<span>{formatPaymentBreakdownPercentage(item.percentage)}</span>
+					<span>
+						{formatPaymentBreakdownPercentage(item.percentage)} do total
+					</span>
 				</div>
 
 				<div className="mt-1">

src/features/dashboard/components/payment-overview/payment-breakdown-list.tsx

@@ -31,10 +31,14 @@ export function PaymentBreakdownList({
 	}
 
 	return (
-		<div className="flex flex-col gap-4 px-0">
+		<div className="flex flex-col px-0">
 			<ul className="flex flex-col gap-2">
-				{items.map((item) => (
-					<PaymentBreakdownListItem key={item.id} item={item} />
+				{items.map((item, index) => (
+					<PaymentBreakdownListItem
+						key={item.id}
+						item={item}
+						position={index + 1}
+					/>
 				))}
 			</ul>
 		</div>

src/features/dashboard/components/payment-overview/payment-overview-widget-view.tsx

@@ -43,7 +43,7 @@ export function PaymentOverviewWidgetView({
 					className="text-xs data-[state=active]:bg-transparent"
 				>
 					<RiMoneyDollarCircleLine className="mr-1 size-3.5" />
-					Formas
+					Formas de pagamento
 				</TabsTrigger>
 			</TabsList>
 

src/features/dashboard/components/payment-status/payment-status-category-section.tsx

@@ -1,16 +1,18 @@
+import { RiArrowDownLine, RiArrowUpLine } from "@remixicon/react";
 import StatusDot from "@/shared/components/feedback/status-dot";
 import MoneyValues from "@/shared/components/money-values";
 import { Progress } from "@/shared/components/ui/progress";
+import { formatPercentage } from "@/shared/utils/percentage";
 
 type PaymentStatusCategorySectionProps = {
-	title: string;
+	type: "income" | "expenses";
 	total: number;
 	confirmed: number;
 	pending: number;
 };
 
 export function PaymentStatusCategorySection({
-	title,
+	type,
 	total,
 	confirmed,
 	pending,
@@ -19,27 +21,51 @@ export function PaymentStatusCategorySection({
 	const absConfirmed = Math.abs(confirmed);
 	const confirmedPercentage =
 		absTotal > 0 ? (absConfirmed / absTotal) * 100 : 0;
+	const income = type === "income";
+	const title = income ? "A receber" : "A pagar";
+	const confirmedLabel = income ? "recebidos" : "pagos";
+	const pendingLabel = income ? "a receber" : "a pagar";
+	const percentageLabel = income ? "recebido" : "pago";
+	const TitleIcon = income ? RiArrowDownLine : RiArrowUpLine;
 
 	return (
-		<div className="mt-4 space-y-3">
+		<div className="space-y-3">
 			<div className="flex items-center justify-between">
-				<span className="text-sm font-medium text-foreground">{title}</span>
-				<MoneyValues amount={total} className="font-medium" />
+				<span className="flex items-center gap-1.5 text-sm font-medium text-foreground">
+					<TitleIcon className="size-4 text-primary" aria-hidden />
+					{title}
+				</span>
+				<span className="flex items-center gap-2">
+					<span className="text-xs text-muted-foreground">
+						{formatPercentage(confirmedPercentage, {
+							minimumFractionDigits: 0,
+							maximumFractionDigits: 0,
+						})}{" "}
+						{percentageLabel}
+					</span>
+					<MoneyValues amount={total} className="font-medium" />
+				</span>
 			</div>
 
-			<Progress value={confirmedPercentage} className="h-2" />
+			<Progress
+				value={confirmedPercentage}
+				className="h-2"
+				indicatorClassName="bg-primary"
+			/>
 
 			<div className="flex flex-col gap-1 text-sm sm:flex-row sm:items-center sm:justify-between sm:gap-4">
 				<div className="flex items-center gap-1.5">
 					<StatusDot color="bg-primary" />
 					<MoneyValues amount={confirmed} className="font-medium" />
-					<span className="text-xs text-muted-foreground">confirmados</span>
+					<span className="text-xs text-muted-foreground">
+						{confirmedLabel}
+					</span>
 				</div>
 
 				<div className="flex items-center gap-1.5">
 					<StatusDot color="bg-warning/40" />
 					<MoneyValues amount={pending} className="font-medium" />
-					<span className="text-xs text-muted-foreground">pendentes</span>
+					<span className="text-xs text-muted-foreground">{pendingLabel}</span>
 				</div>
 			</div>
 		</div>

src/features/dashboard/components/payment-status/payment-status-widget-view.tsx

@@ -28,7 +28,7 @@ export function PaymentStatusWidgetView({
 	return (
 		<CardContent className="space-y-6 px-0">
 			<PaymentStatusCategorySection
-				title="A Receber"
+				type="income"
 				total={data.income.total}
 				confirmed={data.income.confirmed}
 				pending={data.income.pending}
@@ -37,7 +37,7 @@ export function PaymentStatusWidgetView({
 			<div className="border-t" />
 
 			<PaymentStatusCategorySection
-				title="A Pagar"
+				type="expenses"
 				total={data.expenses.total}
 				confirmed={data.expenses.confirmed}
 				pending={data.expenses.pending}

src/features/dashboard/components/widgets/category-trends-widget.tsx

@@ -1,6 +1,11 @@
 "use client";
 
-import { RiLineChartLine } from "@remixicon/react";
+import {
+	RiArrowRightLine,
+	RiCalendarLine,
+	RiHistoryLine,
+	RiLineChartLine,
+} from "@remixicon/react";
 import type { DashboardCategoryBreakdownItem } from "@/features/dashboard/categories/category-breakdown-helpers";
 import { PercentageChangeIndicator } from "@/features/dashboard/components/percentage-change-indicator";
 import { CategoryIconBadge } from "@/shared/components/entity-avatar";
@@ -50,12 +55,30 @@ export function CategoryTrendsWidget({
 								<p className="truncate text-sm font-medium text-foreground">
 									{category.categoryName}
 								</p>
-								<p className="text-xs text-muted-foreground">
-									<MoneyValues amount={category.previousAmount} /> vs{" "}
-									<MoneyValues
-										amount={category.currentAmount}
-										className="font-semibold"
-									/>
+								<p className="flex items-center gap-1.5 text-xs text-muted-foreground">
+									<span
+										className="inline-flex items-center gap-1"
+										title="Mês anterior"
+									>
+										<RiHistoryLine className="size-3.5" aria-hidden />
+										<span className="sr-only">Mês anterior:</span>
+										<MoneyValues amount={category.previousAmount} />
+									</span>
+									<RiArrowRightLine className="size-3" aria-hidden />
+									<span
+										className="inline-flex items-center gap-1 text-foreground"
+										title="Mês atual"
+									>
+										<RiCalendarLine
+											className="size-3.5 text-primary"
+											aria-hidden
+										/>
+										<span className="sr-only">Mês atual:</span>
+										<MoneyValues
+											amount={category.currentAmount}
+											className="font-semibold"
+										/>
+									</span>
 								</p>
 							</div>
 							<PercentageChangeIndicator

src/features/dashboard/components/widgets/inbox-widget.tsx

@@ -6,6 +6,7 @@ import {
 	RiDeleteBinLine,
 } from "@remixicon/react";
 import Image from "next/image";
+import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useMemo, useState } from "react";
 import { toast } from "sonner";
@@ -19,6 +20,11 @@ import { TransactionDialog } from "@/features/transactions/components/dialogs/tr
 import { ConfirmActionDialog } from "@/shared/components/confirm-action-dialog";
 import MoneyValues from "@/shared/components/money-values";
 import { Button } from "@/shared/components/ui/button";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipTrigger,
+} from "@/shared/components/ui/tooltip";
 import { WidgetEmptyState } from "@/shared/components/widgets/widget-empty-state";
 import { resolveLogoSrc } from "@/shared/lib/logo";
 
@@ -46,6 +52,24 @@ function getDateString(date: Date | string | null | undefined): string | null {
 	return date.toISOString().slice(0, 10);
 }
 
+function findMatchingLogo(
+	sourceAppName: string | null,
+	logoMap: Record<string, string>,
+): string | null {
+	if (!sourceAppName) return null;
+
+	const appName = sourceAppName.toLowerCase();
+	if (logoMap[appName]) return resolveLogoSrc(logoMap[appName]);
+
+	for (const [name, logo] of Object.entries(logoMap)) {
+		if (name.includes(appName) || appName.includes(name)) {
+			return resolveLogoSrc(logo);
+		}
+	}
+
+	return null;
+}
+
 export function InboxWidget({
 	snapshot,
 	quickActionOptions,
@@ -149,13 +173,18 @@ export function InboxWidget({
 	if (snapshot.pendingCount === 0) {
 		return (
 			<WidgetEmptyState
-				icon={<RiCheckboxCircleFill color="green" className="size-6" />}
+				icon={<RiCheckboxCircleFill className="size-6 text-success" />}
 				title="Tudo em dia"
 				description="Nenhum pré-lançamento aguardando revisão."
 			/>
 		);
 	}
 
+	const remainingCount = Math.max(
+		snapshot.pendingCount - snapshot.recentItems.length,
+		0,
+	);
+
 	return (
 		<div className="flex flex-col">
 			{snapshot.recentItems.map((item) => {
@@ -168,17 +197,12 @@ export function InboxWidget({
 					parsedAmount !== null && Number.isFinite(parsedAmount)
 						? parsedAmount
 						: null;
-				const logoKey = item.sourceAppName?.toLowerCase() ?? "";
-				const rawLogo = snapshot.logoMap[logoKey] ?? null;
-				const logoSrc = resolveLogoSrc(rawLogo);
+				const logoSrc = findMatchingLogo(item.sourceAppName, snapshot.logoMap);
 				const displayLogo = logoSrc ?? DEFAULT_INBOX_APP_LOGO;
 
 				return (
-					<div
-						key={item.id}
-						className="flex items-center justify-between py-1.5"
-					>
-						<div className="flex flex-1 items-center gap-2">
+					<div key={item.id} className="flex items-center justify-between py-2">
+						<div className="flex min-w-0 flex-1 items-center gap-2">
 							<Image
 								src={displayLogo}
 								alt={item.sourceAppName ?? ""}
@@ -188,52 +212,74 @@ export function InboxWidget({
 								unoptimized
 							/>
 
-							<div>
-								<p className="text-sm font-medium text-foreground">
-									{displayName.length > 30
-										? `${displayName.slice(0, 30)}...`
-										: displayName}
+							<div className="min-w-0">
+								<p className="truncate text-sm font-medium text-foreground">
+									{displayName}
 								</p>
-								<div className="flex items-center gap-2 text-xs text-muted-foreground">
-									{item.sourceAppName && <span>{item.sourceAppName}</span>}
+								<div className="flex min-w-0 items-center gap-2 text-xs text-muted-foreground">
+									{item.sourceAppName && (
+										<span className="truncate">{item.sourceAppName}</span>
+									)}
 									<span className="text-muted-foreground/60">
-										{relativeTime(item.createdAt)}
+										{relativeTime(item.notificationTimestamp)}
 									</span>
 								</div>
 							</div>
 						</div>
 
-						<div className="flex shrink-0 flex-col items-end">
+						<div className="ml-2 flex shrink-0 items-center gap-1">
 							{amount !== null && (
 								<MoneyValues className="font-medium" amount={amount} />
 							)}
+							{amount === null && (
+								<span className="max-w-20 text-right text-xs leading-tight text-muted-foreground">
+									Valor não identificado
+								</span>
+							)}
 							<div className="flex items-center">
-								<Button
-									size="icon-sm"
-									variant="ghost"
-									className="size-6 text-muted-foreground hover:text-foreground"
-									onClick={() => handleProcessRequest(item)}
-									aria-label="Processar notificação"
-									title="Processar"
-								>
-									<RiCheckLine className="size-3.5" />
-								</Button>
-								<Button
-									size="icon-sm"
-									variant="ghost"
-									className="size-6 text-muted-foreground hover:text-destructive"
-									onClick={() => handleDiscardRequest(item)}
-									aria-label="Descartar notificação"
-									title="Descartar"
-								>
-									<RiDeleteBinLine className="size-3.5" />
-								</Button>
+								<Tooltip>
+									<TooltipTrigger asChild>
+										<Button
+											size="icon-sm"
+											variant="ghost"
+											className="text-muted-foreground hover:text-foreground"
+											onClick={() => handleProcessRequest(item)}
+											aria-label="Lançar notificação"
+										>
+											<RiCheckLine className="size-3.5" />
+										</Button>
+									</TooltipTrigger>
+									<TooltipContent side="top">Lançar</TooltipContent>
+								</Tooltip>
+								<Tooltip>
+									<TooltipTrigger asChild>
+										<Button
+											size="icon-sm"
+											variant="ghost"
+											className="text-muted-foreground hover:text-destructive"
+											onClick={() => handleDiscardRequest(item)}
+											aria-label="Descartar notificação"
+										>
+											<RiDeleteBinLine className="size-3.5" />
+										</Button>
+									</TooltipTrigger>
+									<TooltipContent side="top">Descartar</TooltipContent>
+								</Tooltip>
 							</div>
 						</div>
 					</div>
 				);
 			})}
 
+			{remainingCount > 0 && (
+				<Link
+					href="/inbox"
+					className="mt-2 inline-flex items-center justify-center text-xs font-medium text-muted-foreground transition-colors hover:text-primary"
+				>
+					+ {remainingCount} pendentes · Revisar todos
+				</Link>
+			)}
+
 			<TransactionDialog
 				mode="create"
 				open={processOpen}

src/features/dashboard/components/widgets/income-expense-balance-widget.tsx

@@ -1,7 +1,14 @@
 "use client";
 
 import { RiLineChartLine } from "@remixicon/react";
-import { Bar, BarChart, CartesianGrid, XAxis } from "recharts";
+import {
+	Bar,
+	CartesianGrid,
+	ComposedChart,
+	Line,
+	ReferenceLine,
+	XAxis,
+} from "recharts";
 import type { IncomeExpenseBalanceData } from "@/features/dashboard/overview/income-expense-balance-queries";
 import { CardContent } from "@/shared/components/ui/card";
 import {
@@ -11,6 +18,7 @@ import {
 } from "@/shared/components/ui/chart";
 import { WidgetEmptyState } from "@/shared/components/widgets/widget-empty-state";
 import { formatCurrency } from "@/shared/utils/currency";
+import { formatCompactPeriodLabel } from "@/shared/utils/period";
 
 type IncomeExpenseBalanceWidgetProps = {
 	data: IncomeExpenseBalanceData;
@@ -27,7 +35,7 @@ const chartConfig = {
 	},
 	balanco: {
 		label: "Balanço",
-		color: "var(--warning)",
+		color: "var(--primary)",
 	},
 } satisfies ChartConfig;
 
@@ -35,7 +43,7 @@ export function IncomeExpenseBalanceWidget({
 	data,
 }: IncomeExpenseBalanceWidgetProps) {
 	const chartData = data.months.map((month) => ({
-		month: month.monthLabel,
+		month: formatCompactPeriodLabel(month.month).toLowerCase(),
 		receita: month.income,
 		despesa: month.expense,
 		balanco: month.balance,
@@ -59,16 +67,18 @@ export function IncomeExpenseBalanceWidget({
 	}
 
 	return (
-		<CardContent className="space-y-4 px-0">
+		<CardContent className="space-y-2 px-0">
 			<ChartContainer
 				config={chartConfig}
 				className="h-[270px] w-full aspect-auto"
 			>
-				<BarChart
+				<ComposedChart
 					data={chartData}
 					margin={{ top: 20, right: 10, left: 10, bottom: 5 }}
+					accessibilityLayer
 				>
 					<CartesianGrid strokeDasharray="3 3" vertical={false} />
+					<ReferenceLine y={0} stroke="var(--border)" />
 					<XAxis
 						dataKey="month"
 						tickLine={false}
@@ -81,8 +91,15 @@ export function IncomeExpenseBalanceWidget({
 								return null;
 							}
 
+							const month = payload[0]?.payload.month as string | undefined;
+
 							return (
 								<div className="rounded-lg border bg-background p-2 shadow-sm">
+									{month ? (
+										<p className="mb-2 text-xs font-medium text-muted-foreground">
+											{month}
+										</p>
+									) : null}
 									<div className="grid gap-2">
 										{payload.map((entry) => {
 											const config =
@@ -111,7 +128,7 @@ export function IncomeExpenseBalanceWidget({
 								</div>
 							);
 						}}
-						cursor={{ fill: "hsl(var(--muted))", opacity: 0.3 }}
+						cursor={{ fill: "var(--muted)", opacity: 0.3 }}
 					/>
 					<Bar
 						dataKey="receita"
@@ -125,42 +142,26 @@ export function IncomeExpenseBalanceWidget({
 						radius={[4, 4, 0, 0]}
 						maxBarSize={60}
 					/>
-					<Bar
+					<Line
 						dataKey="balanco"
-						fill={chartConfig.balanco.color}
-						radius={[4, 4, 0, 0]}
-						maxBarSize={60}
+						type="monotone"
+						stroke={chartConfig.balanco.color}
+						strokeWidth={2}
+						dot={{ fill: chartConfig.balanco.color, r: 3 }}
+						activeDot={{ r: 5 }}
 					/>
-				</BarChart>
+				</ComposedChart>
 			</ChartContainer>
-			<div className="flex items-center justify-center gap-6">
-				<div className="flex items-center gap-2">
-					<div
-						className="size-2 rounded-full"
-						style={{ backgroundColor: chartConfig.receita.color }}
-					/>
-					<span className="text-sm text-muted-foreground">
-						{chartConfig.receita.label}
-					</span>
-				</div>
-				<div className="flex items-center gap-2">
-					<div
-						className="size-2 rounded-full"
-						style={{ backgroundColor: chartConfig.despesa.color }}
-					/>
-					<span className="text-sm text-muted-foreground">
-						{chartConfig.despesa.label}
-					</span>
-				</div>
-				<div className="flex items-center gap-2">
-					<div
-						className="size-2 rounded-full"
-						style={{ backgroundColor: chartConfig.balanco.color }}
-					/>
-					<span className="text-sm text-muted-foreground">
-						{chartConfig.balanco.label}
-					</span>
-				</div>
+			<div className="flex flex-wrap items-center justify-center gap-x-4 gap-y-1 text-xs text-muted-foreground">
+				{Object.values(chartConfig).map((config) => (
+					<div key={config.label} className="flex items-center gap-1.5">
+						<div
+							className="size-2 rounded-full"
+							style={{ backgroundColor: config.color }}
+						/>
+						<span>{config.label}</span>
+					</div>
+				))}
 			</div>
 		</CardContent>
 	);

src/features/dashboard/components/widgets/my-accounts-widget.tsx

@@ -1,8 +1,8 @@
 "use client";
 
 import {
+	RiArrowRightLine,
 	RiBarChartBoxLine,
-	RiExternalLinkLine,
 	RiEyeLine,
 	RiEyeOffLine,
 } from "@remixicon/react";
@@ -24,7 +24,9 @@ import {
 import { WidgetEmptyState } from "@/shared/components/widgets/widget-empty-state";
 import { isAccountInactive } from "@/shared/lib/accounts/constants";
 import { resolveLogoSrc } from "@/shared/lib/logo";
+import { buildInitials } from "@/shared/utils/initials";
 import { formatPeriodForUrl } from "@/shared/utils/period";
+import { cn } from "@/shared/utils/ui";
 
 type MyAccountsWidgetProps = {
 	accounts: DashboardAccount[];
@@ -54,9 +56,6 @@ export function MyAccountsWidget({
 		: activeAccounts.filter((account) => !account.excludeFromBalance);
 	const displayedAccounts = visibleAccounts.slice(0, 5);
 	const remainingCount = visibleAccounts.length - displayedAccounts.length;
-	const hiddenExcludedAccountsCount = showExcludedAccounts
-		? 0
-		: excludedAccountsCount;
 	const toggleButtonLabel = showExcludedAccounts
 		? "Ocultar contas não consideradas"
 		: "Mostrar contas não consideradas";
@@ -81,7 +80,7 @@ export function MyAccountsWidget({
 		<>
 			<div className="flex items-start justify-between gap-3 py-1">
 				<div className="space-y-1">
-					<p className="text-sm text-muted-foreground">Saldo Total</p>
+					<p className="text-sm text-muted-foreground">Saldo total</p>
 					<MoneyValues className="text-2xl font-medium" amount={totalBalance} />
 				</div>
 
@@ -106,51 +105,46 @@ export function MyAccountsWidget({
 						</TooltipTrigger>
 						<TooltipContent side="left" className="max-w-xs">
 							<p className="text-xs">{toggleButtonLabel}</p>
+							{!showExcludedAccounts ? (
+								<p className="mt-1 text-xs text-background/70">
+									{excludedAccountsCount}{" "}
+									{excludedAccountsCount === 1
+										? "conta não considerada oculta"
+										: "contas não consideradas ocultas"}
+								</p>
+							) : null}
 						</TooltipContent>
 					</Tooltip>
 				) : null}
 			</div>
 
-			{hiddenExcludedAccountsCount > 0 ? (
-				<p className="pb-2 text-xs text-muted-foreground">
-					{hiddenExcludedAccountsCount}{" "}
-					{hiddenExcludedAccountsCount === 1
-						? "conta não considerada oculta"
-						: "contas não consideradas ocultas"}
-				</p>
-			) : null}
-
 			<div>
 				{activeAccounts.length === 0 ? (
-					<div className="-mt-10">
-						<WidgetEmptyState
-							icon={
-								<RiBarChartBoxLine className="size-6 text-muted-foreground" />
-							}
-							title="Você ainda não adicionou nenhuma conta"
-							description="Cadastre suas contas bancárias para acompanhar os saldos e movimentações."
-						/>
-					</div>
+					<WidgetEmptyState
+						icon={
+							<RiBarChartBoxLine className="size-6 text-muted-foreground" />
+						}
+						title="Você ainda não adicionou nenhuma conta"
+						description="Cadastre suas contas bancárias para acompanhar os saldos e movimentações."
+					/>
 				) : displayedAccounts.length === 0 ? (
-					<div className="-mt-10">
-						<WidgetEmptyState
-							icon={<RiEyeOffLine className="size-6 text-muted-foreground" />}
-							title="As contas não consideradas estão ocultas"
-							description="Use o botão no topo do widget para mostrá-las novamente."
-						/>
-					</div>
+					<WidgetEmptyState
+						icon={<RiEyeOffLine className="size-6 text-muted-foreground" />}
+						title="As contas não consideradas estão ocultas"
+						description="Use o botão no topo do widget para mostrá-las novamente."
+					/>
 				) : (
 					<ul className="flex flex-col">
 						{displayedAccounts.map((account, index) => {
 							const logoSrc = resolveLogoSrc(account.logo);
 
 							return (
-								<div
+								<li
 									key={account.id}
-									className="flex items-center justify-between transition-all duration-300 py-1.5 "
+									className="flex items-center justify-between py-1.5 transition-all duration-300"
 								>
 									<div className="flex min-w-0 flex-1 items-center gap-2 py-1">
-										<div className="relative size-9.5 overflow-hidden">
+										<div className="relative flex size-9.5 shrink-0 items-center justify-center overflow-hidden rounded-full bg-primary/10">
 											{logoSrc ? (
 												<Image
 													src={logoSrc}
@@ -160,7 +154,11 @@ export function MyAccountsWidget({
 													className="object-contain rounded-full"
 													priority={index === 0}
 												/>
-											) : null}
+											) : (
+												<span className="text-xs font-medium text-primary">
+													{buildInitials(account.name)}
+												</span>
+											)}
 										</div>
 
 										<div className="min-w-0">
@@ -172,44 +170,41 @@ export function MyAccountsWidget({
 												className="inline-flex max-w-full items-center gap-1 text-sm font-medium text-foreground underline-offset-2 hover:text-primary hover:underline"
 											>
 												<span className="truncate">{account.name}</span>
-												<RiExternalLinkLine
-													className="size-3 shrink-0 text-muted-foreground"
-													aria-hidden
-												/>
 											</Link>
 
-											{account.excludeFromBalance ? (
-												<Tooltip>
-													<TooltipTrigger asChild>
-														<span className="inline-flex cursor-help ml-2">
-															<Badge className="font-normal" variant="info">
-																Não considerada
-															</Badge>
-														</span>
-													</TooltipTrigger>
-													<TooltipContent side="top" className="max-w-xs">
-														<p className="text-xs">
-															Esta conta aparece na lista, mas não entra no
-															cálculo do saldo total porque está marcada para
-															desconsiderar do saldo total.
-														</p>
-													</TooltipContent>
-												</Tooltip>
-											) : null}
-
 											<div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
 												<span className="truncate">{account.accountType}</span>
+												{account.excludeFromBalance ? (
+													<Tooltip>
+														<TooltipTrigger asChild>
+															<span className="inline-flex cursor-help">
+																<Badge className="font-normal" variant="info">
+																	Não considerada
+																</Badge>
+															</span>
+														</TooltipTrigger>
+														<TooltipContent side="top" className="max-w-xs">
+															<p className="text-xs">
+																Esta conta aparece na lista, mas não entra no
+																cálculo do saldo total.
+															</p>
+														</TooltipContent>
+													</Tooltip>
+												) : null}
 											</div>
 										</div>
 									</div>
 
 									<div className="flex flex-col items-end gap-0.5 text-right">
 										<MoneyValues
-											className="font-medium"
+											className={cn(
+												"font-medium",
+												account.balance < 0 && "text-destructive",
+											)}
 											amount={account.balance}
 										/>
 									</div>
-								</div>
+								</li>
 							);
 						})}
 					</ul>
@@ -217,8 +212,14 @@ export function MyAccountsWidget({
 			</div>
 
 			{remainingCount > 0 ? (
-				<CardFooter className="border-border/60 border-t pt-4 text-sm text-muted-foreground">
-					+{remainingCount} contas não exibidas
+				<CardFooter className="border-border/60 border-t pt-4">
+					<Link
+						href="/accounts"
+						className="inline-flex items-center gap-1 text-sm font-medium text-muted-foreground transition-colors hover:text-primary"
+					>
+						+{remainingCount} contas não exibidas
+						<RiArrowRightLine className="size-4" aria-hidden />
+					</Link>
 				</CardFooter>
 			) : null}
 		</>

src/features/dashboard/components/widgets/payers-widget.tsx

@@ -1,10 +1,6 @@
 "use client";
 
-import {
-	RiExternalLinkLine,
-	RiGroupLine,
-	RiVerifiedBadgeFill,
-} from "@remixicon/react";
+import { RiGroupLine, RiVerifiedBadgeFill } from "@remixicon/react";
 import Link from "next/link";
 import { PercentageChangeIndicator } from "@/features/dashboard/components/percentage-change-indicator";
 import type { DashboardPagador } from "@/features/dashboard/lib/payers-queries";
@@ -14,6 +10,11 @@ import {
 	AvatarFallback,
 	AvatarImage,
 } from "@/shared/components/ui/avatar";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipTrigger,
+} from "@/shared/components/ui/tooltip";
 import { WidgetEmptyState } from "@/shared/components/widgets/widget-empty-state";
 import { getAvatarSrc } from "@/shared/lib/payers/utils";
 import { buildInitials } from "@/shared/utils/initials";
@@ -33,7 +34,7 @@ export function PayersWidget({ payers }: PayersWidgetProps) {
 				/>
 			) : (
 				<div className="flex flex-col">
-					{payers.map((payer) => {
+					{payers.map((payer, index) => {
 						const initials = buildInitials(payer.name);
 						const hasValidPercentageChange =
 							typeof payer.percentageChange === "number" &&
@@ -45,8 +46,11 @@ export function PayersWidget({ payers }: PayersWidgetProps) {
 						return (
 							<div
 								key={payer.id}
-								className="flex items-center justify-between transition-all duration-300 py-1.5"
+								className="flex items-center justify-between gap-2 transition-all duration-300 py-1.5"
 							>
+								<span className="w-3 shrink-0 text-left text-xs font-medium text-muted-foreground">
+									{index + 1}
+								</span>
 								<div className="flex min-w-0 flex-1 items-center gap-2 py-1">
 									<Avatar className="size-9.5 shrink-0">
 										<AvatarImage
@@ -64,18 +68,24 @@ export function PayersWidget({ payers }: PayersWidgetProps) {
 										>
 											<span className="truncate font-medium">{payer.name}</span>
 											{payer.isAdmin && (
-												<RiVerifiedBadgeFill
-													className="size-4 shrink-0 text-blue-500"
-													aria-hidden
-												/>
+												<Tooltip>
+													<TooltipTrigger asChild>
+														<span className="inline-flex shrink-0">
+															<RiVerifiedBadgeFill
+																className="size-4 text-blue-500"
+																aria-hidden
+															/>
+															<span className="sr-only">Pessoa principal</span>
+														</span>
+													</TooltipTrigger>
+													<TooltipContent side="top">
+														Pessoa principal
+													</TooltipContent>
+												</Tooltip>
 											)}
-											<RiExternalLinkLine
-												className="size-3 shrink-0 text-muted-foreground"
-												aria-hidden
-											/>
 										</Link>
 										<p className="truncate text-xs text-muted-foreground">
-											{payer.email ?? "Sem email cadastrado"}
+											Despesas no período
 										</p>
 									</div>
 								</div>
@@ -85,7 +95,12 @@ export function PayersWidget({ payers }: PayersWidgetProps) {
 										className="font-medium"
 										amount={payer.totalExpenses}
 									/>
-									<PercentageChangeIndicator value={percentageChange} />
+									<div className="flex items-center gap-1 text-xs text-muted-foreground">
+										<PercentageChangeIndicator value={percentageChange} />
+										{percentageChange !== null ? (
+											<span>vs. mês ant.</span>
+										) : null}
+									</div>
 								</div>
 							</div>
 						);

src/features/dashboard/components/widgets/purchases-by-category-widget.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { RiArrowDownSFill, RiStore3Line } from "@remixicon/react";
+import { RiFileList2Line, RiStore3Line } from "@remixicon/react";
 import { useEffect, useMemo, useRef, useState } from "react";
 import type { PurchasesByCategoryData } from "@/features/dashboard/categories/purchases-by-category-queries";
 import { EstablishmentLogo } from "@/shared/components/entity-avatar";
@@ -8,7 +8,9 @@ import MoneyValues from "@/shared/components/money-values";
 import {
 	Select,
 	SelectContent,
+	SelectGroup,
 	SelectItem,
+	SelectLabel,
 	SelectTrigger,
 	SelectValue,
 } from "@/shared/components/ui/select";
@@ -129,18 +131,18 @@ export function PurchasesByCategoryWidget({
 					</SelectTrigger>
 					<SelectContent>
 						{Object.entries(categoriesByType).map(([type, categories]) => (
-							<div key={type}>
-								<div className="px-2 py-1.5 text-xs font-medium text-muted-foreground">
+							<SelectGroup key={type}>
+								<SelectLabel className="font-medium">
 									{CATEGORY_TYPE_LABEL[
 										type as keyof typeof CATEGORY_TYPE_LABEL
 									] ?? type}
-								</div>
+								</SelectLabel>
 								{categories.map((category) => (
 									<SelectItem key={category.id} value={category.id}>
 										{category.name}
 									</SelectItem>
 								))}
-							</div>
+							</SelectGroup>
 						))}
 					</SelectContent>
 				</Select>
@@ -148,12 +150,12 @@ export function PurchasesByCategoryWidget({
 
 			{currentTransactions.length === 0 ? (
 				<WidgetEmptyState
-					icon={<RiArrowDownSFill className="size-6 text-muted-foreground" />}
-					title="Nenhuma compra encontrada"
+					icon={<RiFileList2Line className="size-6 text-muted-foreground" />}
+					title="Nenhum lançamento encontrado"
 					description={
 						selectedCategory
 							? `Não há lançamentos na categoria "${selectedCategory.name}".`
-							: "Selecione uma categoria para visualizar as compras."
+							: "Selecione uma categoria para visualizar os lançamentos."
 					}
 				/>
 			) : (
@@ -162,9 +164,9 @@ export function PurchasesByCategoryWidget({
 						return (
 							<div
 								key={transaction.id}
-								className="flex items-center justify-between gap-3 transition-all duration-300 py-2"
+								className="flex items-center justify-between gap-2 transition-all duration-300 py-1.5"
 							>
-								<div className="flex min-w-0 flex-1 items-center gap-3">
+								<div className="flex min-w-0 flex-1 items-center gap-2">
 									<EstablishmentLogo name={transaction.name} size={37} />
 
 									<div className="min-w-0">

src/features/dashboard/components/widgets/recurring-expenses-widget.tsx

@@ -3,6 +3,7 @@ import type { RecurringExpensesData } from "@/features/dashboard/expenses/recurr
 import { EstablishmentLogo } from "@/shared/components/entity-avatar";
 import MoneyValues from "@/shared/components/money-values";
 import { WidgetEmptyState } from "@/shared/components/widgets/widget-empty-state";
+import { getPaymentMethodIcon } from "@/shared/utils/icons";
 
 type RecurringExpensesWidgetProps = {
 	data: RecurringExpensesData;
@@ -10,10 +11,10 @@ type RecurringExpensesWidgetProps = {
 
 const formatOccurrences = (value: number | null) => {
 	if (!value) {
-		return "Recorrência contínua";
+		return "Repete mensalmente";
 	}
 
-	return `${value} recorrências mensais`;
+	return `Repete por ${value} ${value === 1 ? "mês" : "meses"}`;
 };
 
 export function RecurringExpensesWidget({
@@ -23,7 +24,7 @@ export function RecurringExpensesWidget({
 		return (
 			<WidgetEmptyState
 				icon={<RiRefreshLine className="size-6 text-muted-foreground" />}
-				title="Nenhuma despesa recorrente"
+				title="Nenhuma despesa recorrente encontrada"
 				description="Lançamentos recorrentes aparecerão aqui conforme forem registrados."
 			/>
 		);
@@ -31,33 +32,39 @@ export function RecurringExpensesWidget({
 
 	return (
 		<div className="flex flex-col">
-			{data.expenses.map((expense) => {
-				return (
-					<div
-						key={expense.id}
-						className="flex items-center gap-2 transition-all duration-300 py-1.5"
-					>
-						<EstablishmentLogo name={expense.name} size={37} />
+			{[...data.expenses]
+				.sort((a, b) => b.amount - a.amount)
+				.map((expense) => {
+					return (
+						<div
+							key={expense.id}
+							className="flex items-center gap-2 transition-all duration-300 py-1.5"
+						>
+							<EstablishmentLogo name={expense.name} size={37} />
 
-						<div className="min-w-0 flex-1">
-							<div className="flex items-center justify-between">
-								<p className="truncate text-foreground text-sm font-medium">
-									{expense.name}
-								</p>
+							<div className="min-w-0 flex-1">
+								<div className="flex items-center justify-between">
+									<p className="truncate text-foreground text-sm font-medium">
+										{expense.name}
+									</p>
 
-								<MoneyValues className="font-medium" amount={expense.amount} />
-							</div>
+									<MoneyValues
+										className="font-medium"
+										amount={expense.amount}
+									/>
+								</div>
 
-							<div className="flex items-center justify-between text-xs text-muted-foreground">
-								<span className="inline-flex items-center gap-1">
-									{expense.paymentMethod}
-								</span>
-								<span>{formatOccurrences(expense.recurrenceCount)}</span>
+								<div className="flex items-center justify-between text-xs text-muted-foreground">
+									<span className="inline-flex items-center gap-1 [&_svg]:size-3.5">
+										{getPaymentMethodIcon(expense.paymentMethod)}
+										{expense.paymentMethod}
+									</span>
+									<span>{formatOccurrences(expense.recurrenceCount)}</span>
+								</div>
 							</div>
 						</div>
-					</div>
-				);
-			})}
+					);
+				})}
 		</div>
 	);
 }

src/features/dashboard/components/widgets/spending-overview-widget.tsx

@@ -15,13 +15,11 @@ import { TopExpensesWidget } from "./top-expenses-widget";
 
 type SpendingOverviewWidgetProps = {
 	topExpensesAll: TopExpensesData;
-	topExpensesCardOnly: TopExpensesData;
 	topEstablishmentsData: TopEstablishmentsData;
 };
 
 export function SpendingOverviewWidget({
 	topExpensesAll,
-	topExpensesCardOnly,
 	topEstablishmentsData,
 }: SpendingOverviewWidgetProps) {
 	const [activeTab, setActiveTab] = useState<"expenses" | "establishments">(
@@ -54,10 +52,7 @@ export function SpendingOverviewWidget({
 			</TabsList>
 
 			<TabsContent value="expenses" className="mt-2">
-				<TopExpensesWidget
-					allExpenses={topExpensesAll}
-					cardOnlyExpenses={topExpensesCardOnly}
-				/>
+				<TopExpensesWidget data={topExpensesAll} />
 			</TabsContent>
 
 			<TabsContent value="establishments" className="mt-2">

src/features/dashboard/components/widgets/top-establishments-widget.tsx

@@ -28,13 +28,16 @@ export function TopEstablishmentsWidget({
 				/>
 			) : (
 				<div className="flex flex-col">
-					{data.establishments.map((establishment) => {
+					{data.establishments.map((establishment, index) => {
 						return (
 							<div
 								key={establishment.id}
-								className="flex items-center justify-between gap-3 transition-all duration-300 py-2"
+								className="flex items-center justify-between gap-2 transition-all duration-300 py-1.5"
 							>
-								<div className="flex min-w-0 flex-1 items-center gap-3">
+								<span className="w-3 shrink-0 text-left text-xs font-medium text-muted-foreground">
+									{index + 1}
+								</span>
+								<div className="flex min-w-0 flex-1 items-center gap-2">
 									<EstablishmentLogo name={establishment.name} size={37} />
 
 									<div className="min-w-0">
@@ -42,7 +45,8 @@ export function TopEstablishmentsWidget({
 											{establishment.name}
 										</p>
 										<p className="text-xs text-muted-foreground">
-											{formatOccurrencesLabel(establishment.occurrences)}
+											{formatOccurrencesLabel(establishment.occurrences)} ·
+											total acumulado
 										</p>
 									</div>
 								</div>

src/features/dashboard/components/widgets/top-expenses-widget.tsx

@@ -1,20 +1,18 @@
 "use client";
 
 import { RiArrowUpDoubleLine } from "@remixicon/react";
-import { useMemo, useState } from "react";
+import { useMemo } from "react";
 import type {
 	TopExpense,
 	TopExpensesData,
 } from "@/features/dashboard/expenses/top-expenses-queries";
 import { EstablishmentLogo } from "@/shared/components/entity-avatar";
 import MoneyValues from "@/shared/components/money-values";
-import { Switch } from "@/shared/components/ui/switch";
 import { WidgetEmptyState } from "@/shared/components/widgets/widget-empty-state";
 import { formatTransactionDate } from "@/shared/utils/date";
 
 type TopExpensesWidgetProps = {
-	allExpenses: TopExpensesData;
-	cardOnlyExpenses: TopExpensesData;
+	data: TopExpensesData;
 };
 
 const shouldIncludeExpense = (expense: TopExpense) => {
@@ -31,75 +29,34 @@ const shouldIncludeExpense = (expense: TopExpense) => {
 	return true;
 };
 
-const isCardExpense = (expense: TopExpense) =>
-	expense.paymentMethod?.toLowerCase().includes("cartão") ?? false;
-
-export function TopExpensesWidget({
-	allExpenses,
-	cardOnlyExpenses,
-}: TopExpensesWidgetProps) {
-	const [cardOnly, setCardOnly] = useState(false);
-	const normalizedAllExpenses = useMemo(() => {
-		return allExpenses.expenses.filter(shouldIncludeExpense);
-	}, [allExpenses]);
-
-	const normalizedCardOnlyExpenses = useMemo(() => {
-		const merged = [...cardOnlyExpenses.expenses, ...normalizedAllExpenses];
-		const seen = new Set<string>();
-
-		return merged.filter((expense) => {
-			if (seen.has(expense.id)) {
-				return false;
-			}
-
-			if (!isCardExpense(expense) || !shouldIncludeExpense(expense)) {
-				return false;
-			}
-
-			seen.add(expense.id);
-			return true;
-		});
-	}, [cardOnlyExpenses, normalizedAllExpenses]);
-
-	const data = cardOnly
-		? { expenses: normalizedCardOnlyExpenses }
-		: { expenses: normalizedAllExpenses };
+export function TopExpensesWidget({ data }: TopExpensesWidgetProps) {
+	const expenses = useMemo(
+		() => data.expenses.filter(shouldIncludeExpense),
+		[data.expenses],
+	);
 
 	return (
-		<div className="flex flex-col gap-4 px-0">
-			<div className="flex items-center justify-between gap-3">
-				<label
-					htmlFor="card-only-toggle"
-					className="text-sm text-muted-foreground"
-				>
-					Apenas cartões
-				</label>
-				<Switch
-					id="card-only-toggle"
-					checked={cardOnly}
-					onCheckedChange={setCardOnly}
+		<div className="flex flex-col px-0">
+			{expenses.length === 0 ? (
+				<WidgetEmptyState
+					icon={
+						<RiArrowUpDoubleLine className="size-6 text-muted-foreground" />
+					}
+					title="Nenhuma despesa encontrada"
+					description="Quando houver despesas registradas, elas aparecerão aqui."
 				/>
-			</div>
-
-			{data.expenses.length === 0 ? (
-				<div className="-mt-10">
-					<WidgetEmptyState
-						icon={
-							<RiArrowUpDoubleLine className="size-6 text-muted-foreground" />
-						}
-						title="Nenhuma despesa encontrada"
-						description="Quando houver despesas registradas, elas aparecerão aqui."
-					/>
-				</div>
 			) : (
 				<div className="flex flex-col">
-					{data.expenses.map((expense) => {
+					{expenses.map((expense, index) => {
 						return (
 							<div
 								key={expense.id}
-								className="flex items-center justify-between gap-3 transition-all duration-300 py-2"
+								className="flex items-center justify-between gap-2 transition-all duration-300 py-1.5"
 							>
-								<div className="flex min-w-0 flex-1 items-center gap-3">
+								<span className="w-3 shrink-0 text-left text-xs font-medium text-muted-foreground">
+									{index + 1}
+								</span>
+								<div className="flex min-w-0 flex-1 items-center gap-2">
 									<EstablishmentLogo name={expense.name} size={37} />
 
 									<div className="min-w-0">

src/features/dashboard/components/widgets/widget-settings-dialog.tsx

@@ -21,6 +21,7 @@ type WidgetSettingsDialogProps = {
 	onToggleWidget: (widgetId: string) => void;
 	onReset: () => void;
 	triggerClassName?: string;
+	triggerLabel?: string;
 };
 
 export function WidgetSettingsDialog({
@@ -28,6 +29,7 @@ export function WidgetSettingsDialog({
 	onToggleWidget,
 	onReset,
 	triggerClassName,
+	triggerLabel = "Widgets",
 }: WidgetSettingsDialogProps) {
 	const [open, setOpen] = useState(false);
 
@@ -40,12 +42,12 @@ export function WidgetSettingsDialog({
 					className={cn("gap-2", triggerClassName)}
 				>
 					<RiSettings4Line className="size-4" />
-					Widgets
+					{triggerLabel}
 				</Button>
 			</DialogTrigger>
 			<DialogContent className="sm:max-w-md">
 				<DialogHeader>
-					<DialogTitle>Configurar Widgets</DialogTitle>
+					<DialogTitle>Configurar widgets</DialogTitle>
 					<DialogDescription>
 						Escolha quais widgets deseja exibir no seu dashboard.
 					</DialogDescription>
@@ -73,6 +75,7 @@ export function WidgetSettingsDialog({
 										</div>
 									</div>
 									<Switch
+										aria-label={`${isVisible ? "Ocultar" : "Exibir"} widget ${widget.title}`}
 										checked={isVisible}
 										onCheckedChange={() => onToggleWidget(widget.id)}
 									/>
@@ -90,7 +93,7 @@ export function WidgetSettingsDialog({
 						className="gap-2"
 					>
 						<RiRefreshLine className="size-4" />
-						Restaurar Padrão
+						Restaurar padrão
 					</Button>
 				</DialogFooter>
 			</DialogContent>

src/features/dashboard/expenses/installment-analysis-queries.ts

@@ -51,6 +51,9 @@ export type InstallmentGroup = {
 	cartaoDueDay: string | null;
 	cartaoLogo: string | null;
 	totalInstallments: number;
+	trackedStartInstallment: number;
+	trackedInstallments: number;
+	untrackedInstallments: number;
 	paidInstallments: number;
 	pendingInstallments: InstallmentDetail[];
 	totalPendingAmount: number;
@@ -92,7 +95,10 @@ export async function fetchInstallmentAnalysis(
 			cartaoLogo: cards.logo,
 		})
 		.from(transactions)
-		.leftJoin(cards, eq(transactions.cardId, cards.id))
+		.leftJoin(
+			cards,
+			and(eq(transactions.cardId, cards.id), eq(cards.userId, userId)),
+		)
 		.where(
 			and(
 				eq(transactions.userId, userId),
@@ -150,6 +156,12 @@ export async function fetchInstallmentAnalysis(
 				cartaoDueDay: row.cartaoDueDay,
 				cartaoLogo: row.cartaoLogo,
 				totalInstallments: row.installmentCount ?? 0,
+				trackedStartInstallment: installmentDetail.currentInstallment,
+				trackedInstallments: 1,
+				untrackedInstallments: Math.max(
+					0,
+					installmentDetail.currentInstallment - 1,
+				),
 				paidInstallments: 0,
 				pendingInstallments: [installmentDetail],
 				totalPendingAmount: amount,
@@ -165,7 +177,13 @@ export async function fetchInstallmentAnalysis(
 			const paidCount = group.pendingInstallments.filter(
 				(i) => i.isSettled,
 			).length;
+			const trackedStartInstallment = Math.min(
+				...group.pendingInstallments.map((i) => i.currentInstallment),
+			);
 			group.paidInstallments = paidCount;
+			group.trackedStartInstallment = trackedStartInstallment;
+			group.trackedInstallments = group.pendingInstallments.length;
+			group.untrackedInstallments = Math.max(0, trackedStartInstallment - 1);
 			return group;
 		})
 		// Filtrar apenas séries que têm pelo menos uma parcela em aberto (não paga)
@@ -174,6 +192,22 @@ export async function fetchInstallmentAnalysis(
 				(i) => !i.isSettled,
 			);
 			return hasUnpaidInstallments;
+		})
+		.sort((a, b) => {
+			const progressA =
+				a.trackedInstallments > 0
+					? a.paidInstallments / a.trackedInstallments
+					: 0;
+			const progressB =
+				b.trackedInstallments > 0
+					? b.paidInstallments / b.trackedInstallments
+					: 0;
+
+			if (progressA !== progressB) {
+				return progressB - progressA;
+			}
+
+			return a.firstPurchaseDate.getTime() - b.firstPurchaseDate.getTime();
 		});
 
 	// Calcular totais

src/features/dashboard/expenses/installment-expenses-helpers.ts

@@ -1,12 +1,11 @@
 import type { InstallmentExpense } from "@/features/dashboard/expenses/installment-expenses-queries";
-import {
-	calculateLastInstallmentDate,
-	formatLastInstallmentDate,
-} from "@/shared/lib/installments/utils";
+import { calculateLastInstallmentDate } from "@/shared/lib/installments/utils";
+import { capitalize } from "@/shared/utils/string";
 
 type InstallmentExpenseDisplay = {
 	compactLabel: string | null;
 	isLast: boolean;
+	remainingLabel: "Próximas" | "Em aberto";
 	remainingInstallments: number;
 	remainingAmount: number;
 	endDate: string | null;
@@ -18,7 +17,7 @@ const buildInstallmentCompactLabel = (
 	installmentCount: number | null,
 ) => {
 	if (currentInstallment && installmentCount) {
-		return `${currentInstallment} de ${installmentCount}`;
+		return `Parcela ${currentInstallment} de ${installmentCount}`;
 	}
 
 	return null;
@@ -38,21 +37,30 @@ const isInstallmentLast = (
 const calculateInstallmentRemainingCount = (
 	currentInstallment: number | null,
 	installmentCount: number | null,
+	isSettled: boolean | null,
 ) => {
 	if (!currentInstallment || !installmentCount) {
 		return 0;
 	}
 
-	return Math.max(0, installmentCount - currentInstallment);
+	const includeCurrentInstallment = isSettled !== true;
+	const currentOffset = includeCurrentInstallment ? 1 : 0;
+
+	return Math.max(0, installmentCount - currentInstallment + currentOffset);
 };
 
 const calculateInstallmentRemainingAmount = (
 	amount: number,
 	currentInstallment: number | null,
 	installmentCount: number | null,
+	isSettled: boolean | null,
 ) =>
 	amount *
-	calculateInstallmentRemainingCount(currentInstallment, installmentCount);
+	calculateInstallmentRemainingCount(
+		currentInstallment,
+		installmentCount,
+		isSettled,
+	);
 
 const formatInstallmentEndDate = (
 	period: string,
@@ -69,7 +77,12 @@ const formatInstallmentEndDate = (
 		installmentCount,
 	);
 
-	return formatLastInstallmentDate(lastDate);
+	const month = new Intl.DateTimeFormat("pt-BR", {
+		month: "short",
+		timeZone: "UTC",
+	}).format(lastDate);
+
+	return `${capitalize(month)} de ${lastDate.getFullYear()}`;
 };
 
 const buildInstallmentProgress = (
@@ -89,7 +102,8 @@ const buildInstallmentProgress = (
 export const buildInstallmentExpenseDisplay = (
 	expense: InstallmentExpense,
 ): InstallmentExpenseDisplay => {
-	const { amount, currentInstallment, installmentCount, period } = expense;
+	const { amount, currentInstallment, installmentCount, isSettled, period } =
+		expense;
 
 	return {
 		compactLabel: buildInstallmentCompactLabel(
@@ -97,14 +111,17 @@ export const buildInstallmentExpenseDisplay = (
 			installmentCount,
 		),
 		isLast: isInstallmentLast(currentInstallment, installmentCount),
+		remainingLabel: isSettled === true ? "Próximas" : "Em aberto",
 		remainingInstallments: calculateInstallmentRemainingCount(
 			currentInstallment,
 			installmentCount,
+			isSettled,
 		),
 		remainingAmount: calculateInstallmentRemainingAmount(
 			amount,
 			currentInstallment,
 			installmentCount,
+			isSettled,
 		),
 		endDate: formatInstallmentEndDate(
 			period,

src/features/dashboard/expenses/installment-expenses-queries.ts

@@ -8,6 +8,7 @@ export type InstallmentExpense = {
 	dueDate: Date | null;
 	purchaseDate: Date;
 	period: string;
+	isSettled: boolean | null;
 };
 
 export type InstallmentExpensesData = {

src/features/dashboard/fetch-dashboard-data.ts

@@ -65,7 +65,6 @@ async function fetchDashboardDataInternal(userId: string, period: string) {
 		installmentExpensesData: currentPeriodOverview.installmentExpensesData,
 		topEstablishmentsData: currentPeriodOverview.topEstablishmentsData,
 		topExpensesAll: currentPeriodOverview.topExpensesAll,
-		topExpensesCardOnly: currentPeriodOverview.topExpensesCardOnly,
 		purchasesByCategoryData: currentPeriodOverview.purchasesByCategoryData,
 		incomeByCategoryData: categoryOverview.incomeByCategoryData,
 		expensesByCategoryData: categoryOverview.expensesByCategoryData,

src/features/dashboard/invoices/invoices-helpers.ts

@@ -4,7 +4,11 @@ import {
 	INVOICE_PAYMENT_STATUS,
 	type InvoicePaymentStatus,
 } from "@/shared/lib/invoices";
-import { getBusinessDateString } from "@/shared/utils/date";
+import {
+	getBusinessDateString,
+	parseUtcDateString,
+	toDateOnlyString,
+} from "@/shared/utils/date";
 import {
 	buildDueDateInfoFromPeriodDay,
 	buildRelativeDueDateInfoFromPeriodDay,
@@ -80,6 +84,29 @@ export const formatInvoiceWidgetPaymentDate = (
 	};
 };
 
+export const formatInvoiceWidgetOverdueLabel = (
+	value: string | null,
+): string | null => {
+	const dueDateValue = toDateOnlyString(value);
+	const todayValue = getBusinessDateString();
+	if (!dueDateValue || dueDateValue >= todayValue) {
+		return null;
+	}
+
+	const dueDate = parseUtcDateString(dueDateValue);
+	const today = parseUtcDateString(todayValue);
+	if (!dueDate || !today) {
+		return null;
+	}
+
+	const overdueDays = Math.round(
+		(today.getTime() - dueDate.getTime()) / (24 * 60 * 60 * 1000),
+	);
+	return overdueDays === 1
+		? "Atrasada · venceu ontem"
+		: `Atrasada · venceu há ${overdueDays} dias`;
+};
+
 export const getCurrentDateString = () => getBusinessDateString();
 
 const formatInvoiceSharePercentage = (value: number) => {