style(format): corrigir ordenação de imports em 3 arquivos

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
style(format): corrigir formatação Biome em 5 arquivos
2026-05-09 11:01:45 +00:00 · 2026-04-20 19:57:05 +00:00 · 2026-04-20 19:54:56 +00:00 · 2026-04-20 19:50:02 +00:00 · 2026-04-20 19:23:36 +00:00 · 2026-04-20 18:41:48 +00:00
247 changed files with 2651 additions and 5215 deletions
--- a/.env.example
+++ b/.env.example
@@ -58,7 +58,5 @@ OPENROUTER_API_KEY=

 # === Logo.dev (Opcional) ===
 # Logos automáticos de estabelecimentos. Cadastre em https://www.logo.dev
-# NEXT_PUBLIC_LOGO_DEV_TOKEN — token público (aparece no frontend, ok por design)
-# LOGO_DEV_SECRET_KEY       — chave secreta (apenas server-side, nunca expor)
-NEXT_PUBLIC_LOGO_DEV_TOKEN=
+LOGO_DEV_TOKEN=
 LOGO_DEV_SECRET_KEY=
--- a/.github/workflows/docker-publish.yml
+++ b/.github/workflows/docker-publish.yml
@@ -85,8 +85,6 @@ jobs:
          cache-from: type=gha
          cache-to: type=gha,mode=max
          platforms: linux/amd64,linux/arm64
-          build-args: |
-            NEXT_PUBLIC_LOGO_DEV_TOKEN=${{ secrets.NEXT_PUBLIC_LOGO_DEV_TOKEN }}

      - name: Image digest
        run: echo ${{ steps.meta.outputs.digest }}
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,41 @@ e este projeto adere ao [Versionamento Semântico](https://semver.org/lang/pt-BR

 ## [Unreleased]

+## [2.4.2] - 2026-04-20
+
+Esta versão é quase toda sobre organização e polimento. O código interno do Dashboard foi reestruturado — módulos espalhados pela raiz da feature foram agrupados em subdiretórios coesos e a arquitetura de widgets foi renovada com um novo `widget-registry`. A sidebar lateral foi aposentada em favor de uma navegação concentrada na navbar. A interface passou por um refinamento visual amplo: cards redesenhados, dark mode mais consistente e efeitos decorativos removidos para uma composição mais limpa. As imagens de preview da landing page foram atualizadas. Por fim, a integração com Logo.dev ganhou uma arquitetura mais segura — o token agora é lido apenas no servidor e nunca chega ao cliente. O conceito de "Pagador" foi renomeado para "Pessoa" em toda a interface.
+
+### Adicionado
+
+- Dashboard: nova arquitetura de widgets com `widget-registry` — módulos reorganizados em subdiretórios (`bills/`, `invoices/`, `notes/`, `notifications/`, `overview/`, `payments/`, `goals-progress/`, `categories/`)
+- Dashboard: novos componentes `category-breakdown-chart`, `category-breakdown-list`, `goals-progress-item` e `percentage-change-indicator`
+- Logo.dev: `server.ts` com `isLogoDevEnabled()` e `buildLogoDevUrl()` server-side; `LogoDevProvider` propaga flag `enabled` para Client Components
+- Scripts: `mockup` adicionado ao `package.json` (`tsx scripts/mock-data.ts`)
+
+### Alterado
+
+- Nav: sidebar lateral removida — navegação unificada na navbar
+- UI/Tema: raio de borda global 0.625rem → 0.7rem; ajustes finos em `--card` e `--border` (light e dark)
+- UI: `DotPattern` removido do layout dashboard, tela de autenticação e landing page
+- UI: account-card redesenhado com cores de saldo (success/destructive) e tooltip para flags de exclusão
+- UI: budget-card, card-item e componentes do calendário (day-cell, event-modal) com layout revisado
+- UI: auth-card-shell simplificado (removido glassmorphism e blob animado)
+- Landing: imagens de preview atualizadas; `mainFeatures` + `extraFeatures` unificados em grid único; dark mode nos botões de CTA
+- Navbar: dark mode corrigido no navbar-shell (`dark:bg-card`, `dark:border-b-border/60`)
+- Logo.dev: `NEXT_PUBLIC_LOGO_DEV_TOKEN` renomeado para `LOGO_DEV_TOKEN` (agora lido em runtime server-side apenas)
+- UI: conceito "Pagador/Pagadores" renomeado para **"Pessoa/Pessoas"** em toda a interface — labels, títulos, toasts, mensagens de erro, cabeçalhos de tabela e exportações. Código, rotas (`/payers`) e schema do banco (`pagadores`) permanecem inalterados; a divergência entre UI e código é intencional
+- Deps: next 16.2.3 → 16.2.4, better-auth 1.6.2 → 1.6.5, ai 6.0.159 → 6.0.168 e outros patches menores
+- Notas/Tarefas: ícone de tarefa concluída em visualização (card e detalhes) simplificado para `RiCheckLine` verde sem caixa; checkbox no modal de edição usa fundo e borda `success` com ícone `success-foreground` (claro no light, escuro no dark)
+- Notas/Detalhes: botões do footer reordenados ("Cancelar" à esquerda, "Alterar" primário à direita)
+
+### Removido
+
+- Nav: componentes sidebar (`app-sidebar`, `nav-main`, `nav-secondary`, `nav-user`, `nav-link`), `sidebar.tsx` e `use-mobile.ts`
+- Dashboard: ~25 widgets monolíticos obsoletos (`inbox-widget`, `bills-widget`, `notes-widget`, `payers-widget`, `my-accounts-widget` etc.)
+- Dashboard: arquivos dispersos na raiz da feature movidos para subdiretórios (arquivos antigos removidos)
+- CSS: variáveis `--data-7` a `--data-10` removidas do tema
+- CI: build arg `NEXT_PUBLIC_LOGO_DEV_TOKEN` removido do `Dockerfile` e do workflow `docker-publish.yml` — basta configurar `LOGO_DEV_TOKEN` e `LOGO_DEV_SECRET_KEY` como variáveis de runtime no host (Coolify, Railway, etc.)
+
 ## [2.4.1] - 2026-04-16

 ### Adicionado
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -16,7 +16,7 @@
 3. **Periods** usam formato `YYYY-MM` (ex: `"2025-11"`). Utils em `src/shared/utils/period/`.
 4. **Moeda**: R$ com 2 decimais. DB: `numeric(12, 2)`. Utils em `src/shared/utils/currency.ts`.
 5. **Revalidation**: usar `revalidateForEntity("entity")` de `src/shared/lib/actions/helpers.ts` apos mutations.
-6. **Versionamento**: registrar mudancas no `CHANGELOG.md` seguindo Keep a Changelog, também altere o `package.json` e `readme.md` (Badges do README.md).
+6. **Versionamento**: registrar mudancas no `CHANGELOG.md` seguindo Keep a Changelog, também altere o `package.json` e `readme.md` (Badges do README.md). Cada versão deve ter um parágrafo introdutório em linguagem humana logo abaixo do cabeçalho `## [x.y.z]`, antes das seções `### Adicionado/Alterado/Removido` — descrevendo em prosa o que a versão representa (ex: "Esta versão foca em polimento visual e reorganização interna...").
 7. **Comunicacao**: responder em portugues clara e direta com o time.
 8. **Commit messages**: agrupar por natureza. em pt-br. seguindo o padrao do sistema.
 9. **README.md**: sempre que fizer alteracoes significativas, atualize o README.md.
@@ -217,7 +217,9 @@ Layouts, `loading.tsx` e metadata continuam em `src/app/`.
 | `contas` | `accounts` |
 | `categorias` | `categories` |
 | `orcamentos` | `budgets` |
-| `pagadores` | `payers` |
+| `pessoas` | `payers` |
+
+> **Nota:** o conceito de "pagador" foi renomeado para **"pessoa"** na UI (labels, toasts, textos visíveis ao usuário). O código, rotas e schema continuam usando o termo original em inglês (`payer`, `payerId`, `adminPayerId`) e em português interno (`pagador` como variável). Não renomear esses identificadores — a divergência entre UI e código é intencional e documentada.
 | `anotacoes` | `notes` |
 | `calendario` | `calendar` |
 | `ajustes` | `settings` |
--- a/6
+++ b/6
@@ -40,9 +40,9 @@ COPY --from=deps /app/public/pdf.worker.min.mjs ./public/pdf.worker.min.mjs
 ENV NEXT_TELEMETRY_DISABLED=1 \
    NODE_ENV=production

-# Token público do Logo.dev — injetado em build time (NEXT_PUBLIC_* é inlined pelo Next.js)
-ARG NEXT_PUBLIC_LOGO_DEV_TOKEN
-ENV NEXT_PUBLIC_LOGO_DEV_TOKEN=$NEXT_PUBLIC_LOGO_DEV_TOKEN
+# Nota: a integração Logo.dev não precisa mais de build args. O token
+# `LOGO_DEV_TOKEN` é lido em runtime no servidor — basta configurá-lo no
+# host (Coolify, Railway, etc.) junto com `LOGO_DEV_SECRET_KEY`.

 # Build da aplicação Next.js
 RUN pnpm build
--- a/README.md
+++ b/README.md
@@ -8,7 +8,7 @@

 > **⚠️ Não há versão online hospedada.** Você precisa clonar o repositório e rodar localmente ou no seu próprio servidor.

-[![Version](https://img.shields.io/badge/version-2.4.1-blue?style=flat-square)](CHANGELOG.md)
+[![Version](https://img.shields.io/badge/version-2.4.2-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/)
@@ -397,29 +397,33 @@ O app exibe logos automáticos de marcas na coluna de estabelecimentos nos lanç
 ### Variáveis

 ```env
-NEXT_PUBLIC_LOGO_DEV_TOKEN=pk_...   # token público (obrigatório para exibir logos)
+LOGO_DEV_TOKEN=pk_...          # token público (obrigatório para exibir logos)
 LOGO_DEV_SECRET_KEY=sk_...     # chave secreta (obrigatório para o picker de busca)
 ```

+> **Atualizando da v2.4.1 ou anterior:** a variável foi renomeada de `NEXT_PUBLIC_LOGO_DEV_TOKEN` para `LOGO_DEV_TOKEN`. Renomeie no seu `.env` (ou nas variáveis do Coolify/host) e remova o secret homônimo do GitHub Actions — ele não é mais usado. Não há outra etapa de migração.
+
 ### Como configurar

+Ambas as variáveis são lidas em **runtime** pelo servidor Next.js. Não há mais nenhuma etapa no CI nem `--build-arg` no Docker.
+
 **Self-hosted via Docker Hub (Coolify, Railway, etc.):**

-O `NEXT_PUBLIC_LOGO_DEV_TOKEN` é inlinado pelo Next.js **em build time** — ele não pode ser injetado como variável de ambiente em runtime. Por isso o processo é diferente do usual:
-
-1. Cadastre o secret `NEXT_PUBLIC_LOGO_DEV_TOKEN` no repositório GitHub Fork (Settings → Secrets → Actions)
-2. O workflow de CI já está configurado para passar o valor como `--build-arg` no `docker build`
-3. Faça um novo build (push ou Run workflow manual) — a imagem gerada já terá o token embutido
-4. No Coolify (ou outro host), adicione apenas `LOGO_DEV_SECRET_KEY` como variável de ambiente runtime
+1. Adicione `LOGO_DEV_TOKEN` e `LOGO_DEV_SECRET_KEY` nas variáveis de ambiente do host
+2. Reinicie o container — pronto

 **Desenvolvimento local:**

-Adicione as duas variáveis no `.env` normalmente — o Next.js as lê em `pnpm dev` sem nenhuma etapa extra.
+Adicione as duas no `.env` e rode `pnpm dev`.

 ### Como usar

 Após configurado, passe o mouse sobre o avatar de qualquer estabelecimento nos lançamentos — um ícone de lápis aparece. Clique para abrir o picker, busque pelo nome da marca e selecione o logo desejado. O mapeamento fica salvo por usuário no banco.

+### Arquitetura
+
+O token **nunca chega ao cliente**. O servidor constrói a URL `https://img.logo.dev/{domain}?token=...` nos endpoints `/api/logo/mapping` e `/api/logo/search`, e o cliente apenas consome a URL pronta. Um Context Provider (`LogoDevProvider`) propaga a flag `enabled` para os componentes que decidem se renderizam o picker.
+
 ---

 ## 🔐 Variáveis de Ambiente
@@ -471,8 +475,8 @@ GOOGLE_GENERATIVE_AI_API_KEY=
 OPENROUTER_API_KEY=

 # Logo.dev (opcional, necessário para logos automáticos de estabelecimentos)
-# NEXT_PUBLIC_LOGO_DEV_TOKEN deve ser passado como build arg no CI — veja seção Logo.dev
-NEXT_PUBLIC_LOGO_DEV_TOKEN=
+# Ambas as variáveis são runtime — basta definir no host; nenhum build arg necessário.
+LOGO_DEV_TOKEN=
 LOGO_DEV_SECRET_KEY=
 ```

--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "openmonetis",
-	"version": "2.4.1",
+	"version": "2.4.2",
 	"private": true,
 	"packageManager": "pnpm@10.33.0",
 	"scripts": {
@@ -28,19 +28,20 @@
 		"//docker:logs": "Acompanha logs de todos os containers em tempo real",
 		"docker:update": "docker compose pull && docker compose up -d",
 		"//docker:update": "Atualiza para a imagem mais recente do Docker Hub e reinicia",
-		"backup": "bash scripts/backup.sh"
+		"backup": "bash scripts/backup.sh",
+		"mockup": "tsx scripts/mock-data.ts"
 	},
 	"dependencies": {
-		"@ai-sdk/anthropic": "^3.0.69",
-		"@ai-sdk/google": "^3.0.63",
-		"@ai-sdk/openai": "^3.0.52",
-		"@aws-sdk/client-s3": "^3.1030.0",
-		"@aws-sdk/s3-request-presigner": "^3.1030.0",
-		"@better-auth/passkey": "^1.6.2",
+		"@ai-sdk/anthropic": "^3.0.71",
+		"@ai-sdk/google": "^3.0.64",
+		"@ai-sdk/openai": "^3.0.53",
+		"@aws-sdk/client-s3": "^3.1032.0",
+		"@aws-sdk/s3-request-presigner": "^3.1032.0",
+		"@better-auth/passkey": "^1.6.5",
 		"@dnd-kit/core": "^6.3.1",
 		"@dnd-kit/sortable": "^10.0.0",
 		"@dnd-kit/utilities": "^3.2.2",
-		"@openrouter/ai-sdk-provider": "^2.5.1",
+		"@openrouter/ai-sdk-provider": "^2.8.0",
 		"@radix-ui/react-alert-dialog": "1.1.15",
 		"@radix-ui/react-avatar": "1.1.11",
 		"@radix-ui/react-checkbox": "1.3.3",
@@ -63,11 +64,11 @@
 		"@radix-ui/react-toggle-group": "1.1.11",
 		"@radix-ui/react-tooltip": "1.2.8",
 		"@remixicon/react": "4.9.0",
-		"@tanstack/react-query": "^5.99.0",
+		"@tanstack/react-query": "^5.99.2",
 		"@tanstack/react-table": "8.21.3",
-		"@tanstack/react-virtual": "^3.13.23",
-		"ai": "^6.0.159",
-		"better-auth": "1.6.2",
+		"@tanstack/react-virtual": "^3.13.24",
+		"ai": "^6.0.168",
+		"better-auth": "1.6.5",
 		"canvas-confetti": "^1.9.4",
 		"class-variance-authority": "0.7.1",
 		"clsx": "2.1.1",
@@ -77,7 +78,7 @@
 		"exceljs": "^4.4.0",
 		"jspdf": "^4.2.1",
 		"jspdf-autotable": "^5.0.7",
-		"next": "16.2.3",
+		"next": "16.2.4",
 		"next-themes": "0.4.6",
 		"pdfjs-dist": "^5.6.205",
 		"pg": "8.20.0",
@@ -85,7 +86,7 @@
 		"react-day-picker": "^9.14.0",
 		"react-dom": "19.2.5",
 		"recharts": "3.8.1",
-		"resend": "^6.11.0",
+		"resend": "^6.12.0",
 		"sonner": "2.0.7",
 		"tailwind-merge": "3.5.0",
 		"vaul": "1.1.2",
@@ -97,7 +98,7 @@
 		}
 	},
 	"devDependencies": {
-		"@biomejs/biome": "2.4.11",
+		"@biomejs/biome": "2.4.12",
 		"@tailwindcss/postcss": "4.2.2",
 		"@types/canvas-confetti": "^1.9.0",
 		"@types/node": "25.6.0",
@@ -109,6 +110,6 @@
 		"knip": "^6.4.1",
 		"tailwindcss": "4.2.2",
 		"tsx": "4.21.0",
-		"typescript": "6.0.2"
+		"typescript": "6.0.3"
 	}
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/public/images/dashboard-preview-dark.webp
+++ b/public/images/dashboard-preview-dark.webp
--- a/public/images/dashboard-preview-light.webp
+++ b/public/images/dashboard-preview-light.webp
--- a/public/images/openmonetis_pwa.webp
+++ b/public/images/openmonetis_pwa.webp
--- a/public/images/preview-calendario-dark.webp
+++ b/public/images/preview-calendario-dark.webp
--- a/public/images/preview-calendario-light.webp
+++ b/public/images/preview-calendario-light.webp
--- a/public/images/preview-cartao-dark.webp
+++ b/public/images/preview-cartao-dark.webp
--- a/public/images/preview-cartao-light.webp
+++ b/public/images/preview-cartao-light.webp
--- a/public/images/preview-importacao-dark.webp
+++ b/public/images/preview-importacao-dark.webp
--- a/public/images/preview-importacao-light.webp
+++ b/public/images/preview-importacao-light.webp
--- a/public/images/preview-lancamentos-dark.webp
+++ b/public/images/preview-lancamentos-dark.webp
--- a/public/images/preview-lancamentos-light.webp
+++ b/public/images/preview-lancamentos-light.webp
--- a/public/images/preview-orcamentos-dark.webp
+++ b/public/images/preview-orcamentos-dark.webp
--- a/public/images/preview-orcamentos-light.webp
+++ b/public/images/preview-orcamentos-light.webp
--- a/public/images/preview-parcelas-dark.webp
+++ b/public/images/preview-parcelas-dark.webp
--- a/public/images/preview-parcelas-light.webp
+++ b/public/images/preview-parcelas-light.webp
--- a/public/images/preview-pre-lancamentos-dark.webp
+++ b/public/images/preview-pre-lancamentos-dark.webp
--- a/public/images/preview-pre-lancamentos-light.webp
+++ b/public/images/preview-pre-lancamentos-light.webp
--- a/public/images/pwa-preview-dark.webp
+++ b/public/images/pwa-preview-dark.webp
--- a/public/images/pwa-preview-light.webp
+++ b/public/images/pwa-preview-light.webp
--- a/src/app/(dashboard)/budgets/page.tsx
+++ b/src/app/(dashboard)/budgets/page.tsx
@@ -20,22 +20,13 @@ const getSingleParam = (
 	return Array.isArray(value) ? (value[0] ?? null) : value;
 };

-const capitalize = (value: string) =>
-	value.length === 0 ? value : value[0]?.toUpperCase() + value.slice(1);
-
 export default async function Page({ searchParams }: PageProps) {
 	await connection();
 	const userId = await getUserId();
 	const resolvedSearchParams = searchParams ? await searchParams : undefined;
 	const periodoParam = getSingleParam(resolvedSearchParams, "periodo");

-	const {
-		period: selectedPeriod,
-		monthName: rawMonthName,
-		year,
-	} = parsePeriodParam(periodoParam);
-
-	const periodLabel = `${capitalize(rawMonthName)} ${year}`;
+	const { period: selectedPeriod } = parsePeriodParam(periodoParam);

 	const { budgets, categoriesOptions } = await fetchBudgetsForUser(
 		userId,
@@ -49,7 +40,6 @@ export default async function Page({ searchParams }: PageProps) {
 				budgets={budgets}
 				categories={categoriesOptions}
 				selectedPeriod={selectedPeriod}
-				periodLabel={periodLabel}
 			/>
 		</main>
 	);
--- a/src/app/(dashboard)/categories/history/page.tsx
+++ b/src/app/(dashboard)/categories/history/page.tsx
@@ -1,6 +1,6 @@
 import { connection } from "next/server";
 import { fetchCategoryHistory } from "@/features/dashboard/categories/category-history-queries";
-import { CategoryHistoryWidget } from "@/features/dashboard/components/category-history-widget";
+import { CategoryHistoryWidget } from "@/features/dashboard/components/widgets/category-history-widget";
 import { getUser } from "@/shared/lib/auth/server";
 import { getCurrentPeriod } from "@/shared/utils/period";

--- a/src/app/(dashboard)/layout.tsx
+++ b/src/app/(dashboard)/layout.tsx
@@ -1,9 +1,10 @@
 import { connection } from "next/server";
 import { fetchDashboardNavbarData } from "@/features/dashboard/navbar-queries";
 import { AppNavbar } from "@/shared/components/navigation/navbar/app-navbar";
+import { LogoDevProvider } from "@/shared/components/providers/logo-dev-provider";
 import { PrivacyProvider } from "@/shared/components/providers/privacy-provider";
-import { DotPattern } from "@/shared/components/ui/dot-pattern";
 import { getUserSession } from "@/shared/lib/auth/server";
+import { isLogoDevEnabled } from "@/shared/lib/logo/server";

 export default async function DashboardLayout({
 	children,
@@ -13,8 +14,10 @@ export default async function DashboardLayout({
 	await connection();
 	const session = await getUserSession();
 	const navbarData = await fetchDashboardNavbarData(session.user.id);
+	const logoDevEnabled = isLogoDevEnabled();

 	return (
+		<LogoDevProvider enabled={logoDevEnabled}>
 			<PrivacyProvider>
 				<AppNavbar
 					user={{ ...session.user, image: session.user.image ?? null }}
@@ -23,17 +26,6 @@ export default async function DashboardLayout({
 					notificationsSnapshot={navbarData.notificationsSnapshot}
 				/>
 				<div className="relative flex flex-1 flex-col pt-16">
-				<div className="pointer-events-none absolute inset-x-0 top-0 h-32 overflow-hidden md:h-36">
-					<DotPattern
-						width={20}
-						height={20}
-						cx={1.25}
-						cy={1.25}
-						cr={1.25}
-						className="text-primary/10 mask-[linear-gradient(to_bottom,black_0%,transparent_100%)]"
-					/>
-					<div className="absolute inset-0 bg-linear-to-b from-primary/6 to-transparent" />
-				</div>
 					<div className="@container/main flex flex-1 flex-col gap-2">
 						<div className="flex flex-col gap-4 py-5 md:gap-6 w-full max-w-8xl mx-auto px-4 ">
 							{children}
@@ -41,5 +33,6 @@ export default async function DashboardLayout({
 					</div>
 				</div>
 			</PrivacyProvider>
+		</LogoDevProvider>
 	);
 }
--- a/src/app/(dashboard)/payers/layout.tsx
+++ b/src/app/(dashboard)/payers/layout.tsx
@@ -2,7 +2,7 @@ import { RiGroupLine } from "@remixicon/react";
 import PageDescription from "@/shared/components/page-description";

 export const metadata = {
-	title: "Pagadores",
+	title: "Pessoas",
 };

 export default function RootLayout({
@@ -14,7 +14,7 @@ export default function RootLayout({
 		<section className="space-y-6">
 			<PageDescription
 				icon={<RiGroupLine />}
-				title="Pagadores"
+				title="Pessoas"
 				subtitle="Gerencie as pessoas ou entidades responsáveis pelos pagamentos."
 			/>
 			{children}
--- a/src/app/(dashboard)/payers/loading.tsx
+++ b/src/app/(dashboard)/payers/loading.tsx
@@ -1,7 +1,7 @@
 import { Skeleton } from "@/shared/components/ui/skeleton";

 /**
- * Loading state para a página de pagadores
+ * Loading state para a página de pessoas
 * Layout: Header + Input de compartilhamento + Grid de cards
 */
 export default function PagadoresLoading() {
@@ -17,7 +17,7 @@ export default function PagadoresLoading() {
 					</div>
 				</div>

-				{/* Grid de cards de pagadores */}
+				{/* Grid de cards de pessoas */}
 				<div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
 					{Array.from({ length: 6 }).map((_, i) => (
 						<div key={i} className="rounded-md border p-6 space-y-4">
--- a/src/app/(dashboard)/reports/category-trends/page.tsx
+++ b/src/app/(dashboard)/reports/category-trends/page.tsx
@@ -40,7 +40,9 @@ export default async function Page({ searchParams }: PageProps) {
 	// Extract query params
 	const inicioParam = getSingleParam(resolvedSearchParams, "inicio");
 	const fimParam = getSingleParam(resolvedSearchParams, "fim");
-	const categoriasParam = getSingleParam(resolvedSearchParams, "categories");
+	const categoriasParam =
+		getSingleParam(resolvedSearchParams, "categorias") ??
+		getSingleParam(resolvedSearchParams, "categories");

 	// Calculate default period (last 6 months)
 	const currentPeriod = getCurrentPeriod();
--- a/src/app/(landing-page)/page.tsx
+++ b/src/app/(landing-page)/page.tsx
@@ -30,7 +30,6 @@ import { NavbarShell } from "@/shared/components/navigation/navbar/navbar-shell"
 import { Badge } from "@/shared/components/ui/badge";
 import { Button } from "@/shared/components/ui/button";
 import { Card, CardContent } from "@/shared/components/ui/card";
-import { DotPattern } from "@/shared/components/ui/dot-pattern";
 import { getOptionalUserSession } from "@/shared/lib/auth/server";

 export default async function Page() {
@@ -57,7 +56,7 @@ export default async function Page() {
 						<a
 							key={href}
 							href={href}
-							className="rounded-md px-2 py-1.5 text-sm font-medium text-black/75 hover:text-black hover:bg-black/10 transition-colors"
+							className="rounded-md px-2 py-1.5 text-sm font-medium text-black/75 hover:text-black hover:bg-black/10 transition-colors dark:text-white/75 dark:hover:text-white dark:hover:bg-white/10"
 						>
 							{label}
 						</a>
@@ -70,9 +69,9 @@ export default async function Page() {
 						(session?.user ? (
 							<Link prefetch href="/dashboard" className="hidden md:block">
 								<Button
-									variant="outline"
+									variant="navbar"
 									size="sm"
-									className="border-black/20 text-black/80 bg-transparent hover:bg-black/10 hover:text-black shadow-none"
+									className="border border-black/20 dark:border-white/20"
 								>
 									Dashboard
 								</Button>
@@ -83,7 +82,7 @@ export default async function Page() {
 									<Button
 										variant="ghost"
 										size="sm"
-										className="text-black/75 hover:bg-black/10 hover:text-black shadow-none"
+										className="text-black/75 hover:bg-black/10 hover:text-black shadow-none dark:text-white/75 dark:hover:bg-white/10 dark:hover:text-white"
 									>
 										Entrar
 									</Button>
@@ -91,7 +90,7 @@ export default async function Page() {
 								<Link href="/signup">
 									<Button
 										size="sm"
-										className="bg-black/10 border border-black/20 text-black shadow-none hover:bg-black/20 gap-2"
+										className="bg-black/10 border border-black/20 text-black shadow-none hover:bg-black/20 gap-2 dark:bg-white/10 dark:border-white/20 dark:text-white dark:hover:bg-white/20"
 									>
 										Começar
 									</Button>
@@ -107,18 +106,6 @@ export default async function Page() {

 			{/* Hero Section */}
 			<section className="relative overflow-hidden pt-14 md:pt-20 lg:pt-24 pb-0">
-				<div className="pointer-events-none absolute inset-x-0 top-0 h-80 overflow-hidden">
-					<DotPattern
-						width={20}
-						height={20}
-						cx={1.25}
-						cy={1.25}
-						cr={1.25}
-						className="text-primary/10 mask-[linear-gradient(to_bottom,black_0%,transparent_100%)]"
-					/>
-					<div className="absolute inset-0 bg-linear-to-b from-primary/6 to-transparent" />
-				</div>
-
 				<div className="max-w-8xl mx-auto px-4 relative">
 					<div className="mx-auto flex max-w-4xl flex-col items-center text-center gap-5 md:gap-6 pb-10 md:pb-14">
 						<Badge variant="outline">
@@ -265,72 +252,34 @@ export default async function Page() {
 						</AnimateOnScroll>

 						<AnimateOnScroll>
-							<div className="grid gap-4 md:gap-6 sm:grid-cols-2 lg:grid-cols-3">
-								{mainFeatures.map((feature) => (
+							<div className="grid gap-4 md:gap-4 sm:grid-cols-2 lg:grid-cols-3">
+								{[...mainFeatures, ...extraFeatures].map((feature) => (
 									<Card key={feature.title}>
-										<CardContent className="pt-5 pb-5 md:pt-6">
-											<div className="flex flex-col gap-3 md:gap-4">
+										<CardContent>
+											<div className="flex items-center gap-3 mb-3">
 												<div
-													className="flex h-11 w-11 md:h-12 md:w-12 items-center justify-center rounded-lg"
+													className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full"
 													style={{
-														backgroundColor: `color-mix(in oklch, ${feature.colorVar} 14%, transparent)`,
+														backgroundColor: `color-mix(in oklch, ${feature.colorVar} 20%, transparent)`,
 													}}
 												>
 													<feature.icon
-														className="size-[22px] md:size-6"
-														style={{ color: feature.colorVar }}
+														className="size-5"
+														style={{ color: "var(--foreground)" }}
 													/>
 												</div>
-												<div>
-													<h3 className="font-semibold text-base md:text-lg mb-1.5 md:mb-2">
+												<h3 className="font-semibold text-base leading-tight">
 													{feature.title}
 												</h3>
+											</div>
 											<p className="text-sm text-muted-foreground leading-relaxed">
 												{feature.description}
 											</p>
-												</div>
-											</div>
 										</CardContent>
 									</Card>
 								))}
 							</div>
 						</AnimateOnScroll>
-
-						<AnimateOnScroll>
-							<div className="mt-8 md:mt-12">
-								<h3 className="text-sm font-semibold text-center mb-4 md:mb-6 text-muted-foreground">
-									Também inclui
-								</h3>
-								<div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
-									{extraFeatures.map((feature) => (
-										<div
-											key={feature.title}
-											className="flex items-start gap-3 rounded-lg border bg-card p-3 md:p-4"
-										>
-											<div
-												className="flex h-9 w-9 shrink-0 items-center justify-center rounded-md"
-												style={{
-													backgroundColor: `color-mix(in oklch, ${feature.colorVar} 14%, transparent)`,
-												}}
-											>
-												<feature.icon
-													className="size-[18px]"
-													style={{ color: feature.colorVar }}
-												/>
-											</div>
-											<div className="min-w-0">
-												<h4 className="font-semibold text-sm mb-0.5">
-													{feature.title}
-												</h4>
-												<p className="text-xs text-muted-foreground leading-relaxed">
-													{feature.description}
-												</p>
-											</div>
-										</div>
-									))}
-								</div>
-							</div>
-						</AnimateOnScroll>
 					</div>
 				</div>
 			</section>
@@ -396,14 +345,14 @@ export default async function Page() {
 										{pwaHighlights.map((item) => (
 											<li key={item.title} className="flex items-start gap-3">
 												<div
-													className="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-md"
+													className="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-full"
 													style={{
-														backgroundColor: `color-mix(in oklch, ${item.colorVar} 14%, transparent)`,
+														backgroundColor: `color-mix(in oklch, ${item.colorVar} 20%, transparent)`,
 													}}
 												>
 													<item.icon
 														className="size-[15px]"
-														style={{ color: item.colorVar }}
+														style={{ color: "var(--foreground)" }}
 													/>
 												</div>
 												<p className="text-sm">
@@ -438,17 +387,19 @@ export default async function Page() {
 										pré-lançamentos automaticamente para você revisar na inbox.
 									</p>
 									<ol className="space-y-3 mb-6">
-										{companionSteps.map((step, index) => (
+										{companionSteps.map((step) => (
 											<li key={step.title} className="flex items-start gap-3">
-												<span
-													className="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-xs font-medium"
+												<div
+													className="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-full"
 													style={{
-														backgroundColor: `color-mix(in oklch, ${step.colorVar} 14%, transparent)`,
-														color: step.colorVar,
+														backgroundColor: `color-mix(in oklch, ${step.colorVar} 20%, transparent)`,
 													}}
 												>
-													{index + 1}
-												</span>
+													<step.icon
+														className="size-3.5"
+														style={{ color: "var(--foreground)" }}
+													/>
+												</div>
 												<p className="text-sm">
 													<span className="font-medium">{step.title}</span>
 													<span className="text-muted-foreground">
@@ -545,14 +496,14 @@ export default async function Page() {
 										<CardContent>
 											<div className="flex items-start gap-4">
 												<div
-													className="flex h-11 w-11 shrink-0 items-center justify-center rounded-lg"
+													className="flex h-11 w-11 shrink-0 items-center justify-center rounded-full"
 													style={{
-														backgroundColor: `color-mix(in oklch, ${item.colorVar} 14%, transparent)`,
+														backgroundColor: `color-mix(in oklch, ${item.colorVar} 20%, transparent)`,
 													}}
 												>
 													<item.icon
 														className="size-6"
-														style={{ color: item.colorVar }}
+														style={{ color: "var(--foreground)" }}
 													/>
 												</div>
 												<div>
@@ -633,14 +584,14 @@ export default async function Page() {
 										<CardContent>
 											<div className="flex gap-3 md:gap-4">
 												<div
-													className="flex h-9 w-9 md:h-10 md:w-10 shrink-0 items-center justify-center rounded-lg"
+													className="flex h-9 w-9 md:h-10 md:w-10 shrink-0 items-center justify-center rounded-full"
 													style={{
-														backgroundColor: `color-mix(in oklch, ${item.colorVar} 14%, transparent)`,
+														backgroundColor: `color-mix(in oklch, ${item.colorVar} 20%, transparent)`,
 													}}
 												>
 													<item.icon
 														className="size-[18px] md:size-5"
-														style={{ color: item.colorVar }}
+														style={{ color: "var(--foreground)" }}
 													/>
 												</div>
 												<div>
--- a/src/app/api/logo/mapping/route.ts
+++ b/src/app/api/logo/mapping/route.ts
@@ -1,26 +1,29 @@
 import { NextResponse } from "next/server";
 import { getOptionalUserSession } from "@/shared/lib/auth/server";
 import { fetchEstablishmentLogoDomain } from "@/shared/lib/logo/establishment-logo-queries";
+import { buildLogoDevUrl } from "@/shared/lib/logo/server";

 /**
 * GET /api/logo/mapping?name={name}
 *
- * Retorna o domínio Logo.dev salvo pelo usuário para um estabelecimento.
- * Usado pelo EstablishmentLogo para hidratar o domain salvo no banco.
+ * Retorna o domínio Logo.dev salvo pelo usuário para um estabelecimento,
+ * junto com a `logoUrl` final (construída server-side com o token). O
+ * cliente usa `logoUrl` diretamente — sem precisar conhecer o token.
 */
 export async function GET(request: Request) {
 	const session = await getOptionalUserSession();
 	if (!session) {
-		return NextResponse.json({ domain: null }, { status: 200 });
+		return NextResponse.json({ domain: null, logoUrl: null }, { status: 200 });
 	}

 	const { searchParams } = new URL(request.url);
 	const name = searchParams.get("name")?.trim();

 	if (!name) {
-		return NextResponse.json({ domain: null }, { status: 200 });
+		return NextResponse.json({ domain: null, logoUrl: null }, { status: 200 });
 	}

 	const domain = await fetchEstablishmentLogoDomain(session.user.id, name);
-	return NextResponse.json({ domain });
+	const logoUrl = buildLogoDevUrl(domain);
+	return NextResponse.json({ domain, logoUrl });
 }
--- a/src/app/api/logo/search/route.ts
+++ b/src/app/api/logo/search/route.ts
@@ -1,5 +1,6 @@
 import { NextResponse } from "next/server";
 import { getOptionalUserSession } from "@/shared/lib/auth/server";
+import { buildLogoDevUrl } from "@/shared/lib/logo/server";

 const LOGO_DEV_SEARCH_URL = "https://api.logo.dev/search";

@@ -8,6 +9,10 @@ interface LogoResult {
 	domain: string;
 }

+interface LogoResultWithUrl extends LogoResult {
+	logoUrl: string | null;
+}
+
 async function searchByStrategy(
 	q: string,
 	strategy: "match" | "typeahead",
@@ -66,12 +71,14 @@ export async function GET(request: Request) {

 	// Mescla e deduplica por domain, mantendo ordem (match tem prioridade)
 	const seen = new Set<string>();
-	const merged: LogoResult[] = [];
+	const merged: LogoResultWithUrl[] = [];

 	for (const result of [...matchResults, ...typeaheadResults]) {
 		if (!seen.has(result.domain)) {
 			seen.add(result.domain);
-			merged.push(result);
+			// logoUrl é construída server-side com o token — o cliente nunca
+			// precisa conhecer LOGO_DEV_TOKEN para renderizar a imagem.
+			merged.push({ ...result, logoUrl: buildLogoDevUrl(result.domain) });
 			if (merged.length >= 20) break;
 		}
 	}
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -10,7 +10,7 @@
 :root {
  --background: oklch(97.412% 0.00332 67.032);
  --foreground: oklch(27% 0.008 45);
-  --card: oklch(99% 0.002 67);
+  --card: oklch(100% 0 0);
  --card-foreground: var(--foreground);
  --popover: oklch(100% 0 0);
  --popover-foreground: var(--foreground);
@@ -36,7 +36,7 @@
  --destructive: oklch(55% 0.22 27);
  --destructive-foreground: oklch(98% 0.005 30);

-  --border: oklch(90.274% 0.01362 60.342);
+  --border: oklch(92.323% 0.01276 63.703);
  --input: var(--border);
  --ring: var(--primary);

@@ -57,10 +57,6 @@
  --data-4:  oklch(74% 0.18 55);  /* âmbar */
  --data-5:  oklch(78% 0.16 68);  /* âmbar-dourado */
  --data-6:  oklch(76% 0.15 82);  /* amarelo-quente */
-  --data-7:  oklch(70% 0.17 95);  /* amarelo-lima */
-  --data-8:  oklch(65% 0.18 108); /* lima-verde */
-  --data-9:  oklch(62% 0.17 120); /* verde-oliva claro */
-  --data-10: oklch(56% 0.15 10);  /* terracota escuro */

  --sidebar: oklch(99.3% 0.0015 75);
  --sidebar-foreground: var(--foreground);
@@ -71,7 +67,7 @@
  --sidebar-border: oklch(91% 0.004 70);
  --sidebar-ring: var(--primary);

-  --radius: 0.625rem;
+  --radius: 0.7rem;

  --shadow-2xs: 0 1px 2px 0px oklch(35% 0.02 45 / 0.04);
  --shadow-xs: 0 1px 3px 0px oklch(35% 0.02 45 / 0.06);
@@ -94,7 +90,7 @@
 .dark {
  --background: oklch(18% 0.004 55);
  --foreground: oklch(93% 0.008 80);
-  --card: oklch(21.5% 0.004 55);
+  --card: oklch(21.531% 0.00369 48.293);
  --card-foreground: var(--foreground);
  --popover: oklch(24% 0.004 55);
  --popover-foreground: var(--foreground);
@@ -120,7 +116,7 @@
  --destructive: oklch(62% 0.2 28);
  --destructive-foreground: oklch(98% 0.005 30);

-  --border: oklch(31% 0.004 55);
+  --border: oklch(28% 0.0035 55);
  --input: var(--border);
  --ring: var(--primary);

@@ -141,10 +137,6 @@
  --data-4:  oklch(81% 0.18 55);
  --data-5:  oklch(84% 0.16 68);
  --data-6:  oklch(82% 0.15 82);
-  --data-7:  oklch(77% 0.17 95);
-  --data-8:  oklch(72% 0.18 108);
-  --data-9:  oklch(69% 0.17 120);
-  --data-10: oklch(63% 0.15 10);

  --sidebar: oklch(15.5% 0.004 55);
  --sidebar-foreground: var(--foreground);
@@ -155,7 +147,7 @@
  --sidebar-border: oklch(30% 0.004 55);
  --sidebar-ring: var(--primary);

-  --radius: 0.625rem;
+  --radius: 0.7rem;

  --shadow-2xs: 0 1px 2px 0px oklch(0% 0 0 / 0.3);
  --shadow-xs: 0 1px 3px 0px oklch(0% 0 0 / 0.4);
--- a/src/features/accounts/actions.ts
+++ b/src/features/accounts/actions.ts
@@ -99,7 +99,7 @@ export async function createAccountAction(

 		if (hasInitialBalance && !adminPayerId) {
 			throw new Error(
-				"Pagador com papel administrador não encontrado. Crie um pagador admin antes de definir um saldo inicial.",
+				"Pessoa com papel administrador não encontrado. Crie um pessoa admin antes de definir um saldo inicial.",
 			);
 		}

@@ -299,7 +299,7 @@ export async function transferBetweenAccountsAction(

 		if (!adminPayerId) {
 			throw new Error(
-				"Pagador administrador não encontrado. Por favor, crie um pagador admin.",
+				"Pessoa administrador não encontrado. Por favor, crie um pessoa admin.",
 			);
 		}

--- a/src/features/accounts/components/account-card.tsx
+++ b/src/features/accounts/components/account-card.tsx
@@ -1,4 +1,5 @@
 "use client";
+
 import {
 	RiArrowLeftRightLine,
 	RiDeleteBin5Line,
@@ -47,6 +48,13 @@ export function AccountCard({
 }: AccountCardProps) {
 	const isInactive = status?.toLowerCase() === "inativa";

+	const balanceColor =
+		balance > 0
+			? "text-success"
+			: balance < 0
+				? "text-destructive"
+				: "text-foreground";
+
 	const actions = [
 		{
 			label: "editar",
@@ -75,36 +83,39 @@ export function AccountCard({
 	].filter((action) => typeof action.onClick === "function");

 	return (
-		<Card className={cn("h-full w-full gap-0", className)}>
-			<CardContent className="flex flex-1 flex-col gap-4">
-				<div className="flex items-center gap-2">
-					{icon ? (
+		<Card className={cn("flex w-full flex-col p-6", className)}>
+			<div className="flex items-start justify-between gap-2">
+				<div className="flex min-w-0 items-center gap-2">
 					<div
 						className={cn(
-								"flex items-center justify-center",
-								isInactive && "[&_img]:grayscale [&_img]:opacity-40",
+							"flex shrink-0 items-center justify-center",
+							isInactive && "grayscale opacity-40",
 						)}
 					>
 						{icon}
 					</div>
-					) : null}
-					<h2 className="text-lg font-semibold text-foreground">
+					<div className="min-w-0">
+						<div className="flex items-center gap-1">
+							<h3 className="truncate font-semibold text-foreground">
 								{accountName}
-					</h2>
-
-					{(excludeFromBalance || excludeInitialBalanceFromIncome) && (
+							</h3>
+							{excludeFromBalance || excludeInitialBalanceFromIncome ? (
 								<Tooltip>
 									<TooltipTrigger asChild>
-								<div className="flex items-center">
-									<RiInformationLine className="size-5 text-muted-foreground hover:text-foreground transition-colors cursor-help" />
-								</div>
+										<button
+											type="button"
+											className="shrink-0 text-muted-foreground/70 transition-colors hover:text-foreground"
+											aria-label="Informações da conta"
+										>
+											<RiInformationLine className="size-3.5" />
+										</button>
 									</TooltipTrigger>
-							<TooltipContent side="right" className="max-w-xs">
+									<TooltipContent side="top" align="start" className="max-w-xs">
 										<div className="space-y-1">
 											{excludeFromBalance && (
 												<p className="text-xs">
-											<strong>Desconsiderado do saldo total:</strong> Esta conta
-											não é incluída no cálculo do saldo total geral.
+													<strong>Desconsiderado do saldo total:</strong> Esta
+													conta não é incluída no cálculo do saldo total geral.
 												</p>
 											)}
 											{excludeInitialBalanceFromIncome && (
@@ -119,17 +130,27 @@ export function AccountCard({
 										</div>
 									</TooltipContent>
 								</Tooltip>
-					)}
+							) : null}
 						</div>

-				<div className="space-y-2">
-					<MoneyValues amount={balance} className="text-3xl" />
-					<p className="text-sm text-muted-foreground">{accountType}</p>
+						<p className="text-xs text-muted-foreground">{status}</p>
+					</div>
+				</div>
+
+				<p className="text-xs text-muted-foreground">{accountType}</p>
+			</div>
+
+			<CardContent className="flex flex-1 flex-col gap-2 px-0 pb-2">
+				<div className="flex flex-col gap-0.5">
+					<span className="text-xs text-muted-foreground">Saldo</span>
+					<MoneyValues
+						amount={balance}
+						className={cn("text-2xl font-semibold", balanceColor)}
+					/>
 				</div>
 			</CardContent>

-			{actions.length > 0 ? (
-				<CardFooter className="flex flex-wrap gap-3 px-6 pt-6 text-sm">
+			<CardFooter className="flex flex-wrap gap-4 p-0 text-sm">
 				{actions.map(({ label, icon, onClick, variant }) => (
 					<button
 						key={label}
@@ -146,7 +167,6 @@ export function AccountCard({
 					</button>
 				))}
 			</CardFooter>
-			) : null}
 		</Card>
 	);
 }
--- a/src/features/accounts/components/account-dialog.tsx
+++ b/src/features/accounts/components/account-dialog.tsx
@@ -227,12 +227,12 @@ export function AccountDialog({
 		});
 	};

-	const title = mode === "create" ? "Nova conta" : "Editar conta";
+	const title = mode === "create" ? "Nova conta" : "Atualizar conta";
 	const description =
 		mode === "create"
 			? "Cadastre uma nova conta para organizar seus lançamentos."
 			: "Atualize as informações da conta selecionada.";
-	const submitLabel = mode === "create" ? "Salvar conta" : "Atualizar conta";
+	const submitLabel = mode === "create" ? "Salvar" : "Atualizar";

 	const handleMainDialogOpenChange = (open: boolean) => {
 		if (!open && logoDialogOpen) {
--- a/src/features/accounts/components/account-statement-card.tsx
+++ b/src/features/accounts/components/account-statement-card.tsx
@@ -86,7 +86,7 @@ export function AccountStatementCard({
 						</p>
 						<MoneyValues
 							amount={currentBalance}
-							className="text-3xl leading-none tracking-tighter sm:text-[2rem]"
+							className="text-3xl leading-none tracking-tighter sm:text-2xl"
 						/>
 						<div className="flex items-center gap-2">
 							<Badge
@@ -123,7 +123,7 @@ export function AccountStatementCard({

 						<MetaItem
 							label="Saídas"
-							tooltip="Total de despesas pagas neste mês (considerando divisão entre pagadores)."
+							tooltip="Total de despesas pagas neste mês (considerando divisão entre pessoas)."
 						>
 							<span className="text-sm font-medium text-destructive">
 								{formatCurrency(totalExpenses)}
--- a/src/features/accounts/components/accounts-page.tsx
+++ b/src/features/accounts/components/accounts-page.tsx
@@ -212,7 +212,7 @@ export function AccountsPage({
 				onOpenChange={handleRemoveOpenChange}
 				title={removeTitle}
 				description="Ao remover esta conta, todos os dados relacionados a ela serão perdidos."
-				confirmLabel="Remover conta"
+				confirmLabel="Remover"
 				pendingLabel="Removendo..."
 				confirmVariant="destructive"
 				onConfirm={handleRemoveConfirm}
--- a/src/features/accounts/statement-queries.ts
+++ b/src/features/accounts/statement-queries.ts
@@ -8,7 +8,7 @@ import { INITIAL_BALANCE_NOTE } from "@/shared/lib/accounts/constants";
 import { db } from "@/shared/lib/db";
 import { getAdminPayerId } from "@/shared/lib/payers/get-admin-id";

-export type AccountSummaryData = {
+type AccountSummaryData = {
 	openingBalance: number;
 	currentBalance: number;
 	totalIncomes: number;
--- a/src/features/auth/components/auth-card-shell.tsx
+++ b/src/features/auth/components/auth-card-shell.tsx
@@ -1,28 +1,12 @@
 import type { PropsWithChildren } from "react";
 import { Card, CardContent } from "@/shared/components/ui/card";
-import { DotPattern } from "@/shared/components/ui/dot-pattern";
 import AuthSidebar from "./auth-sidebar";

 export function AuthCardShell({ children }: PropsWithChildren) {
 	return (
-		<Card className="relative overflow-hidden rounded-2xl md:rounded-[2rem] p-0 shadow-lg border-primary/10">
-			<div className="pointer-events-none absolute inset-0 overflow-hidden rounded-[inherit]">
-				<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,var(--color-primary)_0%,transparent_70%)] opacity-10 blur-3xl animate-blob mix-blend-multiply" />
-				<DotPattern
-					width={17}
-					height={17}
-					cx={1.3}
-					cy={1.3}
-					cr={1.3}
-					className="text-primary/8 mask-[linear-gradient(to_bottom,black,transparent_84%)]"
-				/>
-				<div className="absolute inset-0 bg-linear-to-br from-primary/6 via-transparent to-transparent opacity-80" />
-			</div>
-
-			<CardContent className="relative z-10 grid gap-0 p-0 md:min-h-[640px] md:grid-cols-[1.05fr_0.95fr] overflow-hidden rounded-[inherit]">
-				<div className="flex bg-card/60 backdrop-blur-xl md:rounded-l-[2rem]">
-					{children}
-				</div>
+		<Card className="overflow-hidden border-primary/10 p-0 shadow-lg">
+			<CardContent className="grid p-0 md:min-h-[640px] md:grid-cols-[1.05fr_0.95fr]">
+				<div className="flex md:rounded-l-4xl">{children}</div>
 				<AuthSidebar />
 			</CardContent>
 		</Card>
--- a/src/features/budgets/components/budget-card.tsx
+++ b/src/features/budgets/components/budget-card.tsx
@@ -15,7 +15,6 @@ import type { Budget } from "./types";

 interface BudgetCardProps {
 	budget: Budget;
-	periodLabel: string;
 	onEdit: (budget: Budget) => void;
 	onRemove: (budget: Budget) => void;
 }
@@ -29,81 +28,88 @@ const buildUsagePercent = (spent: number, limit: number) => {
 };

 const formatCategoryName = (budget: Budget) =>
-	budget.category?.name ?? "Category removida";
+	budget.category?.name ?? "Categoria removida";

-export function BudgetCard({
-	budget,
-	periodLabel,
-	onEdit,
-	onRemove,
-}: BudgetCardProps) {
+export function BudgetCard({ budget, onEdit, onRemove }: BudgetCardProps) {
 	const { amount: limit, spent } = budget;
 	const exceeded = spent > limit && limit >= 0;
 	const difference = Math.abs(spent - limit);
 	const usagePercent = buildUsagePercent(spent, limit);
+	const remaining = Math.max(limit - spent, 0);

 	return (
-		<Card className="flex h-full flex-col">
-			<CardContent className="flex h-full flex-col gap-4">
-				<div className="flex items-start gap-3">
+		<Card className="flex w-full flex-col p-6">
+			<div className="flex items-center gap-2">
 				<CategoryIconBadge
 					icon={budget.category?.icon ?? undefined}
 					name={formatCategoryName(budget)}
 					size="lg"
 				/>
-					<div className="space-y-1">
-						<h3 className="text-base font-semibold leading-tight">
+				<div className="min-w-0">
+					<h3 className="truncate font-semibold text-foreground">
 						{formatCategoryName(budget)}
 					</h3>
-						<p className="text-xs text-muted-foreground">
-							Orçamento de {periodLabel}
-						</p>
 				</div>
 			</div>

-				<div className="flex flex-1 flex-col gap-2">
-					<div className="flex items-baseline justify-between text-sm">
-						<span className="text-muted-foreground">Gasto até agora</span>
+			<CardContent className="flex flex-1 flex-col gap-4 p-0">
+				<div className="flex flex-col gap-0.5">
+					<span className="text-xs text-muted-foreground">
+						{exceeded ? "Excedido em" : "Disponível"}
+					</span>
+					<MoneyValues
+						amount={exceeded ? difference : remaining}
+						className={cn(
+							"text-xl font-semibold",
+							exceeded ? "text-destructive" : "text-success",
+						)}
+					/>
+				</div>
+
+				<div className="grid grid-cols-2 gap-2">
+					<div className="flex flex-col gap-0.5">
+						<span className="text-xs text-muted-foreground">Orçamento</span>
+						<MoneyValues
+							amount={limit}
+							className="text-sm font-semibold text-foreground"
+						/>
+					</div>
+					<div className="flex flex-col gap-0.5">
+						<span className="text-xs text-muted-foreground">Gasto</span>
 						<MoneyValues
 							amount={spent}
-							className={cn(exceeded && "text-destructive")}
+							className={cn(
+								"text-sm font-semibold",
+								exceeded ? "text-destructive" : "text-primary",
+							)}
 						/>
 					</div>
-					<Progress
-						value={usagePercent}
-						className={cn("h-2", exceeded && "bg-destructive/20!")}
-					/>
-					<div className="flex flex-wrap items-baseline justify-between gap-1 text-sm">
-						<span className="text-muted-foreground">Limite</span>
-						<MoneyValues amount={limit} className="text-foreground" />
 				</div>

-					<div>
-						{exceeded ? (
-							<div className="text-xs text-destructive">
-								Excedeu em <MoneyValues amount={difference} />
-							</div>
-						) : (
-							<div className="text-xs text-success">
-								Restam <MoneyValues amount={Math.max(limit - spent, 0)} />{" "}
-								disponíveis.
-							</div>
-						)}
-					</div>
+				<div className="flex flex-col gap-2">
+					<Progress
+						value={usagePercent}
+						className={cn("h-2.5", exceeded && "bg-destructive/20!")}
+						aria-label={`${usagePercent.toFixed(1)}% do orçamento utilizado`}
+					/>
+					<span className="text-xs text-muted-foreground">
+						{usagePercent.toFixed(1)}% utilizado
+					</span>
 				</div>
 			</CardContent>
-			<CardFooter className="flex flex-wrap gap-3 px-5 text-sm">
+
+			<CardFooter className="mt-auto flex flex-wrap gap-4 px-0 pt-2 text-sm">
 				<button
 					type="button"
 					onClick={() => onEdit(budget)}
-					className="flex items-center gap-1 text-primary font-medium transition-opacity hover:opacity-80"
+					className="flex items-center gap-1 font-medium text-primary transition-opacity hover:opacity-80"
 				>
 					<RiPencilLine className="size-4" aria-hidden /> editar
 				</button>
 				{budget.category && (
 					<Link
 						href={`/categories/${budget.category.id}`}
-						className="flex items-center gap-1 text-primary font-medium transition-opacity hover:opacity-80"
+						className="flex items-center gap-1 font-medium text-primary transition-opacity hover:opacity-80"
 					>
 						<RiFileList2Line className="size-4" aria-hidden /> detalhes
 					</Link>
@@ -111,7 +117,7 @@ export function BudgetCard({
 				<button
 					type="button"
 					onClick={() => onRemove(budget)}
-					className="flex items-center gap-1 text-destructive font-medium transition-opacity hover:opacity-80"
+					className="flex items-center gap-1 font-medium text-destructive transition-opacity hover:opacity-80"
 				>
 					<RiDeleteBin5Line className="size-4" aria-hidden /> remover
 				</button>
--- a/src/features/budgets/components/budget-dialog.tsx
+++ b/src/features/budgets/components/budget-dialog.tsx
@@ -161,13 +161,12 @@ export function BudgetDialog({
 		});
 	};

-	const title = mode === "create" ? "Novo orçamento" : "Editar orçamento";
+	const title = mode === "create" ? "Novo orçamento" : "Atualizar orçamento";
 	const description =
 		mode === "create"
 			? "Defina um limite de gastos para acompanhar suas despesas."
 			: "Atualize os detalhes do orçamento selecionado.";
-	const submitLabel =
-		mode === "create" ? "Salvar orçamento" : "Atualizar orçamento";
+	const submitLabel = mode === "create" ? "Salvar" : "Atualizar";
 	const disabled = categories.length === 0;
 	const parsedAmount = Number.parseFloat(formState.amount);
 	const sliderValue = Number.isFinite(parsedAmount)
--- a/src/features/budgets/components/budgets-page.tsx
+++ b/src/features/budgets/components/budgets-page.tsx
@@ -19,14 +19,12 @@ interface BudgetsPageProps {
 	budgets: Budget[];
 	categories: BudgetCategory[];
 	selectedPeriod: string;
-	periodLabel: string;
 }

 export function BudgetsPage({
 	budgets,
 	categories,
 	selectedPeriod,
-	periodLabel,
 }: BudgetsPageProps) {
 	const [editOpen, setEditOpen] = useState(false);
 	const [selectedBudget, setSelectedBudget] = useState<Budget | null>(null);
@@ -137,7 +135,6 @@ export function BudgetsPage({
 							<BudgetCard
 								key={budget.id}
 								budget={budget}
-								periodLabel={periodLabel}
 								onEdit={handleEdit}
 								onRemove={handleRemoveRequest}
 							/>
@@ -168,7 +165,7 @@ export function BudgetsPage({
 				onOpenChange={handleRemoveOpenChange}
 				title={removeTitle}
 				description="Esta ação remove o limite configurado para a categoria selecionada."
-				confirmLabel="Remover orçamento"
+				confirmLabel="Remover"
 				pendingLabel="Removendo..."
 				confirmVariant="destructive"
 				onConfirm={handleRemoveConfirm}
@@ -179,7 +176,7 @@ export function BudgetsPage({
 				onOpenChange={setDuplicateOpen}
 				title="Copiar orçamentos do último mês?"
 				description="Isso copiará os limites definidos no mês anterior para as categorias que ainda não possuem orçamento neste mês."
-				confirmLabel="Copiar orçamentos"
+				confirmLabel="Copiar"
 				pendingLabel="Copiando..."
 				onConfirm={handleDuplicateConfirm}
 			/>
--- a/src/features/budgets/queries.ts
+++ b/src/features/budgets/queries.ts
@@ -13,7 +13,7 @@ const toNumber = (value: string | number | null | undefined) => {
 	return 0;
 };

-export type BudgetData = {
+type BudgetData = {
 	id: string;
 	amount: number;
 	spent: number;
--- a/src/features/calendar/components/calendar-grid.tsx
+++ b/src/features/calendar/components/calendar-grid.tsx
@@ -1,10 +1,8 @@
 "use client";

 import { DayCell } from "@/features/calendar/components/day-cell";
-
 import type { CalendarDay } from "@/shared/lib/types/calendar";
 import { WEEK_DAYS_SHORT } from "@/shared/utils/calendar";
-import { cn } from "@/shared/utils/ui";

 type CalendarGridProps = {
 	days: CalendarDay[];
@@ -18,21 +16,18 @@ export function CalendarGrid({
 	onCreateDay,
 }: CalendarGridProps) {
 	return (
-		<div className="overflow-hidden rounded-lg bg-card drop-shadow-xs border-none">
+		<div className="overflow-hidden rounded-lg border p-2">
 			<div className="grid grid-cols-7 text-sm font-semibold uppercase tracking-wide text-muted-foreground">
 				{WEEK_DAYS_SHORT.map((dayName) => (
-					<span key={dayName} className="px-3 py-2 text-center">
+					<span key={dayName} className="text-center">
 						{dayName}
 					</span>
 				))}
 			</div>

-			<div className="grid grid-cols-7 gap-px bg-border/60 px-px pb-px pt-px">
+			<div className="grid grid-cols-7 gap-px px-px pb-px pt-px">
 				{days.map((day) => (
-					<div
-						key={day.date}
-						className={cn("h-[150px] bg-card p-0.5", !day.isCurrentMonth && "")}
-					>
+					<div key={day.date} className="h-[150px] p-0.5">
 						<DayCell day={day} onSelect={onSelectDay} onCreate={onCreateDay} />
 					</div>
 				))}
--- a/src/features/calendar/components/calendar-legend.tsx
+++ b/src/features/calendar/components/calendar-legend.tsx
@@ -1,34 +1,33 @@
 "use client";

 import { EVENT_TYPE_STYLES } from "@/features/calendar/components/day-cell";
-import StatusDot from "@/shared/components/status-dot";
-import { Card } from "@/shared/components/ui/card";
-import type { CalendarEvent } from "@/shared/lib/types/calendar";
+import { cn } from "@/shared/utils/ui";

-const LEGEND_ITEMS: Array<{
-	type?: CalendarEvent["type"];
-	label: string;
-	dotColor?: string;
-}> = [
-	{ type: "transaction", label: "Lançamentos" },
-	{ type: "boleto", label: "Boleto com vencimento" },
-	{ type: "card", label: "Vencimento de cartão" },
-	{ label: "Pagamento fatura", dotColor: "bg-success" },
+const LEGEND_ITEMS = [
+	{ label: "Lançamentos", ...EVENT_TYPE_STYLES.transaction },
+	{ label: "Parcelas", ...EVENT_TYPE_STYLES.installment },
+	{ label: "Boletos", ...EVENT_TYPE_STYLES.boleto },
+	{ label: "Fatura de Cartão", ...EVENT_TYPE_STYLES.card },
 ];

 export function CalendarLegend() {
 	return (
-		<Card className="flex flex-row gap-2 p-2 text-sm">
-			{LEGEND_ITEMS.map((item, index) => {
-				const dotColor =
-					item.dotColor || (item.type ? EVENT_TYPE_STYLES[item.type].dot : "");
-				return (
-					<span key={item.type || index} className="flex items-center gap-2">
-						<StatusDot color={dotColor} />
+		<ul className="flex items-center justify-start gap-2 px-1">
+			{LEGEND_ITEMS.map((item) => (
+				<li
+					key={item.label}
+					className={cn(
+						"flex items-center gap-1 rounded-md px-2 py-1 text-xs font-medium",
+						item.wrapper,
+					)}
+				>
+					<span
+						className={cn("size-1.5 shrink-0 rounded-full", item.dot)}
+						aria-hidden
+					/>
 					{item.label}
-					</span>
-				);
-			})}
-		</Card>
+				</li>
+			))}
+		</ul>
 	);
 }
--- a/src/features/calendar/components/day-cell.tsx
+++ b/src/features/calendar/components/day-cell.tsx
@@ -1,6 +1,6 @@
 "use client";

-import { RiAddLine } from "@remixicon/react";
+import { RiAddLine, RiCheckboxCircleFill } from "@remixicon/react";
 import type { KeyboardEvent, MouseEvent } from "react";
 import type { CalendarDay, CalendarEvent } from "@/shared/lib/types/calendar";
 import { currencyFormatter } from "@/shared/utils/currency";
@@ -14,44 +14,40 @@ type DayCellProps = {

 export const EVENT_TYPE_STYLES: Record<
 	CalendarEvent["type"],
-	{ wrapper: string; dot: string; accent?: string }
+	{ wrapper: string; dot: string }
 > = {
 	transaction: {
+		wrapper: "bg-primary/10 text-primary dark:bg-primary/5 dark:text-primary",
+		dot: "bg-primary",
+	},
+	installment: {
 		wrapper:
-			"bg-warning/10 text-warning dark:bg-warning/5 dark:text-warning border-l-4 border-warning",
-		dot: "bg-warning",
+			"bg-amber-100 text-amber-600 dark:bg-amber-900/10 dark:text-amber-500",
+		dot: "bg-amber-500",
 	},
 	boleto: {
-		wrapper:
-			"bg-info/10 text-info dark:bg-info/5 dark:text-info border-l-4 border-info",
+		wrapper: "bg-info/10 text-info dark:bg-info/5 dark:text-info",
 		dot: "bg-info",
 	},
 	card: {
 		wrapper:
-			"bg-violet-100 text-violet-600 dark:bg-violet-900/10 dark:text-violet-50 border-l-4 border-violet-500",
-		dot: "bg-violet-600",
+			"bg-violet-100 text-violet-600 dark:bg-violet-900/10 dark:text-violet-500",
+		dot: "bg-violet-600 dark:bg-violet-500",
 	},
 };

-const eventStyles = EVENT_TYPE_STYLES;
-
 const formatCurrencyValue = (value: number | null | undefined) =>
 	currencyFormatter.format(Math.abs(value ?? 0));

-const formatAmount = (event: Extract<CalendarEvent, { type: "transaction" }>) =>
-	formatCurrencyValue(event.transaction.amount);
-
 const buildEventLabel = (event: CalendarEvent) => {
 	switch (event.type) {
-		case "transaction": {
+		case "transaction":
+		case "boleto":
 			return event.transaction.name;
-		}
-		case "boleto": {
+		case "installment":
 			return event.transaction.name;
-		}
-		case "card": {
+		case "card":
 			return event.card.name;
-		}
 		default:
 			return "";
 	}
@@ -59,60 +55,50 @@ const buildEventLabel = (event: CalendarEvent) => {

 const buildEventComplement = (event: CalendarEvent) => {
 	switch (event.type) {
-		case "transaction": {
-			return formatAmount(event);
-		}
-		case "boleto": {
+		case "transaction":
+		case "boleto":
 			return formatCurrencyValue(event.transaction.amount);
-		}
-		case "card": {
-			if (event.card.totalDue !== null) {
-				return formatCurrencyValue(event.card.totalDue);
-			}
-			return null;
-		}
+		case "installment":
+			return `${event.installmentCount}x de ${formatCurrencyValue(event.installmentValue)}`;
+		case "card":
+			return event.card.totalDue !== null
+				? formatCurrencyValue(event.card.totalDue)
+				: null;
 		default:
 			return null;
 	}
 };

-const isPagamentoFatura = (event: CalendarEvent) => {
-	return (
-		event.type === "transaction" &&
-		event.transaction.name.startsWith("Pagamento fatura -")
-	);
-};
-
-const getEventStyle = (event: CalendarEvent) => {
-	if (isPagamentoFatura(event)) {
-		return {
-			wrapper:
-				"bg-success/10 text-success dark:bg-success/5 dark:text-success border-l-4 border-success",
-			dot: "bg-success",
-		};
-	}
-	return eventStyles[event.type];
+const isPaid = (event: CalendarEvent) => {
+	if (event.type === "boleto") return Boolean(event.transaction.isSettled);
+	if (event.type === "card") return event.card.isPaid;
+	return false;
 };

 const DayEventPreview = ({ event }: { event: CalendarEvent }) => {
 	const complement = buildEventComplement(event);
 	const label = buildEventLabel(event);
-	const style = getEventStyle(event);
+	const style = EVENT_TYPE_STYLES[event.type];

 	return (
 		<div
 			className={cn(
-				"flex w-full items-center justify-between gap-2 rounded p-1 text-xs",
+				"flex w-full items-center justify-between gap-2 rounded-md px-2 py-1 text-xs",
 				style.wrapper,
 			)}
 		>
 			<div className="flex min-w-0 items-center gap-1">
+				<span
+					className={cn("size-1.5 shrink-0 rounded-full", style.dot)}
+					aria-hidden
+				/>
 				<span className="truncate">{label}</span>
+				{isPaid(event) && (
+					<RiCheckboxCircleFill className="size-3.5 shrink-0 text-success" />
+				)}
 			</div>
 			{complement ? (
-				<span className={cn("shrink-0 font-medium", style.accent ?? "text-xs")}>
-					{complement}
-				</span>
+				<span className="shrink-0 font-medium">{complement}</span>
 			) : null}
 		</div>
 	);
@@ -143,8 +129,8 @@ export function DayCell({ day, onSelect, onCreate }: DayCellProps) {
 			onClick={() => onSelect(day)}
 			onKeyDown={handleKeyDown}
 			className={cn(
-				"group flex h-full cursor-pointer flex-col gap-1.5 rounded-lg border border-transparent bg-card/80 p-2 text-left transition-all duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:border-primary/40 hover:bg-primary/5 dark:hover:bg-accent",
-				!day.isCurrentMonth && "opacity-60",
+				"group flex h-full cursor-pointer flex-col gap-1.5 rounded-lg border bg-card/80 p-2 text-left transition-all duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:border-primary/40 hover:bg-primary/5 dark:hover:bg-accent",
+				!day.isCurrentMonth && "bg-muted/20 opacity-60",
 				day.isToday && "border-primary/70 bg-primary/5 hover:border-primary",
 			)}
 		>
@@ -159,6 +145,7 @@ export function DayCell({ day, onSelect, onCreate }: DayCellProps) {
 				>
 					{day.label}
 				</span>
+				{day.isCurrentMonth && (
 					<button
 						type="button"
 						onClick={handleCreateClick}
@@ -167,6 +154,7 @@ export function DayCell({ day, onSelect, onCreate }: DayCellProps) {
 					>
 						<RiAddLine className="size-3.5" />
 					</button>
+				)}
 			</div>

 			<div className="flex flex-1 flex-col gap-1.5">
--- a/src/features/calendar/components/event-modal.tsx
+++ b/src/features/calendar/components/event-modal.tsx
@@ -1,5 +1,6 @@
 "use client";

+import { RiCalendarEventLine } from "@remixicon/react";
 import type { ReactNode } from "react";
 import { EVENT_TYPE_STYLES } from "@/features/calendar/components/day-cell";
 import MoneyValues from "@/shared/components/money-values";
@@ -29,17 +30,13 @@ type EventModalProps = {
 const EventCard = ({
 	children,
 	type,
-	isPagamentoFatura = false,
 }: {
 	children: ReactNode;
 	type: CalendarEvent["type"];
-	isPagamentoFatura?: boolean;
 }) => {
-	const style = isPagamentoFatura
-		? { dot: "bg-success" }
-		: EVENT_TYPE_STYLES[type];
+	const style = EVENT_TYPE_STYLES[type];
 	return (
-		<Card className="flex flex-row gap-2 p-3 mb-1">
+		<Card className="flex flex-row gap-2 p-3">
 			<span
 				className={cn("mt-1 size-3 shrink-0 rounded-full", style.dot)}
 				aria-hidden
@@ -49,41 +46,34 @@ const EventCard = ({
 	);
 };

+const DATE_FORMAT: Intl.DateTimeFormatOptions = {
+	day: "2-digit",
+	month: "2-digit",
+	year: "numeric",
+};
+
 const renderLancamento = (
 	event: Extract<CalendarEvent, { type: "transaction" }>,
 ) => {
 	const isReceita = event.transaction.transactionType === "Receita";
-	const isPagamentoFatura =
-		event.transaction.name.startsWith("Pagamento fatura -");

 	return (
-		<EventCard type="transaction" isPagamentoFatura={isPagamentoFatura}>
+		<EventCard type="transaction">
 			<div className="flex items-start justify-between gap-3">
 				<div className="flex flex-col gap-1">
-					<span
-						className={`text-sm font-medium leading-tight ${
-							isPagamentoFatura && "text-success"
-						}`}
-					>
+					<span className="text-sm font-medium leading-tight">
 						{event.transaction.name}
 					</span>
-
-					<div className="flex gap-1">
-						<Badge variant={"outline"}>{event.transaction.categoriaName}</Badge>
+					<Badge variant="outline">{event.transaction.categoriaName}</Badge>
 				</div>
-				</div>
-				<span
-					className={cn(
-						"text-sm font-medium whitespace-nowrap",
-						isReceita ? "text-success" : "text-foreground",
-					)}
-				>
 				<MoneyValues
 					showPositiveSign
-						className="text-base"
+					className={cn(
+						"text-base whitespace-nowrap font-medium",
+						isReceita ? "text-success" : "text-foreground",
+					)}
 					amount={event.transaction.amount}
 				/>
-				</span>
 			</div>
 		</EventCard>
 	);
@@ -91,64 +81,118 @@ const renderLancamento = (

 const renderBoleto = (event: Extract<CalendarEvent, { type: "boleto" }>) => {
 	const isPaid = Boolean(event.transaction.isSettled);
-	const dueDate = event.transaction.dueDate;
-	const dueDateLabel = formatFinancialDateLabel(dueDate, "Vence em", {
-		day: "2-digit",
-		month: "2-digit",
-		year: "numeric",
-	});
+	const dueDateLabel = formatFinancialDateLabel(
+		event.transaction.dueDate,
+		"Vence em",
+		DATE_FORMAT,
+	);
+	const paymentDateLabel = isPaid
+		? formatFinancialDateLabel(
+				event.transaction.boletoPaymentDate,
+				"Pago em",
+				DATE_FORMAT,
+			)
+		: null;

 	return (
 		<EventCard type="boleto">
 			<div className="flex items-start justify-between gap-3">
 				<div className="flex flex-col gap-1">
-					<div className="flex gap-1 items-center">
 					<span className="text-sm font-medium leading-tight">
 						{event.transaction.name}
 					</span>
-
+					<div className="flex flex-wrap gap-x-3 gap-y-0.5 text-xs">
 						{dueDateLabel && (
-							<span className="text-xs text-muted-foreground leading-tight">
-								{dueDateLabel}
-							</span>
+							<span className="text-muted-foreground">{dueDateLabel}</span>
+						)}
+						{paymentDateLabel && (
+							<span className="text-success">{paymentDateLabel}</span>
 						)}
 					</div>
-
-					<Badge variant={"outline"}>{isPaid ? "Pago" : "Pendente"}</Badge>
+					<Badge variant="outline">{isPaid ? "Pago" : "Pendente"}</Badge>
 				</div>
-				<span className="font-medium">
-					<MoneyValues amount={event.transaction.amount} />
-				</span>
+				<MoneyValues
+					className="font-medium whitespace-nowrap"
+					amount={event.transaction.amount}
+				/>
 			</div>
 		</EventCard>
 	);
 };

-const renderCard = (event: Extract<CalendarEvent, { type: "card" }>) => (
+const renderCard = (event: Extract<CalendarEvent, { type: "card" }>) => {
+	const paymentDateLabel = event.card.isPaid
+		? formatFinancialDateLabel(event.card.paymentDate, "Pago em", DATE_FORMAT)
+		: null;
+
+	return (
 		<EventCard type="card">
 			<div className="flex items-start justify-between gap-3">
 				<div className="flex flex-col gap-1">
-				<div className="flex gap-1 items-center">
 					<span className="text-sm font-medium leading-tight">
-						Vencimento Fatura - {event.card.name}
+						Vencimento Fatura — {event.card.name}
 					</span>
-				</div>
-
-				<Badge variant={"outline"}>{event.card.status ?? "Invoice"}</Badge>
+					{paymentDateLabel && (
+						<span className="text-xs text-success">{paymentDateLabel}</span>
+					)}
+					<Badge variant="outline">
+						{event.card.isPaid ? "Pago" : (event.card.status ?? "Fatura")}
+					</Badge>
 				</div>
 				{event.card.totalDue !== null ? (
-				<span className="font-medium">
-					<MoneyValues amount={event.card.totalDue} />
-				</span>
+					<MoneyValues
+						className="font-medium whitespace-nowrap"
+						amount={event.card.totalDue}
+					/>
 				) : null}
 			</div>
 		</EventCard>
-);
+	);
+};
+
+const renderInstallment = (
+	event: Extract<CalendarEvent, { type: "installment" }>,
+) => {
+	const isReceita = event.transaction.transactionType === "Receita";
+
+	return (
+		<EventCard type="installment">
+			<div className="flex items-start justify-between gap-3">
+				<div className="flex flex-col gap-1">
+					<span className="text-sm font-medium leading-tight">
+						{event.transaction.name}
+					</span>
+					<Badge variant="outline">{event.installmentCount}x parcelas</Badge>
+				</div>
+				<div className="flex flex-col items-end gap-0.5">
+					<MoneyValues
+						showPositiveSign
+						className={cn(
+							"text-base whitespace-nowrap font-medium",
+							isReceita ? "text-success" : "text-foreground",
+						)}
+						amount={event.installmentValue}
+					/>
+					<span className="text-xs text-muted-foreground">por parcela</span>
+				</div>
+			</div>
+		</EventCard>
+	);
+};
+
+const SECTION_LABELS: Record<CalendarEvent["type"], string> = {
+	transaction: "Lançamentos",
+	installment: "Parcelas",
+	boleto: "Boletos",
+	card: "Faturas",
+};

 const renderEvent = (event: CalendarEvent) => {
 	switch (event.type) {
 		case "transaction":
 			return renderLancamento(event);
+		case "installment":
+			return renderInstallment(event);
 		case "boleto":
 			return renderBoleto(event);
 		case "card":
@@ -169,28 +213,51 @@ export function EventModal({ open, day, onClose, onCreate }: EventModalProps) {
 		onCreate(day.date);
 	};

-	const description = day?.events.length
-		? "Confira os lançamentos e vencimentos cadastrados para este dia."
-		: "Nenhum lançamento encontrado para este dia. Você pode criar um novo lançamento agora.";
+	const hasEvents = Boolean(day?.events.length);
+
+	const grouped = day
+		? {
+				transaction: day.events.filter((e) => e.type === "transaction"),
+				installment: day.events.filter((e) => e.type === "installment"),
+				boleto: day.events.filter((e) => e.type === "boleto"),
+				card: day.events.filter((e) => e.type === "card"),
+			}
+		: null;

 	return (
 		<Dialog open={open} onOpenChange={(value) => (!value ? onClose() : null)}>
 			<DialogContent className="max-w-xl">
 				<DialogHeader>
 					<DialogTitle>{formattedDate}</DialogTitle>
-					<DialogDescription>{description}</DialogDescription>
+					<DialogDescription>
+						{hasEvents
+							? "Lançamentos e vencimentos cadastrados para este dia."
+							: "Nenhum lançamento encontrado para este dia."}
+					</DialogDescription>
 				</DialogHeader>

-				<div className="max-h-[380px] space-y-2 overflow-y-auto pr-2">
-					{day?.events.length ? (
-						day.events.map((event) => (
+				<div className="max-h-[380px] space-y-3 overflow-y-auto pr-2">
+					{hasEvents && grouped ? (
+						(["transaction", "installment", "boleto", "card"] as const)
+							.filter((type) => grouped[type].length > 0)
+							.map((type) => (
+								<div key={type} className="space-y-1.5">
+									<p className="px-1 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+										{SECTION_LABELS[type]}
+									</p>
+									<div className="space-y-1.5">
+										{grouped[type].map((event) => (
 											<div key={event.id}>{renderEvent(event)}</div>
+										))}
+									</div>
+								</div>
 							))
 					) : (
-						<div className="rounded-xl border border-dashed border-border/60 bg-muted/30 p-6 text-center text-sm text-muted-foreground">
-							Nenhum lançamento ou vencimento registrado. Clique em{" "}
-							<span className="font-medium text-primary">Novo lançamento</span>{" "}
-							para começar.
+						<div className="flex flex-col items-center gap-3 rounded-xl border border-dashed border-border/60 bg-muted/30 p-8 text-center">
+							<RiCalendarEventLine className="size-8 text-muted-foreground/50" />
+							<p className="text-sm text-muted-foreground">
+								Nenhum lançamento registrado para este dia.
+							</p>
 						</div>
 					)}
 				</div>
--- a/src/features/calendar/queries.ts
+++ b/src/features/calendar/queries.ts
@@ -17,6 +17,7 @@ import { parsePeriod } from "@/shared/utils/period";

 const PAYMENT_METHOD_BOLETO = "Boleto";
 const TRANSACTION_TYPE_TRANSFERENCIA = "Transferência";
+const PAYMENT_PREFIX = "Pagamento fatura - ";

 const clampDayInMonth = (year: number, monthIndex: number, day: number) => {
 	const lastDay = new Date(Date.UTC(year, monthIndex + 1, 0)).getUTCDate();
@@ -88,19 +89,28 @@ export const fetchCalendarData = async ({
 	const transactionData = mapTransactionsData(transactionRows);
 	const events: CalendarEvent[] = [];

+	// Totais por cartão para exibir no vencimento
 	const cardTotals = new Map<string, number>();
 	for (const item of transactionData) {
-		if (!item.cardId || item.period !== period) {
-			continue;
-		}
+		if (!item.cardId || item.period !== period) continue;
 		const amount = Math.abs(item.amount ?? 0);
 		cardTotals.set(item.cardId, (cardTotals.get(item.cardId) ?? 0) + amount);
 	}

+	// Pagamentos de fatura por nome do cartão → data de pagamento
+	const paymentByCardName = new Map<string, string | null>();
 	for (const item of transactionData) {
+		if (!item.name.startsWith(PAYMENT_PREFIX)) continue;
+		const cardName = item.name.slice(PAYMENT_PREFIX.length);
+		paymentByCardName.set(cardName, item.purchaseDate?.slice(0, 10) ?? null);
+	}
+
+	for (const item of transactionData) {
+		// Pagamentos de fatura são consumidos pelos eventos de cartão
+		if (item.name.startsWith(PAYMENT_PREFIX)) continue;
+
 		const isBoleto = item.paymentMethod === PAYMENT_METHOD_BOLETO;

-		// Para boletos, exibir apenas na data de vencimento
 		if (isBoleto) {
 			if (
 				item.dueDate &&
@@ -114,7 +124,6 @@ export const fetchCalendarData = async ({
 				});
 			}
 		} else {
-			// Para outros tipos de lançamento, exibir na data de compra
 			const purchaseDateKey = item.purchaseDate.slice(0, 10);
 			if (isWithinRange(purchaseDateKey, rangeStartKey, rangeEndKey)) {
 				events.push({
@@ -127,23 +136,60 @@ export const fetchCalendarData = async ({
 		}
 	}

-	// Exibir vencimentos apenas de cartões com lançamentos do período
-	for (const card of cardRows) {
-		if (!cardTotals.has(card.id)) {
-			continue;
+	// Agrupar parcelas da mesma série em um único evento
+	const installmentGroups = new Map<
+		string,
+		Array<Extract<CalendarEvent, { type: "transaction" }>>
+	>();
+	for (const event of events) {
+		if (event.type !== "transaction") continue;
+		const { seriesId, installmentCount } = event.transaction;
+		if (!seriesId || !installmentCount || installmentCount <= 1) continue;
+		const group = installmentGroups.get(seriesId) ?? [];
+		group.push(event as Extract<CalendarEvent, { type: "transaction" }>);
+		installmentGroups.set(seriesId, group);
 	}

-		const dueDayNumber = Number.parseInt(card.dueDay ?? "", 10);
-		if (Number.isNaN(dueDayNumber)) {
-			continue;
+	const groupedSeriesIds = new Set<string>();
+	const installmentEvents: CalendarEvent[] = [];
+	for (const [seriesId, group] of installmentGroups) {
+		if (group.length < 2) continue;
+		groupedSeriesIds.add(seriesId);
+		const rep = group[0];
+		installmentEvents.push({
+			id: `${seriesId}:installment`,
+			type: "installment",
+			date: rep.date,
+			transaction: rep.transaction,
+			installmentCount: rep.transaction.installmentCount ?? group.length,
+			installmentValue: rep.transaction.amount ?? 0,
+		});
 	}

+	const baseEvents = events.filter((e) => {
+		if (e.type !== "transaction") return true;
+		const { seriesId } = e.transaction;
+		return !seriesId || !groupedSeriesIds.has(seriesId);
+	});
+
+	const allEvents = [...baseEvents, ...installmentEvents];
+
+	// Vencimentos de cartões com lançamentos no período
+	for (const card of cardRows) {
+		if (!cardTotals.has(card.id)) continue;
+
+		const dueDayNumber = Number.parseInt(card.dueDay ?? "", 10);
+		if (Number.isNaN(dueDayNumber)) continue;
+
 		const normalizedDay = clampDayInMonth(year, monthIndex, dueDayNumber);
 		const dueDateKey = formatDateKey(
 			new Date(Date.UTC(year, monthIndex, normalizedDay)),
 		);

-		events.push({
+		const isPaid = paymentByCardName.has(card.name);
+		const paymentDate = paymentByCardName.get(card.name) ?? null;
+
+		allEvents.push({
 			id: `${card.id}:cartao`,
 			type: "card",
 			date: dueDateKey,
@@ -156,17 +202,20 @@ export const fetchCalendarData = async ({
 				status: card.status,
 				logo: card.logo ?? null,
 				totalDue: cardTotals.get(card.id) ?? null,
+				isPaid,
+				paymentDate,
 			},
 		});
 	}

 	const typePriority: Record<CalendarEvent["type"], number> = {
 		transaction: 0,
+		installment: 0,
 		boleto: 1,
 		card: 2,
 	};

-	events.sort((a, b) => {
+	allEvents.sort((a, b) => {
 		if (a.date === b.date) {
 			return typePriority[a.type] - typePriority[b.type];
 		}
@@ -182,7 +231,7 @@ export const fetchCalendarData = async ({
 	const estabelecimentos = await fetchRecentEstablishments(userId);

 	return {
-		events,
+		events: allEvents,
 		formOptions: {
 			payerOptions: optionSets.payerOptions,
 			splitPayerOptions: optionSets.splitPayerOptions,
--- a/src/features/cards/components/card-dialog.tsx
+++ b/src/features/cards/components/card-dialog.tsx
@@ -194,12 +194,12 @@ export function CardDialog({
 		});
 	};

-	const title = mode === "create" ? "Novo cartão" : "Editar cartão";
+	const title = mode === "create" ? "Novo cartão" : "Atualizar cartão";
 	const description =
 		mode === "create"
 			? "Inclua um novo cartão de crédito para acompanhar seus gastos."
 			: "Atualize as informações do cartão selecionado.";
-	const submitLabel = mode === "create" ? "Salvar cartão" : "Atualizar cartão";
+	const submitLabel = mode === "create" ? "Salvar" : "Atualizar";

 	const handleMainDialogOpenChange = (open: boolean) => {
 		if (!open && logoDialogOpen) {
--- a/src/features/cards/components/card-item.tsx
+++ b/src/features/cards/components/card-item.tsx
@@ -84,39 +84,11 @@ export function CardItem({
 	const logoPath = resolveLogoSrc(logo);
 	const brandAsset = resolveCardBrandAsset(brand);
 	const isInactive = status?.toLowerCase() === "inativo";
-	const metrics =
-		limitTotal === null || used === null || available === null
-			? null
-			: [
-					{ label: "Limite Total", value: limitTotal },
-					{ label: "Em uso", value: used },
-					{ label: "Disponível", value: available },
-				];
-
-	const actions = [
-		{
-			label: "editar",
-			icon: <RiPencilLine className="size-4" aria-hidden />,
-			onClick: onEdit,
-			className: "text-primary",
-		},
-		{
-			label: "ver fatura",
-			icon: <RiFileList2Line className="size-4" aria-hidden />,
-			onClick: onInvoice,
-			className: "text-primary",
-		},
-		{
-			label: "remover",
-			icon: <RiDeleteBin5Line className="size-4" aria-hidden />,
-			onClick: onRemove,
-			className: "text-destructive",
-		},
-	];
+	const hasMetrics = limitTotal !== null && used !== null && available !== null;

 	return (
 		<Card className="flex flex-col p-6 w-full">
-			<CardHeader className="space-y-2 px-0 pb-0">
+			<CardHeader className="space-y-2 p-0">
 				<div className="flex items-start justify-between gap-2">
 					<div className="flex flex-1 items-center gap-2">
 						{logoPath ? (
@@ -135,8 +107,8 @@ export function CardItem({
 						) : null}

 						<div className="min-w-0">
-							<div className="flex items-center gap-1.5">
-								<h3 className="truncate text-sm font-semibold text-foreground sm:text-base">
+							<div className="flex items-center gap-2">
+								<h3 className="truncate font-semibold text-foreground">
 									{name}
 								</h3>
 								{note ? (
@@ -166,14 +138,14 @@ export function CardItem({
 					</div>

 					{brandAsset ? (
-						<div className="flex items-center justify-center py-1">
+						<div className="flex items-center justify-center py-2">
 							<Image
 								src={brandAsset}
 								alt={`Bandeira ${brand}`}
 								width={36}
 								height={36}
 								className={cn(
-									"h-5 w-auto rounded",
+									"h-4 w-auto rounded",
 									isInactive && "grayscale opacity-40",
 								)}
 							/>
@@ -185,56 +157,65 @@ export function CardItem({
 					)}
 				</div>

-				<div className="flex items-center justify-between border-y py-3 text-xs font-medium text-muted-foreground sm:text-sm">
+				<div className="flex items-center justify-between border-y py-3 text-sm text-muted-foreground">
 					<span>
-						Fecha dia{" "}
-						<span className="font-medium text-foreground">
-							{formatDay(closingDay)}
+						Fecha em{" "}
+						<span className="font-semibold text-foreground">
+							dia {formatDay(closingDay)}
 						</span>
 					</span>
 					<span>
-						Vence dia{" "}
-						<span className="font-medium text-foreground">
-							{formatDay(dueDay)}
+						Vence em{" "}
+						<span className="font-semibold text-foreground">
+							dia {formatDay(dueDay)}
 						</span>
 					</span>
 				</div>
 			</CardHeader>

-			<CardContent className="flex flex-1 flex-col gap-5 px-0">
-				{metrics ? (
+			<CardContent className="flex flex-1 flex-col gap-4 px-0">
+				{hasMetrics &&
+				available !== null &&
+				used !== null &&
+				limitTotal !== null ? (
 					<>
-						<div className="grid grid-cols-3 gap-4">
-							<div className="flex flex-col items-start gap-1">
-								<p className="text-sm font-semibold text-foreground">
-									<MoneyValues amount={metrics[0].value} />
-								</p>
-								<span className="text-xs text-muted-foreground">
-									{metrics[0].label}
-								</span>
+						<div className="flex flex-col gap-0.5">
+							<span className="text-xs text-muted-foreground">Disponível</span>
+							<MoneyValues
+								amount={available}
+								className="text-xl font-semibold text-success"
+							/>
 						</div>

-							<div className="flex flex-col items-center gap-1">
-								<p className="flex items-center gap-1.5 text-sm font-semibold text-foreground">
-									<span className="size-2 rounded-full bg-primary" />
-									<MoneyValues amount={metrics[1].value} />
-								</p>
+						<div className="grid grid-cols-2 gap-2">
+							<div className="flex flex-col gap-0.5">
 								<span className="text-xs text-muted-foreground">
-									{metrics[1].label}
+									Limite total
 								</span>
+								<MoneyValues
+									amount={limitTotal}
+									className="text-sm font-semibold text-foreground"
+								/>
 							</div>
-
-							<div className="flex flex-col items-end gap-1">
-								<p className="text-sm font-semibold text-foreground">
-									<MoneyValues amount={metrics[2].value} />
-								</p>
-								<span className="text-xs text-muted-foreground">
-									{metrics[2].label}
-								</span>
+							<div className="flex flex-col gap-0.5">
+								<span className="text-xs text-muted-foreground">Em uso</span>
+								<MoneyValues
+									amount={used}
+									className="text-sm font-semibold text-primary"
+								/>
 							</div>
 						</div>

-						<Progress value={usagePercent} className="h-3" />
+						<div className="flex flex-col gap-2">
+							<Progress
+								value={usagePercent}
+								className="h-2.5"
+								aria-label={`${usagePercent.toFixed(0)}% do limite utilizado`}
+							/>
+							<span className="text-xs text-muted-foreground">
+								{usagePercent.toFixed(1)}% utilizado
+							</span>
+						</div>
 					</>
 				) : (
 					<p className="text-sm text-muted-foreground">
@@ -243,21 +224,31 @@ export function CardItem({
 				)}
 			</CardContent>

-			<CardFooter className="mt-auto flex flex-wrap gap-4 px-0 text-sm">
-				{actions.map(({ label, icon, onClick, className }) => (
+			<CardFooter className="mt-auto flex flex-wrap gap-4 px-0 pt-2 text-sm">
 				<button
-						key={label}
 					type="button"
-						onClick={onClick}
-						className={cn(
-							"flex items-center gap-1 font-medium transition-opacity hover:opacity-80",
-							className,
-						)}
+					onClick={onEdit}
+					className="flex items-center gap-1 font-medium text-primary transition-opacity hover:opacity-80"
 				>
-						{icon}
-						{label}
+					<RiPencilLine className="size-4" aria-hidden />
+					editar
+				</button>
+				<button
+					type="button"
+					onClick={onInvoice}
+					className="flex items-center gap-1 font-medium text-primary transition-opacity hover:opacity-80"
+				>
+					<RiFileList2Line className="size-4" aria-hidden />
+					ver fatura
+				</button>
+				<button
+					type="button"
+					onClick={onRemove}
+					className="flex items-center gap-1 font-medium text-destructive transition-opacity hover:opacity-80"
+				>
+					<RiDeleteBin5Line className="size-4" aria-hidden />
+					remover
 				</button>
-				))}
 			</CardFooter>
 		</Card>
 	);
--- a/src/features/cards/components/cards-page.tsx
+++ b/src/features/cards/components/cards-page.tsx
@@ -201,7 +201,7 @@ export function CardsPage({
 				onOpenChange={handleRemoveOpenChange}
 				title={removeTitle}
 				description="Ao remover este cartão, os registros relacionados a ele serão excluídos permanentemente."
-				confirmLabel="Remover cartão"
+				confirmLabel="Remover"
 				pendingLabel="Removendo..."
 				confirmVariant="destructive"
 				onConfirm={handleRemoveConfirm}
--- a/src/features/cards/queries.ts
+++ b/src/features/cards/queries.ts
@@ -3,7 +3,7 @@ import { cards, financialAccounts, transactions } from "@/db/schema";
 import { db } from "@/shared/lib/db";
 import { loadLogoOptions } from "@/shared/lib/logo/options";

-export type CardData = {
+type CardData = {
 	id: string;
 	name: string;
 	brand: string;
--- a/src/features/categories/components/categories-page.tsx
+++ b/src/features/categories/components/categories-page.tsx
@@ -11,6 +11,7 @@ import { useMemo, useState } from "react";
 import { toast } from "sonner";
 import { deleteCategoryAction } from "@/features/categories/actions";
 import { ConfirmActionDialog } from "@/shared/components/confirm-action-dialog";
+import { CategoryIconBadge } from "@/shared/components/entity-avatar";
 import { Button } from "@/shared/components/ui/button";
 import { Card, CardContent } from "@/shared/components/ui/card";
 import {
@@ -30,10 +31,10 @@ import {
 import {
 	CATEGORY_TYPE_LABEL,
 	CATEGORY_TYPES,
+	type CategoryType,
 } from "@/shared/lib/categories/constants";
 import { CategoryDialog } from "./category-dialog";
-import { CategoryIconBadge } from "./category-icon-badge";
-import type { Category, CategoryType } from "./types";
+import type { Category } from "./types";

 const CATEGORIAS_PROTEGIDAS = [
 	"Transferência interna",
@@ -249,7 +250,7 @@ export function CategoriesPage({ categories }: CategoriesPageProps) {
 				onOpenChange={handleRemoveOpenChange}
 				title={removeTitle}
 				description="Ao remover esta categoria, os lançamentos associados serão desrelacionados."
-				confirmLabel="Remover categoria"
+				confirmLabel="Remover"
 				pendingLabel="Removendo..."
 				confirmVariant="destructive"
 				onConfirm={handleRemoveConfirm}
--- a/src/features/categories/components/category-detail-header.tsx
+++ b/src/features/categories/components/category-detail-header.tsx
@@ -1,11 +1,10 @@
-import { RiArrowDownSFill, RiArrowUpSFill } from "@remixicon/react";
+import { PercentageChangeIndicator } from "@/features/dashboard/components/percentage-change-indicator";
+import { CategoryIconBadge } from "@/shared/components/entity-avatar";
 import { TransactionTypeBadge } from "@/shared/components/transaction-type-badge";
 import { Card } from "@/shared/components/ui/card";
 import type { CategoryType } from "@/shared/lib/categories/constants";
 import { currencyFormatter } from "@/shared/utils/currency";
 import { formatPercentage } from "@/shared/utils/percentage";
-import { cn } from "@/shared/utils/ui";
-import { CategoryIconBadge } from "./category-icon-badge";

 type CategorySummary = {
 	id: string;
@@ -33,33 +32,6 @@ export function CategoryDetailHeader({
 	percentageChange,
 	transactionCount,
 }: CategoryDetailHeaderProps) {
-	const isIncrease =
-		typeof percentageChange === "number" && percentageChange > 0;
-	const isDecrease =
-		typeof percentageChange === "number" && percentageChange < 0;
-
-	const variationColor =
-		category.type === "receita"
-			? isIncrease
-				? "text-success"
-				: isDecrease
-					? "text-destructive"
-					: "text-muted-foreground"
-			: isIncrease
-				? "text-destructive"
-				: isDecrease
-					? "text-success"
-					: "text-muted-foreground";
-
-	const variationIcon =
-		isIncrease || isDecrease ? (
-			isIncrease ? (
-				<RiArrowUpSFill className="size-4" aria-hidden />
-			) : (
-				<RiArrowDownSFill className="size-4" aria-hidden />
-			)
-		) : null;
-
 	const variationLabel =
 		typeof percentageChange === "number"
 			? formatPercentage(percentageChange, {
@@ -115,15 +87,13 @@ export function CategoryDetailHeader({
 						<p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
 							Variação vs mês anterior
 						</p>
-						<div
-							className={cn(
-								"mt-1 flex items-center gap-1 text-lg font-semibold",
-								variationColor,
-							)}
-						>
-							{variationIcon}
-							<span>{variationLabel}</span>
-						</div>
+						<PercentageChangeIndicator
+							value={percentageChange}
+							label={variationLabel}
+							positiveTrend={category.type === "receita" ? "up" : "down"}
+							className="mt-1 gap-1 text-lg font-semibold"
+							iconClassName="size-4"
+						/>
 					</div>
 				</div>
 			</div>
--- a/src/features/categories/components/category-dialog.tsx
+++ b/src/features/categories/components/category-dialog.tsx
@@ -136,13 +136,12 @@ export function CategoryDialog({
 		});
 	};

-	const title = mode === "create" ? "Nova categoria" : "Editar categoria";
+	const title = mode === "create" ? "Nova categoria" : "Atualizar categoria";
 	const description =
 		mode === "create"
 			? "Crie uma categoria para organizar seus lançamentos."
 			: "Atualize os detalhes da categoria selecionada.";
-	const submitLabel =
-		mode === "create" ? "Salvar categoria" : "Atualizar categoria";
+	const submitLabel = mode === "create" ? "Salvar" : "Atualizar";

 	return (
 		<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
--- a/src/features/categories/components/category-icon-badge.tsx
+++ b/src/features/categories/components/category-icon-badge.tsx
@@ -1,6 +0,0 @@
-// Re-export from shared — componente movido para src/shared/components/entity-avatar/
-export {
-	CategoryIconBadge,
-	type CategoryIconBadgeProps,
-	type CategoryIconBadgeSize,
-} from "@/shared/components/entity-avatar";
--- a/src/features/categories/components/types.ts
+++ b/src/features/categories/components/types.ts
@@ -1,11 +1,5 @@
 import type { CategoryType } from "@/shared/lib/categories/constants";

-export type { CategoryType } from "@/shared/lib/categories/constants";
-export {
-	CATEGORY_TYPE_LABEL,
-	CATEGORY_TYPES,
-} from "@/shared/lib/categories/constants";
-
 export type Category = {
 	id: string;
 	name: string;
--- a/src/features/categories/queries.ts
+++ b/src/features/categories/queries.ts
@@ -1,6 +1,6 @@
 import { eq } from "drizzle-orm";
 import { type Category, categories } from "@/db/schema";
-import type { CategoryType } from "@/features/categories/components/types";
+import type { CategoryType } from "@/shared/lib/categories/constants";
 import { db } from "@/shared/lib/db";

 export type CategoryData = {
--- a/src/features/dashboard/accounts-queries.ts
+++ b/src/features/dashboard/accounts-queries.ts
@@ -26,7 +26,7 @@ export type DashboardAccount = {
 	excludeFromBalance: boolean;
 };

-export type DashboardAccountsSnapshot = {
+type DashboardAccountsSnapshot = {
 	totalBalance: number;
 	accounts: DashboardAccount[];
 };
--- a/src/features/dashboard/bills-queries.ts
+++ b/src/features/dashboard/bills-queries.ts
@@ -1,166 +0,0 @@
-"use server";
-
-import { and, eq } from "drizzle-orm";
-import { transactions } from "@/db/schema";
-import { db } from "@/shared/lib/db";
-import { getAdminPayerId } from "@/shared/lib/payers/get-admin-id";
-import {
-	compareDateOnly,
-	getBusinessDateString,
-	isDateOnlyPast,
-	toDateOnlyString,
-} from "@/shared/utils/date";
-import { safeToNumber as toNumber } from "@/shared/utils/number";
-
-const PAYMENT_METHOD_BOLETO = "Boleto";
-
-type RawDashboardBill = {
-	id: string;
-	name: string;
-	amount: string | number | null;
-	dueDate: string | Date | null;
-	boletoPaymentDate: string | Date | null;
-	isSettled: boolean | null;
-};
-
-export type DashboardBill = {
-	id: string;
-	name: string;
-	amount: number;
-	dueDate: string | null;
-	boletoPaymentDate: string | null;
-	isSettled: boolean;
-};
-
-export type DashboardBillsSnapshot = {
-	bills: DashboardBill[];
-	totalPendingAmount: number;
-	pendingCount: number;
-};
-
-const compareDateOnlyAscWithNullsLast = (
-	left: string | null,
-	right: string | null,
-) => {
-	if (!left && !right) return 0;
-	if (!left) return 1;
-	if (!right) return -1;
-	return compareDateOnly(left, right);
-};
-
-const compareDateOnlyDescWithNullsLast = (
-	left: string | null,
-	right: string | null,
-) => {
-	if (!left && !right) return 0;
-	if (!left) return 1;
-	if (!right) return -1;
-	return compareDateOnly(right, left);
-};
-
-export async function fetchDashboardBills(
-	userId: string,
-	period: string,
-): Promise<DashboardBillsSnapshot> {
-	const today = getBusinessDateString();
-	const adminPayerId = await getAdminPayerId(userId);
-	if (!adminPayerId) {
-		return { bills: [], totalPendingAmount: 0, pendingCount: 0 };
-	}
-
-	const rows = await db
-		.select({
-			id: transactions.id,
-			name: transactions.name,
-			amount: transactions.amount,
-			dueDate: transactions.dueDate,
-			boletoPaymentDate: transactions.boletoPaymentDate,
-			isSettled: transactions.isSettled,
-		})
-		.from(transactions)
-		.where(
-			and(
-				eq(transactions.userId, userId),
-				eq(transactions.period, period),
-				eq(transactions.paymentMethod, PAYMENT_METHOD_BOLETO),
-				eq(transactions.payerId, adminPayerId),
-			),
-		);
-
-	const bills = rows.map((row: RawDashboardBill): DashboardBill => {
-		const amount = Math.abs(toNumber(row.amount));
-		return {
-			id: row.id,
-			name: row.name,
-			amount,
-			dueDate: toDateOnlyString(row.dueDate),
-			boletoPaymentDate: toDateOnlyString(row.boletoPaymentDate),
-			isSettled: Boolean(row.isSettled),
-		};
-	});
-
-	bills.sort((a, b) => {
-		if (a.isSettled !== b.isSettled) {
-			return a.isSettled ? 1 : -1;
-		}
-
-		if (!a.isSettled && !b.isSettled) {
-			const aIsOverdue = a.dueDate ? isDateOnlyPast(a.dueDate, today) : false;
-			const bIsOverdue = b.dueDate ? isDateOnlyPast(b.dueDate, today) : false;
-
-			if (aIsOverdue !== bIsOverdue) {
-				return aIsOverdue ? -1 : 1;
-			}
-
-			const dueDateDiff = compareDateOnlyAscWithNullsLast(a.dueDate, b.dueDate);
-			if (dueDateDiff !== 0) {
-				return dueDateDiff;
-			}
-
-			const amountDiff = b.amount - a.amount;
-			if (amountDiff !== 0) {
-				return amountDiff;
-			}
-		}
-
-		if (a.isSettled && b.isSettled) {
-			const paidAtDiff = compareDateOnlyDescWithNullsLast(
-				a.boletoPaymentDate,
-				b.boletoPaymentDate,
-			);
-			if (paidAtDiff !== 0) {
-				return paidAtDiff;
-			}
-
-			const amountDiff = b.amount - a.amount;
-			if (amountDiff !== 0) {
-				return amountDiff;
-			}
-		}
-
-		const nameDiff = a.name.localeCompare(b.name, "pt-BR", {
-			sensitivity: "base",
-		});
-		if (nameDiff !== 0) {
-			return nameDiff;
-		}
-
-		return a.id.localeCompare(b.id);
-	});
-
-	let totalPendingAmount = 0;
-	let pendingCount = 0;
-
-	for (const bill of bills) {
-		if (!bill.isSettled) {
-			totalPendingAmount += bill.amount;
-			pendingCount += 1;
-		}
-	}
-
-	return {
-		bills,
-		totalPendingAmount,
-		pendingCount,
-	};
-}
--- a/src/features/dashboard/bills/bills-helpers.ts
+++ b/src/features/dashboard/bills/bills-helpers.ts
@@ -1,5 +1,5 @@
-import type { DashboardBill } from "@/features/dashboard/bills-queries";
-import type { PaymentDialogState } from "@/features/dashboard/use-payment-dialog-controller";
+import type { DashboardBill } from "@/features/dashboard/bills/bills-queries";
+import type { PaymentDialogState } from "@/features/dashboard/payments/use-payment-dialog-controller";
 import { getBusinessDateString, isDateOnlyPast } from "@/shared/utils/date";
 import {
 	buildFinancialStatusLabel,
--- a/src/features/dashboard/bills/bills-queries.ts
+++ b/src/features/dashboard/bills/bills-queries.ts
@@ -0,0 +1,14 @@
+export type DashboardBill = {
+	id: string;
+	name: string;
+	amount: number;
+	dueDate: string | null;
+	boletoPaymentDate: string | null;
+	isSettled: boolean;
+};
+
+export type DashboardBillsSnapshot = {
+	bills: DashboardBill[];
+	totalPendingAmount: number;
+	pendingCount: number;
+};
--- a/src/features/dashboard/bills/use-bill-widget-controller.ts
+++ b/src/features/dashboard/bills/use-bill-widget-controller.ts
@@ -4,17 +4,17 @@ import {
 	type BillDialogState,
 	getCurrentBillDateString,
 	markBillAsSettled,
-} from "@/features/dashboard/bills-helpers";
-import type { DashboardBill } from "@/features/dashboard/bills-queries";
+} from "@/features/dashboard/bills/bills-helpers";
+import type { DashboardBill } from "@/features/dashboard/bills/bills-queries";
 import {
 	type PaymentDialogController,
 	usePaymentDialogController,
-} from "@/features/dashboard/use-payment-dialog-controller";
+} from "@/features/dashboard/payments/use-payment-dialog-controller";
 import { toggleTransactionSettlementAction } from "@/features/transactions/actions";

 const EMPTY_BILLS: DashboardBill[] = [];

-export type BillWidgetController = Omit<
+type BillWidgetController = Omit<
 	PaymentDialogController<DashboardBill>,
 	"selectedItem"
 > & {
--- a/src/features/dashboard/categories/category-breakdown-helpers.ts
+++ b/src/features/dashboard/categories/category-breakdown-helpers.ts
--- a/src/features/dashboard/categories/category-history-queries.ts
+++ b/src/features/dashboard/categories/category-history-queries.ts
@@ -51,9 +51,7 @@ type UniqueCategory = {
 	icon: string | null;
 };

-export async function fetchAllCategories(
-	userId: string,
-): Promise<CategoryOption[]> {
+async function fetchAllCategories(userId: string): Promise<CategoryOption[]> {
 	const result = await db
 		.select({
 			id: categories.id,
--- a/src/features/dashboard/categories/category-overview-queries.ts
+++ b/src/features/dashboard/categories/category-overview-queries.ts
@@ -8,14 +8,14 @@ import {
 import {
 	buildCategoryBreakdownData,
 	type DashboardCategoryBreakdownData,
-} from "@/features/dashboard/categories/category-breakdown";
+} from "@/features/dashboard/categories/category-breakdown-helpers";
 import type { ExpensesByCategoryData } from "@/features/dashboard/categories/expenses-by-category-queries";
 import type { IncomeByCategoryData } from "@/features/dashboard/categories/income-by-category-queries";
 import type {
 	GoalProgressCategory,
 	GoalProgressItem,
 	GoalsProgressData,
-} from "@/features/dashboard/goals-progress-queries";
+} from "@/features/dashboard/goals-progress/goals-progress-queries";
 import {
 	buildDashboardAdminFilters,
 	excludeAutoInvoiceEntries,
@@ -50,7 +50,7 @@ type BudgetSnapshotRow = {
 	amount: string | number | null;
 };

-export type DashboardCategoryOverview = {
+type DashboardCategoryOverview = {
 	goalsProgressData: GoalsProgressData;
 	incomeByCategoryData: IncomeByCategoryData;
 	expensesByCategoryData: ExpensesByCategoryData;
--- a/src/features/dashboard/categories/expenses-by-category-queries.ts
+++ b/src/features/dashboard/categories/expenses-by-category-queries.ts
@@ -1,82 +1,3 @@
-import { and, eq, inArray, sql } from "drizzle-orm";
-import {
-	budgets,
-	categories,
-	financialAccounts,
-	transactions,
-} from "@/db/schema";
-import {
-	buildCategoryBreakdownData,
-	type DashboardCategoryBreakdownData,
-	type DashboardCategoryBreakdownItem,
-} from "@/features/dashboard/categories/category-breakdown";
-import {
-	buildDashboardAdminFilters,
-	excludeAutoInvoiceEntries,
-	excludeTransactionsFromExcludedAccounts,
-} from "@/features/dashboard/transaction-filters";
-import { db } from "@/shared/lib/db";
-import { getAdminPayerId } from "@/shared/lib/payers/get-admin-id";
-import { getPreviousPeriod } from "@/shared/utils/period";
+import type { DashboardCategoryBreakdownData } from "@/features/dashboard/categories/category-breakdown-helpers";

-export type CategoryExpenseItem = DashboardCategoryBreakdownItem;
 export type ExpensesByCategoryData = DashboardCategoryBreakdownData;
-
-export async function fetchExpensesByCategory(
-	userId: string,
-	period: string,
-): Promise<ExpensesByCategoryData> {
-	const previousPeriod = getPreviousPeriod(period);
-
-	const adminPayerId = await getAdminPayerId(userId);
-	if (!adminPayerId) {
-		return { categories: [], currentTotal: 0, previousTotal: 0 };
-	}
-
-	// Single query: GROUP BY categoryId + period for both current and previous periods
-	const [rows, budgetRows] = await Promise.all([
-		db
-			.select({
-				categoryId: categories.id,
-				categoryName: categories.name,
-				categoryIcon: categories.icon,
-				period: transactions.period,
-				total: sql<number>`coalesce(sum(${transactions.amount}), 0)`,
-			})
-			.from(transactions)
-			.innerJoin(categories, eq(transactions.categoryId, categories.id))
-			.leftJoin(
-				financialAccounts,
-				eq(transactions.accountId, financialAccounts.id),
-			)
-			.where(
-				and(
-					...buildDashboardAdminFilters({ userId, adminPayerId }),
-					inArray(transactions.period, [period, previousPeriod]),
-					eq(transactions.transactionType, "Despesa"),
-					eq(categories.type, "despesa"),
-					excludeAutoInvoiceEntries(),
-					excludeTransactionsFromExcludedAccounts(),
-				),
-			)
-			.groupBy(
-				categories.id,
-				categories.name,
-				categories.icon,
-				transactions.period,
-			),
-		db
-			.select({
-				categoryId: budgets.categoryId,
-				amount: budgets.amount,
-			})
-			.from(budgets)
-			.where(and(eq(budgets.userId, userId), eq(budgets.period, period))),
-	]);
-
-	return buildCategoryBreakdownData({
-		rows,
-		budgetRows,
-		period,
-	});
-}
--- a/src/features/dashboard/categories/income-by-category-queries.ts
+++ b/src/features/dashboard/categories/income-by-category-queries.ts
@@ -1,84 +1,3 @@
-import { and, eq, inArray, sql } from "drizzle-orm";
-import {
-	budgets,
-	categories,
-	financialAccounts,
-	transactions,
-} from "@/db/schema";
-import {
-	buildCategoryBreakdownData,
-	type DashboardCategoryBreakdownData,
-	type DashboardCategoryBreakdownItem,
-} from "@/features/dashboard/categories/category-breakdown";
-import {
-	buildDashboardAdminFilters,
-	excludeAutoInvoiceEntries,
-	excludeInitialBalanceWhenConfigured,
-	excludeTransactionsFromExcludedAccounts,
-} from "@/features/dashboard/transaction-filters";
-import { db } from "@/shared/lib/db";
-import { getAdminPayerId } from "@/shared/lib/payers/get-admin-id";
-import { getPreviousPeriod } from "@/shared/utils/period";
+import type { DashboardCategoryBreakdownData } from "@/features/dashboard/categories/category-breakdown-helpers";

-export type CategoryIncomeItem = DashboardCategoryBreakdownItem;
 export type IncomeByCategoryData = DashboardCategoryBreakdownData;
-
-export async function fetchIncomeByCategory(
-	userId: string,
-	period: string,
-): Promise<IncomeByCategoryData> {
-	const previousPeriod = getPreviousPeriod(period);
-
-	const adminPayerId = await getAdminPayerId(userId);
-	if (!adminPayerId) {
-		return { categories: [], currentTotal: 0, previousTotal: 0 };
-	}
-
-	// Single query: GROUP BY categoryId + period for both current and previous periods
-	const [rows, budgetRows] = await Promise.all([
-		db
-			.select({
-				categoryId: categories.id,
-				categoryName: categories.name,
-				categoryIcon: categories.icon,
-				period: transactions.period,
-				total: sql<number>`coalesce(sum(${transactions.amount}), 0)`,
-			})
-			.from(transactions)
-			.innerJoin(categories, eq(transactions.categoryId, categories.id))
-			.leftJoin(
-				financialAccounts,
-				eq(transactions.accountId, financialAccounts.id),
-			)
-			.where(
-				and(
-					...buildDashboardAdminFilters({ userId, adminPayerId }),
-					inArray(transactions.period, [period, previousPeriod]),
-					eq(transactions.transactionType, "Receita"),
-					eq(categories.type, "receita"),
-					excludeAutoInvoiceEntries(),
-					excludeInitialBalanceWhenConfigured(),
-					excludeTransactionsFromExcludedAccounts(),
-				),
-			)
-			.groupBy(
-				categories.id,
-				categories.name,
-				categories.icon,
-				transactions.period,
-			),
-		db
-			.select({
-				categoryId: budgets.categoryId,
-				amount: budgets.amount,
-			})
-			.from(budgets)
-			.where(and(eq(budgets.userId, userId), eq(budgets.period, period))),
-	]);
-
-	return buildCategoryBreakdownData({
-		rows,
-		budgetRows,
-		period,
-	});
-}
--- a/src/features/dashboard/categories/purchases-by-category-queries.ts
+++ b/src/features/dashboard/categories/purchases-by-category-queries.ts
@@ -0,0 +1,18 @@
+export type CategoryOption = {
+	id: string;
+	name: string;
+	type: string;
+};
+
+export type CategoryTransaction = {
+	id: string;
+	name: string;
+	amount: number;
+	purchaseDate: Date;
+	logo: string | null;
+};
+
+export type PurchasesByCategoryData = {
+	categories: CategoryOption[];
+	transactionsByCategory: Record<string, CategoryTransaction[]>;
+};
--- a/src/features/dashboard/components/bills/bill-list-item.tsx
+++ b/src/features/dashboard/components/bills/bill-list-item.tsx
@@ -3,8 +3,8 @@ import {
 	buildBillStatusLabel,
 	buildBillWidgetStatusLabel,
 	isBillOverdue,
-} from "@/features/dashboard/bills-helpers";
-import type { DashboardBill } from "@/features/dashboard/bills-queries";
+} from "@/features/dashboard/bills/bills-helpers";
+import type { DashboardBill } from "@/features/dashboard/bills/bills-queries";
 import { EstablishmentLogo } from "@/shared/components/entity-avatar";
 import MoneyValues from "@/shared/components/money-values";
 import { Button } from "@/shared/components/ui/button";
@@ -82,8 +82,8 @@ export function BillListItem({ bill, onPay }: BillListItemProps) {
 					onClick={() => onPay(bill.id)}
 				>
 					{bill.isSettled ? (
-						<span className="flex items-center gap-1 text-success">
-							<RiCheckboxCircleFill className="size-4" /> Pago
+						<span className="flex items-center gap-0.5 text-success">
+							<RiCheckboxCircleFill className="size-3.5" /> Pago
 						</span>
 					) : overdue ? (
 						<span className="overdue-blink">
--- a/src/features/dashboard/components/bills/bill-payment-dialog.tsx
+++ b/src/features/dashboard/components/bills/bill-payment-dialog.tsx
@@ -8,8 +8,8 @@ import {
 	type BillDialogState,
 	formatBillDateLabel,
 	getBillStatusBadgeVariant,
-} from "@/features/dashboard/bills-helpers";
-import type { DashboardBill } from "@/features/dashboard/bills-queries";
+} from "@/features/dashboard/bills/bills-helpers";
+import type { DashboardBill } from "@/features/dashboard/bills/bills-queries";
 import MoneyValues from "@/shared/components/money-values";
 import { PaymentSuccess } from "@/shared/components/payment-success";
 import { Badge } from "@/shared/components/ui/badge";
@@ -171,7 +171,7 @@ export function BillPaymentDialog({
 										Processando...
 									</>
 								) : (
-									"Confirmar pagamento"
+									"Confirmar"
 								)}
 							</Button>
 						</DialogFooter>
--- a/src/features/dashboard/components/bills/bills-list.tsx
+++ b/src/features/dashboard/components/bills/bills-list.tsx
@@ -1,5 +1,5 @@
 import { RiBarcodeFill } from "@remixicon/react";
-import type { DashboardBill } from "@/features/dashboard/bills-queries";
+import type { DashboardBill } from "@/features/dashboard/bills/bills-queries";
 import { WidgetEmptyState } from "@/shared/components/widget-empty-state";
 import { BillListItem } from "./bill-list-item";

--- a/src/features/dashboard/components/bills/bills-widget-view.tsx
+++ b/src/features/dashboard/components/bills/bills-widget-view.tsx
@@ -1,5 +1,5 @@
-import type { BillDialogState } from "@/features/dashboard/bills-helpers";
-import type { DashboardBill } from "@/features/dashboard/bills-queries";
+import type { BillDialogState } from "@/features/dashboard/bills/bills-helpers";
+import type { DashboardBill } from "@/features/dashboard/bills/bills-queries";
 import { BillPaymentDialog } from "./bill-payment-dialog";
 import { BillsList } from "./bills-list";

--- a/src/features/dashboard/components/category-breakdown/category-breakdown-chart.tsx
+++ b/src/features/dashboard/components/category-breakdown/category-breakdown-chart.tsx
@@ -0,0 +1,161 @@
+"use client";
+
+import { useMemo } from "react";
+import { Pie, PieChart, Tooltip } from "recharts";
+import type { DashboardCategoryBreakdownItem } from "@/features/dashboard/categories/category-breakdown-helpers";
+import { type ChartConfig, ChartContainer } from "@/shared/components/ui/chart";
+import { formatCurrency } from "@/shared/utils/currency";
+import { formatPercentage as formatPercentageValue } from "@/shared/utils/percentage";
+
+const CATEGORY_BREAKDOWN_COLORS = [
+	"var(--chart-1)",
+	"var(--chart-2)",
+	"var(--chart-3)",
+	"var(--chart-4)",
+	"var(--chart-5)",
+	"var(--chart-1)",
+	"var(--chart-2)",
+];
+
+const formatPercentage = (value: number, digits: number) =>
+	formatPercentageValue(value, {
+		minimumFractionDigits: digits,
+		maximumFractionDigits: digits,
+		absolute: true,
+	});
+
+type CategoryBreakdownChartProps = {
+	categories: DashboardCategoryBreakdownItem[];
+	percentageDigits: number;
+};
+
+export function CategoryBreakdownChart({
+	categories,
+	percentageDigits,
+}: CategoryBreakdownChartProps) {
+	const chartConfig = useMemo(() => {
+		const nextConfig: ChartConfig = {};
+
+		const topCategories = categories.slice(0, 7);
+		topCategories.forEach((category, index) => {
+			nextConfig[category.categoryId] = {
+				label: category.categoryName,
+				color:
+					CATEGORY_BREAKDOWN_COLORS[index % CATEGORY_BREAKDOWN_COLORS.length],
+			};
+		});
+
+		if (categories.length > 7) {
+			nextConfig.outros = { label: "Outros", color: "var(--chart-6)" };
+		}
+
+		return nextConfig;
+	}, [categories]);
+
+	const chartData = useMemo(() => {
+		if (categories.length <= 7) {
+			return categories.map((category) => ({
+				category: category.categoryId,
+				name: category.categoryName,
+				value: category.currentAmount,
+				percentage: category.percentageOfTotal,
+				fill: chartConfig[category.categoryId]?.color,
+			}));
+		}
+
+		const topCategories = categories.slice(0, 7);
+		const otherCategories = categories.slice(7);
+		const otherTotal = otherCategories.reduce(
+			(sum, c) => sum + c.currentAmount,
+			0,
+		);
+		const otherPercentage = otherCategories.reduce(
+			(sum, c) => sum + c.percentageOfTotal,
+			0,
+		);
+
+		const groupedData = topCategories.map((category) => ({
+			category: category.categoryId,
+			name: category.categoryName,
+			value: category.currentAmount,
+			percentage: category.percentageOfTotal,
+			fill: chartConfig[category.categoryId]?.color,
+		}));
+
+		if (otherCategories.length > 0) {
+			groupedData.push({
+				category: "outros",
+				name: "Outros",
+				value: otherTotal,
+				percentage: otherPercentage,
+				fill: chartConfig.outros?.color,
+			});
+		}
+
+		return groupedData;
+	}, [categories, chartConfig]);
+
+	return (
+		<div className="flex items-center gap-4">
+			<ChartContainer config={chartConfig} className="h-[280px] flex-1">
+				<PieChart>
+					<Pie
+						data={chartData}
+						cx="50%"
+						cy="50%"
+						labelLine={false}
+						label={({ payload }) =>
+							formatPercentage(
+								(payload as { percentage?: number } | undefined)?.percentage ??
+									0,
+								percentageDigits,
+							)
+						}
+						outerRadius={75}
+						dataKey="value"
+						nameKey="category"
+					/>
+					<Tooltip
+						content={({ active, payload }) => {
+							if (!active || !payload?.length) return null;
+							const entry = payload[0]?.payload;
+							if (!entry) return null;
+							return (
+								<div className="rounded-lg border bg-background p-2 shadow-sm">
+									<div className="grid gap-2">
+										<div className="flex flex-col">
+											<span className="text-xs uppercase text-muted-foreground">
+												{entry.name}
+											</span>
+											<span className="font-medium text-foreground">
+												{formatCurrency(entry.value)}
+											</span>
+											<span className="text-xs text-muted-foreground">
+												{formatPercentage(entry.percentage, percentageDigits)}{" "}
+												do total
+											</span>
+										</div>
+									</div>
+								</div>
+							);
+						}}
+					/>
+				</PieChart>
+			</ChartContainer>
+
+			<div className="min-w-[140px] flex flex-col gap-2">
+				{chartData.map((entry, index) => (
+					<div key={`legend-${index}`} className="flex items-center gap-2">
+						<div
+							className="size-3 shrink-0 rounded-sm"
+							style={{ backgroundColor: entry.fill }}
+						/>
+						<span className="truncate text-xs text-muted-foreground">
+							{entry.name}
+						</span>
+					</div>
+				))}
+			</div>
+		</div>
+	);
+}
--- a/src/features/dashboard/components/category-breakdown/category-breakdown-list-item.tsx
+++ b/src/features/dashboard/components/category-breakdown/category-breakdown-list-item.tsx
@@ -0,0 +1,129 @@
+import { RiExternalLinkLine, RiWallet3Line } from "@remixicon/react";
+import Link from "next/link";
+import type { DashboardCategoryBreakdownItem } from "@/features/dashboard/categories/category-breakdown-helpers";
+import { PercentageChangeIndicator } from "@/features/dashboard/components/percentage-change-indicator";
+import { CategoryIconBadge } from "@/shared/components/entity-avatar";
+import MoneyValues from "@/shared/components/money-values";
+import { formatCurrency } from "@/shared/utils/currency";
+import { formatPercentage as formatPercentageValue } from "@/shared/utils/percentage";
+
+type CategoryBreakdownListItemConfig = {
+	shareLabel: string;
+	percentageDigits: number;
+	positiveTrend: "up" | "down";
+	includeBudgetAmount: boolean;
+};
+
+type CategoryBreakdownListItemProps = {
+	category: DashboardCategoryBreakdownItem;
+	periodParam: string;
+	config: CategoryBreakdownListItemConfig;
+};
+
+const formatPercentage = (value: number, digits: number) =>
+	formatPercentageValue(value, {
+		minimumFractionDigits: digits,
+		maximumFractionDigits: digits,
+		absolute: true,
+	});
+
+export function CategoryBreakdownListItem({
+	category,
+	periodParam,
+	config,
+}: CategoryBreakdownListItemProps) {
+	const hasBudget = category.budgetAmount !== null;
+	const budgetExceeded =
+		hasBudget &&
+		category.budgetUsedPercentage !== null &&
+		category.budgetUsedPercentage > 100;
+	const exceededAmount =
+		budgetExceeded && category.budgetAmount
+			? category.currentAmount - category.budgetAmount
+			: 0;
+
+	return (
+		<div>
+			<div className="flex items-center justify-between gap-3 transition-all duration-300 py-2">
+				<div className="flex min-w-0 flex-1 items-center gap-2">
+					<CategoryIconBadge
+						icon={category.categoryIcon}
+						name={category.categoryName}
+					/>
+					<div className="min-w-0 flex-1">
+						<div className="flex items-center gap-2">
+							<Link
+								href={`/categories/${category.categoryId}?periodo=${periodParam}`}
+								className="flex max-w-full items-center gap-1 text-sm font-medium text-foreground underline-offset-2 hover:underline"
+							>
+								<span className="truncate">{category.categoryName}</span>
+								<RiExternalLinkLine
+									className="size-3 shrink-0 text-muted-foreground"
+									aria-hidden
+								/>
+							</Link>
+						</div>
+						<div className="flex flex-wrap items-center gap-x-2 gap-y-0.5 text-xs text-muted-foreground">
+							<span>
+								{formatPercentage(
+									category.percentageOfTotal,
+									config.percentageDigits,
+								)}{" "}
+								da {config.shareLabel}
+							</span>
+							{hasBudget && category.budgetUsedPercentage !== null ? (
+								<>
+									<span aria-hidden>·</span>
+									<span
+										className={`flex items-center gap-1 ${budgetExceeded ? "text-destructive" : "text-info"}`}
+									>
+										<RiWallet3Line className="size-3 shrink-0" />
+										{budgetExceeded ? (
+											<>
+												excedeu{" "}
+												<span className="font-medium">
+													{formatCurrency(exceededAmount)}
+												</span>
+											</>
+										) : (
+											<>
+												{formatPercentage(
+													category.budgetUsedPercentage,
+													config.percentageDigits,
+												)}{" "}
+												do limite
+												{config.includeBudgetAmount &&
+												category.budgetAmount !== null
+													? ` ${formatCurrency(category.budgetAmount)}`
+													: ""}
+											</>
+										)}
+									</span>
+								</>
+							) : null}
+						</div>
+					</div>
+				</div>
+
+				<div className="flex shrink-0 flex-col items-end gap-0.5">
+					<MoneyValues
+						className="text-foreground font-medium"
+						amount={category.currentAmount}
+					/>
+					<PercentageChangeIndicator
+						value={category.percentageChange}
+						label={
+							category.percentageChange !== null
+								? formatPercentage(
+										category.percentageChange,
+										config.percentageDigits,
+									)
+								: undefined
+						}
+						positiveTrend={config.positiveTrend}
+					/>
+				</div>
+			</div>
+		</div>
+	);
+}
--- a/src/features/dashboard/components/category-breakdown/category-breakdown-list.tsx
+++ b/src/features/dashboard/components/category-breakdown/category-breakdown-list.tsx
@@ -0,0 +1,34 @@
+import type { DashboardCategoryBreakdownItem } from "@/features/dashboard/categories/category-breakdown-helpers";
+import { CategoryBreakdownListItem } from "./category-breakdown-list-item";
+
+type CategoryBreakdownListConfig = {
+	shareLabel: string;
+	percentageDigits: number;
+	positiveTrend: "up" | "down";
+	includeBudgetAmount: boolean;
+};
+
+type CategoryBreakdownListProps = {
+	categories: DashboardCategoryBreakdownItem[];
+	periodParam: string;
+	config: CategoryBreakdownListConfig;
+};
+
+export function CategoryBreakdownList({
+	categories,
+	periodParam,
+	config,
+}: CategoryBreakdownListProps) {
+	return (
+		<div>
+			{categories.map((category) => (
+				<CategoryBreakdownListItem
+					key={category.categoryId}
+					category={category}
+					periodParam={periodParam}
+					config={config}
+				/>
+			))}
+		</div>
+	);
+}
--- a/src/features/dashboard/components/category-breakdown/category-breakdown-widget-view.tsx
+++ b/src/features/dashboard/components/category-breakdown/category-breakdown-widget-view.tsx
@@ -1,21 +1,12 @@
 "use client";

 import {
-	RiArrowDownSFill,
-	RiArrowUpSFill,
-	RiExternalLinkLine,
 	RiListUnordered,
 	RiPieChart2Line,
 	RiPieChartLine,
-	RiWallet3Line,
 } from "@remixicon/react";
-import Link from "next/link";
-import { useMemo, useState } from "react";
-import { Pie, PieChart, Tooltip } from "recharts";
-import type { DashboardCategoryBreakdownData } from "@/features/dashboard/categories/category-breakdown";
-import { CategoryIconBadge } from "@/shared/components/entity-avatar";
-import MoneyValues from "@/shared/components/money-values";
-import { type ChartConfig, ChartContainer } from "@/shared/components/ui/chart";
+import { useState } from "react";
+import type { DashboardCategoryBreakdownData } from "@/features/dashboard/categories/category-breakdown-helpers";
 import {
 	Tabs,
 	TabsContent,
@@ -23,9 +14,9 @@ import {
 	TabsTrigger,
 } from "@/shared/components/ui/tabs";
 import { WidgetEmptyState } from "@/shared/components/widget-empty-state";
-import { formatCurrency } from "@/shared/utils/currency";
-import { formatPercentage as formatPercentageValue } from "@/shared/utils/percentage";
 import { formatPeriodForUrl } from "@/shared/utils/period";
+import { CategoryBreakdownChart } from "./category-breakdown-chart";
+import { CategoryBreakdownList } from "./category-breakdown-list";

 type CategoryBreakdownVariant = "income" | "expense";

@@ -35,16 +26,6 @@ type CategoryBreakdownWidgetViewProps = {
 	variant: CategoryBreakdownVariant;
 };

-const CATEGORY_BREAKDOWN_COLORS = [
-	"var(--chart-1)",
-	"var(--chart-2)",
-	"var(--chart-3)",
-	"var(--chart-4)",
-	"var(--chart-5)",
-	"var(--chart-1)",
-	"var(--chart-2)",
-];
-
 const VARIANT_CONFIG = {
 	income: {
 		emptyTitle: "Nenhuma receita encontrada",
@@ -52,10 +33,7 @@ const VARIANT_CONFIG = {
 			"Quando houver receitas registradas, elas aparecerão aqui.",
 		shareLabel: "receita total",
 		percentageDigits: 1,
-		changeClassName: {
-			increase: "text-success",
-			decrease: "text-destructive",
-		},
+		positiveTrend: "up",
 		includeBudgetAmount: true,
 	},
 	expense: {
@@ -64,21 +42,11 @@ const VARIANT_CONFIG = {
 			"Quando houver despesas registradas, elas aparecerão aqui.",
 		shareLabel: "despesa total",
 		percentageDigits: 0,
-		changeClassName: {
-			increase: "text-destructive",
-			decrease: "text-success",
-		},
+		positiveTrend: "down",
 		includeBudgetAmount: false,
 	},
 } as const;

-const formatPercentage = (value: number, digits: number) =>
-	formatPercentageValue(value, {
-		minimumFractionDigits: digits,
-		maximumFractionDigits: digits,
-		absolute: true,
-	});
-
 export function CategoryBreakdownWidgetView({
 	data,
 	period,
@@ -88,78 +56,6 @@ export function CategoryBreakdownWidgetView({
 	const periodParam = formatPeriodForUrl(period);
 	const config = VARIANT_CONFIG[variant];

-	const chartConfig = useMemo(() => {
-		const nextConfig: ChartConfig = {};
-
-		if (data.categories.length <= 7) {
-			data.categories.forEach((category, index) => {
-				nextConfig[category.categoryId] = {
-					label: category.categoryName,
-					color:
-						CATEGORY_BREAKDOWN_COLORS[index % CATEGORY_BREAKDOWN_COLORS.length],
-				};
-			});
-		} else {
-			const topCategories = data.categories.slice(0, 7);
-			topCategories.forEach((category, index) => {
-				nextConfig[category.categoryId] = {
-					label: category.categoryName,
-					color:
-						CATEGORY_BREAKDOWN_COLORS[index % CATEGORY_BREAKDOWN_COLORS.length],
-				};
-			});
-			nextConfig.outros = {
-				label: "Outros",
-				color: "var(--chart-6)",
-			};
-		}
-
-		return nextConfig;
-	}, [data.categories]);
-
-	const chartData = useMemo(() => {
-		if (data.categories.length <= 7) {
-			return data.categories.map((category) => ({
-				category: category.categoryId,
-				name: category.categoryName,
-				value: category.currentAmount,
-				percentage: category.percentageOfTotal,
-				fill: chartConfig[category.categoryId]?.color,
-			}));
-		}
-
-		const topCategories = data.categories.slice(0, 7);
-		const otherCategories = data.categories.slice(7);
-		const otherTotal = otherCategories.reduce(
-			(sum, category) => sum + category.currentAmount,
-			0,
-		);
-		const otherPercentage = otherCategories.reduce(
-			(sum, category) => sum + category.percentageOfTotal,
-			0,
-		);
-
-		const groupedData = topCategories.map((category) => ({
-			category: category.categoryId,
-			name: category.categoryName,
-			value: category.currentAmount,
-			percentage: category.percentageOfTotal,
-			fill: chartConfig[category.categoryId]?.color,
-		}));
-
-		if (otherCategories.length > 0) {
-			groupedData.push({
-				category: "outros",
-				name: "Outros",
-				value: otherTotal,
-				percentage: otherPercentage,
-				fill: chartConfig.outros?.color,
-			});
-		}
-
-		return groupedData;
-	}, [data.categories, chartConfig]);
-
 	if (data.categories.length === 0) {
 		return (
 			<WidgetEmptyState
@@ -178,11 +74,17 @@ export function CategoryBreakdownWidgetView({
 		>
 			<div className="flex items-center justify-between">
 				<TabsList className="grid grid-cols-2">
-					<TabsTrigger value="list" className="text-xs">
+					<TabsTrigger
+						value="list"
+						className="text-xs data-[state=active]:bg-transparent"
+					>
 						<RiListUnordered className="mr-1 size-3.5" />
 						Lista
 					</TabsTrigger>
-					<TabsTrigger value="chart" className="text-xs">
+					<TabsTrigger
+						value="chart"
+						className="text-xs data-[state=active]:bg-transparent"
+					>
 						<RiPieChart2Line className="mr-1 size-3.5" />
 						Gráfico
 					</TabsTrigger>
@@ -190,195 +92,18 @@ export function CategoryBreakdownWidgetView({
 			</div>

 			<TabsContent value="list" className="mt-0">
-				<div>
-					{data.categories.map((category, index) => {
-						const hasIncrease =
-							category.percentageChange !== null &&
-							category.percentageChange > 0;
-						const hasDecrease =
-							category.percentageChange !== null &&
-							category.percentageChange < 0;
-						const hasBudget = category.budgetAmount !== null;
-						const budgetExceeded =
-							hasBudget &&
-							category.budgetUsedPercentage !== null &&
-							category.budgetUsedPercentage > 100;
-						const exceededAmount =
-							budgetExceeded && category.budgetAmount
-								? category.currentAmount - category.budgetAmount
-								: 0;
-						const changeClassName = hasIncrease
-							? config.changeClassName.increase
-							: hasDecrease
-								? config.changeClassName.decrease
-								: "text-muted-foreground";
-
-						return (
-							<div key={category.categoryId}>
-								<div className="flex items-center justify-between gap-3 transition-all duration-300 py-2">
-									<div className="flex min-w-0 flex-1 items-center gap-2">
-										<CategoryIconBadge
-											icon={category.categoryIcon}
-											name={category.categoryName}
+				<CategoryBreakdownList
+					categories={data.categories}
+					periodParam={periodParam}
+					config={config}
 				/>
-
-										<div className="min-w-0 flex-1">
-											<div className="flex items-center gap-2">
-												<Link
-													href={`/categories/${category.categoryId}?periodo=${periodParam}`}
-													className="flex max-w-full items-center gap-1 text-sm font-medium text-foreground underline-offset-2 hover:underline"
-												>
-													<span className="truncate">
-														{category.categoryName}
-													</span>
-													<RiExternalLinkLine
-														className="size-3 shrink-0 text-muted-foreground"
-														aria-hidden
-													/>
-												</Link>
-											</div>
-											<div className="flex flex-wrap items-center gap-x-2 gap-y-0.5 text-xs text-muted-foreground">
-												<span>
-													{formatPercentage(
-														category.percentageOfTotal,
-														config.percentageDigits,
-													)}{" "}
-													da {config.shareLabel}
-												</span>
-												{hasBudget && category.budgetUsedPercentage !== null ? (
-													<>
-														<span aria-hidden>·</span>
-														<span
-															className={`flex items-center gap-1 ${budgetExceeded ? "text-destructive" : "text-info"}`}
-														>
-															<RiWallet3Line className="size-3 shrink-0" />
-															{budgetExceeded ? (
-																<>
-																	excedeu{" "}
-																	<span className="font-medium">
-																		{formatCurrency(exceededAmount)}
-																	</span>
-																</>
-															) : (
-																<>
-																	{formatPercentage(
-																		category.budgetUsedPercentage,
-																		config.percentageDigits,
-																	)}{" "}
-																	do limite
-																	{config.includeBudgetAmount &&
-																	category.budgetAmount !== null
-																		? ` ${formatCurrency(category.budgetAmount)}`
-																		: ""}
-																</>
-															)}
-														</span>
-													</>
-												) : null}
-											</div>
-										</div>
-									</div>
-
-									<div className="flex shrink-0 flex-col items-end gap-0.5">
-										<MoneyValues
-											className="text-foreground font-medium"
-											amount={category.currentAmount}
-										/>
-										{category.percentageChange !== null ? (
-											<span
-												className={`flex items-center gap-0.5 text-xs font-medium ${changeClassName}`}
-											>
-												{hasIncrease ? (
-													<RiArrowUpSFill className="size-3" />
-												) : null}
-												{hasDecrease ? (
-													<RiArrowDownSFill className="size-3" />
-												) : null}
-												{formatPercentage(
-													category.percentageChange,
-													config.percentageDigits,
-												)}
-											</span>
-										) : null}
-									</div>
-								</div>
-							</div>
-						);
-					})}
-				</div>
 			</TabsContent>

 			<TabsContent value="chart" className="mt-0">
-				<div className="flex items-center gap-4">
-					<ChartContainer config={chartConfig} className="h-[280px] flex-1">
-						<PieChart>
-							<Pie
-								data={chartData}
-								cx="50%"
-								cy="50%"
-								labelLine={false}
-								label={({ payload }) =>
-									formatPercentage(
-										(payload as { percentage?: number } | undefined)
-											?.percentage ?? 0,
-										config.percentageDigits,
-									)
-								}
-								outerRadius={75}
-								dataKey="value"
-								nameKey="category"
+				<CategoryBreakdownChart
+					categories={data.categories}
+					percentageDigits={config.percentageDigits}
 				/>
-							<Tooltip
-								content={({ active, payload }) => {
-									if (!active || !payload?.length) {
-										return null;
-									}
-
-									const entry = payload[0]?.payload;
-									if (!entry) {
-										return null;
-									}
-
-									return (
-										<div className="rounded-lg border bg-background p-2 shadow-sm">
-											<div className="grid gap-2">
-												<div className="flex flex-col">
-													<span className="text-xs uppercase text-muted-foreground">
-														{entry.name}
-													</span>
-													<span className="font-medium text-foreground">
-														{formatCurrency(entry.value)}
-													</span>
-													<span className="text-xs text-muted-foreground">
-														{formatPercentage(
-															entry.percentage,
-															config.percentageDigits,
-														)}{" "}
-														do total
-													</span>
-												</div>
-											</div>
-										</div>
-									);
-								}}
-							/>
-						</PieChart>
-					</ChartContainer>
-
-					<div className="min-w-[140px] flex flex-col gap-2">
-						{chartData.map((entry, index) => (
-							<div key={`legend-${index}`} className="flex items-center gap-2">
-								<div
-									className="size-3 shrink-0 rounded-sm"
-									style={{ backgroundColor: entry.fill }}
-								/>
-								<span className="truncate text-xs text-muted-foreground">
-									{entry.name}
-								</span>
-							</div>
-						))}
-					</div>
-				</div>
 			</TabsContent>
 		</Tabs>
 	);
--- a/src/features/dashboard/components/dashboard-grid-editable.tsx
+++ b/src/features/dashboard/components/dashboard-grid-editable.tsx
@@ -25,19 +25,19 @@ import {
 } from "@remixicon/react";
 import { useMemo, useState, useTransition } from "react";
 import { toast } from "sonner";
-import { SortableWidget } from "@/features/dashboard/components/sortable-widget";
-import { WidgetSettingsDialog } from "@/features/dashboard/components/widget-settings-dialog";
+import { SortableWidget } from "@/features/dashboard/components/widgets/sortable-widget";
+import { WidgetSettingsDialog } from "@/features/dashboard/components/widgets/widget-settings-dialog";
 import type { DashboardData } from "@/features/dashboard/fetch-dashboard-data";
 import {
 	resetWidgetPreferences,
 	updateWidgetPreferences,
 	type WidgetPreferences,
-} from "@/features/dashboard/widgets/actions";
+} from "@/features/dashboard/widget-registry/widget-actions";
 import {
 	type DashboardWidgetQuickActionOptions,
 	type WidgetConfig,
 	widgetsConfig,
-} from "@/features/dashboard/widgets/widgets-config";
+} from "@/features/dashboard/widget-registry/widget-config";
 import { NoteDialog } from "@/features/notes/components/note-dialog";
 import { TransactionDialog } from "@/features/transactions/components/dialogs/transaction-dialog/transaction-dialog";
 import { ExpandableWidgetCard } from "@/shared/components/expandable-widget-card";
--- a/src/features/dashboard/components/dashboard-metrics-cards.tsx
+++ b/src/features/dashboard/components/dashboard-metrics-cards.tsx
@@ -1,14 +1,12 @@
 import {
-	RiArrowDownLine,
-	RiArrowDownSFill,
-	RiArrowUpLine,
-	RiArrowUpSFill,
-	RiCalendarCheckLine,
-	RiScalesLine,
-	RiSubtractLine,
+	RiArrowLeftRightLine,
+	RiArrowRightDownLine,
+	RiArrowRightUpLine,
+	RiCalendar2Line,
 } from "@remixicon/react";
 import { MetricsCardInfoButton } from "@/features/dashboard/components/metrics-card-info-button";
-import type { DashboardCardMetrics } from "@/features/dashboard/dashboard-metrics-queries";
+import { PercentageChangeIndicator } from "@/features/dashboard/components/percentage-change-indicator";
+import type { DashboardCardMetrics } from "@/features/dashboard/overview/dashboard-metrics-queries";
 import MoneyValues from "@/shared/components/money-values";
 import {
 	Card,
@@ -34,13 +32,13 @@ const CARDS = [
 		label: "Receitas",
 		subtitle: "Entradas do período",
 		key: "receitas",
-		icon: RiArrowDownLine,
+		icon: RiArrowRightDownLine,
 		invertTrend: false,
 		iconClass: "text-success",
 		helpTitle: "Como calculamos receitas",
 		helpLines: [
 			"Somamos os lançamentos do tipo Receita no período selecionado.",
-			"Consideramos lançamentos efetivados e não efetivados do pagador principal (admin).",
+			"Consideramos lançamentos efetivados e não efetivados da pessoa principal (admin).",
 			"Movimentações de contas marcadas como não consideradas no saldo total ficam fora deste card.",
 			"Não entram transferências internas nem lançamentos automáticos de fatura.",
 			"Saldo inicial também fica fora quando a conta está marcada para desconsiderá-lo das receitas.",
@@ -50,13 +48,13 @@ const CARDS = [
 		label: "Despesas",
 		subtitle: "Saídas do período",
 		key: "despesas",
-		icon: RiArrowUpLine,
+		icon: RiArrowRightUpLine,
 		invertTrend: true,
 		iconClass: "text-destructive",
 		helpTitle: "Como calculamos despesas",
 		helpLines: [
 			"Somamos os lançamentos do tipo Despesa no período selecionado.",
-			"Consideramos lançamentos efetivados e não efetivados do pagador principal (admin).",
+			"Consideramos lançamentos efetivados e não efetivados da pessoa principal (admin).",
 			"Movimentações de contas marcadas como não consideradas no saldo total ficam fora deste card.",
 			"Não entram transferências internas nem lançamentos automáticos de fatura.",
 			"O valor mostrado é a saída efetiva do período, sempre em número positivo no card.",
@@ -66,7 +64,7 @@ const CARDS = [
 		label: "Balanço",
 		subtitle: "Receitas, despesas e ajustes entre contas",
 		key: "balanco",
-		icon: RiScalesLine,
+		icon: RiArrowLeftRightLine,
 		invertTrend: false,
 		iconClass: "text-warning",
 		helpTitle: "Como calculamos o balanço",
@@ -81,7 +79,7 @@ const CARDS = [
 		label: "Previsto",
 		subtitle: "Saldo acumulado projetado",
 		key: "previsto",
-		icon: RiCalendarCheckLine,
+		icon: RiCalendar2Line,
 		invertTrend: false,
 		iconClass: "text-cyan-600",
 		helpTitle: "Como calculamos o previsto",
@@ -94,12 +92,6 @@ const CARDS = [
 	},
 ] as const;

-const TREND_ICONS = {
-	up: RiArrowUpSFill,
-	down: RiArrowDownSFill,
-	flat: RiSubtractLine,
-} as const;
-
 const getTrend = (current: number, previous: number): Trend => {
 	const diff = current - previous;
 	if (diff > TREND_THRESHOLD) return "up";
@@ -126,12 +118,6 @@ const getPercentChange = (current: number, previous: number): string => {
 	});
 };

-const getTrendBadgeClass = (trend: Trend, invertTrend: boolean): string => {
-	if (trend === "flat") return "text-muted-foreground";
-	const isPositive = invertTrend ? trend === "down" : trend === "up";
-	return isPositive ? "text-success" : "text-destructive";
-};
-
 export function DashboardMetricsCards({ metrics }: DashboardMetricsCardsProps) {
 	return (
 		<div className="grid grid-cols-1 gap-3 @xl/main:grid-cols-2 @5xl/main:grid-cols-4">
@@ -148,8 +134,6 @@ export function DashboardMetricsCards({ metrics }: DashboardMetricsCardsProps) {
 				}) => {
 					const metric = metrics[key];
 					const trend = getTrend(metric.current, metric.previous);
-					const TrendIcon = TREND_ICONS[trend];
-					const trendBadgeClass = getTrendBadgeClass(trend, invertTrend);
 					const percentChange = getPercentChange(
 						metric.current,
 						metric.previous,
@@ -157,10 +141,8 @@ export function DashboardMetricsCards({ metrics }: DashboardMetricsCardsProps) {

 					return (
 						<Card key={label} className="gap-2 overflow-hidden">
-							<CardHeader>
-								<div className="flex items-start justify-between">
-									<div>
-										<CardTitle className="flex items-center gap-1.5 ">
+							<CardHeader className="gap-1">
+								<CardTitle className="flex items-center gap-1">
 									<Icon className={cn("size-4", iconClass)} aria-hidden />
 									{label}
 									<MetricsCardInfoButton
@@ -169,11 +151,9 @@ export function DashboardMetricsCards({ metrics }: DashboardMetricsCardsProps) {
 										helpLines={helpLines}
 									/>
 								</CardTitle>
-										<CardDescription className="mt-1.5 tracking-tight">
+								<CardDescription className="mt-1 tracking-tight">
 									{subtitle}
 								</CardDescription>
-									</div>
-								</div>
 								<Separator className="mt-1" />
 							</CardHeader>

@@ -183,15 +163,14 @@ export function DashboardMetricsCards({ metrics }: DashboardMetricsCardsProps) {
 										className="text-2xl leading-none font-medium"
 										amount={metric.current}
 									/>
-									<div
-										className={cn(
-											"inline-flex items-center gap-1 text-xs font-medium",
-											trendBadgeClass,
-										)}
-									>
-										<TrendIcon className="size-3.5" aria-hidden />
-										<span>{percentChange}</span>
-									</div>
+									<PercentageChangeIndicator
+										trend={trend}
+										label={percentChange}
+										positiveTrend={invertTrend ? "down" : "up"}
+										showFlatIcon
+										className="gap-1"
+										iconClassName="size-3.5"
+									/>
 								</div>

 								<div className="text-xs text-muted-foreground">
--- a/src/features/dashboard/components/dashboard-welcome.tsx
+++ b/src/features/dashboard/components/dashboard-welcome.tsx
@@ -1,4 +1,7 @@
-import { formatCurrentDate, getGreeting } from "./welcome-widget";
+import {
+	formatCurrentDate,
+	getGreeting,
+} from "@/features/dashboard/widget-registry/welcome-widget";

 type DashboardWelcomeProps = {
 	name?: string | null;
@@ -10,13 +13,11 @@ export function DashboardWelcome({ name }: DashboardWelcomeProps) {
 	const greeting = getGreeting();

 	return (
-		<section className="py-4">
-			<div>
+		<section className="py-4 space-y-1">
 			<h1 className="text-xl tracking-tight">
-					{greeting}, {displayName}
+				<span className="text-muted-foreground">{greeting},</span> {displayName}
 			</h1>
-				<h2 className="mt-1 text-sm text-muted-foreground">{formattedDate}</h2>
-			</div>
+			<h2 className="text-sm text-muted-foreground">{formattedDate}</h2>
 		</section>
 	);
 }
--- a/src/features/dashboard/components/goals-progress/goals-progress-item.tsx
+++ b/src/features/dashboard/components/goals-progress/goals-progress-item.tsx
@@ -1,9 +1,10 @@
 import { RiPencilLine } from "@remixicon/react";
+import { PercentageChangeIndicator } from "@/features/dashboard/components/percentage-change-indicator";
 import {
 	clampGoalProgress,
 	formatGoalProgressPercentage,
-} from "@/features/dashboard/goals-progress-helpers";
-import type { GoalProgressItem as GoalProgressItemData } from "@/features/dashboard/goals-progress-queries";
+} from "@/features/dashboard/goals-progress/goals-progress-helpers";
+import type { GoalProgressItem as GoalProgressItemData } from "@/features/dashboard/goals-progress/goals-progress-queries";
 import { CategoryIconBadge } from "@/shared/components/entity-avatar";
 import MoneyValues from "@/shared/components/money-values";
 import { Button } from "@/shared/components/ui/button";
@@ -22,12 +23,6 @@ export function GoalProgressItem({
 }: GoalProgressItemProps) {
 	const progressValue = clampGoalProgress(item.usedPercentage, 0, 100);
 	const percentageDelta = item.usedPercentage - 100;
-	const deltaColor =
-		percentageDelta > 0
-			? "text-destructive"
-			: percentageDelta < 0
-				? "text-success"
-				: "text-muted-foreground";
 	const isExceeded = item.status === "exceeded";

 	return (
@@ -47,9 +42,12 @@ export function GoalProgressItem({
 							<MoneyValues className="font-medium" amount={item.spentAmount} />{" "}
 							de{" "}
 							<MoneyValues className="font-medium" amount={item.budgetAmount} />
-							<span className={`ml-1.5 font-medium ${deltaColor}`}>
-								{formatGoalProgressPercentage(percentageDelta, true)}
-							</span>
+							<PercentageChangeIndicator
+								value={percentageDelta}
+								label={formatGoalProgressPercentage(percentageDelta, true)}
+								positiveTrend="down"
+								className="ml-1.5 align-middle"
+							/>
 						</p>
 					</div>
 				</div>
@@ -61,7 +59,7 @@ export function GoalProgressItem({
 						size="icon-sm"
 						className="transition-opacity text-primary hover:opacity-80"
 						onClick={() => onEdit(item)}
-						aria-label={`Editar orçamento de ${item.categoryName}`}
+						aria-label={`Atualizar orçamento de ${item.categoryName}`}
 					>
 						<RiPencilLine className="size-3.5" />
 					</Button>
--- a/src/features/dashboard/components/goals-progress/goals-progress-list.tsx
+++ b/src/features/dashboard/components/goals-progress/goals-progress-list.tsx
@@ -1,7 +1,7 @@
 import { RiFundsLine } from "@remixicon/react";
-import type { GoalProgressItem } from "@/features/dashboard/goals-progress-queries";
+import type { GoalProgressItem } from "@/features/dashboard/goals-progress/goals-progress-queries";
 import { WidgetEmptyState } from "@/shared/components/widget-empty-state";
-import { GoalProgressItem as GoalProgressListItem } from "./goal-progress-item";
+import { GoalProgressItem as GoalProgressListItem } from "./goals-progress-item";

 type GoalsProgressListProps = {
 	items: GoalProgressItem[];
--- a/src/features/dashboard/components/goals-progress/goals-progress-widget-view.tsx
+++ b/src/features/dashboard/components/goals-progress/goals-progress-widget-view.tsx
@@ -5,7 +5,7 @@ import type {
 import type {
 	GoalProgressItem,
 	GoalsProgressData,
-} from "@/features/dashboard/goals-progress-queries";
+} from "@/features/dashboard/goals-progress/goals-progress-queries";
 import { GoalsProgressList } from "./goals-progress-list";
 import { GoalsProgressWidgetDialogs } from "./goals-progress-widget-dialogs";

--- a/src/features/dashboard/components/installment-analysis/installment-analysis-page.tsx
+++ b/src/features/dashboard/components/installment-analysis/installment-analysis-page.tsx
@@ -130,7 +130,7 @@ export function InstallmentAnalysisPage({
 	return (
 		<div className="flex flex-col gap-4">
 			{/* Card de resumo principal */}
-			<Card className="border-none bg-primary/15">
+			<Card className="border-none bg-primary/10 dark:bg-primary/10">
 				<CardContent className="flex flex-col items-start justify-center gap-2 py-2">
 					<p className="text-sm text-muted-foreground">
 						Se você pagar tudo que está selecionado:
--- a/src/features/dashboard/components/installment-expenses/installment-expense-list-item.tsx
+++ b/src/features/dashboard/components/installment-expenses/installment-expense-list-item.tsx
@@ -1,6 +1,6 @@
 import Image from "next/image";
+import { buildInstallmentExpenseDisplay } from "@/features/dashboard/expenses/installment-expenses-helpers";
 import type { InstallmentExpense } from "@/features/dashboard/expenses/installment-expenses-queries";
-import { buildInstallmentExpenseDisplay } from "@/features/dashboard/installment-expenses-helpers";
 import { EstablishmentLogo } from "@/shared/components/entity-avatar";
 import MoneyValues from "@/shared/components/money-values";
 import { Progress } from "@/shared/components/ui/progress";
--- 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, RiExternalLinkLine } from "@remixicon/react";
 import Link from "next/link";
+import { PercentageChangeIndicator } from "@/features/dashboard/components/percentage-change-indicator";
 import {
 	buildInvoiceDetailsHref,
 	buildInvoiceInitials,
@@ -8,8 +9,8 @@ import {
 	getInvoiceShareLabel,
 	parseInvoiceDueDate,
 	parseInvoiceWidgetDueDate,
-} from "@/features/dashboard/invoices-helpers";
-import type { DashboardInvoice } from "@/features/dashboard/invoices-queries";
+} from "@/features/dashboard/invoices/invoices-helpers";
+import type { DashboardInvoice } from "@/features/dashboard/invoices/invoices-queries";
 import MoneyValues from "@/shared/components/money-values";
 import {
 	Avatar,
@@ -83,9 +84,9 @@ export function InvoiceListItem({ invoice, onPay }: InvoiceListItemProps) {
 					{hasBreakdown ? (
 						<HoverCard openDelay={150}>
 							<HoverCardTrigger asChild>{linkNode}</HoverCardTrigger>
-							<HoverCardContent align="start" className="w-72 space-y-3">
+							<HoverCardContent align="start" className="w-80 space-y-3">
 								<p className="text-xs text-muted-foreground">
-									Distribuição por pagador
+									Distribuição por pessoa
 								</p>
 								<ul className="space-y-2">
 									{breakdown.map((share, index) => (
@@ -115,11 +116,14 @@ export function InvoiceListItem({ invoice, onPay }: InvoiceListItemProps) {
 													)}
 												</p>
 											</div>
-											<div className="text-sm font-medium text-foreground">
+											<div className="flex shrink-0 flex-col items-end gap-0.5 text-sm font-medium text-foreground">
 												<MoneyValues
 													className="font-medium"
 													amount={share.amount}
 												/>
+												<PercentageChangeIndicator
+													value={share.percentageChange}
+												/>
 											</div>
 										</li>
 									))}
@@ -179,8 +183,8 @@ export function InvoiceListItem({ invoice, onPay }: InvoiceListItemProps) {
 					onClick={() => onPay(invoice.id)}
 				>
 					{isPaid ? (
-						<span className="flex items-center gap-1 text-success">
-							<RiCheckboxCircleFill className="size-4" /> Pago
+						<span className="flex items-center gap-0.5 text-success">
+							<RiCheckboxCircleFill className="size-3.5" /> Pago
 						</span>
 					) : isOverdue ? (
 						<span className="overdue-blink">
--- a/src/features/dashboard/components/invoices/invoice-logo.tsx
+++ b/src/features/dashboard/components/invoices/invoice-logo.tsx
@@ -2,7 +2,7 @@ import Image from "next/image";
 import {
 	buildInvoiceInitials,
 	type InvoiceLogoTone,
-} from "@/features/dashboard/invoices-helpers";
+} from "@/features/dashboard/invoices/invoices-helpers";
 import { resolveLogoSrc } from "@/shared/lib/logo";
 import { cn } from "@/shared/utils/ui";

--- a/src/features/dashboard/components/invoices/invoice-payment-dialog.tsx
+++ b/src/features/dashboard/components/invoices/invoice-payment-dialog.tsx
@@ -9,8 +9,8 @@ import {
 	getInvoiceStatusBadgeVariant,
 	type InvoiceDialogState,
 	parseInvoiceDueDate,
-} from "@/features/dashboard/invoices-helpers";
-import type { DashboardInvoice } from "@/features/dashboard/invoices-queries";
+} from "@/features/dashboard/invoices/invoices-helpers";
+import type { DashboardInvoice } from "@/features/dashboard/invoices/invoices-queries";
 import MoneyValues from "@/shared/components/money-values";
 import { PaymentSuccess } from "@/shared/components/payment-success";
 import { Badge } from "@/shared/components/ui/badge";
@@ -193,7 +193,7 @@ export function InvoicePaymentDialog({
 										Processando...
 									</>
 								) : (
-									"Confirmar pagamento"
+									"Confirmar"
 								)}
 							</Button>
 						</DialogFooter>
--- a/src/features/dashboard/components/invoices/invoices-list.tsx
+++ b/src/features/dashboard/components/invoices/invoices-list.tsx
@@ -1,5 +1,5 @@
 import { RiBillLine } from "@remixicon/react";
-import type { DashboardInvoice } from "@/features/dashboard/invoices-queries";
+import type { DashboardInvoice } from "@/features/dashboard/invoices/invoices-queries";
 import { WidgetEmptyState } from "@/shared/components/widget-empty-state";
 import { InvoiceListItem } from "./invoice-list-item";

--- a/src/features/dashboard/components/invoices/invoices-widget-view.tsx
+++ b/src/features/dashboard/components/invoices/invoices-widget-view.tsx
@@ -1,5 +1,5 @@
-import type { InvoiceDialogState } from "@/features/dashboard/invoices-helpers";
-import type { DashboardInvoice } from "@/features/dashboard/invoices-queries";
+import type { InvoiceDialogState } from "@/features/dashboard/invoices/invoices-helpers";
+import type { DashboardInvoice } from "@/features/dashboard/invoices/invoices-queries";
 import { InvoicePaymentDialog } from "./invoice-payment-dialog";
 import { InvoicesList } from "./invoices-list";

--- a/src/features/dashboard/components/notes/note-list-item.tsx
+++ b/src/features/dashboard/components/notes/note-list-item.tsx
@@ -29,14 +29,12 @@ export function NoteListItem({
 					{displayTitle}
 				</p>
 				<div className="mt-1 flex items-center gap-2">
-					<Badge variant="outline" className="h-5 px-1.5 text-[10px]">
+					<Badge variant="outline" className="h-5 px-1.5 text-xs">
 						{getNoteTasksSummary(note)}
 					</Badge>
-					{createdAtLabel ? (
 					<p className="truncate text-xs text-muted-foreground">
 						{createdAtLabel}
 					</p>
-					) : null}
 				</div>
 			</div>

--- a/src/features/dashboard/components/payment-overview/payment-breakdown-list-item.tsx
+++ b/src/features/dashboard/components/payment-overview/payment-breakdown-list-item.tsx
@@ -4,7 +4,7 @@ import type { ReactNode } from "react";
 import {
 	formatPaymentBreakdownPercentage,
 	formatPaymentBreakdownTransactionsLabel,
-} from "@/features/dashboard/payment-breakdown-formatters";
+} from "@/features/dashboard/payments/payment-breakdown-formatters";
 import MoneyValues from "@/shared/components/money-values";
 import { Progress } from "@/shared/components/ui/progress";
 import {
--- a/src/features/dashboard/components/payment-overview/payment-overview-widget-view.tsx
+++ b/src/features/dashboard/components/payment-overview/payment-overview-widget-view.tsx
@@ -1,7 +1,7 @@
 import { RiMoneyDollarCircleLine, RiSlideshowLine } from "@remixicon/react";
-import type { PaymentOverviewTab } from "@/features/dashboard/payment-overview-tabs";
 import type { PaymentConditionsData } from "@/features/dashboard/payments/payment-conditions-queries";
 import type { PaymentMethodsData } from "@/features/dashboard/payments/payment-methods-queries";
+import type { PaymentOverviewTab } from "@/features/dashboard/payments/payment-overview-tabs";
 import {
 	Tabs,
 	TabsContent,
@@ -31,11 +31,17 @@ export function PaymentOverviewWidgetView({
 	return (
 		<Tabs value={activeTab} onValueChange={onTabChange} className="w-full">
 			<TabsList className="grid grid-cols-2">
-				<TabsTrigger value="conditions" className="text-xs">
+				<TabsTrigger
+					value="conditions"
+					className="text-xs data-[state=active]:bg-transparent"
+				>
 					<RiSlideshowLine className="mr-1 size-3.5" />
 					Condições
 				</TabsTrigger>
-				<TabsTrigger value="methods" className="text-xs">
+				<TabsTrigger
+					value="methods"
+					className="text-xs data-[state=active]:bg-transparent"
+				>
 					<RiMoneyDollarCircleLine className="mr-1 size-3.5" />
 					Formas
 				</TabsTrigger>
--- a/src/features/dashboard/components/percentage-change-indicator.tsx
+++ b/src/features/dashboard/components/percentage-change-indicator.tsx
@@ -0,0 +1,71 @@
+import {
+	RiArrowDownSFill,
+	RiArrowUpSFill,
+	RiSubtractLine,
+} from "@remixicon/react";
+import { formatPercentage } from "@/shared/utils/percentage";
+import { cn } from "@/shared/utils/ui";
+
+export type PercentageChangeTrend = "up" | "down" | "flat";
+
+type PercentageChangeIndicatorProps = {
+	value?: number | null;
+	label?: string;
+	trend?: PercentageChangeTrend;
+	positiveTrend?: Exclude<PercentageChangeTrend, "flat">;
+	showFlatIcon?: boolean;
+	className?: string;
+	iconClassName?: string;
+};
+
+export function PercentageChangeIndicator({
+	value,
+	label,
+	trend,
+	positiveTrend = "down",
+	showFlatIcon = false,
+	className,
+	iconClassName,
+}: PercentageChangeIndicatorProps) {
+	const hasNumericValue = typeof value === "number" && Number.isFinite(value);
+	const resolvedTrend =
+		trend ??
+		(hasNumericValue
+			? value > 0
+				? "up"
+				: value < 0
+					? "down"
+					: "flat"
+			: "flat");
+	const resolvedLabel =
+		label ?? (hasNumericValue ? formatPercentage(value) : null);
+
+	if (!resolvedLabel) {
+		return null;
+	}
+
+	return (
+		<span
+			className={cn(
+				"inline-flex items-center gap-0.5 text-xs font-medium",
+				resolvedTrend === "flat"
+					? "text-muted-foreground"
+					: resolvedTrend === positiveTrend
+						? "text-success"
+						: "text-destructive",
+				className,
+			)}
+		>
+			{resolvedTrend === "up" ? (
+				<RiArrowUpSFill className={cn("size-3", iconClassName)} />
+			) : null}
+			{resolvedTrend === "down" ? (
+				<RiArrowDownSFill className={cn("size-3", iconClassName)} />
+			) : null}
+			{resolvedTrend === "flat" && showFlatIcon ? (
+				<RiSubtractLine className={cn("size-3", iconClassName)} />
+			) : null}
+			{resolvedLabel}
+		</span>
+	);
+}
--- a/src/features/dashboard/components/widgets/attachments-widget.tsx
+++ b/src/features/dashboard/components/widgets/attachments-widget.tsx
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Felipe Coutinho	74dda549f5	style(format): corrigir ordenação de imports em 3 arquivos Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-20 19:57:05 +00:00
Felipe Coutinho	137b63f256	style(format): corrigir formatação Biome em 5 arquivos Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-20 19:54:56 +00:00
Felipe Coutinho	f747405264	feat(calendar): agrupar parcelas da mesma série em evento único Lançamentos parcelados com o mesmo seriesId agora são consolidados em um único evento do tipo 'installment' no calendário, exibindo 'Nx de R$ X' em vez de repetir o mesmo item N vezes. Legenda e modal de detalhes atualizados para refletir o novo tipo. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-20 19:50:02 +00:00
Felipe Coutinho	cbc17c8513	style(notes): polimento visual nas tarefas e modal de detalhes Ícone de tarefa concluída em card e detalhes simplificado para RiCheckLine verde sem caixa. Checkbox no modal de edição usa bg/border success com texto success-foreground (claro no light, escuro no dark). Footer do modal de detalhes reordenado: Cancelar à esquerda, Alterar primário à direita. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-20 19:23:36 +00:00
Felipe Coutinho	c41fafc319	style(assets): atualizar previews de lançamentos e pwa Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-20 18:41:48 +00:00
Felipe Coutinho	0bc3f06b77	refactor(ui): renomear "Pagador/Pagadores" para "Pessoa/Pessoas" na interface Todas as strings visíveis ao usuário (labels, títulos, toasts, mensagens de erro, cabeçalhos de tabela, exportações) foram atualizadas. Acordos de gênero em português corrigidos. Código, rotas (/payers) e schema do banco (pagadores) permanecem inalterados — divergência intencional documentada em CLAUDE.md e CHANGELOG. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-20 18:29:55 +00:00
Felipe Coutinho	2f68bcf039	style(changelog): destacar resumo de versão com borda e itálico discretos Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-20 17:56:52 +00:00
Felipe Coutinho	41dcd5cec9	docs(claude): exigir parágrafo humano em cada versão do CHANGELOG Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-20 17:56:26 +00:00
Felipe Coutinho	6391f07eb6	fix(changelog): renderizar parágrafo de resumo por versão Parser ignorava texto livre entre o cabeçalho ## [versão] e a primeira seção ###. Adicionado campo `summary` em ChangelogVersion e captura das linhas de texto antes da primeira seção. ChangelogTab renderiza o resumo logo abaixo do cabeçalho, antes das entradas técnicas. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-20 17:55:09 +00:00
Felipe Coutinho	ae9dd364c4	chore(release): v2.4.2 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-20 17:52:26 +00:00
Felipe Coutinho	e005add233	feat(logo): migrar token Logo.dev para runtime server-side NEXT_PUBLIC_LOGO_DEV_TOKEN renomeado para LOGO_DEV_TOKEN — lido apenas em runtime no servidor. URL construída nos endpoints /api/logo/mapping e /api/logo/search; cliente nunca recebe o token. Novo server.ts com isLogoDevEnabled() e buildLogoDevUrl(). LogoDevProvider (Context) propaga flag `enabled` para Client Components. Build arg removido do Dockerfile e do workflow docker-publish.yml. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-20 17:52:24 +00:00
Felipe Coutinho	6d81ff8b53	style(ui): polimento visual — tema, cards, dark mode e landing page Raio de borda global 0.625rem → 0.7rem; ajustes finos em --card e --border. DotPattern removido do layout, tela de auth e landing page. Account-card redesenhado (cores de saldo, tooltip de flags de exclusão). Budget-card, card-item, calendário (day-cell, event-modal) com layout revisado. Auth-card-shell simplificado (sem glassmorphism/blob). Landing page com mainFeatures + extraFeatures em grid único e dark mode nos botões de CTA. Imagens de preview da landing atualizadas. CSS --data-7..10 removidas. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-20 17:52:17 +00:00
Felipe Coutinho	5d84ae928a	refactor(nav): remover sidebar, unificar navegação na navbar Componentes da sidebar lateral (app-sidebar, nav-main, nav-secondary, nav-user, nav-link), sidebar.tsx e use-mobile.ts removidos. Barrel exports órfãos de shared/hooks, shared/components/providers, shared/lib/schemas e shared/lib/types também removidos. Navbar recebe ajustes menores de markup e acessibilidade. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-20 17:52:07 +00:00
Felipe Coutinho	ba05985725	refactor(dashboard): reorganizar módulos em subdiretórios e nova arquitetura de widgets Arquivos de queries, helpers e controllers dispersos na raiz de dashboard/ foram movidos para subdiretórios temáticos (bills/, invoices/, notes/, notifications/, overview/, payments/, goals-progress/, categories/). ~25 widgets monolíticos obsoletos removidos em favor de nova arquitetura baseada em widget-registry com components/widgets/. Novos componentes: category-breakdown-chart/list, goals-progress-item, percentage-change-indicator. Imports atualizados em fetch-dashboard-data e transaction-filters limpos. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-20 17:51:56 +00:00