chore: prepara versão 2.7.8

feat(dashboard): vincula tendências às categorias
feat(anexos): adiciona filtro por pessoa
2026-07-09 03:16:01 +00:00 · 2026-06-21 11:54:27 -03:00 · 2026-06-21 11:54:19 -03:00 · 2026-06-21 11:54:15 -03:00 · 2026-06-21 11:54:05 -03:00 · 2026-06-20 14:57:18 -03:00
87 changed files with 6748 additions and 1778 deletions
--- a/.env.example
+++ b/.env.example
@@ -17,8 +17,15 @@ 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
+
+# Origins adicionais confiáveis para o Better Auth.
+# Útil para Cloudflare Tunnel, reverse proxy e URLs diferentes de BETTER_AUTH_URL.
+# Separe múltiplas origins por vírgula.
+# Exemplo: https://*.trycloudflare.com,https://openmonetis.seudominio.com
+BETTER_AUTH_TRUSTED_ORIGINS=
 # 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
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,74 @@ 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.8] - 2026-06-21
+
+Esta versão deixa documentos e comprovantes mais fáceis de guardar e encontrar sem tirar o foco da rotina financeira. Agora é possível manter arquivos junto às notas, consultar a galeria por pessoa com identificação visual e abrir uma categoria diretamente das tendências do dashboard, sempre preservando o contexto do período selecionado.
+
+### Adicionado
+- Anotações: itens do tipo `Nota` agora aceitam anexos PDF, JPEG, PNG e WebP na criação e na edição, com consulta e download nos detalhes e respeito ao limite configurado pelo usuário.
+- Anexos: a galeria agora oferece filtro por pessoa, incluindo a pessoa principal, pessoas específicas e uma visão consolidada de todas as pessoas.
+
+### Alterado
+- Anexos: os cards da galeria agora identificam a pessoa vinculada ao lançamento e o filtro exibe os respectivos avatares, preservando o contexto quando vários responsáveis são exibidos.
+- Dashboard: os nomes no widget `Tendências de categorias` agora levam aos detalhes da categoria mantendo o período selecionado.
+
+## [2.7.7] - 2026-06-20
+
+Esta versão faz ajustes pontuais de leitura nos resumos financeiros e no dashboard, reforçando a identidade visual de cartões e contas e deixando as listas dos widgets mais consistentes sem alterar a estrutura de navegação das páginas.
+
+### Alterado
+- Cartões e contas: os cabeçalhos dos resumos agora destacam melhor o logo, o nome da entidade e o período exibido.
+- Dashboard: as listas dos widgets agora compartilham padrões de altura, espaçamento, alinhamento e truncamento para melhorar a leitura de valores, status e metadados.
+
+## [2.7.6] - 2026-06-20
+
+Esta versão melhora dois fluxos importantes: a importação de planilhas fica mais esperta ao reconhecer categorias já informadas no arquivo, e lançamentos avulsos podem ser reorganizados como parcelamentos ou recorrências sem precisar recriá-los manualmente.
+
+As funcionalidades desta versão foram desenvolvidas originalmente por Yuri Argolo (`yurnasg`) e adaptadas para integração ao projeto principal.
+
+### Adicionado
+- Importação: planilhas XLS/XLSX agora aceitam a coluna `Categoria` no template e tentam mapear automaticamente o valor para uma categoria existente compatível com o tipo do lançamento.
+- Lançamentos: lançamentos à vista agora podem ser convertidos em recorrentes diretamente pelo menu de ações.
+- Lançamentos: lançamentos à vista de cartão de crédito agora podem ser convertidos em uma série parcelada informando o total de parcelas.
+
+### Alterado
+- Lançamentos: conversões para séries respeitam faturas pagas e limite disponível do cartão antes de criar novos movimentos.
+
+## [2.7.5] - 2026-06-13
+
+Esta versão faz um polimento pontual no dashboard, deixando os widgets mais explicativos, consistentes e confiáveis quando há listas maiores ou informações complementares para revisar.
+
+### Alterado
+- Dashboard: os indicadores percentuais de faturas por pessoa, despesas por categoria, receitas por categoria e tendências de categorias agora deixam explícito que a comparação é contra o mês anterior.
+- Dashboard: pequenos ajustes visuais em widgets melhoram espaçamento, bordas e leitura de itens financeiros.
+
+### Corrigido
+- Dashboard: o widget `Lançamentos por categoria` agora recalcula corretamente o overflow quando a lista muda e volta a exibir o botão `Expandir` em listagens grandes.
+- Relatórios: em `/reports/installment-analysis`, os cards de parcelamentos agora exibem o ícone de observação ao lado do nome do lançamento quando há anotação cadastrada.
+
+## [2.7.4] - 2026-06-09
+
+Esta versão corrige o fluxo de revisão de lançamentos compartilhados para que o acesso somente leitura proteja os dados originais sem impedir que a pessoa copie movimentos para a própria conta.
+
+### Corrigido
+- Pessoas: lançamentos de uma pessoa compartilhada em modo somente leitura agora podem ser selecionados e importados para a conta do usuário logado, tanto individualmente quanto em lote, mantendo edição e remoção bloqueadas no lançamento original.
+
+## [2.7.3] - 2026-06-05
+
+Esta versão melhora pequenos pontos de leitura e configuração para o uso diário e self-hosted. As faturas pagas ficam mais fáceis de identificar na lista de cartões, a configuração de origins confiáveis do Better Auth passa a ficar documentada para Docker e túneis, o dashboard corrige a leitura de tempo dos pré-lançamentos e as dependências seguem atualizadas sem quebrar o build da imagem.
+
+### Adicionado
+- Cartões: a lista de cartões agora exibe a etiqueta `Paga` ao lado do valor da fatura atual quando ela já foi quitada.
+- Self-hosting: adicionada a variável `BETTER_AUTH_TRUSTED_ORIGINS` ao `.env.example`, ao `docker-compose.yml` e ao README para permitir origins adicionais confiáveis em cenários com Cloudflare Tunnel, reverse proxy ou URLs diferentes de `BETTER_AUTH_URL`.
+
+### Alterado
+- Dependências: atualizados Next.js, React, Better Auth, AI SDK, AWS SDK, pdf.js e ferramentas de desenvolvimento usadas no build.
+
+### Corrigido
+- Dashboard: o widget `Pré-lançamentos` agora calcula o rótulo `há X` a partir da chegada do item ao OpenMonetis, evitando deslocamentos causados por timestamps de notificação enviados com timezone incorreto.
+- Anexos: o preview de PDFs foi ajustado para a API atual do `pdfjs-dist`, evitando falha de TypeScript durante o build da imagem Docker.
+
 ## [2.7.2] - 2026-05-31

 Esta versão atualiza as imagens de apresentação do OpenMonetis na landing page e no compartilhamento em redes sociais.
--- a/README.md
+++ b/README.md
@@ -6,9 +6,11 @@
  Projeto pessoal de gestão financeira. Self-hosted, manual e open source.
 </p>

-> **⚠️ Não há versão online hospedada.** Você precisa clonar o repositório e rodar localmente ou no seu próprio servidor.
+> **⚠️ Nota:** o OpenMonetis não está sendo encerrado, mas o desenvolvimento deve reduzir para quase zero daqui em diante. O app já cobre minhas demandas atuais de gerenciamento financeiro, então novas mudanças tendem a ser pontuais: correções, ajustes necessários e pequenas melhorias quando fizerem bastante sentido para meu uso.

-[![Version](https://img.shields.io/badge/version-2.7.2-blue?style=flat-square)](CHANGELOG.md)
+> **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.7.8-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/)
@@ -63,11 +65,11 @@ 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, 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.
+💰 **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 com identificação visual clara da conta e importação de extratos OFX e XLS/XLSX com detecção automática de categoria.

-📊 **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.
+📊 **Dashboard e relatórios** — Widgets personalizáveis com listas consistentes, 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.
+💳 **Faturas de cartão** — Acompanhe faturas por período, controle limites e vencimentos com identificação visual mais clara do cartão.

 🎯 **Orçamentos** — Defina limites por categoria e acompanhe o progresso.

@@ -77,7 +79,7 @@ A ideia é simples: ter um lugar onde consigo ver todas as minhas contas, cartõ

 👥 **Gestão colaborativa** — Pagadores com permissões (admin/viewer), notificações automáticas por e-mail, códigos de compartilhamento.

-📝 **Anotações e tarefas** — Notas de texto, listas com checkboxes, sistema de arquivamento.
+📝 **Anotações e tarefas** — Notas de texto com anexos, listas com checkboxes e sistema de arquivamento.

 📅 **Calendário financeiro** — Visualize todos os lançamentos em um calendário mensal.

@@ -451,6 +453,7 @@ POSTGRES_DB=openmonetis_db
 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
+BETTER_AUTH_TRUSTED_ORIGINS= # origins adicionais confiáveis, separadas por vírgula

 # S3 Server (opcional, necessario para anexos)
 S3_ENDPOINT=
@@ -485,6 +488,19 @@ LOGO_DEV_TOKEN=
 LOGO_DEV_SECRET_KEY=
 ```

+### BETTER_AUTH_TRUSTED_ORIGINS
+
+Use `BETTER_AUTH_TRUSTED_ORIGINS` quando o OpenMonetis for acessado por uma URL diferente de `BETTER_AUTH_URL`, como Cloudflare Tunnel, reverse proxy, domínio local ou subdomínios temporários. Isso evita falhas de login como `Invalid origin` sem precisar alterar a imagem Docker.
+
+Informe apenas origins confiáveis, separadas por vírgula:
+
+```env
+BETTER_AUTH_URL=http://localhost:3000
+BETTER_AUTH_TRUSTED_ORIGINS=https://*.trycloudflare.com,https://openmonetis.seudominio.com
+```
+
+Para Google OAuth e outros callbacks externos, mantenha `BETTER_AUTH_URL` apontando para a URL pública/canônica configurada no provedor.
+
 ### 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:
--- a/biome.json
+++ b/biome.json
@@ -1,5 +1,5 @@
 {
-	"$schema": "https://biomejs.dev/schemas/2.4.15/schema.json",
+	"$schema": "https://biomejs.dev/schemas/2.4.16/schema.json",
 	"vcs": {
 		"enabled": true,
 		"clientKind": "git",
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -36,6 +36,7 @@ services:
      DATABASE_URL: ${DATABASE_URL:-postgresql://openmonetis:openmonetis_dev_password@db:5432/openmonetis_db}
      BETTER_AUTH_SECRET: ${BETTER_AUTH_SECRET:-}
      BETTER_AUTH_URL: ${BETTER_AUTH_URL:-http://localhost:3000}
+      BETTER_AUTH_TRUSTED_ORIGINS: ${BETTER_AUTH_TRUSTED_ORIGINS:-}
    depends_on:
      db:
        condition: service_healthy
--- a/drizzle/0031_lame_cerise.sql
+++ b/drizzle/0031_lame_cerise.sql
@@ -0,0 +1,9 @@
+CREATE TABLE "anotacao_anexos" (
+	"anotacao_id" uuid NOT NULL,
+	"anexo_id" uuid NOT NULL,
+	CONSTRAINT "anotacao_anexos_anotacao_id_anexo_id_pk" PRIMARY KEY("anotacao_id","anexo_id")
+);
+--> statement-breakpoint
+ALTER TABLE "anotacao_anexos" ADD CONSTRAINT "anotacao_anexos_anotacao_id_anotacoes_id_fk" FOREIGN KEY ("anotacao_id") REFERENCES "public"."anotacoes"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+ALTER TABLE "anotacao_anexos" ADD CONSTRAINT "anotacao_anexos_anexo_id_anexos_id_fk" FOREIGN KEY ("anexo_id") REFERENCES "public"."anexos"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+CREATE INDEX "anotacao_anexos_anexo_id_idx" ON "anotacao_anexos" USING btree ("anexo_id");
--- a/drizzle/meta/0031_snapshot.json
+++ b/drizzle/meta/0031_snapshot.json
--- a/drizzle/meta/_journal.json
+++ b/drizzle/meta/_journal.json
@@ -211,6 +211,13 @@
 			"when": 1780150535055,
 			"tag": "0030_complete_umar",
 			"breakpoints": true
+		},
+		{
+			"idx": 31,
+			"version": "7",
+			"when": 1782051007412,
+			"tag": "0031_lame_cerise",
+			"breakpoints": true
 		}
 	]
 }
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "openmonetis",
-	"version": "2.7.2",
+	"version": "2.7.8",
 	"private": true,
 	"packageManager": "pnpm@11.1.3",
 	"scripts": {
@@ -31,13 +31,13 @@
 		"mockup": "tsx scripts/mock-data.ts"
 	},
 	"dependencies": {
-		"@ai-sdk/anthropic": "^3.0.79",
-		"@ai-sdk/google": "^3.0.79",
-		"@ai-sdk/openai": "^3.0.65",
+		"@ai-sdk/anthropic": "^3.0.81",
+		"@ai-sdk/google": "^3.0.80",
+		"@ai-sdk/openai": "^3.0.67",
 		"@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",
+		"@aws-sdk/client-s3": "^3.1059.0",
+		"@aws-sdk/s3-request-presigner": "^3.1059.0",
+		"@better-auth/passkey": "^1.6.14",
 		"@dnd-kit/core": "^6.3.1",
 		"@dnd-kit/sortable": "^10.0.0",
 		"@dnd-kit/utilities": "^3.2.2",
@@ -64,27 +64,27 @@
 		"@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.14",
+		"@tanstack/react-query": "^5.101.0",
 		"@tanstack/react-table": "8.21.3",
-		"@tanstack/react-virtual": "^3.13.26",
-		"ai": "^6.0.191",
-		"better-auth": "1.6.11",
+		"@tanstack/react-virtual": "^3.14.2",
+		"ai": "^6.0.195",
+		"better-auth": "1.6.14",
 		"canvas-confetti": "^1.9.4",
 		"class-variance-authority": "0.7.1",
 		"clsx": "2.1.1",
 		"cmdk": "^1.1.1",
-		"date-fns": "^4.3.0",
+		"date-fns": "^4.4.0",
 		"drizzle-orm": "0.45.2",
 		"exceljs": "^4.4.0",
 		"jspdf": "^4.2.1",
 		"jspdf-autotable": "^5.0.8",
-		"next": "16.2.6",
+		"next": "16.2.7",
 		"next-themes": "0.4.6",
-		"pdfjs-dist": "^5.7.284",
+		"pdfjs-dist": "^6.0.227",
 		"pg": "8.21.0",
-		"react": "19.2.6",
+		"react": "19.2.7",
 		"react-day-picker": "^10.0.1",
-		"react-dom": "19.2.6",
+		"react-dom": "19.2.7",
 		"recharts": "3.8.1",
 		"resend": "^6.12.4",
 		"sonner": "2.0.7",
@@ -95,19 +95,19 @@
 		"zod": "4.4.3"
 	},
 	"devDependencies": {
-		"@biomejs/biome": "2.4.15",
+		"@biomejs/biome": "2.4.16",
 		"@tailwindcss/postcss": "4.3.0",
 		"@types/canvas-confetti": "^1.9.0",
 		"@types/node": "25.9.1",
 		"@types/pg": "^8.20.0",
-		"@types/react": "19.2.15",
+		"@types/react": "19.2.16",
 		"@types/react-dom": "19.2.3",
 		"babel-plugin-react-compiler": "^1.0.0",
 		"dotenv": "^17.4.2",
 		"drizzle-kit": "0.31.10",
-		"knip": "^6.14.2",
+		"knip": "^6.15.0",
 		"tailwindcss": "4.3.0",
-		"tsx": "4.22.3",
+		"tsx": "4.22.4",
 		"typescript": "6.0.3"
 	}
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -7,29 +7,7 @@ allowBuilds:
  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'
+minimumReleaseAge: 0

 overrides:
  defu: 6.1.7
--- a/public/avatars/default_icon.png
+++ b/public/avatars/default_icon.png
--- a/public/images/dashboard-preview-dark.png
+++ b/public/images/dashboard-preview-dark.png
--- a/public/images/dashboard-preview-light.png
+++ b/public/images/dashboard-preview-light.png
--- a/public/images/logo_small.svg
+++ b/public/images/logo_small.svg
@@ -1,3 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200" role="img" aria-label="OpenMonetis">
-  <path fill="#ff7733" d="M 77.66,165.64 L 37.77,141.54 L 63.30,108.72 L 27.13,97.44 L 46.81,50.77 L 77.66,63.08 L 81.91,30.26 L 126.40,29.23 L 126.06,33.85 L 122.87,67.69 L 158.51,50.77 L 178.19,90.26 L 140.96,104.62 L 162.23,127.18 L 132.98,162.56 L 103.19,131.79 Z"/>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" aria-label="OpenMonetis" role="img" viewBox="0 0 200 200"><path fill="#f73" d="M 77.66,165.64 L 37.77,141.54 L 63.30,108.72 L 27.13,97.44 L 46.81,50.77 L 77.66,63.08 L 81.91,30.26 L 126.40,29.23 L 126.06,33.85 L 122.87,67.69 L 158.51,50.77 L 178.19,90.26 L 140.96,104.62 L 162.23,127.18 L 132.98,162.56 L 103.19,131.79 Z"/></svg>
--- a/public/images/logo_text.svg
+++ b/public/images/logo_text.svg
--- a/public/images/pwa-preview-dark.png
+++ b/public/images/pwa-preview-dark.png
--- a/public/images/pwa-preview-light.png
+++ b/public/images/pwa-preview-light.png
--- a/public/logos/bipa.png
+++ b/public/logos/bipa.png
--- a/public/logos/dinheiro.png
+++ b/public/logos/dinheiro.png
--- a/public/pdf.worker.min.mjs
+++ b/public/pdf.worker.min.mjs
--- a/public/providers/minimax.svg
+++ b/public/providers/minimax.svg
@@ -1 +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>
+<svg xmlns="http://www.w3.org/2000/svg" height="1em" style="flex:none;line-height:1" width="1em" viewBox="0 0 24 24"><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 fill="url(#lobe-icons-minimax-gradient)" fill-rule="nonzero" 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"/></svg>
--- a/public/providers/ollama_dark.svg
+++ b/public/providers/ollama_dark.svg
--- a/public/providers/ollama_light.svg
+++ b/public/providers/ollama_light.svg
--- a/src/app/(dashboard)/attachments/page.tsx
+++ b/src/app/(dashboard)/attachments/page.tsx
@@ -1,6 +1,6 @@
 import { connection } from "next/server";
 import { AttachmentsPage } from "@/features/attachments/components/attachments-page";
-import { fetchAttachmentsForPeriod } from "@/features/attachments/queries";
+import { fetchAttachmentsPageData } from "@/features/attachments/queries";
 import { getUserId } from "@/shared/lib/auth/server";
 import { parsePeriodParam } from "@/shared/utils/period";

@@ -26,11 +26,14 @@ export default async function Page({ searchParams }: PageProps) {
 	const periodoParam = getSingleParam(resolvedSearchParams, "periodo");
 	const { period } = parsePeriodParam(periodoParam);

-	const attachments = await fetchAttachmentsForPeriod(userId, period);
+	const data = await fetchAttachmentsPageData(userId, period);

 	return (
 		<main className="flex flex-col gap-6">
-			<AttachmentsPage attachments={attachments} />
+			<AttachmentsPage
+				attachments={data?.attachments ?? []}
+				adminPayerId={data?.adminPayerId ?? ""}
+			/>
 		</main>
 	);
 }
--- a/src/app/(dashboard)/cards/[cardId]/invoice/page.tsx
+++ b/src/app/(dashboard)/cards/[cardId]/invoice/page.tsx
@@ -136,6 +136,7 @@ export default async function Page({ params, searchParams }: PageProps) {
 		limitAvailable: limitAmount,
 		currentInvoiceAmount: 0,
 		currentInvoiceLabel: "",
+		currentInvoiceStatus: null,
 	};

 	const { totalAmount, invoiceStatus, paymentDate } = invoiceData;
--- a/src/app/(dashboard)/notes/page.tsx
+++ b/src/app/(dashboard)/notes/page.tsx
@@ -1,16 +1,24 @@
 import { connection } from "next/server";
 import { NotesPage } from "@/features/notes/components/notes-page";
 import { fetchAllNotesForUser } from "@/features/notes/queries";
+import { fetchUserPreferences } from "@/features/settings/queries";
 import { getUserId } from "@/shared/lib/auth/server";

 export default async function Page() {
 	await connection();
 	const userId = await getUserId();
-	const { activeNotes, archivedNotes } = await fetchAllNotesForUser(userId);
+	const [{ activeNotes, archivedNotes }, preferences] = await Promise.all([
+		fetchAllNotesForUser(userId),
+		fetchUserPreferences(userId),
+	]);

 	return (
 		<main className="flex flex-col gap-6">
-			<NotesPage notes={activeNotes} archivedNotes={archivedNotes} />
+			<NotesPage
+				notes={activeNotes}
+				archivedNotes={archivedNotes}
+				attachmentMaxSizeMb={preferences?.attachmentMaxSizeMb ?? 50}
+			/>
 		</main>
 	);
 }
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -4,7 +4,7 @@
@custom-variant dark (&:is(.dark *));

@theme {
-  --spacing-custom-height-card: 29rem;
+  --spacing-custom-height-card: 30rem;
  --spacing-8xl: 90rem;
 }

@@ -117,7 +117,7 @@
  --destructive: oklch(62% 0.2 28);
  --destructive-foreground: oklch(98% 0.005 30);

-  --border: oklch(24.576% 0.0072 67.399);
+  --border: oklch(29.675% 0.01144 67.3);
  --input: var(--border);
  --ring: var(--primary);

--- a/src/db/schema.ts
+++ b/src/db/schema.ts
@@ -847,11 +847,12 @@ export const budgetsRelations = relations(budgets, ({ one }) => ({
 	}),
 }));

-export const notesRelations = relations(notes, ({ one }) => ({
+export const notesRelations = relations(notes, ({ one, many }) => ({
 	user: one(user, {
 		fields: [notes.userId],
 		references: [user.id],
 	}),
+	noteAttachments: many(noteAttachments),
 }));

 export const savedInsightsRelations = relations(savedInsights, ({ one }) => ({
@@ -972,6 +973,24 @@ export const transactionAttachments = pgTable(
 	}),
 );

+export const noteAttachments = pgTable(
+	"anotacao_anexos",
+	{
+		noteId: uuid("anotacao_id")
+			.notNull()
+			.references(() => notes.id, { onDelete: "cascade" }),
+		attachmentId: uuid("anexo_id")
+			.notNull()
+			.references(() => attachments.id, { onDelete: "cascade" }),
+	},
+	(table) => ({
+		pk: primaryKey({ columns: [table.noteId, table.attachmentId] }),
+		attachmentIdIdx: index("anotacao_anexos_anexo_id_idx").on(
+			table.attachmentId,
+		),
+	}),
+);
+
 export const importCategoryMappings = pgTable(
 	"import_category_mappings",
 	{
@@ -1044,6 +1063,7 @@ export const attachmentsRelations = relations(attachments, ({ one, many }) => ({
 		references: [user.id],
 	}),
 	transactionAttachments: many(transactionAttachments),
+	noteAttachments: many(noteAttachments),
 }));

 export const transactionAttachmentsRelations = relations(
@@ -1060,8 +1080,23 @@ export const transactionAttachmentsRelations = relations(
 	}),
 );

+export const noteAttachmentsRelations = relations(
+	noteAttachments,
+	({ one }) => ({
+		note: one(notes, {
+			fields: [noteAttachments.noteId],
+			references: [notes.id],
+		}),
+		attachment: one(attachments, {
+			fields: [noteAttachments.attachmentId],
+			references: [attachments.id],
+		}),
+	}),
+);
+
 export type Attachment = typeof attachments.$inferSelect;
 export type TransactionAttachment = typeof transactionAttachments.$inferSelect;
+export type NoteAttachment = typeof noteAttachments.$inferSelect;

 export const establishmentLogosRelations = relations(
 	establishmentLogos,
--- a/src/features/accounts/components/account-statement-card.tsx
+++ b/src/features/accounts/components/account-statement-card.tsx
@@ -1,6 +1,6 @@
 "use client";

-import { RiInformationLine } from "@remixicon/react";
+import { RiBankLine, RiInformationLine } from "@remixicon/react";
 import Image from "next/image";
 import type { ReactNode } from "react";
 import MoneyValues from "@/shared/components/money-values";
@@ -52,28 +52,32 @@ export function AccountStatementCard({
 	const resultado = totalIncomes - totalExpenses;

 	return (
-		<Card className="gap-0 py-0">
+		<Card className="gap-0 py-0 space-y-2">
 			<CardContent className="px-4 py-4 sm:px-5 sm:py-5">
 				<div className="flex flex-col gap-4">
 					{/* Linha 1 — identidade */}
-					<div className="flex items-center justify-between gap-3">
-						<div className="flex min-w-0 items-center gap-3">
+					<div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+						<div className="flex min-w-0 items-start gap-3">
 							{logoPath ? (
 								<div className="flex size-12 shrink-0 items-center justify-center overflow-hidden rounded-full">
 									<Image
 										src={logoPath}
 										alt={`Logo ${accountName}`}
-										width={42}
-										height={42}
+										width={48}
+										height={48}
 										className="h-full w-full object-contain"
 									/>
 								</div>
-							) : null}
-							<div className="min-w-0">
-								<h2 className="truncate text-sm font-semibold text-foreground">
+							) : (
+								<span className="flex size-12 shrink-0 items-center justify-center rounded-full border bg-card text-primary">
+									<RiBankLine className="size-5" aria-hidden />
+								</span>
+							)}
+							<div className="min-w-0 space-y-1">
+								<h2 className="truncate text-xl font-semibold text-foreground sm:text-2xl">
 									{accountName}
 								</h2>
-								<p className="text-xs text-muted-foreground">
+								<p className="text-sm leading-relaxed text-muted-foreground">
 									Extrato de {periodLabel}
 								</p>
 							</div>
--- a/src/features/attachments/components/attachment-grid-item.tsx
+++ b/src/features/attachments/components/attachment-grid-item.tsx
@@ -32,7 +32,7 @@ function PdfCanvas({ url }: PdfCanvasProps) {

 			let pdf: Awaited<ReturnType<typeof pdfjsLib.getDocument>["promise"]>;
 			try {
-				pdf = await pdfjsLib.getDocument(url).promise;
+				pdf = await pdfjsLib.getDocument({ url }).promise;
 			} catch (err) {
 				if ((err as { name?: string }).name === "PasswordException") {
 					if (!cancelled) setLocked(true);
@@ -162,9 +162,15 @@ export function AttachmentGridItem({
 				</div>

 				{/* Data */}
-				<span className="text-xs text-muted-foreground">
-					{formatDate(attachment.purchaseDate)}
-				</span>
+				<div className="flex min-w-0 items-center gap-1 text-xs text-muted-foreground">
+					<span className="shrink-0">
+						{formatDate(attachment.purchaseDate)}
+					</span>
+					<span aria-hidden>·</span>
+					<span className="truncate" title={attachment.payerName}>
+						{attachment.payerName}
+					</span>
+				</div>

 				{/* Transação e Valor */}
 				<div className="flex items-start justify-between gap-2">
--- a/src/features/attachments/components/attachments-page.tsx
+++ b/src/features/attachments/components/attachments-page.tsx
@@ -4,6 +4,8 @@ import {
 	RiAttachmentLine,
 	RiFilePdf2Line,
 	RiImageLine,
+	RiUserLine,
+	RiVerifiedBadgeFill,
 } from "@remixicon/react";
 import { useRouter } from "next/navigation";
 import type React from "react";
@@ -17,9 +19,17 @@ import type { TransactionDialogOptions } from "@/features/transactions/actions/f
 import { fetchTransactionDialogOptionsAction } from "@/features/transactions/actions/fetch-dialog-options";
 import { TransactionDetailsDialog } from "@/features/transactions/components/dialogs/transaction-details-dialog";
 import { TransactionDialog } from "@/features/transactions/components/dialogs/transaction-dialog/transaction-dialog";
+import { PayerSelectContent } from "@/features/transactions/components/select-items";
 import type { TransactionItem } from "@/features/transactions/components/types";
 import { EmptyState } from "@/shared/components/feedback/empty-state";
 import { Card, CardContent } from "@/shared/components/ui/card";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/shared/components/ui/select";
 import { cn } from "@/shared/utils/ui";

 type FilterType = "all" | "images" | "pdfs";
@@ -73,11 +83,18 @@ const FILTERS: {

 interface AttachmentsPageProps {
 	attachments: AttachmentForPeriod[];
+	adminPayerId: string;
 }

-export function AttachmentsPage({ attachments }: AttachmentsPageProps) {
+const ALL_PAYERS = "all";
+
+export function AttachmentsPage({
+	attachments,
+	adminPayerId,
+}: AttachmentsPageProps) {
 	const router = useRouter();
 	const [filter, setFilter] = useState<FilterType>("all");
+	const [payerFilter, setPayerFilter] = useState(adminPayerId);
 	const [selectedIndex, setSelectedIndex] = useState(-1);
 	const [transactionDetails, setTransactionDetails] =
 		useState<TransactionItem | null>(null);
@@ -93,21 +110,44 @@ export function AttachmentsPage({ attachments }: AttachmentsPageProps) {
 	const [dialogOptions, setDialogOptions] =
 		useState<TransactionDialogOptions | null>(null);

-	const filteredAttachments = attachments.filter((a) => {
+	const payerOptions = Array.from(
+		new Map(
+			attachments.map((attachment) => [
+				attachment.payerId,
+				{
+					value: attachment.payerId,
+					label: attachment.payerName,
+					avatarUrl: attachment.payerAvatarUrl,
+				},
+			]),
+		).values(),
+	).sort((a, b) =>
+		a.label.localeCompare(b.label, "pt-BR", { sensitivity: "base" }),
+	);
+
+	const payerAttachments = attachments.filter(
+		(attachment) =>
+			payerFilter === ALL_PAYERS || attachment.payerId === payerFilter,
+	);
+	const selectedPayer = payerOptions.find(
+		(option) => option.value === payerFilter,
+	);
+
+	const filteredAttachments = payerAttachments.filter((a) => {
 		if (filter === "images") return a.mimeType.startsWith("image/");
 		if (filter === "pdfs") return a.mimeType === "application/pdf";
 		return true;
 	});

-	const imageCount = attachments.filter((a) =>
+	const imageCount = payerAttachments.filter((a) =>
 		a.mimeType.startsWith("image/"),
 	).length;
-	const pdfCount = attachments.filter(
+	const pdfCount = payerAttachments.filter(
 		(a) => a.mimeType === "application/pdf",
 	).length;

 	const counts: Record<FilterType, number> = {
-		all: attachments.length,
+		all: payerAttachments.length,
 		images: imageCount,
 		pdfs: pdfCount,
 	};
@@ -161,36 +201,98 @@ export function AttachmentsPage({ attachments }: AttachmentsPageProps) {
 									{filter !== "all" &&
 										` · ${FILTERS.find((f) => f.value === filter)?.label.toLowerCase()}`}
 								</p>
-								<div className="flex items-center gap-1 rounded-lg border p-1">
-									{FILTERS.map(({ value, label, icon }) => (
-										<button
-											key={value}
-											type="button"
-											onClick={() => {
-												setFilter(value);
-												setSelectedIndex(-1);
-											}}
-											className={cn(
-												"flex items-center gap-1.5 rounded-md px-2.5 py-1 text-xs font-medium transition-colors",
-												filter === value
-													? "bg-primary text-primary-foreground [&_svg]:opacity-100"
-													: "text-muted-foreground hover:text-foreground",
-											)}
+								<div className="flex w-full flex-wrap items-center justify-end gap-2 sm:w-auto">
+									<Select
+										value={payerFilter}
+										onValueChange={(value) => {
+											setPayerFilter(value);
+											setSelectedIndex(-1);
+										}}
+									>
+										<SelectTrigger
+											size="sm"
+											className="min-w-44 flex-1 sm:flex-none"
 										>
-											<span className={cn(filter !== value && "opacity-60")}>
-												{icon}
-											</span>
-											{label}{" "}
-											<span
+											<SelectValue placeholder="Pessoa">
+												{payerFilter === ALL_PAYERS ? (
+													<span className="flex items-center gap-2">
+														<RiUserLine className="size-4" />
+														Todas as pessoas
+													</span>
+												) : selectedPayer ? (
+													<span className="flex items-center gap-1.5">
+														<PayerSelectContent
+															label={selectedPayer.label}
+															avatarUrl={selectedPayer.avatarUrl}
+														/>
+														{selectedPayer.value === adminPayerId && (
+															<RiVerifiedBadgeFill
+																className="size-4 text-blue-500"
+																aria-label="Pessoa principal"
+															/>
+														)}
+													</span>
+												) : null}
+											</SelectValue>
+										</SelectTrigger>
+										<SelectContent align="end">
+											<SelectItem value={ALL_PAYERS}>
+												<span className="flex items-center gap-2">
+													<span className="flex size-6 items-center justify-center rounded-full bg-muted">
+														<RiUserLine className="size-3.5" />
+													</span>
+													Todas as pessoas
+												</span>
+											</SelectItem>
+											{payerOptions.map((option) => (
+												<SelectItem key={option.value} value={option.value}>
+													<span className="flex items-center gap-1.5">
+														<PayerSelectContent
+															label={option.label}
+															avatarUrl={option.avatarUrl}
+														/>
+														{option.value === adminPayerId && (
+															<RiVerifiedBadgeFill
+																className="size-4 text-blue-500"
+																aria-label="Pessoa principal"
+															/>
+														)}
+													</span>
+												</SelectItem>
+											))}
+										</SelectContent>
+									</Select>
+									<div className="flex items-center gap-1 rounded-lg border p-1">
+										{FILTERS.map(({ value, label, icon }) => (
+											<button
+												key={value}
+												type="button"
+												onClick={() => {
+													setFilter(value);
+													setSelectedIndex(-1);
+												}}
 												className={cn(
-													"tabular-nums",
-													filter === value ? "opacity-80" : "opacity-60",
+													"flex items-center gap-1.5 rounded-md px-2.5 py-1 text-xs font-medium transition-colors",
+													filter === value
+														? "bg-primary text-primary-foreground [&_svg]:opacity-100"
+														: "text-muted-foreground hover:text-foreground",
 												)}
 											>
-												({counts[value]})
-											</span>
-										</button>
-									))}
+												<span className={cn(filter !== value && "opacity-60")}>
+													{icon}
+												</span>
+												{label}{" "}
+												<span
+													className={cn(
+														"tabular-nums",
+														filter === value ? "opacity-80" : "opacity-60",
+													)}
+												>
+													({counts[value]})
+												</span>
+											</button>
+										))}
+									</div>
 								</div>
 							</div>

@@ -199,7 +301,11 @@ export function AttachmentsPage({ attachments }: AttachmentsPageProps) {
 									<EmptyState
 										media={<RiAttachmentLine className="size-6 text-primary" />}
 										title="Nenhum anexo encontrado"
-										description="Não há anexos do tipo selecionado neste mês."
+										description={
+											payerAttachments.length === 0
+												? "Não há anexos desta pessoa neste mês."
+												: "Não há anexos do tipo selecionado neste mês."
+										}
 									/>
 								</div>
 							) : (
--- a/src/features/attachments/queries.ts
+++ b/src/features/attachments/queries.ts
@@ -3,6 +3,7 @@ import { cacheLife, cacheTag } from "next/cache";
 import {
 	attachments,
 	categories,
+	payers,
 	transactionAttachments,
 	transactions,
 } from "@/db/schema";
@@ -21,11 +22,20 @@ export type AttachmentForPeriod = {
 	purchaseDate: Date;
 	categoryName: string | null;
 	categoryIcon: string | null;
+	payerId: string;
+	payerName: string;
+	payerAvatarUrl: string | null;
+};
+
+export type AttachmentsPageData = {
+	attachments: AttachmentForPeriod[];
+	adminPayerId: string;
 };

 export async function fetchAttachmentsForPeriod(
 	userId: string,
 	period: string,
+	payerScope?: string | "all",
 ): Promise<AttachmentForPeriod[]> {
 	"use cache";
 	cacheTag(`dashboard-${userId}`);
@@ -33,8 +43,9 @@ export async function fetchAttachmentsForPeriod(

 	const adminPayerId = await getAdminPayerId(userId);
 	if (!adminPayerId) return [];
+	const payerId = payerScope ?? adminPayerId;

-	return db
+	const rows = await db
 		.select({
 			attachmentId: attachments.id,
 			fileName: attachments.fileName,
@@ -47,6 +58,9 @@ export async function fetchAttachmentsForPeriod(
 			purchaseDate: transactions.purchaseDate,
 			categoryName: categories.name,
 			categoryIcon: categories.icon,
+			payerId: payers.id,
+			payerName: payers.name,
+			payerAvatarUrl: payers.avatarUrl,
 		})
 		.from(transactionAttachments)
 		.innerJoin(
@@ -61,10 +75,32 @@ export async function fetchAttachmentsForPeriod(
 			and(
 				eq(transactionAttachments.transactionId, transactions.id),
 				eq(transactions.userId, userId),
-				eq(transactions.payerId, adminPayerId),
 				eq(transactions.period, period),
+				payerId === "all" ? undefined : eq(transactions.payerId, payerId),
+			),
+		)
+		.innerJoin(
+			payers,
+			and(eq(transactions.payerId, payers.id), eq(payers.userId, userId)),
+		)
+		.leftJoin(
+			categories,
+			and(
+				eq(transactions.categoryId, categories.id),
+				eq(categories.userId, userId),
 			),
 		)
-		.leftJoin(categories, eq(transactions.categoryId, categories.id))
 		.orderBy(desc(transactions.purchaseDate), desc(attachments.id));
+
+	return rows;
+}
+
+export async function fetchAttachmentsPageData(
+	userId: string,
+	period: string,
+): Promise<AttachmentsPageData | null> {
+	const adminPayerId = await getAdminPayerId(userId);
+	if (!adminPayerId) return null;
+	const rows = await fetchAttachmentsForPeriod(userId, period, "all");
+	return { attachments: rows, adminPayerId };
 }
--- a/src/features/cards/components/card-item.tsx
+++ b/src/features/cards/components/card-item.tsx
@@ -10,6 +10,7 @@ import {
 } from "@remixicon/react";
 import Image from "next/image";
 import MoneyValues from "@/shared/components/money-values";
+import { Badge } from "@/shared/components/ui/badge";
 import {
 	Card,
 	CardContent,
@@ -23,6 +24,10 @@ import {
 	TooltipTrigger,
 } from "@/shared/components/ui/tooltip";
 import { resolveCardBrandAsset } from "@/shared/lib/cards/brand-assets";
+import {
+	INVOICE_PAYMENT_STATUS,
+	type InvoicePaymentStatus,
+} from "@/shared/lib/invoices";
 import { resolveLogoSrc } from "@/shared/lib/logo";
 import { cn } from "@/shared/utils/ui";

@@ -37,6 +42,7 @@ interface CardItemProps {
 	limitAvailable?: number;
 	currentInvoiceAmount: number;
 	currentInvoiceLabel: string;
+	currentInvoiceStatus: InvoicePaymentStatus | null;
 	accountName: string;
 	logo?: string | null;
 	note?: string | null;
@@ -58,6 +64,7 @@ export function CardItem({
 	limitAvailable,
 	currentInvoiceAmount,
 	currentInvoiceLabel,
+	currentInvoiceStatus,
 	accountName: _accountName,
 	logo,
 	note,
@@ -80,6 +87,8 @@ export function CardItem({
 	const logoPath = resolveLogoSrc(logo);
 	const brandAsset = resolveCardBrandAsset(brand);
 	const isInactive = status?.toLowerCase() === "inativo";
+	const isCurrentInvoicePaid =
+		currentInvoiceStatus === INVOICE_PAYMENT_STATUS.PAID;

 	return (
 		<Card className="flex flex-col p-6 w-full">
@@ -175,10 +184,17 @@ export function CardItem({
 					<span className="text-xs text-muted-foreground">
 						{currentInvoiceLabel}
 					</span>
-					<MoneyValues
-						amount={currentInvoiceAmount}
-						className="text-xl font-semibold text-info"
-					/>
+					<div className="flex flex-wrap items-center gap-2">
+						<MoneyValues
+							amount={currentInvoiceAmount}
+							className="text-xl font-semibold text-info"
+						/>
+						{isCurrentInvoicePaid ? (
+							<Badge variant="success" className="text-xs">
+								Paga
+							</Badge>
+						) : null}
+					</div>
 				</div>

 				<div className="flex gap-2 justify-between w-full">
--- a/src/features/cards/components/cards-page.tsx
+++ b/src/features/cards/components/cards-page.tsx
@@ -144,6 +144,7 @@ export function CardsPage({
 						limitAvailable={card.limitAvailable ?? card.limit ?? null}
 						currentInvoiceAmount={card.currentInvoiceAmount}
 						currentInvoiceLabel={card.currentInvoiceLabel}
+						currentInvoiceStatus={card.currentInvoiceStatus}
 						accountName={card.accountName}
 						logo={card.logo}
 						note={card.note}
--- a/src/features/cards/components/types.ts
+++ b/src/features/cards/components/types.ts
@@ -1,3 +1,5 @@
+import type { InvoicePaymentStatus } from "@/shared/lib/invoices";
+
 export type Card = {
 	id: string;
 	name: string;
@@ -14,6 +16,7 @@ export type Card = {
 	limitAvailable: number;
 	currentInvoiceAmount: number;
 	currentInvoiceLabel: string;
+	currentInvoiceStatus: InvoicePaymentStatus | null;
 };

 export type CardFormValues = {
--- a/src/features/cards/queries.ts
+++ b/src/features/cards/queries.ts
@@ -11,7 +11,11 @@ import {
 } 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 {
+	INVOICE_PAYMENT_STATUS,
+	INVOICE_STATUS_VALUES,
+	type InvoicePaymentStatus,
+} from "@/shared/lib/invoices";
 import { loadLogoOptions } from "@/shared/lib/logo/options";
 import {
 	formatPeriodMonthShort,
@@ -33,6 +37,7 @@ type CardData = {
 	limitAvailable: number;
 	currentInvoiceAmount: number;
 	currentInvoiceLabel: string;
+	currentInvoiceStatus: InvoicePaymentStatus | null;
 	accountId: string;
 	accountName: string;
 };
@@ -48,6 +53,12 @@ function formatCurrentInvoiceLabel(period: string) {
 	return `Fatura ${formatPeriodMonthShort(period)}. ${year}`;
 }

+function parseInvoiceStatus(value: unknown): InvoicePaymentStatus | null {
+	return INVOICE_STATUS_VALUES.includes(value as InvoicePaymentStatus)
+		? (value as InvoicePaymentStatus)
+		: null;
+}
+
 async function fetchCardsByStatus(
 	userId: string,
 	archived: boolean,
@@ -58,79 +69,94 @@ async function fetchCardsByStatus(
 }> {
 	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,
-						},
+	const [
+		cardRows,
+		accountRows,
+		logoOptions,
+		usageRows,
+		invoiceRows,
+		invoiceStatusRows,
+	] = 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)
-				.leftJoin(
-					invoices,
-					and(
-						eq(invoices.userId, transactions.userId),
-						eq(invoices.cardId, transactions.cardId),
-						eq(invoices.period, transactions.period),
+			},
+		}),
+		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),
+				),
+			)
+			.where(
+				and(
+					eq(transactions.userId, userId),
+					isNotNull(transactions.cardId),
+					or(
+						isNull(invoices.paymentStatus),
+						ne(invoices.paymentStatus, INVOICE_PAYMENT_STATUS.PAID),
 					),
-				)
-				.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`,
-						),
+					// 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),
-		]);
+				),
+			)
+			.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),
+		db
+			.select({
+				cardId: invoices.cardId,
+				paymentStatus: invoices.paymentStatus,
+			})
+			.from(invoices)
+			.where(
+				and(eq(invoices.userId, userId), eq(invoices.period, currentPeriod)),
+			),
+	]);

 	const usageMap = new Map<string, number>();
 	usageRows.forEach((row: { cardId: string | null; total: number | null }) => {
@@ -144,6 +170,13 @@ async function fetchCardsByStatus(
 			invoiceMap.set(row.cardId, Math.abs(Number(row.total ?? 0)));
 		},
 	);
+	const invoiceStatusMap = new Map<string, InvoicePaymentStatus>();
+	invoiceStatusRows.forEach((row) => {
+		if (!row.cardId) return;
+		const status = parseInvoiceStatus(row.paymentStatus);
+		if (!status) return;
+		invoiceStatusMap.set(row.cardId, status);
+	});

 	const cardList = cardRows.map((card) => ({
 		id: card.id,
@@ -166,6 +199,7 @@ async function fetchCardsByStatus(
 		})(),
 		currentInvoiceAmount: invoiceMap.get(card.id) ?? 0,
 		currentInvoiceLabel,
+		currentInvoiceStatus: invoiceStatusMap.get(card.id) ?? null,
 		accountId: card.accountId,
 		accountName:
 			(card.financialAccount as { name?: string } | null)?.name ??
--- a/src/features/dashboard/components/bills/bill-list-item.tsx
+++ b/src/features/dashboard/components/bills/bill-list-item.tsx
@@ -8,6 +8,7 @@ import {
 	isIncomeBill,
 } from "@/features/dashboard/bills/bills-helpers";
 import type { DashboardBill } from "@/features/dashboard/bills/bills-queries";
+import { dashboardWidgetListStyles as styles } from "@/features/dashboard/components/dashboard-widget-list-styles";
 import { EstablishmentLogo } from "@/shared/components/entity-avatar";
 import MoneyValues from "@/shared/components/money-values";
 import { Button } from "@/shared/components/ui/button";
@@ -47,25 +48,22 @@ export function BillListItem({ bill, period, onPay }: BillListItemProps) {
 	const href = buildTransactionsHref(bill.name, period);

 	return (
-		<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-0.5">
+		<li className={styles.row}>
+			<div className={styles.main}>
 				<EstablishmentLogo name={bill.name} size={37} />

-				<div className="min-w-0">
-					<Link
-						href={href}
-						className="inline-flex max-w-full items-center gap-1 text-sm font-medium text-foreground underline-offset-2 hover:text-primary hover:underline"
-					>
+				<div className={styles.textStack}>
+					<Link href={href} className={styles.titleLink}>
 						<span className="truncate">{bill.name}</span>
 					</Link>
-					<div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
+					<div className={styles.meta}>
 						{statusLabel ? (
 							statusTooltipLabel ? (
 								<Tooltip>
 									<TooltipTrigger asChild>
 										<span
 											className={cn(
-												"cursor-help rounded-full py-0.5",
+												"cursor-help",
 												bill.isSettled && "text-success font-semibold",
 												overdue && "text-destructive font-semibold",
 											)}
@@ -80,7 +78,6 @@ export function BillListItem({ bill, period, onPay }: BillListItemProps) {
 							) : (
 								<span
 									className={cn(
-										"rounded-full py-0.5",
 										bill.isSettled && "text-success font-semibold",
 										overdue && "text-destructive font-semibold",
 									)}
@@ -93,10 +90,10 @@ export function BillListItem({ bill, period, onPay }: BillListItemProps) {
 				</div>
 			</div>

-			<div className="flex shrink-0 flex-col items-end">
-				<MoneyValues className="font-medium" amount={bill.amount} />
+			<div className={styles.trailing}>
+				<MoneyValues className={styles.trailingValue} amount={bill.amount} />
 				{bill.isSettled ? (
-					<span className="flex h-7 items-center gap-0.5 text-xs font-medium text-success">
+					<span className={`${styles.trailingMeta} text-success`}>
 						<RiCheckboxCircleFill className="size-3.5" />{" "}
 						{income ? "Recebido" : "Pago"}
 					</span>
@@ -105,7 +102,7 @@ export function BillListItem({ bill, period, onPay }: BillListItemProps) {
 						type="button"
 						size="sm"
 						variant="link"
-						className="-mr-1.5 h-7 px-1.5 py-0"
+						className={styles.actionButton}
 						onClick={() => onPay(bill.id)}
 					>
 						{overdue ? (
--- a/src/features/dashboard/components/category-breakdown/category-breakdown-list-item.tsx
+++ b/src/features/dashboard/components/category-breakdown/category-breakdown-list-item.tsx
@@ -1,5 +1,6 @@
 import Link from "next/link";
 import type { DashboardCategoryBreakdownItem } from "@/features/dashboard/categories/category-breakdown-helpers";
+import { dashboardWidgetListStyles as styles } from "@/features/dashboard/components/dashboard-widget-list-styles";
 import { PercentageChangeIndicator } from "@/features/dashboard/components/percentage-change-indicator";
 import { CategoryIconBadge } from "@/shared/components/entity-avatar";
 import MoneyValues from "@/shared/components/money-values";
@@ -45,25 +46,23 @@ export function CategoryBreakdownListItem({

 	return (
 		<div>
-			<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">
+			<div className={styles.row}>
+				<span className={styles.rank}>{position}</span>
+				<div className={styles.main}>
 					<CategoryIconBadge
 						icon={category.categoryIcon}
 						name={category.categoryName}
 					/>
-					<div className="min-w-0 flex-1">
+					<div className={styles.textStack}>
 						<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:text-primary hover:underline"
+								className={styles.titleLink}
 							>
 								<span className="truncate">{category.categoryName}</span>
 							</Link>
 						</div>
-						<div className="flex flex-wrap items-center gap-x-1 text-xs text-muted-foreground">
+						<div className={styles.meta}>
 							<span>
 								{formatPercentage(
 									category.percentageOfTotal,
@@ -97,23 +96,24 @@ export function CategoryBreakdownListItem({
 					</div>
 				</div>

-				<div className="flex shrink-0 flex-col items-end gap-0.5">
+				<div className={styles.trailing}>
 					<MoneyValues
-						className="text-foreground font-medium"
+						className={styles.trailingValue}
 						amount={category.currentAmount}
 					/>
-					<PercentageChangeIndicator
-						value={category.percentageChange}
-						label={
-							category.percentageChange !== null
-								? formatPercentage(
-										category.percentageChange,
-										config.percentageDigits,
-									)
-								: undefined
-						}
-						positiveTrend={config.positiveTrend}
-					/>
+					{category.percentageChange !== null ? (
+						<span className={`${styles.trailingMeta} text-muted-foreground`}>
+							<PercentageChangeIndicator
+								value={category.percentageChange}
+								label={formatPercentage(
+									category.percentageChange,
+									config.percentageDigits,
+								)}
+								positiveTrend={config.positiveTrend}
+							/>
+							<span>vs. mês ant.</span>
+						</span>
+					) : null}
 				</div>
 			</div>
 		</div>
--- a/src/features/dashboard/components/dashboard-widget-list-styles.ts
+++ b/src/features/dashboard/components/dashboard-widget-list-styles.ts
@@ -0,0 +1,15 @@
+export const dashboardWidgetListStyles = {
+	row: "flex min-h-[3.25rem] items-center justify-between gap-2 py-1.5 transition-all duration-300",
+	main: "flex min-w-0 flex-1 items-center gap-2",
+	textStack: "min-w-0 flex-1 space-y-0.5",
+	title: "truncate text-sm font-medium leading-5 text-foreground",
+	titleLink:
+		"inline-flex max-w-full items-center gap-1 text-sm font-medium leading-5 text-foreground underline-offset-2 hover:text-primary hover:underline",
+	meta: "flex min-h-4 flex-wrap items-center gap-x-2 gap-y-0.5 text-xs leading-4 text-muted-foreground",
+	rank: "w-3 shrink-0 text-left text-xs font-medium leading-4 text-muted-foreground",
+	trailing:
+		"flex min-w-[5.75rem] shrink-0 flex-col items-end gap-0.5 text-right",
+	trailingValue: "font-medium leading-5",
+	trailingMeta: "flex h-5 items-center gap-0.5 text-xs font-medium leading-4",
+	actionButton: "-mr-1 h-5 px-1 py-0 text-xs leading-4",
+};
--- a/src/features/dashboard/components/goals-progress/goals-progress-item.tsx
+++ b/src/features/dashboard/components/goals-progress/goals-progress-item.tsx
@@ -1,5 +1,6 @@
 import { RiPencilLine } from "@remixicon/react";
 import Link from "next/link";
+import { dashboardWidgetListStyles as styles } from "@/features/dashboard/components/dashboard-widget-list-styles";
 import {
 	clampGoalProgress,
 	formatGoalProgressPercentage,
@@ -30,7 +31,7 @@ export function GoalProgressItem({ item, onEdit }: GoalProgressItemProps) {
 	const usedPercentageLabel = formatGoalProgressPercentage(item.usedPercentage);

 	return (
-		<li className="group py-2 transition-all duration-300">
+		<li className="group py-1.5 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
@@ -42,16 +43,14 @@ export function GoalProgressItem({ item, onEdit }: GoalProgressItemProps) {
 						{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"
+								className={`${styles.title} block 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={styles.title}>{item.categoryName}</p>
 						)}
-						<p className="mt-0.5 text-xs text-muted-foreground">
+						<p className="mt-0.5 text-xs leading-4 text-muted-foreground">
 							<MoneyValues className="font-medium" amount={item.spentAmount} />{" "}
 							de{" "}
 							<MoneyValues className="font-medium" amount={item.budgetAmount} />
--- a/src/features/dashboard/components/installment-analysis/installment-group-card.tsx
+++ b/src/features/dashboard/components/installment-analysis/installment-group-card.tsx
@@ -2,6 +2,7 @@

 import {
 	RiBankCard2Line,
+	RiChat1Line,
 	RiCheckboxCircleFill,
 	RiFileList2Line,
 	RiTimeLine,
@@ -30,6 +31,11 @@ import {
 	DialogTitle,
 } from "@/shared/components/ui/dialog";
 import { Progress } from "@/shared/components/ui/progress";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipTrigger,
+} from "@/shared/components/ui/tooltip";
 import { resolveLogoSrc } from "@/shared/lib/logo";
 import { cn } from "@/shared/utils";
 import type { InstallmentGroup } from "./types";
@@ -83,6 +89,7 @@ export function InstallmentGroupCard({
 	);
 	const cardLogoSrc = resolveLogoSrc(group.cartaoLogo);
 	const cardName = group.cartaoName ?? "Compra parcelada";
+	const hasNote = Boolean(group.note?.trim().length);
 	const untrackedLabel =
 		group.untrackedInstallments === 1
 			? "1 parcela anterior fora do acompanhamento"
@@ -121,8 +128,28 @@ export function InstallmentGroupCard({
 							<div className="flex items-center gap-3 flex-wrap">
 								<EstablishmentLogo name={group.name} size={40} />
 								<div className="flex-1 min-w-0">
-									<CardTitle className="text-base truncate">
-										{group.name}
+									<CardTitle className="flex items-center gap-1 text-base">
+										<span className="truncate">{group.name}</span>
+										{hasNote ? (
+											<Tooltip>
+												<TooltipTrigger asChild>
+													<span className="inline-flex shrink-0 rounded-full p-1 hover:bg-accent transition-colors duration-300">
+														<RiChat1Line
+															className="h-4 w-4 text-muted-foreground"
+															aria-hidden
+														/>
+														<span className="sr-only">Ver anotação</span>
+													</span>
+												</TooltipTrigger>
+												<TooltipContent
+													side="top"
+													align="start"
+													className="max-w-xs whitespace-pre-line"
+												>
+													{group.note}
+												</TooltipContent>
+											</Tooltip>
+										) : null}
 									</CardTitle>
 									<CardDescription className="flex min-w-0 items-center gap-1 text-xs">
 										{cardLogoSrc ? (
@@ -235,8 +262,28 @@ export function InstallmentGroupCard({
 						<div className="flex items-center gap-3">
 							<EstablishmentLogo name={group.name} size={32} />
 							<div className="min-w-0">
-								<DialogTitle className="truncate text-base">
-									{group.name}
+								<DialogTitle className="flex items-center gap-1 text-base">
+									<span className="truncate">{group.name}</span>
+									{hasNote ? (
+										<Tooltip>
+											<TooltipTrigger asChild>
+												<span className="inline-flex shrink-0 rounded-full p-1 hover:bg-accent transition-colors duration-300">
+													<RiChat1Line
+														className="h-4 w-4 text-muted-foreground"
+														aria-hidden
+													/>
+													<span className="sr-only">Ver anotação</span>
+												</span>
+											</TooltipTrigger>
+											<TooltipContent
+												side="top"
+												align="start"
+												className="max-w-xs whitespace-pre-line"
+											>
+												{group.note}
+											</TooltipContent>
+										</Tooltip>
+									) : null}
 								</DialogTitle>
 								<div className="mt-0.5 flex min-w-0 items-center gap-1.5 text-xs text-muted-foreground">
 									{cardLogoSrc ? (
--- a/src/features/dashboard/components/invoices/invoice-list-item.tsx
+++ b/src/features/dashboard/components/invoices/invoice-list-item.tsx
@@ -1,5 +1,6 @@
 import { RiCheckboxCircleFill, RiGroupLine } from "@remixicon/react";
 import Link from "next/link";
+import { dashboardWidgetListStyles as styles } from "@/features/dashboard/components/dashboard-widget-list-styles";
 import { PercentageChangeIndicator } from "@/features/dashboard/components/percentage-change-indicator";
 import {
 	buildInvoiceDetailsHref,
@@ -62,18 +63,14 @@ export function InvoiceListItem({ invoice, onPay }: InvoiceListItemProps) {
 			: null;

 	const linkNode = (
-		<Link
-			prefetch
-			href={detailHref}
-			className="inline-flex max-w-full items-center gap-1 text-sm font-medium text-foreground underline-offset-2 hover:text-primary hover:underline"
-		>
+		<Link prefetch href={detailHref} className={styles.titleLink}>
 			<span className="truncate">{invoice.cardName}</span>
 		</Link>
 	);

 	return (
-		<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">
+		<li className={styles.row}>
+			<div className={styles.main}>
 				<InvoiceLogo
 					cardName={invoice.cardName}
 					logo={invoice.logo}
@@ -81,7 +78,7 @@ export function InvoiceListItem({ invoice, onPay }: InvoiceListItemProps) {
 					containerClassName="size-9.5"
 				/>

-				<div className="min-w-0">
+				<div className={styles.textStack}>
 					<div className="flex max-w-full items-center gap-1">
 						{hasBreakdown ? (
 							<HoverCard openDelay={150}>
@@ -123,9 +120,14 @@ export function InvoiceListItem({ invoice, onPay }: InvoiceListItemProps) {
 														className="font-medium"
 														amount={share.amount}
 													/>
-													<PercentageChangeIndicator
-														value={share.percentageChange}
-													/>
+													{share.percentageChange !== null ? (
+														<span className="flex items-center gap-1 text-xs text-muted-foreground">
+															<PercentageChangeIndicator
+																value={share.percentageChange}
+															/>
+															<span>vs. mês ant.</span>
+														</span>
+													) : null}
 												</div>
 											</li>
 										))}
@@ -150,7 +152,7 @@ export function InvoiceListItem({ invoice, onPay }: InvoiceListItemProps) {
 						) : null}
 					</div>

-					<div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
+					<div className={styles.meta}>
 						{!isPaid ? (
 							dueTooltipLabel ? (
 								<Tooltip>
@@ -199,13 +201,13 @@ export function InvoiceListItem({ invoice, onPay }: InvoiceListItemProps) {
 				</div>
 			</div>

-			<div className="flex shrink-0 flex-col items-end">
+			<div className={styles.trailing}>
 				<MoneyValues
-					className="font-medium"
+					className={styles.trailingValue}
 					amount={Math.abs(invoice.totalAmount)}
 				/>
 				{isPaid ? (
-					<span className="flex h-7 items-center gap-0.5 text-xs font-medium text-success">
+					<span className={`${styles.trailingMeta} text-success`}>
 						<RiCheckboxCircleFill className="size-3.5" /> Pago
 					</span>
 				) : (
@@ -213,7 +215,7 @@ export function InvoiceListItem({ invoice, onPay }: InvoiceListItemProps) {
 						type="button"
 						size="sm"
 						variant="link"
-						className="-mr-1.5 h-7 px-1.5 py-0"
+						className={styles.actionButton}
 						onClick={() => onPay(invoice.id)}
 					>
 						{isOverdue ? (
--- a/src/features/dashboard/components/notes/note-list-item.tsx
+++ b/src/features/dashboard/components/notes/note-list-item.tsx
@@ -3,6 +3,7 @@ import {
 	RiFileList2Line,
 	RiPencilLine,
 } from "@remixicon/react";
+import { dashboardWidgetListStyles as styles } from "@/features/dashboard/components/dashboard-widget-list-styles";
 import type { Note } from "@/features/notes/components/types";
 import {
 	buildNoteDisplayTitle,
@@ -33,18 +34,16 @@ export function NoteListItem({
 	const isTask = note.type === "tarefa";

 	return (
-		<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 min-w-0 items-center gap-2">
+		<li className={`group ${styles.row}`}>
+			<div className={styles.textStack}>
+				<p className={styles.title}>{displayTitle}</p>
+				<div className={styles.meta}>
 					{isTask ? (
 						<Badge variant="outline" className="h-5 px-1.5 text-xs">
 							{getNoteTasksSummary(note)}
 						</Badge>
 					) : null}
-					<p className="truncate text-xs text-muted-foreground">
+					<p className="truncate">
 						<span className="inline-flex items-center gap-1">
 							<RiCalendarLine className="size-3.5 shrink-0" />
 							{createdAtLabel}
@@ -53,7 +52,7 @@ export function NoteListItem({
 				</div>
 			</div>

-			<div className="flex shrink-0 items-center gap-0.5">
+			<div className="flex min-w-[4.5rem] shrink-0 items-center justify-end gap-0.5">
 				<Tooltip>
 					<TooltipTrigger asChild>
 						<Button
--- a/src/features/dashboard/components/payment-overview/payment-breakdown-list-item.tsx
+++ b/src/features/dashboard/components/payment-overview/payment-breakdown-list-item.tsx
@@ -1,5 +1,6 @@
 import Link from "next/link";
 import type { ReactNode } from "react";
+import { dashboardWidgetListStyles as styles } from "@/features/dashboard/components/dashboard-widget-list-styles";
 import {
 	formatPaymentBreakdownPercentage,
 	formatPaymentBreakdownTransactionsLabel,
@@ -31,10 +32,8 @@ export function PaymentBreakdownListItem({
 	position,
 }: PaymentBreakdownListItemProps) {
 	return (
-		<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={styles.row}>
+			<span className={styles.rank}>{position}</span>
 			<div
 				className="flex size-9.5 shrink-0 items-center justify-center rounded-full"
 				style={{
@@ -45,26 +44,26 @@ export function PaymentBreakdownListItem({
 				{item.icon}
 			</div>

-			<div className="min-w-0 flex-1">
-				<div className="flex items-center justify-between">
+			<div className={styles.textStack}>
+				<div className="flex items-center justify-between gap-2">
 					{item.href ? (
-						<Link
-							href={item.href}
-							className="inline-flex items-center gap-1 text-sm font-medium text-foreground underline-offset-2 hover:text-primary hover:underline"
-						>
+						<Link href={item.href} className={styles.titleLink}>
 							<span className="truncate">{item.title}</span>
 						</Link>
 					) : (
-						<p className="text-sm font-medium text-foreground">{item.title}</p>
+						<p className={styles.title}>{item.title}</p>
 					)}
-					<MoneyValues className="shrink-0 font-medium" amount={item.amount} />
+					<MoneyValues
+						className={`shrink-0 ${styles.trailingValue}`}
+						amount={item.amount}
+					/>
 				</div>

-				<div className="flex items-center justify-between text-xs text-muted-foreground">
+				<div className={styles.meta}>
 					<span>
 						{formatPaymentBreakdownTransactionsLabel(item.transactions)}
 					</span>
-					<span>
+					<span className="ml-auto">
 						{formatPaymentBreakdownPercentage(item.percentage)} do total
 					</span>
 				</div>
--- a/src/features/dashboard/components/widgets/attachments-widget.tsx
+++ b/src/features/dashboard/components/widgets/attachments-widget.tsx
@@ -9,6 +9,7 @@ import {
 import { useState } from "react";
 import { AttachmentPreview } from "@/features/attachments/components/attachment-preview";
 import type { AttachmentForPeriod } from "@/features/attachments/queries";
+import { dashboardWidgetListStyles as styles } from "@/features/dashboard/components/dashboard-widget-list-styles";
 import {
 	Tooltip,
 	TooltipContent,
@@ -77,7 +78,7 @@ export function AttachmentsWidget({ snapshot }: AttachmentsWidgetProps) {
 							<button
 								type="button"
 								onClick={() => setSelectedIndex(index)}
-								className="flex w-full items-center gap-2 py-2 text-left"
+								className={`${styles.row} w-full text-left`}
 							>
 								<div className="shrink-0">
 									{isPdf && <RiFilePdf2Line className="size-6 text-red-500" />}
@@ -86,10 +87,10 @@ export function AttachmentsWidget({ snapshot }: AttachmentsWidgetProps) {
 										<RiFileLine className="size-6 text-muted-foreground" />
 									)}
 								</div>
-								<div className="min-w-0 flex-1">
+								<div className={styles.textStack}>
 									<Tooltip>
 										<TooltipTrigger asChild>
-											<span className="block truncate text-sm font-medium text-foreground hover:underline">
+											<span className={`${styles.title} block hover:underline`}>
 												{attachment.fileName}
 											</span>
 										</TooltipTrigger>
@@ -97,18 +98,18 @@ export function AttachmentsWidget({ snapshot }: AttachmentsWidgetProps) {
 											{attachment.fileName}
 										</TooltipContent>
 									</Tooltip>
-									<span className="block truncate text-xs text-muted-foreground">
+									<span className={`${styles.meta} block truncate`}>
 										{attachment.transactionName}
 									</span>
 								</div>
-								<div className="shrink-0 text-right">
-									<span className="block text-xs text-muted-foreground">
+								<div className={styles.trailing}>
+									<span className="block text-xs leading-4 text-muted-foreground">
 										{formatDateOnly(attachment.purchaseDate, {
 											day: "2-digit",
 											month: "2-digit",
 										}) ?? "—"}
 									</span>
-									<span className="block text-xs text-muted-foreground/60">
+									<span className="block text-xs leading-4 text-muted-foreground/60">
 										{formatBytes(attachment.fileSize)}
 									</span>
 								</div>
--- a/src/features/dashboard/components/widgets/category-trends-widget.tsx
+++ b/src/features/dashboard/components/widgets/category-trends-widget.tsx
@@ -6,20 +6,26 @@ import {
 	RiHistoryLine,
 	RiLineChartLine,
 } from "@remixicon/react";
+import Link from "next/link";
 import type { DashboardCategoryBreakdownItem } from "@/features/dashboard/categories/category-breakdown-helpers";
+import { dashboardWidgetListStyles as styles } from "@/features/dashboard/components/dashboard-widget-list-styles";
 import { PercentageChangeIndicator } from "@/features/dashboard/components/percentage-change-indicator";
 import { CategoryIconBadge } from "@/shared/components/entity-avatar";
 import MoneyValues from "@/shared/components/money-values";
 import { WidgetEmptyState } from "@/shared/components/widgets/widget-empty-state";
 import { formatPercentage } from "@/shared/utils/percentage";
+import { formatPeriodForUrl } from "@/shared/utils/period";

 type CategoryTrendsWidgetProps = {
 	categories: DashboardCategoryBreakdownItem[];
+	period: string;
 };

 export function CategoryTrendsWidget({
 	categories,
+	period,
 }: CategoryTrendsWidgetProps) {
+	const periodParam = formatPeriodForUrl(period);
 	const trending = categories
 		.filter((c) => c.percentageChange !== null && c.previousAmount > 0)
 		.sort(
@@ -45,17 +51,20 @@ export function CategoryTrendsWidget({

 				return (
 					<li key={category.categoryId}>
-						<div className="-mx-2 flex items-center gap-3 rounded-md p-2">
+						<div className={styles.row}>
 							<CategoryIconBadge
 								icon={category.categoryIcon}
 								name={category.categoryName}
 								size="md"
 							/>
-							<div className="min-w-0 flex-1">
-								<p className="truncate text-sm font-medium text-foreground">
-									{category.categoryName}
-								</p>
-								<p className="flex items-center gap-1.5 text-xs text-muted-foreground">
+							<div className={styles.textStack}>
+								<Link
+									href={`/categories/${category.categoryId}?periodo=${periodParam}`}
+									className={styles.titleLink}
+								>
+									<span className="truncate">{category.categoryName}</span>
+								</Link>
+								<p className={styles.meta}>
 									<span
 										className="inline-flex items-center gap-1"
 										title="Mês anterior"
@@ -81,17 +90,22 @@ export function CategoryTrendsWidget({
 									</span>
 								</p>
 							</div>
-							<PercentageChangeIndicator
-								value={change}
-								label={formatPercentage(change, {
-									absolute: true,
-									minimumFractionDigits: 0,
-									maximumFractionDigits: 0,
-								})}
-								positiveTrend="down"
-								className="shrink-0 text-sm font-semibold"
-								iconClassName="size-3.5"
-							/>
+							<span
+								className={`${styles.trailingMeta} min-w-[5.75rem] justify-end text-muted-foreground`}
+							>
+								<PercentageChangeIndicator
+									value={change}
+									label={formatPercentage(change, {
+										absolute: true,
+										minimumFractionDigits: 0,
+										maximumFractionDigits: 0,
+									})}
+									positiveTrend="down"
+									className="text-sm font-semibold"
+									iconClassName="size-3.5"
+								/>
+								<span>vs. mês ant.</span>
+							</span>
 						</div>
 					</li>
 				);
--- a/src/features/dashboard/components/widgets/inbox-widget.tsx
+++ b/src/features/dashboard/components/widgets/inbox-widget.tsx
@@ -10,6 +10,7 @@ import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useMemo, useState } from "react";
 import { toast } from "sonner";
+import { dashboardWidgetListStyles as styles } from "@/features/dashboard/components/dashboard-widget-list-styles";
 import type { DashboardInboxSnapshot } from "@/features/dashboard/lib/inbox-snapshot-queries";
 import type { DashboardWidgetQuickActionOptions } from "@/features/dashboard/widget-registry/widget-config";
 import {
@@ -201,8 +202,8 @@ export function InboxWidget({
 				const displayLogo = logoSrc ?? DEFAULT_INBOX_APP_LOGO;

 				return (
-					<div key={item.id} className="flex items-center justify-between py-2">
-						<div className="flex min-w-0 flex-1 items-center gap-2">
+					<div key={item.id} className={styles.row}>
+						<div className={styles.main}>
 							<Image
 								src={displayLogo}
 								alt={item.sourceAppName ?? ""}
@@ -212,24 +213,22 @@ export function InboxWidget({
 								unoptimized
 							/>

-							<div className="min-w-0">
-								<p className="truncate text-sm font-medium text-foreground">
-									{displayName}
-								</p>
-								<div className="flex min-w-0 items-center gap-2 text-xs text-muted-foreground">
+							<div className={styles.textStack}>
+								<p className={styles.title}>{displayName}</p>
+								<div className={styles.meta}>
 									{item.sourceAppName && (
 										<span className="truncate">{item.sourceAppName}</span>
 									)}
 									<span className="text-muted-foreground/60">
-										{relativeTime(item.notificationTimestamp)}
+										{relativeTime(item.createdAt)}
 									</span>
 								</div>
 							</div>
 						</div>

-						<div className="ml-2 flex shrink-0 items-center gap-1">
+						<div className="ml-2 flex min-w-[7.5rem] shrink-0 items-center justify-end gap-1">
 							{amount !== null && (
-								<MoneyValues className="font-medium" amount={amount} />
+								<MoneyValues className={styles.trailingValue} amount={amount} />
 							)}
 							{amount === null && (
 								<span className="max-w-20 text-right text-xs leading-tight text-muted-foreground">
--- a/src/features/dashboard/components/widgets/my-accounts-widget.tsx
+++ b/src/features/dashboard/components/widgets/my-accounts-widget.tsx
@@ -10,6 +10,7 @@ import Image from "next/image";
 import Link from "next/link";
 import { useTransition } from "react";
 import { toast } from "sonner";
+import { dashboardWidgetListStyles as styles } from "@/features/dashboard/components/dashboard-widget-list-styles";
 import type { DashboardAccount } from "@/features/dashboard/lib/accounts-queries";
 import { updateMyAccountsWidgetPreference } from "@/features/dashboard/widget-registry/widget-actions";
 import MoneyValues from "@/shared/components/money-values";
@@ -139,12 +140,9 @@ export function MyAccountsWidget({
 							const logoSrc = resolveLogoSrc(account.logo);

 							return (
-								<li
-									key={account.id}
-									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 flex size-9.5 shrink-0 items-center justify-center overflow-hidden rounded-full bg-primary/10">
+								<li key={account.id} className={styles.row}>
+									<div className={styles.main}>
+										<div className="relative flex size-9.5 shrink-0 items-center justify-center overflow-hidden rounded-full">
 											{logoSrc ? (
 												<Image
 													src={logoSrc}
@@ -161,18 +159,18 @@ export function MyAccountsWidget({
 											)}
 										</div>

-										<div className="min-w-0">
+										<div className={styles.textStack}>
 											<Link
 												prefetch
 												href={`/accounts/${
 													account.id
 												}/statement?periodo=${formatPeriodForUrl(period)}`}
-												className="inline-flex max-w-full items-center gap-1 text-sm font-medium text-foreground underline-offset-2 hover:text-primary hover:underline"
+												className={styles.titleLink}
 											>
 												<span className="truncate">{account.name}</span>
 											</Link>

-											<div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
+											<div className={styles.meta}>
 												<span className="truncate">{account.accountType}</span>
 												{account.excludeFromBalance ? (
 													<Tooltip>
@@ -195,10 +193,10 @@ export function MyAccountsWidget({
 										</div>
 									</div>

-									<div className="flex flex-col items-end gap-0.5 text-right">
+									<div className={styles.trailing}>
 										<MoneyValues
 											className={cn(
-												"font-medium",
+												styles.trailingValue,
 												account.balance < 0 && "text-destructive",
 											)}
 											amount={account.balance}
--- a/src/features/dashboard/components/widgets/payers-widget.tsx
+++ b/src/features/dashboard/components/widgets/payers-widget.tsx
@@ -2,6 +2,7 @@

 import { RiGroupLine, RiVerifiedBadgeFill } from "@remixicon/react";
 import Link from "next/link";
+import { dashboardWidgetListStyles as styles } from "@/features/dashboard/components/dashboard-widget-list-styles";
 import { PercentageChangeIndicator } from "@/features/dashboard/components/percentage-change-indicator";
 import type { DashboardPagador } from "@/features/dashboard/lib/payers-queries";
 import MoneyValues from "@/shared/components/money-values";
@@ -44,14 +45,9 @@ export function PayersWidget({ payers }: PayersWidgetProps) {
 							: null;

 						return (
-							<div
-								key={payer.id}
-								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">
+							<div key={payer.id} className={styles.row}>
+								<span className={styles.rank}>{index + 1}</span>
+								<div className={styles.main}>
 									<Avatar className="size-9.5 shrink-0">
 										<AvatarImage
 											src={getAvatarSrc(payer.avatarUrl)}
@@ -60,11 +56,11 @@ export function PayersWidget({ payers }: PayersWidgetProps) {
 										<AvatarFallback>{initials}</AvatarFallback>
 									</Avatar>

-									<div className="min-w-0">
+									<div className={styles.textStack}>
 										<Link
 											prefetch
 											href={`/payers/${payer.id}`}
-											className="inline-flex max-w-full items-center gap-1 text-sm text-foreground underline-offset-2 hover:text-primary hover:underline"
+											className={styles.titleLink}
 										>
 											<span className="truncate font-medium">{payer.name}</span>
 											{payer.isAdmin && (
@@ -84,18 +80,18 @@ export function PayersWidget({ payers }: PayersWidgetProps) {
 												</Tooltip>
 											)}
 										</Link>
-										<p className="truncate text-xs text-muted-foreground">
-											Despesas no período
-										</p>
+										<p className={styles.meta}>Despesas no período</p>
 									</div>
 								</div>

-								<div className="flex shrink-0 flex-col items-end">
+								<div className={styles.trailing}>
 									<MoneyValues
-										className="font-medium"
+										className={styles.trailingValue}
 										amount={payer.totalExpenses}
 									/>
-									<div className="flex items-center gap-1 text-xs text-muted-foreground">
+									<div
+										className={`${styles.trailingMeta} text-muted-foreground`}
+									>
 										<PercentageChangeIndicator value={percentageChange} />
 										{percentageChange !== null ? (
 											<span>vs. mês ant.</span>
--- a/src/features/dashboard/components/widgets/purchases-by-category-widget.tsx
+++ b/src/features/dashboard/components/widgets/purchases-by-category-widget.tsx
@@ -3,6 +3,7 @@
 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 { dashboardWidgetListStyles as styles } from "@/features/dashboard/components/dashboard-widget-list-styles";
 import { EstablishmentLogo } from "@/shared/components/entity-avatar";
 import MoneyValues from "@/shared/components/money-values";
 import {
@@ -162,26 +163,21 @@ export function PurchasesByCategoryWidget({
 				<div className="flex flex-col">
 					{currentTransactions.map((transaction) => {
 						return (
-							<div
-								key={transaction.id}
-								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-2">
+							<div key={transaction.id} className={styles.row}>
+								<div className={styles.main}>
 									<EstablishmentLogo name={transaction.name} size={37} />

-									<div className="min-w-0">
-										<p className="truncate text-sm font-medium text-foreground">
-											{transaction.name}
-										</p>
-										<p className="text-xs text-muted-foreground">
+									<div className={styles.textStack}>
+										<p className={styles.title}>{transaction.name}</p>
+										<p className={styles.meta}>
 											{formatTransactionDate(transaction.purchaseDate)}
 										</p>
 									</div>
 								</div>

-								<div className="shrink-0 text-foreground">
+								<div className={styles.trailing}>
 									<MoneyValues
-										className="font-medium"
+										className={styles.trailingValue}
 										amount={transaction.amount}
 									/>
 								</div>
--- a/src/features/dashboard/components/widgets/recurring-expenses-widget.tsx
+++ b/src/features/dashboard/components/widgets/recurring-expenses-widget.tsx
@@ -1,4 +1,5 @@
 import { RiRefreshLine } from "@remixicon/react";
+import { dashboardWidgetListStyles as styles } from "@/features/dashboard/components/dashboard-widget-list-styles";
 import type { RecurringExpensesData } from "@/features/dashboard/expenses/recurring-expenses-queries";
 import { EstablishmentLogo } from "@/shared/components/entity-avatar";
 import MoneyValues from "@/shared/components/money-values";
@@ -36,31 +37,27 @@ export function RecurringExpensesWidget({
 				.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 key={expense.id} className={styles.row}>
+							<div className={styles.main}>
+								<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>
-
-									<MoneyValues
-										className="font-medium"
-										amount={expense.amount}
-									/>
+								<div className={styles.textStack}>
+									<p className={styles.title}>{expense.name}</p>
+									<div className={styles.meta}>
+										<span className="inline-flex min-w-0 items-center gap-1 [&_svg]:size-3.5">
+											{getPaymentMethodIcon(expense.paymentMethod)}
+											{expense.paymentMethod}
+										</span>
+										<span>{formatOccurrences(expense.recurrenceCount)}</span>
+									</div>
 								</div>
+							</div>

-								<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 className={styles.trailing}>
+								<MoneyValues
+									className={styles.trailingValue}
+									amount={expense.amount}
+								/>
 							</div>
 						</div>
 					);
--- a/src/features/dashboard/components/widgets/top-establishments-widget.tsx
+++ b/src/features/dashboard/components/widgets/top-establishments-widget.tsx
@@ -1,4 +1,5 @@
 import { RiStore2Line } from "@remixicon/react";
+import { dashboardWidgetListStyles as styles } from "@/features/dashboard/components/dashboard-widget-list-styles";
 import type { TopEstablishmentsData } from "@/features/dashboard/lib/top-establishments-queries";
 import { EstablishmentLogo } from "@/shared/components/entity-avatar";
 import MoneyValues from "@/shared/components/money-values";
@@ -30,30 +31,23 @@ export function TopEstablishmentsWidget({
 				<div className="flex flex-col">
 					{data.establishments.map((establishment, index) => {
 						return (
-							<div
-								key={establishment.id}
-								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">
+							<div key={establishment.id} className={styles.row}>
+								<span className={styles.rank}>{index + 1}</span>
+								<div className={styles.main}>
 									<EstablishmentLogo name={establishment.name} size={37} />

-									<div className="min-w-0">
-										<p className="truncate text-sm font-medium text-foreground">
-											{establishment.name}
-										</p>
-										<p className="text-xs text-muted-foreground">
+									<div className={styles.textStack}>
+										<p className={styles.title}>{establishment.name}</p>
+										<p className={styles.meta}>
 											{formatOccurrencesLabel(establishment.occurrences)} ·
 											total acumulado
 										</p>
 									</div>
 								</div>

-								<div className="shrink-0 text-foreground">
+								<div className={styles.trailing}>
 									<MoneyValues
-										className="font-medium"
+										className={styles.trailingValue}
 										amount={establishment.amount}
 									/>
 								</div>
--- a/src/features/dashboard/components/widgets/top-expenses-widget.tsx
+++ b/src/features/dashboard/components/widgets/top-expenses-widget.tsx
@@ -2,6 +2,7 @@

 import { RiArrowUpDoubleLine } from "@remixicon/react";
 import { useMemo } from "react";
+import { dashboardWidgetListStyles as styles } from "@/features/dashboard/components/dashboard-widget-list-styles";
 import type {
 	TopExpense,
 	TopExpensesData,
@@ -49,29 +50,22 @@ export function TopExpensesWidget({ data }: TopExpensesWidgetProps) {
 				<div className="flex flex-col">
 					{expenses.map((expense, index) => {
 						return (
-							<div
-								key={expense.id}
-								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">
+							<div key={expense.id} className={styles.row}>
+								<span className={styles.rank}>{index + 1}</span>
+								<div className={styles.main}>
 									<EstablishmentLogo name={expense.name} size={37} />

-									<div className="min-w-0">
-										<p className="truncate text-sm font-medium text-foreground">
-											{expense.name}
-										</p>
-										<p className="text-xs text-muted-foreground">
+									<div className={styles.textStack}>
+										<p className={styles.title}>{expense.name}</p>
+										<p className={styles.meta}>
 											{formatTransactionDate(expense.purchaseDate)}
 										</p>
 									</div>
 								</div>

-								<div className="shrink-0 text-foreground">
+								<div className={styles.trailing}>
 									<MoneyValues
-										className="font-medium"
+										className={styles.trailingValue}
 										amount={expense.amount}
 									/>
 								</div>
--- a/src/features/dashboard/expenses/installment-analysis-queries.ts
+++ b/src/features/dashboard/expenses/installment-analysis-queries.ts
@@ -45,6 +45,7 @@ type InstallmentDetail = {
 export type InstallmentGroup = {
 	seriesId: string;
 	name: string;
+	note: string | null;
 	paymentMethod: string;
 	cardId: string | null;
 	cartaoName: string | null;
@@ -80,6 +81,7 @@ export async function fetchInstallmentAnalysis(
 			id: transactions.id,
 			seriesId: transactions.seriesId,
 			name: transactions.name,
+			note: transactions.note,
 			amount: transactions.amount,
 			paymentMethod: transactions.paymentMethod,
 			currentInstallment: transactions.currentInstallment,
@@ -150,6 +152,7 @@ export async function fetchInstallmentAnalysis(
 			seriesMap.set(row.seriesId, {
 				seriesId: row.seriesId,
 				name: row.name,
+				note: row.note,
 				paymentMethod: row.paymentMethod,
 				cardId: row.cardId,
 				cartaoName: row.cartaoName,
--- a/src/features/dashboard/notes/notes-mappers.ts
+++ b/src/features/dashboard/notes/notes-mappers.ts
@@ -9,6 +9,7 @@ const mapDashboardNoteToNote = (note: DashboardNote): Note => ({
 	tasks: note.tasks,
 	archived: note.archived,
 	createdAt: note.createdAt,
+	attachments: [],
 });

 export const mapDashboardNotesToNotes = (notes: DashboardNote[]) =>
--- a/src/features/dashboard/widget-registry/widget-config.tsx
+++ b/src/features/dashboard/widget-registry/widget-config.tsx
@@ -174,9 +174,10 @@ export const widgetsConfig: WidgetConfig[] = [
 		title: "Tendências de categorias",
 		subtitle: "Top 10 maiores variações vs. mês anterior",
 		icon: <RiLineChartLine className="size-4" />,
-		component: ({ data }) => (
+		component: ({ data, period }) => (
 			<CategoryTrendsWidget
 				categories={data.expensesByCategoryData.categories}
+				period={period}
 			/>
 		),
 	},
--- a/src/features/invoices/components/invoice-summary-card.tsx
+++ b/src/features/invoices/components/invoice-summary-card.tsx
@@ -206,32 +206,32 @@ export function InvoiceSummaryCard({
 	};

 	return (
-		<Card className="gap-0 py-0">
+		<Card className="gap-0 py-0 space-y-2">
 			<CardContent className="px-4 py-4 sm:px-5 sm:py-5">
 				<div className="flex flex-col gap-4">
 					{/* Linha 1 — identidade */}
-					<div className="flex items-center justify-between gap-3">
-						<div className="flex min-w-0 items-center gap-3">
+					<div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+						<div className="flex min-w-0 items-start gap-3">
 							{logoPath ? (
 								<div className="flex size-12 shrink-0 items-center justify-center overflow-hidden rounded-full">
 									<Image
 										src={logoPath}
 										alt={`Logo ${cardName}`}
-										width={42}
-										height={42}
+										width={48}
+										height={48}
 										className="h-full w-full object-contain"
 									/>
 								</div>
 							) : cardBrand ? (
-								<span className="flex size-10 shrink-0 items-center justify-center rounded-full border bg-background text-xs font-medium text-muted-foreground">
+								<span className="flex size-12 shrink-0 items-center justify-center rounded-full border bg-card text-sm font-semibold text-primary">
 									{cardBrand.slice(0, 2).toUpperCase()}
 								</span>
 							) : null}
-							<div className="min-w-0">
-								<h2 className="truncate text-sm font-semibold text-foreground">
+							<div className="min-w-0 space-y-1">
+								<h2 className="truncate text-xl font-semibold text-foreground sm:text-2xl">
 									{cardName}
 								</h2>
-								<p className="text-xs text-muted-foreground">
+								<p className="text-sm leading-relaxed text-muted-foreground">
 									Fatura de {periodLabel}
 								</p>
 							</div>
--- a/src/features/notes/actions.ts
+++ b/src/features/notes/actions.ts
@@ -1,8 +1,8 @@
 "use server";

-import { and, eq } from "drizzle-orm";
+import { and, eq, inArray } from "drizzle-orm";
 import { z } from "zod";
-import { notes } from "@/db/schema";
+import { attachments, noteAttachments, notes } from "@/db/schema";
 import {
 	handleActionError,
 	revalidateForEntity,
@@ -10,6 +10,7 @@ import {
 import { getUser } from "@/shared/lib/auth/server";
 import { db } from "@/shared/lib/db";
 import { uuidSchema } from "@/shared/lib/schemas/common";
+import { deleteS3Object } from "@/shared/lib/storage/presign";
 import type { ActionResult } from "@/shared/lib/types/actions";

 const taskSchema = z.object({
@@ -70,25 +71,42 @@ type NoteDeleteInput = z.infer<typeof deleteNoteSchema>;

 export async function createNoteAction(
 	input: NoteCreateInput,
-): Promise<ActionResult> {
+): Promise<ActionResult<{ noteId: string }>> {
 	try {
 		const user = await getUser();
 		const data = createNoteSchema.parse(input);

-		await db.insert(notes).values({
-			title: data.title,
-			description: data.description,
-			type: data.type,
-			tasks:
-				data.tasks && data.tasks.length > 0 ? JSON.stringify(data.tasks) : null,
-			userId: user.id,
-		});
+		const [created] = await db
+			.insert(notes)
+			.values({
+				title: data.title,
+				description: data.description,
+				type: data.type,
+				tasks:
+					data.tasks && data.tasks.length > 0
+						? JSON.stringify(data.tasks)
+						: null,
+				userId: user.id,
+			})
+			.returning({ id: notes.id });
+
+		if (!created) {
+			return { success: false, error: "Não foi possível criar a anotação." };
+		}

 		revalidateForEntity("notes", user.id);

-		return { success: true, message: "Anotação criada com sucesso." };
+		return {
+			success: true,
+			message: "Anotação criada com sucesso.",
+			data: { noteId: created.id },
+		};
 	} catch (error) {
-		return handleActionError(error);
+		const result = handleActionError(error);
+		return {
+			success: false,
+			error: result.success ? "Ocorreu um erro inesperado." : result.error,
+		};
 	}
 }

@@ -135,6 +153,25 @@ export async function deleteNoteAction(
 		const user = await getUser();
 		const data = deleteNoteSchema.parse(input);

+		const linkedAttachments = await db
+			.select({ id: attachments.id, fileKey: attachments.fileKey })
+			.from(noteAttachments)
+			.innerJoin(
+				attachments,
+				and(
+					eq(noteAttachments.attachmentId, attachments.id),
+					eq(attachments.userId, user.id),
+				),
+			)
+			.innerJoin(
+				notes,
+				and(
+					eq(noteAttachments.noteId, notes.id),
+					eq(notes.id, data.id),
+					eq(notes.userId, user.id),
+				),
+			);
+
 		const [deleted] = await db
 			.delete(notes)
 			.where(and(eq(notes.id, data.id), eq(notes.userId, user.id)))
@@ -147,6 +184,23 @@ export async function deleteNoteAction(
 			};
 		}

+		if (linkedAttachments.length > 0) {
+			await Promise.all(
+				linkedAttachments.map((attachment) =>
+					deleteS3Object(attachment.fileKey),
+				),
+			);
+			await db.delete(attachments).where(
+				and(
+					eq(attachments.userId, user.id),
+					inArray(
+						attachments.id,
+						linkedAttachments.map((attachment) => attachment.id),
+					),
+				),
+			);
+		}
+
 		revalidateForEntity("notes", user.id);

 		return { success: true, message: "Anotação removida com sucesso." };
--- a/src/features/notes/actions/attachments.ts
+++ b/src/features/notes/actions/attachments.ts
@@ -0,0 +1,279 @@
+"use server";
+
+import crypto, { randomUUID } from "node:crypto";
+import { and, eq } from "drizzle-orm";
+import { z } from "zod/v4";
+import {
+	attachments,
+	noteAttachments,
+	notes,
+	userPreferences,
+} from "@/db/schema";
+import {
+	handleActionError,
+	revalidateForEntity,
+} from "@/shared/lib/actions/helpers";
+import {
+	ALLOWED_MIME_TYPES,
+	ATTACHMENT_SIZE_OPTIONS,
+} from "@/shared/lib/attachments/config";
+import { getUser } from "@/shared/lib/auth/server";
+import { db } from "@/shared/lib/db";
+import {
+	createPresignedPutUrl,
+	deleteS3Object,
+	headS3Object,
+} from "@/shared/lib/storage/presign";
+import type { ActionResult } from "@/shared/lib/types/actions";
+
+const UPLOAD_TOKEN_EXPIRY_SECONDS = 10 * 60;
+const MAX_NOTE_FILE_SIZE = Math.max(...ATTACHMENT_SIZE_OPTIONS) * 1024 * 1024;
+
+const presignSchema = z.object({
+	noteId: z.string().uuid(),
+	fileName: z.string().min(1).max(255),
+	mimeType: z.enum(ALLOWED_MIME_TYPES),
+	fileSize: z.number().positive().max(MAX_NOTE_FILE_SIZE),
+});
+
+const tokenPayloadSchema = presignSchema.extend({
+	userId: z.string().min(1),
+	fileKey: z.string().min(1),
+	exp: z.number().int(),
+});
+
+type UploadTokenPayload = z.infer<typeof tokenPayloadSchema>;
+
+type PresignResult =
+	| { success: true; presignedUrl: string; uploadToken: string }
+	| { success: false; error: string };
+
+export type NoteAttachmentData = {
+	attachmentId: string;
+	fileName: string;
+	fileSize: number;
+	mimeType: string;
+};
+
+function getUploadTokenSecret(): string {
+	const secret = process.env.BETTER_AUTH_SECRET;
+	if (!secret) throw new Error("BETTER_AUTH_SECRET is required.");
+	return secret;
+}
+
+function encode(value: string): string {
+	return Buffer.from(value).toString("base64url");
+}
+
+function signUploadToken(payload: UploadTokenPayload): string {
+	const encoded = encode(JSON.stringify(payload));
+	const signature = crypto
+		.createHmac("sha256", getUploadTokenSecret())
+		.update(encoded)
+		.digest("base64url");
+	return `${encoded}.${signature}`;
+}
+
+function verifyUploadToken(token: string): UploadTokenPayload | null {
+	try {
+		const [encoded, signature] = token.split(".");
+		if (!encoded || !signature) return null;
+		const expected = crypto
+			.createHmac("sha256", getUploadTokenSecret())
+			.update(encoded)
+			.digest("base64url");
+		if (
+			signature.length !== expected.length ||
+			!crypto.timingSafeEqual(Buffer.from(signature), Buffer.from(expected))
+		) {
+			return null;
+		}
+		const parsed = tokenPayloadSchema.safeParse(
+			JSON.parse(Buffer.from(encoded, "base64url").toString("utf8")),
+		);
+		if (!parsed.success || parsed.data.exp < Math.floor(Date.now() / 1000)) {
+			return null;
+		}
+		if (!parsed.data.fileKey.startsWith(`${parsed.data.userId}/`)) return null;
+		return parsed.data;
+	} catch {
+		return null;
+	}
+}
+
+async function findOwnedNote(noteId: string, userId: string) {
+	const [note] = await db
+		.select({ id: notes.id, type: notes.type })
+		.from(notes)
+		.where(and(eq(notes.id, noteId), eq(notes.userId, userId)));
+	return note?.type === "nota" ? note : null;
+}
+
+async function getAttachmentLimitBytes(userId: string): Promise<number> {
+	const [preferences] = await db
+		.select({ maxSizeMb: userPreferences.attachmentMaxSizeMb })
+		.from(userPreferences)
+		.where(eq(userPreferences.userId, userId));
+	return (preferences?.maxSizeMb ?? 50) * 1024 * 1024;
+}
+
+export async function getPresignedNoteAttachmentUploadUrlAction(input: {
+	noteId: string;
+	fileName: string;
+	mimeType: string;
+	fileSize: number;
+}): Promise<PresignResult> {
+	try {
+		const user = await getUser();
+		const data = presignSchema.parse(input);
+		if (data.fileSize > (await getAttachmentLimitBytes(user.id))) {
+			return {
+				success: false,
+				error: "O arquivo excede o limite configurado para anexos.",
+			};
+		}
+		if (!(await findOwnedNote(data.noteId, user.id))) {
+			return { success: false, error: "Nota não encontrada." };
+		}
+
+		const extensions: Record<(typeof ALLOWED_MIME_TYPES)[number], string> = {
+			"application/pdf": "pdf",
+			"image/jpeg": "jpg",
+			"image/png": "png",
+			"image/webp": "webp",
+		};
+		const extension = extensions[data.mimeType];
+		const fileKey = `${user.id}/${randomUUID()}.${extension}`;
+		const presignedUrl = await createPresignedPutUrl(fileKey, data.mimeType);
+		const uploadToken = signUploadToken({
+			...data,
+			userId: user.id,
+			fileKey,
+			exp: Math.floor(Date.now() / 1000) + UPLOAD_TOKEN_EXPIRY_SECONDS,
+		});
+		return { success: true, presignedUrl, uploadToken };
+	} catch (error) {
+		const result = handleActionError(error);
+		return {
+			success: false,
+			error: result.success ? "Algo deu errado." : result.error,
+		};
+	}
+}
+
+export async function confirmNoteAttachmentUploadAction(input: {
+	uploadToken: string;
+}): Promise<ActionResult<NoteAttachmentData>> {
+	try {
+		const user = await getUser();
+		const payload = verifyUploadToken(input.uploadToken);
+		if (!payload || payload.userId !== user.id) {
+			return { success: false, error: "Upload de anexo inválido ou expirado." };
+		}
+		if (!(await findOwnedNote(payload.noteId, user.id))) {
+			return { success: false, error: "Nota não encontrada." };
+		}
+
+		const metadata = await headS3Object(payload.fileKey);
+		if (
+			!metadata.contentLength ||
+			metadata.contentLength !== payload.fileSize ||
+			metadata.contentLength > MAX_NOTE_FILE_SIZE ||
+			metadata.contentType !== payload.mimeType
+		) {
+			return {
+				success: false,
+				error: "O arquivo enviado não confere com o upload autorizado.",
+			};
+		}
+
+		const [attachment] = await db
+			.insert(attachments)
+			.values({
+				userId: user.id,
+				fileKey: payload.fileKey,
+				fileName: payload.fileName,
+				fileSize: payload.fileSize,
+				mimeType: payload.mimeType,
+			})
+			.returning({ id: attachments.id });
+		if (!attachment)
+			return { success: false, error: "Não foi possível salvar o anexo." };
+
+		await db.insert(noteAttachments).values({
+			noteId: payload.noteId,
+			attachmentId: attachment.id,
+		});
+		revalidateForEntity("notes", user.id);
+		return {
+			success: true,
+			message: "Anexo enviado.",
+			data: {
+				attachmentId: attachment.id,
+				fileName: payload.fileName,
+				fileSize: payload.fileSize,
+				mimeType: payload.mimeType,
+			},
+		};
+	} catch (error) {
+		const result = handleActionError(error);
+		return {
+			success: false,
+			error: result.success ? "Ocorreu um erro inesperado." : result.error,
+		};
+	}
+}
+
+export async function removeNoteAttachmentAction(input: {
+	noteId: string;
+	attachmentId: string;
+}): Promise<ActionResult> {
+	try {
+		const user = await getUser();
+		const data = z
+			.object({ noteId: z.string().uuid(), attachmentId: z.string().uuid() })
+			.parse(input);
+		if (!(await findOwnedNote(data.noteId, user.id))) {
+			return { success: false, error: "Nota não encontrada." };
+		}
+		const [attachment] = await db
+			.select({ fileKey: attachments.fileKey })
+			.from(noteAttachments)
+			.innerJoin(
+				attachments,
+				and(
+					eq(noteAttachments.attachmentId, attachments.id),
+					eq(attachments.userId, user.id),
+				),
+			)
+			.where(
+				and(
+					eq(noteAttachments.noteId, data.noteId),
+					eq(noteAttachments.attachmentId, data.attachmentId),
+				),
+			);
+		if (!attachment) return { success: false, error: "Anexo não encontrado." };
+
+		await db
+			.delete(noteAttachments)
+			.where(
+				and(
+					eq(noteAttachments.noteId, data.noteId),
+					eq(noteAttachments.attachmentId, data.attachmentId),
+				),
+			);
+		await deleteS3Object(attachment.fileKey);
+		await db
+			.delete(attachments)
+			.where(
+				and(
+					eq(attachments.id, data.attachmentId),
+					eq(attachments.userId, user.id),
+				),
+			);
+		revalidateForEntity("notes", user.id);
+		return { success: true, message: "Anexo removido." };
+	} catch (error) {
+		return handleActionError(error);
+	}
+}
--- a/src/features/notes/components/note-attachments-field.tsx
+++ b/src/features/notes/components/note-attachments-field.tsx
@@ -0,0 +1,345 @@
+"use client";
+
+import {
+	RiAttachment2,
+	RiCloseLine,
+	RiDeleteBinLine,
+	RiDownloadLine,
+	RiFileImageLine,
+	RiFilePdf2Line,
+} from "@remixicon/react";
+import { useRef, useState } from "react";
+import { toast } from "sonner";
+import {
+	confirmNoteAttachmentUploadAction,
+	getPresignedNoteAttachmentUploadUrlAction,
+	removeNoteAttachmentAction,
+} from "@/features/notes/actions/attachments";
+import type { NoteAttachment } from "@/features/notes/components/types";
+import { Button } from "@/shared/components/ui/button";
+import {
+	Dialog,
+	DialogClose,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+} from "@/shared/components/ui/dialog";
+import {
+	ALLOWED_MIME_TYPES,
+	DEFAULT_MAX_FILE_SIZE_MB,
+} from "@/shared/lib/attachments/config";
+
+type UploadResult =
+	| { success: true; attachment: NoteAttachment }
+	| { success: false; error: string };
+
+export async function uploadNoteAttachment(
+	noteId: string,
+	file: File,
+): Promise<UploadResult> {
+	try {
+		const presign = await getPresignedNoteAttachmentUploadUrlAction({
+			noteId,
+			fileName: file.name,
+			fileSize: file.size,
+			mimeType: file.type,
+		});
+		if (!presign.success) return presign;
+
+		const uploaded = await fetch(presign.presignedUrl, {
+			method: "PUT",
+			body: file,
+			headers: { "Content-Type": file.type },
+		});
+		if (!uploaded.ok) {
+			return { success: false, error: "Não foi possível enviar o arquivo." };
+		}
+
+		const confirmed = await confirmNoteAttachmentUploadAction({
+			uploadToken: presign.uploadToken,
+		});
+		if (!confirmed.success || !confirmed.data) {
+			return {
+				success: false,
+				error: confirmed.success
+					? "Não foi possível salvar o anexo."
+					: confirmed.error,
+			};
+		}
+		return { success: true, attachment: confirmed.data };
+	} catch {
+		return {
+			success: false,
+			error: "Não foi possível enviar o arquivo agora.",
+		};
+	}
+}
+
+function formatBytes(bytes: number): string {
+	if (bytes < 1024) return `${bytes} B`;
+	if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+	return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+function validateFile(file: File, maxSizeMb: number): string | null {
+	if (
+		!ALLOWED_MIME_TYPES.includes(
+			file.type as (typeof ALLOWED_MIME_TYPES)[number],
+		)
+	) {
+		return "Tipo não suportado. Use PDF, JPEG, PNG ou WebP.";
+	}
+	if (file.size > maxSizeMb * 1024 * 1024) {
+		return `O arquivo deve ter no máximo ${maxSizeMb}MB.`;
+	}
+	return null;
+}
+
+interface NoteAttachmentsFieldProps {
+	noteId?: string;
+	attachments: NoteAttachment[];
+	pendingFiles: File[];
+	onAttachmentsChange: (attachments: NoteAttachment[]) => void;
+	onPendingFilesChange: (files: File[]) => void;
+	onBusyChange?: (busy: boolean) => void;
+	maxSizeMb?: number;
+	disabled?: boolean;
+	readonly?: boolean;
+}
+
+export function NoteAttachmentsField({
+	noteId,
+	attachments,
+	pendingFiles,
+	onAttachmentsChange,
+	onPendingFilesChange,
+	onBusyChange,
+	maxSizeMb = DEFAULT_MAX_FILE_SIZE_MB,
+	disabled = false,
+	readonly = false,
+}: NoteAttachmentsFieldProps) {
+	const inputRef = useRef<HTMLInputElement>(null);
+	const [uploading, setUploading] = useState(false);
+	const [removing, setRemoving] = useState<NoteAttachment | null>(null);
+	const [isRemoving, setIsRemoving] = useState(false);
+	const [openingId, setOpeningId] = useState<string | null>(null);
+
+	async function addFiles(files: File[]) {
+		const valid: File[] = [];
+		for (const file of files) {
+			const error = validateFile(file, maxSizeMb);
+			if (error) toast.error(`${file.name}: ${error}`);
+			else valid.push(file);
+		}
+		if (valid.length === 0) return;
+
+		if (!noteId) {
+			onPendingFilesChange([...pendingFiles, ...valid]);
+			return;
+		}
+
+		setUploading(true);
+		onBusyChange?.(true);
+		const added: NoteAttachment[] = [];
+		for (const file of valid) {
+			const result = await uploadNoteAttachment(noteId, file);
+			if (result.success) added.push(result.attachment);
+			else toast.error(`${file.name}: ${result.error}`);
+		}
+		setUploading(false);
+		onBusyChange?.(false);
+		if (added.length > 0) {
+			onAttachmentsChange([...attachments, ...added]);
+			toast.success(
+				added.length === 1
+					? "Anexo enviado."
+					: `${added.length} anexos enviados.`,
+			);
+		}
+	}
+
+	async function downloadAttachment(attachment: NoteAttachment) {
+		setOpeningId(attachment.attachmentId);
+		try {
+			const response = await fetch(
+				`/api/attachments/${attachment.attachmentId}/presign`,
+			);
+			if (!response.ok) throw new Error();
+			const { url } = (await response.json()) as { url: string };
+			const anchor = document.createElement("a");
+			anchor.href = url;
+			anchor.download = attachment.fileName;
+			anchor.target = "_blank";
+			anchor.rel = "noreferrer";
+			anchor.click();
+		} catch {
+			toast.error("Não foi possível baixar o anexo agora.");
+		} finally {
+			setOpeningId(null);
+		}
+	}
+
+	async function confirmRemove() {
+		if (!noteId || !removing) return;
+		setIsRemoving(true);
+		onBusyChange?.(true);
+		const result = await removeNoteAttachmentAction({
+			noteId,
+			attachmentId: removing.attachmentId,
+		});
+		setIsRemoving(false);
+		onBusyChange?.(false);
+		if (result.success) {
+			onAttachmentsChange(
+				attachments.filter(
+					(item) => item.attachmentId !== removing.attachmentId,
+				),
+			);
+			setRemoving(null);
+			toast.success(result.message);
+		} else {
+			toast.error(result.error);
+		}
+	}
+
+	return (
+		<div className="space-y-1.5">
+			<p className="text-xs font-medium">Anexos</p>
+			<input
+				ref={inputRef}
+				type="file"
+				multiple
+				className="hidden"
+				accept={ALLOWED_MIME_TYPES.join(",")}
+				onChange={(event) => {
+					void addFiles(Array.from(event.target.files ?? []));
+					event.target.value = "";
+				}}
+			/>
+
+			{attachments.length > 0 && (
+				<div className="space-y-1.5">
+					{attachments.map((attachment) => (
+						<div
+							key={attachment.attachmentId}
+							className="flex min-w-0 items-center gap-2 rounded-md border px-3 py-2 text-sm"
+						>
+							{attachment.mimeType === "application/pdf" ? (
+								<RiFilePdf2Line className="size-4 shrink-0 text-red-500" />
+							) : (
+								<RiFileImageLine className="size-4 shrink-0 text-blue-500" />
+							)}
+							<div className="min-w-0 flex-1">
+								<p className="truncate font-medium" title={attachment.fileName}>
+									{attachment.fileName}
+								</p>
+								<p className="text-xs text-muted-foreground">
+									{formatBytes(attachment.fileSize)}
+								</p>
+							</div>
+							<Button
+								type="button"
+								variant="ghost"
+								size="icon"
+								className="size-7 shrink-0"
+								disabled={openingId === attachment.attachmentId}
+								onClick={() => void downloadAttachment(attachment)}
+								aria-label={`Baixar ${attachment.fileName}`}
+							>
+								<RiDownloadLine className="size-4" />
+							</Button>
+							{!readonly && (
+								<Button
+									type="button"
+									variant="ghost"
+									size="icon"
+									className="size-7 shrink-0 text-destructive hover:text-destructive"
+									disabled={disabled}
+									onClick={() => setRemoving(attachment)}
+									aria-label={`Remover ${attachment.fileName}`}
+								>
+									<RiDeleteBinLine className="size-4" />
+								</Button>
+							)}
+						</div>
+					))}
+				</div>
+			)}
+
+			{pendingFiles.map((file, index) => (
+				<div
+					key={`${file.name}-${file.size}-${file.lastModified}-${index}`}
+					className="flex min-w-0 items-center gap-2 rounded-md border border-dashed px-3 py-2 text-sm"
+				>
+					<RiAttachment2 className="size-4 shrink-0 text-muted-foreground" />
+					<div className="min-w-0 flex-1">
+						<p className="truncate font-medium">{file.name}</p>
+						<p className="text-xs text-muted-foreground">
+							Será enviado ao salvar
+						</p>
+					</div>
+					<Button
+						type="button"
+						variant="ghost"
+						size="icon"
+						className="size-7 shrink-0"
+						onClick={() =>
+							onPendingFilesChange(
+								pendingFiles.filter((_, fileIndex) => fileIndex !== index),
+							)
+						}
+						aria-label={`Cancelar ${file.name}`}
+					>
+						<RiCloseLine className="size-4" />
+					</Button>
+				</div>
+			))}
+
+			{!readonly && (
+				<button
+					type="button"
+					className="flex min-h-16 w-full items-center justify-center gap-2 rounded-md border border-dashed px-3 text-sm text-muted-foreground transition-colors hover:border-foreground/40 hover:text-foreground disabled:pointer-events-none disabled:opacity-50"
+					onClick={() => inputRef.current?.click()}
+					disabled={disabled || uploading}
+				>
+					<RiAttachment2 className="size-4" />
+					<span>{uploading ? "Enviando..." : "Adicionar anexos"}</span>
+					<span className="hidden text-xs sm:inline">
+						PDF ou imagem · máx. {maxSizeMb} MB
+					</span>
+				</button>
+			)}
+
+			<Dialog
+				open={Boolean(removing)}
+				onOpenChange={(open) => !open && setRemoving(null)}
+			>
+				<DialogContent className="sm:max-w-sm">
+					<DialogHeader>
+						<DialogTitle>Remover anexo?</DialogTitle>
+						<DialogDescription>
+							O arquivo {removing?.fileName} será removido desta nota.
+						</DialogDescription>
+					</DialogHeader>
+					<DialogFooter>
+						<DialogClose asChild>
+							<Button type="button" variant="outline" disabled={isRemoving}>
+								Cancelar
+							</Button>
+						</DialogClose>
+						<Button
+							type="button"
+							variant="destructive"
+							disabled={isRemoving}
+							onClick={() => void confirmRemove()}
+						>
+							{isRemoving ? "Removendo..." : "Remover"}
+						</Button>
+					</DialogFooter>
+				</DialogContent>
+			</Dialog>
+		</div>
+	);
+}
--- a/src/features/notes/components/note-card.tsx
+++ b/src/features/notes/components/note-card.tsx
@@ -2,6 +2,7 @@

 import {
 	RiArchiveLine,
+	RiAttachment2,
 	RiCheckLine,
 	RiDeleteBin5Line,
 	RiFileList2Line,
@@ -87,11 +88,19 @@ export function NoteCard({
 							</span>
 						)}
 					</div>
-					{isTask && (
-						<Badge variant="outline" className="shrink-0 text-xs">
-							{completedCount}/{totalCount} concluídas
-						</Badge>
-					)}
+					<div className="flex shrink-0 flex-col items-end gap-1.5">
+						{isTask && (
+							<Badge variant="outline" className="shrink-0 text-xs">
+								{completedCount}/{totalCount} concluídas
+							</Badge>
+						)}
+						{!isTask && note.attachments.length > 0 && (
+							<Badge variant="outline" className="gap-1 text-xs">
+								<RiAttachment2 className="size-3.5" />
+								{note.attachments.length}
+							</Badge>
+						)}
+					</div>
 				</div>

 				{isTask ? (
--- a/src/features/notes/components/note-details-dialog.tsx
+++ b/src/features/notes/components/note-details-dialog.tsx
@@ -1,6 +1,7 @@
 "use client";

 import { RiCheckLine, RiSubtractLine } from "@remixicon/react";
+import { NoteAttachmentsField } from "@/features/notes/components/note-attachments-field";
 import {
 	buildNoteDisplayTitle,
 	formatNoteCreatedAtLong,
@@ -85,8 +86,20 @@ export function NoteDetailsDialog({
 						))}
 					</div>
 				) : (
-					<div className="max-h-[320px] overflow-auto whitespace-pre-line wrap-break-word text-sm text-foreground">
-						{note.description}
+					<div className="max-h-[55vh] space-y-4 overflow-auto">
+						<div className="whitespace-pre-line wrap-break-word text-sm text-foreground">
+							{note.description}
+						</div>
+						{note.attachments.length > 0 && (
+							<NoteAttachmentsField
+								noteId={note.id}
+								attachments={note.attachments}
+								pendingFiles={[]}
+								onAttachmentsChange={() => undefined}
+								onPendingFilesChange={() => undefined}
+								readonly
+							/>
+						)}
 					</div>
 				)}

--- a/src/features/notes/components/note-dialog.tsx
+++ b/src/features/notes/components/note-dialog.tsx
@@ -15,6 +15,10 @@ import {
 } from "react";
 import { toast } from "sonner";
 import { createNoteAction, updateNoteAction } from "@/features/notes/actions";
+import {
+	NoteAttachmentsField,
+	uploadNoteAttachment,
+} from "@/features/notes/components/note-attachments-field";
 import { Button } from "@/shared/components/ui/button";
 import { Checkbox } from "@/shared/components/ui/checkbox";
 import {
@@ -34,6 +38,7 @@ import { useFormState } from "@/shared/hooks/use-form-state";
 import { cn } from "@/shared/utils/ui";
 import {
 	type Note,
+	type NoteAttachment,
 	type NoteFormValues,
 	sortTasksByStatus,
 	type Task,
@@ -46,6 +51,7 @@ interface NoteDialogProps {
 	note?: Note;
 	open?: boolean;
 	onOpenChange?: (open: boolean) => void;
+	attachmentMaxSizeMb?: number;
 }

 const MAX_TITLE = 30;
@@ -69,12 +75,16 @@ export function NoteDialog({
 	note,
 	open,
 	onOpenChange,
+	attachmentMaxSizeMb,
 }: NoteDialogProps) {
 	const [isPending, startTransition] = useTransition();
 	const [errorMessage, setErrorMessage] = useState<string | null>(null);
 	const [newTaskText, setNewTaskText] = useState("");
 	const [editingTaskId, setEditingTaskId] = useState<string | null>(null);
 	const [editingTaskText, setEditingTaskText] = useState("");
+	const [noteAttachments, setNoteAttachments] = useState<NoteAttachment[]>([]);
+	const [pendingFiles, setPendingFiles] = useState<File[]>([]);
+	const [isAttachmentPending, setIsAttachmentPending] = useState(false);

 	const titleRef = useRef<HTMLInputElement>(null);
 	const descRef = useRef<HTMLTextAreaElement>(null);
@@ -99,6 +109,9 @@ export function NoteDialog({
 			setNewTaskText("");
 			setEditingTaskId(null);
 			setEditingTaskText("");
+			setNoteAttachments(note?.attachments ?? []);
+			setPendingFiles([]);
+			setIsAttachmentPending(false);
 			requestAnimationFrame(() => titleRef.current?.focus());
 		}
 	}, [dialogOpen, note, resetForm]);
@@ -137,12 +150,14 @@ export function NoteDialog({

 	const disableSubmit =
 		isPending ||
+		isAttachmentPending ||
 		onlySpaces ||
 		unchanged ||
 		invalidLen ||
 		Boolean(editingTaskId);

 	const handleOpenChange = (v: boolean) => {
+		if (!v && (isPending || isAttachmentPending)) return;
 		setDialogOpen(v);
 		if (!v) setErrorMessage(null);
 	};
@@ -252,7 +267,9 @@ export function NoteDialog({
 		}

 		startTransition(async () => {
-			let result: { success: boolean; message?: string; error?: string };
+			let result:
+				| Awaited<ReturnType<typeof createNoteAction>>
+				| Awaited<ReturnType<typeof updateNoteAction>>;
 			if (mode === "create") {
 				result = await createNoteAction(payload);
 			} else {
@@ -266,7 +283,31 @@ export function NoteDialog({
 			}

 			if (result.success) {
-				toast.success(result.message);
+				if (mode === "create" && pendingFiles.length > 0) {
+					const noteId = "data" in result ? result.data?.noteId : undefined;
+					if (noteId) {
+						let failedUploads = 0;
+						for (const file of pendingFiles) {
+							const upload = await uploadNoteAttachment(noteId, file);
+							if (!upload.success) failedUploads += 1;
+						}
+						if (failedUploads > 0) {
+							toast.warning(
+								failedUploads === 1
+									? "A nota foi salva, mas um anexo não pôde ser enviado."
+									: `A nota foi salva, mas ${failedUploads} anexos não puderam ser enviados.`,
+							);
+						} else {
+							toast.success(
+								pendingFiles.length === 1
+									? "Anotação e anexo salvos."
+									: "Anotação e anexos salvos.",
+							);
+						}
+					}
+				} else {
+					toast.success(result.message);
+				}
 				setDialogOpen(false);
 				return;
 			}
@@ -355,35 +396,48 @@ export function NoteDialog({
 					</div>

 					{isNote && (
-						<div className="space-y-1">
-							<div className="flex items-center justify-between">
-								<Label htmlFor="note-description">Conteúdo</Label>
-								<span
-									className={cn(
-										"text-xs",
-										descCount > MAX_DESC
-											? "text-destructive"
-											: "text-muted-foreground",
-									)}
-								>
-									{descCount}/{MAX_DESC}
-								</span>
+						<div className="space-y-3">
+							<div className="space-y-1">
+								<div className="flex items-center justify-between">
+									<Label htmlFor="note-description">Conteúdo</Label>
+									<span
+										className={cn(
+											"text-xs",
+											descCount > MAX_DESC
+												? "text-destructive"
+												: "text-muted-foreground",
+										)}
+									>
+										{descCount}/{MAX_DESC}
+									</span>
+								</div>
+								<Textarea
+									id="note-description"
+									className="field-sizing-fixed"
+									ref={descRef}
+									value={formState.description}
+									onChange={(e) => updateField("description", e.target.value)}
+									placeholder="Detalhe sua anotação..."
+									rows={5}
+									maxLength={MAX_DESC + 10}
+									disabled={isPending}
+									required
+								/>
+								<p className="text-xs text-muted-foreground">
+									Ctrl+Enter para salvar
+								</p>
 							</div>
-							<Textarea
-								id="note-description"
-								className="field-sizing-fixed"
-								ref={descRef}
-								value={formState.description}
-								onChange={(e) => updateField("description", e.target.value)}
-								placeholder="Detalhe sua anotação..."
-								rows={5}
-								maxLength={MAX_DESC + 10}
+
+							<NoteAttachmentsField
+								noteId={mode === "update" ? note?.id : undefined}
+								attachments={noteAttachments}
+								pendingFiles={pendingFiles}
+								onAttachmentsChange={setNoteAttachments}
+								onPendingFilesChange={setPendingFiles}
+								onBusyChange={setIsAttachmentPending}
+								maxSizeMb={attachmentMaxSizeMb}
 								disabled={isPending}
-								required
 							/>
-							<p className="text-xs text-muted-foreground">
-								Ctrl+Enter para salvar
-							</p>
 						</div>
 					)}

@@ -517,7 +571,7 @@ export function NoteDialog({
 						type="button"
 						variant="outline"
 						onClick={() => handleOpenChange(false)}
-						disabled={isPending}
+						disabled={isPending || isAttachmentPending}
 					>
 						Cancelar
 					</Button>
--- a/src/features/notes/components/notes-page.tsx
+++ b/src/features/notes/components/notes-page.tsx
@@ -22,9 +22,14 @@ import type { Note } from "./types";
 interface NotesPageProps {
 	notes: Note[];
 	archivedNotes: Note[];
+	attachmentMaxSizeMb?: number;
 }

-export function NotesPage({ notes, archivedNotes }: NotesPageProps) {
+export function NotesPage({
+	notes,
+	archivedNotes,
+	attachmentMaxSizeMb,
+}: NotesPageProps) {
 	const [activeTab, setActiveTab] = useState("ativas");
 	const [createOpen, setCreateOpen] = useState(false);
 	const [editOpen, setEditOpen] = useState(false);
@@ -192,6 +197,7 @@ export function NotesPage({ notes, archivedNotes }: NotesPageProps) {
 						mode="create"
 						open={createOpen}
 						onOpenChange={handleCreateOpenChange}
+						attachmentMaxSizeMb={attachmentMaxSizeMb}
 						trigger={
 							<Button className="w-full sm:w-auto">
 								<RiAddFill className="size-4" />
@@ -222,6 +228,7 @@ export function NotesPage({ notes, archivedNotes }: NotesPageProps) {
 				note={noteToEdit ?? undefined}
 				open={editOpen}
 				onOpenChange={handleEditOpenChange}
+				attachmentMaxSizeMb={attachmentMaxSizeMb}
 			/>

 			<NoteDetailsDialog
--- a/src/features/notes/components/types.ts
+++ b/src/features/notes/components/types.ts
@@ -14,6 +14,14 @@ export interface Note {
 	tasks?: Task[];
 	archived: boolean;
 	createdAt: string;
+	attachments: NoteAttachment[];
+}
+
+export interface NoteAttachment {
+	attachmentId: string;
+	fileName: string;
+	fileSize: number;
+	mimeType: string;
 }

 export interface NoteFormValues {
--- a/src/features/notes/queries.ts
+++ b/src/features/notes/queries.ts
@@ -1,7 +1,14 @@
-import { and, eq } from "drizzle-orm";
-import { type Note, notes } from "@/db/schema";
+import { and, desc, eq } from "drizzle-orm";
+import { attachments, type Note, noteAttachments, notes } from "@/db/schema";
 import { db } from "@/shared/lib/db";

+export type NoteAttachmentData = {
+	attachmentId: string;
+	fileName: string;
+	fileSize: number;
+	mimeType: string;
+};
+
 type Task = {
 	id: string;
 	text: string;
@@ -16,6 +23,7 @@ type NoteData = {
 	tasks?: Task[];
 	archived: boolean;
 	createdAt: string;
+	attachments: NoteAttachmentData[];
 };

 function parseTasks(value: string | null): Task[] | undefined {
@@ -31,7 +39,10 @@ function parseTasks(value: string | null): Task[] | undefined {
 	}
 }

-function toNoteData(note: Note): NoteData {
+function toNoteData(
+	note: Note,
+	linkedAttachments: NoteAttachmentData[],
+): NoteData {
 	return {
 		id: note.id,
 		title: (note.title ?? "").trim(),
@@ -40,34 +51,53 @@ function toNoteData(note: Note): NoteData {
 		tasks: parseTasks(note.tasks),
 		archived: note.archived,
 		createdAt: note.createdAt.toISOString(),
+		attachments: linkedAttachments,
 	};
 }

-async function fetchNotesForUser(userId: string): Promise<NoteData[]> {
-	const noteRows = await db.query.notes.findMany({
-		where: and(eq(notes.userId, userId), eq(notes.archived, false)),
-		orderBy: (table, { desc }) => [desc(table.createdAt)],
-	});
-
-	return noteRows.map(toNoteData);
-}
-
 export async function fetchAllNotesForUser(
 	userId: string,
 ): Promise<{ activeNotes: NoteData[]; archivedNotes: NoteData[] }> {
-	const [activeNotes, archivedNotes] = await Promise.all([
-		fetchNotesForUser(userId),
-		fetchArchivedForUser(userId),
+	const [noteRows, attachmentRows] = await Promise.all([
+		db.query.notes.findMany({
+			where: eq(notes.userId, userId),
+			orderBy: (table, { desc }) => [desc(table.createdAt)],
+		}),
+		db
+			.select({
+				noteId: noteAttachments.noteId,
+				attachmentId: attachments.id,
+				fileName: attachments.fileName,
+				fileSize: attachments.fileSize,
+				mimeType: attachments.mimeType,
+			})
+			.from(noteAttachments)
+			.innerJoin(
+				notes,
+				and(eq(noteAttachments.noteId, notes.id), eq(notes.userId, userId)),
+			)
+			.innerJoin(
+				attachments,
+				and(
+					eq(noteAttachments.attachmentId, attachments.id),
+					eq(attachments.userId, userId),
+				),
+			)
+			.orderBy(desc(attachments.createdAt)),
 	]);

-	return { activeNotes, archivedNotes };
-}
+	const attachmentsByNote = new Map<string, NoteAttachmentData[]>();
+	for (const { noteId, ...attachment } of attachmentRows) {
+		const current = attachmentsByNote.get(noteId) ?? [];
+		current.push(attachment);
+		attachmentsByNote.set(noteId, current);
+	}
+	const mapped = noteRows.map((note) =>
+		toNoteData(note, attachmentsByNote.get(note.id) ?? []),
+	);

-async function fetchArchivedForUser(userId: string): Promise<NoteData[]> {
-	const noteRows = await db.query.notes.findMany({
-		where: and(eq(notes.userId, userId), eq(notes.archived, true)),
-		orderBy: (table, { desc }) => [desc(table.createdAt)],
-	});
-
-	return noteRows.map(toNoteData);
+	return {
+		activeNotes: mapped.filter((note) => !note.archived),
+		archivedNotes: mapped.filter((note) => note.archived),
+	};
 }
--- a/src/features/settings/lib/changelog-types.ts
+++ b/src/features/settings/lib/changelog-types.ts
@@ -1,6 +1,6 @@
 export type SectionType = "Adicionado" | "Alterado" | "Corrigido" | "Removido";

-export const SECTION_TYPES: readonly SectionType[] = [
+const SECTION_TYPES: readonly SectionType[] = [
 	"Adicionado",
 	"Alterado",
 	"Corrigido",
--- a/src/features/transactions/actions.ts
+++ b/src/features/transactions/actions.ts
@@ -6,6 +6,8 @@ export {
 } from "./actions/bulk-actions";
 export { exportTransactionsDataAction } from "./actions/export-actions";
 export {
+	convertTransactionToInstallmentAction,
+	convertTransactionToRecurringAction,
 	createTransactionAction,
 	deleteTransactionAction,
 	toggleTransactionSettlementAction,
--- a/src/features/transactions/actions/core.ts
+++ b/src/features/transactions/actions/core.ts
@@ -31,19 +31,6 @@ import { addMonthsToPeriod, MONTH_NAMES } from "@/shared/utils/period";
 // Authorization Validation Functions
 // ============================================================================

-export async function validatePayerOwnership(
-	userId: string,
-	payerId: string | null | undefined,
-): Promise<boolean> {
-	if (!payerId) return true;
-
-	const pagador = await db.query.payers.findFirst({
-		where: and(eq(payers.id, payerId), eq(payers.userId, userId)),
-	});
-
-	return !!pagador;
-}
-
 const normalizeIds = (ids: Array<string | null | undefined>) => [
 	...new Set(ids.filter((id): id is string => Boolean(id))),
 ];
@@ -526,11 +513,33 @@ export const toggleSettlementSchema = z.object({
 		.optional(),
 });

+export const convertToInstallmentSchema = z.object({
+	id: uuidSchema("Lançamento"),
+	installmentCount: z.coerce
+		.number({ message: "Informe em quantas parcelas dividir." })
+		.int()
+		.min(2, "O parcelamento deve ter ao menos duas parcelas.")
+		.max(60, "Selecione até 60 parcelas."),
+});
+
+export const convertToRecurringSchema = z.object({
+	id: uuidSchema("Lançamento"),
+	recurrenceCount: z.coerce
+		.number({ message: "Informe por quantos meses repetir." })
+		.int()
+		.min(2, "A recorrência deve ter ao menos dois meses.")
+		.max(60, "Selecione até 60 meses."),
+});
+
 type BaseInput = z.infer<typeof baseFields>;
 export type CreateInput = z.infer<typeof createSchema>;
 export type UpdateInput = z.infer<typeof updateSchema>;
 export type DeleteInput = z.infer<typeof deleteSchema>;
 export type ToggleSettlementInput = z.infer<typeof toggleSettlementSchema>;
+export type ConvertToInstallmentInput = z.infer<
+	typeof convertToInstallmentSchema
+>;
+export type ConvertToRecurringInput = z.infer<typeof convertToRecurringSchema>;

 export const revalidate = (userId: string) =>
 	revalidateForEntity("transactions", userId);
@@ -592,7 +601,7 @@ type SplitShareInput = {
 	amount: number;
 };

-export const resolveSplitShares = (data: {
+const resolveSplitShares = (data: {
 	payerId?: string | null;
 	secondaryPayerId?: string | null;
 	splitShares?: SplitShareInput[];
--- a/src/features/transactions/actions/single-actions.ts
+++ b/src/features/transactions/actions/single-actions.ts
@@ -23,12 +23,17 @@ import {
 	parseLocalDateString,
 } from "@/shared/utils/date";
 import { copyAttachmentsForImport } from "../lib/attachment-copy";
+import { detectInstallmentFromName } from "../lib/installment-detection";
 import { cleanupAttachmentsAfterTransactionDelete } from "./attachments";
 import {
 	buildShares,
 	buildTransactionRecords,
+	type ConvertToInstallmentInput,
+	type ConvertToRecurringInput,
 	type CreateInput,
 	centsToDecimalString,
+	convertToInstallmentSchema,
+	convertToRecurringSchema,
 	createSchema,
 	type DeleteInput,
 	deleteSchema,
@@ -471,6 +476,357 @@ export async function deleteTransactionAction(
 	}
 }

+export async function convertTransactionToInstallmentAction(
+	input: ConvertToInstallmentInput,
+): Promise<ActionResult<{ createdCount: number }>> {
+	try {
+		const user = await getUser();
+		const data = convertToInstallmentSchema.parse(input);
+
+		const existing = await db.query.transactions.findFirst({
+			where: and(
+				eq(transactions.id, data.id),
+				eq(transactions.userId, user.id),
+			),
+		});
+
+		if (!existing) {
+			return { success: false, error: "Lançamento não encontrado." };
+		}
+
+		if (existing.note?.startsWith(ACCOUNT_AUTO_INVOICE_NOTE_PREFIX)) {
+			return {
+				success: false,
+				error: "Pagamentos automáticos de fatura não podem ser convertidos.",
+			};
+		}
+
+		if (isInitialBalanceTransaction(existing)) {
+			return {
+				success: false,
+				error: "Lançamentos de saldo inicial não podem ser convertidos.",
+			};
+		}
+
+		if (
+			existing.paymentMethod !== "Cartão de crédito" ||
+			!existing.cardId ||
+			existing.condition !== "À vista"
+		) {
+			return {
+				success: false,
+				error:
+					"Apenas lançamentos à vista de cartão de crédito podem ser convertidos.",
+			};
+		}
+
+		if (existing.splitGroupId || existing.isDivided) {
+			return {
+				success: false,
+				error:
+					"Lançamentos divididos ainda não podem ser convertidos em parcelamento.",
+			};
+		}
+
+		const detected = detectInstallmentFromName(existing.name);
+		const transactionName =
+			detected?.installmentCount === data.installmentCount
+				? detected.name
+				: existing.name;
+		const amountSign: 1 | -1 = existing.transactionType === "Despesa" ? -1 : 1;
+		const totalCents = Math.round(Math.abs(Number(existing.amount)) * 100);
+		const seriesId = randomUUID();
+		const records = buildTransactionRecords({
+			data: {
+				purchaseDate: existing.purchaseDate.toISOString().slice(0, 10),
+				period: existing.period,
+				name: transactionName,
+				transactionType: existing.transactionType as "Receita" | "Despesa",
+				amount: totalCents / 100,
+				condition: "Parcelado",
+				paymentMethod: "Cartão de crédito",
+				payerId: existing.payerId,
+				isSplit: false,
+				accountId: null,
+				cardId: existing.cardId,
+				categoryId: existing.categoryId,
+				note: existing.note,
+				installmentCount: data.installmentCount,
+				startInstallment: 1,
+				dueDate: existing.dueDate?.toISOString().slice(0, 10),
+				isSettled: null,
+			},
+			userId: user.id,
+			period: existing.period,
+			purchaseDate: existing.purchaseDate,
+			dueDate: existing.dueDate,
+			boletoPaymentDate: null,
+			shares: [{ payerId: existing.payerId, amountCents: totalCents }],
+			amountSign,
+			shouldNullifySettled: true,
+			seriesId,
+		}).map((record) => ({
+			...record,
+			importBatchId: existing.importBatchId,
+		}));
+
+		const currentRow = records[0];
+		const rowsToInsert = records.slice(1);
+		if (!currentRow) {
+			throw new Error("Não foi possível montar o parcelamento.");
+		}
+
+		const periodsToUpdate = records
+			.map((row) => row.period)
+			.filter((period): period is string => Boolean(period));
+		const paidPeriods = await getPaidInvoicePeriods(
+			user.id,
+			existing.cardId,
+			periodsToUpdate,
+		);
+
+		if (paidPeriods.length > 0) {
+			return {
+				success: false,
+				error: `As faturas dos meses ${formatPaidInvoicePeriods(
+					paidPeriods,
+				)} já estão pagas. Desfaça o pagamento antes de converter este lançamento.`,
+			};
+		}
+
+		if (existing.transactionType === "Despesa") {
+			const limitCheck = await validateCardLimit({
+				userId: user.id,
+				cardId: existing.cardId,
+				addAmount: records.reduce(
+					(acc, row) => acc + Math.abs(Number(row.amount)),
+					0,
+				),
+				excludeTransactionIds: [existing.id],
+			});
+
+			if (!limitCheck.ok) {
+				return { success: false, error: limitCheck.error };
+			}
+		}
+
+		await db.transaction(async (tx: typeof db) => {
+			await tx
+				.update(transactions)
+				.set({
+					condition: currentRow.condition,
+					name: currentRow.name,
+					amount: currentRow.amount,
+					installmentCount: currentRow.installmentCount,
+					currentInstallment: currentRow.currentInstallment,
+					recurrenceCount: null,
+					period: currentRow.period,
+					dueDate: currentRow.dueDate,
+					isSettled: null,
+					seriesId,
+				})
+				.where(
+					and(
+						eq(transactions.id, existing.id),
+						eq(transactions.userId, user.id),
+					),
+				);
+
+			if (rowsToInsert.length > 0) {
+				await tx.insert(transactions).values(rowsToInsert);
+			}
+		});
+
+		revalidate(user.id);
+
+		return {
+			success: true,
+			message: `Lançamento convertido em ${data.installmentCount} parcelas.`,
+			data: { createdCount: rowsToInsert.length },
+		};
+	} catch (error) {
+		return handleActionError(error) as ActionResult<{ createdCount: number }>;
+	}
+}
+
+export async function convertTransactionToRecurringAction(
+	input: ConvertToRecurringInput,
+): Promise<ActionResult<{ createdCount: number }>> {
+	try {
+		const user = await getUser();
+		const data = convertToRecurringSchema.parse(input);
+
+		const existing = await db.query.transactions.findFirst({
+			where: and(
+				eq(transactions.id, data.id),
+				eq(transactions.userId, user.id),
+			),
+		});
+
+		if (!existing) {
+			return { success: false, error: "Lançamento não encontrado." };
+		}
+
+		if (existing.note?.startsWith(ACCOUNT_AUTO_INVOICE_NOTE_PREFIX)) {
+			return {
+				success: false,
+				error: "Pagamentos automáticos de fatura não podem ser convertidos.",
+			};
+		}
+
+		if (isInitialBalanceTransaction(existing)) {
+			return {
+				success: false,
+				error: "Lançamentos de saldo inicial não podem ser convertidos.",
+			};
+		}
+
+		if (existing.condition !== "À vista") {
+			return {
+				success: false,
+				error:
+					"Apenas lançamentos à vista podem ser convertidos em recorrência.",
+			};
+		}
+
+		if (existing.splitGroupId || existing.isDivided) {
+			return {
+				success: false,
+				error:
+					"Lançamentos divididos ainda não podem ser convertidos em recorrência.",
+			};
+		}
+
+		const amountSign: 1 | -1 = existing.transactionType === "Despesa" ? -1 : 1;
+		const totalCents = Math.round(Math.abs(Number(existing.amount)) * 100);
+		const seriesId = randomUUID();
+		const isCreditCard = existing.paymentMethod === "Cartão de crédito";
+		const records = buildTransactionRecords({
+			data: {
+				purchaseDate: existing.purchaseDate.toISOString().slice(0, 10),
+				period: existing.period,
+				name: existing.name,
+				transactionType: existing.transactionType as "Receita" | "Despesa",
+				amount: totalCents / 100,
+				condition: "Recorrente",
+				paymentMethod: existing.paymentMethod as
+					| "Pix"
+					| "Boleto"
+					| "Dinheiro"
+					| "Cartão de débito"
+					| "Cartão de crédito"
+					| "Pré-Pago | VR/VA"
+					| "Transferência bancária",
+				payerId: existing.payerId,
+				isSplit: false,
+				accountId: isCreditCard ? null : existing.accountId,
+				cardId: isCreditCard ? existing.cardId : null,
+				categoryId: existing.categoryId,
+				note: existing.note,
+				recurrenceCount: data.recurrenceCount,
+				dueDate: existing.dueDate?.toISOString().slice(0, 10),
+				boletoPaymentDate: existing.boletoPaymentDate
+					?.toISOString()
+					.slice(0, 10),
+				isSettled: existing.isSettled,
+			},
+			userId: user.id,
+			period: existing.period,
+			purchaseDate: existing.purchaseDate,
+			dueDate: existing.dueDate,
+			boletoPaymentDate: existing.boletoPaymentDate,
+			shares: [{ payerId: existing.payerId, amountCents: totalCents }],
+			amountSign,
+			shouldNullifySettled: isCreditCard,
+			seriesId,
+		}).map((record) => ({
+			...record,
+			importBatchId: existing.importBatchId,
+		}));
+
+		const currentRow = records[0];
+		const rowsToInsert = records.slice(1);
+		if (!currentRow) {
+			throw new Error("Não foi possível montar a recorrência.");
+		}
+
+		if (isCreditCard && existing.cardId) {
+			const periodsToUpdate = records
+				.map((row) => row.period)
+				.filter((period): period is string => Boolean(period));
+			const paidPeriods = await getPaidInvoicePeriods(
+				user.id,
+				existing.cardId,
+				periodsToUpdate,
+			);
+
+			if (paidPeriods.length > 0) {
+				return {
+					success: false,
+					error: `As faturas dos meses ${formatPaidInvoicePeriods(
+						paidPeriods,
+					)} já estão pagas. Desfaça o pagamento antes de converter este lançamento.`,
+				};
+			}
+
+			if (existing.transactionType === "Despesa") {
+				const limitCheck = await validateCardLimit({
+					userId: user.id,
+					cardId: existing.cardId,
+					addAmount: records.reduce(
+						(acc, row) => acc + Math.abs(Number(row.amount)),
+						0,
+					),
+					excludeTransactionIds: [existing.id],
+				});
+
+				if (!limitCheck.ok) {
+					return { success: false, error: limitCheck.error };
+				}
+			}
+		}
+
+		await db.transaction(async (tx: typeof db) => {
+			await tx
+				.update(transactions)
+				.set({
+					condition: currentRow.condition,
+					name: currentRow.name,
+					amount: currentRow.amount,
+					recurrenceCount: currentRow.recurrenceCount,
+					installmentCount: null,
+					currentInstallment: null,
+					period: currentRow.period,
+					purchaseDate: currentRow.purchaseDate,
+					dueDate: currentRow.dueDate,
+					isSettled: currentRow.isSettled,
+					boletoPaymentDate: currentRow.boletoPaymentDate,
+					seriesId,
+				})
+				.where(
+					and(
+						eq(transactions.id, existing.id),
+						eq(transactions.userId, user.id),
+					),
+				);
+
+			if (rowsToInsert.length > 0) {
+				await tx.insert(transactions).values(rowsToInsert);
+			}
+		});
+
+		revalidate(user.id);
+
+		return {
+			success: true,
+			message: `Lançamento convertido em recorrência de ${data.recurrenceCount} meses.`,
+			data: { createdCount: rowsToInsert.length },
+		};
+	} catch (error) {
+		return handleActionError(error) as ActionResult<{ createdCount: number }>;
+	}
+}
+
 export async function updateTransactionSplitPairAction(
 	input: UpdateInput,
 ): Promise<ActionResult> {
--- a/src/features/transactions/components/dialogs/transaction-dialog/split-config-dialog.tsx
+++ b/src/features/transactions/components/dialogs/transaction-dialog/split-config-dialog.tsx
@@ -137,24 +137,6 @@ export function getSplitSummaryData(
 	};
 }

-export function getSplitSummaryLabel(
-	formState: FormState,
-	payerOptions: SplitSummaryPayerOption[],
-	totalAmount: number,
-) {
-	const summary = getSplitSummaryData(formState, payerOptions, totalAmount);
-
-	if (summary.type === "text") return summary.label;
-
-	const namesLabel = summary.participants
-		.map((participant) => participant.firstName)
-		.join(" ");
-	const remainingLabel =
-		summary.remainingCount > 0 ? ` +${summary.remainingCount}` : "";
-
-	return `${summary.count} pessoas: ${namesLabel}${remainingLabel} · ${summary.totalLabel}`;
-}
-
 export function SplitConfigDialog({
 	open,
 	onOpenChange,
--- a/src/features/transactions/components/import/import-page.tsx
+++ b/src/features/transactions/components/import/import-page.tsx
@@ -49,6 +49,8 @@ const categoryGroupByTransactionType = {
 	income: "receita",
 } as const;

+const normalizeCategoryName = (value: string) => value.trim().toLowerCase();
+
 interface ImportPageProps {
 	payerOptions: SelectOption[];
 	accountOptions: SelectOption[];
@@ -108,9 +110,19 @@ export function ImportPage({

 				setRows(
 					stmt.transactions.map((t) => {
-						const mappedCategoryId =
+						let mappedCategoryId =
 							categoryMappings[normalizeDescriptionKey(t.description)] ?? null;

+						if (t.categoryRaw) {
+							const categoryRaw = normalizeCategoryName(t.categoryRaw);
+							const matchedOption = categoryOptions.find(
+								(opt) => normalizeCategoryName(opt.label) === categoryRaw,
+							);
+							if (matchedOption) {
+								mappedCategoryId = matchedOption.value;
+							}
+						}
+
 						return {
 							...t,
 							isDuplicate: t.externalId ? duplicates.has(t.externalId) : false,
@@ -129,7 +141,7 @@ export function ImportPage({
 				setIsChecking(false);
 			}
 		},
-		[isCategoryCompatible, payerId],
+		[isCategoryCompatible, payerId, categoryOptions],
 	);

 	// Pré-seleciona cartão ou conta com base no tipo detectado no OFX
--- a/src/features/transactions/components/page/transactions-page.tsx
+++ b/src/features/transactions/components/page/transactions-page.tsx
@@ -4,6 +4,8 @@ import { RiAddFill } from "@remixicon/react";
 import { useState } from "react";
 import { toast } from "sonner";
 import {
+	convertTransactionToInstallmentAction,
+	convertTransactionToRecurringAction,
 	createMassTransactionsAction,
 	deleteMultipleTransactionsAction,
 	deleteTransactionAction,
@@ -18,8 +20,20 @@ import {
 	detachAttachmentBulkAction,
 	getPresignedUploadUrlAction,
 } from "@/features/transactions/actions/attachments";
+import { detectInstallmentFromName } from "@/features/transactions/lib/installment-detection";
 import { ConfirmActionDialog } from "@/shared/components/confirm-action-dialog";
 import { Button } from "@/shared/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+} from "@/shared/components/ui/dialog";
+import { Input } from "@/shared/components/ui/input";
+import { Label } from "@/shared/components/ui/label";
+import { formatCurrency } from "@/shared/utils/currency";
 import type {
 	TransactionsExportContext,
 	TransactionsPaginationState,
@@ -84,6 +98,9 @@ interface TransactionsPageProps {
 	importCategoryOptions?: SelectOption[];
 }

+const pluralize = (count: number, singular: string, plural: string) =>
+	count === 1 ? singular : plural;
+
 export function TransactionsPage({
 	currentUserId,
 	transactions: transactionList,
@@ -190,6 +207,16 @@ export function TransactionsPage({
 	const [refundOpen, setRefundOpen] = useState(false);
 	const [transactionToRefund, setTransactionToRefund] =
 		useState<TransactionItem | null>(null);
+	const [convertInstallmentOpen, setConvertInstallmentOpen] = useState(false);
+	const [transactionToConvert, setTransactionToConvert] =
+		useState<TransactionItem | null>(null);
+	const [installmentCount, setInstallmentCount] = useState("2");
+	const [installmentPending, setInstallmentPending] = useState(false);
+	const [convertRecurringOpen, setConvertRecurringOpen] = useState(false);
+	const [transactionToConvertRecurring, setTransactionToConvertRecurring] =
+		useState<TransactionItem | null>(null);
+	const [recurrenceCount, setRecurrenceCount] = useState("12");
+	const [recurrencePending, setRecurrencePending] = useState(false);

 	const handleToggleSettlement = async (item: TransactionItem) => {
 		if (item.paymentMethod === "Cartão de crédito") {
@@ -542,6 +569,112 @@ export function TransactionsPage({
 		setRefundOpen(true);
 	};

+	const handleConvertToInstallment = (item: TransactionItem) => {
+		const detectedInstallment = detectInstallmentFromName(item.name);
+		setTransactionToConvert(item);
+		setInstallmentCount(String(detectedInstallment?.installmentCount ?? 2));
+		setConvertInstallmentOpen(true);
+	};
+
+	const confirmConvertToInstallment = async () => {
+		if (!transactionToConvert) {
+			return;
+		}
+
+		const count = Number(installmentCount);
+		if (!Number.isInteger(count) || count < 2 || count > 60) {
+			toast.error("Informe um parcelamento entre 2 e 60 parcelas.");
+			return;
+		}
+
+		try {
+			setInstallmentPending(true);
+			const result = await convertTransactionToInstallmentAction({
+				id: transactionToConvert.id,
+				installmentCount: count,
+			});
+
+			if (!result.success) {
+				toast.error(result.error);
+				return;
+			}
+
+			toast.success(result.message);
+			setConvertInstallmentOpen(false);
+			setTransactionToConvert(null);
+		} finally {
+			setInstallmentPending(false);
+		}
+	};
+
+	const handleConvertToRecurring = (item: TransactionItem) => {
+		setTransactionToConvertRecurring(item);
+		setRecurrenceCount("12");
+		setConvertRecurringOpen(true);
+	};
+
+	const confirmConvertToRecurring = async () => {
+		if (!transactionToConvertRecurring) {
+			return;
+		}
+
+		const count = Number(recurrenceCount);
+		if (!Number.isInteger(count) || count < 2 || count > 60) {
+			toast.error("Informe uma recorrência entre 2 e 60 meses.");
+			return;
+		}
+
+		try {
+			setRecurrencePending(true);
+			const result = await convertTransactionToRecurringAction({
+				id: transactionToConvertRecurring.id,
+				recurrenceCount: count,
+			});
+
+			if (!result.success) {
+				toast.error(result.error);
+				return;
+			}
+
+			toast.success(result.message);
+			setConvertRecurringOpen(false);
+			setTransactionToConvertRecurring(null);
+		} finally {
+			setRecurrencePending(false);
+		}
+	};
+
+	const parsedInstallmentCount = Number(installmentCount);
+	const installmentSummary =
+		transactionToConvert &&
+		Number.isInteger(parsedInstallmentCount) &&
+		parsedInstallmentCount >= 2 &&
+		parsedInstallmentCount <= 60
+			? {
+					total: formatCurrency(Math.abs(transactionToConvert.amount)),
+					installmentValue: formatCurrency(
+						Math.abs(transactionToConvert.amount) / parsedInstallmentCount,
+					),
+					count: parsedInstallmentCount,
+					createdCount: parsedInstallmentCount - 1,
+				}
+			: null;
+
+	const parsedRecurrenceCount = Number(recurrenceCount);
+	const recurringSummary =
+		transactionToConvertRecurring &&
+		Number.isInteger(parsedRecurrenceCount) &&
+		parsedRecurrenceCount >= 2 &&
+		parsedRecurrenceCount <= 60
+			? {
+					amount: formatCurrency(
+						Math.abs(transactionToConvertRecurring.amount),
+					),
+					count: parsedRecurrenceCount,
+					createdCount: parsedRecurrenceCount - 1,
+				}
+			: null;
+
 	const handleAnticipate = (item: TransactionItem) => {
 		setSelectedForAnticipation(item);
 		setAnticipateOpen(true);
@@ -628,6 +761,8 @@ export function TransactionsPage({
 				onBulkImport={handleBulkImport}
 				onViewDetails={handleViewDetails}
 				onRefund={handleRefund}
+				onConvertToInstallment={handleConvertToInstallment}
+				onConvertToRecurring={handleConvertToRecurring}
 				onToggleSettlement={handleToggleSettlement}
 				onAnticipate={handleAnticipate}
 				onViewAnticipationHistory={handleViewAnticipationHistory}
@@ -749,6 +884,138 @@ export function TransactionsPage({
 				disabled={!transactionToDelete}
 			/>

+			<Dialog
+				open={convertInstallmentOpen && !!transactionToConvert}
+				onOpenChange={(open) => {
+					setConvertInstallmentOpen(open);
+					if (!open) {
+						setTransactionToConvert(null);
+					}
+				}}
+			>
+				<DialogContent className="sm:max-w-md">
+					<DialogHeader>
+						<DialogTitle>Converter em parcelamento?</DialogTitle>
+						<DialogDescription>
+							O lançamento atual será mantido como a primeira parcela e os
+							próximos meses serão criados automaticamente.
+						</DialogDescription>
+					</DialogHeader>
+
+					<div className="space-y-2">
+						<Label htmlFor="installmentCount">Parcelar em</Label>
+						<Input
+							id="installmentCount"
+							type="number"
+							min={2}
+							max={60}
+							value={installmentCount}
+							onChange={(event) => setInstallmentCount(event.target.value)}
+						/>
+						<p className="text-muted-foreground text-sm">
+							Use o total de parcelas da série, incluindo este lançamento.
+						</p>
+						{installmentSummary ? (
+							<p className="rounded-md border bg-muted/40 px-3 py-2 text-muted-foreground text-sm">
+								Resumo: {installmentSummary.total} será dividido em{" "}
+								{installmentSummary.count} parcelas de aproximadamente{" "}
+								{installmentSummary.installmentValue}. Este lançamento vira a
+								primeira parcela e {installmentSummary.createdCount}{" "}
+								{pluralize(
+									installmentSummary.createdCount,
+									"nova parcela será criada",
+									"novas parcelas serão criadas",
+								)}
+								.
+							</p>
+						) : null}
+					</div>
+
+					<DialogFooter>
+						<Button
+							type="button"
+							variant="outline"
+							onClick={() => setConvertInstallmentOpen(false)}
+							disabled={installmentPending}
+						>
+							Cancelar
+						</Button>
+						<Button
+							type="button"
+							onClick={confirmConvertToInstallment}
+							disabled={installmentPending}
+						>
+							{installmentPending ? "Convertendo..." : "Converter"}
+						</Button>
+					</DialogFooter>
+				</DialogContent>
+			</Dialog>
+
+			<Dialog
+				open={convertRecurringOpen && !!transactionToConvertRecurring}
+				onOpenChange={(open) => {
+					setConvertRecurringOpen(open);
+					if (!open) {
+						setTransactionToConvertRecurring(null);
+					}
+				}}
+			>
+				<DialogContent className="sm:max-w-md">
+					<DialogHeader>
+						<DialogTitle>Converter em recorrente?</DialogTitle>
+						<DialogDescription>
+							O lançamento atual será mantido como a primeira recorrência e os
+							próximos meses serão criados automaticamente.
+						</DialogDescription>
+					</DialogHeader>
+
+					<div className="space-y-2">
+						<Label htmlFor="recurrenceCount">Repetir por</Label>
+						<Input
+							id="recurrenceCount"
+							type="number"
+							min={2}
+							max={60}
+							value={recurrenceCount}
+							onChange={(event) => setRecurrenceCount(event.target.value)}
+						/>
+						<p className="text-muted-foreground text-sm">
+							Use o total de meses da série, incluindo este lançamento.
+						</p>
+						{recurringSummary ? (
+							<p className="rounded-md border bg-muted/40 px-3 py-2 text-muted-foreground text-sm">
+								Resumo: este lançamento vira a primeira recorrência e{" "}
+								{recurringSummary.createdCount}{" "}
+								{pluralize(
+									recurringSummary.createdCount,
+									"novo lançamento mensal será criado",
+									"novos lançamentos mensais serão criados",
+								)}{" "}
+								com valor de {recurringSummary.amount}.
+							</p>
+						) : null}
+					</div>
+
+					<DialogFooter>
+						<Button
+							type="button"
+							variant="outline"
+							onClick={() => setConvertRecurringOpen(false)}
+							disabled={recurrencePending}
+						>
+							Cancelar
+						</Button>
+						<Button
+							type="button"
+							onClick={confirmConvertToRecurring}
+							disabled={recurrencePending}
+						>
+							{recurrencePending ? "Convertendo..." : "Converter"}
+						</Button>
+					</DialogFooter>
+				</DialogContent>
+			</Dialog>
+
 			<BulkActionDialog
 				open={bulkDeleteOpen && !!pendingDeleteData}
 				onOpenChange={setBulkDeleteOpen}
--- a/src/features/transactions/components/table/transaction-actions-menu.tsx
+++ b/src/features/transactions/components/table/transaction-actions-menu.tsx
@@ -11,6 +11,7 @@ import {
 	RiRefundLine,
 	RiTimeLine,
 } from "@remixicon/react";
+import { CREDIT_CARD_PAYMENT_METHOD } from "@/features/transactions/lib/constants";
 import { Button } from "@/shared/components/ui/button";
 import {
 	DropdownMenu,
@@ -20,6 +21,7 @@ import {
 	DropdownMenuTrigger,
 } from "@/shared/components/ui/dropdown-menu";
 import { REFUND_NOTE_PREFIX } from "@/shared/lib/accounts/constants";
+import { getConditionIcon } from "@/shared/utils/icons";
 import type { TransactionItem } from "../types";

 type TransactionActionsMenuProps = {
@@ -33,6 +35,8 @@ type TransactionActionsMenuProps = {
 	onRefund?: (item: TransactionItem) => void;
 	onAnticipate?: (item: TransactionItem) => void;
 	onViewAnticipationHistory?: (item: TransactionItem) => void;
+	onConvertToInstallment?: (item: TransactionItem) => void;
+	onConvertToRecurring?: (item: TransactionItem) => void;
 };

 export function TransactionActionsMenu({
@@ -46,6 +50,8 @@ export function TransactionActionsMenu({
 	onRefund,
 	onAnticipate,
 	onViewAnticipationHistory,
+	onConvertToInstallment,
+	onConvertToRecurring,
 }: TransactionActionsMenuProps) {
 	const isOwnData = item.userId === currentUserId;
 	const canRefund =
@@ -55,9 +61,27 @@ export function TransactionActionsMenu({
 		!item.splitGroupId &&
 		!item.readonly &&
 		!item.note?.startsWith(REFUND_NOTE_PREFIX);
+
 	const showInstallmentActions =
 		isOwnData && item.condition === "Parcelado" && item.seriesId;

+	const canConvertToInstallment =
+		isOwnData &&
+		item.paymentMethod === CREDIT_CARD_PAYMENT_METHOD &&
+		item.condition === "À vista" &&
+		!item.splitGroupId &&
+		!item.isDivided &&
+		!item.readonly &&
+		Boolean(onConvertToInstallment);
+
+	const canConvertToRecurring =
+		isOwnData &&
+		item.condition === "À vista" &&
+		!item.splitGroupId &&
+		!item.isDivided &&
+		!item.readonly &&
+		Boolean(onConvertToRecurring);
+
 	return (
 		<DropdownMenu>
 			<DropdownMenuTrigger asChild>
@@ -92,7 +116,7 @@ export function TransactionActionsMenu({
 					</DropdownMenuItem>
 				) : null}

-				{!item.readonly && !isOwnData ? (
+				{!isOwnData ? (
 					<DropdownMenuItem
 						onSelect={() => onImport?.(item)}
 						disabled={!onImport}
@@ -112,6 +136,20 @@ export function TransactionActionsMenu({
 					</DropdownMenuItem>
 				) : null}

+				{canConvertToInstallment ? (
+					<DropdownMenuItem onSelect={() => onConvertToInstallment?.(item)}>
+						{getConditionIcon("Parcelado")}
+						Converter em Parcelamento
+					</DropdownMenuItem>
+				) : null}
+
+				{canConvertToRecurring ? (
+					<DropdownMenuItem onSelect={() => onConvertToRecurring?.(item)}>
+						{getConditionIcon("Recorrente")}
+						Converter em Recorrente
+					</DropdownMenuItem>
+				) : null}
+
 				{isOwnData ? (
 					<DropdownMenuItem
 						variant="destructive"
--- a/src/features/transactions/components/table/transactions-columns.tsx
+++ b/src/features/transactions/components/table/transactions-columns.tsx
@@ -47,6 +47,8 @@ type BuildColumnsArgs = {
 	onToggleSettlement?: (item: TransactionItem) => void;
 	onAnticipate?: (item: TransactionItem) => void;
 	onViewAnticipationHistory?: (item: TransactionItem) => void;
+	onConvertToInstallment?: (item: TransactionItem) => void;
+	onConvertToRecurring?: (item: TransactionItem) => void;
 	isSettlementLoading: (id: string) => boolean;
 	showActions: boolean;
 	columnOrder?: string[] | null;
@@ -109,6 +111,8 @@ function buildColumns({
 	onToggleSettlement,
 	onAnticipate,
 	onViewAnticipationHistory,
+	onConvertToInstallment,
+	onConvertToRecurring,
 	isSettlementLoading,
 	showActions,
 }: BuildColumnsArgs): ColumnDef<TransactionItem>[] {
@@ -122,6 +126,8 @@ function buildColumns({
 	const handleToggleSettlement = onToggleSettlement ?? noop;
 	const handleAnticipate = onAnticipate ?? noop;
 	const handleViewAnticipationHistory = onViewAnticipationHistory ?? noop;
+	const handleConvertToInstallment = onConvertToInstallment ?? noop;
+	const handleConvertToRecurring = onConvertToRecurring ?? noop;

 	const columns: ColumnDef<TransactionItem>[] = [
 		{
@@ -139,6 +145,7 @@ function buildColumns({
 			cell: ({ row }) => (
 				<Checkbox
 					checked={row.getIsSelected()}
+					disabled={!row.getCanSelect()}
 					onCheckedChange={(value) => row.toggleSelected(!!value)}
 					aria-label="Selecionar linha"
 				/>
@@ -544,6 +551,12 @@ function buildColumns({
 						onRefund={handleRefund}
 						onAnticipate={handleAnticipate}
 						onViewAnticipationHistory={handleViewAnticipationHistory}
+						onConvertToInstallment={
+							onConvertToInstallment ? handleConvertToInstallment : undefined
+						}
+						onConvertToRecurring={
+							onConvertToRecurring ? handleConvertToRecurring : undefined
+						}
 					/>
 				</div>
 			),
--- a/src/features/transactions/components/table/transactions-mobile-list.tsx
+++ b/src/features/transactions/components/table/transactions-mobile-list.tsx
@@ -39,6 +39,8 @@ type TransactionsMobileListProps = {
 	onToggleSettlement?: (item: TransactionItem) => void;
 	onAnticipate?: (item: TransactionItem) => void;
 	onViewAnticipationHistory?: (item: TransactionItem) => void;
+	onConvertToInstallment?: (item: TransactionItem) => void;
+	onConvertToRecurring?: (item: TransactionItem) => void;
 	isSettlementLoading: (id: string) => boolean;
 	showActions?: boolean;
 };
@@ -55,6 +57,8 @@ export function TransactionsMobileList({
 	onToggleSettlement,
 	onAnticipate,
 	onViewAnticipationHistory,
+	onConvertToInstallment,
+	onConvertToRecurring,
 	isSettlementLoading,
 	showActions = true,
 }: TransactionsMobileListProps) {
@@ -74,6 +78,8 @@ export function TransactionsMobileList({
 					onToggleSettlement={onToggleSettlement}
 					onAnticipate={onAnticipate}
 					onViewAnticipationHistory={onViewAnticipationHistory}
+					onConvertToInstallment={onConvertToInstallment}
+					onConvertToRecurring={onConvertToRecurring}
 					isSettlementLoading={isSettlementLoading}
 					showActions={showActions}
 				/>
@@ -98,6 +104,8 @@ function TransactionMobileCard({
 	onToggleSettlement,
 	onAnticipate,
 	onViewAnticipationHistory,
+	onConvertToInstallment,
+	onConvertToRecurring,
 	isSettlementLoading,
 	showActions = true,
 }: TransactionMobileCardProps) {
@@ -261,6 +269,8 @@ function TransactionMobileCard({
 									onRefund={onRefund}
 									onAnticipate={onAnticipate}
 									onViewAnticipationHistory={onViewAnticipationHistory}
+									onConvertToInstallment={onConvertToInstallment}
+									onConvertToRecurring={onConvertToRecurring}
 								/>
 							</div>
 						) : null}
--- a/src/features/transactions/components/table/transactions-table.tsx
+++ b/src/features/transactions/components/table/transactions-table.tsx
@@ -71,6 +71,8 @@ type TransactionsTableProps = {
 	onBulkImport?: (items: TransactionItem[]) => void;
 	onViewDetails?: (item: TransactionItem) => void;
 	onRefund?: (item: TransactionItem) => void;
+	onConvertToInstallment?: (item: TransactionItem) => void;
+	onConvertToRecurring?: (item: TransactionItem) => void;
 	onToggleSettlement?: (item: TransactionItem) => void;
 	onAnticipate?: (item: TransactionItem) => void;
 	onViewAnticipationHistory?: (item: TransactionItem) => void;
@@ -100,6 +102,8 @@ export function TransactionsTable({
 	onBulkImport,
 	onViewDetails,
 	onRefund,
+	onConvertToInstallment,
+	onConvertToRecurring,
 	onToggleSettlement,
 	onAnticipate,
 	onViewAnticipationHistory,
@@ -134,6 +138,8 @@ export function TransactionsTable({
 				onConfirmDelete,
 				onViewDetails,
 				onRefund,
+				onConvertToInstallment,
+				onConvertToRecurring,
 				onToggleSettlement,
 				onAnticipate,
 				onViewAnticipationHistory,
@@ -151,6 +157,8 @@ export function TransactionsTable({
 			onConfirmDelete,
 			onViewDetails,
 			onRefund,
+			onConvertToInstallment,
+			onConvertToRecurring,
 			onToggleSettlement,
 			onAnticipate,
 			onViewAnticipationHistory,
@@ -175,7 +183,10 @@ export function TransactionsTable({
 			: getPaginationRowModel(),
 		manualPagination: isServerPaginated,
 		pageCount: serverPagination?.totalPages,
-		enableRowSelection: (row) => !row.original.readonly,
+		enableRowSelection: (row) =>
+			row.original.userId === currentUserId
+				? !row.original.readonly
+				: Boolean(onBulkImport),
 	});

 	const rowModel = table.getRowModel();
@@ -184,11 +195,21 @@ export function TransactionsTable({
 		? (serverPagination?.totalItems ?? 0)
 		: table.getCoreRowModel().rows.length;
 	const selectedRows = table.getFilteredSelectedRowModel().rows;
+	const selectedOwnRows = selectedRows.filter(
+		(row) => row.original.userId === currentUserId,
+	);
+	const selectedImportRows = selectedRows.filter(
+		(row) => row.original.userId !== currentUserId,
+	);
 	const selectedCount = selectedRows.length;
 	const selectedTotal = selectedRows.reduce(
 		(total, row) => total + (row.original.amount ?? 0),
 		0,
 	);
+	const selectedImportTotal = selectedImportRows.reduce(
+		(total, row) => total + (row.original.amount ?? 0),
+		0,
+	);
 	const currentPage = isServerPaginated
 		? (serverPagination?.page ?? 1)
 		: table.getState().pagination.pageIndex + 1;
@@ -211,8 +232,8 @@ export function TransactionsTable({
 	};

 	const handleBulkImport = () => {
-		if (onBulkImport && selectedCount > 0) {
-			onBulkImport(selectedRows.map((row) => row.original));
+		if (onBulkImport && selectedImportRows.length > 0) {
+			onBulkImport(selectedImportRows.map((row) => row.original));
 			setRowSelection({});
 		}
 	};
@@ -326,7 +347,7 @@ export function TransactionsTable({

 			{selectedCount > 0 &&
 			onBulkDelete &&
-			selectedRows.every((row) => row.original.userId === currentUserId) ? (
+			selectedOwnRows.length === selectedCount ? (
 				<TransactionsBulkBar
 					selectedCount={selectedCount}
 					selectedTotal={selectedTotal}
@@ -335,12 +356,10 @@ export function TransactionsTable({
 				/>
 			) : null}

-			{selectedCount > 0 &&
-			onBulkImport &&
-			selectedRows.some((row) => row.original.userId !== currentUserId) ? (
+			{selectedCount > 0 && onBulkImport && selectedImportRows.length > 0 ? (
 				<TransactionsBulkBar
-					selectedCount={selectedCount}
-					selectedTotal={selectedTotal}
+					selectedCount={selectedImportRows.length}
+					selectedTotal={selectedImportTotal}
 					mode="import"
 					onAction={handleBulkImport}
 				/>
--- a/src/features/transactions/lib/attachments-config.ts
+++ b/src/features/transactions/lib/attachments-config.ts
@@ -1,13 +1,7 @@
-export const ALLOWED_MIME_TYPES = [
-	"application/pdf",
-	"image/jpeg",
-	"image/png",
-	"image/webp",
-] as const;
-
-export const DEFAULT_MAX_FILE_SIZE_MB = 50;
-
-export const MAX_FILE_SIZE = DEFAULT_MAX_FILE_SIZE_MB * 1024 * 1024; // 50MB (fallback)
-
-export const ATTACHMENT_SIZE_OPTIONS = [5, 10, 25, 50, 100] as const;
-export type AttachmentSizeOption = (typeof ATTACHMENT_SIZE_OPTIONS)[number];
+export {
+	ALLOWED_MIME_TYPES,
+	ATTACHMENT_SIZE_OPTIONS,
+	type AttachmentSizeOption,
+	DEFAULT_MAX_FILE_SIZE_MB,
+	MAX_FILE_SIZE,
+} from "@/shared/lib/attachments/config";
--- a/src/features/transactions/lib/category-helpers.ts
+++ b/src/features/transactions/lib/category-helpers.ts
@@ -61,13 +61,3 @@ export function groupAndSortCategories(
 			),
 	}));
 }
-
-/**
- * Filters secondary payer options to exclude the primary payer
- */
-export function filterSecondaryPayerOptions(
-	allOptions: SelectOption[],
-	primaryPayerId?: string,
-): SelectOption[] {
-	return allOptions.filter((option) => option.value !== primaryPayerId);
-}
--- a/src/features/transactions/lib/installment-detection.ts
+++ b/src/features/transactions/lib/installment-detection.ts
@@ -0,0 +1,49 @@
+export type InstallmentDetection = {
+	name: string;
+	currentInstallment: number;
+	installmentCount: number;
+};
+
+const INSTALLMENT_SUFFIX_PATTERNS = [
+	/^(?<name>.+?)\s*[-–—]?\s*parcela\s+(?<current>\d{1,2})\s+de\s+(?<total>\d{1,2})\s*$/iu,
+	/^(?<name>.+?)\s*[-–—]?\s*parcela\s+(?<current>\d{1,2})\s*\/\s*(?<total>\d{1,2})\s*$/iu,
+	/^(?<name>.+?)\s*\((?<current>\d{1,2})\s*[/?]\s*(?<total>\d{1,2})\)\s*$/u,
+	/^(?<name>.+?)\s+(?<current>\d{1,2})\s*[/?]\s*(?<total>\d{1,2})\s*$/u,
+];
+
+const normalizeDetectedName = (value: string) =>
+	value
+		.trim()
+		.replace(/\s+[-–—:]\s*$/u, "")
+		.trim();
+
+export function detectInstallmentFromName(
+	value: string | null | undefined,
+): InstallmentDetection | null {
+	const text = value?.trim();
+	if (!text) return null;
+
+	for (const pattern of INSTALLMENT_SUFFIX_PATTERNS) {
+		const match = pattern.exec(text);
+		const groups = match?.groups;
+		if (!groups) continue;
+
+		const currentInstallment = Number(groups.current);
+		const installmentCount = Number(groups.total);
+		const name = normalizeDetectedName(groups.name ?? "");
+
+		if (
+			name.length > 0 &&
+			Number.isInteger(currentInstallment) &&
+			Number.isInteger(installmentCount) &&
+			currentInstallment >= 1 &&
+			installmentCount >= 2 &&
+			currentInstallment <= installmentCount &&
+			installmentCount <= 60
+		) {
+			return { name, currentInstallment, installmentCount };
+		}
+	}
+
+	return null;
+}
--- a/src/features/transactions/lib/page-helpers.ts
+++ b/src/features/transactions/lib/page-helpers.ts
@@ -150,10 +150,7 @@ export const getSingleParam = (
 	return Array.isArray(value) ? (value[0] ?? null) : value;
 };

-export const getMultiParam = (
-	params: ResolvedSearchParams,
-	key: string,
-): string[] => {
+const getMultiParam = (params: ResolvedSearchParams, key: string): string[] => {
 	const value = params?.[key];
 	if (!value) {
 		return [];
--- a/src/shared/components/widgets/expandable-widget-card.tsx
+++ b/src/shared/components/widgets/expandable-widget-card.tsx
@@ -32,6 +32,7 @@ export function ExpandableWidgetCard({
 		if (!element) return;

 		let frameId = 0;
+		const observedElements = new Set<Element>();

 		const checkOverflow = () => {
 			cancelAnimationFrame(frameId);
@@ -44,13 +45,33 @@ export function ExpandableWidgetCard({
 			});
 		};

+		const observeContentElements = (resizeObserver: ResizeObserver) => {
+			for (const child of Array.from(element.children)) {
+				if (!observedElements.has(child)) {
+					resizeObserver.observe(child);
+					observedElements.add(child);
+				}
+			}
+		};
+
 		checkOverflow();

 		const resizeObserver = new ResizeObserver(checkOverflow);
 		resizeObserver.observe(element);
+		observeContentElements(resizeObserver);
+
+		const mutationObserver = new MutationObserver(() => {
+			observeContentElements(resizeObserver);
+			checkOverflow();
+		});
+		mutationObserver.observe(element, {
+			childList: true,
+			subtree: true,
+		});

 		return () => {
 			cancelAnimationFrame(frameId);
+			mutationObserver.disconnect();
 			resizeObserver.disconnect();
 		};
 	}, []);
--- a/src/shared/lib/attachments/config.ts
+++ b/src/shared/lib/attachments/config.ts
@@ -0,0 +1,11 @@
+export const ALLOWED_MIME_TYPES = [
+	"application/pdf",
+	"image/jpeg",
+	"image/png",
+	"image/webp",
+] as const;
+
+export const DEFAULT_MAX_FILE_SIZE_MB = 50;
+export const ATTACHMENT_SIZE_OPTIONS = [5, 10, 25, 50, 100] as const;
+export type AttachmentSizeOption = (typeof ATTACHMENT_SIZE_OPTIONS)[number];
+export const MAX_FILE_SIZE = DEFAULT_MAX_FILE_SIZE_MB * 1024 * 1024;
--- a/src/shared/lib/import/types.ts
+++ b/src/shared/lib/import/types.ts
@@ -4,6 +4,7 @@ export type ImportedTransaction = {
 	amount: number; // positivo = receita, negativo = despesa
 	description: string; // MEMO ou NAME
 	transactionType: "income" | "expense";
+	categoryRaw?: string | null;
 };

 export type ImportStatement = {
--- a/src/shared/lib/import/xls-parser.ts
+++ b/src/shared/lib/import/xls-parser.ts
@@ -99,6 +99,7 @@ export async function parseXls(buffer: ArrayBuffer): Promise<ImportStatement> {
 		const typeRaw =
 			values[4] != null ? String(values[4]).toLowerCase().trim() : "";
 		const transactionType = typeRaw === "receita" ? "income" : "expense";
+		const categoryRaw = values[5] != null ? String(values[5]).trim() : null;

 		if (!date || !description || amount === null || amount <= 0) return;

@@ -108,6 +109,7 @@ export async function parseXls(buffer: ArrayBuffer): Promise<ImportStatement> {
 			amount,
 			description,
 			transactionType,
+			categoryRaw,
 		});
 	});

@@ -132,16 +134,17 @@ export async function generateXlsTemplate(): Promise<ArrayBuffer> {
 	const ws = workbook.addWorksheet("Lançamentos");

 	ws.addRows([
-		["Data", "Descrição", "Valor", "Tipo"],
-		["01/03/2026", "Ingressos São Januário", 160, "despesa"],
-		["01/03/2026", "Salário", 3000.0, "receita"],
-		["01/03/2026", "Posto do Vasco da Gama", 89.9, "despesa"],
+		["Data", "Descrição", "Valor", "Tipo", "Categoria"],
+		["01/03/2026", "Ingressos São Januário", 160, "despesa", "Lazer"],
+		["01/03/2026", "Salário", 3000.0, "receita", "Salário"],
+		["01/03/2026", "Posto do Vasco da Gama", 89.9, "despesa", "Transporte"],
 	]);

 	ws.getColumn(1).width = 14;
 	ws.getColumn(2).width = 32;
 	ws.getColumn(3).width = 12;
 	ws.getColumn(4).width = 10;
+	ws.getColumn(5).width = 24;

 	// Dropdown para coluna Tipo (D2:D100)
 	for (let i = 2; i <= 100; i++) {
--- a/src/shared/lib/logo/index.ts
+++ b/src/shared/lib/logo/index.ts
@@ -36,7 +36,7 @@ export const getLogoDisplayName = (logo?: string | null): string => {
 * @example
 * deriveNameFromLogo("my-company-logo.png") // "My Company Logo"
 */
-export const deriveNameFromLogo = (logo?: string | null) => {
+const deriveNameFromLogo = (logo?: string | null) => {
 	if (!logo) {
 		return "";
 	}
Author	SHA1	Message	Date
Felipe Coutinho	b1b2f5fe0d	chore: prepara versão 2.7.8	2026-06-21 11:54:27 -03:00
Felipe Coutinho	4d62abfc6b	feat(dashboard): vincula tendências às categorias	2026-06-21 11:54:19 -03:00
Felipe Coutinho	1660f68a4b	feat(anexos): adiciona filtro por pessoa	2026-06-21 11:54:15 -03:00
Felipe Coutinho	d363662548	feat(anotações): permite anexos em notas	2026-06-21 11:54:05 -03:00
Felipe Coutinho	129295d2e2	chore: prepara versao 2.7.7	2026-06-20 14:57:18 -03:00
Yuri Argolo	4b5cdf81b8	feat(lançamentos): ações de converter transações existentes em parceladas e recorrentes	2026-06-20 11:56:54 -03:00
Yuri Argolo	558197e870	feat: mapeamento automatico de categoria na importacao de planilhas	2026-06-20 11:56:54 -03:00
Felipe Coutinho	2fd6e3c323	Prepara versao 2.7.5	2026-06-13 11:05:00 -03:00
Felipe Coutinho	833845b5cf	Ajusta widgets do dashboard	2026-06-13 11:04:54 -03:00
Felipe Coutinho	4cbdddb12e	corrige importacao de lancamentos compartilhados	2026-06-09 20:41:41 -03:00
Felipe Coutinho	c81584095b	docs: informa manutencao reduzida do projeto	2026-06-06 17:06:18 -03:00
Felipe Coutinho	8ccc4479be	docs: registra release 2.7.3	2026-06-06 16:31:57 -03:00
Felipe Coutinho	2cead626ab	chore: atualiza dependencias e build de PDF	2026-06-06 16:31:42 -03:00
Felipe Coutinho	811a035cb0	refactor: remove exports internos sem uso	2026-06-06 16:31:38 -03:00
Felipe Coutinho	356801324c	feat: destaca fatura paga nos cartoes	2026-06-06 16:31:33 -03:00
Felipe Coutinho	b443fb010a	config: adiciona origins confiaveis do Better Auth	2026-06-06 16:31:27 -03:00
Felipe Coutinho	026dff5399	Merge pull request #78 from felipegcoutinho/imgbot [ImgBot] Optimize images	2026-05-31 18:16:42 -03:00
ImgBotApp	18b6a6a470	[ImgBot] Optimize images *Total -- 1,696.54kb -> 1,060.14kb (37.51%) /public/logos/dinheiro.png -- 72.04kb -> 17.17kb (76.17%) /public/images/dashboard-preview-dark.png -- 597.68kb -> 350.27kb (41.4%) /public/images/dashboard-preview-light.png -- 589.20kb -> 355.11kb (39.73%) /public/avatars/default_icon.png -- 5.41kb -> 3.37kb (37.69%) /public/logos/bipa.png -- 47.72kb -> 33.57kb (29.64%) /public/images/pwa-preview-dark.png -- 181.92kb -> 138.71kb (23.75%) /public/images/pwa-preview-light.png -- 177.18kb -> 136.59kb (22.91%) /public/images/logo_small.svg -- 0.39kb -> 0.38kb (1.99%) /public/images/logo_text.svg -- 6.74kb -> 6.73kb (0.12%) /public/providers/minimax.svg -- 1.52kb -> 1.52kb (0.06%) /public/providers/ollama_dark.svg -- 8.36kb -> 8.36kb (0.06%) /public/providers/ollama_light.svg -- 8.36kb -> 8.36kb (0.06%) Signed-off-by: ImgBotApp <ImgBotHelp@gmail.com>	2026-05-31 21:11:31 +00:00