commit ea0b8618e0d7909e3ad8bcc68fe58bf9d695a303
Author: Felipe Coutinho <felipi@live.com>
Date:   Sat Nov 15 15:49:36 2025 -0300

    feat: adição de novos ícones SVG e configuração do ambiente
    
    - Adicionados ícones SVG para ChatGPT, Claude, Gemini e OpenRouter
    - Implementados ícones para modos claro e escuro do ChatGPT
    - Criado script de inicialização para PostgreSQL com extensão pgcrypto
    - Adicionado script de configuração de ambiente que faz backup do .env
    - Configurado tsconfig.json para TypeScript com opções de compilação

diff --git a/.dockerignore b/.dockerignore
new file mode 100644
index 0000000..7b0aad3
--- /dev/null
+++ b/.dockerignore
@@ -0,0 +1,61 @@
+# Dependências
+node_modules
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+.pnpm-store
+
+# Build do Next.js
+.next
+out
+dist
+
+# Arquivos de ambiente (serão passados via docker-compose)
+.env
+.env*.local
+.env.development
+.env.production
+
+# Git
+.git
+.gitignore
+.gitattributes
+
+# Docker
+Dockerfile
+docker-compose*.yml
+.dockerignore
+
+# CI/CD
+.github
+.gitlab-ci.yml
+
+# Testes
+coverage
+.nyc_output
+*.test.ts
+*.test.tsx
+*.spec.ts
+*.spec.tsx
+__tests__
+__mocks__
+
+# IDE e editores
+.vscode
+.idea
+*.swp
+*.swo
+*~
+.DS_Store
+
+# Logs
+logs
+*.log
+
+# Misc
+README.md
+LICENSE
+.eslintcache
+.prettierignore
+.editorconfig
diff --git a/.env.example b/.env.example
new file mode 100644
index 0000000..48ed0f7
--- /dev/null
+++ b/.env.example
@@ -0,0 +1,48 @@
+# ============================================
+# OPENSHEETS - Variáveis de Ambiente
+# ============================================
+#
+# Setup: cp .env.example .env
+# Docs: README.md
+#
+# ============================================
+
+# === Database ===
+# PostgreSQL local (Docker): use host "db"
+# PostgreSQL local (sem Docker): use host "localhost"
+# PostgreSQL remoto: use URL completa do provider
+DATABASE_URL=postgresql://opensheets:opensheets_dev_password@db:5432/opensheets_db
+
+# Credenciais do PostgreSQL (apenas para Docker local) - Alterar
+POSTGRES_USER=opensheets
+POSTGRES_PASSWORD=opensheets_dev_password
+POSTGRES_DB=opensheets_db
+
+# Provider: "local" para Docker, "remote" para Supabase/Neon/etc
+DB_PROVIDER=local
+
+# === Better Auth ===
+# Gere com: openssl rand -base64 32
+BETTER_AUTH_SECRET=your-secret-key-here-change-this
+BETTER_AUTH_URL=http://localhost:3000
+
+# === Portas ===
+APP_PORT=3000
+DB_PORT=5432
+
+# === Email (Opcional) ===
+# Provider: Resend (https://resend.com)
+RESEND_API_KEY=
+EMAIL_FROM=noreply@example.com
+
+# === OAuth (Opcional) ===
+# Google: https://console.cloud.google.com/apis/credentials
+GOOGLE_CLIENT_ID=
+GOOGLE_CLIENT_SECRET=
+NEXT_PUBLIC_GOOGLE_OAUTH_ENABLED=true
+
+# === AI Providers (Opcional) ===
+ANTHROPIC_API_KEY=
+OPENAI_API_KEY=
+GOOGLE_GENERATIVE_AI_API_KEY=
+OPENROUTER_API_KEY=
\ No newline at end of file
diff --git a/.eslintrc.json b/.eslintrc.json
new file mode 100644
index 0000000..6b10a5b
--- /dev/null
+++ b/.eslintrc.json
@@ -0,0 +1,6 @@
+{
+  "extends": [
+    "next/core-web-vitals",
+    "next/typescript"
+  ]
+}
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..4f9a65d
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,133 @@
+# ============================================
+# OPENSHEETS - .gitignore
+# ============================================
+
+# === Dependencies ===
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# === Next.js ===
+/.next/
+/out/
+next-env.d.ts
+.turbo
+
+# === Build ===
+/build
+/dist
+*.tsbuildinfo
+
+# === Testing ===
+/coverage
+*.lcov
+
+# === Environment Variables ===
+# Ignora todos os .env exceto .env.example
+.env*
+!.env.example
+
+# === Logs ===
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+# === OS Files ===
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+ehthumbs.db
+Thumbs.db
+*.swp
+*.swo
+*~
+
+# === IDEs ===
+# VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+*.code-workspace
+
+# JetBrains (WebStorm, IntelliJ, etc)
+.idea/
+*.iml
+*.iws
+*.ipr
+
+# Sublime Text
+*.sublime-workspace
+*.sublime-project
+
+# Vim
+[._]*.s[a-v][a-z]
+[._]*.sw[a-p]
+[._]s[a-rt-v][a-z]
+[._]ss[a-gi-z]
+[._]sw[a-p]
+
+# === Certificates ===
+*.pem
+*.key
+*.cert
+*.crt
+
+# === Deploy Platforms ===
+.vercel
+.netlify
+
+# === Database ===
+*.sqlite
+*.sqlite3
+*.db
+
+# === Docker ===
+# Não ignora docker-compose.yml e Dockerfile
+# Ignora apenas dados e logs locais
+docker-compose.override.yml
+*.log
+
+# === AI Assistants (Claude, Gemini, Cursor, etc) ===
+# Arquivos de configuração de assistentes de IA
+.claude/
+.gemini/
+.cursor/
+CLAUDE.md
+AGENTS.md
+claude.md
+agents.md
+
+# === Backups e Temporários ===
+*.bak
+*.backup
+*.tmp
+*.temp
+~$*
+
+# === Outros ===
+# Arquivos de lock temporários
+package-lock.json  # Se usa pnpm, não precisa do npm lock
+yarn.lock          # Se usa pnpm, não precisa do yarn lock
+
+# Drizzle Studio local cache
+.drizzle/
+
+# TypeScript cache
+.tsbuildinfo
+
+# Local development files
+.local/
+local/
+scratch/
+playground/
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..1371262
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,17 @@
+{
+  "files.exclude": {
+    "**/.git": true,
+    "**/.svn": true,
+    "**/.hg": true,
+    "**/.DS_Store": true,
+    "**/Thumbs.db": true,
+    "**/node_modules": true,
+    "node_modules": true,
+    "**/.vscode": true,
+    ".vscode": true,
+    "**/.next": true,
+    ".next": true
+  },
+  "explorerExclude.backup": {},
+  "editor.defaultFormatter": "esbenp.prettier-vscode"
+}
diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000..afa30de
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,96 @@
+# Dockerfile para Next.js 16 com multi-stage build otimizado
+
+# ============================================
+# Stage 1: Instalação de dependências
+# ============================================
+FROM node:22-alpine AS deps
+
+# Instalar pnpm globalmente
+RUN corepack enable && corepack prepare pnpm@latest --activate
+
+WORKDIR /app
+
+# Copiar apenas arquivos de dependências para aproveitar cache
+COPY package.json pnpm-lock.yaml* ./
+
+# Instalar dependências (production + dev para o build)
+RUN pnpm install --frozen-lockfile
+
+# ============================================
+# Stage 2: Build da aplicação
+# ============================================
+FROM node:22-alpine AS builder
+
+# Instalar pnpm globalmente
+RUN corepack enable && corepack prepare pnpm@latest --activate
+
+WORKDIR /app
+
+# Copiar dependências instaladas do stage anterior
+COPY --from=deps /app/node_modules ./node_modules
+
+# Copiar todo o código fonte
+COPY . .
+
+# Variáveis de ambiente necessárias para o build
+# DATABASE_URL será fornecida em runtime, mas precisa estar definida para validação
+ENV NEXT_TELEMETRY_DISABLED=1 \
+    NODE_ENV=production
+
+# Build da aplicação Next.js
+# Nota: Se houver erros de tipo, ajuste typescript.ignoreBuildErrors no next.config.ts
+RUN pnpm build
+
+# ============================================
+# Stage 3: Runtime (produção)
+# ============================================
+FROM node:22-alpine AS runner
+
+# Instalar pnpm globalmente
+RUN corepack enable && corepack prepare pnpm@latest --activate
+
+WORKDIR /app
+
+# Criar usuário não-root para segurança
+RUN addgroup --system --gid 1001 nodejs && \
+    adduser --system --uid 1001 nextjs
+
+# Copiar apenas arquivos necessários para produção
+COPY --from=builder /app/public ./public
+COPY --from=builder /app/package.json ./package.json
+COPY --from=builder /app/pnpm-lock.yaml ./pnpm-lock.yaml
+
+# Copiar arquivos de build do Next.js
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+# Copiar arquivos do Drizzle (migrations e schema)
+COPY --from=builder --chown=nextjs:nodejs /app/drizzle ./drizzle
+COPY --from=builder --chown=nextjs:nodejs /app/drizzle.config.ts ./drizzle.config.ts
+COPY --from=builder --chown=nextjs:nodejs /app/db ./db
+
+# Copiar node_modules para ter drizzle-kit disponível para migrations
+COPY --from=builder --chown=nextjs:nodejs /app/node_modules ./node_modules
+
+# Definir variáveis de ambiente de produção
+ENV NODE_ENV=production \
+    NEXT_TELEMETRY_DISABLED=1 \
+    PORT=3000 \
+    HOSTNAME="0.0.0.0"
+
+# Expor porta
+EXPOSE 3000
+
+# Ajustar permissões para o usuário nextjs
+RUN chown -R nextjs:nodejs /app
+
+# Mudar para usuário não-root
+USER nextjs
+
+# Health check
+HEALTHCHECK --interval=30s --timeout=10s --start-period=40s --retries=3 \
+  CMD node -e "require('http').get('http://localhost:3000/api/health', (r) => {process.exit(r.statusCode === 200 ? 0 : 1)})" || exit 1
+
+# Comando de inicialização
+# Nota: Em produção com standalone build, o servidor é iniciado pelo arquivo server.js
+CMD ["node", "server.js"]
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..28d20ef
--- /dev/null
+++ b/README.md
@@ -0,0 +1,1030 @@
+# OpenSheets
+
+> Uma aplicação moderna e completa construída com **Next.js 16**, **Better Auth**, **Drizzle ORM**, **PostgreSQL** e **shadcn/ui**.
+
+[![Next.js](https://img.shields.io/badge/Next.js-16-black?style=flat-square&logo=next.js)](https://nextjs.org/)
+[![TypeScript](https://img.shields.io/badge/TypeScript-5.9-blue?style=flat-square&logo=typescript)](https://www.typescriptlang.org/)
+[![PostgreSQL](https://img.shields.io/badge/PostgreSQL-18-blue?style=flat-square&logo=postgresql)](https://www.postgresql.org/)
+[![Docker](https://img.shields.io/badge/Docker-Ready-blue?style=flat-square&logo=docker)](https://www.docker.com/)
+
+---
+
+## 📖 Índice
+
+- [Sobre o Projeto](#-sobre-o-projeto)
+- [Features](#-features)
+- [Tech Stack](#-tech-stack)
+- [Início Rápido](#-início-rápido)
+  - [Opção 1: Desenvolvimento Local (Recomendado para Devs)](#opção-1-desenvolvimento-local-recomendado-para-devs)
+  - [Opção 2: Docker Completo (Usuários Finais)](#opção-2-docker-completo-usuários-finais)
+  - [Opção 3: Docker + Banco Remoto](#opção-3-docker--banco-remoto)
+- [Scripts Disponíveis](#-scripts-disponíveis)
+- [Docker - Guia Detalhado](#-docker---guia-detalhado)
+- [Configuração de Variáveis de Ambiente](#-configuração-de-variáveis-de-ambiente)
+- [Banco de Dados](#-banco-de-dados)
+- [Arquitetura](#-arquitetura)
+- [Troubleshooting](#-troubleshooting)
+- [Contribuindo](#-contribuindo)
+
+---
+
+## 🎯 Sobre o Projeto
+
+**OpenSheets** é uma aplicação full-stack moderna projetada para controle de finanças pessoais. Construída com as melhores práticas de desenvolvimento e ferramentas de ponta, oferece uma base sólida e escalável para gestão financeira completa.
+
+### Por que usar o OpenSheets?
+
+- ✅ **Pronto para Produção** - Docker, health checks, migrations automáticas
+- ✅ **TypeScript First** - Type safety em toda a aplicação
+- ✅ **Autenticação Completa** - Better Auth com OAuth, email magic links
+- ✅ **ORM Moderno** - Drizzle com Drizzle Studio integrado
+- ✅ **UI Components** - shadcn/ui com design system completo
+- ✅ **Developer Experience** - Hot reload, Turbopack, ESLint configurado
+
+---
+
+## ✨ Features
+
+### 🔐 Autenticação
+
+- Better Auth integrado
+- OAuth (Google, GitHub)
+- Email magic links
+- Session management
+- Protected routes via middleware
+
+### 🗄️ Banco de Dados
+
+- PostgreSQL 18 (última versão estável)
+- Drizzle ORM com TypeScript
+- Migrations automáticas
+- Drizzle Studio (UI visual para DB)
+- Suporte para banco local (Docker) ou remoto (Supabase, Neon, etc)
+
+### 🎨 Interface
+
+- shadcn/ui components
+- Tailwind CSS v4
+- Dark mode suportado
+- Animações com Framer Motion
+
+### 🐳 Docker
+
+- Multi-stage build otimizado
+- Health checks para app e banco
+- Volumes persistentes
+- Network isolada
+- Scripts npm facilitados
+
+### 🧪 Desenvolvimento
+
+- Next.js 16 com App Router
+- Turbopack (fast refresh)
+- TypeScript 5.9
+- ESLint + Prettier
+- React 19
+
+---
+
+## 🛠️ Tech Stack
+
+### Frontend
+
+- **Framework:** Next.js 16 (App Router)
+- **Linguagem:** TypeScript 5.9
+- **UI Library:** React 19
+- **Styling:** Tailwind CSS v4
+- **Components:** shadcn/ui (Radix UI)
+- **Icons:** Lucide React, Remixicon
+- **Animations:** Framer Motion
+
+### Backend
+
+- **Runtime:** Node.js 22
+- **Database:** PostgreSQL 18
+- **ORM:** Drizzle ORM
+- **Auth:** Better Auth
+- **Email:** Resend
+
+### DevOps
+
+- **Containerization:** Docker + Docker Compose
+- **Package Manager:** pnpm
+- **Build Tool:** Turbopack
+
+### AI Integration (Opcional)
+
+- Anthropic (Claude)
+- OpenAI (GPT)
+- Google Gemini
+- OpenRouter
+
+---
+
+## 🚀 Início Rápido
+
+Escolha a opção que melhor se adequa ao seu caso:
+
+| Cenário     | Quando usar                               | Comando principal                      |
+| ----------- | ----------------------------------------- | -------------------------------------- |
+| **Opção 1** | Você vai **desenvolver** e alterar código | `docker compose up db -d` + `pnpm dev` |
+| **Opção 2** | Você só quer **usar** a aplicação         | `pnpm docker:up`                       |
+| **Opção 3** | Você já tem um **banco remoto**           | `docker compose up app --build`        |
+
+---
+
+### Opção 1: Desenvolvimento Local (Recomendado para Devs)
+
+Esta é a **melhor opção para desenvolvedores** que vão modificar o código.
+
+#### Pré-requisitos
+
+- Node.js 22+ instalado
+- pnpm instalado (ou npm/yarn)
+- Docker e Docker Compose instalados
+
+#### Passo a Passo
+
+1. **Clone o repositório**
+
+   ```bash
+   git clone https://github.com/felipegcoutinho/opensheets.git
+   cd opensheets
+   ```
+
+2. **Instale as dependências**
+
+   ```bash
+   pnpm install
+   ```
+
+3. **Configure as variáveis de ambiente**
+
+   ```bash
+   cp .env.example .env
+   ```
+
+   Edite o `.env` e configure:
+
+   ```env
+   # Banco de dados (usando Docker)
+   DATABASE_URL=postgresql://opensheets:opensheets_dev_password@localhost:5432/opensheets_db
+   DB_PROVIDER=local
+
+   # Better Auth (gere com: openssl rand -base64 32)
+   BETTER_AUTH_SECRET=seu-secret-aqui
+   BETTER_AUTH_URL=http://localhost:3000
+   ```
+
+4. **Suba apenas o PostgreSQL em Docker**
+
+   ```bash
+   docker compose up db -d
+   ```
+
+   Isso sobe **apenas o banco de dados** em container. A aplicação roda localmente.
+
+5. **Execute as migrations**
+
+   ```bash
+   pnpm db:push
+   ```
+
+6. **Inicie o servidor de desenvolvimento**
+
+   ```bash
+   pnpm dev
+   ```
+
+7. **Acesse a aplicação**
+   ```
+   http://localhost:3000
+   ```
+
+#### Por que esta opção?
+
+- ✅ **Hot reload perfeito** - Mudanças no código refletem instantaneamente
+- ✅ **Debugger funciona** - Use breakpoints normalmente
+- ✅ **Menos recursos** - Só o banco roda em Docker
+- ✅ **Drizzle Studio** - Acesse com `pnpm db:studio`
+- ✅ **Melhor DX** - Developer Experience otimizada
+
+---
+
+### Opção 2: Docker Completo (Usuários Finais)
+
+Ideal para quem quer apenas **usar a aplicação** sem mexer no código.
+
+#### Pré-requisitos
+
+- Docker e Docker Compose instalados
+
+#### Passo a Passo
+
+1. **Clone o repositório**
+
+   ```bash
+   git clone https://github.com/felipegcoutinho/opensheets.git
+   cd opensheets
+   ```
+
+2. **Configure as variáveis de ambiente**
+
+   ```bash
+   cp .env.example .env
+   ```
+
+   Edite o `.env`:
+
+   ```env
+   # Use o host "db" (nome do serviço Docker)
+   DATABASE_URL=postgresql://opensheets:opensheets_dev_password@db:5432/opensheets_db
+   DB_PROVIDER=local
+
+   # Better Auth
+   BETTER_AUTH_SECRET=seu-secret-aqui
+   BETTER_AUTH_URL=http://localhost:3000
+   ```
+
+3. **Suba tudo em Docker**
+
+   ```bash
+   pnpm docker:up
+   # ou: docker compose up --build
+   ```
+
+   Isso sobe **aplicação + banco de dados** em containers.
+
+4. **Acesse a aplicação**
+
+   ```
+   http://localhost:3000
+   ```
+
+5. **Para parar**
+   ```bash
+   pnpm docker:down
+   # ou: docker compose down
+   ```
+
+#### Dicas
+
+- Use `pnpm docker:up:detached` para rodar em background
+- Veja logs com `pnpm docker:logs`
+- Reinicie com `pnpm docker:restart`
+
+---
+
+### Opção 3: Docker + Banco Remoto
+
+Se você já tem PostgreSQL no **Supabase**, **Neon**, **Railway**, etc.
+
+#### Passo a Passo
+
+1. **Configure o `.env` com banco remoto**
+
+   ```env
+   DATABASE_URL=postgresql://user:password@host.region.provider.com:5432/database?sslmode=require
+   DB_PROVIDER=remote
+
+   BETTER_AUTH_SECRET=seu-secret-aqui
+   BETTER_AUTH_URL=http://localhost:3000
+   ```
+
+2. **Suba apenas a aplicação**
+
+   ```bash
+   docker compose up app --build
+   ```
+
+3. **Acesse a aplicação**
+   ```
+   http://localhost:3000
+   ```
+
+---
+
+## 📜 Scripts Disponíveis
+
+### Desenvolvimento
+
+```bash
+# Servidor de desenvolvimento (com Turbopack)
+pnpm dev
+
+# Build de produção
+pnpm build
+
+# Servidor de produção
+pnpm start
+
+# Linter
+pnpm lint
+```
+
+### Banco de Dados (Drizzle)
+
+```bash
+# Gerar migrations a partir do schema
+pnpm db:generate
+
+# Executar migrations
+pnpm db:migrate
+
+# Push schema direto para o banco (dev only)
+pnpm db:push
+
+# Abrir Drizzle Studio (UI visual do banco)
+pnpm db:studio
+```
+
+### Docker
+
+```bash
+# Subir todos os containers (app + banco)
+pnpm docker:up
+
+# Subir em background (detached mode)
+pnpm docker:up:detached
+
+# Parar todos os containers
+pnpm docker:down
+
+# Parar e REMOVER volumes (⚠️ apaga dados do banco!)
+pnpm docker:down:volumes
+
+# Ver logs em tempo real
+pnpm docker:logs
+
+# Logs apenas da aplicação
+pnpm docker:logs:app
+
+# Logs apenas do banco de dados
+pnpm docker:logs:db
+
+# Reiniciar containers
+pnpm docker:restart
+
+# Rebuild completo (força reconstrução)
+pnpm docker:rebuild
+```
+
+### Utilitários
+
+```bash
+# Setup automático de variáveis de ambiente
+pnpm env:setup
+```
+
+---
+
+## 🐳 Docker - Guia Detalhado
+
+### Arquitetura Docker
+
+```
+┌─────────────────────────────────────────────────┐
+│              docker-compose.yml                 │
+├─────────────────────────────────────────────────┤
+│                                                 │
+│  ┌──────────────────┐      ┌─────────────────┐ │
+│  │   app            │      │      db         │ │
+│  │   (Next.js 16)   │◄─────┤  (PostgreSQL 18)│ │
+│  │   Port: 3000     │      │  Port: 5432     │ │
+│  │   Node.js 22     │      │  Alpine Linux   │ │
+│  └──────────────────┘      └─────────────────┘ │
+│                                                 │
+│  Network: opensheets_network (bridge)                │
+│  Volume: opensheets_postgres_data (persistent)       │
+│                                                 │
+└─────────────────────────────────────────────────┘
+```
+
+### Multi-Stage Build
+
+O `Dockerfile` usa **3 stages** para otimização:
+
+1. **deps** - Instala dependências
+2. **builder** - Builda a aplicação (Next.js standalone)
+3. **runner** - Imagem final mínima (apenas produção)
+
+**Benefícios:**
+
+- Imagem final **muito menor** (~200MB vs ~1GB)
+- Build cache eficiente
+- Apenas dependências de produção no final
+- Security: roda como usuário não-root
+
+### Health Checks
+
+Ambos os serviços têm health checks:
+
+**PostgreSQL:**
+
+- Comando: `pg_isready`
+- Intervalo: 10s
+- Timeout: 5s
+
+**Next.js App:**
+
+- Endpoint: `http://localhost:3000/api/health`
+- Intervalo: 30s
+- Start period: 40s (aguarda build)
+
+### Volumes e Persistência
+
+```yaml
+volumes:
+  postgres_data:
+    name: opensheets_postgres_data
+    driver: local
+```
+
+- Os dados do PostgreSQL **persistem** entre restarts
+- Para **apagar dados**: `pnpm docker:down:volumes`
+- Para **backup**: `docker compose exec db pg_dump...`
+
+### Network Isolada
+
+```yaml
+networks:
+  opensheets_network:
+    name: opensheets_network
+    driver: bridge
+```
+
+- App e banco se comunicam via network interna
+- Isolamento de segurança
+- DNS automático (app acessa `db:5432`)
+
+### Comandos Docker Avançados
+
+```bash
+# Entrar no container da aplicação
+docker compose exec app sh
+
+# Entrar no container do banco
+docker compose exec db psql -U opensheets -d opensheets_db
+
+# Ver status dos containers
+docker compose ps
+
+# Ver uso de recursos
+docker stats opensheets_app opensheets_postgres
+
+# Backup do banco
+docker compose exec db pg_dump -U opensheets opensheets_db > backup.sql
+
+# Restaurar backup
+docker compose exec -T db psql -U opensheets -d opensheets_db < backup.sql
+
+# Limpar tudo (containers, volumes, images)
+docker compose down -v
+docker system prune -a
+```
+
+### Customizando Portas
+
+No arquivo `.env`:
+
+```env
+# Porta da aplicação (padrão: 3000)
+APP_PORT=3001
+
+# Porta do banco de dados (padrão: 5432)
+DB_PORT=5433
+```
+
+---
+
+## 🔐 Configuração de Variáveis de Ambiente
+
+Copie o `.env.example` para `.env` e configure:
+
+### Variáveis Obrigatórias
+
+```env
+# === Database ===
+DATABASE_URL=postgresql://opensheets:opensheets_dev_password@localhost:5432/opensheets_db
+DB_PROVIDER=local  # ou "remote"
+
+# === Better Auth ===
+# Gere com: openssl rand -base64 32
+BETTER_AUTH_SECRET=seu-secret-super-secreto-aqui
+BETTER_AUTH_URL=http://localhost:3000
+```
+
+### Variáveis Opcionais
+
+#### PostgreSQL (customização)
+
+```env
+POSTGRES_USER=opensheets
+POSTGRES_PASSWORD=opensheets_dev_password
+POSTGRES_DB=opensheets_db
+```
+
+#### Portas (customização)
+
+```env
+APP_PORT=3000
+DB_PORT=5432
+```
+
+#### OAuth Providers
+
+```env
+GOOGLE_CLIENT_ID=seu-google-client-id
+GOOGLE_CLIENT_SECRET=seu-google-client-secret
+
+GITHUB_CLIENT_ID=seu-github-client-id
+GITHUB_CLIENT_SECRET=seu-github-client-secret
+```
+
+#### Email (Resend)
+
+```env
+RESEND_API_KEY=re_seu_api_key
+EMAIL_FROM=noreply@seudominio.com
+```
+
+#### AI Providers
+
+```env
+ANTHROPIC_API_KEY=sk-ant-...
+OPENAI_API_KEY=sk-...
+GOOGLE_GENERATIVE_AI_API_KEY=...
+OPENROUTER_API_KEY=sk-or-...
+```
+
+### Gerando Secrets
+
+```bash
+# BETTER_AUTH_SECRET
+openssl rand -base64 32
+
+# Ou use o script automático
+pnpm env:setup
+```
+
+---
+
+## 🗄️ Banco de Dados
+
+### Escolhendo entre Local e Remoto
+
+| Modo       | Quando usar                           | Como configurar                        |
+| ---------- | ------------------------------------- | -------------------------------------- |
+| **Local**  | Desenvolvimento, testes, prototipagem | `DB_PROVIDER=local` + Docker           |
+| **Remoto** | Produção, deploy, banco gerenciado    | `DB_PROVIDER=remote` + URL do provider |
+
+### Drizzle ORM
+
+#### Schema Definition
+
+Os schemas ficam em `/db/schema.ts`:
+
+```typescript
+import { pgTable, serial, text, timestamp } from "drizzle-orm/pg-core";
+
+export const users = pgTable("users", {
+  id: serial("id").primaryKey(),
+  email: text("email").notNull().unique(),
+  name: text("name"),
+  createdAt: timestamp("created_at").defaultNow(),
+});
+```
+
+#### Gerando Migrations
+
+```bash
+# Após alterar /db/schema.ts
+pnpm db:generate
+
+# Aplica migrations
+pnpm db:migrate
+
+# Ou push direto (dev only)
+pnpm db:push
+```
+
+#### Drizzle Studio
+
+Interface visual para explorar e editar dados:
+
+```bash
+pnpm db:studio
+```
+
+Abre em: `https://local.drizzle.studio`
+
+### Migrations Automáticas (Docker)
+
+No `docker-compose.yml`, migrations rodam automaticamente:
+
+```yaml
+command:
+  - |
+    echo "📦 Rodando migrations..."
+    pnpm db:push
+
+    echo "✅ Iniciando aplicação..."
+    node server.js
+```
+
+### Backup e Restore
+
+```bash
+# Backup (banco local Docker)
+docker compose exec db pg_dump -U opensheets opensheets_db > backup_$(date +%Y%m%d).sql
+
+# Backup (banco remoto)
+pg_dump $DATABASE_URL > backup.sql
+
+# Restore (Docker)
+docker compose exec -T db psql -U opensheets -d opensheets_db < backup.sql
+
+# Restore (remoto)
+psql $DATABASE_URL < backup.sql
+```
+
+---
+
+## 🏗️ Arquitetura
+
+### Estrutura de Pastas
+
+```
+opensheets/
+├── app/                      # Next.js App Router
+│   ├── api/                  # API Routes
+│   │   ├── auth/            # Better Auth endpoints
+│   │   └── health/          # Health check
+│   ├── (dashboard)/         # Protected routes (com auth)
+│   └── layout.tsx           # Root layout
+│
+├── components/              # React Components
+│   ├── ui/                  # shadcn/ui components
+│   └── ...                  # Feature components
+│
+├── lib/                     # Shared utilities
+│   ├── db.ts               # Drizzle client
+│   ├── auth.ts             # Better Auth server
+│   └── auth-client.ts      # Better Auth client
+│
+├── db/                      # Drizzle schema
+│   └── schema.ts           # Database schema
+│
+├── drizzle/                 # Generated migrations
+│   └── migrations/
+│
+├── hooks/                   # Custom React hooks
+├── public/                  # Static assets
+├── scripts/                 # Utility scripts
+│   ├── setup-env.sh        # Env setup automation
+│   └── postgres/init.sql   # PostgreSQL init script
+│
+├── docker/                  # Docker configs
+│   └── postgres/init.sql
+│
+├── Dockerfile              # Production build
+├── docker-compose.yml      # Docker orchestration
+├── next.config.ts          # Next.js config
+├── drizzle.config.ts       # Drizzle ORM config
+├── tailwind.config.ts      # Tailwind config
+└── tsconfig.json           # TypeScript config
+```
+
+### Fluxo de Autenticação
+
+```
+1. Usuário acessa rota protegida
+   ↓
+2. middleware.ts verifica sessão (Better Auth)
+   ↓
+3. Se não autenticado → redirect /auth
+   ↓
+4. Usuário faz login (OAuth ou email)
+   ↓
+5. Better Auth valida e cria sessão
+   ↓
+6. Cookie de sessão é salvo
+   ↓
+7. Usuário acessa rota protegida ✅
+```
+
+### Fluxo de Build (Docker)
+
+```
+1. Stage deps: Instala dependências
+   ↓
+2. Stage builder: Builda Next.js (standalone)
+   ↓
+3. Stage runner: Copia apenas build + deps prod
+   ↓
+4. Container final: ~200MB (otimizado)
+```
+
+---
+
+## 🆘 Troubleshooting
+
+### Erro: "DATABASE_URL env variable is not set"
+
+**Causa:** Arquivo `.env` não existe ou `DATABASE_URL` não configurado
+
+**Solução:**
+
+```bash
+cp .env.example .env
+# Edite .env e configure DATABASE_URL
+```
+
+---
+
+### Container do app não conecta ao banco
+
+**Causa:** `DATABASE_URL` usa `localhost` em vez de `db`
+
+**Solução:**
+
+Para Docker, use o **nome do serviço**:
+
+```env
+# ❌ Errado (localhost não funciona dentro do container)
+DATABASE_URL=postgresql://opensheets:senha@localhost:5432/opensheets_db
+
+# ✅ Correto (usa nome do serviço Docker)
+DATABASE_URL=postgresql://opensheets:senha@db:5432/opensheets_db
+```
+
+Para desenvolvimento local (sem Docker app):
+
+```env
+# ✅ Correto (app roda local, banco em Docker)
+DATABASE_URL=postgresql://opensheets:senha@localhost:5432/opensheets_db
+```
+
+**Verifique o status do banco:**
+
+```bash
+docker compose ps
+docker compose logs db
+```
+
+---
+
+### Porta 3000 ou 5432 já está em uso
+
+**Solução:**
+
+Edite o `.env`:
+
+```env
+APP_PORT=3001
+DB_PORT=5433
+```
+
+Ou pare o processo que está usando:
+
+```bash
+# Descobrir quem usa a porta
+lsof -i :3000
+lsof -i :5432
+
+# Matar processo
+kill -9 <PID>
+```
+
+---
+
+### Migrations não rodam
+
+**Com Docker:**
+
+Migrations rodam automaticamente no startup. Veja logs:
+
+```bash
+pnpm docker:logs:app
+```
+
+Se falharem, rode manualmente:
+
+```bash
+docker compose exec app pnpm db:push
+```
+
+**Sem Docker:**
+
+```bash
+pnpm db:push
+```
+
+---
+
+### Erro: "server.js not found"
+
+**Causa:** Next.js não gerou standalone build
+
+**Solução:**
+
+1. Verifique `next.config.ts`:
+
+```typescript
+const nextConfig: NextConfig = {
+  output: "standalone", // ← Deve estar presente
+};
+```
+
+2. Rebuild:
+
+```bash
+docker compose down
+docker compose up --build
+```
+
+---
+
+### Erro ao atualizar PostgreSQL 16 → 18
+
+**Causa:** Volumes antigos são incompatíveis
+
+**Solução:**
+
+```bash
+# ⚠️ ATENÇÃO: Isso apaga dados do banco local!
+docker compose down -v
+
+# Suba novamente com PostgreSQL 18
+docker compose up --build
+```
+
+**Para preservar dados:**
+
+```bash
+# 1. Backup
+docker compose exec db pg_dumpall -U opensheets > backup.sql
+
+# 2. Limpa volumes
+docker compose down -v
+
+# 3. Sobe PG 18
+docker compose up -d db
+
+# 4. Aguarda (15s)
+sleep 15
+
+# 5. Restaura
+docker compose exec -T db psql -U opensheets -d opensheets_db < backup.sql
+```
+
+---
+
+### Drizzle Studio não abre
+
+**Solução:**
+
+1. Verifique se o banco está rodando:
+
+```bash
+docker compose ps
+```
+
+2. Teste conexão:
+
+```bash
+psql $DATABASE_URL
+```
+
+3. Abra Drizzle Studio:
+
+```bash
+pnpm db:studio
+```
+
+---
+
+### Build do Docker muito lento
+
+**Causa:** Cache não está sendo aproveitado
+
+**Solução:**
+
+1. Use BuildKit:
+
+```bash
+export DOCKER_BUILDKIT=1
+docker compose build
+```
+
+2. Limpe cache antigo:
+
+```bash
+docker builder prune
+```
+
+3. Multi-stage build já otimiza camadas
+
+---
+
+### "Permission denied" ao rodar Docker
+
+**Causa:** Usuário não está no grupo docker
+
+**Solução (Linux):**
+
+```bash
+sudo usermod -aG docker $USER
+newgrp docker
+```
+
+**Solução (Mac/Windows):**
+
+- Docker Desktop deve estar rodando
+- Verifique configurações de permissão
+
+---
+
+### Limpar tudo e começar do zero
+
+```bash
+# Para containers e remove volumes
+docker compose down -v
+
+# Remove images não usadas
+docker system prune -a
+
+# Remove TUDO do Docker (cuidado!)
+docker system prune -a --volumes
+
+# Rebuild do zero
+pnpm docker:up
+```
+
+---
+
+## 🤝 Contribuindo
+
+Contribuições são muito bem-vindas!
+
+### Como contribuir
+
+1. **Fork** o projeto
+2. **Clone** seu fork
+   ```bash
+   git clone https://github.com/seu-usuario/opensheets.git
+   ```
+3. **Crie uma branch** para sua feature
+   ```bash
+   git checkout -b feature/minha-feature
+   ```
+4. **Commit** suas mudanças
+   ```bash
+   git commit -m 'feat: adiciona minha feature'
+   ```
+5. **Push** para a branch
+   ```bash
+   git push origin feature/minha-feature
+   ```
+6. Abra um **Pull Request**
+
+### Padrões
+
+- Use **TypeScript**
+- Siga o **ESLint** configurado
+- Documente **features novas**
+- Use **commits semânticos** (feat, fix, docs, etc)
+
+---
+
+## 📄 Licença
+
+Este projeto é open source e está disponível sob a [Licença MIT](LICENSE).
+
+---
+
+## 🙏 Agradecimentos
+
+- [Next.js](https://nextjs.org/)
+- [Better Auth](https://better-auth.com/)
+- [Drizzle ORM](https://orm.drizzle.team/)
+- [shadcn/ui](https://ui.shadcn.com/)
+- [Vercel](https://vercel.com/)
+
+---
+
+## 📞 Contato
+
+**Desenvolvido por:** Felipe Coutinho
+**GitHub:** [@felipegcoutinho](https://github.com/felipegcoutinho)
+**Repositório:** [opensheets](https://github.com/felipegcoutinho/opensheets)
+
+---
+
+<div align="center">
+
+**⭐ Se este projeto foi útil, considere dar uma estrela!**
+
+Desenvolvido com ❤️ para a comunidade open source
+
+</div>
diff --git a/app/(auth)/login/page.tsx b/app/(auth)/login/page.tsx
new file mode 100644
index 0000000..8e70c5e
--- /dev/null
+++ b/app/(auth)/login/page.tsx
@@ -0,0 +1,11 @@
+import { LoginForm } from "@/components/auth/login-form";
+
+export default function LoginPage() {
+  return (
+    <div className="bg-muted flex min-h-svh flex-col items-center justify-center p-6 md:p-10">
+      <div className="w-full max-w-sm md:max-w-4xl">
+        <LoginForm />
+      </div>
+    </div>
+  );
+}
diff --git a/app/(auth)/signup/page.tsx b/app/(auth)/signup/page.tsx
new file mode 100644
index 0000000..8e4c66e
--- /dev/null
+++ b/app/(auth)/signup/page.tsx
@@ -0,0 +1,11 @@
+import { SignupForm } from "@/components/auth/signup-form";
+
+export default function Page() {
+  return (
+    <div className="bg-muted flex min-h-svh flex-col items-center justify-center p-6 md:p-10">
+      <div className="w-full max-w-sm md:max-w-4xl">
+        <SignupForm />
+      </div>
+    </div>
+  );
+}
diff --git a/app/(dashboard)/ajustes/actions.ts b/app/(dashboard)/ajustes/actions.ts
new file mode 100644
index 0000000..457abda
--- /dev/null
+++ b/app/(dashboard)/ajustes/actions.ts
@@ -0,0 +1,257 @@
+"use server";
+
+import { auth } from "@/lib/auth/config";
+import { db, schema } from "@/lib/db";
+import { eq, and, ne } from "drizzle-orm";
+import { headers } from "next/headers";
+import { revalidatePath } from "next/cache";
+import { z } from "zod";
+
+type ActionResponse<T = void> = {
+  success: boolean;
+  message?: string;
+  error?: string;
+  data?: T;
+};
+
+// Schema de validação
+const updateNameSchema = z.object({
+  firstName: z.string().min(1, "Primeiro nome é obrigatório"),
+  lastName: z.string().min(1, "Sobrenome é obrigatório"),
+});
+
+const updatePasswordSchema = z
+  .object({
+    newPassword: z.string().min(6, "A senha deve ter no mínimo 6 caracteres"),
+    confirmPassword: z.string(),
+  })
+  .refine((data) => data.newPassword === data.confirmPassword, {
+    message: "As senhas não coincidem",
+    path: ["confirmPassword"],
+  });
+
+const updateEmailSchema = z
+  .object({
+    newEmail: z.string().email("E-mail inválido"),
+    confirmEmail: z.string().email("E-mail inválido"),
+  })
+  .refine((data) => data.newEmail === data.confirmEmail, {
+    message: "Os e-mails não coincidem",
+    path: ["confirmEmail"],
+  });
+
+const deleteAccountSchema = z.object({
+  confirmation: z.literal("DELETAR", {
+    errorMap: () => ({ message: 'Você deve digitar "DELETAR" para confirmar' }),
+  }),
+});
+
+// Actions
+
+export async function updateNameAction(
+  data: z.infer<typeof updateNameSchema>
+): Promise<ActionResponse> {
+  try {
+    const session = await auth.api.getSession({
+      headers: await headers(),
+    });
+
+    if (!session?.user?.id) {
+      return {
+        success: false,
+        error: "Não autenticado",
+      };
+    }
+
+    const validated = updateNameSchema.parse(data);
+    const fullName = `${validated.firstName} ${validated.lastName}`;
+
+    await db
+      .update(schema.user)
+      .set({ name: fullName })
+      .where(eq(schema.user.id, session.user.id));
+
+    // Revalidar o layout do dashboard para atualizar a sidebar
+    revalidatePath("/", "layout");
+
+    return {
+      success: true,
+      message: "Nome atualizado com sucesso",
+    };
+  } catch (error) {
+    if (error instanceof z.ZodError) {
+      return {
+        success: false,
+        error: error.errors[0]?.message || "Dados inválidos",
+      };
+    }
+
+    console.error("Erro ao atualizar nome:", error);
+    return {
+      success: false,
+      error: "Erro ao atualizar nome. Tente novamente.",
+    };
+  }
+}
+
+export async function updatePasswordAction(
+  data: z.infer<typeof updatePasswordSchema>
+): Promise<ActionResponse> {
+  try {
+    const session = await auth.api.getSession({
+      headers: await headers(),
+    });
+
+    if (!session?.user?.id || !session?.user?.email) {
+      return {
+        success: false,
+        error: "Não autenticado",
+      };
+    }
+
+    const validated = updatePasswordSchema.parse(data);
+
+    // Usar a API do Better Auth para atualizar a senha
+    try {
+      await auth.api.changePassword({
+        body: {
+          newPassword: validated.newPassword,
+          currentPassword: "", // Better Auth pode não exigir a senha atual dependendo da configuração
+        },
+        headers: await headers(),
+      });
+
+      return {
+        success: true,
+        message: "Senha atualizada com sucesso",
+      };
+    } catch (authError) {
+      console.error("Erro na API do Better Auth:", authError);
+      // Se a API do Better Auth falhar, retornar erro genérico
+      return {
+        success: false,
+        error: "Erro ao atualizar senha. Tente novamente.",
+      };
+    }
+  } catch (error) {
+    if (error instanceof z.ZodError) {
+      return {
+        success: false,
+        error: error.errors[0]?.message || "Dados inválidos",
+      };
+    }
+
+    console.error("Erro ao atualizar senha:", error);
+    return {
+      success: false,
+      error: "Erro ao atualizar senha. Tente novamente.",
+    };
+  }
+}
+
+export async function updateEmailAction(
+  data: z.infer<typeof updateEmailSchema>
+): Promise<ActionResponse> {
+  try {
+    const session = await auth.api.getSession({
+      headers: await headers(),
+    });
+
+    if (!session?.user?.id) {
+      return {
+        success: false,
+        error: "Não autenticado",
+      };
+    }
+
+    const validated = updateEmailSchema.parse(data);
+
+    // Verificar se o e-mail já está em uso por outro usuário
+    const existingUser = await db.query.user.findFirst({
+      where: and(
+        eq(schema.user.email, validated.newEmail),
+        ne(schema.user.id, session.user.id)
+      ),
+    });
+
+    if (existingUser) {
+      return {
+        success: false,
+        error: "Este e-mail já está em uso",
+      };
+    }
+
+    // Atualizar e-mail
+    await db
+      .update(schema.user)
+      .set({
+        email: validated.newEmail,
+        emailVerified: false, // Marcar como não verificado
+      })
+      .where(eq(schema.user.id, session.user.id));
+
+    // Revalidar o layout do dashboard para atualizar a sidebar
+    revalidatePath("/", "layout");
+
+    return {
+      success: true,
+      message:
+        "E-mail atualizado com sucesso. Por favor, verifique seu novo e-mail.",
+    };
+  } catch (error) {
+    if (error instanceof z.ZodError) {
+      return {
+        success: false,
+        error: error.errors[0]?.message || "Dados inválidos",
+      };
+    }
+
+    console.error("Erro ao atualizar e-mail:", error);
+    return {
+      success: false,
+      error: "Erro ao atualizar e-mail. Tente novamente.",
+    };
+  }
+}
+
+export async function deleteAccountAction(
+  data: z.infer<typeof deleteAccountSchema>
+): Promise<ActionResponse> {
+  try {
+    const session = await auth.api.getSession({
+      headers: await headers(),
+    });
+
+    if (!session?.user?.id) {
+      return {
+        success: false,
+        error: "Não autenticado",
+      };
+    }
+
+    // Validar confirmação
+    deleteAccountSchema.parse(data);
+
+    // Deletar todos os dados do usuário em cascade
+    // O schema deve ter as relações configuradas com onDelete: cascade
+    await db.delete(schema.user).where(eq(schema.user.id, session.user.id));
+
+    return {
+      success: true,
+      message: "Conta deletada com sucesso",
+    };
+  } catch (error) {
+    if (error instanceof z.ZodError) {
+      return {
+        success: false,
+        error: error.errors[0]?.message || "Dados inválidos",
+      };
+    }
+
+    console.error("Erro ao deletar conta:", error);
+    return {
+      success: false,
+      error: "Erro ao deletar conta. Tente novamente.",
+    };
+  }
+}
diff --git a/app/(dashboard)/ajustes/layout.tsx b/app/(dashboard)/ajustes/layout.tsx
new file mode 100644
index 0000000..ac0bb2a
--- /dev/null
+++ b/app/(dashboard)/ajustes/layout.tsx
@@ -0,0 +1,23 @@
+import PageDescription from "@/components/page-description";
+import { RiSettingsLine } from "@remixicon/react";
+
+export const metadata = {
+  title: "Ajustes | OpenSheets",
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <section className="space-y-6 px-6">
+      <PageDescription
+        icon={<RiSettingsLine />}
+        title="Ajustes"
+        subtitle="Gerencie informações da conta, segurança e outras opções para otimizar sua experiência."
+      />
+      {children}
+    </section>
+  );
+}
diff --git a/app/(dashboard)/ajustes/page.tsx b/app/(dashboard)/ajustes/page.tsx
new file mode 100644
index 0000000..0296d65
--- /dev/null
+++ b/app/(dashboard)/ajustes/page.tsx
@@ -0,0 +1,85 @@
+import { DeleteAccountForm } from "@/components/ajustes/delete-account-form";
+import { UpdateEmailForm } from "@/components/ajustes/update-email-form";
+import { UpdateNameForm } from "@/components/ajustes/update-name-form";
+import { UpdatePasswordForm } from "@/components/ajustes/update-password-form";
+import { Card } from "@/components/ui/card";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { auth } from "@/lib/auth/config";
+import { headers } from "next/headers";
+import { redirect } from "next/navigation";
+
+export default async function Page() {
+  const session = await auth.api.getSession({
+    headers: await headers(),
+  });
+
+  if (!session?.user) {
+    redirect("/");
+  }
+
+  const userName = session.user.name || "";
+  const userEmail = session.user.email || "";
+
+  return (
+    <div className="max-w-3xl">
+      <Tabs defaultValue="nome" className="w-full">
+        <TabsList className="w-full grid grid-cols-4 mb-2">
+          <TabsTrigger value="nome">Altere seu nome</TabsTrigger>
+          <TabsTrigger value="senha">Alterar senha</TabsTrigger>
+          <TabsTrigger value="email">Alterar e-mail</TabsTrigger>
+          <TabsTrigger value="deletar" className="text-destructive">
+            Deletar conta
+          </TabsTrigger>
+        </TabsList>
+
+        <Card className="p-6">
+          <TabsContent value="nome" className="space-y-4">
+            <div>
+              <h2 className="text-lg font-medium mb-1">Alterar nome</h2>
+              <p className="text-sm text-muted-foreground mb-4">
+                Atualize como seu nome aparece no OpenSheets. Esse nome pode ser
+                exibido em diferentes seções do app e em comunicações.
+              </p>
+            </div>
+            <UpdateNameForm currentName={userName} />
+          </TabsContent>
+
+          <TabsContent value="senha" className="space-y-4">
+            <div>
+              <h2 className="text-lg font-medium mb-1">Alterar senha</h2>
+              <p className="text-sm text-muted-foreground mb-4">
+                Defina uma nova senha para sua conta. Guarde-a em local seguro.
+              </p>
+            </div>
+            <UpdatePasswordForm />
+          </TabsContent>
+
+          <TabsContent value="email" className="space-y-4">
+            <div>
+              <h2 className="text-lg font-medium mb-1">Alterar e-mail</h2>
+              <p className="text-sm text-muted-foreground mb-4">
+                Atualize o e-mail associado à sua conta. Você precisará
+                confirmar os links enviados para o novo e também para o e-mail
+                atual (quando aplicável) para concluir a alteração.
+              </p>
+            </div>
+            <UpdateEmailForm currentEmail={userEmail} />
+          </TabsContent>
+
+          <TabsContent value="deletar" className="space-y-4">
+            <div>
+              <h2 className="text-lg font-medium mb-1 text-destructive">
+                Deletar conta
+              </h2>
+              <p className="text-sm text-muted-foreground mb-4">
+                Ao prosseguir, sua conta e todos os dados associados serão
+                excluídos de forma irreversível.
+              </p>
+            </div>
+            <DeleteAccountForm />
+          </TabsContent>
+        </Card>
+      </Tabs>
+    </div>
+  );
+}
diff --git a/app/(dashboard)/anotacoes/actions.ts b/app/(dashboard)/anotacoes/actions.ts
new file mode 100644
index 0000000..d4646e2
--- /dev/null
+++ b/app/(dashboard)/anotacoes/actions.ts
@@ -0,0 +1,144 @@
+"use server";
+
+import { anotacoes } from "@/db/schema";
+import { type ActionResult, handleActionError } from "@/lib/actions/helpers";
+import { revalidateForEntity } from "@/lib/actions/helpers";
+import { uuidSchema } from "@/lib/schemas/common";
+import { db } from "@/lib/db";
+import { getUser } from "@/lib/auth/server";
+import { and, eq } from "drizzle-orm";
+import { z } from "zod";
+
+const taskSchema = z.object({
+  id: z.string(),
+  text: z.string().min(1, "O texto da tarefa não pode estar vazio."),
+  completed: z.boolean(),
+});
+
+const noteBaseSchema = z.object({
+  title: z
+    .string({ message: "Informe o título da anotação." })
+    .trim()
+    .min(1, "Informe o título da anotação.")
+    .max(30, "O título deve ter no máximo 30 caracteres."),
+  description: z
+    .string({ message: "Informe o conteúdo da anotação." })
+    .trim()
+    .max(350, "O conteúdo deve ter no máximo 350 caracteres.")
+    .optional()
+    .default(""),
+  type: z.enum(["nota", "tarefa"], {
+    message: "O tipo deve ser 'nota' ou 'tarefa'.",
+  }),
+  tasks: z.array(taskSchema).optional().default([]),
+}).refine(
+  (data) => {
+    // Se for nota, a descrição é obrigatória
+    if (data.type === "nota") {
+      return data.description.trim().length > 0;
+    }
+    // Se for tarefa, deve ter pelo menos uma tarefa
+    if (data.type === "tarefa") {
+      return data.tasks && data.tasks.length > 0;
+    }
+    return true;
+  },
+  {
+    message: "Notas precisam de descrição e Tarefas precisam de ao menos uma tarefa.",
+  }
+);
+
+const createNoteSchema = noteBaseSchema;
+const updateNoteSchema = noteBaseSchema.and(z.object({
+  id: uuidSchema("Anotação"),
+}));
+const deleteNoteSchema = z.object({
+  id: uuidSchema("Anotação"),
+});
+
+type NoteCreateInput = z.infer<typeof createNoteSchema>;
+type NoteUpdateInput = z.infer<typeof updateNoteSchema>;
+type NoteDeleteInput = z.infer<typeof deleteNoteSchema>;
+
+export async function createNoteAction(
+  input: NoteCreateInput
+): Promise<ActionResult> {
+  try {
+    const user = await getUser();
+    const data = createNoteSchema.parse(input);
+
+    await db.insert(anotacoes).values({
+      title: data.title,
+      description: data.description,
+      type: data.type,
+      tasks: data.tasks && data.tasks.length > 0 ? JSON.stringify(data.tasks) : null,
+      userId: user.id,
+    });
+
+    revalidateForEntity("anotacoes");
+
+    return { success: true, message: "Anotação criada com sucesso." };
+  } catch (error) {
+    return handleActionError(error);
+  }
+}
+
+export async function updateNoteAction(
+  input: NoteUpdateInput
+): Promise<ActionResult> {
+  try {
+    const user = await getUser();
+    const data = updateNoteSchema.parse(input);
+
+    const [updated] = await db
+      .update(anotacoes)
+      .set({
+        title: data.title,
+        description: data.description,
+        type: data.type,
+        tasks: data.tasks && data.tasks.length > 0 ? JSON.stringify(data.tasks) : null,
+      })
+      .where(and(eq(anotacoes.id, data.id), eq(anotacoes.userId, user.id)))
+      .returning({ id: anotacoes.id });
+
+    if (!updated) {
+      return {
+        success: false,
+        error: "Anotação não encontrada.",
+      };
+    }
+
+    revalidateForEntity("anotacoes");
+
+    return { success: true, message: "Anotação atualizada com sucesso." };
+  } catch (error) {
+    return handleActionError(error);
+  }
+}
+
+export async function deleteNoteAction(
+  input: NoteDeleteInput
+): Promise<ActionResult> {
+  try {
+    const user = await getUser();
+    const data = deleteNoteSchema.parse(input);
+
+    const [deleted] = await db
+      .delete(anotacoes)
+      .where(and(eq(anotacoes.id, data.id), eq(anotacoes.userId, user.id)))
+      .returning({ id: anotacoes.id });
+
+    if (!deleted) {
+      return {
+        success: false,
+        error: "Anotação não encontrada.",
+      };
+    }
+
+    revalidateForEntity("anotacoes");
+
+    return { success: true, message: "Anotação removida com sucesso." };
+  } catch (error) {
+    return handleActionError(error);
+  }
+}
diff --git a/app/(dashboard)/anotacoes/data.ts b/app/(dashboard)/anotacoes/data.ts
new file mode 100644
index 0000000..8128a24
--- /dev/null
+++ b/app/(dashboard)/anotacoes/data.ts
@@ -0,0 +1,48 @@
+import { anotacoes, type Anotacao } from "@/db/schema";
+import { db } from "@/lib/db";
+import { eq } from "drizzle-orm";
+
+export type Task = {
+  id: string;
+  text: string;
+  completed: boolean;
+};
+
+export type NoteData = {
+  id: string;
+  title: string;
+  description: string;
+  type: "nota" | "tarefa";
+  tasks?: Task[];
+  createdAt: string;
+};
+
+export async function fetchNotesForUser(userId: string): Promise<NoteData[]> {
+  const noteRows = await db.query.anotacoes.findMany({
+    where: eq(anotacoes.userId, userId),
+    orderBy: (note: typeof anotacoes.$inferSelect, { desc }: { desc: (field: unknown) => unknown }) => [desc(note.createdAt)],
+  });
+
+  return noteRows.map((note: Anotacao) => {
+    let tasks: Task[] | undefined;
+
+    // Parse tasks if they exist
+    if (note.tasks) {
+      try {
+        tasks = JSON.parse(note.tasks);
+      } catch (error) {
+        console.error("Failed to parse tasks for note", note.id, error);
+        tasks = undefined;
+      }
+    }
+
+    return {
+      id: note.id,
+      title: (note.title ?? "").trim(),
+      description: (note.description ?? "").trim(),
+      type: (note.type ?? "nota") as "nota" | "tarefa",
+      tasks,
+      createdAt: note.createdAt.toISOString(),
+    };
+  });
+}
diff --git a/app/(dashboard)/anotacoes/layout.tsx b/app/(dashboard)/anotacoes/layout.tsx
new file mode 100644
index 0000000..8e1c66b
--- /dev/null
+++ b/app/(dashboard)/anotacoes/layout.tsx
@@ -0,0 +1,23 @@
+import PageDescription from "@/components/page-description";
+import { RiFileListLine } from "@remixicon/react";
+
+export const metadata = {
+  title: "Anotações | OpenSheets",
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <section className="space-y-6 px-6">
+      <PageDescription
+        icon={<RiFileListLine />}
+        title="Notas"
+        subtitle="Gerencie suas anotações e mantenha o controle sobre suas ideias e tarefas."
+      />
+      {children}
+    </section>
+  );
+}
diff --git a/app/(dashboard)/anotacoes/loading.tsx b/app/(dashboard)/anotacoes/loading.tsx
new file mode 100644
index 0000000..7ee612f
--- /dev/null
+++ b/app/(dashboard)/anotacoes/loading.tsx
@@ -0,0 +1,51 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+/**
+ * Loading state para a página de anotações
+ * Layout: Header com botão + Grid de cards de notas
+ */
+export default function AnotacoesLoading() {
+  return (
+    <main className="flex flex-col items-start gap-6">
+      <div className="w-full space-y-6">
+        {/* Header */}
+        <div className="flex items-center justify-between">
+          <Skeleton className="h-8 w-32 rounded-2xl bg-foreground/10" />
+          <Skeleton className="h-10 w-40 rounded-2xl bg-foreground/10" />
+        </div>
+
+        {/* Grid de cards de notas */}
+        <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-2xl border p-4 space-y-3"
+            >
+              {/* Título */}
+              <Skeleton className="h-6 w-3/4 rounded-2xl bg-foreground/10" />
+
+              {/* Conteúdo (3-4 linhas) */}
+              <div className="space-y-2">
+                <Skeleton className="h-4 w-full rounded-2xl bg-foreground/10" />
+                <Skeleton className="h-4 w-full rounded-2xl bg-foreground/10" />
+                <Skeleton className="h-4 w-2/3 rounded-2xl bg-foreground/10" />
+                {i % 2 === 0 && (
+                  <Skeleton className="h-4 w-full rounded-2xl bg-foreground/10" />
+                )}
+              </div>
+
+              {/* Footer com data e ações */}
+              <div className="flex items-center justify-between pt-2 border-t">
+                <Skeleton className="h-3 w-24 rounded-2xl bg-foreground/10" />
+                <div className="flex gap-1">
+                  <Skeleton className="size-8 rounded-2xl bg-foreground/10" />
+                  <Skeleton className="size-8 rounded-2xl bg-foreground/10" />
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </main>
+  );
+}
diff --git a/app/(dashboard)/anotacoes/page.tsx b/app/(dashboard)/anotacoes/page.tsx
new file mode 100644
index 0000000..5dfae8f
--- /dev/null
+++ b/app/(dashboard)/anotacoes/page.tsx
@@ -0,0 +1,14 @@
+import { NotesPage } from "@/components/anotacoes/notes-page";
+import { getUserId } from "@/lib/auth/server";
+import { fetchNotesForUser } from "./data";
+
+export default async function Page() {
+  const userId = await getUserId();
+  const notes = await fetchNotesForUser(userId);
+
+  return (
+    <main className="flex flex-col items-start gap-6">
+      <NotesPage notes={notes} />
+    </main>
+  );
+}
diff --git a/app/(dashboard)/calendario/data.ts b/app/(dashboard)/calendario/data.ts
new file mode 100644
index 0000000..65cfc9c
--- /dev/null
+++ b/app/(dashboard)/calendario/data.ts
@@ -0,0 +1,212 @@
+import { cartoes, lancamentos } from "@/db/schema";
+import {
+  buildOptionSets,
+  buildSluggedFilters,
+  fetchLancamentoFilterSources,
+  mapLancamentosData,
+} from "@/lib/lancamentos/page-helpers";
+import { db } from "@/lib/db";
+import { PAGADOR_ROLE_ADMIN } from "@/lib/pagadores/constants";
+import { and, eq, gte, lte, ne, or } from "drizzle-orm";
+import { getRecentEstablishmentsAction } from "@/app/(dashboard)/lancamentos/actions";
+
+import type { CalendarData, CalendarEvent } from "@/components/calendario/types";
+
+const PAYMENT_METHOD_BOLETO = "Boleto";
+const TRANSACTION_TYPE_TRANSFERENCIA = "Transferência";
+
+const toDateKey = (date: Date) => date.toISOString().slice(0, 10);
+
+const parsePeriod = (period: string) => {
+  const [yearStr, monthStr] = period.split("-");
+  const year = Number.parseInt(yearStr ?? "", 10);
+  const month = Number.parseInt(monthStr ?? "", 10);
+
+  if (Number.isNaN(year) || Number.isNaN(month) || month < 1 || month > 12) {
+    throw new Error(`Período inválido: ${period}`);
+  }
+
+  return { year, monthIndex: month - 1 };
+};
+
+const clampDayInMonth = (year: number, monthIndex: number, day: number) => {
+  const lastDay = new Date(Date.UTC(year, monthIndex + 1, 0)).getUTCDate();
+  if (day < 1) return 1;
+  if (day > lastDay) return lastDay;
+  return day;
+};
+
+const isWithinRange = (value: string | null, start: string, end: string) => {
+  if (!value) return false;
+  return value >= start && value <= end;
+};
+
+type FetchCalendarDataParams = {
+  userId: string;
+  period: string;
+};
+
+export const fetchCalendarData = async ({
+  userId,
+  period,
+}: FetchCalendarDataParams): Promise<CalendarData> => {
+  const { year, monthIndex } = parsePeriod(period);
+  const rangeStart = new Date(Date.UTC(year, monthIndex, 1));
+  const rangeEnd = new Date(Date.UTC(year, monthIndex + 1, 0));
+  const rangeStartKey = toDateKey(rangeStart);
+  const rangeEndKey = toDateKey(rangeEnd);
+
+  const [lancamentoRows, cardRows, filterSources] = await Promise.all([
+    db.query.lancamentos.findMany({
+      where: and(
+        eq(lancamentos.userId, userId),
+        ne(lancamentos.transactionType, TRANSACTION_TYPE_TRANSFERENCIA),
+        or(
+          // Lançamentos cuja data de compra esteja no período do calendário
+          and(
+            gte(lancamentos.purchaseDate, rangeStart),
+            lte(lancamentos.purchaseDate, rangeEnd)
+          ),
+          // Boletos cuja data de vencimento esteja no período do calendário
+          and(
+            eq(lancamentos.paymentMethod, PAYMENT_METHOD_BOLETO),
+            gte(lancamentos.dueDate, rangeStart),
+            lte(lancamentos.dueDate, rangeEnd)
+          ),
+          // Lançamentos de cartão do período (para calcular totais de vencimento)
+          and(
+            eq(lancamentos.period, period),
+            ne(lancamentos.paymentMethod, PAYMENT_METHOD_BOLETO)
+          )
+        )
+      ),
+      with: {
+        pagador: true,
+        conta: true,
+        cartao: true,
+        categoria: true,
+      },
+    }),
+    db.query.cartoes.findMany({
+      where: eq(cartoes.userId, userId),
+    }),
+    fetchLancamentoFilterSources(userId),
+  ]);
+
+  const lancamentosData = mapLancamentosData(lancamentoRows);
+  const events: CalendarEvent[] = [];
+
+  const cardTotals = new Map<string, number>();
+  for (const item of lancamentosData) {
+    if (!item.cartaoId || item.period !== period || item.pagadorRole !== PAGADOR_ROLE_ADMIN) {
+      continue;
+    }
+    const amount = Math.abs(item.amount ?? 0);
+    cardTotals.set(
+      item.cartaoId,
+      (cardTotals.get(item.cartaoId) ?? 0) + amount
+    );
+  }
+
+  for (const item of lancamentosData) {
+    const isBoleto = item.paymentMethod === PAYMENT_METHOD_BOLETO;
+    const isAdminPagador = item.pagadorRole === PAGADOR_ROLE_ADMIN;
+
+    // Para boletos, exibir apenas na data de vencimento e apenas se for pagador admin
+    if (isBoleto) {
+      if (
+        isAdminPagador &&
+        item.dueDate &&
+        isWithinRange(item.dueDate, rangeStartKey, rangeEndKey)
+      ) {
+        events.push({
+          id: `${item.id}:boleto`,
+          type: "boleto",
+          date: item.dueDate,
+          lancamento: item,
+        });
+      }
+    } else {
+      // Para outros tipos de lançamento, exibir na data de compra
+      if (!isAdminPagador) {
+        continue;
+      }
+      const purchaseDateKey = item.purchaseDate.slice(0, 10);
+      if (isWithinRange(purchaseDateKey, rangeStartKey, rangeEndKey)) {
+        events.push({
+          id: item.id,
+          type: "lancamento",
+          date: purchaseDateKey,
+          lancamento: item,
+        });
+      }
+    }
+  }
+
+  // Exibir vencimentos apenas de cartões com lançamentos do pagador admin
+  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 = toDateKey(
+      new Date(Date.UTC(year, monthIndex, normalizedDay))
+    );
+
+    events.push({
+      id: `${card.id}:cartao`,
+      type: "cartao",
+      date: dueDateKey,
+      card: {
+        id: card.id,
+        name: card.name,
+        dueDay: card.dueDay,
+        closingDay: card.closingDay,
+        brand: card.brand ?? null,
+        status: card.status,
+        logo: card.logo ?? null,
+        totalDue: cardTotals.get(card.id) ?? null,
+      },
+    });
+  }
+
+  const typePriority: Record<CalendarEvent["type"], number> = {
+    lancamento: 0,
+    boleto: 1,
+    cartao: 2,
+  };
+
+  events.sort((a, b) => {
+    if (a.date === b.date) {
+      return typePriority[a.type] - typePriority[b.type];
+    }
+    return a.date.localeCompare(b.date);
+  });
+
+  const sluggedFilters = buildSluggedFilters(filterSources);
+  const optionSets = buildOptionSets({
+    ...sluggedFilters,
+    pagadorRows: filterSources.pagadorRows,
+  });
+
+  const estabelecimentos = await getRecentEstablishmentsAction();
+
+  return {
+    events,
+    formOptions: {
+      pagadorOptions: optionSets.pagadorOptions,
+      splitPagadorOptions: optionSets.splitPagadorOptions,
+      defaultPagadorId: optionSets.defaultPagadorId,
+      contaOptions: optionSets.contaOptions,
+      cartaoOptions: optionSets.cartaoOptions,
+      categoriaOptions: optionSets.categoriaOptions,
+      estabelecimentos,
+    },
+  };
+};
diff --git a/app/(dashboard)/calendario/layout.tsx b/app/(dashboard)/calendario/layout.tsx
new file mode 100644
index 0000000..3e1f720
--- /dev/null
+++ b/app/(dashboard)/calendario/layout.tsx
@@ -0,0 +1,23 @@
+import PageDescription from "@/components/page-description";
+import { RiCalendarEventLine } from "@remixicon/react";
+
+export const metadata = {
+  title: "Calendário | OpenSheets",
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <section className="space-y-6 px-6">
+      <PageDescription
+        icon={<RiCalendarEventLine />}
+        title="Calendário"
+        subtitle="Visualize lançamentos, vencimentos de cartões e boletos em um só lugar. Clique em uma data para detalhar ou criar um novo lançamento."
+      />
+      {children}
+    </section>
+  );
+}
diff --git a/app/(dashboard)/calendario/loading.tsx b/app/(dashboard)/calendario/loading.tsx
new file mode 100644
index 0000000..79ad556
--- /dev/null
+++ b/app/(dashboard)/calendario/loading.tsx
@@ -0,0 +1,59 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+/**
+ * Loading state para a página de calendário
+ * Layout: MonthPicker + Grade mensal 7x5/6 com dias e eventos
+ */
+export default function CalendarioLoading() {
+  return (
+    <main className="flex flex-col gap-3">
+      {/* Month Picker placeholder */}
+      <div className="h-[60px] animate-pulse rounded-2xl bg-foreground/10" />
+
+      {/* Calendar Container */}
+      <div className="rounded-2xl border p-4 space-y-4">
+        {/* Cabeçalho com dias da semana */}
+        <div className="grid grid-cols-7 gap-2 mb-4">
+          {["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sáb"].map((day) => (
+            <div key={day} className="text-center">
+              <Skeleton className="h-4 w-12 mx-auto rounded-2xl bg-foreground/10" />
+            </div>
+          ))}
+        </div>
+
+        {/* Grade de dias (6 semanas) */}
+        <div className="grid grid-cols-7 gap-2">
+          {Array.from({ length: 42 }).map((_, i) => (
+            <div
+              key={i}
+              className="min-h-[100px] rounded-2xl border p-2 space-y-2"
+            >
+              {/* Número do dia */}
+              <Skeleton className="h-5 w-6 rounded-2xl bg-foreground/10" />
+
+              {/* Indicadores de eventos (aleatório entre 0-3) */}
+              {i % 3 === 0 && (
+                <div className="space-y-1">
+                  <Skeleton className="h-4 w-full rounded-2xl bg-foreground/10" />
+                  {i % 5 === 0 && (
+                    <Skeleton className="h-4 w-full rounded-2xl bg-foreground/10" />
+                  )}
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+
+        {/* Legenda */}
+        <div className="flex flex-wrap items-center gap-4 pt-4 border-t">
+          {Array.from({ length: 4 }).map((_, i) => (
+            <div key={i} className="flex items-center gap-2">
+              <Skeleton className="size-3 rounded-full bg-foreground/10" />
+              <Skeleton className="h-4 w-20 rounded-2xl bg-foreground/10" />
+            </div>
+          ))}
+        </div>
+      </div>
+    </main>
+  );
+}
diff --git a/app/(dashboard)/calendario/page.tsx b/app/(dashboard)/calendario/page.tsx
new file mode 100644
index 0000000..fa24c4b
--- /dev/null
+++ b/app/(dashboard)/calendario/page.tsx
@@ -0,0 +1,47 @@
+import MonthPicker from "@/components/month-picker/month-picker";
+import { getUserId } from "@/lib/auth/server";
+import {
+  getSingleParam,
+  type ResolvedSearchParams,
+} from "@/lib/lancamentos/page-helpers";
+import { parsePeriodParam } from "@/lib/utils/period";
+
+import { MonthlyCalendar } from "@/components/calendario/monthly-calendar";
+import { fetchCalendarData } from "./data";
+import type { CalendarPeriod } from "@/components/calendario/types";
+
+type PageSearchParams = Promise<ResolvedSearchParams>;
+
+type PageProps = {
+  searchParams?: PageSearchParams;
+};
+
+export default async function Page({ searchParams }: PageProps) {
+  const userId = await getUserId();
+  const resolvedParams = searchParams ? await searchParams : undefined;
+
+  const periodoParam = getSingleParam(resolvedParams, "periodo");
+  const { period, monthName, year } = parsePeriodParam(periodoParam);
+
+  const calendarData = await fetchCalendarData({
+    userId,
+    period,
+  });
+
+  const calendarPeriod: CalendarPeriod = {
+    period,
+    monthName,
+    year,
+  };
+
+  return (
+    <main className="flex flex-col gap-3">
+      <MonthPicker />
+      <MonthlyCalendar
+        period={calendarPeriod}
+        events={calendarData.events}
+        formOptions={calendarData.formOptions}
+      />
+    </main>
+  );
+}
diff --git a/app/(dashboard)/cartoes/[cartaoId]/fatura/actions.ts b/app/(dashboard)/cartoes/[cartaoId]/fatura/actions.ts
new file mode 100644
index 0000000..eb4e70e
--- /dev/null
+++ b/app/(dashboard)/cartoes/[cartaoId]/fatura/actions.ts
@@ -0,0 +1,299 @@
+"use server";
+
+import {
+  cartoes,
+  categorias,
+  faturas,
+  lancamentos,
+  pagadores,
+} from "@/db/schema";
+import { buildInvoicePaymentNote } from "@/lib/accounts/constants";
+import { db } from "@/lib/db";
+import { getUser } from "@/lib/auth/server";
+import {
+  INVOICE_PAYMENT_STATUS,
+  INVOICE_STATUS_VALUES,
+  PERIOD_FORMAT_REGEX,
+  type InvoicePaymentStatus,
+} from "@/lib/faturas";
+import { PAGADOR_ROLE_ADMIN } from "@/lib/pagadores/constants";
+import { and, eq, sql } from "drizzle-orm";
+import { revalidatePath } from "next/cache";
+import { z } from "zod";
+
+const updateInvoicePaymentStatusSchema = z.object({
+  cartaoId: z
+    .string({ message: "Cartão inválido." })
+    .uuid("Cartão inválido."),
+  period: z
+    .string({ message: "Período inválido." })
+    .regex(PERIOD_FORMAT_REGEX, "Período inválido."),
+  status: z.enum(
+    INVOICE_STATUS_VALUES as [InvoicePaymentStatus, ...InvoicePaymentStatus[]]
+  ),
+  paymentDate: z.string().optional(),
+});
+
+type UpdateInvoicePaymentStatusInput = z.infer<
+  typeof updateInvoicePaymentStatusSchema
+>;
+
+type ActionResult =
+  | { success: true; message: string }
+  | { success: false; error: string };
+
+const successMessageByStatus: Record<InvoicePaymentStatus, string> = {
+  [INVOICE_PAYMENT_STATUS.PAID]: "Fatura marcada como paga.",
+  [INVOICE_PAYMENT_STATUS.PENDING]: "Pagamento da fatura foi revertido.",
+};
+
+const formatDecimal = (value: number) =>
+  (Math.round(value * 100) / 100).toFixed(2);
+
+export async function updateInvoicePaymentStatusAction(
+  input: UpdateInvoicePaymentStatusInput
+): Promise<ActionResult> {
+  try {
+    const user = await getUser();
+    const data = updateInvoicePaymentStatusSchema.parse(input);
+
+    await db.transaction(async (tx: typeof db) => {
+      const card = await tx.query.cartoes.findFirst({
+        columns: { id: true, contaId: true, name: true },
+        where: and(eq(cartoes.id, data.cartaoId), eq(cartoes.userId, user.id)),
+      });
+
+      if (!card) {
+        throw new Error("Cartão não encontrado.");
+      }
+
+      const existingInvoice = await tx.query.faturas.findFirst({
+        columns: {
+          id: true,
+        },
+        where: and(
+          eq(faturas.cartaoId, data.cartaoId),
+          eq(faturas.userId, user.id),
+          eq(faturas.period, data.period)
+        ),
+      });
+
+      if (existingInvoice) {
+        await tx
+          .update(faturas)
+          .set({
+            paymentStatus: data.status,
+          })
+          .where(eq(faturas.id, existingInvoice.id));
+      } else {
+        await tx.insert(faturas).values({
+          cartaoId: data.cartaoId,
+          period: data.period,
+          paymentStatus: data.status,
+          userId: user.id,
+        });
+      }
+
+      const shouldMarkAsPaid = data.status === INVOICE_PAYMENT_STATUS.PAID;
+
+      await tx
+        .update(lancamentos)
+        .set({ isSettled: shouldMarkAsPaid })
+        .where(
+          and(
+            eq(lancamentos.userId, user.id),
+            eq(lancamentos.cartaoId, card.id),
+            eq(lancamentos.period, data.period)
+          )
+        );
+
+      const invoiceNote = buildInvoicePaymentNote(card.id, data.period);
+
+      if (shouldMarkAsPaid) {
+        const [adminShareRow] = await tx
+          .select({
+            total: sql<number>`
+              coalesce(
+                sum(
+                  case
+                    when ${lancamentos.transactionType} = 'Despesa' then ${lancamentos.amount}
+                    else 0
+                  end
+                ),
+                0
+              )
+            `,
+          })
+          .from(lancamentos)
+          .leftJoin(pagadores, eq(lancamentos.pagadorId, pagadores.id))
+          .where(
+            and(
+              eq(lancamentos.userId, user.id),
+              eq(lancamentos.cartaoId, card.id),
+              eq(lancamentos.period, data.period),
+              eq(pagadores.role, PAGADOR_ROLE_ADMIN)
+            )
+          );
+
+        const adminShare = Math.abs(Number(adminShareRow?.total ?? 0));
+
+        if (adminShare > 0 && card.contaId) {
+          const adminPagador = await tx.query.pagadores.findFirst({
+            columns: { id: true },
+            where: and(
+              eq(pagadores.userId, user.id),
+              eq(pagadores.role, PAGADOR_ROLE_ADMIN)
+            ),
+          });
+
+          const paymentCategory = await tx.query.categorias.findFirst({
+            columns: { id: true },
+            where: and(
+              eq(categorias.userId, user.id),
+              eq(categorias.name, "Pagamentos")
+            ),
+          });
+
+          if (adminPagador) {
+            // Usar a data customizada ou a data atual como data de pagamento
+            const invoiceDate = data.paymentDate
+              ? new Date(data.paymentDate)
+              : new Date();
+
+            const amount = `-${formatDecimal(adminShare)}`;
+            const payload = {
+              condition: "À vista",
+              name: `Pagamento fatura - ${card.name}`,
+              paymentMethod: "Pix",
+              note: invoiceNote,
+              amount,
+              purchaseDate: invoiceDate,
+              transactionType: "Despesa" as const,
+              period: data.period,
+              isSettled: true,
+              userId: user.id,
+              contaId: card.contaId,
+              categoriaId: paymentCategory?.id ?? null,
+              pagadorId: adminPagador.id,
+            };
+
+            const existingPayment = await tx.query.lancamentos.findFirst({
+              columns: { id: true },
+              where: and(
+                eq(lancamentos.userId, user.id),
+                eq(lancamentos.note, invoiceNote)
+              ),
+            });
+
+            if (existingPayment) {
+              await tx
+                .update(lancamentos)
+                .set(payload)
+                .where(eq(lancamentos.id, existingPayment.id));
+            } else {
+              await tx.insert(lancamentos).values(payload);
+            }
+          }
+        }
+      } else {
+        await tx
+          .delete(lancamentos)
+          .where(
+            and(
+              eq(lancamentos.userId, user.id),
+              eq(lancamentos.note, invoiceNote)
+            )
+          );
+      }
+    });
+
+    revalidatePath(`/cartoes/${data.cartaoId}/fatura`);
+    revalidatePath("/cartoes");
+    revalidatePath("/contas");
+
+    return { success: true, message: successMessageByStatus[data.status] };
+  } catch (error) {
+    if (error instanceof z.ZodError) {
+      return {
+        success: false,
+        error: error.issues[0]?.message ?? "Dados inválidos.",
+      };
+    }
+
+    return {
+      success: false,
+      error: error instanceof Error ? error.message : "Erro inesperado.",
+    };
+  }
+}
+
+const updatePaymentDateSchema = z.object({
+  cartaoId: z
+    .string({ message: "Cartão inválido." })
+    .uuid("Cartão inválido."),
+  period: z
+    .string({ message: "Período inválido." })
+    .regex(PERIOD_FORMAT_REGEX, "Período inválido."),
+  paymentDate: z.string({ message: "Data de pagamento inválida." }),
+});
+
+type UpdatePaymentDateInput = z.infer<typeof updatePaymentDateSchema>;
+
+export async function updatePaymentDateAction(
+  input: UpdatePaymentDateInput
+): Promise<ActionResult> {
+  try {
+    const user = await getUser();
+    const data = updatePaymentDateSchema.parse(input);
+
+    await db.transaction(async (tx: typeof db) => {
+      const card = await tx.query.cartoes.findFirst({
+        columns: { id: true },
+        where: and(eq(cartoes.id, data.cartaoId), eq(cartoes.userId, user.id)),
+      });
+
+      if (!card) {
+        throw new Error("Cartão não encontrado.");
+      }
+
+      const invoiceNote = buildInvoicePaymentNote(card.id, data.period);
+
+      const existingPayment = await tx.query.lancamentos.findFirst({
+        columns: { id: true },
+        where: and(
+          eq(lancamentos.userId, user.id),
+          eq(lancamentos.note, invoiceNote)
+        ),
+      });
+
+      if (!existingPayment) {
+        throw new Error("Pagamento não encontrado.");
+      }
+
+      await tx
+        .update(lancamentos)
+        .set({
+          purchaseDate: new Date(data.paymentDate),
+        })
+        .where(eq(lancamentos.id, existingPayment.id));
+    });
+
+    revalidatePath(`/cartoes/${data.cartaoId}/fatura`);
+    revalidatePath("/cartoes");
+    revalidatePath("/contas");
+
+    return { success: true, message: "Data de pagamento atualizada." };
+  } catch (error) {
+    if (error instanceof z.ZodError) {
+      return {
+        success: false,
+        error: error.issues[0]?.message ?? "Dados inválidos.",
+      };
+    }
+
+    return {
+      success: false,
+      error: error instanceof Error ? error.message : "Erro inesperado.",
+    };
+  }
+}
diff --git a/app/(dashboard)/cartoes/[cartaoId]/fatura/data.ts b/app/(dashboard)/cartoes/[cartaoId]/fatura/data.ts
new file mode 100644
index 0000000..bf4ec97
--- /dev/null
+++ b/app/(dashboard)/cartoes/[cartaoId]/fatura/data.ts
@@ -0,0 +1,104 @@
+import { cartoes, faturas, lancamentos } from "@/db/schema";
+import { buildInvoicePaymentNote } from "@/lib/accounts/constants";
+import { db } from "@/lib/db";
+import {
+  INVOICE_PAYMENT_STATUS,
+  type InvoicePaymentStatus,
+} from "@/lib/faturas";
+import { and, eq, sum } from "drizzle-orm";
+
+const toNumber = (value: string | number | null | undefined) => {
+  if (typeof value === "number") {
+    return value;
+  }
+  if (value === null || value === undefined) {
+    return 0;
+  }
+  const parsed = Number(value);
+  return Number.isNaN(parsed) ? 0 : parsed;
+};
+
+export async function fetchCardData(userId: string, cartaoId: string) {
+  const card = await db.query.cartoes.findFirst({
+    columns: {
+      id: true,
+      name: true,
+      brand: true,
+      closingDay: true,
+      dueDay: true,
+      logo: true,
+      limit: true,
+      status: true,
+      note: true,
+      contaId: true,
+    },
+    where: and(eq(cartoes.id, cartaoId), eq(cartoes.userId, userId)),
+  });
+
+  return card;
+}
+
+export async function fetchInvoiceData(
+  userId: string,
+  cartaoId: string,
+  selectedPeriod: string
+): Promise<{
+  totalAmount: number;
+  invoiceStatus: InvoicePaymentStatus;
+  paymentDate: Date | null;
+}> {
+  const [invoiceRow, totalRow] = await Promise.all([
+    db.query.faturas.findFirst({
+      columns: {
+        id: true,
+        period: true,
+        paymentStatus: true,
+      },
+      where: and(
+        eq(faturas.cartaoId, cartaoId),
+        eq(faturas.userId, userId),
+        eq(faturas.period, selectedPeriod)
+      ),
+    }),
+    db
+      .select({ totalAmount: sum(lancamentos.amount) })
+      .from(lancamentos)
+      .where(
+        and(
+          eq(lancamentos.userId, userId),
+          eq(lancamentos.cartaoId, cartaoId),
+          eq(lancamentos.period, selectedPeriod)
+        )
+      ),
+  ]);
+
+  const totalAmount = toNumber(totalRow[0]?.totalAmount);
+  const isInvoiceStatus = (
+    value: string | null | undefined
+  ): value is InvoicePaymentStatus =>
+    !!value && ["pendente", "pago"].includes(value);
+
+  const invoiceStatus = isInvoiceStatus(invoiceRow?.paymentStatus)
+    ? invoiceRow?.paymentStatus
+    : INVOICE_PAYMENT_STATUS.PENDING;
+
+  // Buscar data do pagamento se a fatura estiver paga
+  let paymentDate: Date | null = null;
+  if (invoiceStatus === INVOICE_PAYMENT_STATUS.PAID) {
+    const invoiceNote = buildInvoicePaymentNote(cartaoId, selectedPeriod);
+    const paymentLancamento = await db.query.lancamentos.findFirst({
+      columns: {
+        purchaseDate: true,
+      },
+      where: and(
+        eq(lancamentos.userId, userId),
+        eq(lancamentos.note, invoiceNote)
+      ),
+    });
+    paymentDate = paymentLancamento?.purchaseDate
+      ? new Date(paymentLancamento.purchaseDate)
+      : null;
+  }
+
+  return { totalAmount, invoiceStatus, paymentDate };
+}
diff --git a/app/(dashboard)/cartoes/[cartaoId]/fatura/loading.tsx b/app/(dashboard)/cartoes/[cartaoId]/fatura/loading.tsx
new file mode 100644
index 0000000..6af1b25
--- /dev/null
+++ b/app/(dashboard)/cartoes/[cartaoId]/fatura/loading.tsx
@@ -0,0 +1,41 @@
+import {
+  FilterSkeleton,
+  InvoiceSummaryCardSkeleton,
+  TransactionsTableSkeleton,
+} from "@/components/skeletons";
+import { Skeleton } from "@/components/ui/skeleton";
+
+/**
+ * Loading state para a página de fatura de cartão
+ * Layout: MonthPicker + InvoiceSummaryCard + Filtros + Tabela de lançamentos
+ */
+export default function FaturaLoading() {
+  return (
+    <main className="flex flex-col gap-6">
+      {/* Month Picker placeholder */}
+      <div className="h-[60px] animate-pulse rounded-2xl bg-foreground/10" />
+
+      {/* Invoice Summary Card */}
+      <section className="flex flex-col gap-4">
+        <InvoiceSummaryCardSkeleton />
+      </section>
+
+      {/* Seção de lançamentos */}
+      <section className="flex flex-col gap-4">
+        <div className="space-y-6">
+          {/* Header */}
+          <div className="flex items-center justify-between">
+            <Skeleton className="h-8 w-48 rounded-2xl bg-foreground/10" />
+            <Skeleton className="h-10 w-40 rounded-2xl bg-foreground/10" />
+          </div>
+
+          {/* Filtros */}
+          <FilterSkeleton />
+
+          {/* Tabela */}
+          <TransactionsTableSkeleton />
+        </div>
+      </section>
+    </main>
+  );
+}
diff --git a/app/(dashboard)/cartoes/[cartaoId]/fatura/page.tsx b/app/(dashboard)/cartoes/[cartaoId]/fatura/page.tsx
new file mode 100644
index 0000000..56fa0c5
--- /dev/null
+++ b/app/(dashboard)/cartoes/[cartaoId]/fatura/page.tsx
@@ -0,0 +1,199 @@
+import { CardDialog } from "@/components/cartoes/card-dialog";
+import type { Card } from "@/components/cartoes/types";
+import { InvoiceSummaryCard } from "@/components/faturas/invoice-summary-card";
+import { LancamentosPage as LancamentosSection } from "@/components/lancamentos/page/lancamentos-page";
+import MonthPicker from "@/components/month-picker/month-picker";
+import { Button } from "@/components/ui/button";
+import { lancamentos, type Conta } from "@/db/schema";
+import { db } from "@/lib/db";
+import { getUserId } from "@/lib/auth/server";
+import {
+  buildLancamentoWhere,
+  buildOptionSets,
+  buildSluggedFilters,
+  buildSlugMaps,
+  extractLancamentoSearchFilters,
+  fetchLancamentoFilterSources,
+  getSingleParam,
+  mapLancamentosData,
+  type ResolvedSearchParams,
+} from "@/lib/lancamentos/page-helpers";
+import { loadLogoOptions } from "@/lib/logo/options";
+import { parsePeriodParam } from "@/lib/utils/period";
+import { RiPencilLine } from "@remixicon/react";
+import { and, desc } from "drizzle-orm";
+import { notFound } from "next/navigation";
+import { fetchCardData, fetchInvoiceData } from "./data";
+
+type PageSearchParams = Promise<ResolvedSearchParams>;
+
+type PageProps = {
+  params: Promise<{ cartaoId: string }>;
+  searchParams?: PageSearchParams;
+};
+
+export default async function Page({ params, searchParams }: PageProps) {
+  const { cartaoId } = await params;
+  const userId = await getUserId();
+  const resolvedSearchParams = searchParams ? await searchParams : undefined;
+
+  const periodoParamRaw = getSingleParam(resolvedSearchParams, "periodo");
+  const {
+    period: selectedPeriod,
+    monthName,
+    year,
+  } = parsePeriodParam(periodoParamRaw);
+
+  const searchFilters = extractLancamentoSearchFilters(resolvedSearchParams);
+
+  const card = await fetchCardData(userId, cartaoId);
+
+  if (!card) {
+    notFound();
+  }
+
+  const [filterSources, logoOptions, invoiceData] = await Promise.all([
+    fetchLancamentoFilterSources(userId),
+    loadLogoOptions(),
+    fetchInvoiceData(userId, cartaoId, selectedPeriod),
+  ]);
+  const sluggedFilters = buildSluggedFilters(filterSources);
+  const slugMaps = buildSlugMaps(sluggedFilters);
+
+  const filters = buildLancamentoWhere({
+    userId,
+    period: selectedPeriod,
+    filters: searchFilters,
+    slugMaps,
+    cardId: card.id,
+  });
+
+  const lancamentoRows = await db.query.lancamentos.findMany({
+    where: and(...filters),
+    with: {
+      pagador: true,
+      conta: true,
+      cartao: true,
+      categoria: true,
+    },
+    orderBy: desc(lancamentos.purchaseDate),
+  });
+
+  const lancamentosData = mapLancamentosData(lancamentoRows);
+
+  const {
+    pagadorOptions,
+    splitPagadorOptions,
+    defaultPagadorId,
+    contaOptions,
+    cartaoOptions,
+    categoriaOptions,
+    pagadorFilterOptions,
+    categoriaFilterOptions,
+    contaCartaoFilterOptions,
+  } = buildOptionSets({
+    ...sluggedFilters,
+    pagadorRows: filterSources.pagadorRows,
+    limitCartaoId: card.id,
+  });
+
+  const accountOptions = filterSources.contaRows.map((conta: Conta) => ({
+    id: conta.id,
+    name: conta.name ?? "Conta",
+  }));
+
+  const contaName =
+    filterSources.contaRows.find((conta: Conta) => conta.id === card.contaId)
+      ?.name ?? "Conta";
+
+  const cardDialogData: Card = {
+    id: card.id,
+    name: card.name,
+    brand: card.brand ?? "",
+    status: card.status ?? "",
+    closingDay: card.closingDay,
+    dueDay: card.dueDay,
+    note: card.note ?? null,
+    logo: card.logo,
+    limit:
+      card.limit !== null && card.limit !== undefined
+        ? Number(card.limit)
+        : null,
+    contaId: card.contaId,
+    contaName,
+    limitInUse: null,
+    limitAvailable: null,
+  };
+
+  const { totalAmount, invoiceStatus, paymentDate } = invoiceData;
+  const limitAmount =
+    card.limit !== null && card.limit !== undefined ? Number(card.limit) : null;
+
+  const periodLabel = `${monthName.charAt(0).toUpperCase()}${monthName.slice(
+    1
+  )} de ${year}`;
+
+  return (
+    <main className="flex flex-col gap-6">
+      <MonthPicker />
+
+      <section className="flex flex-col gap-4">
+        <InvoiceSummaryCard
+          cartaoId={card.id}
+          period={selectedPeriod}
+          cardName={card.name}
+          cardBrand={card.brand ?? null}
+          cardStatus={card.status ?? null}
+          closingDay={card.closingDay}
+          dueDay={card.dueDay}
+          periodLabel={periodLabel}
+          totalAmount={totalAmount}
+          limitAmount={limitAmount}
+          invoiceStatus={invoiceStatus}
+          paymentDate={paymentDate}
+          logo={card.logo}
+          actions={
+            <CardDialog
+              mode="update"
+              card={cardDialogData}
+              logoOptions={logoOptions}
+              accounts={accountOptions}
+              trigger={
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon-sm"
+                  className="text-muted-foreground hover:text-foreground"
+                  aria-label="Editar cartão"
+                >
+                  <RiPencilLine className="size-4" />
+                </Button>
+              }
+            />
+          }
+        />
+      </section>
+
+      <section className="flex flex-col gap-4">
+        <LancamentosSection
+          lancamentos={lancamentosData}
+          pagadorOptions={pagadorOptions}
+          splitPagadorOptions={splitPagadorOptions}
+          defaultPagadorId={defaultPagadorId}
+          contaOptions={contaOptions}
+          cartaoOptions={cartaoOptions}
+          categoriaOptions={categoriaOptions}
+          pagadorFilterOptions={pagadorFilterOptions}
+          categoriaFilterOptions={categoriaFilterOptions}
+          contaCartaoFilterOptions={contaCartaoFilterOptions}
+          selectedPeriod={selectedPeriod}
+          allowCreate
+          defaultCartaoId={card.id}
+          defaultPaymentMethod="Cartão de crédito"
+          lockCartaoSelection
+          lockPaymentMethod
+        />
+      </section>
+    </main>
+  );
+}
diff --git a/app/(dashboard)/cartoes/actions.ts b/app/(dashboard)/cartoes/actions.ts
new file mode 100644
index 0000000..233a3c6
--- /dev/null
+++ b/app/(dashboard)/cartoes/actions.ts
@@ -0,0 +1,165 @@
+"use server";
+
+import { cartoes, contas } from "@/db/schema";
+import { type ActionResult, handleActionError } from "@/lib/actions/helpers";
+import { revalidateForEntity } from "@/lib/actions/helpers";
+import {
+  dayOfMonthSchema,
+  noteSchema,
+  optionalDecimalSchema,
+  uuidSchema,
+} from "@/lib/schemas/common";
+import { formatDecimalForDb } from "@/lib/utils/currency";
+import { normalizeFilePath } from "@/lib/utils/string";
+import { db } from "@/lib/db";
+import { getUser } from "@/lib/auth/server";
+import { and, eq } from "drizzle-orm";
+import { z } from "zod";
+
+const cardBaseSchema = z.object({
+  name: z
+    .string({ message: "Informe o nome do cartão." })
+    .trim()
+    .min(1, "Informe o nome do cartão."),
+  brand: z
+    .string({ message: "Informe a bandeira." })
+    .trim()
+    .min(1, "Informe a bandeira."),
+  status: z
+    .string({ message: "Informe o status do cartão." })
+    .trim()
+    .min(1, "Informe o status do cartão."),
+  closingDay: dayOfMonthSchema,
+  dueDay: dayOfMonthSchema,
+  note: noteSchema,
+  limit: optionalDecimalSchema,
+  logo: z
+    .string({ message: "Selecione um logo." })
+    .trim()
+    .min(1, "Selecione um logo."),
+  contaId: uuidSchema("Conta"),
+});
+
+const createCardSchema = cardBaseSchema;
+const updateCardSchema = cardBaseSchema.extend({
+  id: uuidSchema("Cartão"),
+});
+const deleteCardSchema = z.object({
+  id: uuidSchema("Cartão"),
+});
+
+type CardCreateInput = z.infer<typeof createCardSchema>;
+type CardUpdateInput = z.infer<typeof updateCardSchema>;
+type CardDeleteInput = z.infer<typeof deleteCardSchema>;
+
+async function assertAccountOwnership(userId: string, contaId: string) {
+  const account = await db.query.contas.findFirst({
+    columns: { id: true },
+    where: and(eq(contas.id, contaId), eq(contas.userId, userId)),
+  });
+
+  if (!account) {
+    throw new Error("Conta vinculada não encontrada.");
+  }
+}
+
+export async function createCardAction(
+  input: CardCreateInput
+): Promise<ActionResult> {
+  try {
+    const user = await getUser();
+    const data = createCardSchema.parse(input);
+
+    await assertAccountOwnership(user.id, data.contaId);
+
+    const logoFile = normalizeFilePath(data.logo);
+
+    await db.insert(cartoes).values({
+      name: data.name,
+      brand: data.brand,
+      status: data.status,
+      closingDay: data.closingDay,
+      dueDay: data.dueDay,
+      note: data.note ?? null,
+      limit: formatDecimalForDb(data.limit),
+      logo: logoFile,
+      contaId: data.contaId,
+      userId: user.id,
+    });
+
+    revalidateForEntity("cartoes");
+
+    return { success: true, message: "Cartão criado com sucesso." };
+  } catch (error) {
+    return handleActionError(error);
+  }
+}
+
+export async function updateCardAction(
+  input: CardUpdateInput
+): Promise<ActionResult> {
+  try {
+    const user = await getUser();
+    const data = updateCardSchema.parse(input);
+
+    await assertAccountOwnership(user.id, data.contaId);
+
+    const logoFile = normalizeFilePath(data.logo);
+
+    const [updated] = await db
+      .update(cartoes)
+      .set({
+        name: data.name,
+        brand: data.brand,
+        status: data.status,
+        closingDay: data.closingDay,
+        dueDay: data.dueDay,
+        note: data.note ?? null,
+        limit: formatDecimalForDb(data.limit),
+        logo: logoFile,
+        contaId: data.contaId,
+      })
+      .where(and(eq(cartoes.id, data.id), eq(cartoes.userId, user.id)))
+      .returning();
+
+    if (!updated) {
+      return {
+        success: false,
+        error: "Cartão não encontrado.",
+      };
+    }
+
+    revalidateForEntity("cartoes");
+
+    return { success: true, message: "Cartão atualizado com sucesso." };
+  } catch (error) {
+    return handleActionError(error);
+  }
+}
+
+export async function deleteCardAction(
+  input: CardDeleteInput
+): Promise<ActionResult> {
+  try {
+    const user = await getUser();
+    const data = deleteCardSchema.parse(input);
+
+    const [deleted] = await db
+      .delete(cartoes)
+      .where(and(eq(cartoes.id, data.id), eq(cartoes.userId, user.id)))
+      .returning({ id: cartoes.id });
+
+    if (!deleted) {
+      return {
+        success: false,
+        error: "Cartão não encontrado.",
+      };
+    }
+
+    revalidateForEntity("cartoes");
+
+    return { success: true, message: "Cartão removido com sucesso." };
+  } catch (error) {
+    return handleActionError(error);
+  }
+}
diff --git a/app/(dashboard)/cartoes/data.ts b/app/(dashboard)/cartoes/data.ts
new file mode 100644
index 0000000..5cc4ce4
--- /dev/null
+++ b/app/(dashboard)/cartoes/data.ts
@@ -0,0 +1,110 @@
+import { cartoes, contas, lancamentos } from "@/db/schema";
+import { db } from "@/lib/db";
+import { loadLogoOptions } from "@/lib/logo/options";
+import { and, eq, isNull, or, sql } from "drizzle-orm";
+
+export type CardData = {
+  id: string;
+  name: string;
+  brand: string | null;
+  status: string | null;
+  closingDay: number;
+  dueDay: number;
+  note: string | null;
+  logo: string | null;
+  limit: number | null;
+  limitInUse: number;
+  limitAvailable: number | null;
+  contaId: string;
+  contaName: string;
+};
+
+export type AccountSimple = {
+  id: string;
+  name: string;
+  logo: string | null;
+};
+
+export async function fetchCardsForUser(userId: string): Promise<{
+  cards: CardData[];
+  accounts: AccountSimple[];
+  logoOptions: LogoOption[];
+}> {
+  const [cardRows, accountRows, logoOptions, usageRows] = await Promise.all([
+    db.query.cartoes.findMany({
+      orderBy: (card: typeof cartoes.$inferSelect, { desc }: { desc: (field: unknown) => unknown }) => [desc(card.name)],
+      where: eq(cartoes.userId, userId),
+      with: {
+        conta: {
+          columns: {
+            id: true,
+            name: true,
+          },
+        },
+      },
+    }),
+    db.query.contas.findMany({
+      orderBy: (account: typeof contas.$inferSelect, { desc }: { desc: (field: unknown) => unknown }) => [desc(account.name)],
+      where: eq(contas.userId, userId),
+      columns: {
+        id: true,
+        name: true,
+        logo: true,
+      },
+    }),
+    loadLogoOptions(),
+    db
+      .select({
+        cartaoId: lancamentos.cartaoId,
+        total: sql<number>`coalesce(sum(${lancamentos.amount}), 0)`,
+      })
+      .from(lancamentos)
+      .where(
+        and(
+          eq(lancamentos.userId, userId),
+          or(isNull(lancamentos.isSettled), eq(lancamentos.isSettled, false))
+        )
+      )
+      .groupBy(lancamentos.cartaoId),
+  ]);
+
+  const usageMap = new Map<string, number>();
+  usageRows.forEach((row: { cartaoId: string | null; total: number | null }) => {
+    if (!row.cartaoId) return;
+    usageMap.set(row.cartaoId, Number(row.total ?? 0));
+  });
+
+  const cards = cardRows.map((card) => ({
+    id: card.id,
+    name: card.name,
+    brand: card.brand,
+    status: card.status,
+    closingDay: card.closingDay,
+    dueDay: card.dueDay,
+    note: card.note,
+    logo: card.logo,
+    limit: card.limit ? Number(card.limit) : null,
+    limitInUse: (() => {
+      const total = usageMap.get(card.id) ?? 0;
+      return total < 0 ? Math.abs(total) : 0;
+    })(),
+    limitAvailable: (() => {
+      if (!card.limit) {
+        return null;
+      }
+      const total = usageMap.get(card.id) ?? 0;
+      const inUse = total < 0 ? Math.abs(total) : 0;
+      return Math.max(Number(card.limit) - inUse, 0);
+    })(),
+    contaId: card.contaId,
+    contaName: card.conta?.name ?? "Conta não encontrada",
+  }));
+
+  const accounts = accountRows.map((account) => ({
+    id: account.id,
+    name: account.name,
+    logo: account.logo,
+  }));
+
+  return { cards, accounts, logoOptions };
+}
diff --git a/app/(dashboard)/cartoes/layout.tsx b/app/(dashboard)/cartoes/layout.tsx
new file mode 100644
index 0000000..afb9b02
--- /dev/null
+++ b/app/(dashboard)/cartoes/layout.tsx
@@ -0,0 +1,25 @@
+import PageDescription from "@/components/page-description";
+import { RiBankCardLine } from "@remixicon/react";
+
+export const metadata = {
+  title: "Cartões | OpenSheets",
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <section className="space-y-6 px-6">
+      <PageDescription
+        icon={<RiBankCardLine />}
+        title="Cartões"
+        subtitle="Acompanhe todas os cartões do mês selecionado incluindo faturas, limites
+        e transações previstas. Use o seletor abaixo para navegar pelos meses e
+        visualizar as movimentações correspondentes."
+      />
+      {children}
+    </section>
+  );
+}
diff --git a/app/(dashboard)/cartoes/loading.tsx b/app/(dashboard)/cartoes/loading.tsx
new file mode 100644
index 0000000..bba11ef
--- /dev/null
+++ b/app/(dashboard)/cartoes/loading.tsx
@@ -0,0 +1,33 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+/**
+ * Loading state para a página de cartões
+ */
+export default function CartoesLoading() {
+  return (
+    <main className="flex flex-col gap-6">
+      <div className="space-y-6">
+        {/* Header */}
+        <div className="flex items-center justify-between">
+          <Skeleton className="h-8 w-32 rounded-2xl bg-foreground/10" />
+          <Skeleton className="h-10 w-40 rounded-2xl bg-foreground/10" />
+        </div>
+
+        {/* Grid de cartões */}
+        <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-2xl border p-6 space-y-4">
+              <div className="flex items-center justify-between">
+                <Skeleton className="size-10 rounded-2xl bg-foreground/10" />
+                <Skeleton className="h-8 w-16 rounded-2xl bg-foreground/10" />
+              </div>
+              <Skeleton className="h-6 w-32 rounded-2xl bg-foreground/10" />
+              <Skeleton className="h-4 w-full rounded-2xl bg-foreground/10" />
+              <Skeleton className="h-4 w-24 rounded-2xl bg-foreground/10" />
+            </div>
+          ))}
+        </div>
+      </div>
+    </main>
+  );
+}
diff --git a/app/(dashboard)/cartoes/page.tsx b/app/(dashboard)/cartoes/page.tsx
new file mode 100644
index 0000000..385570c
--- /dev/null
+++ b/app/(dashboard)/cartoes/page.tsx
@@ -0,0 +1,14 @@
+import { CardsPage } from "@/components/cartoes/cards-page";
+import { getUserId } from "@/lib/auth/server";
+import { fetchCardsForUser } from "./data";
+
+export default async function Page() {
+  const userId = await getUserId();
+  const { cards, accounts, logoOptions } = await fetchCardsForUser(userId);
+
+  return (
+    <main className="flex flex-col items-start gap-6">
+      <CardsPage cards={cards} accounts={accounts} logoOptions={logoOptions} />
+    </main>
+  );
+}
diff --git a/app/(dashboard)/categorias/[categoryId]/page.tsx b/app/(dashboard)/categorias/[categoryId]/page.tsx
new file mode 100644
index 0000000..d99e722
--- /dev/null
+++ b/app/(dashboard)/categorias/[categoryId]/page.tsx
@@ -0,0 +1,115 @@
+import { getRecentEstablishmentsAction } from "@/app/(dashboard)/lancamentos/actions";
+import { CategoryDetailHeader } from "@/components/categorias/category-detail-header";
+import { LancamentosPage } from "@/components/lancamentos/page/lancamentos-page";
+import MonthPicker from "@/components/month-picker/month-picker";
+import { fetchCategoryDetails } from "@/lib/dashboard/categories/category-details";
+import { getUserId } from "@/lib/auth/server";
+import {
+  buildOptionSets,
+  buildSluggedFilters,
+  fetchLancamentoFilterSources,
+} from "@/lib/lancamentos/page-helpers";
+import { parsePeriodParam } from "@/lib/utils/period";
+import { notFound } from "next/navigation";
+
+type PageSearchParams = Promise<Record<string, string | string[] | undefined>>;
+
+type PageProps = {
+  params: Promise<{ categoryId: string }>;
+  searchParams?: PageSearchParams;
+};
+
+const getSingleParam = (
+  params: Record<string, string | string[] | undefined> | undefined,
+  key: string
+) => {
+  const value = params?.[key];
+  if (!value) return null;
+  return Array.isArray(value) ? value[0] ?? null : value;
+};
+
+const formatPeriodLabel = (period: string) => {
+  const [yearStr, monthStr] = period.split("-");
+  const year = Number.parseInt(yearStr ?? "", 10);
+  const monthIndex = Number.parseInt(monthStr ?? "", 10) - 1;
+
+  if (Number.isNaN(year) || Number.isNaN(monthIndex) || monthIndex < 0) {
+    return period;
+  }
+
+  const date = new Date(year, monthIndex, 1);
+  const label = date.toLocaleDateString("pt-BR", {
+    month: "long",
+    year: "numeric",
+  });
+
+  return label.charAt(0).toUpperCase() + label.slice(1);
+};
+
+export default async function Page({ params, searchParams }: PageProps) {
+  const { categoryId } = await params;
+  const userId = await getUserId();
+  const resolvedSearchParams = searchParams ? await searchParams : undefined;
+
+  const periodoParam = getSingleParam(resolvedSearchParams, "periodo");
+  const { period: selectedPeriod } = parsePeriodParam(periodoParam);
+
+  const [detail, filterSources, estabelecimentos] = await Promise.all([
+    fetchCategoryDetails(userId, categoryId, selectedPeriod),
+    fetchLancamentoFilterSources(userId),
+    getRecentEstablishmentsAction(),
+  ]);
+
+  if (!detail) {
+    notFound();
+  }
+
+  const sluggedFilters = buildSluggedFilters(filterSources);
+  const {
+    pagadorOptions,
+    splitPagadorOptions,
+    defaultPagadorId,
+    contaOptions,
+    cartaoOptions,
+    categoriaOptions,
+    pagadorFilterOptions,
+    categoriaFilterOptions,
+    contaCartaoFilterOptions,
+  } = buildOptionSets({
+    ...sluggedFilters,
+    pagadorRows: filterSources.pagadorRows,
+  });
+
+  const currentPeriodLabel = formatPeriodLabel(detail.period);
+  const previousPeriodLabel = formatPeriodLabel(detail.previousPeriod);
+
+  return (
+    <main className="flex flex-col gap-6">
+      <MonthPicker />
+      <CategoryDetailHeader
+        category={detail.category}
+        currentPeriodLabel={currentPeriodLabel}
+        previousPeriodLabel={previousPeriodLabel}
+        currentTotal={detail.currentTotal}
+        previousTotal={detail.previousTotal}
+        percentageChange={detail.percentageChange}
+        transactionCount={detail.transactions.length}
+      />
+      <LancamentosPage
+        lancamentos={detail.transactions}
+        pagadorOptions={pagadorOptions}
+        splitPagadorOptions={splitPagadorOptions}
+        defaultPagadorId={defaultPagadorId}
+        contaOptions={contaOptions}
+        cartaoOptions={cartaoOptions}
+        categoriaOptions={categoriaOptions}
+        pagadorFilterOptions={pagadorFilterOptions}
+        categoriaFilterOptions={categoriaFilterOptions}
+        contaCartaoFilterOptions={contaCartaoFilterOptions}
+        selectedPeriod={detail.period}
+        estabelecimentos={estabelecimentos}
+        allowCreate={true}
+      />
+    </main>
+  );
+}
diff --git a/app/(dashboard)/categorias/actions.ts b/app/(dashboard)/categorias/actions.ts
new file mode 100644
index 0000000..39b33ef
--- /dev/null
+++ b/app/(dashboard)/categorias/actions.ts
@@ -0,0 +1,176 @@
+"use server";
+
+import { categorias } from "@/db/schema";
+import {
+  type ActionResult,
+  handleActionError,
+  revalidateForEntity,
+} from "@/lib/actions/helpers";
+import { getUser } from "@/lib/auth/server";
+import { CATEGORY_TYPES } from "@/lib/categorias/constants";
+import { db } from "@/lib/db";
+import { uuidSchema } from "@/lib/schemas/common";
+import { normalizeIconInput } from "@/lib/utils/string";
+import { and, eq } from "drizzle-orm";
+import { z } from "zod";
+
+const categoryBaseSchema = z.object({
+  name: z
+    .string({ message: "Informe o nome da categoria." })
+    .trim()
+    .min(1, "Informe o nome da categoria."),
+  type: z.enum(CATEGORY_TYPES, {
+    message: "Tipo de categoria inválido.",
+  }),
+  icon: z
+    .string()
+    .trim()
+    .max(100, "O ícone deve ter no máximo 100 caracteres.")
+    .nullish()
+    .transform((value) => normalizeIconInput(value)),
+});
+
+const createCategorySchema = categoryBaseSchema;
+const updateCategorySchema = categoryBaseSchema.extend({
+  id: uuidSchema("Categoria"),
+});
+const deleteCategorySchema = z.object({
+  id: uuidSchema("Categoria"),
+});
+
+type CategoryCreateInput = z.infer<typeof createCategorySchema>;
+type CategoryUpdateInput = z.infer<typeof updateCategorySchema>;
+type CategoryDeleteInput = z.infer<typeof deleteCategorySchema>;
+
+export async function createCategoryAction(
+  input: CategoryCreateInput
+): Promise<ActionResult> {
+  try {
+    const user = await getUser();
+    const data = createCategorySchema.parse(input);
+
+    await db.insert(categorias).values({
+      name: data.name,
+      type: data.type,
+      icon: data.icon,
+      userId: user.id,
+    });
+
+    revalidateForEntity("categorias");
+
+    return { success: true, message: "Categoria criada com sucesso." };
+  } catch (error) {
+    return handleActionError(error);
+  }
+}
+
+export async function updateCategoryAction(
+  input: CategoryUpdateInput
+): Promise<ActionResult> {
+  try {
+    const user = await getUser();
+    const data = updateCategorySchema.parse(input);
+
+    // Buscar categoria antes de atualizar para verificar restrições
+    const categoria = await db.query.categorias.findFirst({
+      columns: { id: true, name: true },
+      where: and(eq(categorias.id, data.id), eq(categorias.userId, user.id)),
+    });
+
+    if (!categoria) {
+      return {
+        success: false,
+        error: "Categoria não encontrada.",
+      };
+    }
+
+    // Bloquear edição das categorias protegidas
+    const categoriasProtegidas = [
+      "Transferência interna",
+      "Saldo inicial",
+      "Pagamentos",
+    ];
+    if (categoriasProtegidas.includes(categoria.name)) {
+      return {
+        success: false,
+        error: `A categoria '${categoria.name}' é protegida e não pode ser editada.`,
+      };
+    }
+
+    const [updated] = await db
+      .update(categorias)
+      .set({
+        name: data.name,
+        type: data.type,
+        icon: data.icon,
+      })
+      .where(and(eq(categorias.id, data.id), eq(categorias.userId, user.id)))
+      .returning();
+
+    if (!updated) {
+      return {
+        success: false,
+        error: "Categoria não encontrada.",
+      };
+    }
+
+    revalidateForEntity("categorias");
+
+    return { success: true, message: "Categoria atualizada com sucesso." };
+  } catch (error) {
+    return handleActionError(error);
+  }
+}
+
+export async function deleteCategoryAction(
+  input: CategoryDeleteInput
+): Promise<ActionResult> {
+  try {
+    const user = await getUser();
+    const data = deleteCategorySchema.parse(input);
+
+    // Buscar categoria antes de deletar para verificar restrições
+    const categoria = await db.query.categorias.findFirst({
+      columns: { id: true, name: true },
+      where: and(eq(categorias.id, data.id), eq(categorias.userId, user.id)),
+    });
+
+    if (!categoria) {
+      return {
+        success: false,
+        error: "Categoria não encontrada.",
+      };
+    }
+
+    // Bloquear remoção das categorias protegidas
+    const categoriasProtegidas = [
+      "Transferência interna",
+      "Saldo inicial",
+      "Pagamentos",
+    ];
+    if (categoriasProtegidas.includes(categoria.name)) {
+      return {
+        success: false,
+        error: `A categoria '${categoria.name}' é protegida e não pode ser removida.`,
+      };
+    }
+
+    const [deleted] = await db
+      .delete(categorias)
+      .where(and(eq(categorias.id, data.id), eq(categorias.userId, user.id)))
+      .returning({ id: categorias.id });
+
+    if (!deleted) {
+      return {
+        success: false,
+        error: "Categoria não encontrada.",
+      };
+    }
+
+    revalidateForEntity("categorias");
+
+    return { success: true, message: "Categoria removida com sucesso." };
+  } catch (error) {
+    return handleActionError(error);
+  }
+}
diff --git a/app/(dashboard)/categorias/data.ts b/app/(dashboard)/categorias/data.ts
new file mode 100644
index 0000000..5cf8930
--- /dev/null
+++ b/app/(dashboard)/categorias/data.ts
@@ -0,0 +1,26 @@
+import type { CategoryType } from "@/components/categorias/types";
+import { categorias, type Categoria } from "@/db/schema";
+import { db } from "@/lib/db";
+import { eq } from "drizzle-orm";
+
+export type CategoryData = {
+  id: string;
+  name: string;
+  type: CategoryType;
+  icon: string | null;
+};
+
+export async function fetchCategoriesForUser(
+  userId: string
+): Promise<CategoryData[]> {
+  const categoryRows = await db.query.categorias.findMany({
+    where: eq(categorias.userId, userId),
+  });
+
+  return categoryRows.map((category: Categoria) => ({
+    id: category.id,
+    name: category.name,
+    type: category.type as CategoryType,
+    icon: category.icon,
+  }));
+}
diff --git a/app/(dashboard)/categorias/layout.tsx b/app/(dashboard)/categorias/layout.tsx
new file mode 100644
index 0000000..3e5e8ea
--- /dev/null
+++ b/app/(dashboard)/categorias/layout.tsx
@@ -0,0 +1,23 @@
+import PageDescription from "@/components/page-description";
+import { RiPriceTag3Line } from "@remixicon/react";
+
+export const metadata = {
+  title: "Categorias | OpenSheets",
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <section className="space-y-6 px-6">
+      <PageDescription
+        icon={<RiPriceTag3Line />}
+        title="Categorias"
+        subtitle="Gerencie suas categorias de despesas e receitas. Acompanhe o desempenho financeiro por categoria e faça ajustes conforme necessário."
+      />
+      {children}
+    </section>
+  );
+}
diff --git a/app/(dashboard)/categorias/loading.tsx b/app/(dashboard)/categorias/loading.tsx
new file mode 100644
index 0000000..e3bba35
--- /dev/null
+++ b/app/(dashboard)/categorias/loading.tsx
@@ -0,0 +1,61 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+/**
+ * Loading state para a página de categorias
+ * Layout: Header + Tabs + Grid de cards
+ */
+export default function CategoriasLoading() {
+  return (
+    <main className="flex flex-col items-start gap-6">
+      <div className="w-full space-y-6">
+        {/* Header */}
+        <div className="flex items-center justify-between">
+          <Skeleton className="h-8 w-32 rounded-2xl bg-foreground/10" />
+          <Skeleton className="h-10 w-40 rounded-2xl bg-foreground/10" />
+        </div>
+
+        {/* Tabs */}
+        <div className="space-y-4">
+          <div className="flex gap-2 border-b">
+            {Array.from({ length: 3 }).map((_, i) => (
+              <Skeleton
+                key={i}
+                className="h-10 w-32 rounded-t-2xl bg-foreground/10"
+              />
+            ))}
+          </div>
+
+          {/* Grid de cards de categorias */}
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+            {Array.from({ length: 8 }).map((_, i) => (
+              <div
+                key={i}
+                className="rounded-2xl border p-6 space-y-4"
+              >
+                {/* Ícone + Nome */}
+                <div className="flex items-center gap-3">
+                  <Skeleton className="size-12 rounded-2xl bg-foreground/10" />
+                  <div className="flex-1 space-y-2">
+                    <Skeleton className="h-5 w-full rounded-2xl bg-foreground/10" />
+                    <Skeleton className="h-4 w-16 rounded-2xl bg-foreground/10" />
+                  </div>
+                </div>
+
+                {/* Descrição */}
+                {i % 3 === 0 && (
+                  <Skeleton className="h-4 w-full rounded-2xl bg-foreground/10" />
+                )}
+
+                {/* Botões de ação */}
+                <div className="flex gap-2 pt-2 border-t">
+                  <Skeleton className="h-9 flex-1 rounded-2xl bg-foreground/10" />
+                  <Skeleton className="h-9 w-9 rounded-2xl bg-foreground/10" />
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+}
diff --git a/app/(dashboard)/categorias/page.tsx b/app/(dashboard)/categorias/page.tsx
new file mode 100644
index 0000000..4f7b060
--- /dev/null
+++ b/app/(dashboard)/categorias/page.tsx
@@ -0,0 +1,14 @@
+import { CategoriesPage } from "@/components/categorias/categories-page";
+import { getUserId } from "@/lib/auth/server";
+import { fetchCategoriesForUser } from "./data";
+
+export default async function Page() {
+  const userId = await getUserId();
+  const categories = await fetchCategoriesForUser(userId);
+
+  return (
+    <main className="flex flex-col items-start gap-6">
+      <CategoriesPage categories={categories} />
+    </main>
+  );
+}
diff --git a/app/(dashboard)/contas/[contaId]/extrato/data.ts b/app/(dashboard)/contas/[contaId]/extrato/data.ts
new file mode 100644
index 0000000..9967408
--- /dev/null
+++ b/app/(dashboard)/contas/[contaId]/extrato/data.ts
@@ -0,0 +1,131 @@
+import { contas, lancamentos, pagadores } from "@/db/schema";
+import { INITIAL_BALANCE_NOTE } from "@/lib/accounts/constants";
+import { db } from "@/lib/db";
+import { PAGADOR_ROLE_ADMIN } from "@/lib/pagadores/constants";
+import { and, eq, lt, sql } from "drizzle-orm";
+
+export type AccountSummaryData = {
+  openingBalance: number;
+  currentBalance: number;
+  totalIncomes: number;
+  totalExpenses: number;
+};
+
+export async function fetchAccountData(userId: string, contaId: string) {
+  const account = await db.query.contas.findFirst({
+    columns: {
+      id: true,
+      name: true,
+      accountType: true,
+      status: true,
+      initialBalance: true,
+      logo: true,
+      note: true,
+    },
+    where: and(eq(contas.id, contaId), eq(contas.userId, userId)),
+  });
+
+  return account;
+}
+
+export async function fetchAccountSummary(
+  userId: string,
+  contaId: string,
+  selectedPeriod: string
+): Promise<AccountSummaryData> {
+  const [periodSummary] = await db
+    .select({
+      netAmount: sql<number>`
+        coalesce(
+          sum(
+            case
+              when ${lancamentos.note} = ${INITIAL_BALANCE_NOTE} then 0
+              else ${lancamentos.amount}
+            end
+          ),
+          0
+        )
+      `,
+      incomes: sql<number>`
+        coalesce(
+          sum(
+            case
+              when ${lancamentos.note} = ${INITIAL_BALANCE_NOTE} then 0
+              when ${lancamentos.transactionType} = 'Receita' then ${lancamentos.amount}
+              else 0
+            end
+          ),
+          0
+        )
+      `,
+      expenses: sql<number>`
+        coalesce(
+          sum(
+            case
+              when ${lancamentos.note} = ${INITIAL_BALANCE_NOTE} then 0
+              when ${lancamentos.transactionType} = 'Despesa' then ${lancamentos.amount}
+              else 0
+            end
+          ),
+          0
+        )
+      `,
+    })
+    .from(lancamentos)
+    .innerJoin(pagadores, eq(lancamentos.pagadorId, pagadores.id))
+    .where(
+      and(
+        eq(lancamentos.userId, userId),
+        eq(lancamentos.contaId, contaId),
+        eq(lancamentos.period, selectedPeriod),
+        eq(lancamentos.isSettled, true),
+        eq(pagadores.role, PAGADOR_ROLE_ADMIN)
+      )
+    );
+
+  const [previousRow] = await db
+    .select({
+      previousMovements: sql<number>`
+        coalesce(
+          sum(
+            case
+              when ${lancamentos.note} = ${INITIAL_BALANCE_NOTE} then 0
+              else ${lancamentos.amount}
+            end
+          ),
+          0
+        )
+      `,
+    })
+    .from(lancamentos)
+    .innerJoin(pagadores, eq(lancamentos.pagadorId, pagadores.id))
+    .where(
+      and(
+        eq(lancamentos.userId, userId),
+        eq(lancamentos.contaId, contaId),
+        lt(lancamentos.period, selectedPeriod),
+        eq(lancamentos.isSettled, true),
+        eq(pagadores.role, PAGADOR_ROLE_ADMIN)
+      )
+    );
+
+  const account = await fetchAccountData(userId, contaId);
+  if (!account) {
+    throw new Error("Account not found");
+  }
+
+  const initialBalance = Number(account.initialBalance ?? 0);
+  const previousMovements = Number(previousRow?.previousMovements ?? 0);
+  const openingBalance = initialBalance + previousMovements;
+  const netAmount = Number(periodSummary?.netAmount ?? 0);
+  const totalIncomes = Number(periodSummary?.incomes ?? 0);
+  const totalExpenses = Math.abs(Number(periodSummary?.expenses ?? 0));
+  const currentBalance = openingBalance + netAmount;
+
+  return {
+    openingBalance,
+    currentBalance,
+    totalIncomes,
+    totalExpenses,
+  };
+}
diff --git a/app/(dashboard)/contas/[contaId]/extrato/loading.tsx b/app/(dashboard)/contas/[contaId]/extrato/loading.tsx
new file mode 100644
index 0000000..c0825f0
--- /dev/null
+++ b/app/(dashboard)/contas/[contaId]/extrato/loading.tsx
@@ -0,0 +1,38 @@
+import {
+  AccountStatementCardSkeleton,
+  FilterSkeleton,
+  TransactionsTableSkeleton,
+} from "@/components/skeletons";
+import { Skeleton } from "@/components/ui/skeleton";
+
+/**
+ * Loading state para a página de extrato de conta
+ * Layout: MonthPicker + AccountStatementCard + Filtros + Tabela de lançamentos
+ */
+export default function ExtratoLoading() {
+  return (
+    <main className="flex flex-col gap-6">
+      {/* Month Picker placeholder */}
+      <div className="h-[60px] animate-pulse rounded-2xl bg-foreground/10" />
+
+      {/* Account Statement Card */}
+      <AccountStatementCardSkeleton />
+
+      {/* Seção de lançamentos */}
+      <section className="flex flex-col gap-4">
+        <div className="space-y-6">
+          {/* Header */}
+          <div className="flex items-center justify-between">
+            <Skeleton className="h-8 w-48 rounded-2xl bg-foreground/10" />
+          </div>
+
+          {/* Filtros */}
+          <FilterSkeleton />
+
+          {/* Tabela */}
+          <TransactionsTableSkeleton />
+        </div>
+      </section>
+    </main>
+  );
+}
diff --git a/app/(dashboard)/contas/[contaId]/extrato/page.tsx b/app/(dashboard)/contas/[contaId]/extrato/page.tsx
new file mode 100644
index 0000000..fe013eb
--- /dev/null
+++ b/app/(dashboard)/contas/[contaId]/extrato/page.tsx
@@ -0,0 +1,173 @@
+import { AccountDialog } from "@/components/contas/account-dialog";
+import { AccountStatementCard } from "@/components/contas/account-statement-card";
+import type { Account } from "@/components/contas/types";
+import { LancamentosPage as LancamentosSection } from "@/components/lancamentos/page/lancamentos-page";
+import MonthPicker from "@/components/month-picker/month-picker";
+import { Button } from "@/components/ui/button";
+import { lancamentos } from "@/db/schema";
+import { db } from "@/lib/db";
+import { getUserId } from "@/lib/auth/server";
+import {
+  buildLancamentoWhere,
+  buildOptionSets,
+  buildSluggedFilters,
+  buildSlugMaps,
+  extractLancamentoSearchFilters,
+  fetchLancamentoFilterSources,
+  getSingleParam,
+  mapLancamentosData,
+  type ResolvedSearchParams,
+} from "@/lib/lancamentos/page-helpers";
+import { loadLogoOptions } from "@/lib/logo/options";
+import { parsePeriodParam } from "@/lib/utils/period";
+import { RiPencilLine } from "@remixicon/react";
+import { and, desc, eq } from "drizzle-orm";
+import { notFound } from "next/navigation";
+import { fetchAccountData, fetchAccountSummary } from "./data";
+
+type PageSearchParams = Promise<ResolvedSearchParams>;
+
+type PageProps = {
+  params: Promise<{ contaId: string }>;
+  searchParams?: PageSearchParams;
+};
+
+const capitalize = (value: string) =>
+  value.length > 0 ? value[0]?.toUpperCase().concat(value.slice(1)) : value;
+
+export default async function Page({ params, searchParams }: PageProps) {
+  const { contaId } = await params;
+  const userId = await getUserId();
+  const resolvedSearchParams = searchParams ? await searchParams : undefined;
+
+  const periodoParamRaw = getSingleParam(resolvedSearchParams, "periodo");
+  const {
+    period: selectedPeriod,
+    monthName,
+    year,
+  } = parsePeriodParam(periodoParamRaw);
+
+  const searchFilters = extractLancamentoSearchFilters(resolvedSearchParams);
+
+  const account = await fetchAccountData(userId, contaId);
+
+  if (!account) {
+    notFound();
+  }
+
+  const [filterSources, logoOptions, accountSummary] = await Promise.all([
+    fetchLancamentoFilterSources(userId),
+    loadLogoOptions(),
+    fetchAccountSummary(userId, contaId, selectedPeriod),
+  ]);
+  const sluggedFilters = buildSluggedFilters(filterSources);
+  const slugMaps = buildSlugMaps(sluggedFilters);
+
+  const filters = buildLancamentoWhere({
+    userId,
+    period: selectedPeriod,
+    filters: searchFilters,
+    slugMaps,
+    accountId: account.id,
+  });
+
+  filters.push(eq(lancamentos.isSettled, true));
+
+  const lancamentoRows = await db.query.lancamentos.findMany({
+    where: and(...filters),
+    with: {
+      pagador: true,
+      conta: true,
+      cartao: true,
+      categoria: true,
+    },
+    orderBy: desc(lancamentos.purchaseDate),
+  });
+
+  const lancamentosData = mapLancamentosData(lancamentoRows);
+
+  const { openingBalance, currentBalance, totalIncomes, totalExpenses } =
+    accountSummary;
+
+  const periodLabel = `${capitalize(monthName)} de ${year}`;
+
+  const accountDialogData: Account = {
+    id: account.id,
+    name: account.name,
+    accountType: account.accountType,
+    status: account.status,
+    note: account.note,
+    logo: account.logo,
+    initialBalance: Number(account.initialBalance ?? 0),
+    balance: currentBalance,
+  };
+
+  const {
+    pagadorOptions,
+    splitPagadorOptions,
+    defaultPagadorId,
+    contaOptions,
+    cartaoOptions,
+    categoriaOptions,
+    pagadorFilterOptions,
+    categoriaFilterOptions,
+    contaCartaoFilterOptions,
+  } = buildOptionSets({
+    ...sluggedFilters,
+    pagadorRows: filterSources.pagadorRows,
+    limitContaId: account.id,
+  });
+
+  return (
+    <main className="flex flex-col gap-6">
+      <MonthPicker />
+
+      <AccountStatementCard
+        accountName={account.name}
+        accountType={account.accountType}
+        status={account.status}
+        periodLabel={periodLabel}
+        openingBalance={openingBalance}
+        currentBalance={currentBalance}
+        totalIncomes={totalIncomes}
+        totalExpenses={totalExpenses}
+        logo={account.logo}
+        actions={
+          <AccountDialog
+            mode="update"
+            account={accountDialogData}
+            logoOptions={logoOptions}
+            trigger={
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon-sm"
+                className="text-muted-foreground hover:text-foreground"
+                aria-label="Editar conta"
+              >
+                <RiPencilLine className="size-4" />
+              </Button>
+            }
+          />
+        }
+      />
+
+      <section className="flex flex-col gap-4">
+        <LancamentosSection
+          lancamentos={lancamentosData}
+          pagadorOptions={pagadorOptions}
+          splitPagadorOptions={splitPagadorOptions}
+          defaultPagadorId={defaultPagadorId}
+          contaOptions={contaOptions}
+          cartaoOptions={cartaoOptions}
+          categoriaOptions={categoriaOptions}
+          pagadorFilterOptions={pagadorFilterOptions}
+          categoriaFilterOptions={categoriaFilterOptions}
+          contaCartaoFilterOptions={contaCartaoFilterOptions}
+          selectedPeriod={selectedPeriod}
+          allowCreate={false}
+        />
+      </section>
+    </main>
+  );
+}
diff --git a/app/(dashboard)/contas/actions.ts b/app/(dashboard)/contas/actions.ts
new file mode 100644
index 0000000..98df16e
--- /dev/null
+++ b/app/(dashboard)/contas/actions.ts
@@ -0,0 +1,383 @@
+"use server";
+
+import { categorias, contas, lancamentos, pagadores } from "@/db/schema";
+import {
+  INITIAL_BALANCE_CATEGORY_NAME,
+  INITIAL_BALANCE_CONDITION,
+  INITIAL_BALANCE_NOTE,
+  INITIAL_BALANCE_PAYMENT_METHOD,
+  INITIAL_BALANCE_TRANSACTION_TYPE,
+} from "@/lib/accounts/constants";
+import { type ActionResult, handleActionError } from "@/lib/actions/helpers";
+import { revalidateForEntity } from "@/lib/actions/helpers";
+import { noteSchema, uuidSchema } from "@/lib/schemas/common";
+import { formatDecimalForDbRequired } from "@/lib/utils/currency";
+import { getTodayInfo } from "@/lib/utils/date";
+import { normalizeFilePath } from "@/lib/utils/string";
+import { db } from "@/lib/db";
+import { getUser } from "@/lib/auth/server";
+import { PAGADOR_ROLE_ADMIN } from "@/lib/pagadores/constants";
+import {
+  TRANSFER_CATEGORY_NAME,
+  TRANSFER_CONDITION,
+  TRANSFER_ESTABLISHMENT,
+  TRANSFER_PAYMENT_METHOD,
+} from "@/lib/transferencias/constants";
+import { and, eq } from "drizzle-orm";
+import { z } from "zod";
+
+const accountBaseSchema = z.object({
+  name: z
+    .string({ message: "Informe o nome da conta." })
+    .trim()
+    .min(1, "Informe o nome da conta."),
+  accountType: z
+    .string({ message: "Informe o tipo da conta." })
+    .trim()
+    .min(1, "Informe o tipo da conta."),
+  status: z
+    .string({ message: "Informe o status da conta." })
+    .trim()
+    .min(1, "Informe o status da conta."),
+  note: noteSchema,
+  logo: z
+    .string({ message: "Selecione um logo." })
+    .trim()
+    .min(1, "Selecione um logo."),
+  initialBalance: z
+    .string()
+    .trim()
+    .transform((value) => (value.length === 0 ? "0" : value.replace(",", ".")))
+    .refine(
+      (value) => !Number.isNaN(Number.parseFloat(value)),
+      "Informe um saldo inicial válido."
+    )
+    .transform((value) => Number.parseFloat(value)),
+  excludeFromBalance: z
+    .union([z.boolean(), z.string()])
+    .transform((value) => value === true || value === "true"),
+});
+
+const createAccountSchema = accountBaseSchema;
+const updateAccountSchema = accountBaseSchema.extend({
+  id: uuidSchema("Conta"),
+});
+const deleteAccountSchema = z.object({
+  id: uuidSchema("Conta"),
+});
+
+type AccountCreateInput = z.infer<typeof createAccountSchema>;
+type AccountUpdateInput = z.infer<typeof updateAccountSchema>;
+type AccountDeleteInput = z.infer<typeof deleteAccountSchema>;
+
+export async function createAccountAction(
+  input: AccountCreateInput
+): Promise<ActionResult> {
+  try {
+    const user = await getUser();
+    const data = createAccountSchema.parse(input);
+
+    const logoFile = normalizeFilePath(data.logo);
+
+    const normalizedInitialBalance = Math.abs(data.initialBalance);
+    const hasInitialBalance = normalizedInitialBalance > 0;
+
+    await db.transaction(async (tx: typeof db) => {
+      const [createdAccount] = await tx
+        .insert(contas)
+        .values({
+          name: data.name,
+          accountType: data.accountType,
+          status: data.status,
+          note: data.note ?? null,
+          logo: logoFile,
+          initialBalance: formatDecimalForDbRequired(data.initialBalance),
+          excludeFromBalance: data.excludeFromBalance,
+          userId: user.id,
+        })
+        .returning({ id: contas.id, name: contas.name });
+
+      if (!createdAccount) {
+        throw new Error("Não foi possível criar a conta.");
+      }
+
+      if (!hasInitialBalance) {
+        return;
+      }
+
+      const [category, adminPagador] = await Promise.all([
+        tx.query.categorias.findFirst({
+          columns: { id: true },
+          where: and(
+            eq(categorias.userId, user.id),
+            eq(categorias.name, INITIAL_BALANCE_CATEGORY_NAME)
+          ),
+        }),
+        tx.query.pagadores.findFirst({
+          columns: { id: true },
+          where: and(
+            eq(pagadores.userId, user.id),
+            eq(pagadores.role, PAGADOR_ROLE_ADMIN)
+          ),
+        }),
+      ]);
+
+      if (!category) {
+        throw new Error(
+          'Categoria "Saldo inicial" não encontrada. Crie-a antes de definir um saldo inicial.'
+        );
+      }
+
+      if (!adminPagador) {
+        throw new Error(
+          "Pagador com papel administrador não encontrado. Crie um pagador admin antes de definir um saldo inicial."
+        );
+      }
+
+      const { date, period } = getTodayInfo();
+
+      await tx.insert(lancamentos).values({
+        condition: INITIAL_BALANCE_CONDITION,
+        name: `Saldo inicial - ${createdAccount.name}`,
+        paymentMethod: INITIAL_BALANCE_PAYMENT_METHOD,
+        note: INITIAL_BALANCE_NOTE,
+        amount: formatDecimalForDbRequired(normalizedInitialBalance),
+        purchaseDate: date,
+        transactionType: INITIAL_BALANCE_TRANSACTION_TYPE,
+        period,
+        isSettled: true,
+        userId: user.id,
+        contaId: createdAccount.id,
+        categoriaId: category.id,
+        pagadorId: adminPagador.id,
+      });
+    });
+
+    revalidateForEntity("contas");
+
+    return {
+      success: true,
+      message: "Conta criada com sucesso.",
+    };
+  } catch (error) {
+    return handleActionError(error);
+  }
+}
+
+export async function updateAccountAction(
+  input: AccountUpdateInput
+): Promise<ActionResult> {
+  try {
+    const user = await getUser();
+    const data = updateAccountSchema.parse(input);
+
+    const logoFile = normalizeFilePath(data.logo);
+
+    const [updated] = await db
+      .update(contas)
+      .set({
+        name: data.name,
+        accountType: data.accountType,
+        status: data.status,
+        note: data.note ?? null,
+        logo: logoFile,
+        initialBalance: formatDecimalForDbRequired(data.initialBalance),
+        excludeFromBalance: data.excludeFromBalance,
+      })
+      .where(and(eq(contas.id, data.id), eq(contas.userId, user.id)))
+      .returning();
+
+    if (!updated) {
+      return {
+        success: false,
+        error: "Conta não encontrada.",
+      };
+    }
+
+    revalidateForEntity("contas");
+
+    return {
+      success: true,
+      message: "Conta atualizada com sucesso.",
+    };
+  } catch (error) {
+    return handleActionError(error);
+  }
+}
+
+export async function deleteAccountAction(
+  input: AccountDeleteInput
+): Promise<ActionResult> {
+  try {
+    const user = await getUser();
+    const data = deleteAccountSchema.parse(input);
+
+    const [deleted] = await db
+      .delete(contas)
+      .where(and(eq(contas.id, data.id), eq(contas.userId, user.id)))
+      .returning({ id: contas.id });
+
+    if (!deleted) {
+      return {
+        success: false,
+        error: "Conta não encontrada.",
+      };
+    }
+
+    revalidateForEntity("contas");
+
+    return {
+      success: true,
+      message: "Conta removida com sucesso.",
+    };
+  } catch (error) {
+    return handleActionError(error);
+  }
+}
+
+// Transfer between accounts
+const transferSchema = z.object({
+  fromAccountId: uuidSchema("Conta de origem"),
+  toAccountId: uuidSchema("Conta de destino"),
+  amount: z
+    .string()
+    .trim()
+    .transform((value) => (value.length === 0 ? "0" : value.replace(",", ".")))
+    .refine(
+      (value) => !Number.isNaN(Number.parseFloat(value)),
+      "Informe um valor válido."
+    )
+    .transform((value) => Number.parseFloat(value))
+    .refine((value) => value > 0, "O valor deve ser maior que zero."),
+  date: z.coerce.date({ message: "Informe uma data válida." }),
+  period: z
+    .string({ message: "Informe o período." })
+    .trim()
+    .min(1, "Informe o período."),
+});
+
+type TransferInput = z.infer<typeof transferSchema>;
+
+export async function transferBetweenAccountsAction(
+  input: TransferInput
+): Promise<ActionResult> {
+  try {
+    const user = await getUser();
+    const data = transferSchema.parse(input);
+
+    // Validate that accounts are different
+    if (data.fromAccountId === data.toAccountId) {
+      return {
+        success: false,
+        error: "A conta de origem e destino devem ser diferentes.",
+      };
+    }
+
+    // Generate a unique transfer ID to link both transactions
+    const transferId = crypto.randomUUID();
+
+    await db.transaction(async (tx: typeof db) => {
+      // Verify both accounts exist and belong to the user
+      const [fromAccount, toAccount] = await Promise.all([
+        tx.query.contas.findFirst({
+          columns: { id: true, name: true },
+          where: and(
+            eq(contas.id, data.fromAccountId),
+            eq(contas.userId, user.id)
+          ),
+        }),
+        tx.query.contas.findFirst({
+          columns: { id: true, name: true },
+          where: and(
+            eq(contas.id, data.toAccountId),
+            eq(contas.userId, user.id)
+          ),
+        }),
+      ]);
+
+      if (!fromAccount) {
+        throw new Error("Conta de origem não encontrada.");
+      }
+
+      if (!toAccount) {
+        throw new Error("Conta de destino não encontrada.");
+      }
+
+      // Get the transfer category
+      const transferCategory = await tx.query.categorias.findFirst({
+        columns: { id: true },
+        where: and(
+          eq(categorias.userId, user.id),
+          eq(categorias.name, TRANSFER_CATEGORY_NAME)
+        ),
+      });
+
+      if (!transferCategory) {
+        throw new Error(
+          `Categoria "${TRANSFER_CATEGORY_NAME}" não encontrada. Por favor, crie esta categoria antes de fazer transferências.`
+        );
+      }
+
+      // Get the admin payer
+      const adminPagador = await tx.query.pagadores.findFirst({
+        columns: { id: true },
+        where: and(
+          eq(pagadores.userId, user.id),
+          eq(pagadores.role, PAGADOR_ROLE_ADMIN)
+        ),
+      });
+
+      if (!adminPagador) {
+        throw new Error(
+          "Pagador administrador não encontrado. Por favor, crie um pagador admin."
+        );
+      }
+
+      // Create outgoing transaction (transfer from source account)
+      await tx.insert(lancamentos).values({
+        condition: TRANSFER_CONDITION,
+        name: `${TRANSFER_ESTABLISHMENT} → ${toAccount.name}`,
+        paymentMethod: TRANSFER_PAYMENT_METHOD,
+        note: `Transferência para ${toAccount.name}`,
+        amount: formatDecimalForDbRequired(-Math.abs(data.amount)),
+        purchaseDate: data.date,
+        transactionType: "Transferência",
+        period: data.period,
+        isSettled: true,
+        userId: user.id,
+        contaId: fromAccount.id,
+        categoriaId: transferCategory.id,
+        pagadorId: adminPagador.id,
+        transferId,
+      });
+
+      // Create incoming transaction (transfer to destination account)
+      await tx.insert(lancamentos).values({
+        condition: TRANSFER_CONDITION,
+        name: `${TRANSFER_ESTABLISHMENT} ← ${fromAccount.name}`,
+        paymentMethod: TRANSFER_PAYMENT_METHOD,
+        note: `Transferência de ${fromAccount.name}`,
+        amount: formatDecimalForDbRequired(Math.abs(data.amount)),
+        purchaseDate: data.date,
+        transactionType: "Transferência",
+        period: data.period,
+        isSettled: true,
+        userId: user.id,
+        contaId: toAccount.id,
+        categoriaId: transferCategory.id,
+        pagadorId: adminPagador.id,
+        transferId,
+      });
+    });
+
+    revalidateForEntity("contas");
+    revalidateForEntity("lancamentos");
+
+    return {
+      success: true,
+      message: "Transferência registrada com sucesso.",
+    };
+  } catch (error) {
+    return handleActionError(error);
+  }
+}
diff --git a/app/(dashboard)/contas/data.ts b/app/(dashboard)/contas/data.ts
new file mode 100644
index 0000000..a5e1cc7
--- /dev/null
+++ b/app/(dashboard)/contas/data.ts
@@ -0,0 +1,95 @@
+import { contas, lancamentos, pagadores } from "@/db/schema";
+import { INITIAL_BALANCE_NOTE } from "@/lib/accounts/constants";
+import { db } from "@/lib/db";
+import { loadLogoOptions } from "@/lib/logo/options";
+import { PAGADOR_ROLE_ADMIN } from "@/lib/pagadores/constants";
+import { and, eq, sql } from "drizzle-orm";
+
+export type AccountData = {
+  id: string;
+  name: string;
+  accountType: string;
+  status: string;
+  note: string | null;
+  logo: string | null;
+  initialBalance: number;
+  balance: number;
+  excludeFromBalance: boolean;
+};
+
+export async function fetchAccountsForUser(
+  userId: string,
+  currentPeriod: string
+): Promise<{ accounts: AccountData[]; logoOptions: LogoOption[] }> {
+  const [accountRows, logoOptions] = await Promise.all([
+    db
+      .select({
+        id: contas.id,
+        name: contas.name,
+        accountType: contas.accountType,
+        status: contas.status,
+        note: contas.note,
+        logo: contas.logo,
+        initialBalance: contas.initialBalance,
+        excludeFromBalance: contas.excludeFromBalance,
+        balanceMovements: sql<number>`
+          coalesce(
+            sum(
+              case
+                when ${lancamentos.note} = ${INITIAL_BALANCE_NOTE} then 0
+                else ${lancamentos.amount}
+              end
+            ),
+            0
+          )
+        `,
+      })
+      .from(contas)
+      .leftJoin(
+        lancamentos,
+        and(
+          eq(lancamentos.contaId, contas.id),
+          eq(lancamentos.userId, userId),
+          eq(lancamentos.period, currentPeriod),
+          eq(lancamentos.isSettled, true)
+        )
+      )
+      .leftJoin(
+        pagadores,
+        eq(lancamentos.pagadorId, pagadores.id)
+      )
+      .where(
+        and(
+          eq(contas.userId, userId),
+          sql`(${lancamentos.id} IS NULL OR ${pagadores.role} = ${PAGADOR_ROLE_ADMIN})`
+        )
+      )
+      .groupBy(
+        contas.id,
+        contas.name,
+        contas.accountType,
+        contas.status,
+        contas.note,
+        contas.logo,
+        contas.initialBalance,
+        contas.excludeFromBalance
+      ),
+    loadLogoOptions(),
+  ]);
+
+  const accounts = accountRows.map((account) => ({
+    id: account.id,
+    name: account.name,
+    accountType: account.accountType,
+    status: account.status,
+    note: account.note,
+    logo: account.logo,
+    initialBalance: Number(account.initialBalance ?? 0),
+    balance:
+      Number(account.initialBalance ?? 0) +
+      Number(account.balanceMovements ?? 0),
+    excludeFromBalance: account.excludeFromBalance,
+  }));
+
+  return { accounts, logoOptions };
+}
diff --git a/app/(dashboard)/contas/layout.tsx b/app/(dashboard)/contas/layout.tsx
new file mode 100644
index 0000000..5436831
--- /dev/null
+++ b/app/(dashboard)/contas/layout.tsx
@@ -0,0 +1,25 @@
+import PageDescription from "@/components/page-description";
+import { RiBankLine } from "@remixicon/react";
+
+export const metadata = {
+  title: "Contas | OpenSheets",
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <section className="space-y-6 px-6">
+      <PageDescription
+        icon={<RiBankLine />}
+        title="Contas"
+        subtitle="Acompanhe todas as contas do mês selecionado incluindo receitas,
+        despesas e transações previstas. Use o seletor abaixo para navegar pelos
+        meses e visualizar as movimentações correspondentes."
+      />
+      {children}
+    </section>
+  );
+}
diff --git a/app/(dashboard)/contas/loading.tsx b/app/(dashboard)/contas/loading.tsx
new file mode 100644
index 0000000..ad9573f
--- /dev/null
+++ b/app/(dashboard)/contas/loading.tsx
@@ -0,0 +1,36 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+/**
+ * Loading state para a página de contas
+ */
+export default function ContasLoading() {
+  return (
+    <main className="flex flex-col gap-6">
+      <div className="space-y-6">
+        {/* Header */}
+        <div className="flex items-center justify-between">
+          <Skeleton className="h-8 w-32 rounded-2xl bg-foreground/10" />
+          <Skeleton className="h-10 w-40 rounded-2xl bg-foreground/10" />
+        </div>
+
+        {/* Grid de contas */}
+        <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-2xl border p-6 space-y-4">
+              <div className="flex items-center justify-between">
+                <Skeleton className="size-10 rounded-2xl bg-foreground/10" />
+                <Skeleton className="h-8 w-16 rounded-2xl bg-foreground/10" />
+              </div>
+              <Skeleton className="h-6 w-32 rounded-2xl bg-foreground/10" />
+              <Skeleton className="h-4 w-full rounded-2xl bg-foreground/10" />
+              <div className="flex gap-2">
+                <Skeleton className="h-4 w-20 rounded-2xl bg-foreground/10" />
+                <Skeleton className="h-4 w-20 rounded-2xl bg-foreground/10" />
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </main>
+  );
+}
diff --git a/app/(dashboard)/contas/page.tsx b/app/(dashboard)/contas/page.tsx
new file mode 100644
index 0000000..3101225
--- /dev/null
+++ b/app/(dashboard)/contas/page.tsx
@@ -0,0 +1,22 @@
+import { AccountsPage } from "@/components/contas/accounts-page";
+import { getUserId } from "@/lib/auth/server";
+import { fetchAccountsForUser } from "./data";
+
+export default async function Page() {
+  const userId = await getUserId();
+  const now = new Date();
+  const currentPeriod = `${now.getFullYear()}-${String(
+    now.getMonth() + 1
+  ).padStart(2, "0")}`;
+
+  const { accounts, logoOptions } = await fetchAccountsForUser(
+    userId,
+    currentPeriod
+  );
+
+  return (
+    <main className="flex flex-col items-start gap-6">
+      <AccountsPage accounts={accounts} logoOptions={logoOptions} />
+    </main>
+  );
+}
diff --git a/app/(dashboard)/dashboard/loading.tsx b/app/(dashboard)/dashboard/loading.tsx
new file mode 100644
index 0000000..f725355
--- /dev/null
+++ b/app/(dashboard)/dashboard/loading.tsx
@@ -0,0 +1,17 @@
+import { DashboardGridSkeleton } from "@/components/skeletons";
+
+/**
+ * Loading state para a página do dashboard
+ * Usa skeleton fiel ao layout final para evitar layout shift
+ */
+export default function DashboardLoading() {
+  return (
+    <main className="flex flex-col gap-6 px-6">
+      {/* Month Picker placeholder */}
+      <div className="h-[60px] animate-pulse rounded-2xl bg-foreground/10" />
+
+      {/* Dashboard content skeleton */}
+      <DashboardGridSkeleton />
+    </main>
+  );
+}
diff --git a/app/(dashboard)/dashboard/page.tsx b/app/(dashboard)/dashboard/page.tsx
new file mode 100644
index 0000000..7ee44bd
--- /dev/null
+++ b/app/(dashboard)/dashboard/page.tsx
@@ -0,0 +1,40 @@
+import { DashboardGrid } from "@/components/dashboard/dashboard-grid";
+import { DashboardWelcome } from "@/components/dashboard/dashboard-welcome";
+import { SectionCards } from "@/components/dashboard/section-cards";
+import MonthPicker from "@/components/month-picker/month-picker";
+import { fetchDashboardData } from "@/lib/dashboard/fetch-dashboard-data";
+import { getUser } from "@/lib/auth/server";
+import { parsePeriodParam } from "@/lib/utils/period";
+
+type PageSearchParams = Promise<Record<string, string | string[] | undefined>>;
+
+type PageProps = {
+  searchParams?: PageSearchParams;
+};
+
+const getSingleParam = (
+  params: Record<string, string | string[] | undefined> | undefined,
+  key: string
+) => {
+  const value = params?.[key];
+  if (!value) return null;
+  return Array.isArray(value) ? value[0] ?? null : value;
+};
+
+export default async function Page({ searchParams }: PageProps) {
+  const user = await getUser();
+  const resolvedSearchParams = searchParams ? await searchParams : undefined;
+  const periodoParam = getSingleParam(resolvedSearchParams, "periodo");
+  const { period: selectedPeriod } = parsePeriodParam(periodoParam);
+
+  const data = await fetchDashboardData(user.id, selectedPeriod);
+
+  return (
+    <main className="flex flex-col gap-4 px-4">
+      <DashboardWelcome name={user.name} />
+      <MonthPicker />
+      <SectionCards metrics={data.metrics} />
+      <DashboardGrid data={data} period={selectedPeriod} />
+    </main>
+  );
+}
diff --git a/app/(dashboard)/insights/actions.ts b/app/(dashboard)/insights/actions.ts
new file mode 100644
index 0000000..8aa2362
--- /dev/null
+++ b/app/(dashboard)/insights/actions.ts
@@ -0,0 +1,817 @@
+"use server";
+
+import {
+  cartoes,
+  categorias,
+  contas,
+  lancamentos,
+  orcamentos,
+  pagadores,
+  savedInsights,
+} from "@/db/schema";
+import { ACCOUNT_AUTO_INVOICE_NOTE_PREFIX } from "@/lib/accounts/constants";
+import { db } from "@/lib/db";
+import { getUser } from "@/lib/auth/server";
+import { PAGADOR_ROLE_ADMIN } from "@/lib/pagadores/constants";
+import {
+  InsightsResponseSchema,
+  type InsightsResponse,
+} from "@/lib/schemas/insights";
+import { getPreviousPeriod } from "@/lib/utils/period";
+import { anthropic } from "@ai-sdk/anthropic";
+import { google } from "@ai-sdk/google";
+import { openai } from "@ai-sdk/openai";
+import { createOpenRouter } from "@openrouter/ai-sdk-provider";
+import { generateObject } from "ai";
+import { getDay } from "date-fns";
+import { and, eq, isNull, ne, or, sql } from "drizzle-orm";
+import { AVAILABLE_MODELS, INSIGHTS_SYSTEM_PROMPT } from "./data";
+
+const TRANSFERENCIA = "Transferência";
+
+type ActionResult<T> =
+  | { success: true; data: T }
+  | { success: false; error: string };
+
+/**
+ * Função auxiliar para converter valores numéricos
+ */
+const toNumber = (value: unknown): number => {
+  if (typeof value === "number") return value;
+  if (typeof value === "string") {
+    const parsed = Number(value);
+    return Number.isNaN(parsed) ? 0 : parsed;
+  }
+  return 0;
+};
+
+/**
+ * Agrega dados financeiros do mês para análise
+ */
+async function aggregateMonthData(userId: string, period: string) {
+  const previousPeriod = getPreviousPeriod(period);
+  const twoMonthsAgo = getPreviousPeriod(previousPeriod);
+  const threeMonthsAgo = getPreviousPeriod(twoMonthsAgo);
+
+  // Buscar métricas de receitas e despesas dos últimos 3 meses
+  const [currentPeriodRows, previousPeriodRows, twoMonthsAgoRows, threeMonthsAgoRows] = await Promise.all([
+    db
+      .select({
+        transactionType: lancamentos.transactionType,
+        totalAmount: sql<number>`coalesce(sum(${lancamentos.amount}), 0)`,
+      })
+      .from(lancamentos)
+      .innerJoin(pagadores, eq(lancamentos.pagadorId, pagadores.id))
+      .where(
+        and(
+          eq(lancamentos.userId, userId),
+          eq(lancamentos.period, period),
+          eq(pagadores.role, PAGADOR_ROLE_ADMIN),
+          ne(lancamentos.transactionType, TRANSFERENCIA),
+          or(
+            isNull(lancamentos.note),
+            sql`${
+              lancamentos.note
+            } NOT LIKE ${`${ACCOUNT_AUTO_INVOICE_NOTE_PREFIX}%`}`
+          )
+        )
+      )
+      .groupBy(lancamentos.transactionType),
+    db
+      .select({
+        transactionType: lancamentos.transactionType,
+        totalAmount: sql<number>`coalesce(sum(${lancamentos.amount}), 0)`,
+      })
+      .from(lancamentos)
+      .innerJoin(pagadores, eq(lancamentos.pagadorId, pagadores.id))
+      .where(
+        and(
+          eq(lancamentos.userId, userId),
+          eq(lancamentos.period, previousPeriod),
+          eq(pagadores.role, PAGADOR_ROLE_ADMIN),
+          ne(lancamentos.transactionType, TRANSFERENCIA),
+          or(
+            isNull(lancamentos.note),
+            sql`${
+              lancamentos.note
+            } NOT LIKE ${`${ACCOUNT_AUTO_INVOICE_NOTE_PREFIX}%`}`
+          )
+        )
+      )
+      .groupBy(lancamentos.transactionType),
+    db
+      .select({
+        transactionType: lancamentos.transactionType,
+        totalAmount: sql<number>`coalesce(sum(${lancamentos.amount}), 0)`,
+      })
+      .from(lancamentos)
+      .innerJoin(pagadores, eq(lancamentos.pagadorId, pagadores.id))
+      .where(
+        and(
+          eq(lancamentos.userId, userId),
+          eq(lancamentos.period, twoMonthsAgo),
+          eq(pagadores.role, PAGADOR_ROLE_ADMIN),
+          ne(lancamentos.transactionType, TRANSFERENCIA),
+          or(
+            isNull(lancamentos.note),
+            sql`${
+              lancamentos.note
+            } NOT LIKE ${`${ACCOUNT_AUTO_INVOICE_NOTE_PREFIX}%`}`
+          )
+        )
+      )
+      .groupBy(lancamentos.transactionType),
+    db
+      .select({
+        transactionType: lancamentos.transactionType,
+        totalAmount: sql<number>`coalesce(sum(${lancamentos.amount}), 0)`,
+      })
+      .from(lancamentos)
+      .innerJoin(pagadores, eq(lancamentos.pagadorId, pagadores.id))
+      .where(
+        and(
+          eq(lancamentos.userId, userId),
+          eq(lancamentos.period, threeMonthsAgo),
+          eq(pagadores.role, PAGADOR_ROLE_ADMIN),
+          ne(lancamentos.transactionType, TRANSFERENCIA),
+          or(
+            isNull(lancamentos.note),
+            sql`${
+              lancamentos.note
+            } NOT LIKE ${`${ACCOUNT_AUTO_INVOICE_NOTE_PREFIX}%`}`
+          )
+        )
+      )
+      .groupBy(lancamentos.transactionType),
+  ]);
+
+  // Calcular totais dos últimos 3 meses
+  let currentIncome = 0;
+  let currentExpense = 0;
+  let previousIncome = 0;
+  let previousExpense = 0;
+  let twoMonthsAgoIncome = 0;
+  let twoMonthsAgoExpense = 0;
+  let threeMonthsAgoIncome = 0;
+  let threeMonthsAgoExpense = 0;
+
+  for (const row of currentPeriodRows) {
+    const amount = Math.abs(toNumber(row.totalAmount));
+    if (row.transactionType === "Receita") currentIncome += amount;
+    else if (row.transactionType === "Despesa") currentExpense += amount;
+  }
+
+  for (const row of previousPeriodRows) {
+    const amount = Math.abs(toNumber(row.totalAmount));
+    if (row.transactionType === "Receita") previousIncome += amount;
+    else if (row.transactionType === "Despesa") previousExpense += amount;
+  }
+
+  for (const row of twoMonthsAgoRows) {
+    const amount = Math.abs(toNumber(row.totalAmount));
+    if (row.transactionType === "Receita") twoMonthsAgoIncome += amount;
+    else if (row.transactionType === "Despesa") twoMonthsAgoExpense += amount;
+  }
+
+  for (const row of threeMonthsAgoRows) {
+    const amount = Math.abs(toNumber(row.totalAmount));
+    if (row.transactionType === "Receita") threeMonthsAgoIncome += amount;
+    else if (row.transactionType === "Despesa") threeMonthsAgoExpense += amount;
+  }
+
+  // Buscar despesas por categoria (top 5)
+  const expensesByCategory = await db
+    .select({
+      categoryName: categorias.name,
+      total: sql<number>`coalesce(sum(${lancamentos.amount}), 0)`,
+    })
+    .from(lancamentos)
+    .innerJoin(pagadores, eq(lancamentos.pagadorId, pagadores.id))
+    .innerJoin(categorias, eq(lancamentos.categoriaId, categorias.id))
+    .where(
+      and(
+        eq(lancamentos.userId, userId),
+        eq(lancamentos.period, period),
+        eq(lancamentos.transactionType, "Despesa"),
+        eq(pagadores.role, PAGADOR_ROLE_ADMIN),
+        eq(categorias.type, "despesa"),
+        or(
+          isNull(lancamentos.note),
+          sql`${
+            lancamentos.note
+          } NOT LIKE ${`${ACCOUNT_AUTO_INVOICE_NOTE_PREFIX}%`}`
+        )
+      )
+    )
+    .groupBy(categorias.name)
+    .orderBy(sql`sum(${lancamentos.amount}) ASC`)
+    .limit(5);
+
+  // Buscar orçamentos e uso
+  const budgetsData = await db
+    .select({
+      categoryName: categorias.name,
+      budgetAmount: orcamentos.amount,
+      spent: sql<number>`coalesce(sum(${lancamentos.amount}), 0)`,
+    })
+    .from(orcamentos)
+    .innerJoin(categorias, eq(orcamentos.categoriaId, categorias.id))
+    .leftJoin(
+      lancamentos,
+      and(
+        eq(lancamentos.categoriaId, categorias.id),
+        eq(lancamentos.period, period),
+        eq(lancamentos.userId, userId),
+        eq(lancamentos.transactionType, "Despesa")
+      )
+    )
+    .where(and(eq(orcamentos.userId, userId), eq(orcamentos.period, period)))
+    .groupBy(categorias.name, orcamentos.amount);
+
+  // Buscar métricas de cartões
+  const cardsData = await db
+    .select({
+      totalLimit: sql<number>`coalesce(sum(${cartoes.limit}), 0)`,
+      cardCount: sql<number>`count(*)`,
+    })
+    .from(cartoes)
+    .where(and(eq(cartoes.userId, userId), eq(cartoes.status, "ativo")));
+
+  // Buscar saldo total das contas
+  const accountsData = await db
+    .select({
+      totalBalance: sql<number>`coalesce(sum(${contas.initialBalance}), 0)`,
+      accountCount: sql<number>`count(*)`,
+    })
+    .from(contas)
+    .where(
+      and(
+        eq(contas.userId, userId),
+        eq(contas.status, "ativa"),
+        eq(contas.excludeFromBalance, false)
+      )
+    );
+
+  // Calcular ticket médio das transações
+  const avgTicketData = await db
+    .select({
+      avgAmount: sql<number>`coalesce(avg(abs(${lancamentos.amount})), 0)`,
+      transactionCount: sql<number>`count(*)`,
+    })
+    .from(lancamentos)
+    .innerJoin(pagadores, eq(lancamentos.pagadorId, pagadores.id))
+    .where(
+      and(
+        eq(lancamentos.userId, userId),
+        eq(lancamentos.period, period),
+        eq(pagadores.role, PAGADOR_ROLE_ADMIN),
+        ne(lancamentos.transactionType, TRANSFERENCIA)
+      )
+    );
+
+  // Buscar gastos por dia da semana
+  const dayOfWeekSpending = await db
+    .select({
+      purchaseDate: lancamentos.purchaseDate,
+      amount: lancamentos.amount,
+    })
+    .from(lancamentos)
+    .innerJoin(pagadores, eq(lancamentos.pagadorId, pagadores.id))
+    .where(
+      and(
+        eq(lancamentos.userId, userId),
+        eq(lancamentos.period, period),
+        eq(lancamentos.transactionType, "Despesa"),
+        eq(pagadores.role, PAGADOR_ROLE_ADMIN)
+      )
+    );
+
+  // Agregar por dia da semana
+  const dayTotals = new Map<number, number>();
+  for (const row of dayOfWeekSpending) {
+    if (!row.purchaseDate) continue;
+    const dayOfWeek = getDay(new Date(row.purchaseDate));
+    const current = dayTotals.get(dayOfWeek) ?? 0;
+    dayTotals.set(dayOfWeek, current + Math.abs(toNumber(row.amount)));
+  }
+
+  // Buscar métodos de pagamento (agregado)
+  const paymentMethodsData = await db
+    .select({
+      paymentMethod: lancamentos.paymentMethod,
+      total: sql<number>`coalesce(sum(abs(${lancamentos.amount})), 0)`,
+    })
+    .from(lancamentos)
+    .innerJoin(pagadores, eq(lancamentos.pagadorId, pagadores.id))
+    .where(
+      and(
+        eq(lancamentos.userId, userId),
+        eq(lancamentos.period, period),
+        eq(lancamentos.transactionType, "Despesa"),
+        eq(pagadores.role, PAGADOR_ROLE_ADMIN)
+      )
+    )
+    .groupBy(lancamentos.paymentMethod);
+
+  // Buscar transações dos últimos 3 meses para análise de recorrência
+  const last3MonthsTransactions = await db
+    .select({
+      name: lancamentos.name,
+      amount: lancamentos.amount,
+      period: lancamentos.period,
+      condition: lancamentos.condition,
+      installmentCount: lancamentos.installmentCount,
+      currentInstallment: lancamentos.currentInstallment,
+      categoryName: categorias.name,
+    })
+    .from(lancamentos)
+    .innerJoin(pagadores, eq(lancamentos.pagadorId, pagadores.id))
+    .leftJoin(categorias, eq(lancamentos.categoriaId, categorias.id))
+    .where(
+      and(
+        eq(lancamentos.userId, userId),
+        sql`${lancamentos.period} IN (${period}, ${previousPeriod}, ${twoMonthsAgo})`,
+        eq(lancamentos.transactionType, "Despesa"),
+        eq(pagadores.role, PAGADOR_ROLE_ADMIN),
+        ne(lancamentos.transactionType, TRANSFERENCIA)
+      )
+    )
+    .orderBy(lancamentos.name);
+
+  // Análise de recorrência
+  const transactionsByName = new Map<string, Array<{ period: string; amount: number }>>();
+
+  for (const tx of last3MonthsTransactions) {
+    const key = tx.name.toLowerCase().trim();
+    if (!transactionsByName.has(key)) {
+      transactionsByName.set(key, []);
+    }
+    const transactions = transactionsByName.get(key);
+    if (transactions) {
+      transactions.push({
+        period: tx.period,
+        amount: Math.abs(toNumber(tx.amount)),
+      });
+    }
+  }
+
+  // Identificar gastos recorrentes (aparece em 2+ meses com valor similar)
+  const recurringExpenses: Array<{ name: string; avgAmount: number; frequency: number }> = [];
+  let totalRecurring = 0;
+
+  for (const [name, occurrences] of transactionsByName.entries()) {
+    if (occurrences.length >= 2) {
+      const amounts = occurrences.map(o => o.amount);
+      const avgAmount = amounts.reduce((sum, amt) => sum + amt, 0) / amounts.length;
+      const maxDiff = Math.max(...amounts) - Math.min(...amounts);
+
+      // Considerar recorrente se variação <= 20% da média
+      if (maxDiff <= avgAmount * 0.2) {
+        recurringExpenses.push({
+          name,
+          avgAmount,
+          frequency: occurrences.length,
+        });
+
+        // Somar apenas os do mês atual
+        const currentMonthOccurrence = occurrences.find(o => o.period === period);
+        if (currentMonthOccurrence) {
+          totalRecurring += currentMonthOccurrence.amount;
+        }
+      }
+    }
+  }
+
+  // Análise de gastos parcelados
+  const installmentTransactions = last3MonthsTransactions.filter(
+    tx => tx.condition === "parcelado" && tx.installmentCount && tx.installmentCount > 1
+  );
+
+  const installmentData = installmentTransactions
+    .filter(tx => tx.period === period)
+    .map(tx => ({
+      name: tx.name,
+      currentInstallment: tx.currentInstallment ?? 1,
+      totalInstallments: tx.installmentCount ?? 1,
+      amount: Math.abs(toNumber(tx.amount)),
+      category: tx.categoryName ?? "Outros",
+    }));
+
+  const totalInstallmentAmount = installmentData.reduce((sum, tx) => sum + tx.amount, 0);
+  const futureCommitment = installmentData.reduce((sum, tx) => {
+    const remaining = (tx.totalInstallments - tx.currentInstallment);
+    return sum + (tx.amount * remaining);
+  }, 0);
+
+  // Montar dados agregados e anonimizados
+  const aggregatedData = {
+    month: period,
+    totalIncome: currentIncome,
+    totalExpense: currentExpense,
+    balance: currentIncome - currentExpense,
+
+    // Tendência de 3 meses
+    threeMonthTrend: {
+      periods: [threeMonthsAgo, twoMonthsAgo, previousPeriod, period],
+      incomes: [threeMonthsAgoIncome, twoMonthsAgoIncome, previousIncome, currentIncome],
+      expenses: [threeMonthsAgoExpense, twoMonthsAgoExpense, previousExpense, currentExpense],
+      avgIncome: (threeMonthsAgoIncome + twoMonthsAgoIncome + previousIncome + currentIncome) / 4,
+      avgExpense: (threeMonthsAgoExpense + twoMonthsAgoExpense + previousExpense + currentExpense) / 4,
+      trend: currentExpense > previousExpense && previousExpense > twoMonthsAgoExpense
+        ? "crescente"
+        : currentExpense < previousExpense && previousExpense < twoMonthsAgoExpense
+        ? "decrescente"
+        : "estável",
+    },
+
+    previousMonthIncome: previousIncome,
+    previousMonthExpense: previousExpense,
+    monthOverMonthIncomeChange:
+      Math.abs(previousIncome) > 0.01
+        ? ((currentIncome - previousIncome) / Math.abs(previousIncome)) * 100
+        : 0,
+    monthOverMonthExpenseChange:
+      Math.abs(previousExpense) > 0.01
+        ? ((currentExpense - previousExpense) / Math.abs(previousExpense)) * 100
+        : 0,
+    savingsRate:
+      currentIncome > 0.01
+        ? ((currentIncome - currentExpense) / currentIncome) * 100
+        : 0,
+    topExpenseCategories: expensesByCategory.map(
+      (cat: { categoryName: string; total: unknown }) => ({
+        category: cat.categoryName,
+        amount: Math.abs(toNumber(cat.total)),
+        percentageOfTotal:
+          currentExpense > 0
+            ? (Math.abs(toNumber(cat.total)) / currentExpense) * 100
+            : 0,
+      })
+    ),
+    budgets: budgetsData.map(
+      (b: { categoryName: string; budgetAmount: unknown; spent: unknown }) => ({
+        category: b.categoryName,
+        budgetAmount: toNumber(b.budgetAmount),
+        spent: Math.abs(toNumber(b.spent)),
+        usagePercentage:
+          toNumber(b.budgetAmount) > 0
+            ? (Math.abs(toNumber(b.spent)) / toNumber(b.budgetAmount)) * 100
+            : 0,
+      })
+    ),
+    creditCards: {
+      totalLimit: toNumber(cardsData[0]?.totalLimit ?? 0),
+      cardCount: toNumber(cardsData[0]?.cardCount ?? 0),
+    },
+    accounts: {
+      totalBalance: toNumber(accountsData[0]?.totalBalance ?? 0),
+      accountCount: toNumber(accountsData[0]?.accountCount ?? 0),
+    },
+    avgTicket: toNumber(avgTicketData[0]?.avgAmount ?? 0),
+    transactionCount: toNumber(avgTicketData[0]?.transactionCount ?? 0),
+    dayOfWeekSpending: Array.from(dayTotals.entries()).map(([day, total]) => ({
+      dayOfWeek:
+        ["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sáb"][day] ?? "N/A",
+      total,
+    })),
+    paymentMethodsBreakdown: paymentMethodsData.map(
+      (pm: { paymentMethod: string | null; total: unknown }) => ({
+        method: pm.paymentMethod,
+        total: toNumber(pm.total),
+        percentage:
+          currentExpense > 0 ? (toNumber(pm.total) / currentExpense) * 100 : 0,
+      })
+    ),
+
+    // Análise de recorrência
+    recurringExpenses: {
+      count: recurringExpenses.length,
+      total: totalRecurring,
+      percentageOfTotal: currentExpense > 0 ? (totalRecurring / currentExpense) * 100 : 0,
+      topRecurring: recurringExpenses
+        .sort((a, b) => b.avgAmount - a.avgAmount)
+        .slice(0, 5)
+        .map(r => ({
+          name: r.name,
+          avgAmount: r.avgAmount,
+          frequency: r.frequency,
+        })),
+      predictability: currentExpense > 0 ? (totalRecurring / currentExpense) * 100 : 0,
+    },
+
+    // Análise de parcelamentos
+    installments: {
+      currentMonthInstallments: installmentData.length,
+      totalInstallmentAmount,
+      percentageOfExpenses: currentExpense > 0 ? (totalInstallmentAmount / currentExpense) * 100 : 0,
+      futureCommitment,
+      topInstallments: installmentData
+        .sort((a, b) => b.amount - a.amount)
+        .slice(0, 5)
+        .map(i => ({
+          name: i.name,
+          current: i.currentInstallment,
+          total: i.totalInstallments,
+          amount: i.amount,
+          category: i.category,
+          remaining: i.totalInstallments - i.currentInstallment,
+        })),
+    },
+  };
+
+  return aggregatedData;
+}
+
+/**
+ * Gera insights usando IA
+ */
+export async function generateInsightsAction(
+  period: string,
+  modelId: string
+): Promise<ActionResult<InsightsResponse>> {
+  try {
+    const user = await getUser();
+
+    // Validar modelo - verificar se existe na lista ou se é um modelo customizado
+    const selectedModel = AVAILABLE_MODELS.find((m) => m.id === modelId);
+
+    // Se não encontrou na lista e não tem "/" (formato OpenRouter), é inválido
+    if (!selectedModel && !modelId.includes("/")) {
+      return {
+        success: false,
+        error: "Modelo inválido.",
+      };
+    }
+
+    // Agregar dados
+    const aggregatedData = await aggregateMonthData(user.id, period);
+
+    // Selecionar provider
+    let model;
+
+    // Se o modelo tem "/" é OpenRouter (formato: provider/model)
+    if (modelId.includes("/")) {
+      const apiKey = process.env.OPENROUTER_API_KEY;
+      if (!apiKey) {
+        return {
+          success: false,
+          error: "OPENROUTER_API_KEY não configurada. Adicione a chave no arquivo .env",
+        };
+      }
+
+      const openrouter = createOpenRouter({
+        apiKey,
+      });
+      model = openrouter.chat(modelId);
+    } else if (selectedModel?.provider === "openai") {
+      model = openai(modelId);
+    } else if (selectedModel?.provider === "anthropic") {
+      model = anthropic(modelId);
+    } else if (selectedModel?.provider === "google") {
+      model = google(modelId);
+    } else {
+      return {
+        success: false,
+        error: "Provider de modelo não suportado.",
+      };
+    }
+
+    // Chamar AI SDK
+    const result = await generateObject({
+      model,
+      schema: InsightsResponseSchema,
+      system: INSIGHTS_SYSTEM_PROMPT,
+      prompt: `Analise os seguintes dados financeiros agregados do período ${period}.
+
+Dados agregados:
+${JSON.stringify(aggregatedData, null, 2)}
+
+DADOS IMPORTANTES PARA SUA ANÁLISE:
+
+**Tendência de 3 meses:**
+- Os dados incluem tendência dos últimos 3 meses (threeMonthTrend)
+- Use isso para identificar padrões crescentes, decrescentes ou estáveis
+- Compare o mês atual com a média dos 3 meses
+
+**Análise de Recorrência:**
+- Gastos recorrentes representam ${aggregatedData.recurringExpenses.percentageOfTotal.toFixed(1)}% das despesas
+- ${aggregatedData.recurringExpenses.count} gastos identificados como recorrentes
+- Use isso para avaliar previsibilidade e oportunidades de otimização
+
+**Gastos Parcelados:**
+- ${aggregatedData.installments.currentMonthInstallments} parcelas ativas no mês
+- Comprometimento futuro de R$ ${aggregatedData.installments.futureCommitment.toFixed(2)}
+- Use isso para alertas sobre comprometimento de renda futura
+
+Organize suas observações nas 4 categorias especificadas no prompt do sistema:
+1. Comportamentos Observados (behaviors): 3-6 itens
+2. Gatilhos de Consumo (triggers): 3-6 itens
+3. Recomendações Práticas (recommendations): 3-6 itens
+4. Melhorias Sugeridas (improvements): 3-6 itens
+
+Cada item deve ser conciso, direto e acionável. Use os novos dados para dar contexto temporal e identificar padrões mais profundos.
+
+Responda APENAS com um JSON válido seguindo exatamente o schema especificado.`,
+    });
+
+    // Validar resposta
+    const validatedData = InsightsResponseSchema.parse(result.object);
+
+    return {
+      success: true,
+      data: validatedData,
+    };
+  } catch (error) {
+    console.error("Error generating insights:", error);
+    return {
+      success: false,
+      error:
+        error instanceof Error
+          ? error.message
+          : "Erro ao gerar insights. Tente novamente.",
+    };
+  }
+}
+
+/**
+ * Salva insights gerados no banco de dados
+ */
+export async function saveInsightsAction(
+  period: string,
+  modelId: string,
+  data: InsightsResponse
+): Promise<ActionResult<{ id: string; createdAt: Date }>> {
+  try {
+    const user = await getUser();
+
+    // Verificar se já existe um insight salvo para este período
+    const existing = await db
+      .select()
+      .from(savedInsights)
+      .where(
+        and(eq(savedInsights.userId, user.id), eq(savedInsights.period, period))
+      )
+      .limit(1);
+
+    if (existing.length > 0) {
+      // Atualizar existente
+      const updated = await db
+        .update(savedInsights)
+        .set({
+          modelId,
+          data: JSON.stringify(data),
+          updatedAt: new Date(),
+        })
+        .where(
+          and(
+            eq(savedInsights.userId, user.id),
+            eq(savedInsights.period, period)
+          )
+        )
+        .returning({ id: savedInsights.id, createdAt: savedInsights.createdAt });
+
+      const updatedRecord = updated[0];
+      if (!updatedRecord) {
+        return {
+          success: false,
+          error: "Falha ao atualizar a análise. Tente novamente.",
+        };
+      }
+
+      return {
+        success: true,
+        data: {
+          id: updatedRecord.id,
+          createdAt: updatedRecord.createdAt,
+        },
+      };
+    }
+
+    // Criar novo
+    const result = await db
+      .insert(savedInsights)
+      .values({
+        userId: user.id,
+        period,
+        modelId,
+        data: JSON.stringify(data),
+      })
+      .returning({ id: savedInsights.id, createdAt: savedInsights.createdAt });
+
+    const insertedRecord = result[0];
+    if (!insertedRecord) {
+      return {
+        success: false,
+        error: "Falha ao salvar a análise. Tente novamente.",
+      };
+    }
+
+    return {
+      success: true,
+      data: {
+        id: insertedRecord.id,
+        createdAt: insertedRecord.createdAt,
+      },
+    };
+  } catch (error) {
+    console.error("Error saving insights:", error);
+    return {
+      success: false,
+      error:
+        error instanceof Error
+          ? error.message
+          : "Erro ao salvar análise. Tente novamente.",
+    };
+  }
+}
+
+/**
+ * Carrega insights salvos do banco de dados
+ */
+export async function loadSavedInsightsAction(
+  period: string
+): Promise<
+  ActionResult<{
+    insights: InsightsResponse;
+    modelId: string;
+    createdAt: Date;
+  } | null>
+> {
+  try {
+    const user = await getUser();
+
+    const result = await db
+      .select()
+      .from(savedInsights)
+      .where(
+        and(eq(savedInsights.userId, user.id), eq(savedInsights.period, period))
+      )
+      .limit(1);
+
+    if (result.length === 0) {
+      return {
+        success: true,
+        data: null,
+      };
+    }
+
+    const saved = result[0];
+    if (!saved) {
+      return {
+        success: true,
+        data: null,
+      };
+    }
+
+    const insights = InsightsResponseSchema.parse(JSON.parse(saved.data));
+
+    return {
+      success: true,
+      data: {
+        insights,
+        modelId: saved.modelId,
+        createdAt: saved.createdAt,
+      },
+    };
+  } catch (error) {
+    console.error("Error loading saved insights:", error);
+    return {
+      success: false,
+      error:
+        error instanceof Error
+          ? error.message
+          : "Erro ao carregar análise salva. Tente novamente.",
+    };
+  }
+}
+
+/**
+ * Remove insights salvos do banco de dados
+ */
+export async function deleteSavedInsightsAction(
+  period: string
+): Promise<ActionResult<void>> {
+  try {
+    const user = await getUser();
+
+    await db
+      .delete(savedInsights)
+      .where(
+        and(eq(savedInsights.userId, user.id), eq(savedInsights.period, period))
+      );
+
+    return {
+      success: true,
+      data: undefined,
+    };
+  } catch (error) {
+    console.error("Error deleting saved insights:", error);
+    return {
+      success: false,
+      error:
+        error instanceof Error
+          ? error.message
+          : "Erro ao remover análise. Tente novamente.",
+    };
+  }
+}
diff --git a/app/(dashboard)/insights/data.ts b/app/(dashboard)/insights/data.ts
new file mode 100644
index 0000000..506eed8
--- /dev/null
+++ b/app/(dashboard)/insights/data.ts
@@ -0,0 +1,145 @@
+/**
+ * Tipos de providers disponíveis
+ */
+export type AIProvider = "openai" | "anthropic" | "google" | "openrouter";
+
+/**
+ * Metadados dos providers
+ */
+export const PROVIDERS = {
+  openai: {
+    id: "openai" as const,
+    name: "ChatGPT",
+    icon: "RiOpenaiLine",
+  },
+  anthropic: {
+    id: "anthropic" as const,
+    name: "Claude AI",
+    icon: "RiRobot2Line",
+  },
+  google: {
+    id: "google" as const,
+    name: "Gemini",
+    icon: "RiGoogleLine",
+  },
+  openrouter: {
+    id: "openrouter" as const,
+    name: "OpenRouter",
+    icon: "RiRouterLine",
+  },
+} as const;
+
+/**
+ * Lista de modelos de IA disponíveis para análise de insights
+ */
+export const AVAILABLE_MODELS = [
+  // OpenAI Models (5)
+  { id: "gpt-5", name: "GPT-5", provider: "openai" as const },
+  { id: "gpt-5-mini", name: "GPT-5 Mini", provider: "openai" as const },
+  { id: "gpt-5-nano", name: "GPT-5 Nano", provider: "openai" as const },
+  { id: "gpt-4.1", name: "GPT-4.1", provider: "openai" as const },
+  { id: "gpt-4o", name: "GPT-4o (Omni)", provider: "openai" as const },
+
+  // Anthropic Models (5)
+  {
+    id: "claude-3.7-sonnet",
+    name: "Claude 3.7 Sonnet",
+    provider: "anthropic" as const,
+  },
+  {
+    id: "claude-4-opus",
+    name: "Claude 4 Opus",
+    provider: "anthropic" as const,
+  },
+  {
+    id: "claude-4.5-sonnet",
+    name: "Claude 4.5 Sonnet",
+    provider: "anthropic" as const,
+  },
+  {
+    id: "claude-4.5-haiku",
+    name: "Claude 4.5 Haiku",
+    provider: "anthropic" as const,
+  },
+  {
+    id: "claude-3.5-sonnet-20240620",
+    name: "Claude 3.5 Sonnet (2024-06-20)",
+    provider: "anthropic" as const,
+  },
+
+  // Google Models (5)
+  {
+    id: "gemini-2.5-pro",
+    name: "Gemini 2.5 Pro",
+    provider: "google" as const,
+  },
+  {
+    id: "gemini-2.5-flash",
+    name: "Gemini 2.5 Flash",
+    provider: "google" as const,
+  },
+] as const;
+
+/**
+ * Modelo padrão
+ */
+export const DEFAULT_MODEL = "gpt-5";
+export const DEFAULT_PROVIDER = "openai";
+
+/**
+ * System prompt para análise de insights
+ */
+export const INSIGHTS_SYSTEM_PROMPT = `Você é um especialista em comportamento financeiro. Analise os dados financeiros fornecidos e organize suas observações em 4 categorias específicas:
+
+1. **Comportamentos Observados** (behaviors): Padrões de gastos e hábitos financeiros identificados nos dados. Foque em comportamentos recorrentes e tendências. Considere:
+   - Tendência dos últimos 3 meses (crescente, decrescente, estável)
+   - Gastos recorrentes e sua previsibilidade
+   - Padrões de parcelamento e comprometimento futuro
+
+2. **Gatilhos de Consumo** (triggers): Identifique situações, períodos ou categorias que desencadeiam maiores gastos. O que leva o usuário a gastar mais? Analise:
+   - Dias da semana com mais gastos
+   - Categorias que cresceram nos últimos meses
+   - Métodos de pagamento que facilitam gastos
+
+3. **Recomendações Práticas** (recommendations): Sugestões concretas e acionáveis para melhorar a saúde financeira. Seja específico e direto. Use os dados de:
+   - Gastos recorrentes que podem ser otimizados
+   - Orçamentos que estão sendo ultrapassados
+   - Comprometimento futuro com parcelamentos
+
+4. **Melhorias Sugeridas** (improvements): Oportunidades de otimização e estratégias de longo prazo para alcançar objetivos financeiros. Considere:
+   - Tendências preocupantes dos últimos 3 meses
+   - Percentual de gastos recorrentes vs pontuais
+   - Estratégias para reduzir comprometimento futuro
+
+Para cada categoria, forneça de 3 a 6 itens concisos e objetivos. Use linguagem clara e direta, com verbos de ação. Mantenha privacidade e não exponha dados pessoais sensíveis.
+
+IMPORTANTE: Utilize os novos dados disponíveis (threeMonthTrend, recurringExpenses, installments) para fornecer insights mais ricos e contextualizados.
+
+Responda EXCLUSIVAMENTE com um JSON válido seguindo o esquema:
+{
+  "month": "YYYY-MM",
+  "generatedAt": "ISO datetime",
+  "categories": [
+    {
+      "category": "behaviors",
+      "items": [
+        { "text": "Observação aqui" },
+        ...
+      ]
+    },
+    {
+      "category": "triggers",
+      "items": [...]
+    },
+    {
+      "category": "recommendations",
+      "items": [...]
+    },
+    {
+      "category": "improvements",
+      "items": [...]
+    }
+  ]
+}
+
+`;
diff --git a/app/(dashboard)/insights/layout.tsx b/app/(dashboard)/insights/layout.tsx
new file mode 100644
index 0000000..2179bb0
--- /dev/null
+++ b/app/(dashboard)/insights/layout.tsx
@@ -0,0 +1,23 @@
+import PageDescription from "@/components/page-description";
+import { RiSparklingLine } from "@remixicon/react";
+
+export const metadata = {
+  title: "Insights | OpenSheets",
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <section className="space-y-6 px-6">
+      <PageDescription
+        icon={<RiSparklingLine />}
+        title="Insights"
+        subtitle="Análise inteligente dos seus dados financeiros para identificar padrões, comportamentos e oportunidades de melhoria."
+      />
+      {children}
+    </section>
+  );
+}
diff --git a/app/(dashboard)/insights/loading.tsx b/app/(dashboard)/insights/loading.tsx
new file mode 100644
index 0000000..52aad2c
--- /dev/null
+++ b/app/(dashboard)/insights/loading.tsx
@@ -0,0 +1,42 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+/**
+ * Loading state para a página de insights com IA
+ */
+export default function InsightsLoading() {
+  return (
+    <main className="flex flex-col gap-6">
+      <div className="space-y-6">
+        {/* Header */}
+        <div className="space-y-2">
+          <Skeleton className="h-10 w-64 rounded-2xl bg-foreground/10" />
+          <Skeleton className="h-6 w-96 rounded-2xl bg-foreground/10" />
+        </div>
+
+        {/* Grid de insights */}
+        <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
+          {Array.from({ length: 4 }).map((_, i) => (
+            <div
+              key={i}
+              className="rounded-2xl border p-6 space-y-4"
+            >
+              <div className="flex items-start justify-between">
+                <div className="space-y-2 flex-1">
+                  <Skeleton className="h-6 w-48 rounded-2xl bg-foreground/10" />
+                  <Skeleton className="h-4 w-full rounded-2xl bg-foreground/10" />
+                  <Skeleton className="h-4 w-3/4 rounded-2xl bg-foreground/10" />
+                </div>
+                <Skeleton className="size-8 rounded-full bg-foreground/10" />
+              </div>
+              <div className="space-y-2">
+                <Skeleton className="h-3 w-full rounded-2xl bg-foreground/10" />
+                <Skeleton className="h-3 w-full rounded-2xl bg-foreground/10" />
+                <Skeleton className="h-3 w-2/3 rounded-2xl bg-foreground/10" />
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </main>
+  );
+}
diff --git a/app/(dashboard)/insights/page.tsx b/app/(dashboard)/insights/page.tsx
new file mode 100644
index 0000000..c8ad780
--- /dev/null
+++ b/app/(dashboard)/insights/page.tsx
@@ -0,0 +1,31 @@
+import { InsightsPage } from "@/components/insights/insights-page";
+import MonthPicker from "@/components/month-picker/month-picker";
+import { parsePeriodParam } from "@/lib/utils/period";
+
+type PageSearchParams = Promise<Record<string, string | string[] | undefined>>;
+
+type PageProps = {
+  searchParams?: PageSearchParams;
+};
+
+const getSingleParam = (
+  params: Record<string, string | string[] | undefined> | undefined,
+  key: string
+) => {
+  const value = params?.[key];
+  if (!value) return null;
+  return Array.isArray(value) ? value[0] ?? null : value;
+};
+
+export default async function Page({ searchParams }: PageProps) {
+  const resolvedSearchParams = searchParams ? await searchParams : undefined;
+  const periodoParam = getSingleParam(resolvedSearchParams, "periodo");
+  const { period: selectedPeriod } = parsePeriodParam(periodoParam);
+
+  return (
+    <main className="flex flex-col gap-6">
+      <MonthPicker />
+      <InsightsPage period={selectedPeriod} />
+    </main>
+  );
+}
diff --git a/app/(dashboard)/lancamentos/actions.ts b/app/(dashboard)/lancamentos/actions.ts
new file mode 100644
index 0000000..41d059e
--- /dev/null
+++ b/app/(dashboard)/lancamentos/actions.ts
@@ -0,0 +1,1403 @@
+"use server";
+
+import { contas, lancamentos } from "@/db/schema";
+import {
+  INITIAL_BALANCE_CONDITION,
+  INITIAL_BALANCE_NOTE,
+  INITIAL_BALANCE_PAYMENT_METHOD,
+  INITIAL_BALANCE_TRANSACTION_TYPE,
+} from "@/lib/accounts/constants";
+import { handleActionError, revalidateForEntity } from "@/lib/actions/helpers";
+import type { ActionResult } from "@/lib/actions/types";
+import { db } from "@/lib/db";
+import { getUser } from "@/lib/auth/server";
+import {
+  LANCAMENTO_CONDITIONS,
+  LANCAMENTO_PAYMENT_METHODS,
+  LANCAMENTO_TRANSACTION_TYPES,
+} from "@/lib/lancamentos/constants";
+import {
+  buildEntriesByPagador,
+  sendPagadorAutoEmails,
+} from "@/lib/pagadores/notifications";
+import { noteSchema, uuidSchema } from "@/lib/schemas/common";
+import { formatDecimalForDbRequired } from "@/lib/utils/currency";
+import { getTodayDateString } from "@/lib/utils/date";
+import { and, asc, desc, eq, gte, inArray, sql } from "drizzle-orm";
+import { randomUUID } from "node:crypto";
+import { z } from "zod";
+
+const resolvePeriod = (purchaseDate: string, period?: string | null) => {
+  if (period && /^\d{4}-\d{2}$/.test(period)) {
+    return period;
+  }
+
+  const date = new Date(purchaseDate);
+  if (Number.isNaN(date.getTime())) {
+    throw new Error("Data da transação inválida.");
+  }
+
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  return `${year}-${month}`;
+};
+
+const getTodayDate = () => new Date(getTodayDateString());
+
+const baseFields = z.object({
+  purchaseDate: z
+    .string({ message: "Informe a data da transação." })
+    .trim()
+    .refine((value) => !Number.isNaN(new Date(value).getTime()), {
+      message: "Data da transação inválida.",
+    }),
+  period: z
+    .string()
+    .trim()
+    .regex(/^(\d{4})-(\d{2})$/, {
+      message: "Selecione um período válido.",
+    })
+    .optional(),
+  name: z
+    .string({ message: "Informe o estabelecimento." })
+    .trim()
+    .min(1, "Informe o estabelecimento."),
+  transactionType: z
+    .enum(LANCAMENTO_TRANSACTION_TYPES, {
+      message: "Selecione um tipo de transação válido.",
+    })
+    .default(LANCAMENTO_TRANSACTION_TYPES[0]),
+  amount: z.coerce
+    .number({ message: "Informe o valor da transação." })
+    .min(0, "Informe um valor maior ou igual a zero."),
+  condition: z.enum(LANCAMENTO_CONDITIONS, {
+    message: "Selecione uma condição válida.",
+  }),
+  paymentMethod: z.enum(LANCAMENTO_PAYMENT_METHODS, {
+    message: "Selecione uma forma de pagamento válida.",
+  }),
+  pagadorId: uuidSchema("Pagador").nullable().optional(),
+  secondaryPagadorId: uuidSchema("Pagador secundário").optional(),
+  isSplit: z.boolean().optional().default(false),
+  contaId: uuidSchema("Conta").nullable().optional(),
+  cartaoId: uuidSchema("Cartão").nullable().optional(),
+  categoriaId: uuidSchema("Categoria").nullable().optional(),
+  note: noteSchema,
+  installmentCount: z.coerce
+    .number()
+    .int()
+    .min(1, "Selecione uma quantidade válida.")
+    .max(60, "Selecione uma quantidade válida.")
+    .optional(),
+  recurrenceCount: z.coerce
+    .number()
+    .int()
+    .min(1, "Selecione uma recorrência válida.")
+    .max(60, "Selecione uma recorrência válida.")
+    .optional(),
+  dueDate: z
+    .string()
+    .trim()
+    .refine((value) => !value || !Number.isNaN(new Date(value).getTime()), {
+      message: "Informe uma data de vencimento válida.",
+    })
+    .optional(),
+  boletoPaymentDate: z
+    .string()
+    .trim()
+    .refine((value) => !value || !Number.isNaN(new Date(value).getTime()), {
+      message: "Informe uma data de pagamento válida.",
+    })
+    .optional(),
+  isSettled: z.boolean().nullable().optional(),
+});
+
+const refineLancamento = (
+  data: z.infer<typeof baseFields> & { id?: string },
+  ctx: z.RefinementCtx
+) => {
+  if (data.condition === "Parcelado") {
+    if (!data.installmentCount) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        path: ["installmentCount"],
+        message: "Informe a quantidade de parcelas.",
+      });
+    } else if (data.installmentCount < 2) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        path: ["installmentCount"],
+        message: "Selecione pelo menos duas parcelas.",
+      });
+    }
+  }
+
+  if (data.condition === "Recorrente") {
+    if (!data.recurrenceCount) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        path: ["recurrenceCount"],
+        message: "Informe por quantos meses a recorrência acontecerá.",
+      });
+    } else if (data.recurrenceCount < 2) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        path: ["recurrenceCount"],
+        message: "A recorrência deve ter ao menos dois meses.",
+      });
+    }
+  }
+
+  if (data.isSplit) {
+    if (!data.pagadorId) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        path: ["pagadorId"],
+        message: "Selecione o pagador principal para dividir o lançamento.",
+      });
+    }
+
+    if (!data.secondaryPagadorId) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        path: ["secondaryPagadorId"],
+        message: "Selecione o pagador secundário para dividir o lançamento.",
+      });
+    } else if (data.pagadorId && data.secondaryPagadorId === data.pagadorId) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        path: ["secondaryPagadorId"],
+        message: "Escolha um pagador diferente para dividir o lançamento.",
+      });
+    }
+  }
+};
+
+const createSchema = baseFields.superRefine(refineLancamento);
+const updateSchema = baseFields
+  .extend({
+    id: uuidSchema("Lançamento"),
+  })
+  .superRefine(refineLancamento);
+
+const deleteSchema = z.object({
+  id: uuidSchema("Lançamento"),
+});
+
+const toggleSettlementSchema = z.object({
+  id: uuidSchema("Lançamento"),
+  value: z.boolean({
+    message: "Informe o status de pagamento.",
+  }),
+});
+
+type BaseInput = z.infer<typeof baseFields>;
+type CreateInput = z.infer<typeof createSchema>;
+type UpdateInput = z.infer<typeof updateSchema>;
+type DeleteInput = z.infer<typeof deleteSchema>;
+type ToggleSettlementInput = z.infer<typeof toggleSettlementSchema>;
+
+const revalidate = () => revalidateForEntity("lancamentos");
+
+const resolveUserLabel = (user: {
+  name?: string | null;
+  email?: string | null;
+}) => {
+  if (user?.name && user.name.trim().length > 0) {
+    return user.name;
+  }
+  if (user?.email && user.email.trim().length > 0) {
+    return user.email;
+  }
+  return "OpenSheets";
+};
+
+type InitialCandidate = {
+  note: string | null;
+  transactionType: string | null;
+  condition: string | null;
+  paymentMethod: string | null;
+};
+
+const isInitialBalanceLancamento = (record?: InitialCandidate | null) =>
+  !!record &&
+  record.note === INITIAL_BALANCE_NOTE &&
+  record.transactionType === INITIAL_BALANCE_TRANSACTION_TYPE &&
+  record.condition === INITIAL_BALANCE_CONDITION &&
+  record.paymentMethod === INITIAL_BALANCE_PAYMENT_METHOD;
+
+const centsToDecimalString = (value: number) => {
+  const decimal = value / 100;
+  const formatted = decimal.toFixed(2);
+  return Object.is(decimal, -0) ? "0.00" : formatted;
+};
+
+const splitAmount = (totalCents: number, parts: number) => {
+  if (parts <= 0) {
+    return [];
+  }
+
+  const base = Math.trunc(totalCents / parts);
+  const remainder = totalCents % parts;
+
+  return Array.from(
+    { length: parts },
+    (_, index) => base + (index < remainder ? 1 : 0)
+  );
+};
+
+const addMonthsToPeriod = (period: string, offset: number) => {
+  const [yearStr, monthStr] = period.split("-");
+  const baseYear = Number(yearStr);
+  const baseMonth = Number(monthStr);
+
+  if (!baseYear || !baseMonth) {
+    throw new Error("Período inválido.");
+  }
+
+  const date = new Date(baseYear, baseMonth - 1, 1);
+  date.setMonth(date.getMonth() + offset);
+
+  const nextYear = date.getFullYear();
+  const nextMonth = String(date.getMonth() + 1).padStart(2, "0");
+  return `${nextYear}-${nextMonth}`;
+};
+
+const addMonthsToDate = (value: Date, offset: number) => {
+  const result = new Date(value);
+  const originalDay = result.getDate();
+
+  result.setDate(1);
+  result.setMonth(result.getMonth() + offset);
+
+  const lastDay = new Date(
+    result.getFullYear(),
+    result.getMonth() + 1,
+    0
+  ).getDate();
+
+  result.setDate(Math.min(originalDay, lastDay));
+  return result;
+};
+
+type Share = {
+  pagadorId: string | null;
+  amountCents: number;
+};
+
+const buildShares = ({
+  totalCents,
+  pagadorId,
+  isSplit,
+  secondaryPagadorId,
+}: {
+  totalCents: number;
+  pagadorId: string | null;
+  isSplit: boolean;
+  secondaryPagadorId?: string;
+}): Share[] => {
+  if (isSplit) {
+    if (!pagadorId || !secondaryPagadorId) {
+      throw new Error("Configuração de divisão inválida para o lançamento.");
+    }
+
+    const [primaryAmount, secondaryAmount] = splitAmount(totalCents, 2);
+    return [
+      { pagadorId, amountCents: primaryAmount },
+      { pagadorId: secondaryPagadorId, amountCents: secondaryAmount },
+    ];
+  }
+
+  return [{ pagadorId, amountCents: totalCents }];
+};
+
+type BuildLancamentoRecordsParams = {
+  data: BaseInput;
+  userId: string;
+  period: string;
+  purchaseDate: Date;
+  dueDate: Date | null;
+  boletoPaymentDate: Date | null;
+  shares: Share[];
+  amountSign: 1 | -1;
+  shouldNullifySettled: boolean;
+  seriesId: string | null;
+};
+
+type LancamentoInsert = typeof lancamentos.$inferInsert;
+
+const buildLancamentoRecords = ({
+  data,
+  userId,
+  period,
+  purchaseDate,
+  dueDate,
+  boletoPaymentDate,
+  shares,
+  amountSign,
+  shouldNullifySettled,
+  seriesId,
+}: BuildLancamentoRecordsParams): LancamentoInsert[] => {
+  const records: LancamentoInsert[] = [];
+
+  const basePayload = {
+    name: data.name,
+    transactionType: data.transactionType,
+    condition: data.condition,
+    paymentMethod: data.paymentMethod,
+    note: data.note ?? null,
+    contaId: data.contaId ?? null,
+    cartaoId: data.cartaoId ?? null,
+    categoriaId: data.categoriaId ?? null,
+    recurrenceCount: null as number | null,
+    installmentCount: null as number | null,
+    currentInstallment: null as number | null,
+    isDivided: data.isSplit ?? false,
+    userId,
+    seriesId,
+  };
+
+  const resolveSettledValue = (cycleIndex: number) => {
+    if (shouldNullifySettled) {
+      return null;
+    }
+    const initialSettled = data.isSettled ?? false;
+    if (data.condition === "Parcelado" || data.condition === "Recorrente") {
+      return cycleIndex === 0 ? initialSettled : false;
+    }
+    return initialSettled;
+  };
+
+  if (data.condition === "Parcelado") {
+    const installmentTotal = data.installmentCount ?? 0;
+    const amountsByShare = shares.map((share) =>
+      splitAmount(share.amountCents, installmentTotal)
+    );
+
+    for (
+      let installment = 0;
+      installment < installmentTotal;
+      installment += 1
+    ) {
+      const installmentPeriod = addMonthsToPeriod(period, installment);
+      const installmentPurchaseDate = addMonthsToDate(
+        purchaseDate,
+        installment
+      );
+      const installmentDueDate = dueDate
+        ? addMonthsToDate(dueDate, installment)
+        : null;
+
+      shares.forEach((share, shareIndex) => {
+        const amountCents = amountsByShare[shareIndex]?.[installment] ?? 0;
+        const settled = resolveSettledValue(installment);
+        records.push({
+          ...basePayload,
+          amount: centsToDecimalString(amountCents * amountSign),
+          pagadorId: share.pagadorId,
+          purchaseDate: installmentPurchaseDate,
+          period: installmentPeriod,
+          isSettled: settled,
+          installmentCount: installmentTotal,
+          currentInstallment: installment + 1,
+          recurrenceCount: null,
+          dueDate: installmentDueDate,
+          boletoPaymentDate:
+            data.paymentMethod === "Boleto" && settled
+              ? boletoPaymentDate
+              : null,
+        });
+      });
+    }
+
+    return records;
+  }
+
+  if (data.condition === "Recorrente") {
+    const recurrenceTotal = data.recurrenceCount ?? 0;
+
+    for (let index = 0; index < recurrenceTotal; index += 1) {
+      const recurrencePeriod = addMonthsToPeriod(period, index);
+      const recurrencePurchaseDate = addMonthsToDate(purchaseDate, index);
+      const recurrenceDueDate = dueDate
+        ? addMonthsToDate(dueDate, index)
+        : null;
+
+      shares.forEach((share) => {
+        const settled = resolveSettledValue(index);
+        records.push({
+          ...basePayload,
+          amount: centsToDecimalString(share.amountCents * amountSign),
+          pagadorId: share.pagadorId,
+          purchaseDate: recurrencePurchaseDate,
+          period: recurrencePeriod,
+          isSettled: settled,
+          recurrenceCount: recurrenceTotal,
+          dueDate: recurrenceDueDate,
+          boletoPaymentDate:
+            data.paymentMethod === "Boleto" && settled
+              ? boletoPaymentDate
+              : null,
+        });
+      });
+    }
+
+    return records;
+  }
+
+  shares.forEach((share) => {
+    const settled = resolveSettledValue(0);
+    records.push({
+      ...basePayload,
+      amount: centsToDecimalString(share.amountCents * amountSign),
+      pagadorId: share.pagadorId,
+      purchaseDate,
+      period,
+      isSettled: settled,
+      dueDate,
+      boletoPaymentDate:
+        data.paymentMethod === "Boleto" && settled ? boletoPaymentDate : null,
+    });
+  });
+
+  return records;
+};
+
+export async function createLancamentoAction(
+  input: CreateInput
+): Promise<ActionResult> {
+  try {
+    const user = await getUser();
+    const data = createSchema.parse(input);
+
+    const period = resolvePeriod(data.purchaseDate, data.period);
+    const purchaseDate = new Date(data.purchaseDate);
+    const dueDate = data.dueDate ? new Date(data.dueDate) : null;
+    const shouldSetBoletoPaymentDate =
+      data.paymentMethod === "Boleto" && (data.isSettled ?? false);
+    const boletoPaymentDate = shouldSetBoletoPaymentDate
+      ? data.boletoPaymentDate
+        ? new Date(data.boletoPaymentDate)
+        : getTodayDate()
+      : null;
+
+    const amountSign: 1 | -1 = data.transactionType === "Despesa" ? -1 : 1;
+    const totalCents = Math.round(Math.abs(data.amount) * 100);
+    const shouldNullifySettled = data.paymentMethod === "Cartão de crédito";
+
+    const shares = buildShares({
+      totalCents,
+      pagadorId: data.pagadorId ?? null,
+      isSplit: data.isSplit ?? false,
+      secondaryPagadorId: data.secondaryPagadorId,
+    });
+
+    const isSeriesLancamento =
+      data.condition === "Parcelado" || data.condition === "Recorrente";
+    const seriesId = isSeriesLancamento ? randomUUID() : null;
+
+    const records = buildLancamentoRecords({
+      data,
+      userId: user.id,
+      period,
+      purchaseDate,
+      dueDate,
+      shares,
+      amountSign,
+      shouldNullifySettled,
+      boletoPaymentDate,
+      seriesId,
+    });
+
+    if (!records.length) {
+      throw new Error("Não foi possível criar os lançamentos solicitados.");
+    }
+
+    await db.transaction(async (tx: typeof db) => {
+      await tx.insert(lancamentos).values(records);
+    });
+
+    const notificationEntries = buildEntriesByPagador(
+      records.map((record) => ({
+        pagadorId: record.pagadorId ?? null,
+        name: record.name ?? null,
+        amount: record.amount ?? null,
+        transactionType: record.transactionType ?? null,
+        paymentMethod: record.paymentMethod ?? null,
+        condition: record.condition ?? null,
+        purchaseDate: record.purchaseDate ?? null,
+        period: record.period ?? null,
+        note: record.note ?? null,
+      }))
+    );
+
+    if (notificationEntries.size > 0) {
+      await sendPagadorAutoEmails({
+        userLabel: resolveUserLabel(user),
+        action: "created",
+        entriesByPagador: notificationEntries,
+      });
+    }
+
+    revalidate();
+
+    return { success: true, message: "Lançamento criado com sucesso." };
+  } catch (error) {
+    return handleActionError(error);
+  }
+}
+
+export async function updateLancamentoAction(
+  input: UpdateInput
+): Promise<ActionResult> {
+  try {
+    const user = await getUser();
+    const data = updateSchema.parse(input);
+
+    const existing = await db.query.lancamentos.findFirst({
+      columns: {
+        id: true,
+        note: true,
+        transactionType: true,
+        condition: true,
+        paymentMethod: true,
+        contaId: true,
+        categoriaId: true,
+      },
+      where: and(eq(lancamentos.id, data.id), eq(lancamentos.userId, user.id)),
+      with: {
+        categoria: {
+          columns: {
+            name: true,
+          },
+        },
+      },
+    });
+
+    if (!existing) {
+      return { success: false, error: "Lançamento não encontrado." };
+    }
+
+    // Bloquear edição de lançamentos com categorias protegidas
+    // Nota: "Transferência interna" foi removida para permitir correção de valores
+    const categoriasProtegidasEdicao = ["Saldo inicial", "Pagamentos"];
+    if (
+      existing.categoria?.name &&
+      categoriasProtegidasEdicao.includes(existing.categoria.name)
+    ) {
+      return {
+        success: false,
+        error: `Lançamentos com a categoria '${existing.categoria.name}' não podem ser editados.`,
+      };
+    }
+
+    const period = resolvePeriod(data.purchaseDate, data.period);
+    const amountSign: 1 | -1 = data.transactionType === "Despesa" ? -1 : 1;
+    const amountCents = Math.round(Math.abs(data.amount) * 100);
+    const normalizedAmount = centsToDecimalString(amountCents * amountSign);
+    const normalizedSettled =
+      data.paymentMethod === "Cartão de crédito"
+        ? null
+        : data.isSettled ?? false;
+    const shouldSetBoletoPaymentDate =
+      data.paymentMethod === "Boleto" && Boolean(normalizedSettled);
+    const boletoPaymentDateValue = shouldSetBoletoPaymentDate
+      ? data.boletoPaymentDate
+        ? new Date(data.boletoPaymentDate)
+        : getTodayDate()
+      : null;
+
+    await db
+      .update(lancamentos)
+      .set({
+        name: data.name,
+        purchaseDate: new Date(data.purchaseDate),
+        transactionType: data.transactionType,
+        amount: normalizedAmount,
+        condition: data.condition,
+        paymentMethod: data.paymentMethod,
+        pagadorId: data.pagadorId ?? null,
+        contaId: data.contaId ?? null,
+        cartaoId: data.cartaoId ?? null,
+        categoriaId: data.categoriaId ?? null,
+        note: data.note ?? null,
+        isSettled: normalizedSettled,
+        installmentCount: data.installmentCount ?? null,
+        recurrenceCount: data.recurrenceCount ?? null,
+        dueDate: data.dueDate ? new Date(data.dueDate) : null,
+        boletoPaymentDate: boletoPaymentDateValue,
+        period,
+      })
+      .where(and(eq(lancamentos.id, data.id), eq(lancamentos.userId, user.id)));
+
+    if (isInitialBalanceLancamento(existing) && existing?.contaId) {
+      const updatedInitialBalance = formatDecimalForDbRequired(
+        Math.abs(data.amount ?? 0)
+      );
+      await db
+        .update(contas)
+        .set({ initialBalance: updatedInitialBalance })
+        .where(
+          and(eq(contas.id, existing.contaId), eq(contas.userId, user.id))
+        );
+    }
+
+    revalidate();
+
+    return { success: true, message: "Lançamento atualizado com sucesso." };
+  } catch (error) {
+    return handleActionError(error);
+  }
+}
+
+export async function deleteLancamentoAction(
+  input: DeleteInput
+): Promise<ActionResult> {
+  try {
+    const user = await getUser();
+    const data = deleteSchema.parse(input);
+
+    const existing = await db.query.lancamentos.findFirst({
+      columns: {
+        id: true,
+        name: true,
+        pagadorId: true,
+        amount: true,
+        transactionType: true,
+        paymentMethod: true,
+        condition: true,
+        purchaseDate: true,
+        period: true,
+        note: true,
+        categoriaId: true,
+      },
+      where: and(eq(lancamentos.id, data.id), eq(lancamentos.userId, user.id)),
+      with: {
+        categoria: {
+          columns: {
+            name: true,
+          },
+        },
+      },
+    });
+
+    if (!existing) {
+      return { success: false, error: "Lançamento não encontrado." };
+    }
+
+    // Bloquear remoção de lançamentos com categorias protegidas
+    // Nota: "Transferência interna" foi removida para permitir correção/exclusão
+    const categoriasProtegidasRemocao = ["Saldo inicial", "Pagamentos"];
+    if (
+      existing.categoria?.name &&
+      categoriasProtegidasRemocao.includes(existing.categoria.name)
+    ) {
+      return {
+        success: false,
+        error: `Lançamentos com a categoria '${existing.categoria.name}' não podem ser removidos.`,
+      };
+    }
+
+    await db
+      .delete(lancamentos)
+      .where(and(eq(lancamentos.id, data.id), eq(lancamentos.userId, user.id)));
+
+    if (existing.pagadorId) {
+      const notificationEntries = buildEntriesByPagador([
+        {
+          pagadorId: existing.pagadorId,
+          name: existing.name ?? null,
+          amount: existing.amount ?? null,
+          transactionType: existing.transactionType ?? null,
+          paymentMethod: existing.paymentMethod ?? null,
+          condition: existing.condition ?? null,
+          purchaseDate: existing.purchaseDate ?? null,
+          period: existing.period ?? null,
+          note: existing.note ?? null,
+        },
+      ]);
+
+      await sendPagadorAutoEmails({
+        userLabel: resolveUserLabel(user),
+        action: "deleted",
+        entriesByPagador: notificationEntries,
+      });
+    }
+
+    revalidate();
+
+    return { success: true, message: "Lançamento removido com sucesso." };
+  } catch (error) {
+    return handleActionError(error);
+  }
+}
+
+export async function toggleLancamentoSettlementAction(
+  input: ToggleSettlementInput
+): Promise<ActionResult> {
+  try {
+    const user = await getUser();
+    const data = toggleSettlementSchema.parse(input);
+
+    const existing = await db.query.lancamentos.findFirst({
+      columns: { id: true, paymentMethod: true },
+      where: and(eq(lancamentos.id, data.id), eq(lancamentos.userId, user.id)),
+    });
+
+    if (!existing) {
+      return { success: false, error: "Lançamento não encontrado." };
+    }
+
+    if (existing.paymentMethod === "Cartão de crédito") {
+      return {
+        success: false,
+        error: "Pagamentos com cartão são conciliados automaticamente.",
+      };
+    }
+
+    const isBoleto = existing.paymentMethod === "Boleto";
+    const boletoPaymentDate = isBoleto
+      ? data.value
+        ? getTodayDate()
+        : null
+      : null;
+
+    await db
+      .update(lancamentos)
+      .set({
+        isSettled: data.value,
+        boletoPaymentDate,
+      })
+      .where(and(eq(lancamentos.id, data.id), eq(lancamentos.userId, user.id)));
+
+    revalidate();
+
+    return {
+      success: true,
+      message: data.value
+        ? "Lançamento marcado como pago."
+        : "Pagamento desfeito com sucesso.",
+    };
+  } catch (error) {
+    return handleActionError(error);
+  }
+}
+
+const deleteBulkSchema = z.object({
+  id: uuidSchema("Lançamento"),
+  scope: z.enum(["current", "future", "all"], {
+    message: "Escopo de ação inválido.",
+  }),
+});
+
+type DeleteBulkInput = z.infer<typeof deleteBulkSchema>;
+
+export async function deleteLancamentoBulkAction(
+  input: DeleteBulkInput
+): Promise<ActionResult> {
+  try {
+    const user = await getUser();
+    const data = deleteBulkSchema.parse(input);
+
+    const existing = await db.query.lancamentos.findFirst({
+      columns: {
+        id: true,
+        name: true,
+        seriesId: true,
+        period: true,
+        condition: true,
+      },
+      where: and(eq(lancamentos.id, data.id), eq(lancamentos.userId, user.id)),
+    });
+
+    if (!existing) {
+      return { success: false, error: "Lançamento não encontrado." };
+    }
+
+    if (!existing.seriesId) {
+      return {
+        success: false,
+        error: "Este lançamento não faz parte de uma série.",
+      };
+    }
+
+    if (data.scope === "current") {
+      await db
+        .delete(lancamentos)
+        .where(
+          and(eq(lancamentos.id, data.id), eq(lancamentos.userId, user.id))
+        );
+
+      revalidate();
+      return { success: true, message: "Lançamento removido com sucesso." };
+    }
+
+    if (data.scope === "future") {
+      await db
+        .delete(lancamentos)
+        .where(
+          and(
+            eq(lancamentos.seriesId, existing.seriesId),
+            eq(lancamentos.userId, user.id),
+            sql`${lancamentos.period} >= ${existing.period}`
+          )
+        );
+
+      revalidate();
+      return {
+        success: true,
+        message: "Lançamentos removidos com sucesso.",
+      };
+    }
+
+    if (data.scope === "all") {
+      await db
+        .delete(lancamentos)
+        .where(
+          and(
+            eq(lancamentos.seriesId, existing.seriesId),
+            eq(lancamentos.userId, user.id)
+          )
+        );
+
+      revalidate();
+      return {
+        success: true,
+        message: "Todos os lançamentos da série foram removidos.",
+      };
+    }
+
+    return { success: false, error: "Escopo de ação inválido." };
+  } catch (error) {
+    return handleActionError(error);
+  }
+}
+
+const updateBulkSchema = z.object({
+  id: uuidSchema("Lançamento"),
+  scope: z.enum(["current", "future", "all"], {
+    message: "Escopo de ação inválido.",
+  }),
+  name: z
+    .string({ message: "Informe o estabelecimento." })
+    .trim()
+    .min(1, "Informe o estabelecimento."),
+  categoriaId: uuidSchema("Categoria").nullable().optional(),
+  note: noteSchema,
+  pagadorId: uuidSchema("Pagador").nullable().optional(),
+  contaId: uuidSchema("Conta").nullable().optional(),
+  cartaoId: uuidSchema("Cartão").nullable().optional(),
+  amount: z.coerce
+    .number({ message: "Informe o valor da transação." })
+    .min(0, "Informe um valor maior ou igual a zero.")
+    .optional(),
+  dueDate: z
+    .string()
+    .trim()
+    .refine((value) => !value || !Number.isNaN(new Date(value).getTime()), {
+      message: "Informe uma data de vencimento válida.",
+    })
+    .optional()
+    .nullable(),
+  boletoPaymentDate: z
+    .string()
+    .trim()
+    .refine((value) => !value || !Number.isNaN(new Date(value).getTime()), {
+      message: "Informe uma data de pagamento válida.",
+    })
+    .optional()
+    .nullable(),
+});
+
+type UpdateBulkInput = z.infer<typeof updateBulkSchema>;
+
+export async function updateLancamentoBulkAction(
+  input: UpdateBulkInput
+): Promise<ActionResult> {
+  try {
+    const user = await getUser();
+    const data = updateBulkSchema.parse(input);
+
+    const existing = await db.query.lancamentos.findFirst({
+      columns: {
+        id: true,
+        name: true,
+        seriesId: true,
+        period: true,
+        condition: true,
+        transactionType: true,
+        purchaseDate: true,
+      },
+      where: and(eq(lancamentos.id, data.id), eq(lancamentos.userId, user.id)),
+    });
+
+    if (!existing) {
+      return { success: false, error: "Lançamento não encontrado." };
+    }
+
+    if (!existing.seriesId) {
+      return {
+        success: false,
+        error: "Este lançamento não faz parte de uma série.",
+      };
+    }
+
+    const baseUpdatePayload: Record<string, unknown> = {
+      name: data.name,
+      categoriaId: data.categoriaId ?? null,
+      note: data.note ?? null,
+      pagadorId: data.pagadorId ?? null,
+      contaId: data.contaId ?? null,
+      cartaoId: data.cartaoId ?? null,
+    };
+
+    if (data.amount !== undefined) {
+      const amountSign: 1 | -1 =
+        existing.transactionType === "Despesa" ? -1 : 1;
+      const amountCents = Math.round(Math.abs(data.amount) * 100);
+      baseUpdatePayload.amount = centsToDecimalString(amountCents * amountSign);
+    }
+
+    const hasDueDateUpdate = data.dueDate !== undefined;
+    const hasBoletoPaymentDateUpdate = data.boletoPaymentDate !== undefined;
+
+    const baseDueDate =
+      hasDueDateUpdate && data.dueDate
+        ? new Date(data.dueDate)
+        : hasDueDateUpdate
+        ? null
+        : undefined;
+
+    const baseBoletoPaymentDate =
+      hasBoletoPaymentDateUpdate && data.boletoPaymentDate
+        ? new Date(data.boletoPaymentDate)
+        : hasBoletoPaymentDateUpdate
+        ? null
+        : undefined;
+
+    const basePurchaseDate = existing.purchaseDate ?? null;
+
+    const buildDueDateForRecord = (recordPurchaseDate: Date | null) => {
+      if (!hasDueDateUpdate) {
+        return undefined;
+      }
+
+      if (!baseDueDate) {
+        return null;
+      }
+
+      if (!basePurchaseDate || !recordPurchaseDate) {
+        return baseDueDate;
+      }
+
+      const monthDiff =
+        (recordPurchaseDate.getFullYear() - basePurchaseDate.getFullYear()) *
+          12 +
+        (recordPurchaseDate.getMonth() - basePurchaseDate.getMonth());
+
+      return addMonthsToDate(baseDueDate, monthDiff);
+    };
+
+    const applyUpdates = async (
+      records: Array<{ id: string; purchaseDate: Date | null }>
+    ) => {
+      if (records.length === 0) {
+        return;
+      }
+
+      await db.transaction(async (tx: typeof db) => {
+        for (const record of records) {
+          const perRecordPayload: Record<string, unknown> = {
+            ...baseUpdatePayload,
+          };
+
+          const dueDateForRecord = buildDueDateForRecord(record.purchaseDate);
+          if (dueDateForRecord !== undefined) {
+            perRecordPayload.dueDate = dueDateForRecord;
+          }
+
+          if (hasBoletoPaymentDateUpdate) {
+            perRecordPayload.boletoPaymentDate = baseBoletoPaymentDate ?? null;
+          }
+
+          await tx
+            .update(lancamentos)
+            .set(perRecordPayload)
+            .where(
+              and(
+                eq(lancamentos.id, record.id),
+                eq(lancamentos.userId, user.id)
+              )
+            );
+        }
+      });
+    };
+
+    if (data.scope === "current") {
+      await applyUpdates([
+        {
+          id: data.id,
+          purchaseDate: existing.purchaseDate ?? null,
+        },
+      ]);
+
+      revalidate();
+      return { success: true, message: "Lançamento atualizado com sucesso." };
+    }
+
+    if (data.scope === "future") {
+      const futureLancamentos = await db.query.lancamentos.findMany({
+        columns: {
+          id: true,
+          purchaseDate: true,
+        },
+        where: and(
+          eq(lancamentos.seriesId, existing.seriesId),
+          eq(lancamentos.userId, user.id),
+          sql`${lancamentos.period} >= ${existing.period}`
+        ),
+        orderBy: asc(lancamentos.purchaseDate),
+      });
+
+      await applyUpdates(
+        futureLancamentos.map((item) => ({
+          id: item.id,
+          purchaseDate: item.purchaseDate ?? null,
+        }))
+      );
+
+      revalidate();
+      return {
+        success: true,
+        message: "Lançamentos atualizados com sucesso.",
+      };
+    }
+
+    if (data.scope === "all") {
+      const allLancamentos = await db.query.lancamentos.findMany({
+        columns: {
+          id: true,
+          purchaseDate: true,
+        },
+        where: and(
+          eq(lancamentos.seriesId, existing.seriesId),
+          eq(lancamentos.userId, user.id)
+        ),
+        orderBy: asc(lancamentos.purchaseDate),
+      });
+
+      await applyUpdates(
+        allLancamentos.map((item) => ({
+          id: item.id,
+          purchaseDate: item.purchaseDate ?? null,
+        }))
+      );
+
+      revalidate();
+      return {
+        success: true,
+        message: "Todos os lançamentos da série foram atualizados.",
+      };
+    }
+
+    return { success: false, error: "Escopo de ação inválido." };
+  } catch (error) {
+    return handleActionError(error);
+  }
+}
+
+// Mass Add Schema
+const massAddTransactionSchema = z.object({
+  purchaseDate: z
+    .string({ message: "Informe a data da transação." })
+    .trim()
+    .refine((value) => !Number.isNaN(new Date(value).getTime()), {
+      message: "Data da transação inválida.",
+    }),
+  name: z
+    .string({ message: "Informe o estabelecimento." })
+    .trim()
+    .min(1, "Informe o estabelecimento."),
+  amount: z.coerce
+    .number({ message: "Informe o valor da transação." })
+    .min(0, "Informe um valor maior ou igual a zero."),
+  categoriaId: uuidSchema("Categoria").nullable().optional(),
+});
+
+const massAddSchema = z.object({
+  fixedFields: z.object({
+    transactionType: z.enum(LANCAMENTO_TRANSACTION_TYPES).optional(),
+    pagadorId: uuidSchema("Pagador").nullable().optional(),
+    paymentMethod: z.enum(LANCAMENTO_PAYMENT_METHODS).optional(),
+    condition: z.enum(LANCAMENTO_CONDITIONS).optional(),
+    period: z
+      .string()
+      .trim()
+      .regex(/^(\d{4})-(\d{2})$/, {
+        message: "Selecione um período válido.",
+      })
+      .optional(),
+    contaId: uuidSchema("Conta").nullable().optional(),
+    cartaoId: uuidSchema("Cartão").nullable().optional(),
+  }),
+  transactions: z
+    .array(massAddTransactionSchema)
+    .min(1, "Adicione pelo menos uma transação."),
+});
+
+type MassAddInput = z.infer<typeof massAddSchema>;
+
+export async function createMassLancamentosAction(
+  input: MassAddInput
+): Promise<ActionResult> {
+  try {
+    const user = await getUser();
+    const data = massAddSchema.parse(input);
+
+    // Default values for non-fixed fields
+    const defaultTransactionType = LANCAMENTO_TRANSACTION_TYPES[0];
+    const defaultCondition = LANCAMENTO_CONDITIONS[0];
+    const defaultPaymentMethod = LANCAMENTO_PAYMENT_METHODS[0];
+
+    const allRecords: LancamentoInsert[] = [];
+    const notificationData: Array<{
+      pagadorId: string | null;
+      name: string | null;
+      amount: string | null;
+      transactionType: string | null;
+      paymentMethod: string | null;
+      condition: string | null;
+      purchaseDate: Date | null;
+      period: string | null;
+      note: string | null;
+    }> = [];
+
+    // Process each transaction
+    for (const transaction of data.transactions) {
+      const transactionType =
+        data.fixedFields.transactionType ?? defaultTransactionType;
+      const condition = data.fixedFields.condition ?? defaultCondition;
+      const paymentMethod =
+        data.fixedFields.paymentMethod ?? defaultPaymentMethod;
+      const pagadorId = data.fixedFields.pagadorId ?? null;
+      const contaId =
+        paymentMethod === "Cartão de crédito"
+          ? null
+          : data.fixedFields.contaId ?? null;
+      const cartaoId =
+        paymentMethod === "Cartão de crédito"
+          ? data.fixedFields.cartaoId ?? null
+          : null;
+      const categoriaId = transaction.categoriaId ?? null;
+
+      const period =
+        data.fixedFields.period ?? resolvePeriod(transaction.purchaseDate);
+      const purchaseDate = new Date(transaction.purchaseDate);
+      const amountSign: 1 | -1 = transactionType === "Despesa" ? -1 : 1;
+      const totalCents = Math.round(Math.abs(transaction.amount) * 100);
+      const amount = centsToDecimalString(totalCents * amountSign);
+      const isSettled = paymentMethod === "Cartão de crédito" ? null : false;
+
+      const record: LancamentoInsert = {
+        name: transaction.name,
+        purchaseDate,
+        period,
+        transactionType,
+        amount,
+        condition,
+        paymentMethod,
+        pagadorId,
+        contaId,
+        cartaoId,
+        categoriaId,
+        note: null,
+        installmentCount: null,
+        recurrenceCount: null,
+        currentInstallment: null,
+        isSettled,
+        isDivided: false,
+        dueDate: null,
+        boletoPaymentDate: null,
+        userId: user.id,
+        seriesId: null,
+      };
+
+      allRecords.push(record);
+
+      notificationData.push({
+        pagadorId,
+        name: transaction.name,
+        amount,
+        transactionType,
+        paymentMethod,
+        condition,
+        purchaseDate,
+        period,
+        note: null,
+      });
+    }
+
+    if (!allRecords.length) {
+      throw new Error("Não foi possível criar os lançamentos solicitados.");
+    }
+
+    // Insert all records in a single transaction
+    await db.transaction(async (tx: typeof db) => {
+      await tx.insert(lancamentos).values(allRecords);
+    });
+
+    // Send notifications
+    const notificationEntries = buildEntriesByPagador(notificationData);
+
+    if (notificationEntries.size > 0) {
+      await sendPagadorAutoEmails({
+        userLabel: resolveUserLabel(user),
+        action: "created",
+        entriesByPagador: notificationEntries,
+      });
+    }
+
+    revalidate();
+
+    const count = allRecords.length;
+    return {
+      success: true,
+      message: `${count} ${
+        count === 1 ? "lançamento criado" : "lançamentos criados"
+      } com sucesso.`,
+    };
+  } catch (error) {
+    return handleActionError(error);
+  }
+}
+
+// Delete multiple lancamentos at once
+const deleteMultipleSchema = z.object({
+  ids: z
+    .array(uuidSchema("Lançamento"))
+    .min(1, "Selecione pelo menos um lançamento."),
+});
+
+type DeleteMultipleInput = z.infer<typeof deleteMultipleSchema>;
+
+export async function deleteMultipleLancamentosAction(
+  input: DeleteMultipleInput
+): Promise<ActionResult> {
+  try {
+    const user = await getUser();
+    const data = deleteMultipleSchema.parse(input);
+
+    // Fetch all lancamentos to be deleted
+    const existing = await db.query.lancamentos.findMany({
+      columns: {
+        id: true,
+        name: true,
+        pagadorId: true,
+        amount: true,
+        transactionType: true,
+        paymentMethod: true,
+        condition: true,
+        purchaseDate: true,
+        period: true,
+        note: true,
+      },
+      where: and(
+        inArray(lancamentos.id, data.ids),
+        eq(lancamentos.userId, user.id)
+      ),
+    });
+
+    if (existing.length === 0) {
+      return { success: false, error: "Nenhum lançamento encontrado." };
+    }
+
+    // Delete all lancamentos
+    await db
+      .delete(lancamentos)
+      .where(
+        and(inArray(lancamentos.id, data.ids), eq(lancamentos.userId, user.id))
+      );
+
+    // Send notifications
+    const notificationData = existing
+      .filter((item): item is typeof item & { pagadorId: NonNullable<typeof item.pagadorId> } =>
+        Boolean(item.pagadorId)
+      )
+      .map((item) => ({
+        pagadorId: item.pagadorId,
+        name: item.name ?? null,
+        amount: item.amount ?? null,
+        transactionType: item.transactionType ?? null,
+        paymentMethod: item.paymentMethod ?? null,
+        condition: item.condition ?? null,
+        purchaseDate: item.purchaseDate ?? null,
+        period: item.period ?? null,
+        note: item.note ?? null,
+      }));
+
+    if (notificationData.length > 0) {
+      const notificationEntries = buildEntriesByPagador(notificationData);
+
+      await sendPagadorAutoEmails({
+        userLabel: resolveUserLabel(user),
+        action: "deleted",
+        entriesByPagador: notificationEntries,
+      });
+    }
+
+    revalidate();
+
+    const count = existing.length;
+    return {
+      success: true,
+      message: `${count} ${
+        count === 1 ? "lançamento removido" : "lançamentos removidos"
+      } com sucesso.`,
+    };
+  } catch (error) {
+    return handleActionError(error);
+  }
+}
+
+// Get unique establishment names from the last 3 months
+export async function getRecentEstablishmentsAction(): Promise<string[]> {
+  try {
+    const user = await getUser();
+
+    // Calculate date 3 months ago
+    const threeMonthsAgo = new Date();
+    threeMonthsAgo.setMonth(threeMonthsAgo.getMonth() - 3);
+
+    // Fetch establishment names from the last 3 months
+    const results = await db
+      .select({ name: lancamentos.name })
+      .from(lancamentos)
+      .where(
+        and(
+          eq(lancamentos.userId, user.id),
+          gte(lancamentos.purchaseDate, threeMonthsAgo)
+        )
+      )
+      .orderBy(desc(lancamentos.purchaseDate));
+
+    // Remove duplicates and filter empty names
+    const uniqueNames = Array.from(
+      new Set(
+        results
+          .map((r) => r.name)
+          .filter(
+            (name): name is string =>
+              name != null &&
+              name.trim().length > 0 &&
+              !name.toLowerCase().startsWith("pagamento fatura")
+          )
+      )
+    );
+
+    // Return top 50 most recent unique establishments
+    return uniqueNames.slice(0, 100);
+  } catch (error) {
+    console.error("Error fetching recent establishments:", error);
+    return [];
+  }
+}
diff --git a/app/(dashboard)/lancamentos/anticipation-actions.ts b/app/(dashboard)/lancamentos/anticipation-actions.ts
new file mode 100644
index 0000000..e9dc201
--- /dev/null
+++ b/app/(dashboard)/lancamentos/anticipation-actions.ts
@@ -0,0 +1,471 @@
+"use server";
+
+import {
+  categorias,
+  installmentAnticipations,
+  lancamentos,
+  pagadores,
+  type InstallmentAnticipation,
+  type Lancamento,
+} from "@/db/schema";
+import { handleActionError } from "@/lib/actions/helpers";
+import type { ActionResult } from "@/lib/actions/types";
+import { db } from "@/lib/db";
+import { getUser } from "@/lib/auth/server";
+import {
+  generateAnticipationDescription,
+  generateAnticipationNote,
+} from "@/lib/installments/anticipation-helpers";
+import type {
+  CancelAnticipationInput,
+  CreateAnticipationInput,
+  EligibleInstallment,
+  InstallmentAnticipationWithRelations,
+} from "@/lib/installments/anticipation-types";
+import { uuidSchema } from "@/lib/schemas/common";
+import { formatDecimalForDbRequired } from "@/lib/utils/currency";
+import { and, asc, desc, eq, inArray, isNull, or } from "drizzle-orm";
+import { revalidatePath } from "next/cache";
+import { z } from "zod";
+
+/**
+ * Schema de validação para criar antecipação
+ */
+const createAnticipationSchema = z.object({
+  seriesId: uuidSchema("Série"),
+  installmentIds: z
+    .array(uuidSchema("Parcela"))
+    .min(1, "Selecione pelo menos uma parcela para antecipar."),
+  anticipationPeriod: z
+    .string()
+    .trim()
+    .regex(/^(\d{4})-(\d{2})$/, {
+      message: "Selecione um período válido.",
+    }),
+  discount: z.coerce
+    .number()
+    .min(0, "Informe um desconto maior ou igual a zero.")
+    .optional()
+    .default(0),
+  pagadorId: uuidSchema("Pagador").optional(),
+  categoriaId: uuidSchema("Categoria").optional(),
+  note: z.string().trim().optional(),
+});
+
+/**
+ * Schema de validação para cancelar antecipação
+ */
+const cancelAnticipationSchema = z.object({
+  anticipationId: uuidSchema("Antecipação"),
+});
+
+/**
+ * Busca parcelas elegíveis para antecipação de uma série
+ */
+export async function getEligibleInstallmentsAction(
+  seriesId: string
+): Promise<ActionResult<EligibleInstallment[]>> {
+  try {
+    const user = await getUser();
+
+    // Validar seriesId
+    const validatedSeriesId = uuidSchema("Série").parse(seriesId);
+
+    // Buscar todas as parcelas da série que estão elegíveis
+    const rows = await db.query.lancamentos.findMany({
+      where: and(
+        eq(lancamentos.seriesId, validatedSeriesId),
+        eq(lancamentos.userId, user.id),
+        eq(lancamentos.condition, "Parcelado"),
+        // Apenas parcelas não pagas e não antecipadas
+        or(eq(lancamentos.isSettled, false), isNull(lancamentos.isSettled)),
+        eq(lancamentos.isAnticipated, false)
+      ),
+      orderBy: [asc(lancamentos.currentInstallment)],
+      columns: {
+        id: true,
+        name: true,
+        amount: true,
+        period: true,
+        purchaseDate: true,
+        dueDate: true,
+        currentInstallment: true,
+        installmentCount: true,
+        paymentMethod: true,
+        categoriaId: true,
+        pagadorId: true,
+      },
+    });
+
+    const eligibleInstallments: EligibleInstallment[] = rows.map((row) => ({
+      id: row.id,
+      name: row.name,
+      amount: row.amount,
+      period: row.period,
+      purchaseDate: row.purchaseDate,
+      dueDate: row.dueDate,
+      currentInstallment: row.currentInstallment,
+      installmentCount: row.installmentCount,
+      paymentMethod: row.paymentMethod,
+      categoriaId: row.categoriaId,
+      pagadorId: row.pagadorId,
+    }));
+
+    return {
+      success: true,
+      data: eligibleInstallments,
+    };
+  } catch (error) {
+    return handleActionError(error);
+  }
+}
+
+/**
+ * Cria uma antecipação de parcelas
+ */
+export async function createInstallmentAnticipationAction(
+  input: CreateAnticipationInput
+): Promise<ActionResult> {
+  try {
+    const user = await getUser();
+    const data = createAnticipationSchema.parse(input);
+
+    // 1. Validar parcelas selecionadas
+    const installments = await db.query.lancamentos.findMany({
+      where: and(
+        inArray(lancamentos.id, data.installmentIds),
+        eq(lancamentos.userId, user.id),
+        eq(lancamentos.seriesId, data.seriesId),
+        or(eq(lancamentos.isSettled, false), isNull(lancamentos.isSettled)),
+        eq(lancamentos.isAnticipated, false)
+      ),
+    });
+
+    if (installments.length !== data.installmentIds.length) {
+      return {
+        success: false,
+        error: "Algumas parcelas não estão elegíveis para antecipação.",
+      };
+    }
+
+    if (installments.length === 0) {
+      return {
+        success: false,
+        error: "Nenhuma parcela selecionada para antecipação.",
+      };
+    }
+
+    // 2. Calcular valor total
+    const totalAmountCents = installments.reduce(
+      (sum, inst) => sum + Number(inst.amount) * 100,
+      0
+    );
+    const totalAmount = totalAmountCents / 100;
+    const totalAmountAbs = Math.abs(totalAmount);
+
+    // 2.1. Aplicar desconto
+    const discount = data.discount || 0;
+
+    // 2.2. Validar que o desconto não é maior que o valor absoluto total
+    if (discount > totalAmountAbs) {
+      return {
+        success: false,
+        error: "O desconto não pode ser maior que o valor total das parcelas.",
+      };
+    }
+
+    // 2.3. Calcular valor final (se negativo, soma o desconto para reduzir a despesa)
+    const finalAmount = totalAmount < 0
+      ? totalAmount + discount  // Despesa: -1000 + 20 = -980
+      : totalAmount - discount; // Receita: 1000 - 20 = 980
+
+    // 3. Pegar dados da primeira parcela para referência
+    const firstInstallment = installments[0]!;
+
+    // 4. Criar lançamento e antecipação em transação
+    await db.transaction(async (tx) => {
+      // 4.1. Criar o lançamento de antecipação (com desconto aplicado)
+      const [newLancamento] = await tx
+        .insert(lancamentos)
+        .values({
+          name: generateAnticipationDescription(
+            firstInstallment.name,
+            installments.length
+          ),
+          condition: "À vista",
+          transactionType: firstInstallment.transactionType,
+          paymentMethod: firstInstallment.paymentMethod,
+          amount: formatDecimalForDbRequired(finalAmount),
+          purchaseDate: new Date(),
+          period: data.anticipationPeriod,
+          dueDate: null,
+          isSettled: false,
+          pagadorId: data.pagadorId ?? firstInstallment.pagadorId,
+          categoriaId: data.categoriaId ?? firstInstallment.categoriaId,
+          cartaoId: firstInstallment.cartaoId,
+          contaId: firstInstallment.contaId,
+          note:
+            data.note ||
+            generateAnticipationNote(
+              installments.map((inst) => ({
+                id: inst.id,
+                name: inst.name,
+                amount: inst.amount,
+                period: inst.period,
+                purchaseDate: inst.purchaseDate,
+                dueDate: inst.dueDate,
+                currentInstallment: inst.currentInstallment,
+                installmentCount: inst.installmentCount,
+                paymentMethod: inst.paymentMethod,
+                categoriaId: inst.categoriaId,
+                pagadorId: inst.pagadorId,
+              }))
+            ),
+          userId: user.id,
+          installmentCount: null,
+          currentInstallment: null,
+          recurrenceCount: null,
+          isAnticipated: false,
+          isDivided: false,
+          seriesId: null,
+          transferId: null,
+          anticipationId: null,
+          boletoPaymentDate: null,
+        })
+        .returning();
+
+      // 4.2. Criar registro de antecipação
+      const [anticipation] = await tx
+        .insert(installmentAnticipations)
+        .values({
+          seriesId: data.seriesId,
+          anticipationPeriod: data.anticipationPeriod,
+          anticipationDate: new Date(),
+          anticipatedInstallmentIds: data.installmentIds,
+          totalAmount: formatDecimalForDbRequired(totalAmount),
+          installmentCount: installments.length,
+          discount: formatDecimalForDbRequired(discount),
+          lancamentoId: newLancamento.id,
+          pagadorId: data.pagadorId ?? firstInstallment.pagadorId,
+          categoriaId: data.categoriaId ?? firstInstallment.categoriaId,
+          note: data.note || null,
+          userId: user.id,
+        })
+        .returning();
+
+      // 4.3. Marcar parcelas como antecipadas e zerar seus valores
+      await tx
+        .update(lancamentos)
+        .set({
+          isAnticipated: true,
+          anticipationId: anticipation.id,
+          amount: "0",  // Zera o valor para não contar em dobro
+        })
+        .where(inArray(lancamentos.id, data.installmentIds));
+    });
+
+    revalidatePath("/lancamentos");
+    revalidatePath("/dashboard");
+
+    return {
+      success: true,
+      message: `${installments.length} ${
+        installments.length === 1 ? "parcela antecipada" : "parcelas antecipadas"
+      } com sucesso!`,
+    };
+  } catch (error) {
+    return handleActionError(error);
+  }
+}
+
+/**
+ * Busca histórico de antecipações de uma série
+ */
+export async function getInstallmentAnticipationsAction(
+  seriesId: string
+): Promise<ActionResult<InstallmentAnticipationWithRelations[]>> {
+  try {
+    const user = await getUser();
+
+    // Validar seriesId
+    const validatedSeriesId = uuidSchema("Série").parse(seriesId);
+
+    // Usar query builder ao invés de db.query para evitar problemas de tipagem
+    const anticipations = await db
+      .select({
+        id: installmentAnticipations.id,
+        seriesId: installmentAnticipations.seriesId,
+        anticipationPeriod: installmentAnticipations.anticipationPeriod,
+        anticipationDate: installmentAnticipations.anticipationDate,
+        anticipatedInstallmentIds: installmentAnticipations.anticipatedInstallmentIds,
+        totalAmount: installmentAnticipations.totalAmount,
+        installmentCount: installmentAnticipations.installmentCount,
+        discount: installmentAnticipations.discount,
+        lancamentoId: installmentAnticipations.lancamentoId,
+        pagadorId: installmentAnticipations.pagadorId,
+        categoriaId: installmentAnticipations.categoriaId,
+        note: installmentAnticipations.note,
+        userId: installmentAnticipations.userId,
+        createdAt: installmentAnticipations.createdAt,
+        // Joins
+        lancamento: lancamentos,
+        pagador: pagadores,
+        categoria: categorias,
+      })
+      .from(installmentAnticipations)
+      .leftJoin(lancamentos, eq(installmentAnticipations.lancamentoId, lancamentos.id))
+      .leftJoin(pagadores, eq(installmentAnticipations.pagadorId, pagadores.id))
+      .leftJoin(categorias, eq(installmentAnticipations.categoriaId, categorias.id))
+      .where(
+        and(
+          eq(installmentAnticipations.seriesId, validatedSeriesId),
+          eq(installmentAnticipations.userId, user.id)
+        )
+      )
+      .orderBy(desc(installmentAnticipations.createdAt));
+
+    return {
+      success: true,
+      data: anticipations,
+    };
+  } catch (error) {
+    return handleActionError(error);
+  }
+}
+
+/**
+ * Cancela uma antecipação de parcelas
+ * Remove o lançamento de antecipação e restaura as parcelas originais
+ */
+export async function cancelInstallmentAnticipationAction(
+  input: CancelAnticipationInput
+): Promise<ActionResult> {
+  try {
+    const user = await getUser();
+    const data = cancelAnticipationSchema.parse(input);
+
+    await db.transaction(async (tx) => {
+      // 1. Buscar antecipação usando query builder
+      const anticipationRows = await tx
+        .select({
+          id: installmentAnticipations.id,
+          seriesId: installmentAnticipations.seriesId,
+          anticipationPeriod: installmentAnticipations.anticipationPeriod,
+          anticipationDate: installmentAnticipations.anticipationDate,
+          anticipatedInstallmentIds: installmentAnticipations.anticipatedInstallmentIds,
+          totalAmount: installmentAnticipations.totalAmount,
+          installmentCount: installmentAnticipations.installmentCount,
+          discount: installmentAnticipations.discount,
+          lancamentoId: installmentAnticipations.lancamentoId,
+          pagadorId: installmentAnticipations.pagadorId,
+          categoriaId: installmentAnticipations.categoriaId,
+          note: installmentAnticipations.note,
+          userId: installmentAnticipations.userId,
+          createdAt: installmentAnticipations.createdAt,
+          lancamento: lancamentos,
+        })
+        .from(installmentAnticipations)
+        .leftJoin(lancamentos, eq(installmentAnticipations.lancamentoId, lancamentos.id))
+        .where(
+          and(
+            eq(installmentAnticipations.id, data.anticipationId),
+            eq(installmentAnticipations.userId, user.id)
+          )
+        )
+        .limit(1);
+
+      const anticipation = anticipationRows[0];
+
+      if (!anticipation) {
+        throw new Error("Antecipação não encontrada.");
+      }
+
+      // 2. Verificar se o lançamento já foi pago
+      if (anticipation.lancamento?.isSettled === true) {
+        throw new Error(
+          "Não é possível cancelar uma antecipação já paga. Remova o pagamento primeiro."
+        );
+      }
+
+      // 3. Calcular valor original por parcela (totalAmount sem desconto / quantidade)
+      const originalTotalAmount = Number(anticipation.totalAmount);
+      const originalValuePerInstallment =
+        originalTotalAmount / anticipation.installmentCount;
+
+      // 4. Remover flag de antecipação e restaurar valores das parcelas
+      await tx
+        .update(lancamentos)
+        .set({
+          isAnticipated: false,
+          anticipationId: null,
+          amount: formatDecimalForDbRequired(originalValuePerInstallment),
+        })
+        .where(
+          inArray(
+            lancamentos.id,
+            anticipation.anticipatedInstallmentIds as string[]
+          )
+        );
+
+      // 5. Deletar lançamento de antecipação
+      await tx
+        .delete(lancamentos)
+        .where(eq(lancamentos.id, anticipation.lancamentoId));
+
+      // 6. Deletar registro de antecipação
+      await tx
+        .delete(installmentAnticipations)
+        .where(eq(installmentAnticipations.id, data.anticipationId));
+    });
+
+    revalidatePath("/lancamentos");
+    revalidatePath("/dashboard");
+
+    return {
+      success: true,
+      message: "Antecipação cancelada com sucesso!",
+    };
+  } catch (error) {
+    return handleActionError(error);
+  }
+}
+
+/**
+ * Busca detalhes de uma antecipação específica
+ */
+export async function getAnticipationDetailsAction(
+  anticipationId: string
+): Promise<ActionResult<InstallmentAnticipationWithRelations>> {
+  try {
+    const user = await getUser();
+
+    // Validar anticipationId
+    const validatedId = uuidSchema("Antecipação").parse(anticipationId);
+
+    const anticipation = await db.query.installmentAnticipations.findFirst({
+      where: and(
+        eq(installmentAnticipations.id, validatedId),
+        eq(installmentAnticipations.userId, user.id)
+      ),
+      with: {
+        lancamento: true,
+        pagador: true,
+        categoria: true,
+      },
+    });
+
+    if (!anticipation) {
+      return {
+        success: false,
+        error: "Antecipação não encontrada.",
+      };
+    }
+
+    return {
+      success: true,
+      data: anticipation,
+    };
+  } catch (error) {
+    return handleActionError(error);
+  }
+}
diff --git a/app/(dashboard)/lancamentos/data.ts b/app/(dashboard)/lancamentos/data.ts
new file mode 100644
index 0000000..d37d21b
--- /dev/null
+++ b/app/(dashboard)/lancamentos/data.ts
@@ -0,0 +1,18 @@
+import { lancamentos } from "@/db/schema";
+import { db } from "@/lib/db";
+import { and, desc, type SQL } from "drizzle-orm";
+
+export async function fetchLancamentos(filters: SQL[]) {
+  const lancamentoRows = await db.query.lancamentos.findMany({
+    where: and(...filters),
+    with: {
+      pagador: true,
+      conta: true,
+      cartao: true,
+      categoria: true,
+    },
+    orderBy: [desc(lancamentos.purchaseDate), desc(lancamentos.createdAt)],
+  });
+
+  return lancamentoRows;
+}
diff --git a/app/(dashboard)/lancamentos/layout.tsx b/app/(dashboard)/lancamentos/layout.tsx
new file mode 100644
index 0000000..5b7c7bd
--- /dev/null
+++ b/app/(dashboard)/lancamentos/layout.tsx
@@ -0,0 +1,25 @@
+import PageDescription from "@/components/page-description";
+import { RiArrowLeftRightLine } from "@remixicon/react";
+
+export const metadata = {
+  title: "Lançamentos | OpenSheets",
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <section className="space-y-6 px-6">
+      <PageDescription
+        icon={<RiArrowLeftRightLine />}
+        title="Lançamentos"
+        subtitle="Acompanhe todos os lançamentos financeiros do mês selecionado incluindo
+        receitas, despesas e transações previstas. Use o seletor abaixo para
+        navegar pelos meses e visualizar as movimentações correspondentes."
+      />
+      {children}
+    </section>
+  );
+}
diff --git a/app/(dashboard)/lancamentos/loading.tsx b/app/(dashboard)/lancamentos/loading.tsx
new file mode 100644
index 0000000..8d6aab8
--- /dev/null
+++ b/app/(dashboard)/lancamentos/loading.tsx
@@ -0,0 +1,32 @@
+import {
+  FilterSkeleton,
+  TransactionsTableSkeleton,
+} from "@/components/skeletons";
+import { Skeleton } from "@/components/ui/skeleton";
+
+/**
+ * Loading state para a página de lançamentos
+ * Mantém o mesmo layout da página final
+ */
+export default function LancamentosLoading() {
+  return (
+    <main className="flex flex-col gap-6">
+      {/* Month Picker placeholder */}
+      <div className="h-[60px] animate-pulse rounded-2xl bg-foreground/10" />
+
+      <div className="space-y-6">
+        {/* Header com título e botão */}
+        <div className="flex items-center justify-between">
+          <Skeleton className="h-8 w-48 rounded-2xl bg-foreground/10" />
+          <Skeleton className="h-10 w-40 rounded-2xl bg-foreground/10" />
+        </div>
+
+        {/* Filtros */}
+        <FilterSkeleton />
+
+        {/* Tabela */}
+        <TransactionsTableSkeleton />
+      </div>
+    </main>
+  );
+}
diff --git a/app/(dashboard)/lancamentos/page.tsx b/app/(dashboard)/lancamentos/page.tsx
new file mode 100644
index 0000000..1f2ede2
--- /dev/null
+++ b/app/(dashboard)/lancamentos/page.tsx
@@ -0,0 +1,84 @@
+import MonthPicker from "@/components/month-picker/month-picker";
+import { LancamentosPage } from "@/components/lancamentos/page/lancamentos-page";
+import { getUserId } from "@/lib/auth/server";
+import {
+  buildLancamentoWhere,
+  buildOptionSets,
+  buildSluggedFilters,
+  buildSlugMaps,
+  extractLancamentoSearchFilters,
+  fetchLancamentoFilterSources,
+  getSingleParam,
+  mapLancamentosData,
+  type ResolvedSearchParams,
+} from "@/lib/lancamentos/page-helpers";
+import { parsePeriodParam } from "@/lib/utils/period";
+import { fetchLancamentos } from "./data";
+import { getRecentEstablishmentsAction } from "./actions";
+
+type PageSearchParams = Promise<ResolvedSearchParams>;
+
+type PageProps = {
+  searchParams?: PageSearchParams;
+};
+
+export default async function Page({ searchParams }: PageProps) {
+  const userId = await getUserId();
+  const resolvedSearchParams = searchParams ? await searchParams : undefined;
+
+  const periodoParamRaw = getSingleParam(resolvedSearchParams, "periodo");
+  const { period: selectedPeriod } = parsePeriodParam(periodoParamRaw);
+
+  const searchFilters = extractLancamentoSearchFilters(resolvedSearchParams);
+
+  const filterSources = await fetchLancamentoFilterSources(userId);
+  const sluggedFilters = buildSluggedFilters(filterSources);
+  const slugMaps = buildSlugMaps(sluggedFilters);
+
+  const filters = buildLancamentoWhere({
+    userId,
+    period: selectedPeriod,
+    filters: searchFilters,
+    slugMaps,
+  });
+
+  const lancamentoRows = await fetchLancamentos(filters);
+  const lancamentosData = mapLancamentosData(lancamentoRows);
+
+  const {
+    pagadorOptions,
+    splitPagadorOptions,
+    defaultPagadorId,
+    contaOptions,
+    cartaoOptions,
+    categoriaOptions,
+    pagadorFilterOptions,
+    categoriaFilterOptions,
+    contaCartaoFilterOptions,
+  } = buildOptionSets({
+    ...sluggedFilters,
+    pagadorRows: filterSources.pagadorRows,
+  });
+
+  const estabelecimentos = await getRecentEstablishmentsAction();
+
+  return (
+    <main className="flex flex-col gap-6">
+      <MonthPicker />
+      <LancamentosPage
+        lancamentos={lancamentosData}
+        pagadorOptions={pagadorOptions}
+        splitPagadorOptions={splitPagadorOptions}
+        defaultPagadorId={defaultPagadorId}
+        contaOptions={contaOptions}
+        cartaoOptions={cartaoOptions}
+        categoriaOptions={categoriaOptions}
+        pagadorFilterOptions={pagadorFilterOptions}
+        categoriaFilterOptions={categoriaFilterOptions}
+        contaCartaoFilterOptions={contaCartaoFilterOptions}
+        selectedPeriod={selectedPeriod}
+        estabelecimentos={estabelecimentos}
+      />
+    </main>
+  );
+}
diff --git a/app/(dashboard)/layout.tsx b/app/(dashboard)/layout.tsx
new file mode 100644
index 0000000..d9529eb
--- /dev/null
+++ b/app/(dashboard)/layout.tsx
@@ -0,0 +1,67 @@
+import { SiteHeader } from "@/components/header-dashboard";
+import { AppSidebar } from "@/components/sidebar/app-sidebar";
+import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
+import { fetchDashboardNotifications } from "@/lib/dashboard/notifications";
+import { getUserSession } from "@/lib/auth/server";
+import { parsePeriodParam } from "@/lib/utils/period";
+import { PAGADOR_ROLE_ADMIN } from "@/lib/pagadores/constants";
+import { fetchPagadoresWithAccess } from "@/lib/pagadores/access";
+
+export default async function layout({
+  children,
+  searchParams,
+}: Readonly<{
+  children: React.ReactNode;
+  searchParams?: Promise<Record<string, string | string[] | undefined>>;
+}>) {
+  const session = await getUserSession();
+  const pagadoresList = await fetchPagadoresWithAccess(session.user.id);
+
+  // Encontrar o pagador admin do usuário
+  const adminPagador = pagadoresList.find(
+    (p) => p.role === PAGADOR_ROLE_ADMIN && p.userId === session.user.id
+  );
+
+  // Buscar notificações para o período atual
+  const resolvedSearchParams = searchParams ? await searchParams : undefined;
+  const periodoParam = resolvedSearchParams?.periodo;
+  const singlePeriodoParam =
+    typeof periodoParam === "string"
+      ? periodoParam
+      : Array.isArray(periodoParam)
+        ? periodoParam[0]
+        : null;
+  const { period: currentPeriod } = parsePeriodParam(
+    singlePeriodoParam ?? null
+  );
+  const notificationsSnapshot = await fetchDashboardNotifications(
+    session.user.id,
+    currentPeriod
+  );
+
+  return (
+    <SidebarProvider>
+      <AppSidebar
+        user={{ ...session.user, image: session.user.image ?? null }}
+        pagadorAvatarUrl={adminPagador?.avatarUrl ?? null}
+        pagadores={pagadoresList.map((item) => ({
+          id: item.id,
+          name: item.name,
+          avatarUrl: item.avatarUrl,
+          canEdit: item.canEdit,
+        }))}
+        variant="inset"
+      />
+      <SidebarInset>
+        <SiteHeader notificationsSnapshot={notificationsSnapshot} />
+        <div className="flex flex-1 flex-col">
+          <div className="@container/main flex flex-1 flex-col gap-2">
+            <div className="flex flex-col gap-4 py-4 md:gap-6 md:py-6">
+              {children}
+            </div>
+          </div>
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  );
+}
diff --git a/app/(dashboard)/orcamentos/actions.ts b/app/(dashboard)/orcamentos/actions.ts
new file mode 100644
index 0000000..49ec068
--- /dev/null
+++ b/app/(dashboard)/orcamentos/actions.ts
@@ -0,0 +1,190 @@
+"use server";
+
+import { categorias, orcamentos } from "@/db/schema";
+import {
+  type ActionResult,
+  handleActionError,
+  revalidateForEntity,
+} from "@/lib/actions/helpers";
+import { db } from "@/lib/db";
+import { getUser } from "@/lib/auth/server";
+import { periodSchema, uuidSchema } from "@/lib/schemas/common";
+import {
+  formatDecimalForDbRequired,
+  normalizeDecimalInput,
+} from "@/lib/utils/currency";
+import { and, eq, ne } from "drizzle-orm";
+import { z } from "zod";
+
+const budgetBaseSchema = z.object({
+  categoriaId: uuidSchema("Categoria"),
+  period: periodSchema,
+  amount: z
+    .string({ message: "Informe o valor limite." })
+    .trim()
+    .min(1, "Informe o valor limite.")
+    .transform((value) => normalizeDecimalInput(value))
+    .refine(
+      (value) => !Number.isNaN(Number.parseFloat(value)),
+      "Informe um valor limite válido."
+    )
+    .transform((value) => Number.parseFloat(value))
+    .refine(
+      (value) => value >= 0,
+      "O valor limite deve ser maior ou igual a zero."
+    ),
+});
+
+const createBudgetSchema = budgetBaseSchema;
+const updateBudgetSchema = budgetBaseSchema.extend({
+  id: uuidSchema("Orçamento"),
+});
+const deleteBudgetSchema = z.object({
+  id: uuidSchema("Orçamento"),
+});
+
+type BudgetCreateInput = z.infer<typeof createBudgetSchema>;
+type BudgetUpdateInput = z.infer<typeof updateBudgetSchema>;
+type BudgetDeleteInput = z.infer<typeof deleteBudgetSchema>;
+
+const ensureCategory = async (userId: string, categoriaId: string) => {
+  const category = await db.query.categorias.findFirst({
+    columns: {
+      id: true,
+      type: true,
+    },
+    where: and(eq(categorias.id, categoriaId), eq(categorias.userId, userId)),
+  });
+
+  if (!category) {
+    throw new Error("Categoria não encontrada.");
+  }
+
+  if (category.type !== "despesa") {
+    throw new Error("Selecione uma categoria de despesa.");
+  }
+};
+
+export async function createBudgetAction(
+  input: BudgetCreateInput
+): Promise<ActionResult> {
+  try {
+    const user = await getUser();
+    const data = createBudgetSchema.parse(input);
+
+    await ensureCategory(user.id, data.categoriaId);
+
+    const duplicateConditions = [
+      eq(orcamentos.userId, user.id),
+      eq(orcamentos.period, data.period),
+      eq(orcamentos.categoriaId, data.categoriaId),
+    ] as const;
+
+    const duplicate = await db.query.orcamentos.findFirst({
+      columns: { id: true },
+      where: and(...duplicateConditions),
+    });
+
+    if (duplicate) {
+      return {
+        success: false,
+        error:
+          "Já existe um orçamento para esta categoria no período selecionado.",
+      };
+    }
+
+    await db.insert(orcamentos).values({
+      amount: formatDecimalForDbRequired(data.amount),
+      period: data.period,
+      userId: user.id,
+      categoriaId: data.categoriaId,
+    });
+
+    revalidateForEntity("orcamentos");
+
+    return { success: true, message: "Orçamento criado com sucesso." };
+  } catch (error) {
+    return handleActionError(error);
+  }
+}
+
+export async function updateBudgetAction(
+  input: BudgetUpdateInput
+): Promise<ActionResult> {
+  try {
+    const user = await getUser();
+    const data = updateBudgetSchema.parse(input);
+
+    await ensureCategory(user.id, data.categoriaId);
+
+    const duplicateConditions = [
+      eq(orcamentos.userId, user.id),
+      eq(orcamentos.period, data.period),
+      eq(orcamentos.categoriaId, data.categoriaId),
+      ne(orcamentos.id, data.id),
+    ] as const;
+
+    const duplicate = await db.query.orcamentos.findFirst({
+      columns: { id: true },
+      where: and(...duplicateConditions),
+    });
+
+    if (duplicate) {
+      return {
+        success: false,
+        error:
+          "Já existe um orçamento para esta categoria no período selecionado.",
+      };
+    }
+
+    const [updated] = await db
+      .update(orcamentos)
+      .set({
+        amount: formatDecimalForDbRequired(data.amount),
+        period: data.period,
+        categoriaId: data.categoriaId,
+      })
+      .where(and(eq(orcamentos.id, data.id), eq(orcamentos.userId, user.id)))
+      .returning({ id: orcamentos.id });
+
+    if (!updated) {
+      return {
+        success: false,
+        error: "Orçamento não encontrado.",
+      };
+    }
+
+    revalidateForEntity("orcamentos");
+
+    return { success: true, message: "Orçamento atualizado com sucesso." };
+  } catch (error) {
+    return handleActionError(error);
+  }
+}
+
+export async function deleteBudgetAction(
+  input: BudgetDeleteInput
+): Promise<ActionResult> {
+  try {
+    const user = await getUser();
+    const data = deleteBudgetSchema.parse(input);
+
+    const [deleted] = await db
+      .delete(orcamentos)
+      .where(and(eq(orcamentos.id, data.id), eq(orcamentos.userId, user.id)))
+      .returning({ id: orcamentos.id });
+
+    if (!deleted) {
+      return {
+        success: false,
+        error: "Orçamento não encontrado.",
+      };
+    }
+
+    revalidateForEntity("orcamentos");
+
+    return { success: true, message: "Orçamento removido com sucesso." };
+  } catch (error) {
+    return handleActionError(error);
+  }
+}
diff --git a/app/(dashboard)/orcamentos/data.ts b/app/(dashboard)/orcamentos/data.ts
new file mode 100644
index 0000000..a2347eb
--- /dev/null
+++ b/app/(dashboard)/orcamentos/data.ts
@@ -0,0 +1,125 @@
+import {
+  categorias,
+  lancamentos,
+  orcamentos,
+  type Orcamento,
+} from "@/db/schema";
+import { db } from "@/lib/db";
+import { and, asc, eq, inArray, sum } from "drizzle-orm";
+
+const toNumber = (value: string | number | null | undefined) => {
+  if (typeof value === "number") return value;
+  if (typeof value === "string") {
+    const parsed = Number.parseFloat(value);
+    return Number.isNaN(parsed) ? 0 : parsed;
+  }
+  return 0;
+};
+
+export type BudgetData = {
+  id: string;
+  amount: number;
+  spent: number;
+  period: string;
+  createdAt: string;
+  category: {
+    id: string;
+    name: string;
+    icon: string | null;
+  } | null;
+};
+
+export type CategoryOption = {
+  id: string;
+  name: string;
+  icon: string | null;
+};
+
+export async function fetchBudgetsForUser(
+  userId: string,
+  selectedPeriod: string
+): Promise<{
+  budgets: BudgetData[];
+  categoriesOptions: CategoryOption[];
+}> {
+  const [budgetRows, categoryRows] = await Promise.all([
+    db.query.orcamentos.findMany({
+      where: and(
+        eq(orcamentos.userId, userId),
+        eq(orcamentos.period, selectedPeriod)
+      ),
+      with: {
+        categoria: true,
+      },
+    }),
+    db.query.categorias.findMany({
+      columns: {
+        id: true,
+        name: true,
+        icon: true,
+      },
+      where: and(eq(categorias.userId, userId), eq(categorias.type, "despesa")),
+      orderBy: asc(categorias.name),
+    }),
+  ]);
+
+  const categoryIds = budgetRows
+    .map((budget: Orcamento) => budget.categoriaId)
+    .filter((id: string | null): id is string => Boolean(id));
+
+  let totalsByCategory = new Map<string, number>();
+
+  if (categoryIds.length > 0) {
+    const totals = await db
+      .select({
+        categoriaId: lancamentos.categoriaId,
+        totalAmount: sum(lancamentos.amount).as("totalAmount"),
+      })
+      .from(lancamentos)
+      .where(
+        and(
+          eq(lancamentos.userId, userId),
+          eq(lancamentos.period, selectedPeriod),
+          eq(lancamentos.transactionType, "Despesa"),
+          inArray(lancamentos.categoriaId, categoryIds)
+        )
+      )
+      .groupBy(lancamentos.categoriaId);
+
+    totalsByCategory = new Map(
+      totals.map((row: { categoriaId: string | null; totalAmount: string | null }) => [
+        row.categoriaId ?? "",
+        Math.abs(toNumber(row.totalAmount)),
+      ])
+    );
+  }
+
+  const budgets = budgetRows
+    .map((budget: Orcamento) => ({
+      id: budget.id,
+      amount: toNumber(budget.amount),
+      spent: totalsByCategory.get(budget.categoriaId ?? "") ?? 0,
+      period: budget.period,
+      createdAt: budget.createdAt.toISOString(),
+      category: budget.categoria
+        ? {
+            id: budget.categoria.id,
+            name: budget.categoria.name,
+            icon: budget.categoria.icon,
+          }
+        : null,
+    }))
+    .sort((a, b) =>
+      (a.category?.name ?? "").localeCompare(b.category?.name ?? "", "pt-BR", {
+        sensitivity: "base",
+      })
+    );
+
+  const categoriesOptions = categoryRows.map((category) => ({
+    id: category.id,
+    name: category.name,
+    icon: category.icon,
+  }));
+
+  return { budgets, categoriesOptions };
+}
diff --git a/app/(dashboard)/orcamentos/layout.tsx b/app/(dashboard)/orcamentos/layout.tsx
new file mode 100644
index 0000000..c4061b5
--- /dev/null
+++ b/app/(dashboard)/orcamentos/layout.tsx
@@ -0,0 +1,23 @@
+import PageDescription from "@/components/page-description";
+import { RiFundsLine } from "@remixicon/react";
+
+export const metadata = {
+  title: "Anotações | OpenSheets",
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <section className="space-y-6 px-6">
+      <PageDescription
+        icon={<RiFundsLine />}
+        title="Orçamentos"
+        subtitle="Gerencie seus orçamentos mensais por categorias. Acompanhe o progresso do seu orçamento e faça ajustes conforme necessário."
+      />
+      {children}
+    </section>
+  );
+}
diff --git a/app/(dashboard)/orcamentos/loading.tsx b/app/(dashboard)/orcamentos/loading.tsx
new file mode 100644
index 0000000..45fc824
--- /dev/null
+++ b/app/(dashboard)/orcamentos/loading.tsx
@@ -0,0 +1,68 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+/**
+ * Loading state para a página de orçamentos
+ * Layout: MonthPicker + Header + Grid de cards de orçamento
+ */
+export default function OrcamentosLoading() {
+  return (
+    <main className="flex flex-col gap-6">
+      {/* Month Picker placeholder */}
+      <div className="h-[60px] animate-pulse rounded-2xl bg-foreground/10" />
+
+      <div className="space-y-6">
+        {/* Header */}
+        <div className="flex items-center justify-between">
+          <div className="space-y-2">
+            <Skeleton className="h-8 w-48 rounded-2xl bg-foreground/10" />
+            <Skeleton className="h-5 w-64 rounded-2xl bg-foreground/10" />
+          </div>
+          <Skeleton className="h-10 w-40 rounded-2xl bg-foreground/10" />
+        </div>
+
+        {/* Grid de cards de orçamentos */}
+        <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-2xl border p-6 space-y-4"
+            >
+              {/* Categoria com ícone */}
+              <div className="flex items-center gap-3">
+                <Skeleton className="size-10 rounded-2xl bg-foreground/10" />
+                <div className="flex-1 space-y-2">
+                  <Skeleton className="h-5 w-32 rounded-2xl bg-foreground/10" />
+                  <Skeleton className="h-4 w-20 rounded-2xl bg-foreground/10" />
+                </div>
+              </div>
+
+              {/* Valor orçado */}
+              <div className="space-y-2 pt-4 border-t">
+                <Skeleton className="h-4 w-24 rounded-2xl bg-foreground/10" />
+                <Skeleton className="h-7 w-32 rounded-2xl bg-foreground/10" />
+              </div>
+
+              {/* Valor gasto */}
+              <div className="space-y-2">
+                <Skeleton className="h-4 w-20 rounded-2xl bg-foreground/10" />
+                <Skeleton className="h-6 w-28 rounded-2xl bg-foreground/10" />
+              </div>
+
+              {/* Barra de progresso */}
+              <div className="space-y-2">
+                <Skeleton className="h-2 w-full rounded-full bg-foreground/10" />
+                <Skeleton className="h-3 w-16 rounded-2xl bg-foreground/10" />
+              </div>
+
+              {/* Botões de ação */}
+              <div className="flex gap-2 pt-2">
+                <Skeleton className="h-9 flex-1 rounded-2xl bg-foreground/10" />
+                <Skeleton className="h-9 w-9 rounded-2xl bg-foreground/10" />
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </main>
+  );
+}
diff --git a/app/(dashboard)/orcamentos/page.tsx b/app/(dashboard)/orcamentos/page.tsx
new file mode 100644
index 0000000..4ed9370
--- /dev/null
+++ b/app/(dashboard)/orcamentos/page.tsx
@@ -0,0 +1,55 @@
+import MonthPicker from "@/components/month-picker/month-picker";
+import { BudgetsPage } from "@/components/orcamentos/budgets-page";
+import { getUserId } from "@/lib/auth/server";
+import { parsePeriodParam } from "@/lib/utils/period";
+import { fetchBudgetsForUser } from "./data";
+
+type PageSearchParams = Promise<Record<string, string | string[] | undefined>>;
+
+type PageProps = {
+  searchParams?: PageSearchParams;
+};
+
+const getSingleParam = (
+  params: Record<string, string | string[] | undefined> | undefined,
+  key: string
+) => {
+  const value = params?.[key];
+  if (!value) return null;
+  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) {
+  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 { budgets, categoriesOptions } = await fetchBudgetsForUser(
+    userId,
+    selectedPeriod
+  );
+
+  return (
+    <main className="flex flex-col gap-6">
+      <MonthPicker />
+      <BudgetsPage
+        budgets={budgets}
+        categories={categoriesOptions}
+        selectedPeriod={selectedPeriod}
+        periodLabel={periodLabel}
+      />
+    </main>
+  );
+}
+
diff --git a/app/(dashboard)/pagadores/[pagadorId]/actions.ts b/app/(dashboard)/pagadores/[pagadorId]/actions.ts
new file mode 100644
index 0000000..a0b22b1
--- /dev/null
+++ b/app/(dashboard)/pagadores/[pagadorId]/actions.ts
@@ -0,0 +1,612 @@
+"use server";
+
+import { lancamentos, pagadores } from "@/db/schema";
+import { db } from "@/lib/db";
+import { getUser } from "@/lib/auth/server";
+import {
+  fetchPagadorBoletoStats,
+  fetchPagadorCardUsage,
+  fetchPagadorHistory,
+  fetchPagadorMonthlyBreakdown,
+} from "@/lib/pagadores/details";
+import { and, desc, eq } from "drizzle-orm";
+import { revalidatePath } from "next/cache";
+import { Resend } from "resend";
+import { z } from "zod";
+
+const inputSchema = z.object({
+  pagadorId: z.string().uuid("Pagador inválido."),
+  period: z
+    .string()
+    .regex(/^\d{4}-\d{2}$/, "Período inválido. Informe no formato AAAA-MM."),
+});
+
+type ActionResult =
+  | { success: true; message: string }
+  | { success: false; error: string };
+
+const formatCurrency = (value: number) =>
+  value.toLocaleString("pt-BR", {
+    style: "currency",
+    currency: "BRL",
+    maximumFractionDigits: 2,
+  });
+
+const formatPeriodLabel = (period: string) => {
+  const [yearStr, monthStr] = period.split("-");
+  const year = Number.parseInt(yearStr, 10);
+  const month = Number.parseInt(monthStr, 10) - 1;
+  const date = new Date(year, month, 1);
+  return date.toLocaleDateString("pt-BR", {
+    month: "long",
+    year: "numeric",
+  });
+};
+
+const formatDate = (value: Date | null | undefined) => {
+  if (!value) return "—";
+  return value.toLocaleDateString("pt-BR", {
+    day: "2-digit",
+    month: "short",
+    year: "numeric",
+  });
+};
+
+// Escapa HTML para prevenir XSS
+const escapeHtml = (text: string | null | undefined): string => {
+  if (!text) return "";
+  return text
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#039;");
+};
+
+type LancamentoRow = {
+  id: string;
+  name: string | null;
+  paymentMethod: string | null;
+  condition: string | null;
+  amount: number;
+  transactionType: string | null;
+  purchaseDate: Date | null;
+};
+
+type BoletoItem = {
+  name: string;
+  amount: number;
+  dueDate: Date | null;
+};
+
+type ParceladoItem = {
+  name: string;
+  totalAmount: number;
+  installmentCount: number;
+  currentInstallment: number;
+  installmentAmount: number;
+  purchaseDate: Date | null;
+};
+
+type SummaryPayload = {
+  pagadorName: string;
+  periodLabel: string;
+  monthlyBreakdown: Awaited<ReturnType<typeof fetchPagadorMonthlyBreakdown>>;
+  historyData: Awaited<ReturnType<typeof fetchPagadorHistory>>;
+  cardUsage: Awaited<ReturnType<typeof fetchPagadorCardUsage>>;
+  boletoStats: Awaited<ReturnType<typeof fetchPagadorBoletoStats>>;
+  boletos: BoletoItem[];
+  lancamentos: LancamentoRow[];
+  parcelados: ParceladoItem[];
+};
+
+const buildSectionHeading = (label: string) =>
+  `<h3 style="font-size:16px;margin:24px 0 8px 0;color:#0f172a;">${label}</h3>`;
+
+const buildSummaryHtml = ({
+  pagadorName,
+  periodLabel,
+  monthlyBreakdown,
+  historyData,
+  cardUsage,
+  boletoStats,
+  boletos,
+  lancamentos,
+  parcelados,
+}: SummaryPayload) => {
+  // Calcular máximo de despesas para barras de progresso
+  const maxDespesas = Math.max(...historyData.map((p) => p.despesas), 1);
+
+  const historyRows =
+    historyData.length > 0
+      ? historyData
+          .map((point) => {
+            const percentage = (point.despesas / maxDespesas) * 100;
+            const barColor =
+              point.despesas > maxDespesas * 0.8
+                ? "#ef4444"
+                : point.despesas > maxDespesas * 0.5
+                ? "#f59e0b"
+                : "#10b981";
+
+            return `
+          <tr>
+            <td style="padding:10px 12px;border-bottom:1px solid #e2e8f0;font-weight:500;">${escapeHtml(
+              point.label
+            )}</td>
+            <td style="padding:10px 12px;border-bottom:1px solid #e2e8f0;">
+              <div style="display:flex;align-items:center;gap:12px;">
+                <div style="flex:1;background:#f1f5f9;border-radius:6px;height:24px;overflow:hidden;">
+                  <div style="background:${barColor};height:100%;width:${percentage}%;transition:width 0.3s;"></div>
+                </div>
+                <span style="font-weight:600;min-width:100px;text-align:right;">${formatCurrency(
+                  point.despesas
+                )}</span>
+              </div>
+            </td>
+          </tr>`;
+          })
+          .join("")
+      : `<tr><td colspan="2" style="padding:16px;text-align:center;color:#94a3b8;">Sem histórico suficiente.</td></tr>`;
+
+  const cardUsageRows =
+    cardUsage.length > 0
+      ? cardUsage
+          .map(
+            (item) => `
+          <tr>
+            <td style="padding:10px 12px;border-bottom:1px solid #e2e8f0;font-weight:500;">${escapeHtml(
+              item.name
+            )}</td>
+            <td style="padding:10px 12px;border-bottom:1px solid #e2e8f0;text-align:right;font-weight:600;">${formatCurrency(
+              item.amount
+            )}</td>
+          </tr>`
+          )
+          .join("")
+      : `<tr><td colspan="2" style="padding:16px;text-align:center;color:#94a3b8;">Sem gastos com cartão neste período.</td></tr>`;
+
+  const boletoRows =
+    boletos.length > 0
+      ? boletos
+          .map(
+            (item) => `
+          <tr>
+            <td style="padding:10px 12px;border-bottom:1px solid #e2e8f0;font-weight:500;">${escapeHtml(
+              item.name
+            )}</td>
+            <td style="padding:10px 12px;border-bottom:1px solid #e2e8f0;">${
+              item.dueDate ? formatDate(item.dueDate) : "—"
+            }</td>
+            <td style="padding:10px 12px;border-bottom:1px solid #e2e8f0;text-align:right;font-weight:600;">${formatCurrency(
+              item.amount
+            )}</td>
+          </tr>`
+          )
+          .join("")
+      : `<tr><td colspan="3" style="padding:16px;text-align:center;color:#94a3b8;">Sem boletos neste período.</td></tr>`;
+
+  const lancamentoRows =
+    lancamentos.length > 0
+      ? lancamentos
+          .map(
+            (item) => `
+          <tr>
+            <td style="padding:10px 12px;border-bottom:1px solid #e2e8f0;white-space:nowrap;">${formatDate(
+              item.purchaseDate
+            )}</td>
+            <td style="padding:10px 12px;border-bottom:1px solid #e2e8f0;">${
+              escapeHtml(item.name) || "Sem descrição"
+            }</td>
+            <td style="padding:10px 12px;border-bottom:1px solid #e2e8f0;">${
+              escapeHtml(item.condition) || "—"
+            }</td>
+            <td style="padding:10px 12px;border-bottom:1px solid #e2e8f0;">${
+              escapeHtml(item.paymentMethod) || "—"
+            }</td>
+            <td style="padding:10px 12px;border-bottom:1px solid #e2e8f0;text-align:right;font-weight:600;">${formatCurrency(
+              item.amount
+            )}</td>
+          </tr>`
+          )
+          .join("")
+      : `<tr><td colspan="5" style="padding:16px;text-align:center;color:#94a3b8;">Nenhum lançamento registrado no período.</td></tr>`;
+
+  const parceladoRows =
+    parcelados.length > 0
+      ? parcelados
+          .map(
+            (item) => `
+          <tr>
+            <td style="padding:10px 12px;border-bottom:1px solid #e2e8f0;white-space:nowrap;">${formatDate(
+              item.purchaseDate
+            )}</td>
+            <td style="padding:10px 12px;border-bottom:1px solid #e2e8f0;">${
+              escapeHtml(item.name) || "Sem descrição"
+            }</td>
+            <td style="padding:10px 12px;border-bottom:1px solid #e2e8f0;text-align:center;">${
+              item.currentInstallment
+            }/${item.installmentCount}</td>
+            <td style="padding:10px 12px;border-bottom:1px solid #e2e8f0;text-align:right;font-weight:600;">${formatCurrency(
+              item.installmentAmount
+            )}</td>
+            <td style="padding:10px 12px;border-bottom:1px solid #e2e8f0;text-align:right;color:#64748b;">${formatCurrency(
+              item.totalAmount
+            )}</td>
+          </tr>`
+          )
+          .join("")
+      : `<tr><td colspan="5" style="padding:16px;text-align:center;color:#94a3b8;">Nenhum lançamento parcelado neste período.</td></tr>`;
+
+  return `
+    <div style="margin:0 auto;max-width:800px;background:#f8fafc;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Inter',Arial,sans-serif;color:#0f172a;line-height:1.6;">
+  <!-- Preheader invisível (melhora a prévia no cliente de e-mail) -->
+  <span style="display:none;visibility:hidden;opacity:0;color:transparent;height:0;width:0;overflow:hidden;">Resumo mensal e detalhes de gastos por cartão, boletos e lançamentos.</span>
+
+  <!-- Cabeçalho -->
+  <div style="background:linear-gradient(90deg,#dc5a3a,#ea744e);padding:28px 24px;border-radius:12px 12px 0 0;">
+    <h1 style="margin:0 0 6px 0;font-size:26px;font-weight:800;letter-spacing:-0.3px;color:#ffffff;">Resumo Financeiro</h1>
+    <p style="margin:0;font-size:15px;color:#ffece6;">${escapeHtml(
+      periodLabel
+    )}</p>
+  </div>
+
+  <!-- Cartão principal -->
+  <div style="background:#ffffff;padding:28px 24px;border-radius:0 0 12px 12px;border:1px solid #e2e8f0;border-top:none;">
+    <!-- Saudação -->
+    <p style="margin:0 0 24px 0;font-size:15px;color:#334155;">
+      Olá <strong>${escapeHtml(
+        pagadorName
+      )}</strong>, segue o consolidado do mês:
+    </p>
+
+    <!-- Totais do mês -->
+    ${buildSectionHeading("💰 Totais do mês")}
+    <table role="presentation" style="width:100%;border-collapse:collapse;margin:0 0 28px 0;border:1px solid #f1f5f9;border-radius:10px;overflow:hidden;">
+      <tbody>
+        <tr>
+          <td style="padding:16px 18px;background:#fff7f5;border-bottom:1px solid #f1f5f9;font-size:15px;color:#475569;">Total gasto</td>
+          <td style="padding:16px 18px;background:#fff7f5;border-bottom:1px solid #f1f5f9;text-align:right;">
+            <strong style="font-size:22px;color:#0f172a;">${formatCurrency(
+              monthlyBreakdown.totalExpenses
+            )}</strong>
+          </td>
+        </tr>
+        <tr>
+          <td style="padding:12px 18px;font-size:14px;color:#64748b;">💳 Cartões</td>
+          <td style="padding:12px 18px;text-align:right;"><strong style="font-size:15px;color:#0f172a;">${formatCurrency(
+            monthlyBreakdown.paymentSplits.card
+          )}</strong></td>
+        </tr>
+        <tr style="background:#fcfcfd;">
+          <td style="padding:12px 18px;font-size:14px;color:#64748b;">📄 Boletos</td>
+          <td style="padding:12px 18px;text-align:right;"><strong style="font-size:15px;color:#0f172a;">${formatCurrency(
+            monthlyBreakdown.paymentSplits.boleto
+          )}</strong></td>
+        </tr>
+        <tr>
+          <td style="padding:12px 18px;font-size:14px;color:#64748b;">⚡ Pix/Débito/Dinheiro</td>
+          <td style="padding:12px 18px;text-align:right;"><strong style="font-size:15px;color:#0f172a;">${formatCurrency(
+            monthlyBreakdown.paymentSplits.instant
+          )}</strong></td>
+        </tr>
+      </tbody>
+    </table>
+
+    <!-- Evolução 6 meses -->
+    ${buildSectionHeading("📊 Evolução das Despesas (6 meses)")}
+    <table style="width:100%;border-collapse:collapse;font-size:14px;margin:0 0 28px 0;border:1px solid #e2e8f0;border-radius:10px;overflow:hidden;">
+      <thead>
+        <tr style="background:#f8fafc;">
+          <th style="text-align:left;padding:12px 14px;border-bottom:1px solid #e2e8f0;font-weight:600;color:#475569;">Período</th>
+          <th style="text-align:right;padding:12px 14px;border-bottom:1px solid #e2e8f0;font-weight:600;color:#475569;">Valor</th>
+        </tr>
+      </thead>
+      <tbody>${historyRows}</tbody>
+    </table>
+
+    <!-- Gastos por cartão -->
+    ${buildSectionHeading("💳 Gastos com Cartões")}
+     <table role="presentation" style="width:100%;border-collapse:collapse;margin:0 0 8px 0;">
+      <tr>
+        <td style="padding:10px 0;border-bottom:2px solid #e2e8f0;">
+          <table role="presentation" style="width:100%;border-collapse:collapse;">
+            <tr>
+              <td style="color:#475569;font-weight:700;font-size:15px;">Total</td>
+              <td style="text-align:right;">
+                <strong style="font-size:18px;color:#0f172a;">${formatCurrency(
+                  monthlyBreakdown.paymentSplits.card
+                )}</strong>
+              </td>
+            </tr>
+          </table>
+        </td>
+      </tr>
+    </table>
+    <table style="width:100%;border-collapse:collapse;font-size:14px;margin:0 0 28px 0;border:1px solid #e2e8f0;border-radius:10px;overflow:hidden;">
+      <thead>
+        <tr style="background:#f8fafc;">
+          <th style="text-align:left;padding:12px 14px;border-bottom:1px solid #e2e8f0;font-weight:600;color:#475569;">Cartão</th>
+          <th style="text-align:right;padding:12px 14px;border-bottom:1px solid #e2e8f0;font-weight:600;color:#475569;">Valor</th>
+        </tr>
+      </thead>
+      <tbody>${cardUsageRows}</tbody>
+    </table>
+
+    <!-- Boletos -->
+    ${buildSectionHeading("📄 Boletos")}
+    <table role="presentation" style="width:100%;border-collapse:collapse;margin:0 0 8px 0;">
+      <tr>
+        <td style="padding:10px 0;border-bottom:2px solid #e2e8f0;">
+          <table role="presentation" style="width:100%;border-collapse:collapse;">
+            <tr>
+              <td style="color:#475569;font-weight:700;font-size:15px;">Total</td>
+              <td style="text-align:right;">
+                <strong style="font-size:18px;color:#0f172a;">${formatCurrency(
+                  boletoStats.totalAmount
+                )}</strong>
+              </td>
+            </tr>
+          </table>
+        </td>
+      </tr>
+    </table>
+    <table style="width:100%;border-collapse:collapse;font-size:14px;margin:0 0 28px 0;border:1px solid #e2e8f0;border-radius:10px;overflow:hidden;">
+      <thead>
+        <tr style="background:#f8fafc;">
+          <th style="text-align:left;padding:12px 14px;border-bottom:1px solid #e2e8f0;font-weight:600;color:#475569;">Descrição</th>
+          <th style="text-align:left;padding:12px 14px;border-bottom:1px solid #e2e8f0;font-weight:600;color:#475569;">Vencimento</th>
+          <th style="text-align:right;padding:12px 14px;border-bottom:1px solid #e2e8f0;font-weight:600;color:#475569;">Valor</th>
+        </tr>
+      </thead>
+      <tbody>${boletoRows}</tbody>
+    </table>
+
+    <!-- Lançamentos -->
+    ${buildSectionHeading("📝 Lançamentos do Mês")}
+    <table style="width:100%;border-collapse:collapse;font-size:14px;border:1px solid #e2e8f0;border-radius:10px;overflow:hidden;">
+      <thead>
+        <tr style="background:#f8fafc;">
+          <th style="text-align:left;padding:12px 14px;border-bottom:1px solid #e2e8f0;font-weight:600;color:#475569;">Data</th>
+          <th style="text-align:left;padding:12px 14px;border-bottom:1px solid #e2e8f0;font-weight:600;color:#475569;">Descrição</th>
+          <th style="text-align:left;padding:12px 14px;border-bottom:1px solid #e2e8f0;font-weight:600;color:#475569;">Condição</th>
+          <th style="text-align:left;padding:12px 14px;border-bottom:1px solid #e2e8f0;font-weight:600;color:#475569;">Pagamento</th>
+          <th style="text-align:right;padding:12px 14px;border-bottom:1px solid #e2e8f0;font-weight:600;color:#475569;">Valor</th>
+        </tr>
+      </thead>
+      <tbody>${lancamentoRows}</tbody>
+    </table>
+
+    <!-- Lançamentos Parcelados -->
+    ${buildSectionHeading("💳 Lançamentos Parcelados")}
+    <table style="width:100%;border-collapse:collapse;font-size:14px;border:1px solid #e2e8f0;border-radius:10px;overflow:hidden;">
+      <thead>
+        <tr style="background:#f8fafc;">
+          <th style="text-align:left;padding:12px 14px;border-bottom:1px solid #e2e8f0;font-weight:600;color:#475569;">Data</th>
+          <th style="text-align:left;padding:12px 14px;border-bottom:1px solid #e2e8f0;font-weight:600;color:#475569;">Descrição</th>
+          <th style="text-align:center;padding:12px 14px;border-bottom:1px solid #e2e8f0;font-weight:600;color:#475569;">Parcela</th>
+          <th style="text-align:right;padding:12px 14px;border-bottom:1px solid #e2e8f0;font-weight:600;color:#475569;">Valor Parcela</th>
+          <th style="text-align:right;padding:12px 14px;border-bottom:1px solid #e2e8f0;font-weight:600;color:#475569;">Total</th>
+        </tr>
+      </thead>
+      <tbody>${parceladoRows}</tbody>
+    </table>
+
+    <!-- Divisor suave -->
+    <div style="height:1px;background:#e2e8f0;margin:28px 0;"></div>
+  </div>
+
+  <!-- Rodapé externo -->
+  <p style="margin:16px 0 0 0;font-size:12.5px;color:#94a3b8;text-align:center;">
+    Este e-mail foi enviado automaticamente pelo <strong>OpenSheets</strong>.
+  </p>
+</div>
+
+  `;
+};
+
+export async function sendPagadorSummaryAction(
+  input: z.infer<typeof inputSchema>
+): Promise<ActionResult> {
+  try {
+    const { pagadorId, period } = inputSchema.parse(input);
+    const user = await getUser();
+
+    const pagadorRow = await db.query.pagadores.findFirst({
+      where: and(eq(pagadores.id, pagadorId), eq(pagadores.userId, user.id)),
+    });
+
+    if (!pagadorRow) {
+      return { success: false, error: "Pagador não encontrado." };
+    }
+
+    if (!pagadorRow.email) {
+      return {
+        success: false,
+        error: "Cadastre um e-mail para conseguir enviar o resumo.",
+      };
+    }
+
+    const resendApiKey = process.env.RESEND_API_KEY;
+    const resendFrom =
+      process.env.RESEND_FROM_EMAIL ?? "OpenSheets <onboarding@resend.dev>";
+
+    if (!resendApiKey) {
+      return {
+        success: false,
+        error: "Serviço de e-mail não configurado (RESEND_API_KEY ausente).",
+      };
+    }
+
+    const resend = new Resend(resendApiKey);
+
+    const [
+      monthlyBreakdown,
+      historyData,
+      cardUsage,
+      boletoStats,
+      boletoRows,
+      lancamentoRows,
+      parceladoRows,
+    ] = await Promise.all([
+      fetchPagadorMonthlyBreakdown({
+        userId: user.id,
+        pagadorId,
+        period,
+      }),
+      fetchPagadorHistory({
+        userId: user.id,
+        pagadorId,
+        period,
+      }),
+      fetchPagadorCardUsage({
+        userId: user.id,
+        pagadorId,
+        period,
+      }),
+      fetchPagadorBoletoStats({
+        userId: user.id,
+        pagadorId,
+        period,
+      }),
+      db
+        .select({
+          name: lancamentos.name,
+          amount: lancamentos.amount,
+          dueDate: lancamentos.dueDate,
+        })
+        .from(lancamentos)
+        .where(
+          and(
+            eq(lancamentos.userId, user.id),
+            eq(lancamentos.pagadorId, pagadorId),
+            eq(lancamentos.period, period),
+            eq(lancamentos.paymentMethod, "Boleto")
+          )
+        )
+        .orderBy(desc(lancamentos.dueDate)),
+      db
+        .select({
+          id: lancamentos.id,
+          name: lancamentos.name,
+          paymentMethod: lancamentos.paymentMethod,
+          condition: lancamentos.condition,
+          amount: lancamentos.amount,
+          transactionType: lancamentos.transactionType,
+          purchaseDate: lancamentos.purchaseDate,
+        })
+        .from(lancamentos)
+        .where(
+          and(
+            eq(lancamentos.userId, user.id),
+            eq(lancamentos.pagadorId, pagadorId),
+            eq(lancamentos.period, period)
+          )
+        )
+        .orderBy(desc(lancamentos.purchaseDate)),
+      db
+        .select({
+          name: lancamentos.name,
+          amount: lancamentos.amount,
+          installmentCount: lancamentos.installmentCount,
+          currentInstallment: lancamentos.currentInstallment,
+          purchaseDate: lancamentos.purchaseDate,
+        })
+        .from(lancamentos)
+        .where(
+          and(
+            eq(lancamentos.userId, user.id),
+            eq(lancamentos.pagadorId, pagadorId),
+            eq(lancamentos.period, period),
+            eq(lancamentos.condition, "Parcelado"),
+            eq(lancamentos.isAnticipated, false)
+          )
+        )
+        .orderBy(desc(lancamentos.purchaseDate)),
+    ]);
+
+    const normalizedBoletos: BoletoItem[] = boletoRows.map((row) => ({
+      name: row.name ?? "Sem descrição",
+      amount: Math.abs(Number(row.amount ?? 0)),
+      dueDate: row.dueDate,
+    }));
+
+    const normalizedLancamentos: LancamentoRow[] = lancamentoRows.map(
+      (row) => ({
+        id: row.id,
+        name: row.name,
+        paymentMethod: row.paymentMethod,
+        condition: row.condition,
+        transactionType: row.transactionType,
+        purchaseDate: row.purchaseDate,
+        amount: Number(row.amount ?? 0),
+      })
+    );
+
+    const normalizedParcelados: ParceladoItem[] = parceladoRows.map((row) => {
+      const installmentAmount = Math.abs(Number(row.amount ?? 0));
+      const installmentCount = row.installmentCount ?? 1;
+      const totalAmount = installmentAmount * installmentCount;
+
+      return {
+        name: row.name ?? "Sem descrição",
+        installmentAmount,
+        installmentCount,
+        currentInstallment: row.currentInstallment ?? 1,
+        totalAmount,
+        purchaseDate: row.purchaseDate,
+      };
+    });
+
+    const html = buildSummaryHtml({
+      pagadorName: pagadorRow.name,
+      periodLabel: formatPeriodLabel(period),
+      monthlyBreakdown,
+      historyData,
+      cardUsage,
+      boletoStats,
+      boletos: normalizedBoletos,
+      lancamentos: normalizedLancamentos,
+      parcelados: normalizedParcelados,
+    });
+
+    await resend.emails.send({
+      from: resendFrom,
+      to: pagadorRow.email,
+      subject: `Resumo Financeiro | ${formatPeriodLabel(period)}`,
+      html,
+    });
+
+    const now = new Date();
+
+    await db
+      .update(pagadores)
+      .set({ lastMailAt: now })
+      .where(
+        and(eq(pagadores.id, pagadorRow.id), eq(pagadores.userId, user.id))
+      );
+
+    revalidatePath(`/pagadores/${pagadorRow.id}`);
+
+    return { success: true, message: "Resumo enviado com sucesso." };
+  } catch (error) {
+    // Log estruturado em desenvolvimento
+    if (process.env.NODE_ENV === "development") {
+      console.error("[sendPagadorSummaryAction]", error);
+    }
+
+    // Tratar erros de validação separadamente
+    if (error instanceof z.ZodError) {
+      return {
+        success: false,
+        error: error.issues[0]?.message ?? "Dados inválidos.",
+      };
+    }
+
+    // Não expor detalhes do erro para o usuário
+    return {
+      success: false,
+      error: "Não foi possível enviar o resumo. Tente novamente mais tarde.",
+    };
+  }
+}
diff --git a/app/(dashboard)/pagadores/[pagadorId]/data.ts b/app/(dashboard)/pagadores/[pagadorId]/data.ts
new file mode 100644
index 0000000..44ad5ac
--- /dev/null
+++ b/app/(dashboard)/pagadores/[pagadorId]/data.ts
@@ -0,0 +1,53 @@
+import { lancamentos, pagadorShares, user as usersTable } from "@/db/schema";
+import { db } from "@/lib/db";
+import { and, desc, eq, type SQL } from "drizzle-orm";
+
+export type ShareData = {
+  id: string;
+  userId: string;
+  name: string;
+  email: string;
+  createdAt: string;
+};
+
+export async function fetchPagadorShares(
+  pagadorId: string
+): Promise<ShareData[]> {
+  const shareRows = await db
+    .select({
+      id: pagadorShares.id,
+      sharedWithUserId: pagadorShares.sharedWithUserId,
+      createdAt: pagadorShares.createdAt,
+      userName: usersTable.name,
+      userEmail: usersTable.email,
+    })
+    .from(pagadorShares)
+    .innerJoin(
+      usersTable,
+      eq(pagadorShares.sharedWithUserId, usersTable.id)
+    )
+    .where(eq(pagadorShares.pagadorId, pagadorId));
+
+  return shareRows.map((share) => ({
+    id: share.id,
+    userId: share.sharedWithUserId,
+    name: share.userName ?? "Usuário",
+    email: share.userEmail ?? "email não informado",
+    createdAt: share.createdAt?.toISOString() ?? new Date().toISOString(),
+  }));
+}
+
+export async function fetchPagadorLancamentos(filters: SQL[]) {
+  const lancamentoRows = await db.query.lancamentos.findMany({
+    where: and(...filters),
+    with: {
+      pagador: true,
+      conta: true,
+      cartao: true,
+      categoria: true,
+    },
+    orderBy: desc(lancamentos.purchaseDate),
+  });
+
+  return lancamentoRows;
+}
diff --git a/app/(dashboard)/pagadores/[pagadorId]/loading.tsx b/app/(dashboard)/pagadores/[pagadorId]/loading.tsx
new file mode 100644
index 0000000..555c0dc
--- /dev/null
+++ b/app/(dashboard)/pagadores/[pagadorId]/loading.tsx
@@ -0,0 +1,84 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+/**
+ * Loading state para a página de detalhes do pagador
+ * Layout: MonthPicker + Info do pagador + Tabs (Visão Geral / Lançamentos)
+ */
+export default function PagadorDetailsLoading() {
+  return (
+    <main className="flex flex-col gap-6">
+      {/* Month Picker placeholder */}
+      <div className="h-[60px] animate-pulse rounded-2xl bg-foreground/10" />
+
+      {/* Info do Pagador (sempre visível) */}
+      <div className="rounded-2xl border p-6 space-y-4">
+        <div className="flex items-start gap-4">
+          {/* Avatar */}
+          <Skeleton className="size-20 rounded-full bg-foreground/10" />
+
+          <div className="flex-1 space-y-3">
+            {/* Nome + Badge */}
+            <div className="flex items-center gap-3">
+              <Skeleton className="h-7 w-48 rounded-2xl bg-foreground/10" />
+              <Skeleton className="h-6 w-20 rounded-2xl bg-foreground/10" />
+            </div>
+
+            {/* Email */}
+            <Skeleton className="h-5 w-64 rounded-2xl bg-foreground/10" />
+
+            {/* Status */}
+            <div className="flex items-center gap-2">
+              <Skeleton className="size-2 rounded-full bg-foreground/10" />
+              <Skeleton className="h-4 w-16 rounded-2xl bg-foreground/10" />
+            </div>
+          </div>
+
+          {/* Botões de ação */}
+          <div className="flex gap-2">
+            <Skeleton className="h-9 w-9 rounded-2xl bg-foreground/10" />
+            <Skeleton className="h-9 w-9 rounded-2xl bg-foreground/10" />
+          </div>
+        </div>
+      </div>
+
+      {/* Tabs */}
+      <div className="space-y-6">
+        <div className="flex gap-2 border-b">
+          <Skeleton className="h-10 w-32 rounded-t-2xl bg-foreground/10" />
+          <Skeleton className="h-10 w-32 rounded-t-2xl bg-foreground/10" />
+        </div>
+
+        {/* Conteúdo da aba Visão Geral (grid de cards) */}
+        <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+          {/* Card de resumo mensal */}
+          <div className="rounded-2xl border p-6 space-y-4 lg:col-span-2">
+            <Skeleton className="h-6 w-48 rounded-2xl bg-foreground/10" />
+            <div className="grid grid-cols-3 gap-4 pt-4">
+              {Array.from({ length: 3 }).map((_, i) => (
+                <div key={i} className="space-y-2">
+                  <Skeleton className="h-4 w-20 rounded-2xl bg-foreground/10" />
+                  <Skeleton className="h-7 w-full rounded-2xl bg-foreground/10" />
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Outros cards */}
+          {Array.from({ length: 4 }).map((_, i) => (
+            <div key={i} className="rounded-2xl border p-6 space-y-4">
+              <div className="flex items-center gap-2">
+                <Skeleton className="size-5 rounded-2xl bg-foreground/10" />
+                <Skeleton className="h-6 w-32 rounded-2xl bg-foreground/10" />
+              </div>
+              <div className="space-y-3 pt-4">
+                <Skeleton className="h-5 w-full rounded-2xl bg-foreground/10" />
+                <Skeleton className="h-5 w-3/4 rounded-2xl bg-foreground/10" />
+                <Skeleton className="h-5 w-1/2 rounded-2xl bg-foreground/10" />
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </main>
+  );
+}
diff --git a/app/(dashboard)/pagadores/[pagadorId]/page.tsx b/app/(dashboard)/pagadores/[pagadorId]/page.tsx
new file mode 100644
index 0000000..d0f2d4d
--- /dev/null
+++ b/app/(dashboard)/pagadores/[pagadorId]/page.tsx
@@ -0,0 +1,384 @@
+import { PagadorCardUsageCard } from "@/components/pagadores/details/pagador-card-usage-card";
+import { PagadorHistoryCard } from "@/components/pagadores/details/pagador-history-card";
+import { PagadorInfoCard } from "@/components/pagadores/details/pagador-info-card";
+import { PagadorMonthlySummaryCard } from "@/components/pagadores/details/pagador-monthly-summary-card";
+import { PagadorBoletoCard } from "@/components/pagadores/details/pagador-payment-method-cards";
+import { PagadorSharingCard } from "@/components/pagadores/details/pagador-sharing-card";
+import { LancamentosPage as LancamentosSection } from "@/components/lancamentos/page/lancamentos-page";
+import type {
+  ContaCartaoFilterOption,
+  LancamentoFilterOption,
+  LancamentoItem,
+  SelectOption,
+} from "@/components/lancamentos/types";
+import MonthPicker from "@/components/month-picker/month-picker";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { pagadores } from "@/db/schema";
+import { getUserId } from "@/lib/auth/server";
+import {
+  buildLancamentoWhere,
+  buildOptionSets,
+  buildSluggedFilters,
+  buildSlugMaps,
+  extractLancamentoSearchFilters,
+  fetchLancamentoFilterSources,
+  getSingleParam,
+  mapLancamentosData,
+  type LancamentoSearchFilters,
+  type ResolvedSearchParams,
+  type SlugMaps,
+  type SluggedFilters,
+} from "@/lib/lancamentos/page-helpers";
+import { parsePeriodParam } from "@/lib/utils/period";
+import { getPagadorAccess } from "@/lib/pagadores/access";
+import {
+  fetchPagadorBoletoStats,
+  fetchPagadorCardUsage,
+  fetchPagadorHistory,
+  fetchPagadorMonthlyBreakdown,
+} from "@/lib/pagadores/details";
+import { notFound } from "next/navigation";
+import { fetchPagadorLancamentos, fetchPagadorShares } from "./data";
+
+type PageSearchParams = Promise<ResolvedSearchParams>;
+
+type PageProps = {
+  params: Promise<{ pagadorId: string }>;
+  searchParams?: PageSearchParams;
+};
+
+const capitalize = (value: string) =>
+  value.length ? value.charAt(0).toUpperCase().concat(value.slice(1)) : value;
+
+const EMPTY_FILTERS: LancamentoSearchFilters = {
+  transactionFilter: null,
+  conditionFilter: null,
+  paymentFilter: null,
+  pagadorFilter: null,
+  categoriaFilter: null,
+  contaCartaoFilter: null,
+  searchFilter: null,
+};
+
+const createEmptySlugMaps = (): SlugMaps => ({
+  pagador: new Map(),
+  categoria: new Map(),
+  conta: new Map(),
+  cartao: new Map(),
+});
+
+type OptionSet = ReturnType<typeof buildOptionSets>;
+
+export default async function Page({ params, searchParams }: PageProps) {
+  const { pagadorId } = await params;
+  const userId = await getUserId();
+  const resolvedSearchParams = searchParams ? await searchParams : undefined;
+
+  const access = await getPagadorAccess(userId, pagadorId);
+
+  if (!access) {
+    notFound();
+  }
+
+  const { pagador, canEdit } = access;
+  const dataOwnerId = pagador.userId;
+
+  const periodoParamRaw = getSingleParam(resolvedSearchParams, "periodo");
+  const {
+    period: selectedPeriod,
+    monthName,
+    year,
+  } = parsePeriodParam(periodoParamRaw);
+  const periodLabel = `${capitalize(monthName)} de ${year}`;
+
+  const searchFilters = canEdit
+    ? extractLancamentoSearchFilters(resolvedSearchParams)
+    : EMPTY_FILTERS;
+
+  let filterSources: Awaited<
+    ReturnType<typeof fetchLancamentoFilterSources>
+  > | null = null;
+  let sluggedFilters: SluggedFilters;
+  let slugMaps: SlugMaps;
+
+  if (canEdit) {
+    filterSources = await fetchLancamentoFilterSources(dataOwnerId);
+    sluggedFilters = buildSluggedFilters(filterSources);
+    slugMaps = buildSlugMaps(sluggedFilters);
+  } else {
+    sluggedFilters = {
+      pagadorFiltersRaw: [],
+      categoriaFiltersRaw: [],
+      contaFiltersRaw: [],
+      cartaoFiltersRaw: [],
+    };
+    slugMaps = createEmptySlugMaps();
+  }
+
+  const filters = buildLancamentoWhere({
+    userId: dataOwnerId,
+    period: selectedPeriod,
+    filters: searchFilters,
+    slugMaps,
+    pagadorId: pagador.id,
+  });
+
+  const sharesPromise = canEdit
+    ? fetchPagadorShares(pagador.id)
+    : Promise.resolve([]);
+
+  const [
+    lancamentoRows,
+    monthlyBreakdown,
+    historyData,
+    cardUsage,
+    boletoStats,
+    shareRows,
+  ] = await Promise.all([
+    fetchPagadorLancamentos(filters),
+    fetchPagadorMonthlyBreakdown({
+      userId: dataOwnerId,
+      pagadorId: pagador.id,
+      period: selectedPeriod,
+    }),
+    fetchPagadorHistory({
+      userId: dataOwnerId,
+      pagadorId: pagador.id,
+      period: selectedPeriod,
+    }),
+    fetchPagadorCardUsage({
+      userId: dataOwnerId,
+      pagadorId: pagador.id,
+      period: selectedPeriod,
+    }),
+    fetchPagadorBoletoStats({
+      userId: dataOwnerId,
+      pagadorId: pagador.id,
+      period: selectedPeriod,
+    }),
+    sharesPromise,
+  ]);
+
+  const mappedLancamentos = mapLancamentosData(lancamentoRows);
+  const lancamentosData = canEdit
+    ? mappedLancamentos
+    : mappedLancamentos.map((item) => ({ ...item, readonly: true }));
+
+  const pagadorSharesData = shareRows;
+
+  let optionSets: OptionSet;
+  let effectiveSluggedFilters = sluggedFilters;
+
+  if (canEdit && filterSources) {
+    optionSets = buildOptionSets({
+      ...sluggedFilters,
+      pagadorRows: filterSources.pagadorRows,
+    });
+  } else {
+    effectiveSluggedFilters = {
+      pagadorFiltersRaw: [
+        { id: pagador.id, label: pagador.name, slug: pagador.id, role: pagador.role },
+      ],
+      categoriaFiltersRaw: [],
+      contaFiltersRaw: [],
+      cartaoFiltersRaw: [],
+    };
+    optionSets = buildReadOnlyOptionSets(lancamentosData, pagador);
+  }
+
+  const pagadorSlug =
+    effectiveSluggedFilters.pagadorFiltersRaw.find(
+      (item) => item.id === pagador.id
+    )?.slug ?? null;
+
+  const pagadorFilterOptions = pagadorSlug
+    ? optionSets.pagadorFilterOptions.filter(
+        (option) => option.slug === pagadorSlug
+      )
+    : optionSets.pagadorFilterOptions;
+
+  const pagadorData = {
+    id: pagador.id,
+    name: pagador.name,
+    email: pagador.email ?? null,
+    avatarUrl: pagador.avatarUrl ?? null,
+    status: pagador.status,
+    note: pagador.note ?? null,
+    role: pagador.role ?? null,
+    isAutoSend: pagador.isAutoSend ?? false,
+    createdAt: pagador.createdAt
+      ? pagador.createdAt.toISOString()
+      : new Date().toISOString(),
+    lastMailAt: pagador.lastMailAt ? pagador.lastMailAt.toISOString() : null,
+    shareCode: canEdit ? pagador.shareCode : null,
+    canEdit,
+  };
+
+  const summaryPreview = {
+    periodLabel,
+    totalExpenses: monthlyBreakdown.totalExpenses,
+    paymentSplits: monthlyBreakdown.paymentSplits,
+    cardUsage: cardUsage.slice(0, 3).map((item) => ({
+      name: item.name,
+      amount: item.amount,
+    })),
+    boletoStats: {
+      totalAmount: boletoStats.totalAmount,
+      paidAmount: boletoStats.paidAmount,
+      pendingAmount: boletoStats.pendingAmount,
+      paidCount: boletoStats.paidCount,
+      pendingCount: boletoStats.pendingCount,
+    },
+    lancamentoCount: lancamentosData.length,
+  };
+
+  return (
+    <main className="flex flex-col gap-6">
+      <MonthPicker />
+
+      <Tabs defaultValue="profile" className="w-full">
+        <TabsList className="mb-2">
+          <TabsTrigger value="profile">Perfil</TabsTrigger>
+          <TabsTrigger value="painel">Painel</TabsTrigger>
+          <TabsTrigger value="lancamentos">Lançamentos</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="profile" className="space-y-4">
+          <section>
+            <PagadorInfoCard
+              pagador={pagadorData}
+              selectedPeriod={selectedPeriod}
+              summary={summaryPreview}
+            />
+          </section>
+          {canEdit && pagadorData.shareCode ? (
+            <PagadorSharingCard
+              pagadorId={pagador.id}
+              shareCode={pagadorData.shareCode}
+              shares={pagadorSharesData}
+            />
+          ) : null}
+        </TabsContent>
+
+        <TabsContent value="painel" className="space-y-4">
+          <section className="grid gap-4 lg:grid-cols-2">
+            <PagadorMonthlySummaryCard
+              periodLabel={periodLabel}
+              breakdown={monthlyBreakdown}
+            />
+            <PagadorHistoryCard data={historyData} />
+          </section>
+
+          <section className="grid gap-4 lg:grid-cols-2">
+            <PagadorCardUsageCard items={cardUsage} />
+            <PagadorBoletoCard stats={boletoStats} />
+          </section>
+        </TabsContent>
+
+        <TabsContent value="lancamentos">
+          <section className="flex flex-col gap-4">
+            <LancamentosSection
+              lancamentos={lancamentosData}
+              pagadorOptions={optionSets.pagadorOptions}
+              splitPagadorOptions={optionSets.splitPagadorOptions}
+              defaultPagadorId={pagador.id}
+              contaOptions={optionSets.contaOptions}
+              cartaoOptions={optionSets.cartaoOptions}
+              categoriaOptions={optionSets.categoriaOptions}
+              pagadorFilterOptions={pagadorFilterOptions}
+              categoriaFilterOptions={optionSets.categoriaFilterOptions}
+              contaCartaoFilterOptions={optionSets.contaCartaoFilterOptions}
+              selectedPeriod={selectedPeriod}
+              allowCreate={canEdit}
+            />
+          </section>
+        </TabsContent>
+      </Tabs>
+    </main>
+  );
+}
+
+const normalizeOptionLabel = (value: string | null | undefined, fallback: string) =>
+  value?.trim().length ? value.trim() : fallback;
+
+function buildReadOnlyOptionSets(
+  items: LancamentoItem[],
+  pagador: typeof pagadores.$inferSelect
+): OptionSet {
+  const pagadorLabel = normalizeOptionLabel(pagador.name, "Pagador");
+  const pagadorOptions: SelectOption[] = [
+    {
+      value: pagador.id,
+      label: pagadorLabel,
+      slug: pagador.id,
+    },
+  ];
+
+  const contaOptionsMap = new Map<string, SelectOption>();
+  const cartaoOptionsMap = new Map<string, SelectOption>();
+  const categoriaOptionsMap = new Map<string, SelectOption>();
+
+  items.forEach((item) => {
+    if (item.contaId && !contaOptionsMap.has(item.contaId)) {
+      contaOptionsMap.set(item.contaId, {
+        value: item.contaId,
+        label: normalizeOptionLabel(item.contaName, "Conta sem nome"),
+        slug: item.contaId,
+      });
+    }
+    if (item.cartaoId && !cartaoOptionsMap.has(item.cartaoId)) {
+      cartaoOptionsMap.set(item.cartaoId, {
+        value: item.cartaoId,
+        label: normalizeOptionLabel(item.cartaoName, "Cartão sem nome"),
+        slug: item.cartaoId,
+      });
+    }
+    if (item.categoriaId && !categoriaOptionsMap.has(item.categoriaId)) {
+      categoriaOptionsMap.set(item.categoriaId, {
+        value: item.categoriaId,
+        label: normalizeOptionLabel(item.categoriaName, "Categoria"),
+        slug: item.categoriaId,
+      });
+    }
+  });
+
+  const contaOptions = Array.from(contaOptionsMap.values());
+  const cartaoOptions = Array.from(cartaoOptionsMap.values());
+  const categoriaOptions = Array.from(categoriaOptionsMap.values());
+
+  const pagadorFilterOptions: LancamentoFilterOption[] = [
+    { slug: pagador.id, label: pagadorLabel },
+  ];
+
+  const categoriaFilterOptions: LancamentoFilterOption[] = categoriaOptions.map(
+    (option) => ({
+      slug: option.value,
+      label: option.label,
+    })
+  );
+
+  const contaCartaoFilterOptions: ContaCartaoFilterOption[] = [
+    ...contaOptions.map((option) => ({
+      slug: option.value,
+      label: option.label,
+      kind: "conta" as const,
+    })),
+    ...cartaoOptions.map((option) => ({
+      slug: option.value,
+      label: option.label,
+      kind: "cartao" as const,
+    })),
+  ];
+
+  return {
+    pagadorOptions,
+    splitPagadorOptions: [],
+    defaultPagadorId: pagador.id,
+    contaOptions,
+    cartaoOptions,
+    categoriaOptions,
+    pagadorFilterOptions,
+    categoriaFilterOptions,
+    contaCartaoFilterOptions,
+  };
+}
diff --git a/app/(dashboard)/pagadores/actions.ts b/app/(dashboard)/pagadores/actions.ts
new file mode 100644
index 0000000..93e2999
--- /dev/null
+++ b/app/(dashboard)/pagadores/actions.ts
@@ -0,0 +1,337 @@
+"use server";
+
+import { pagadores, pagadorShares } from "@/db/schema";
+import { handleActionError, revalidateForEntity } from "@/lib/actions/helpers";
+import type { ActionResult } from "@/lib/actions/types";
+import { db } from "@/lib/db";
+import { getUser } from "@/lib/auth/server";
+import {
+  DEFAULT_PAGADOR_AVATAR,
+  PAGADOR_ROLE_ADMIN,
+  PAGADOR_ROLE_TERCEIRO,
+  PAGADOR_STATUS_OPTIONS,
+} from "@/lib/pagadores/constants";
+import { normalizeAvatarPath } from "@/lib/pagadores/utils";
+import { noteSchema, uuidSchema } from "@/lib/schemas/common";
+import { normalizeOptionalString } from "@/lib/utils/string";
+import { and, eq } from "drizzle-orm";
+import { revalidatePath } from "next/cache";
+import { randomBytes } from "node:crypto";
+import { z } from "zod";
+
+const statusEnum = z.enum(PAGADOR_STATUS_OPTIONS as [string, ...string[]], {
+  errorMap: () => ({
+    message: "Selecione um status válido.",
+  }),
+});
+
+const baseSchema = z.object({
+  name: z
+    .string({ message: "Informe o nome do pagador." })
+    .trim()
+    .min(1, "Informe o nome do pagador."),
+  email: z
+    .string()
+    .trim()
+    .email("Informe um e-mail válido.")
+    .optional()
+    .transform((value) => normalizeOptionalString(value)),
+  status: statusEnum,
+  note: noteSchema,
+  avatarUrl: z.string().trim().optional(),
+  isAutoSend: z.boolean().optional().default(false),
+});
+
+const createSchema = baseSchema;
+
+const updateSchema = baseSchema.extend({
+  id: uuidSchema("Pagador"),
+});
+
+const deleteSchema = z.object({
+  id: uuidSchema("Pagador"),
+});
+
+const shareDeleteSchema = z.object({
+  shareId: uuidSchema("Compartilhamento"),
+});
+
+const shareCodeJoinSchema = z.object({
+  code: z
+    .string({ message: "Informe o código." })
+    .trim()
+    .min(8, "Código inválido."),
+});
+
+const shareCodeRegenerateSchema = z.object({
+  pagadorId: uuidSchema("Pagador"),
+});
+
+type CreateInput = z.infer<typeof createSchema>;
+type UpdateInput = z.infer<typeof updateSchema>;
+type DeleteInput = z.infer<typeof deleteSchema>;
+type ShareDeleteInput = z.infer<typeof shareDeleteSchema>;
+type ShareCodeJoinInput = z.infer<typeof shareCodeJoinSchema>;
+type ShareCodeRegenerateInput = z.infer<typeof shareCodeRegenerateSchema>;
+
+const revalidate = () => revalidateForEntity("pagadores");
+
+const generateShareCode = () => {
+  // base64url já retorna apenas [a-zA-Z0-9_-]
+  // 18 bytes = 24 caracteres em base64
+  return randomBytes(18).toString("base64url").slice(0, 24);
+};
+
+export async function createPagadorAction(
+  input: CreateInput
+): Promise<ActionResult> {
+  try {
+    const user = await getUser();
+    const data = createSchema.parse(input);
+
+    await db.insert(pagadores).values({
+      name: data.name,
+      email: data.email,
+      status: data.status,
+      note: data.note,
+      avatarUrl: normalizeAvatarPath(data.avatarUrl) ?? DEFAULT_PAGADOR_AVATAR,
+      isAutoSend: data.isAutoSend ?? false,
+      role: PAGADOR_ROLE_TERCEIRO,
+      shareCode: generateShareCode(),
+      userId: user.id,
+    });
+
+    revalidate();
+
+    return { success: true, message: "Pagador criado com sucesso." };
+  } catch (error) {
+    return handleActionError(error);
+  }
+}
+
+export async function updatePagadorAction(
+  input: UpdateInput
+): Promise<ActionResult> {
+  try {
+    const user = await getUser();
+    const data = updateSchema.parse(input);
+
+    const existing = await db.query.pagadores.findFirst({
+      where: and(eq(pagadores.id, data.id), eq(pagadores.userId, user.id)),
+    });
+
+    if (!existing) {
+      return {
+        success: false,
+        error: "Pagador não encontrado.",
+      };
+    }
+
+    await db
+      .update(pagadores)
+      .set({
+        name: data.name,
+        email: data.email,
+        status: data.status,
+        note: data.note,
+        avatarUrl:
+          normalizeAvatarPath(data.avatarUrl) ?? existing.avatarUrl ?? null,
+        isAutoSend: data.isAutoSend ?? false,
+        role: existing.role ?? PAGADOR_ROLE_TERCEIRO,
+      })
+      .where(and(eq(pagadores.id, data.id), eq(pagadores.userId, user.id)));
+
+    revalidate();
+
+    return { success: true, message: "Pagador atualizado com sucesso." };
+  } catch (error) {
+    return handleActionError(error);
+  }
+}
+
+export async function deletePagadorAction(
+  input: DeleteInput
+): Promise<ActionResult> {
+  try {
+    const user = await getUser();
+    const data = deleteSchema.parse(input);
+
+    const existing = await db.query.pagadores.findFirst({
+      where: and(eq(pagadores.id, data.id), eq(pagadores.userId, user.id)),
+    });
+
+    if (!existing) {
+      return {
+        success: false,
+        error: "Pagador não encontrado.",
+      };
+    }
+
+    if (existing.role === PAGADOR_ROLE_ADMIN) {
+      return {
+        success: false,
+        error: "Pagadores administradores não podem ser removidos.",
+      };
+    }
+
+    await db
+      .delete(pagadores)
+      .where(and(eq(pagadores.id, data.id), eq(pagadores.userId, user.id)));
+
+    revalidate();
+
+    return { success: true, message: "Pagador removido com sucesso." };
+  } catch (error) {
+    return handleActionError(error);
+  }
+}
+
+export async function joinPagadorByShareCodeAction(
+  input: ShareCodeJoinInput
+): Promise<ActionResult> {
+  try {
+    const user = await getUser();
+    const data = shareCodeJoinSchema.parse(input);
+
+    const pagadorRow = await db.query.pagadores.findFirst({
+      where: eq(pagadores.shareCode, data.code),
+    });
+
+    if (!pagadorRow) {
+      return { success: false, error: "Código inválido ou expirado." };
+    }
+
+    if (pagadorRow.userId === user.id) {
+      return {
+        success: false,
+        error: "Você já é o proprietário deste pagador.",
+      };
+    }
+
+    const existingShare = await db.query.pagadorShares.findFirst({
+      where: and(
+        eq(pagadorShares.pagadorId, pagadorRow.id),
+        eq(pagadorShares.sharedWithUserId, user.id)
+      ),
+    });
+
+    if (existingShare) {
+      return {
+        success: false,
+        error: "Você já possui acesso a este pagador.",
+      };
+    }
+
+    await db.insert(pagadorShares).values({
+      pagadorId: pagadorRow.id,
+      sharedWithUserId: user.id,
+      permission: "read",
+      createdByUserId: pagadorRow.userId,
+    });
+
+    revalidate();
+
+    return { success: true, message: "Pagador adicionado à sua lista." };
+  } catch (error) {
+    return handleActionError(error);
+  }
+}
+
+export async function deletePagadorShareAction(
+  input: ShareDeleteInput
+): Promise<ActionResult> {
+  try {
+    const user = await getUser();
+    const data = shareDeleteSchema.parse(input);
+
+    const existing = await db.query.pagadorShares.findFirst({
+      columns: {
+        id: true,
+        pagadorId: true,
+        sharedWithUserId: true,
+      },
+      where: eq(pagadorShares.id, data.shareId),
+      with: {
+        pagador: {
+          columns: {
+            userId: true,
+          },
+        },
+      },
+    });
+
+    // Permitir que o owner OU o próprio usuário compartilhado remova o share
+    if (!existing || (existing.pagador.userId !== user.id && existing.sharedWithUserId !== user.id)) {
+      return {
+        success: false,
+        error: "Compartilhamento não encontrado.",
+      };
+    }
+
+    await db
+      .delete(pagadorShares)
+      .where(eq(pagadorShares.id, data.shareId));
+
+    revalidate();
+    revalidatePath(`/pagadores/${existing.pagadorId}`);
+
+    return { success: true, message: "Compartilhamento removido." };
+  } catch (error) {
+    return handleActionError(error);
+  }
+}
+
+export async function regeneratePagadorShareCodeAction(
+  input: ShareCodeRegenerateInput
+): Promise<{ success: true; message: string; code: string } | ActionResult> {
+  try {
+    const user = await getUser();
+    const data = shareCodeRegenerateSchema.parse(input);
+
+    const existing = await db.query.pagadores.findFirst({
+      columns: { id: true, userId: true },
+      where: and(eq(pagadores.id, data.pagadorId), eq(pagadores.userId, user.id)),
+    });
+
+    if (!existing) {
+      return { success: false, error: "Pagador não encontrado." };
+    }
+
+    let attempts = 0;
+    while (attempts < 5) {
+      const newCode = generateShareCode();
+      try {
+        await db
+          .update(pagadores)
+          .set({ shareCode: newCode })
+          .where(and(eq(pagadores.id, data.pagadorId), eq(pagadores.userId, user.id)));
+
+        revalidate();
+        revalidatePath(`/pagadores/${data.pagadorId}`);
+        return {
+          success: true,
+          message: "Código atualizado com sucesso.",
+          code: newCode,
+        };
+      } catch (error) {
+        if (
+          error instanceof Error &&
+          "constraint" in error &&
+          // @ts-expect-error constraint is present in postgres errors
+          error.constraint === "pagadores_share_code_key"
+        ) {
+          attempts += 1;
+          continue;
+        }
+        throw error;
+      }
+    }
+
+    return {
+      success: false,
+      error: "Não foi possível gerar um código único. Tente novamente.",
+    };
+  } catch (error) {
+    return handleActionError(error);
+  }
+}
diff --git a/app/(dashboard)/pagadores/layout.tsx b/app/(dashboard)/pagadores/layout.tsx
new file mode 100644
index 0000000..619824b
--- /dev/null
+++ b/app/(dashboard)/pagadores/layout.tsx
@@ -0,0 +1,23 @@
+import PageDescription from "@/components/page-description";
+import { RiGroupLine } from "@remixicon/react";
+
+export const metadata = {
+  title: "Pagadores | OpenSheets",
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <section className="space-y-6 px-6">
+      <PageDescription
+        icon={<RiGroupLine />}
+        title="Pagadores"
+        subtitle="Gerencie as pessoas ou entidades responsáveis pelos pagamentos."
+      />
+      {children}
+    </section>
+  );
+}
diff --git a/app/(dashboard)/pagadores/loading.tsx b/app/(dashboard)/pagadores/loading.tsx
new file mode 100644
index 0000000..85fa4b5
--- /dev/null
+++ b/app/(dashboard)/pagadores/loading.tsx
@@ -0,0 +1,57 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+/**
+ * Loading state para a página de pagadores
+ * Layout: Header + Input de compartilhamento + Grid de cards
+ */
+export default function PagadoresLoading() {
+  return (
+    <main className="flex flex-col items-start gap-6">
+      <div className="w-full space-y-6">
+        {/* Input de código de compartilhamento */}
+        <div className="rounded-2xl border p-4 space-y-3">
+          <Skeleton className="h-5 w-64 rounded-2xl bg-foreground/10" />
+          <div className="flex gap-2">
+            <Skeleton className="h-10 flex-1 rounded-2xl bg-foreground/10" />
+            <Skeleton className="h-10 w-32 rounded-2xl bg-foreground/10" />
+          </div>
+        </div>
+
+        {/* Grid de cards de pagadores */}
+        <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-2xl border p-6 space-y-4">
+              {/* Avatar + Nome + Badge */}
+              <div className="flex items-start gap-4">
+                <Skeleton className="size-16 rounded-full bg-foreground/10" />
+                <div className="flex-1 space-y-2">
+                  <Skeleton className="h-6 w-32 rounded-2xl bg-foreground/10" />
+                  <Skeleton className="h-5 w-20 rounded-2xl bg-foreground/10" />
+                </div>
+                {i === 0 && (
+                  <Skeleton className="h-6 w-16 rounded-2xl bg-foreground/10" />
+                )}
+              </div>
+
+              {/* Email */}
+              <Skeleton className="h-4 w-full rounded-2xl bg-foreground/10" />
+
+              {/* Status */}
+              <div className="flex items-center gap-2">
+                <Skeleton className="size-2 rounded-full bg-foreground/10" />
+                <Skeleton className="h-4 w-16 rounded-2xl bg-foreground/10" />
+              </div>
+
+              {/* Botões de ação */}
+              <div className="flex gap-2 pt-2 border-t">
+                <Skeleton className="h-9 flex-1 rounded-2xl bg-foreground/10" />
+                <Skeleton className="h-9 w-9 rounded-2xl bg-foreground/10" />
+                <Skeleton className="h-9 w-9 rounded-2xl bg-foreground/10" />
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </main>
+  );
+}
diff --git a/app/(dashboard)/pagadores/page.tsx b/app/(dashboard)/pagadores/page.tsx
new file mode 100644
index 0000000..7ff25b9
--- /dev/null
+++ b/app/(dashboard)/pagadores/page.tsx
@@ -0,0 +1,86 @@
+import { PagadoresPage } from "@/components/pagadores/pagadores-page";
+import type { PagadorStatus } from "@/lib/pagadores/constants";
+import {
+  PAGADOR_STATUS_OPTIONS,
+  DEFAULT_PAGADOR_AVATAR,
+  PAGADOR_ROLE_ADMIN,
+} from "@/lib/pagadores/constants";
+import { getUserId } from "@/lib/auth/server";
+import { fetchPagadoresWithAccess } from "@/lib/pagadores/access";
+import { readdir } from "node:fs/promises";
+import path from "node:path";
+
+const AVATAR_DIRECTORY = path.join(process.cwd(), "public", "avatares");
+const AVATAR_EXTENSIONS = new Set([".png", ".jpg", ".jpeg", ".svg", ".webp"]);
+
+async function loadAvatarOptions() {
+  try {
+    const files = await readdir(AVATAR_DIRECTORY, { withFileTypes: true });
+
+    const items = files
+      .filter((file) => file.isFile())
+      .map((file) => file.name)
+      .filter((file) => AVATAR_EXTENSIONS.has(path.extname(file).toLowerCase()))
+      .sort((a, b) => a.localeCompare(b, "pt-BR", { sensitivity: "base" }));
+
+    if (items.length === 0) {
+      items.push(DEFAULT_PAGADOR_AVATAR);
+    }
+
+    return Array.from(new Set(items));
+  } catch {
+    return [DEFAULT_PAGADOR_AVATAR];
+  }
+}
+
+const resolveStatus = (status: string | null): PagadorStatus => {
+  const normalized = status?.trim() ?? "";
+  const found = PAGADOR_STATUS_OPTIONS.find(
+    (option) => option.toLowerCase() === normalized.toLowerCase()
+  );
+  return found ?? PAGADOR_STATUS_OPTIONS[0];
+};
+
+export default async function Page() {
+  const userId = await getUserId();
+
+  const [pagadorRows, avatarOptions] = await Promise.all([
+    fetchPagadoresWithAccess(userId),
+    loadAvatarOptions(),
+  ]);
+
+  const pagadoresData = pagadorRows
+    .map((pagador) => ({
+      id: pagador.id,
+      name: pagador.name,
+      email: pagador.email,
+      avatarUrl: pagador.avatarUrl,
+      status: resolveStatus(pagador.status),
+      note: pagador.note,
+      role: pagador.role,
+      isAutoSend: pagador.isAutoSend ?? false,
+      createdAt: pagador.createdAt?.toISOString() ?? new Date().toISOString(),
+      canEdit: pagador.canEdit,
+      sharedByName: pagador.sharedByName ?? null,
+      sharedByEmail: pagador.sharedByEmail ?? null,
+      shareId: pagador.shareId ?? null,
+      shareCode: pagador.canEdit ? pagador.shareCode ?? null : null,
+    }))
+    .sort((a, b) => {
+      // Admin sempre primeiro
+      if (a.role === PAGADOR_ROLE_ADMIN && b.role !== PAGADOR_ROLE_ADMIN) {
+        return -1;
+      }
+      if (a.role !== PAGADOR_ROLE_ADMIN && b.role === PAGADOR_ROLE_ADMIN) {
+        return 1;
+      }
+      // Se ambos são admin ou ambos não são, mantém ordem original
+      return 0;
+    });
+
+  return (
+    <main className="flex flex-col items-start gap-6">
+      <PagadoresPage pagadores={pagadoresData} avatarOptions={avatarOptions} />
+    </main>
+  );
+}
diff --git a/app/(landing-page)/page.tsx b/app/(landing-page)/page.tsx
new file mode 100644
index 0000000..5c8d9de
--- /dev/null
+++ b/app/(landing-page)/page.tsx
@@ -0,0 +1,534 @@
+import { AnimatedThemeToggler } from "@/components/animated-theme-toggler";
+import { Logo } from "@/components/logo";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { getOptionalUserSession } from "@/lib/auth/server";
+import {
+  RiArrowRightSLine,
+  RiBankCardLine,
+  RiBarChartBoxLine,
+  RiCalendarLine,
+  RiDeviceLine,
+  RiEyeOffLine,
+  RiLineChartLine,
+  RiLockLine,
+  RiMoneyDollarCircleLine,
+  RiNotificationLine,
+  RiPieChartLine,
+  RiShieldCheckLine,
+  RiTimeLine,
+  RiWalletLine,
+} from "@remixicon/react";
+import Link from "next/link";
+
+export default async function Page() {
+  const session = await getOptionalUserSession();
+
+  return (
+    <div className="flex min-h-screen flex-col">
+      {/* Navigation */}
+      <header className="sticky top-0 z-50 border-b bg-background/95 backdrop-blur supports-backdrop-filter:bg-background/60">
+        <div className="container flex h-16 items-center justify-between">
+          <div className="flex items-center">
+            <Logo />
+          </div>
+          <nav className="flex items-center gap-2 md:gap-4">
+            <AnimatedThemeToggler />
+            {session?.user ? (
+              <Link prefetch href="/dashboard">
+                <Button variant="outline" size="sm">
+                  Dashboard
+                </Button>
+              </Link>
+            ) : (
+              <>
+                <Link href="/login">
+                  <Button variant="ghost" size="sm">
+                    Entrar
+                  </Button>
+                </Link>
+                <Link href="/signup">
+                  <Button size="sm" className="gap-2">
+                    Começar Grátis
+                    <RiArrowRightSLine size={16} />
+                  </Button>
+                </Link>
+              </>
+            )}
+          </nav>
+        </div>
+      </header>
+
+      {/* Hero Section */}
+      <section className="relative py-16 md:py-24 lg:py-32">
+        <div className="container">
+          <div className="mx-auto flex max-w-5xl flex-col items-center text-center gap-6">
+            <Badge variant="secondary" className="mb-2">
+              <RiLineChartLine size={14} className="mr-1" />
+              Controle Financeiro Inteligente
+            </Badge>
+
+            <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight">
+              Gerencie suas finanças
+              <span className="text-primary"> com simplicidade</span>
+            </h1>
+
+            <p className="text-lg md:text-xl text-muted-foreground max-w-2xl">
+              Organize seus gastos, acompanhe receitas, gerencie cartões de
+              crédito e tome decisões financeiras mais inteligentes. Tudo em um
+              só lugar.
+            </p>
+
+            <div className="flex flex-col sm:flex-row gap-4 mt-4">
+              <Link href="/signup">
+                <Button size="lg" className="gap-2 w-full sm:w-auto">
+                  Começar Gratuitamente
+                  <RiArrowRightSLine size={18} />
+                </Button>
+              </Link>
+              <Link href="/login">
+                <Button
+                  size="lg"
+                  variant="outline"
+                  className="w-full sm:w-auto"
+                >
+                  Fazer Login
+                </Button>
+              </Link>
+            </div>
+
+            <div className="mt-8 flex flex-wrap items-center justify-center gap-6 text-sm text-muted-foreground">
+              <div className="flex items-center gap-2">
+                <RiShieldCheckLine size={18} className="text-primary" />
+                Dados Seguros
+              </div>
+              <div className="flex items-center gap-2">
+                <RiEyeOffLine size={18} className="text-primary" />
+                Modo Privacidade
+              </div>
+              <div className="flex items-center gap-2">
+                <RiDeviceLine size={18} className="text-primary" />
+                100% Responsivo
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Features Section */}
+      <section className="py-16 md:py-24 bg-muted/30">
+        <div className="container">
+          <div className="mx-auto max-w-5xl">
+            <div className="text-center mb-12">
+              <Badge variant="secondary" className="mb-4">
+                Funcionalidades
+              </Badge>
+              <h2 className="text-3xl md:text-4xl font-bold tracking-tight mb-4">
+                Tudo que você precisa para gerenciar suas finanças
+              </h2>
+              <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
+                Ferramentas poderosas e intuitivas para controle financeiro
+                completo
+              </p>
+            </div>
+
+            <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+              <Card className="border-2 hover:border-primary/50 transition-colors">
+                <CardContent className="pt-6">
+                  <div className="flex flex-col gap-4">
+                    <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
+                      <RiWalletLine size={24} className="text-primary" />
+                    </div>
+                    <div>
+                      <h3 className="font-semibold text-lg mb-2">
+                        Lançamentos
+                      </h3>
+                      <p className="text-sm text-muted-foreground">
+                        Registre receitas e despesas com categorização
+                        automática e controle detalhado de pagadores e contas.
+                      </p>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+
+              <Card className="border-2 hover:border-primary/50 transition-colors">
+                <CardContent className="pt-6">
+                  <div className="flex flex-col gap-4">
+                    <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
+                      <RiBankCardLine size={24} className="text-primary" />
+                    </div>
+                    <div>
+                      <h3 className="font-semibold text-lg mb-2">
+                        Cartões de Crédito
+                      </h3>
+                      <p className="text-sm text-muted-foreground">
+                        Gerencie múltiplos cartões, acompanhe faturas, limites e
+                        nunca perca o controle dos gastos.
+                      </p>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+
+              <Card className="border-2 hover:border-primary/50 transition-colors">
+                <CardContent className="pt-6">
+                  <div className="flex flex-col gap-4">
+                    <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
+                      <RiPieChartLine size={24} className="text-primary" />
+                    </div>
+                    <div>
+                      <h3 className="font-semibold text-lg mb-2">Categorias</h3>
+                      <p className="text-sm text-muted-foreground">
+                        Organize suas transações em categorias personalizadas e
+                        visualize onde seu dinheiro está indo.
+                      </p>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+
+              <Card className="border-2 hover:border-primary/50 transition-colors">
+                <CardContent className="pt-6">
+                  <div className="flex flex-col gap-4">
+                    <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
+                      <RiMoneyDollarCircleLine
+                        size={24}
+                        className="text-primary"
+                      />
+                    </div>
+                    <div>
+                      <h3 className="font-semibold text-lg mb-2">Orçamentos</h3>
+                      <p className="text-sm text-muted-foreground">
+                        Defina limites de gastos por categoria e receba alertas
+                        para manter suas finanças no caminho certo.
+                      </p>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+
+              <Card className="border-2 hover:border-primary/50 transition-colors">
+                <CardContent className="pt-6">
+                  <div className="flex flex-col gap-4">
+                    <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
+                      <RiBarChartBoxLine size={24} className="text-primary" />
+                    </div>
+                    <div>
+                      <h3 className="font-semibold text-lg mb-2">Insights</h3>
+                      <p className="text-sm text-muted-foreground">
+                        Análise detalhada de padrões de gastos com gráficos e
+                        relatórios para decisões mais inteligentes.
+                      </p>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+
+              <Card className="border-2 hover:border-primary/50 transition-colors">
+                <CardContent className="pt-6">
+                  <div className="flex flex-col gap-4">
+                    <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
+                      <RiCalendarLine size={24} className="text-primary" />
+                    </div>
+                    <div>
+                      <h3 className="font-semibold text-lg mb-2">Calendário</h3>
+                      <p className="text-sm text-muted-foreground">
+                        Visualize suas transações em calendário mensal e nunca
+                        perca prazos importantes.
+                      </p>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Benefits Section */}
+      <section className="py-16 md:py-24">
+        <div className="container">
+          <div className="mx-auto max-w-5xl">
+            <div className="grid gap-12 lg:grid-cols-2 items-center">
+              <div>
+                <Badge variant="secondary" className="mb-4">
+                  Vantagens
+                </Badge>
+                <h2 className="text-3xl md:text-4xl font-bold tracking-tight mb-6">
+                  Controle financeiro descomplicado
+                </h2>
+                <div className="space-y-6">
+                  <div className="flex gap-4">
+                    <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10">
+                      <RiShieldCheckLine size={20} className="text-primary" />
+                    </div>
+                    <div>
+                      <h3 className="font-semibold mb-1">
+                        Segurança em Primeiro Lugar
+                      </h3>
+                      <p className="text-sm text-muted-foreground">
+                        Seus dados financeiros são criptografados e armazenados
+                        com os mais altos padrões de segurança.
+                      </p>
+                    </div>
+                  </div>
+
+                  <div className="flex gap-4">
+                    <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10">
+                      <RiTimeLine size={20} className="text-primary" />
+                    </div>
+                    <div>
+                      <h3 className="font-semibold mb-1">Economize Tempo</h3>
+                      <p className="text-sm text-muted-foreground">
+                        Interface intuitiva que permite registrar transações em
+                        segundos e acompanhar tudo de forma visual.
+                      </p>
+                    </div>
+                  </div>
+
+                  <div className="flex gap-4">
+                    <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10">
+                      <RiNotificationLine size={20} className="text-primary" />
+                    </div>
+                    <div>
+                      <h3 className="font-semibold mb-1">
+                        Alertas Inteligentes
+                      </h3>
+                      <p className="text-sm text-muted-foreground">
+                        Receba notificações sobre vencimentos, limites de
+                        orçamento e padrões incomuns de gastos.
+                      </p>
+                    </div>
+                  </div>
+
+                  <div className="flex gap-4">
+                    <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10">
+                      <RiEyeOffLine size={20} className="text-primary" />
+                    </div>
+                    <div>
+                      <h3 className="font-semibold mb-1">Modo Privacidade</h3>
+                      <p className="text-sm text-muted-foreground">
+                        Oculte valores sensíveis com um clique para visualizar
+                        suas finanças em qualquer lugar com discrição.
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div className="space-y-4">
+                <Card className="border-2">
+                  <CardContent className="pt-6">
+                    <div className="flex items-start gap-4">
+                      <RiLineChartLine
+                        size={32}
+                        className="text-primary shrink-0"
+                      />
+                      <div>
+                        <h3 className="font-semibold text-lg mb-2">
+                          Visualização Clara
+                        </h3>
+                        <p className="text-sm text-muted-foreground">
+                          Gráficos interativos e dashboards personalizáveis
+                          mostram sua situação financeira de forma clara e
+                          objetiva.
+                        </p>
+                      </div>
+                    </div>
+                  </CardContent>
+                </Card>
+
+                <Card className="border-2">
+                  <CardContent className="pt-6">
+                    <div className="flex items-start gap-4">
+                      <RiDeviceLine
+                        size={32}
+                        className="text-primary shrink-0"
+                      />
+                      <div>
+                        <h3 className="font-semibold text-lg mb-2">
+                          Acesso em Qualquer Lugar
+                        </h3>
+                        <p className="text-sm text-muted-foreground">
+                          Design responsivo que funciona perfeitamente em
+                          desktop, tablet e smartphone. Suas finanças sempre à
+                          mão.
+                        </p>
+                      </div>
+                    </div>
+                  </CardContent>
+                </Card>
+
+                <Card className="border-2">
+                  <CardContent className="pt-6">
+                    <div className="flex items-start gap-4">
+                      <RiLockLine size={32} className="text-primary shrink-0" />
+                      <div>
+                        <h3 className="font-semibold text-lg mb-2">
+                          Privacidade Garantida
+                        </h3>
+                        <p className="text-sm text-muted-foreground">
+                          Seus dados são seus. Sem compartilhamento com
+                          terceiros, sem anúncios, sem surpresas.
+                        </p>
+                      </div>
+                    </div>
+                  </CardContent>
+                </Card>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* CTA Section */}
+      <section className="py-16 md:py-24 bg-muted/30">
+        <div className="container">
+          <div className="mx-auto max-w-3xl text-center">
+            <h2 className="text-3xl md:text-4xl font-bold tracking-tight mb-4">
+              Pronto para transformar suas finanças?
+            </h2>
+            <p className="text-lg text-muted-foreground mb-8">
+              Comece agora mesmo a organizar seu dinheiro de forma inteligente.
+              É grátis e leva menos de um minuto.
+            </p>
+            <div className="flex flex-col sm:flex-row gap-4 justify-center">
+              <Link href="/signup">
+                <Button size="lg" className="gap-2 w-full sm:w-auto">
+                  Criar Conta Gratuita
+                  <RiArrowRightSLine size={18} />
+                </Button>
+              </Link>
+              <Link href="/login">
+                <Button
+                  size="lg"
+                  variant="outline"
+                  className="w-full sm:w-auto"
+                >
+                  Já tenho conta
+                </Button>
+              </Link>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Footer */}
+      <footer className="border-t py-12 mt-auto">
+        <div className="container">
+          <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-4">
+            <div>
+              <Logo />
+              <p className="text-sm text-muted-foreground mt-4">
+                Gerencie suas finanças pessoais com simplicidade e segurança.
+              </p>
+            </div>
+
+            <div>
+              <h3 className="font-semibold mb-4">Produto</h3>
+              <ul className="space-y-3 text-sm text-muted-foreground">
+                <li>
+                  <Link
+                    href="/login"
+                    className="hover:text-foreground transition-colors"
+                  >
+                    Funcionalidades
+                  </Link>
+                </li>
+                <li>
+                  <Link
+                    href="/login"
+                    className="hover:text-foreground transition-colors"
+                  >
+                    Preços
+                  </Link>
+                </li>
+                <li>
+                  <Link
+                    href="/login"
+                    className="hover:text-foreground transition-colors"
+                  >
+                    Segurança
+                  </Link>
+                </li>
+              </ul>
+            </div>
+
+            <div>
+              <h3 className="font-semibold mb-4">Recursos</h3>
+              <ul className="space-y-3 text-sm text-muted-foreground">
+                <li>
+                  <Link
+                    href="/login"
+                    className="hover:text-foreground transition-colors"
+                  >
+                    Blog
+                  </Link>
+                </li>
+                <li>
+                  <Link
+                    href="/login"
+                    className="hover:text-foreground transition-colors"
+                  >
+                    Ajuda
+                  </Link>
+                </li>
+                <li>
+                  <Link
+                    href="/login"
+                    className="hover:text-foreground transition-colors"
+                  >
+                    Tutoriais
+                  </Link>
+                </li>
+              </ul>
+            </div>
+
+            <div>
+              <h3 className="font-semibold mb-4">Legal</h3>
+              <ul className="space-y-3 text-sm text-muted-foreground">
+                <li>
+                  <Link
+                    href="/login"
+                    className="hover:text-foreground transition-colors"
+                  >
+                    Privacidade
+                  </Link>
+                </li>
+                <li>
+                  <Link
+                    href="/login"
+                    className="hover:text-foreground transition-colors"
+                  >
+                    Termos de Uso
+                  </Link>
+                </li>
+                <li>
+                  <Link
+                    href="/login"
+                    className="hover:text-foreground transition-colors"
+                  >
+                    Cookies
+                  </Link>
+                </li>
+              </ul>
+            </div>
+          </div>
+
+          <div className="border-t mt-12 pt-8 flex flex-col md:flex-row justify-between items-center gap-4 text-sm text-muted-foreground">
+            <p>
+              © {new Date().getFullYear()} OpenSheets. Todos os direitos
+              reservados.
+            </p>
+            <div className="flex items-center gap-2">
+              <RiShieldCheckLine size={16} className="text-primary" />
+              <span>Seus dados são protegidos e criptografados</span>
+            </div>
+          </div>
+        </div>
+      </footer>
+    </div>
+  );
+}
diff --git a/app/api/auth/[...all]/route.ts b/app/api/auth/[...all]/route.ts
new file mode 100644
index 0000000..b2c1b51
--- /dev/null
+++ b/app/api/auth/[...all]/route.ts
@@ -0,0 +1,4 @@
+import { auth } from "@/lib/auth/config";
+import { toNextJsHandler } from "better-auth/next-js";
+
+export const { GET, POST } = toNextJsHandler(auth.handler);
diff --git a/app/api/health/route.ts b/app/api/health/route.ts
new file mode 100644
index 0000000..ccdf9d5
--- /dev/null
+++ b/app/api/health/route.ts
@@ -0,0 +1,39 @@
+import { NextResponse } from "next/server";
+import { db } from "@/lib/db";
+
+/**
+ * Health check endpoint para Docker e monitoring
+ * GET /api/health
+ *
+ * Retorna status 200 se a aplicação está saudável
+ * Verifica conexão com banco de dados
+ */
+export async function GET() {
+  try {
+    // Tenta fazer uma query simples no banco para verificar conexão
+    // Isso garante que o app está conectado ao banco antes de considerar "healthy"
+    await db.execute("SELECT 1");
+
+    return NextResponse.json(
+      {
+        status: "ok",
+        timestamp: new Date().toISOString(),
+        service: "opensheets-app",
+      },
+      { status: 200 }
+    );
+  } catch (error) {
+    // Se houver erro na conexão com banco, retorna status 503 (Service Unavailable)
+    console.error("Health check failed:", error);
+
+    return NextResponse.json(
+      {
+        status: "error",
+        timestamp: new Date().toISOString(),
+        service: "opensheets-app",
+        error: error instanceof Error ? error.message : "Database connection failed",
+      },
+      { status: 503 }
+    );
+  }
+}
diff --git a/app/error.tsx b/app/error.tsx
new file mode 100644
index 0000000..acbf006
--- /dev/null
+++ b/app/error.tsx
@@ -0,0 +1,53 @@
+"use client";
+
+import { RiErrorWarningFill } from "@remixicon/react";
+import Link from "next/link";
+import { useEffect } from "react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from "@/components/ui/empty";
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    // Log the error to an error reporting service
+    console.error(error);
+  }, [error]);
+
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center p-4">
+      <Empty className="max-w-md border-0">
+        <EmptyHeader>
+          <EmptyMedia variant="icon" className="bg-destructive/10 size-16">
+            <RiErrorWarningFill className="size-8 text-destructive" />
+          </EmptyMedia>
+          <EmptyTitle className="text-2xl">Algo deu errado</EmptyTitle>
+          <EmptyDescription>
+            Ocorreu um problema inesperado. Por favor, tente novamente ou volte
+            para o dashboard.
+          </EmptyDescription>
+        </EmptyHeader>
+        <EmptyContent>
+          <div className="flex flex-col gap-2 sm:flex-row">
+            <Button onClick={() => reset()}>Tentar Novamente</Button>
+            <Button variant="outline" asChild>
+              <Link href="/dashboard">Voltar para o Dashboard</Link>
+            </Button>
+          </div>
+        </EmptyContent>
+      </Empty>
+    </div>
+  );
+}
diff --git a/app/favicon.ico b/app/favicon.ico
new file mode 100644
index 0000000..b379076
Binary files /dev/null and b/app/favicon.ico differ
diff --git a/app/globals.css b/app/globals.css
new file mode 100644
index 0000000..8ed9b70
--- /dev/null
+++ b/app/globals.css
@@ -0,0 +1,209 @@
+@import "tailwindcss";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme {
+  --spacing-custom-height-1: 28rem;
+}
+
+:root {
+  --background: oklch(95.657% 0.00898 78.134);
+  --foreground: oklch(0.1448 0 0);
+  --card: oklch(98.531% 0.00274 84.298);
+  --card-foreground: oklch(0.1448 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.1448 0 0);
+  --primary: oklch(63.198% 0.16941 37.263);
+  --primary-foreground: oklch(0.9851 0 0);
+  --secondary: oklch(0.9702 0 0);
+  --secondary-foreground: oklch(0.2046 0 0);
+  --muted: var(--background);
+  --muted-foreground: oklch(0.5555 0 0);
+  --accent: oklch(0.9702 0 0);
+  --accent-foreground: oklch(0.2046 0 0);
+  --destructive: oklch(0.583 0.2387 28.4765);
+  --destructive-foreground: oklch(1 0 0);
+  --border: oklch(89.814% 0.00805 114.524);
+  --input: oklch(70.84% 0.00279 106.916);
+  --ring: oklch(76.109% 0.15119 44.68);
+  --chart-1: oklch(70.734% 0.16977 153.383);
+  --chart-2: oklch(62.464% 0.20395 25.32);
+  --chart-3: oklch(58.831% 0.22222 298.916);
+  --chart-4: oklch(0.4893 0.2202 264.0405);
+  --chart-5: oklch(0.421 0.1792 266.0094);
+  --sidebar: oklch(91.118% 0.01317 82.34);
+  --sidebar-foreground: oklch(0.1448 0 0);
+  --sidebar-primary: oklch(0.2046 0 0);
+  --sidebar-primary-foreground: oklch(0.9851 0 0);
+  --sidebar-accent: oklch(93.199% 0.00336 67.072);
+  --sidebar-accent-foreground: oklch(0.2046 0 0);
+  --sidebar-border: var(--primary);
+  --sidebar-ring: oklch(0.709 0 0);
+  --radius: 0.8rem;
+  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1),
+    0 1px 2px -1px hsl(0 0% 0% / 0.1);
+  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
+  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1),
+    0 2px 4px -1px hsl(0 0% 0% / 0.1);
+  --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1),
+    0 4px 6px -1px hsl(0 0% 0% / 0.1);
+  --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1),
+    0 8px 10px -1px hsl(0 0% 0% / 0.1);
+  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
+  --tracking-normal: 0em;
+  --spacing: 0.25rem;
+  --month-picker: oklch(89.296% 0.0234 143.556);
+  --month-picker-foreground: oklch(28% 0.035 143.556);
+  --dark: oklch(27.171% 0.00927 294.877);
+  --dark-foreground: oklch(91.3% 0.00281 84.324);
+  --welcome-banner: var(--primary);
+  --welcome-banner-foreground: oklch(98% 0.005 35.01);
+}
+
+.dark {
+  --background: oklch(18.5% 0.008 67.284);
+  --foreground: oklch(96.5% 0.002 67.284);
+  --card: oklch(22.8% 0.009 67.284);
+  --card-foreground: oklch(96.5% 0.002 67.284);
+  --popover: oklch(24.5% 0.01 67.284);
+  --popover-foreground: oklch(96.5% 0.002 67.284);
+  --primary: oklch(63.198% 0.16941 37.263);
+  --primary-foreground: oklch(98% 0.001 67.284);
+  --secondary: oklch(26.5% 0.008 67.284);
+  --secondary-foreground: oklch(96.5% 0.002 67.284);
+  --muted: oklch(25.2% 0.008 67.284);
+  --muted-foreground: oklch(68% 0.004 67.284);
+  --accent: oklch(30.5% 0.012 67.284);
+  --accent-foreground: oklch(96.5% 0.002 67.284);
+  --destructive: oklch(62.5% 0.218 28.4765);
+  --destructive-foreground: oklch(98% 0.001 67.284);
+  --border: oklch(32.5% 0.01 114.524);
+  --input: oklch(38.5% 0.012 106.916);
+  --ring: oklch(68% 0.135 35.01);
+  --chart-1: oklch(70.734% 0.16977 153.383);
+  --chart-2: oklch(62.464% 0.20395 25.32);
+  --chart-3: oklch(63.656% 0.19467 301.166);
+  --chart-4: oklch(60% 0.19 264.0405);
+  --chart-5: oklch(56% 0.16 266.0094);
+  --sidebar: oklch(20.2% 0.009 67.484);
+  --sidebar-foreground: oklch(96.5% 0.002 67.284);
+  --sidebar-primary: oklch(65.5% 0.148 35.01);
+  --sidebar-primary-foreground: oklch(98% 0.001 67.284);
+  --sidebar-accent: oklch(28.5% 0.011 67.072);
+  --sidebar-accent-foreground: oklch(96.5% 0.002 67.284);
+  --sidebar-border: oklch(30% 0.01 67.484);
+  --sidebar-ring: oklch(68% 0.135 35.01);
+  --radius: 0.8rem;
+  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.15);
+  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.2);
+  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.25),
+    0 1px 2px -1px hsl(0 0% 0% / 0.25);
+  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.3), 0 1px 2px -1px hsl(0 0% 0% / 0.3);
+  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.35),
+    0 2px 4px -1px hsl(0 0% 0% / 0.35);
+  --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.4),
+    0 4px 6px -1px hsl(0 0% 0% / 0.4);
+  --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.45),
+    0 8px 10px -1px hsl(0 0% 0% / 0.45);
+  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.5);
+  --tracking-normal: 0em;
+  --spacing: 0.25rem;
+  --month-picker: var(--card);
+  --month-picker-foreground: var(--foreground);
+  --dark: oklch(91.3% 0.00281 84.324);
+  --dark-foreground: oklch(23.649% 0.00484 67.469);
+  --welcome-banner: var(--card);
+  --welcome-banner-foreground: --dark;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --shadow-2xs: var(--shadow-2xs);
+  --shadow-xs: var(--shadow-xs);
+  --shadow-sm: var(--shadow-sm);
+  --shadow: var(--shadow);
+  --shadow-md: var(--shadow-md);
+  --shadow-lg: var(--shadow-lg);
+  --shadow-xl: var(--shadow-xl);
+  --shadow-2xl: var(--shadow-2xl);
+  --tracking-normal: var(--tracking-normal);
+  --spacing: var(--spacing);
+  --color-month-picker: var(--month-picker);
+  --color-month-picker-foreground: var(--month-picker-foreground);
+  --color-dark: var(--dark);
+  --color-dark-foreground: var(--dark-foreground);
+  --color-welcome-banner: var(--welcome-banner);
+  --color-welcome-banner-foreground: var(--welcome-banner-foreground);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+  }
+
+  *::selection {
+    @apply bg-violet-400 text-foreground;
+  }
+
+  .dark *::selection {
+    @apply bg-orange-700 text-foreground;
+  }
+
+  button:not(:disabled),
+  [role="button"]:not(:disabled) {
+    cursor: pointer;
+  }
+}
+
+@layer components {
+  .container {
+    @apply mx-auto px-4 lg:px-0;
+  }
+}
+
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation: none;
+  mix-blend-mode: normal;
+}
diff --git a/app/layout.tsx b/app/layout.tsx
new file mode 100644
index 0000000..f4d7dd1
--- /dev/null
+++ b/app/layout.tsx
@@ -0,0 +1,40 @@
+import { PrivacyProvider } from "@/components/privacy-provider";
+import { ThemeProvider } from "@/components/theme-provider";
+import { Toaster } from "@/components/ui/sonner";
+import { main_font } from "@/public/fonts/font_index";
+import type { Metadata } from "next";
+import "./globals.css";
+
+export const metadata: Metadata = {
+  title: "OpenSheets",
+  description: "Finanças pessoais descomplicadas.",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <head>
+        <script
+          defer
+          src="https://umami.felipecoutinho.com/script.js"
+          data-website-id="42f8519e-de88-467e-8969-d13a76211e43"
+        ></script>
+      </head>
+      <body
+        className={`${main_font.className} antialiased`}
+        suppressHydrationWarning
+      >
+        <ThemeProvider attribute="class" defaultTheme="light">
+          <PrivacyProvider>
+            {children}
+            <Toaster position="top-right" />
+          </PrivacyProvider>
+        </ThemeProvider>
+      </body>
+    </html>
+  );
+}
diff --git a/app/not-found.tsx b/app/not-found.tsx
new file mode 100644
index 0000000..9bbd750
--- /dev/null
+++ b/app/not-found.tsx
@@ -0,0 +1,35 @@
+import Link from "next/link";
+import { RiFileSearchLine } from "@remixicon/react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from "@/components/ui/empty";
+
+export default function NotFound() {
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center p-4">
+      <Empty className="max-w-md border-0">
+        <EmptyHeader>
+          <EmptyMedia variant="icon" className="size-16">
+            <RiFileSearchLine className="size-8" />
+          </EmptyMedia>
+          <EmptyTitle className="text-2xl">Página não encontrada</EmptyTitle>
+          <EmptyDescription>
+            A página que você está procurando não existe ou foi movida.
+          </EmptyDescription>
+        </EmptyHeader>
+        <EmptyContent>
+          <Button asChild>
+            <Link href="/dashboard">Voltar para o Dashboard</Link>
+          </Button>
+        </EmptyContent>
+      </Empty>
+    </div>
+  );
+}
diff --git a/components.json b/components.json
new file mode 100644
index 0000000..13a92f1
--- /dev/null
+++ b/components.json
@@ -0,0 +1,26 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "@remixicon/react",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "registries": {
+    "@coss": "https://coss.com/ui/r/{name}.json",
+    "@magicui": "https://magicui.design/r/{name}.json",
+    "@react-bits": "https://reactbits.dev/r/{name}.json"
+  }
+}
diff --git a/components/ajustes/delete-account-form.tsx b/components/ajustes/delete-account-form.tsx
new file mode 100644
index 0000000..6d87be7
--- /dev/null
+++ b/components/ajustes/delete-account-form.tsx
@@ -0,0 +1,143 @@
+"use client";
+
+import { deleteAccountAction } from "@/app/(dashboard)/ajustes/actions";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { authClient } from "@/lib/auth/client";
+import { RiAlertLine } from "@remixicon/react";
+import { useRouter } from "next/navigation";
+import { useState, useTransition } from "react";
+import { toast } from "sonner";
+
+export function DeleteAccountForm() {
+  const router = useRouter();
+  const [isPending, startTransition] = useTransition();
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [confirmation, setConfirmation] = useState("");
+
+  const handleDelete = () => {
+    startTransition(async () => {
+      const result = await deleteAccountAction({
+        confirmation,
+      });
+
+      if (result.success) {
+        toast.success(result.message);
+        // Fazer logout e redirecionar para página de login
+        await authClient.signOut();
+        router.push("/");
+      } else {
+        toast.error(result.error);
+      }
+    });
+  };
+
+  const handleOpenModal = () => {
+    setConfirmation("");
+    setIsModalOpen(true);
+  };
+
+  const handleCloseModal = () => {
+    if (isPending) return;
+    setConfirmation("");
+    setIsModalOpen(false);
+  };
+
+  return (
+    <>
+      <div className="rounded-lg border border-destructive/50 bg-destructive/10 p-4 space-y-4">
+        <div className="flex items-start gap-3">
+          <RiAlertLine className="size-5 text-destructive mt-0.5" />
+          <div className="flex-1 space-y-1">
+            <h3 className="font-medium text-destructive">
+              Remoção definitiva de conta
+            </h3>
+            <p className="text-sm text-foreground">
+              Ao prosseguir, sua conta e todos os dados associados serão
+              excluídos de forma irreversível.
+            </p>
+          </div>
+        </div>
+
+        <ul className="list-disc list-inside text-sm text-muted-foreground space-y-1 pl-8">
+          <li>Lançamentos, anexos e notas</li>
+          <li>Contas, cartões, orçamentos e categorias</li>
+          <li>Pagadores (incluindo o pagador padrão)</li>
+          <li>Preferências e configurações</li>
+        </ul>
+
+        <Button
+          variant="destructive"
+          onClick={handleOpenModal}
+          disabled={isPending}
+        >
+          Deletar conta
+        </Button>
+      </div>
+
+      <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
+        <DialogContent
+          className="max-w-md"
+          onEscapeKeyDown={(e) => {
+            if (isPending) e.preventDefault();
+          }}
+          onPointerDownOutside={(e) => {
+            if (isPending) e.preventDefault();
+          }}
+        >
+          <DialogHeader>
+            <DialogTitle>Você tem certeza?</DialogTitle>
+            <DialogDescription>
+              Essa ação não pode ser desfeita. Isso irá deletar permanentemente
+              sua conta e remover seus dados de nossos servidores.
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-4 py-4">
+            <div className="space-y-2">
+              <Label htmlFor="confirmation">
+                Para confirmar, digite <strong>DELETAR</strong> no campo abaixo.
+              </Label>
+              <Input
+                id="confirmation"
+                value={confirmation}
+                onChange={(e) => setConfirmation(e.target.value)}
+                disabled={isPending}
+                placeholder="DELETAR"
+                autoComplete="off"
+              />
+            </div>
+          </div>
+
+          <DialogFooter className="sm:justify-end">
+            <Button
+              type="button"
+              variant="outline"
+              onClick={handleCloseModal}
+              disabled={isPending}
+            >
+              Cancelar
+            </Button>
+            <Button
+              type="button"
+              variant="destructive"
+              onClick={handleDelete}
+              disabled={isPending || confirmation !== "DELETAR"}
+            >
+              {isPending ? "Deletando..." : "Deletar"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}
diff --git a/components/ajustes/update-email-form.tsx b/components/ajustes/update-email-form.tsx
new file mode 100644
index 0000000..ed862f1
--- /dev/null
+++ b/components/ajustes/update-email-form.tsx
@@ -0,0 +1,71 @@
+"use client";
+
+import { updateEmailAction } from "@/app/(dashboard)/ajustes/actions";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { useState, useTransition } from "react";
+import { toast } from "sonner";
+
+type UpdateEmailFormProps = {
+  currentEmail: string;
+};
+
+export function UpdateEmailForm({ currentEmail }: UpdateEmailFormProps) {
+  const [isPending, startTransition] = useTransition();
+  const [newEmail, setNewEmail] = useState("");
+  const [confirmEmail, setConfirmEmail] = useState("");
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+
+    startTransition(async () => {
+      const result = await updateEmailAction({
+        newEmail,
+        confirmEmail,
+      });
+
+      if (result.success) {
+        toast.success(result.message);
+        setNewEmail("");
+        setConfirmEmail("");
+      } else {
+        toast.error(result.error);
+      }
+    });
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4">
+      <div className="space-y-2">
+        <Label htmlFor="newEmail">Novo e-mail</Label>
+        <Input
+          id="newEmail"
+          type="email"
+          value={newEmail}
+          onChange={(e) => setNewEmail(e.target.value)}
+          disabled={isPending}
+          placeholder={currentEmail}
+          required
+        />
+      </div>
+
+      <div className="space-y-2">
+        <Label htmlFor="confirmEmail">Confirmar novo e-mail</Label>
+        <Input
+          id="confirmEmail"
+          type="email"
+          value={confirmEmail}
+          onChange={(e) => setConfirmEmail(e.target.value)}
+          disabled={isPending}
+          placeholder="repita o e-mail"
+          required
+        />
+      </div>
+
+      <Button type="submit" disabled={isPending}>
+        {isPending ? "Atualizando..." : "Atualizar e-mail"}
+      </Button>
+    </form>
+  );
+}
diff --git a/components/ajustes/update-name-form.tsx b/components/ajustes/update-name-form.tsx
new file mode 100644
index 0000000..4fac3dd
--- /dev/null
+++ b/components/ajustes/update-name-form.tsx
@@ -0,0 +1,71 @@
+"use client";
+
+import { updateNameAction } from "@/app/(dashboard)/ajustes/actions";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { useState, useTransition } from "react";
+import { toast } from "sonner";
+
+type UpdateNameFormProps = {
+  currentName: string;
+};
+
+export function UpdateNameForm({ currentName }: UpdateNameFormProps) {
+  const [isPending, startTransition] = useTransition();
+
+  // Dividir o nome atual em primeiro nome e sobrenome
+  const nameParts = currentName.split(" ");
+  const initialFirstName = nameParts[0] || "";
+  const initialLastName = nameParts.slice(1).join(" ") || "";
+
+  const [firstName, setFirstName] = useState(initialFirstName);
+  const [lastName, setLastName] = useState(initialLastName);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+
+    startTransition(async () => {
+      const result = await updateNameAction({
+        firstName,
+        lastName,
+      });
+
+      if (result.success) {
+        toast.success(result.message);
+      } else {
+        toast.error(result.error);
+      }
+    });
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4">
+      <div className="space-y-2">
+        <Label htmlFor="firstName">Primeiro nome</Label>
+        <Input
+          id="firstName"
+          value={firstName}
+          onChange={(e) => setFirstName(e.target.value)}
+          disabled={isPending}
+          required
+        />
+      </div>
+
+      <div className="space-y-2">
+        <Label htmlFor="lastName">Sobrenome</Label>
+        <Input
+          id="lastName"
+          value={lastName}
+          onChange={(e) => setLastName(e.target.value)}
+          disabled={isPending}
+          required
+        />
+      </div>
+
+      <Button type="submit" disabled={isPending}>
+        {isPending ? "Atualizando..." : "Atualizar nome"}
+      </Button>
+    </form>
+  );
+}
diff --git a/components/ajustes/update-password-form.tsx b/components/ajustes/update-password-form.tsx
new file mode 100644
index 0000000..0f3d361
--- /dev/null
+++ b/components/ajustes/update-password-form.tsx
@@ -0,0 +1,98 @@
+"use client";
+
+import { updatePasswordAction } from "@/app/(dashboard)/ajustes/actions";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { RiEyeLine, RiEyeOffLine } from "@remixicon/react";
+import { useState, useTransition } from "react";
+import { toast } from "sonner";
+
+export function UpdatePasswordForm() {
+  const [isPending, startTransition] = useTransition();
+  const [newPassword, setNewPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [showNewPassword, setShowNewPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+
+    startTransition(async () => {
+      const result = await updatePasswordAction({
+        newPassword,
+        confirmPassword,
+      });
+
+      if (result.success) {
+        toast.success(result.message);
+        setNewPassword("");
+        setConfirmPassword("");
+      } else {
+        toast.error(result.error);
+      }
+    });
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4">
+      <div className="space-y-2">
+        <Label htmlFor="newPassword">Nova senha</Label>
+        <div className="relative">
+          <Input
+            id="newPassword"
+            type={showNewPassword ? "text" : "password"}
+            value={newPassword}
+            onChange={(e) => setNewPassword(e.target.value)}
+            disabled={isPending}
+            placeholder="Mínimo de 6 caracteres"
+            required
+            minLength={6}
+          />
+          <button
+            type="button"
+            onClick={() => setShowNewPassword(!showNewPassword)}
+            className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+          >
+            {showNewPassword ? (
+              <RiEyeOffLine size={20} />
+            ) : (
+              <RiEyeLine size={20} />
+            )}
+          </button>
+        </div>
+      </div>
+
+      <div className="space-y-2">
+        <Label htmlFor="confirmPassword">Confirmar nova senha</Label>
+        <div className="relative">
+          <Input
+            id="confirmPassword"
+            type={showConfirmPassword ? "text" : "password"}
+            value={confirmPassword}
+            onChange={(e) => setConfirmPassword(e.target.value)}
+            disabled={isPending}
+            placeholder="Repita a senha"
+            required
+            minLength={6}
+          />
+          <button
+            type="button"
+            onClick={() => setShowConfirmPassword(!showConfirmPassword)}
+            className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+          >
+            {showConfirmPassword ? (
+              <RiEyeOffLine size={20} />
+            ) : (
+              <RiEyeLine size={20} />
+            )}
+          </button>
+        </div>
+      </div>
+
+      <Button type="submit" disabled={isPending}>
+        {isPending ? "Atualizando..." : "Atualizar senha"}
+      </Button>
+    </form>
+  );
+}
diff --git a/components/animated-theme-toggler.tsx b/components/animated-theme-toggler.tsx
new file mode 100644
index 0000000..39a6da2
--- /dev/null
+++ b/components/animated-theme-toggler.tsx
@@ -0,0 +1,122 @@
+"use client";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { flushSync } from "react-dom";
+import { buttonVariants } from "@/components/ui/button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils/ui";
+import { RiMoonClearLine, RiSunLine } from "@remixicon/react";
+
+interface AnimatedThemeTogglerProps
+  extends React.ComponentPropsWithoutRef<"button"> {
+  duration?: number;
+}
+
+export const AnimatedThemeToggler = ({
+  className,
+  duration = 400,
+  ...props
+}: AnimatedThemeTogglerProps) => {
+  const [isDark, setIsDark] = useState(false);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    const updateTheme = () => {
+      setIsDark(document.documentElement.classList.contains("dark"));
+    };
+
+    updateTheme();
+
+    const observer = new MutationObserver(updateTheme);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class"],
+    });
+
+    return () => observer.disconnect();
+  }, []);
+
+  const toggleTheme = useCallback(async () => {
+    if (!buttonRef.current) return;
+
+    await document.startViewTransition(() => {
+      flushSync(() => {
+        const newTheme = !isDark;
+        setIsDark(newTheme);
+        document.documentElement.classList.toggle("dark");
+        localStorage.setItem("theme", newTheme ? "dark" : "light");
+      });
+    }).ready;
+
+    const { top, left, width, height } =
+      buttonRef.current.getBoundingClientRect();
+    const x = left + width / 2;
+    const y = top + height / 2;
+    const maxRadius = Math.hypot(
+      Math.max(left, window.innerWidth - left),
+      Math.max(top, window.innerHeight - top)
+    );
+
+    document.documentElement.animate(
+      {
+        clipPath: [
+          `circle(0px at ${x}px ${y}px)`,
+          `circle(${maxRadius}px at ${x}px ${y}px)`,
+        ],
+      },
+      {
+        duration,
+        easing: "ease-in-out",
+        pseudoElement: "::view-transition-new(root)",
+      }
+    );
+  }, [isDark, duration]);
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <button
+          ref={buttonRef}
+          type="button"
+          onClick={toggleTheme}
+          data-state={isDark ? "dark" : "light"}
+          className={cn(
+            buttonVariants({ variant: "ghost", size: "icon-sm" }),
+            "group relative text-muted-foreground transition-all duration-200",
+            "hover:text-foreground focus-visible:ring-2 focus-visible:ring-primary/40",
+            "data-[state=open]:bg-accent/60 data-[state=open]:text-foreground border",
+            className
+          )}
+          {...props}
+        >
+          <span
+            aria-hidden
+            className="pointer-events-none absolute inset-0 -z-10 opacity-0 transition-opacity duration-200 data-[state=dark]:opacity-100"
+          >
+            <span className="absolute inset-0 bg-linear-to-br from-amber-500/5 via-transparent to-amber-500/15 dark:from-amber-500/10 dark:to-amber-500/30" />
+          </span>
+          {isDark ? (
+            <RiSunLine
+              className="size-4 transition-transform duration-200"
+              aria-hidden
+            />
+          ) : (
+            <RiMoonClearLine
+              className="size-4 transition-transform duration-200"
+              aria-hidden
+            />
+          )}
+          <span className="sr-only">
+            {isDark ? "Ativar tema claro" : "Ativar tema escuro"}
+          </span>
+        </button>
+      </TooltipTrigger>
+      <TooltipContent side="bottom" sideOffset={8}>
+        {isDark ? "Tema claro" : "Tema escuro"}
+      </TooltipContent>
+    </Tooltip>
+  );
+};
diff --git a/components/anotacoes/note-card.tsx b/components/anotacoes/note-card.tsx
new file mode 100644
index 0000000..f561ae0
--- /dev/null
+++ b/components/anotacoes/note-card.tsx
@@ -0,0 +1,139 @@
+"use client";
+
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent, CardFooter } from "@/components/ui/card";
+import { RiDeleteBin5Line, RiEyeLine, RiPencilLine } from "@remixicon/react";
+import { CheckIcon } from "lucide-react";
+import { useMemo } from "react";
+
+import type { Note } from "./types";
+
+const DATE_FORMATTER = new Intl.DateTimeFormat("pt-BR", {
+  dateStyle: "medium",
+});
+
+interface NoteCardProps {
+  note: Note;
+  onEdit?: (note: Note) => void;
+  onDetails?: (note: Note) => void;
+  onRemove?: (note: Note) => void;
+}
+
+export function NoteCard({ note, onEdit, onDetails, onRemove }: NoteCardProps) {
+  const { formattedDate, displayTitle } = useMemo(() => {
+    const resolvedTitle = note.title.trim().length
+      ? note.title
+      : "Anotação sem título";
+
+    return {
+      displayTitle: resolvedTitle,
+      formattedDate: DATE_FORMATTER.format(new Date(note.createdAt)),
+    };
+  }, [note.createdAt, note.title]);
+
+  const isTask = note.type === "tarefa";
+  const tasks = note.tasks || [];
+  const completedCount = tasks.filter((t) => t.completed).length;
+  const totalCount = tasks.length;
+
+  const actions = [
+    {
+      label: "editar",
+      icon: <RiPencilLine className="size-4" aria-hidden />,
+      onClick: onEdit,
+      variant: "default" as const,
+    },
+    {
+      label: "detalhes",
+      icon: <RiEyeLine className="size-4" aria-hidden />,
+      onClick: onDetails,
+      variant: "default" as const,
+    },
+    {
+      label: "remover",
+      icon: <RiDeleteBin5Line className="size-4" aria-hidden />,
+      onClick: onRemove,
+      variant: "destructive" as const,
+    },
+  ].filter((action) => typeof action.onClick === "function");
+
+  return (
+    <Card className="h-[300px] w-[440px] gap-0">
+      <CardContent className="flex flex-1 flex-col gap-4">
+        <div className="flex items-start justify-between gap-3">
+          <div className="flex flex-col gap-2">
+            <h3 className="text-lg font-semibold leading-tight text-foreground wrap-break-word">
+              {displayTitle}
+            </h3>
+            {isTask && (
+              <Badge variant="outline" className="text-xs">
+                {completedCount}/{totalCount} concluídas
+              </Badge>
+            )}
+          </div>
+          <span className="text-xs font-medium uppercase tracking-wide text-muted-foreground whitespace-nowrap">
+            {formattedDate}
+          </span>
+        </div>
+
+        {isTask ? (
+          <div className="flex-1 overflow-auto space-y-2">
+            {tasks.slice(0, 4).map((task) => (
+              <div key={task.id} className="flex items-start gap-2 text-sm">
+                <div
+                  className={`mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-sm border ${
+                    task.completed
+                      ? "bg-green-600 border-green-600"
+                      : "border-input"
+                  }`}
+                >
+                  {task.completed && (
+                    <CheckIcon className="h-3 w-3 text-background" />
+                  )}
+                </div>
+                <span
+                  className={`leading-relaxed ${
+                    task.completed
+                      ? "line-through text-muted-foreground"
+                      : "text-foreground"
+                  }`}
+                >
+                  {task.text}
+                </span>
+              </div>
+            ))}
+            {tasks.length > 4 && (
+              <p className="text-xs text-muted-foreground pl-5 py-1">
+                +{tasks.length - 4}{" "}
+                {tasks.length - 4 === 1 ? "tarefa" : "tarefas"}...
+              </p>
+            )}
+          </div>
+        ) : (
+          <p className="flex-1 overflow-auto whitespace-pre-line text-sm text-muted-foreground wrap-break-word leading-relaxed">
+            {note.description}
+          </p>
+        )}
+      </CardContent>
+
+      {actions.length > 0 ? (
+        <CardFooter className="flex flex-wrap gap-3 px-6 pt-3 text-sm">
+          {actions.map(({ label, icon, onClick, variant }) => (
+            <button
+              key={label}
+              type="button"
+              onClick={() => onClick?.(note)}
+              className={`flex items-center gap-1 font-medium transition-opacity hover:opacity-80 ${
+                variant === "destructive" ? "text-destructive" : "text-primary"
+              }`}
+              aria-label={`${label} anotação`}
+            >
+              {icon}
+              {label}
+            </button>
+          ))}
+        </CardFooter>
+      ) : null}
+    </Card>
+  );
+}
diff --git a/components/anotacoes/note-details-dialog.tsx b/components/anotacoes/note-details-dialog.tsx
new file mode 100644
index 0000000..fc60994
--- /dev/null
+++ b/components/anotacoes/note-details-dialog.tsx
@@ -0,0 +1,118 @@
+"use client";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { CheckIcon } from "lucide-react";
+import { useMemo } from "react";
+
+import type { Note } from "./types";
+
+const DATE_FORMATTER = new Intl.DateTimeFormat("pt-BR", {
+  dateStyle: "long",
+  timeStyle: "short",
+});
+
+interface NoteDetailsDialogProps {
+  note: Note | null;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export function NoteDetailsDialog({
+  note,
+  open,
+  onOpenChange,
+}: NoteDetailsDialogProps) {
+  const { formattedDate, displayTitle } = useMemo(() => {
+    if (!note) {
+      return { formattedDate: "", displayTitle: "" };
+    }
+
+    const title = note.title.trim().length ? note.title : "Anotação sem título";
+
+    return {
+      formattedDate: DATE_FORMATTER.format(new Date(note.createdAt)),
+      displayTitle: title,
+    };
+  }, [note]);
+
+  if (!note) {
+    return null;
+  }
+
+  const isTask = note.type === "tarefa";
+  const tasks = note.tasks || [];
+  const completedCount = tasks.filter((t) => t.completed).length;
+  const totalCount = tasks.length;
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            {displayTitle}
+            {isTask && (
+              <Badge variant="secondary" className="text-xs">
+                {completedCount}/{totalCount}
+              </Badge>
+            )}
+          </DialogTitle>
+          <DialogDescription>{formattedDate}</DialogDescription>
+        </DialogHeader>
+
+        {isTask ? (
+          <div className="max-h-[320px] overflow-auto space-y-3">
+            {tasks.map((task) => (
+              <div
+                key={task.id}
+                className="flex items-start gap-3 p-3 rounded-lg border bg-card"
+              >
+                <div
+                  className={`mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-sm border ${
+                    task.completed
+                      ? "bg-green-600 border-green-600"
+                      : "border-input"
+                  }`}
+                >
+                  {task.completed && (
+                    <CheckIcon className="h-4 w-4 text-primary-foreground" />
+                  )}
+                </div>
+                <span
+                  className={`text-sm ${
+                    task.completed
+                      ? "line-through text-muted-foreground"
+                      : "text-foreground"
+                  }`}
+                >
+                  {task.text}
+                </span>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <div className="max-h-[320px] overflow-auto whitespace-pre-line wrap-break-word text-sm text-foreground">
+            {note.description}
+          </div>
+        )}
+
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button type="button" variant="outline">
+              Fechar
+            </Button>
+          </DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/components/anotacoes/note-dialog.tsx b/components/anotacoes/note-dialog.tsx
new file mode 100644
index 0000000..4b0ef49
--- /dev/null
+++ b/components/anotacoes/note-dialog.tsx
@@ -0,0 +1,470 @@
+"use client";
+
+import {
+  createNoteAction,
+  updateNoteAction,
+} from "@/app/(dashboard)/anotacoes/actions";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { Textarea } from "@/components/ui/textarea";
+import { useControlledState } from "@/hooks/use-controlled-state";
+import { useFormState } from "@/hooks/use-form-state";
+import { PlusIcon, Trash2Icon } from "lucide-react";
+import {
+  type ReactNode,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  useTransition,
+} from "react";
+import { toast } from "sonner";
+import type { Note, NoteFormValues, Task } from "./types";
+
+type NoteDialogMode = "create" | "update";
+interface NoteDialogProps {
+  mode: NoteDialogMode;
+  trigger?: ReactNode;
+  note?: Note;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}
+
+const MAX_TITLE = 30;
+const MAX_DESC = 350;
+const normalize = (s: string) => s.replace(/\s+/g, " ").trim();
+
+const buildInitialValues = (note?: Note): NoteFormValues => ({
+  title: note?.title ?? "",
+  description: note?.description ?? "",
+  type: note?.type ?? "nota",
+  tasks: note?.tasks ?? [],
+});
+
+const generateTaskId = () => {
+  return `task-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
+};
+
+export function NoteDialog({
+  mode,
+  trigger,
+  note,
+  open,
+  onOpenChange,
+}: NoteDialogProps) {
+  const [isPending, startTransition] = useTransition();
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [newTaskText, setNewTaskText] = useState("");
+
+  const titleRef = useRef<HTMLInputElement>(null);
+  const descRef = useRef<HTMLTextAreaElement>(null);
+  const newTaskRef = useRef<HTMLInputElement>(null);
+
+  // Use controlled state hook for dialog open state
+  const [dialogOpen, setDialogOpen] = useControlledState(
+    open,
+    false,
+    onOpenChange
+  );
+
+  const initialState = buildInitialValues(note);
+
+  // Use form state hook for form management
+  const { formState, updateField, setFormState } =
+    useFormState<NoteFormValues>(initialState);
+
+  useEffect(() => {
+    if (dialogOpen) {
+      setFormState(buildInitialValues(note));
+      setErrorMessage(null);
+      setNewTaskText("");
+      requestAnimationFrame(() => titleRef.current?.focus());
+    }
+  }, [dialogOpen, note, setFormState]);
+
+  const title = mode === "create" ? "Nova anotação" : "Editar anotação";
+  const description =
+    mode === "create"
+      ? "Escolha entre uma nota simples ou uma lista de tarefas."
+      : "Altere o título e/ou conteúdo desta anotação.";
+  const submitLabel =
+    mode === "create" ? "Salvar anotação" : "Atualizar anotação";
+
+  const titleCount = formState.title.length;
+  const descCount = formState.description.length;
+  const isNote = formState.type === "nota";
+
+  const onlySpaces =
+    normalize(formState.title).length === 0 ||
+    (isNote && normalize(formState.description).length === 0) ||
+    (!isNote && (!formState.tasks || formState.tasks.length === 0));
+
+  const invalidLen = titleCount > MAX_TITLE || descCount > MAX_DESC;
+
+  const unchanged =
+    mode === "update" &&
+    normalize(formState.title) === normalize(note?.title ?? "") &&
+    normalize(formState.description) === normalize(note?.description ?? "") &&
+    JSON.stringify(formState.tasks) === JSON.stringify(note?.tasks);
+
+  const disableSubmit = isPending || onlySpaces || unchanged || invalidLen;
+
+  const handleOpenChange = useCallback(
+    (v: boolean) => {
+      setDialogOpen(v);
+      if (!v) setErrorMessage(null);
+    },
+    [setDialogOpen]
+  );
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if ((e.ctrlKey || e.metaKey) && e.key === "Enter")
+        (e.currentTarget as HTMLFormElement).requestSubmit();
+      if (e.key === "Escape") handleOpenChange(false);
+    },
+    [handleOpenChange]
+  );
+
+  const handleAddTask = useCallback(() => {
+    const text = normalize(newTaskText);
+    if (!text) return;
+
+    const newTask: Task = {
+      id: generateTaskId(),
+      text,
+      completed: false,
+    };
+
+    updateField("tasks", [...(formState.tasks || []), newTask]);
+    setNewTaskText("");
+    requestAnimationFrame(() => newTaskRef.current?.focus());
+  }, [newTaskText, formState.tasks, updateField]);
+
+  const handleRemoveTask = useCallback(
+    (taskId: string) => {
+      updateField(
+        "tasks",
+        (formState.tasks || []).filter((t) => t.id !== taskId)
+      );
+    },
+    [formState.tasks, updateField]
+  );
+
+  const handleToggleTask = useCallback(
+    (taskId: string) => {
+      updateField(
+        "tasks",
+        (formState.tasks || []).map((t) =>
+          t.id === taskId ? { ...t, completed: !t.completed } : t
+        )
+      );
+    },
+    [formState.tasks, updateField]
+  );
+
+  const handleSubmit = useCallback(
+    (e: React.FormEvent<HTMLFormElement>) => {
+      e.preventDefault();
+      setErrorMessage(null);
+
+      const payload = {
+        title: normalize(formState.title),
+        description: normalize(formState.description),
+        type: formState.type,
+        tasks: formState.tasks,
+      };
+
+      if (onlySpaces || invalidLen) {
+        setErrorMessage("Preencha os campos respeitando os limites.");
+        titleRef.current?.focus();
+        return;
+      }
+
+      if (mode === "update" && !note?.id) {
+        const msg = "Não foi possível identificar a anotação a ser editada.";
+        setErrorMessage(msg);
+        toast.error(msg);
+        return;
+      }
+
+      if (unchanged) {
+        toast.info("Nada para atualizar.");
+        return;
+      }
+
+      startTransition(async () => {
+        let result;
+        if (mode === "create") {
+          result = await createNoteAction(payload);
+        } else {
+          if (!note?.id) {
+            const msg = "ID da anotação não encontrado.";
+            setErrorMessage(msg);
+            toast.error(msg);
+            return;
+          }
+          result = await updateNoteAction({ id: note.id, ...payload });
+        }
+
+        if (result.success) {
+          toast.success(result.message);
+          setDialogOpen(false);
+          return;
+        }
+        setErrorMessage(result.error);
+        toast.error(result.error);
+        titleRef.current?.focus();
+      });
+    },
+    [
+      formState.title,
+      formState.description,
+      formState.type,
+      formState.tasks,
+      mode,
+      note,
+      setDialogOpen,
+      onlySpaces,
+      unchanged,
+      invalidLen,
+    ]
+  );
+
+  return (
+    <Dialog open={dialogOpen} onOpenChange={handleOpenChange}>
+      {trigger ? <DialogTrigger asChild>{trigger}</DialogTrigger> : null}
+      <DialogContent className="max-h-[90vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+          <DialogDescription>{description}</DialogDescription>
+        </DialogHeader>
+
+        <form
+          className="space-y-4"
+          onSubmit={handleSubmit}
+          onKeyDown={handleKeyDown}
+          noValidate
+        >
+          {/* Seletor de Tipo - apenas no modo de criação */}
+          {mode === "create" && (
+            <div className="space-y-3">
+              <label className="text-sm font-medium text-foreground">
+                Tipo de anotação
+              </label>
+              <RadioGroup
+                value={formState.type}
+                onValueChange={(value) =>
+                  updateField("type", value as "nota" | "tarefa")
+                }
+                disabled={isPending}
+                className="flex gap-4"
+              >
+                <div className="flex items-center gap-2">
+                  <RadioGroupItem value="nota" id="tipo-nota" />
+                  <label
+                    htmlFor="tipo-nota"
+                    className="text-sm cursor-pointer select-none"
+                  >
+                    Nota
+                  </label>
+                </div>
+                <div className="flex items-center gap-2">
+                  <RadioGroupItem value="tarefa" id="tipo-tarefa" />
+                  <label
+                    htmlFor="tipo-tarefa"
+                    className="text-sm cursor-pointer select-none"
+                  >
+                    Tarefas
+                  </label>
+                </div>
+              </RadioGroup>
+            </div>
+          )}
+
+          {/* Título */}
+          <div className="space-y-2">
+            <label
+              htmlFor="note-title"
+              className="text-sm font-medium text-foreground"
+            >
+              Título
+            </label>
+            <Input
+              id="note-title"
+              ref={titleRef}
+              value={formState.title}
+              onChange={(e) => updateField("title", e.target.value)}
+              placeholder={
+                isNote ? "Ex.: Revisar metas do mês" : "Ex.: Tarefas da semana"
+              }
+              maxLength={MAX_TITLE}
+              disabled={isPending}
+              aria-describedby="note-title-help"
+              required
+            />
+            <p
+              id="note-title-help"
+              className="text-xs text-muted-foreground"
+              aria-live="polite"
+            >
+              Até {MAX_TITLE} caracteres. Restantes:{" "}
+              {Math.max(0, MAX_TITLE - titleCount)}.
+            </p>
+          </div>
+
+          {/* Conteúdo - apenas para Notas */}
+          {isNote && (
+            <div className="space-y-2">
+              <label
+                htmlFor="note-description"
+                className="text-sm font-medium text-foreground"
+              >
+                Conteúdo
+              </label>
+              <Textarea
+                id="note-description"
+                className="field-sizing-fixed"
+                ref={descRef}
+                value={formState.description}
+                onChange={(e) => updateField("description", e.target.value)}
+                placeholder="Detalhe sua anotação..."
+                rows={6}
+                maxLength={MAX_DESC}
+                disabled={isPending}
+                aria-describedby="note-desc-help"
+                required
+              />
+              <p
+                id="note-desc-help"
+                className="text-xs text-muted-foreground"
+                aria-live="polite"
+              >
+                Até {MAX_DESC} caracteres. Restantes:{" "}
+                {Math.max(0, MAX_DESC - descCount)}.
+              </p>
+            </div>
+          )}
+
+          {/* Lista de Tarefas - apenas para Tarefas */}
+          {!isNote && (
+            <div className="space-y-4">
+              <div className="space-y-2">
+                <label
+                  htmlFor="new-task-input"
+                  className="text-sm font-medium text-foreground"
+                >
+                  Adicionar tarefa
+                </label>
+                <div className="flex gap-2">
+                  <Input
+                    id="new-task-input"
+                    ref={newTaskRef}
+                    value={newTaskText}
+                    onChange={(e) => setNewTaskText(e.target.value)}
+                    placeholder="Ex.: Comprar ingredientes para o jantar"
+                    disabled={isPending}
+                    onKeyDown={(e) => {
+                      if (e.key === "Enter") {
+                        e.preventDefault();
+                        handleAddTask();
+                      }
+                    }}
+                  />
+                  <Button
+                    type="button"
+                    onClick={handleAddTask}
+                    disabled={isPending || !normalize(newTaskText)}
+                    className="shrink-0"
+                  >
+                    <PlusIcon className="h-4 w-4" />
+                  </Button>
+                </div>
+                <p className="text-xs text-muted-foreground">
+                  Pressione Enter ou clique no botão + para adicionar
+                </p>
+              </div>
+
+              {/* Lista de tarefas existentes */}
+              {formState.tasks && formState.tasks.length > 0 && (
+                <div className="space-y-2">
+                  <label className="text-sm font-medium text-foreground">
+                    Tarefas ({formState.tasks.length})
+                  </label>
+                  <div className="space-y-2 max-h-[240px] overflow-y-auto pr-1">
+                    {formState.tasks.map((task) => (
+                      <div
+                        key={task.id}
+                        className="flex items-center gap-3 p-3 rounded-lg border bg-card hover:bg-accent/50 transition-colors"
+                      >
+                        <Checkbox
+                          checked={task.completed}
+                          onCheckedChange={() => handleToggleTask(task.id)}
+                          disabled={isPending}
+                          aria-label={`Marcar tarefa "${task.text}" como ${
+                            task.completed ? "não concluída" : "concluída"
+                          }`}
+                        />
+                        <span
+                          className={`flex-1 text-sm wrap-break-word ${
+                            task.completed
+                              ? "line-through text-muted-foreground"
+                              : "text-foreground"
+                          }`}
+                        >
+                          {task.text}
+                        </span>
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="sm"
+                          onClick={() => handleRemoveTask(task.id)}
+                          disabled={isPending}
+                          className="h-8 w-8 p-0 shrink-0 text-muted-foreground hover:text-destructive"
+                          aria-label={`Remover tarefa "${task.text}"`}
+                        >
+                          <Trash2Icon className="h-4 w-4" />
+                        </Button>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+
+          {errorMessage ? (
+            <p className="text-sm text-destructive" role="alert">
+              {errorMessage}
+            </p>
+          ) : null}
+
+          <DialogFooter>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => handleOpenChange(false)}
+              disabled={isPending}
+            >
+              Cancelar
+            </Button>
+            <Button type="submit" disabled={disableSubmit}>
+              {isPending ? "Salvando..." : submitLabel}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/components/anotacoes/notes-page.tsx b/components/anotacoes/notes-page.tsx
new file mode 100644
index 0000000..5461f2e
--- /dev/null
+++ b/components/anotacoes/notes-page.tsx
@@ -0,0 +1,165 @@
+"use client";
+
+import { deleteNoteAction } from "@/app/(dashboard)/anotacoes/actions";
+import { ConfirmActionDialog } from "@/components/confirm-action-dialog";
+import { EmptyState } from "@/components/empty-state";
+import { Button } from "@/components/ui/button";
+import { RiAddCircleLine, RiFileListLine } from "@remixicon/react";
+import { useCallback, useMemo, useState } from "react";
+import { toast } from "sonner";
+import { Card } from "../ui/card";
+import { NoteCard } from "./note-card";
+import { NoteDetailsDialog } from "./note-details-dialog";
+import { NoteDialog } from "./note-dialog";
+import type { Note } from "./types";
+
+interface NotesPageProps {
+  notes: Note[];
+}
+
+export function NotesPage({ notes }: NotesPageProps) {
+  const [createOpen, setCreateOpen] = useState(false);
+  const [editOpen, setEditOpen] = useState(false);
+  const [noteToEdit, setNoteToEdit] = useState<Note | null>(null);
+  const [detailsOpen, setDetailsOpen] = useState(false);
+  const [noteDetails, setNoteDetails] = useState<Note | null>(null);
+  const [removeOpen, setRemoveOpen] = useState(false);
+  const [noteToRemove, setNoteToRemove] = useState<Note | null>(null);
+
+  const sortedNotes = useMemo(
+    () =>
+      [...notes].sort(
+        (a, b) =>
+          new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
+      ),
+    [notes]
+  );
+
+  const handleCreateOpenChange = useCallback((open: boolean) => {
+    setCreateOpen(open);
+  }, []);
+
+  const handleEditOpenChange = useCallback((open: boolean) => {
+    setEditOpen(open);
+    if (!open) {
+      setNoteToEdit(null);
+    }
+  }, []);
+
+  const handleDetailsOpenChange = useCallback((open: boolean) => {
+    setDetailsOpen(open);
+    if (!open) {
+      setNoteDetails(null);
+    }
+  }, []);
+
+  const handleRemoveOpenChange = useCallback((open: boolean) => {
+    setRemoveOpen(open);
+    if (!open) {
+      setNoteToRemove(null);
+    }
+  }, []);
+
+  const handleEditRequest = useCallback((note: Note) => {
+    setNoteToEdit(note);
+    setEditOpen(true);
+  }, []);
+
+  const handleDetailsRequest = useCallback((note: Note) => {
+    setNoteDetails(note);
+    setDetailsOpen(true);
+  }, []);
+
+  const handleRemoveRequest = useCallback((note: Note) => {
+    setNoteToRemove(note);
+    setRemoveOpen(true);
+  }, []);
+
+  const handleRemoveConfirm = useCallback(async () => {
+    if (!noteToRemove) {
+      return;
+    }
+
+    const result = await deleteNoteAction({ id: noteToRemove.id });
+
+    if (result.success) {
+      toast.success(result.message);
+      return;
+    }
+
+    toast.error(result.error);
+    throw new Error(result.error);
+  }, [noteToRemove]);
+
+  const removeTitle = noteToRemove
+    ? noteToRemove.title.trim().length
+      ? `Remover anotação "${noteToRemove.title}"?`
+      : "Remover anotação?"
+    : "Remover anotação?";
+
+  return (
+    <>
+      <div className="flex w-full flex-col gap-6">
+        <div className="flex justify-start">
+          <NoteDialog
+            mode="create"
+            open={createOpen}
+            onOpenChange={handleCreateOpenChange}
+            trigger={
+              <Button>
+                <RiAddCircleLine className="size-4" />
+                Nova anotação
+              </Button>
+            }
+          />
+        </div>
+
+        {sortedNotes.length === 0 ? (
+          <Card className="flex min-h-[50vh] w-full items-center justify-center py-12">
+            <EmptyState
+              media={<RiFileListLine className="size-6 text-primary" />}
+              title="Nenhuma anotação registrada"
+              description="Crie anotações personalizadas para acompanhar lembretes, decisões ou observações financeiras importantes."
+            />
+          </Card>
+        ) : (
+          <div className="flex flex-wrap gap-4">
+            {sortedNotes.map((note) => (
+              <NoteCard
+                key={note.id}
+                note={note}
+                onEdit={handleEditRequest}
+                onDetails={handleDetailsRequest}
+                onRemove={handleRemoveRequest}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+
+      <NoteDialog
+        mode="update"
+        note={noteToEdit ?? undefined}
+        open={editOpen}
+        onOpenChange={handleEditOpenChange}
+      />
+
+      <NoteDetailsDialog
+        note={noteDetails}
+        open={detailsOpen}
+        onOpenChange={handleDetailsOpenChange}
+      />
+
+      <ConfirmActionDialog
+        open={removeOpen}
+        onOpenChange={handleRemoveOpenChange}
+        title={removeTitle}
+        description="Essa ação não pode ser desfeita."
+        confirmLabel="Remover"
+        confirmVariant="destructive"
+        pendingLabel="Removendo..."
+        onConfirm={handleRemoveConfirm}
+      />
+    </>
+  );
+}
diff --git a/components/anotacoes/types.ts b/components/anotacoes/types.ts
new file mode 100644
index 0000000..3952f72
--- /dev/null
+++ b/components/anotacoes/types.ts
@@ -0,0 +1,23 @@
+export type NoteType = "nota" | "tarefa";
+
+export interface Task {
+  id: string;
+  text: string;
+  completed: boolean;
+}
+
+export interface Note {
+  id: string;
+  title: string;
+  description: string;
+  type: NoteType;
+  tasks?: Task[];
+  createdAt: string;
+}
+
+export interface NoteFormValues {
+  title: string;
+  description: string;
+  type: NoteType;
+  tasks?: Task[];
+}
diff --git a/components/auth/auth-error-alert.tsx b/components/auth/auth-error-alert.tsx
new file mode 100644
index 0000000..f5950ce
--- /dev/null
+++ b/components/auth/auth-error-alert.tsx
@@ -0,0 +1,17 @@
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { RiTerminalLine } from "@remixicon/react";
+
+interface AuthErrorAlertProps {
+  error: string;
+}
+
+export function AuthErrorAlert({ error }: AuthErrorAlertProps) {
+  if (!error) return null;
+
+  return (
+    <Alert className="mt-2 border border-red-500" variant="destructive">
+      <RiTerminalLine className="h-4 w-4" />
+      <AlertDescription>{error}</AlertDescription>
+    </Alert>
+  );
+}
diff --git a/components/auth/auth-footer.tsx b/components/auth/auth-footer.tsx
new file mode 100644
index 0000000..47f3dd8
--- /dev/null
+++ b/components/auth/auth-footer.tsx
@@ -0,0 +1,17 @@
+import { FieldDescription } from "@/components/ui/field";
+
+export function AuthFooter() {
+  return (
+    <FieldDescription className="px-6 text-center">
+      Ao continuar, você concorda com nossos{" "}
+      <a href="/terms" className="underline underline-offset-4">
+        Termos de Serviço
+      </a>{" "}
+      e{" "}
+      <a href="/privacy" className="underline underline-offset-4">
+        Política de Privacidade
+      </a>
+      .
+    </FieldDescription>
+  );
+}
diff --git a/components/auth/auth-header.tsx b/components/auth/auth-header.tsx
new file mode 100644
index 0000000..4a8addb
--- /dev/null
+++ b/components/auth/auth-header.tsx
@@ -0,0 +1,17 @@
+import { cn } from "@/lib/utils/ui";
+
+interface AuthHeaderProps {
+  title: string;
+  description: string;
+}
+
+export function AuthHeader({ title, description }: AuthHeaderProps) {
+  return (
+    <div className={cn("flex flex-col gap-1.5")}>
+      <h1 className="text-xl font-semibold tracking-tight text-card-foreground">
+        {title}
+      </h1>
+      <p className="text-sm text-muted-foreground">{description}</p>
+    </div>
+  );
+}
diff --git a/components/auth/auth-sidebar.tsx b/components/auth/auth-sidebar.tsx
new file mode 100644
index 0000000..f37935e
--- /dev/null
+++ b/components/auth/auth-sidebar.tsx
@@ -0,0 +1,34 @@
+import MagnetLines from "../magnet-lines";
+
+function AuthSidebar() {
+  return (
+    <div className="relative hidden flex-col overflow-hidden bg-welcome-banner text-welcome-banner-foreground md:flex">
+      <div className="absolute inset-0 flex items-center justify-center opacity-20 pointer-events-none">
+        <MagnetLines
+          rows={10}
+          columns={16}
+          containerSize="120%"
+          lineColor="currentColor"
+          lineWidth="0.35vmin"
+          lineHeight="5vmin"
+          baseAngle={-4}
+          className="text-welcome-banner-foreground"
+        />
+      </div>
+
+      <div className="relative flex flex-1 flex-col justify-between p-8">
+        <div className="space-y-4">
+          <h2 className="text-3xl font-semibold leading-tight">
+            Controle suas finanças com clareza e foco diário.
+          </h2>
+          <p className="text-sm opacity-90">
+            Centralize despesas, organize cartões e acompanhe metas mensais em
+            um painel inteligente feito para o seu dia a dia.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default AuthSidebar;
diff --git a/components/auth/google-auth-button.tsx b/components/auth/google-auth-button.tsx
new file mode 100644
index 0000000..8f37232
--- /dev/null
+++ b/components/auth/google-auth-button.tsx
@@ -0,0 +1,54 @@
+import { Button } from "@/components/ui/button";
+import { RiLoader4Line } from "@remixicon/react";
+
+interface GoogleAuthButtonProps {
+  onClick: () => void;
+  loading?: boolean;
+  disabled?: boolean;
+  text?: string;
+}
+
+export function GoogleAuthButton({
+  onClick,
+  loading = false,
+  disabled = false,
+  text = "Continuar com Google",
+}: GoogleAuthButtonProps) {
+  return (
+    <Button
+      variant="outline"
+      type="button"
+      onClick={onClick}
+      disabled={disabled || loading}
+      className="w-full gap-2"
+    >
+      {loading ? (
+        <RiLoader4Line className="h-4 w-4 animate-spin" />
+      ) : (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          className="h-5 w-5"
+        >
+          <path
+            d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+            fill="#4285F4"
+          />
+          <path
+            d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+            fill="#34A853"
+          />
+          <path
+            d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+            fill="#FBBC05"
+          />
+          <path
+            d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+            fill="#EA4335"
+          />
+        </svg>
+      )}
+      <span>{text}</span>
+    </Button>
+  );
+}
diff --git a/components/auth/login-form.tsx b/components/auth/login-form.tsx
new file mode 100644
index 0000000..f543fed
--- /dev/null
+++ b/components/auth/login-form.tsx
@@ -0,0 +1,187 @@
+"use client";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import {
+  Field,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+  FieldSeparator,
+} from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import { authClient, googleSignInAvailable } from "@/lib/auth/client";
+import { cn } from "@/lib/utils/ui";
+import { RiLoader4Line } from "@remixicon/react";
+import { useRouter } from "next/navigation";
+import { useState, type FormEvent } from "react";
+import { toast } from "sonner";
+import { Logo } from "../logo";
+import { AuthErrorAlert } from "./auth-error-alert";
+import { AuthHeader } from "./auth-header";
+import AuthSidebar from "./auth-sidebar";
+import { GoogleAuthButton } from "./google-auth-button";
+
+type DivProps = React.ComponentProps<"div">;
+
+export function LoginForm({ className, ...props }: DivProps) {
+  const router = useRouter();
+  const isGoogleAvailable = googleSignInAvailable;
+
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+
+  const [error, setError] = useState("");
+  const [loadingEmail, setLoadingEmail] = useState(false);
+  const [loadingGoogle, setLoadingGoogle] = useState(false);
+
+  async function handleSubmit(e: FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+
+    await authClient.signIn.email(
+      {
+        email,
+        password,
+        callbackURL: "/dashboard",
+        rememberMe: false,
+      },
+      {
+        onRequest: () => {
+          setError("");
+          setLoadingEmail(true);
+        },
+        onSuccess: () => {
+          setLoadingEmail(false);
+          toast.success("Login realizado com sucesso!");
+          router.replace("/dashboard");
+        },
+        onError: (ctx) => {
+          setError(ctx.error.message);
+          setLoadingEmail(false);
+        },
+      }
+    );
+  }
+
+  async function handleGoogle() {
+    if (!isGoogleAvailable) {
+      setError("Login com Google não está disponível no momento.");
+      return;
+    }
+
+    // Ativa loading antes de iniciar o fluxo OAuth
+    setError("");
+    setLoadingGoogle(true);
+
+    // OAuth redirect - o loading permanece até a página ser redirecionada
+    await authClient.signIn.social(
+      {
+        provider: "google",
+        callbackURL: "/dashboard",
+      },
+      {
+        onError: (ctx) => {
+          // Só desativa loading se houver erro
+          setError(ctx.error.message);
+          setLoadingGoogle(false);
+        },
+      }
+    );
+  }
+
+  return (
+    <div className={cn("flex flex-col gap-6", className)} {...props}>
+      <Logo className="mb-2" />
+      <Card className="overflow-hidden p-0">
+        <CardContent className="grid gap-0 p-0 md:grid-cols-[1.05fr_0.95fr]">
+          <form
+            className="flex flex-col gap-6 p-6 md:p-8"
+            onSubmit={handleSubmit}
+            noValidate
+          >
+            <FieldGroup className="gap-4">
+              <AuthHeader
+                title="Entrar no OpenSheets"
+                description="Entre com a sua conta"
+              />
+
+              <AuthErrorAlert error={error} />
+
+              <Field>
+                <FieldLabel htmlFor="email">E-mail</FieldLabel>
+                <Input
+                  id="email"
+                  type="email"
+                  placeholder="Digite seu e-mail"
+                  autoComplete="email"
+                  required
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  aria-invalid={!!error}
+                />
+              </Field>
+
+              <Field>
+                <div className="flex items-center">
+                  <FieldLabel htmlFor="password">Senha</FieldLabel>
+                </div>
+                <Input
+                  id="password"
+                  type="password"
+                  required
+                  placeholder="Digite sua senha"
+                  autoComplete="current-password"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  aria-invalid={!!error}
+                />
+              </Field>
+
+              <Field>
+                <Button
+                  type="submit"
+                  disabled={loadingEmail || loadingGoogle}
+                  className="w-full"
+                >
+                  {loadingEmail ? (
+                    <RiLoader4Line className="h-4 w-4 animate-spin" />
+                  ) : (
+                    "Entrar"
+                  )}
+                </Button>
+              </Field>
+
+              <FieldSeparator className="my-2 *:data-[slot=field-separator-content]:bg-card">
+                Ou continue com
+              </FieldSeparator>
+
+              <Field>
+                <GoogleAuthButton
+                  onClick={handleGoogle}
+                  loading={loadingGoogle}
+                  disabled={loadingEmail || loadingGoogle || !isGoogleAvailable}
+                  text="Entrar com Google"
+                />
+              </Field>
+
+              <FieldDescription className="text-center">
+                Não tem uma conta?{" "}
+                <a href="/signup" className="underline underline-offset-4">
+                  Inscreva-se
+                </a>
+              </FieldDescription>
+            </FieldGroup>
+          </form>
+
+          <AuthSidebar />
+        </CardContent>
+      </Card>
+
+      {/* <AuthFooter /> */}
+      <FieldDescription className="text-center">
+        <a href="/" className="underline underline-offset-4">
+          Voltar para o site
+        </a>
+      </FieldDescription>
+    </div>
+  );
+}
diff --git a/components/auth/logout-button.tsx b/components/auth/logout-button.tsx
new file mode 100644
index 0000000..9f79bf4
--- /dev/null
+++ b/components/auth/logout-button.tsx
@@ -0,0 +1,56 @@
+"use client";
+import { useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { authClient } from "@/lib/auth/client";
+import { useRouter } from "next/navigation";
+import { Spinner } from "../ui/spinner";
+
+export default function LogoutButton() {
+  const router = useRouter();
+
+  const [loading, setLoading] = useState(false);
+
+  async function handleLogOut() {
+    await authClient.signOut({
+      fetchOptions: {
+        onSuccess: () => {
+          router.push("/login");
+        },
+        onRequest: (_ctx) => {
+          setLoading(true);
+        },
+        onResponse: (_ctx) => {
+          setLoading(false);
+        },
+      },
+    });
+  }
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button
+          type="button"
+          variant="link"
+          size="sm"
+          aria-busy={loading}
+          data-loading={loading}
+          onClick={handleLogOut}
+          disabled={loading}
+          className="text-destructive transition-all duration-200 border hover:text-destructive focus-visible:ring-destructive/30 data-[loading=true]:opacity-90"
+        >
+          {loading && <Spinner className="size-3.5 text-destructive" />}
+          <span aria-live="polite">{loading ? "Saindo" : "Sair"}</span>
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent side="bottom" sideOffset={8}>
+        Encerrar sessão
+      </TooltipContent>
+    </Tooltip>
+  );
+}
diff --git a/components/auth/signup-form.tsx b/components/auth/signup-form.tsx
new file mode 100644
index 0000000..898cb3e
--- /dev/null
+++ b/components/auth/signup-form.tsx
@@ -0,0 +1,199 @@
+"use client";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import {
+  Field,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+  FieldSeparator,
+} from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import { authClient, googleSignInAvailable } from "@/lib/auth/client";
+import { cn } from "@/lib/utils/ui";
+import { RiLoader4Line } from "@remixicon/react";
+import { useRouter } from "next/navigation";
+import { useState, type FormEvent } from "react";
+import { toast } from "sonner";
+import { Logo } from "../logo";
+import { AuthErrorAlert } from "./auth-error-alert";
+import { AuthHeader } from "./auth-header";
+import AuthSidebar from "./auth-sidebar";
+import { GoogleAuthButton } from "./google-auth-button";
+
+type DivProps = React.ComponentProps<"div">;
+
+export function SignupForm({ className, ...props }: DivProps) {
+  const router = useRouter();
+  const isGoogleAvailable = googleSignInAvailable;
+
+  const [fullname, setFullname] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+
+  const [error, setError] = useState("");
+  const [loadingEmail, setLoadingEmail] = useState(false);
+  const [loadingGoogle, setLoadingGoogle] = useState(false);
+
+  async function handleSubmit(e: FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+
+    await authClient.signUp.email(
+      {
+        email,
+        password,
+        name: fullname,
+      },
+      {
+        onRequest: () => {
+          setError("");
+          setLoadingEmail(true);
+        },
+        onSuccess: () => {
+          setLoadingEmail(false);
+          toast.success("Conta criada com sucesso!");
+          router.replace("/dashboard");
+        },
+        onError: (ctx) => {
+          setError(ctx.error.message);
+          setLoadingEmail(false);
+        },
+      }
+    );
+  }
+
+  async function handleGoogle() {
+    if (!isGoogleAvailable) {
+      setError("Login com Google não está disponível no momento.");
+      return;
+    }
+
+    // Ativa loading antes de iniciar o fluxo OAuth
+    setError("");
+    setLoadingGoogle(true);
+
+    // OAuth redirect - o loading permanece até a página ser redirecionada
+    await authClient.signIn.social(
+      {
+        provider: "google",
+        callbackURL: "/dashboard",
+      },
+      {
+        onError: (ctx) => {
+          // Só desativa loading se houver erro
+          setError(ctx.error.message);
+          setLoadingGoogle(false);
+        },
+      }
+    );
+  }
+
+  return (
+    <div className={cn("flex flex-col gap-6", className)} {...props}>
+      <Logo className="mb-2" />
+      <Card className="overflow-hidden p-0">
+        <CardContent className="grid gap-0 p-0 md:grid-cols-[1.05fr_0.95fr]">
+          <form
+            className="flex flex-col gap-6 p-6 md:p-8"
+            onSubmit={handleSubmit}
+            noValidate
+          >
+            <FieldGroup className="gap-4">
+              <AuthHeader
+                title="Criar sua conta"
+                description="Comece com sua nova conta"
+              />
+
+              <AuthErrorAlert error={error} />
+
+              <Field>
+                <FieldLabel htmlFor="name">Nome completo</FieldLabel>
+                <Input
+                  id="name"
+                  type="text"
+                  placeholder="Digite seu nome"
+                  autoComplete="name"
+                  required
+                  value={fullname}
+                  onChange={(e) => setFullname(e.target.value)}
+                  aria-invalid={!!error}
+                />
+              </Field>
+
+              <Field>
+                <FieldLabel htmlFor="email">E-mail</FieldLabel>
+                <Input
+                  id="email"
+                  type="email"
+                  placeholder="Digite seu e-mail"
+                  autoComplete="email"
+                  required
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  aria-invalid={!!error}
+                />
+              </Field>
+
+              <Field>
+                <FieldLabel htmlFor="password">Senha</FieldLabel>
+                <Input
+                  id="password"
+                  type="password"
+                  required
+                  autoComplete="new-password"
+                  placeholder="Crie uma senha forte"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  aria-invalid={!!error}
+                />
+              </Field>
+
+              <Field>
+                <Button
+                  type="submit"
+                  disabled={loadingEmail || loadingGoogle}
+                  className="w-full"
+                >
+                  {loadingEmail ? (
+                    <RiLoader4Line className="h-4 w-4 animate-spin" />
+                  ) : (
+                    "Criar conta"
+                  )}
+                </Button>
+              </Field>
+
+              <FieldSeparator className="my-2 *:data-[slot=field-separator-content]:bg-card">
+                Ou continue com
+              </FieldSeparator>
+
+              <Field>
+                <GoogleAuthButton
+                  onClick={handleGoogle}
+                  loading={loadingGoogle}
+                  disabled={loadingEmail || loadingGoogle || !isGoogleAvailable}
+                  text="Continuar com Google"
+                />
+              </Field>
+
+              <FieldDescription className="text-center">
+                Já tem uma conta?{" "}
+                <a href="/login" className="underline underline-offset-4">
+                  Entrar
+                </a>
+              </FieldDescription>
+            </FieldGroup>
+          </form>
+
+          <AuthSidebar />
+        </CardContent>
+      </Card>
+
+      {/* <AuthFooter /> */}
+      <FieldDescription className="text-center">
+        <a href="/" className="underline underline-offset-4">
+          Voltar para o site
+        </a>
+      </FieldDescription>
+    </div>
+  );
+}
diff --git a/components/calculadora/calculator-dialog.tsx b/components/calculadora/calculator-dialog.tsx
new file mode 100644
index 0000000..6c08ccb
--- /dev/null
+++ b/components/calculadora/calculator-dialog.tsx
@@ -0,0 +1,109 @@
+"use client";
+
+import Calculator from "@/components/calculadora/calculator";
+import { Button, buttonVariants } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils/ui";
+import { RiCalculatorFill, RiCalculatorLine } from "@remixicon/react";
+import * as React from "react";
+
+type Variant = React.ComponentProps<typeof Button>["variant"];
+type Size = React.ComponentProps<typeof Button>["size"];
+
+type CalculatorDialogButtonProps = {
+  variant?: Variant;
+  size?: Size;
+  className?: string;
+  children?: React.ReactNode;
+  withTooltip?: boolean;
+};
+
+export function CalculatorDialogButton({
+  variant = "ghost",
+  size = "sm",
+  className,
+  children,
+  withTooltip = false,
+}: CalculatorDialogButtonProps) {
+  const [open, setOpen] = React.useState(false);
+
+  // Se withTooltip for true, usa o estilo do header
+  if (withTooltip) {
+    return (
+      <Dialog open={open} onOpenChange={setOpen}>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <DialogTrigger asChild>
+              <button
+                type="button"
+                aria-label="Calculadora"
+                aria-expanded={open}
+                data-state={open ? "open" : "closed"}
+                className={cn(
+                  buttonVariants({ variant: "ghost", size: "icon-sm" }),
+                  "group relative text-muted-foreground transition-all duration-200",
+                  "hover:text-foreground focus-visible:ring-2 focus-visible:ring-primary/40",
+                  "data-[state=open]:bg-accent/60 data-[state=open]:text-foreground border",
+                  className
+                )}
+              >
+                <RiCalculatorLine
+                  className={cn(
+                    "size-4 transition-transform duration-200",
+                    open ? "scale-90" : "scale-100"
+                  )}
+                />
+                <span className="sr-only">Calculadora</span>
+              </button>
+            </DialogTrigger>
+          </TooltipTrigger>
+          <TooltipContent side="bottom" sideOffset={8}>
+            Calculadora
+          </TooltipContent>
+        </Tooltip>
+        <DialogContent className="p-4 sm:max-w-sm">
+          <DialogHeader className="space-y-2">
+            <DialogTitle className="flex items-center gap-2 text-lg">
+              <RiCalculatorLine className="h-5 w-5" />
+              Calculadora
+            </DialogTitle>
+          </DialogHeader>
+          <Calculator />
+        </DialogContent>
+      </Dialog>
+    );
+  }
+
+  // Estilo padrão para outros usos
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button variant={variant} size={size} className={cn(className)}>
+          {children ?? (
+            <RiCalculatorFill className="h-4 w-4 text-muted-foreground" />
+          )}
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="p-4 sm:max-w-sm">
+        <DialogHeader className="space-y-2">
+          <DialogTitle className="flex items-center gap-2 text-lg">
+            <RiCalculatorLine className="h-5 w-5" />
+            Calculadora
+          </DialogTitle>
+        </DialogHeader>
+        <Calculator />
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/components/calculadora/calculator-display.tsx b/components/calculadora/calculator-display.tsx
new file mode 100644
index 0000000..ce74b03
--- /dev/null
+++ b/components/calculadora/calculator-display.tsx
@@ -0,0 +1,49 @@
+import { Button } from "@/components/ui/button";
+import { RiCheckLine, RiFileCopyLine } from "@remixicon/react";
+
+export type CalculatorDisplayProps = {
+  history: string | null;
+  expression: string;
+  resultText: string | null;
+  copied: boolean;
+  onCopy: () => void;
+};
+
+export function CalculatorDisplay({
+  history,
+  expression,
+  resultText,
+  copied,
+  onCopy,
+}: CalculatorDisplayProps) {
+  return (
+    <div className="rounded-xl border bg-muted px-4 py-5 text-right">
+      {history && (
+        <div className="text-sm text-muted-foreground">{history}</div>
+      )}
+      <div className="flex items-center justify-end gap-2">
+        <div className="text-right text-3xl font-semibold tracking-tight tabular-nums">
+          {expression}
+        </div>
+        {resultText && (
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            onClick={onCopy}
+            className="h-6 w-6 shrink-0 rounded-full p-0 text-muted-foreground hover:text-foreground"
+          >
+            {copied ? (
+              <RiCheckLine className="h-4 w-4" />
+            ) : (
+              <RiFileCopyLine className="h-4 w-4" />
+            )}
+            <span className="sr-only">
+              {copied ? "Resultado copiado" : "Copiar resultado"}
+            </span>
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/components/calculadora/calculator-keypad.tsx b/components/calculadora/calculator-keypad.tsx
new file mode 100644
index 0000000..4dbe15c
--- /dev/null
+++ b/components/calculadora/calculator-keypad.tsx
@@ -0,0 +1,29 @@
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils/ui";
+import { type CalculatorButtonConfig } from "@/hooks/use-calculator-state";
+
+type CalculatorKeypadProps = {
+  buttons: CalculatorButtonConfig[][];
+};
+
+export function CalculatorKeypad({ buttons }: CalculatorKeypadProps) {
+  return (
+    <div className="grid grid-cols-4 gap-2">
+      {buttons.flat().map((btn, index) => (
+        <Button
+          key={`${btn.label}-${index}`}
+          type="button"
+          variant={btn.variant ?? "outline"}
+          onClick={btn.onClick}
+          className={cn(
+            "h-12 text-base font-semibold",
+            btn.colSpan === 2 && "col-span-2",
+            btn.colSpan === 3 && "col-span-3",
+          )}
+        >
+          {btn.label}
+        </Button>
+      ))}
+    </div>
+  );
+}
diff --git a/components/calculadora/calculator.tsx b/components/calculadora/calculator.tsx
new file mode 100644
index 0000000..f06a10c
--- /dev/null
+++ b/components/calculadora/calculator.tsx
@@ -0,0 +1,37 @@
+"use client";
+
+import { CalculatorKeypad } from "@/components/calculadora/calculator-keypad";
+import { useCalculatorKeyboard } from "@/hooks/use-calculator-keyboard";
+import { useCalculatorState } from "@/hooks/use-calculator-state";
+import { CalculatorDisplay } from "./calculator-display";
+
+export default function Calculator() {
+  const {
+    expression,
+    history,
+    resultText,
+    copied,
+    buttons,
+    copyToClipboard,
+    pasteFromClipboard,
+  } = useCalculatorState();
+
+  useCalculatorKeyboard({
+    canCopy: Boolean(resultText),
+    onCopy: copyToClipboard,
+    onPaste: pasteFromClipboard,
+  });
+
+  return (
+    <div className="space-y-4">
+      <CalculatorDisplay
+        history={history}
+        expression={expression}
+        resultText={resultText}
+        copied={copied}
+        onCopy={copyToClipboard}
+      />
+      <CalculatorKeypad buttons={buttons} />
+    </div>
+  );
+}
diff --git a/components/calendario/calendar-grid.tsx b/components/calendario/calendar-grid.tsx
new file mode 100644
index 0000000..ce15ba5
--- /dev/null
+++ b/components/calendario/calendar-grid.tsx
@@ -0,0 +1,42 @@
+"use client";
+
+import { cn } from "@/lib/utils/ui";
+
+import type { CalendarDay } from "@/components/calendario/types";
+import { WEEK_DAYS_SHORT } from "@/components/calendario/utils";
+import { DayCell } from "@/components/calendario/day-cell";
+
+type CalendarGridProps = {
+  days: CalendarDay[];
+  onSelectDay: (day: CalendarDay) => void;
+  onCreateDay: (day: CalendarDay) => void;
+};
+
+export function CalendarGrid({
+  days,
+  onSelectDay,
+  onCreateDay,
+}: CalendarGridProps) {
+  return (
+    <div className="overflow-hidden rounded-lg bg-card drop-shadow-xs px-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">
+            {dayName}
+          </span>
+        ))}
+      </div>
+
+      <div className="grid grid-cols-7 gap-px bg-border/60 px-px pb-px pt-px">
+        {days.map((day) => (
+          <div
+            key={day.date}
+            className={cn("h-[150px] bg-card p-0.5", !day.isCurrentMonth && "")}
+          >
+            <DayCell day={day} onSelect={onSelectDay} onCreate={onCreateDay} />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/components/calendario/calendar-legend.tsx b/components/calendario/calendar-legend.tsx
new file mode 100644
index 0000000..39ed353
--- /dev/null
+++ b/components/calendario/calendar-legend.tsx
@@ -0,0 +1,36 @@
+"use client";
+
+import { cn } from "@/lib/utils/ui";
+
+import type { CalendarEvent } from "@/components/calendario/types";
+import { EVENT_TYPE_STYLES } from "@/components/calendario/day-cell";
+
+const LEGEND_ITEMS: Array<{
+  type: CalendarEvent["type"];
+  label: string;
+}> = [
+  { type: "lancamento", label: "Lançamento financeiro" },
+  { type: "boleto", label: "Boleto com vencimento" },
+  { type: "cartao", label: "Vencimento de cartão" },
+];
+
+export function CalendarLegend() {
+  return (
+    <div className="flex flex-wrap gap-3 rounded-lg border border-border/60 bg-muted/20 px-3 py-2 text-[11px] font-medium text-muted-foreground">
+      {LEGEND_ITEMS.map((item) => {
+        const style = EVENT_TYPE_STYLES[item.type];
+        return (
+          <span key={item.type} className="flex items-center gap-2">
+            <span
+              className={cn(
+                "size-2.5 rounded-full border border-black/10 dark:border-white/20",
+                style.dot
+              )}
+            />
+            {item.label}
+          </span>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/components/calendario/day-cell.tsx b/components/calendario/day-cell.tsx
new file mode 100644
index 0000000..2c8e6da
--- /dev/null
+++ b/components/calendario/day-cell.tsx
@@ -0,0 +1,165 @@
+"use client";
+
+import { cn } from "@/lib/utils/ui";
+import { RiAddLine } from "@remixicon/react";
+import type { KeyboardEvent, MouseEvent } from "react";
+import type { CalendarDay, CalendarEvent } from "@/components/calendario/types";
+import { currencyFormatter } from "@/lib/lancamentos/formatting-helpers";
+
+type DayCellProps = {
+  day: CalendarDay;
+  onSelect: (day: CalendarDay) => void;
+  onCreate: (day: CalendarDay) => void;
+};
+
+export const EVENT_TYPE_STYLES: Record<
+  CalendarEvent["type"],
+  { wrapper: string; dot: string; accent?: string }
+> = {
+  lancamento: {
+    wrapper: "bg-cyan-600 text-cyan-50 dark:bg-cyan-500/30 dark:text-cyan-200",
+    dot: "bg-cyan-600",
+  },
+  boleto: {
+    wrapper: "bg-red-600 text-red-50 dark:bg-red-500/30 dark:text-red-200",
+    dot: "bg-red-600",
+  },
+  cartao: {
+    wrapper:
+      "bg-violet-600 text-violet-50 dark:bg-violet-500/30 dark:text-violet-200",
+    dot: "bg-violet-600",
+  },
+};
+
+const eventStyles = EVENT_TYPE_STYLES;
+
+const formatCurrencyValue = (value: number | null | undefined) =>
+  currencyFormatter.format(Math.abs(value ?? 0));
+
+const formatAmount = (event: Extract<CalendarEvent, { type: "lancamento" }>) =>
+  formatCurrencyValue(event.lancamento.amount);
+
+const buildEventLabel = (event: CalendarEvent) => {
+  switch (event.type) {
+    case "lancamento": {
+      return event.lancamento.name;
+    }
+    case "boleto": {
+      return event.lancamento.name;
+    }
+    case "cartao": {
+      return event.card.name;
+    }
+    default:
+      return "";
+  }
+};
+
+const buildEventComplement = (event: CalendarEvent) => {
+  switch (event.type) {
+    case "lancamento": {
+      return formatAmount(event);
+    }
+    case "boleto": {
+      return formatCurrencyValue(event.lancamento.amount);
+    }
+    case "cartao": {
+      if (event.card.totalDue !== null) {
+        return formatCurrencyValue(event.card.totalDue);
+      }
+      return null;
+    }
+    default:
+      return null;
+  }
+};
+
+const DayEventPreview = ({ event }: { event: CalendarEvent }) => {
+  const complement = buildEventComplement(event);
+  const label = buildEventLabel(event);
+  const style = eventStyles[event.type];
+
+  return (
+    <div
+      className={cn(
+        "flex w-full items-center justify-between gap-2 rounded p-1 text-xs leading-tight",
+        style.wrapper
+      )}
+    >
+      <div className="flex min-w-0">
+        <span className="truncate">{label}</span>
+      </div>
+      {complement ? (
+        <span
+          className={cn("shrink-0 font-semibold", style.accent ?? "text-xs")}
+        >
+          {complement}
+        </span>
+      ) : null}
+    </div>
+  );
+};
+
+export function DayCell({ day, onSelect, onCreate }: DayCellProps) {
+  const previewEvents = day.events.slice(0, 3);
+  const hasOverflow = day.events.length > 3;
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    if (event.key === "Enter" || event.key === " " || event.key === "Space") {
+      event.preventDefault();
+      onSelect(day);
+    }
+  };
+
+  const handleCreateClick = (event: MouseEvent<HTMLButtonElement>) => {
+    event.stopPropagation();
+    onCreate(day);
+  };
+
+  return (
+    <div
+      role="button"
+      tabIndex={0}
+      onClick={() => onSelect(day)}
+      onKeyDown={handleKeyDown}
+      className={cn(
+        "flex h-full cursor-pointer flex-col gap-1.5 rounded-lg border border-transparent bg-card/80 p-2 text-left transition-colors 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-primary/10",
+        !day.isCurrentMonth && "opacity-60",
+        day.isToday && "border-primary/70 bg-primary/5 hover:border-primary"
+      )}
+    >
+      <div className="flex items-start justify-between gap-2">
+        <span
+          className={cn(
+            "text-sm font-semibold leading-none",
+            day.isToday
+              ? "text-orange-100 bg-primary size-5 rounded-full flex items-center justify-center"
+              : "text-foreground/90"
+          )}
+        >
+          {day.label}
+        </span>
+        <button
+          type="button"
+          onClick={handleCreateClick}
+          className="flex size-6 items-center justify-center rounded-full border bg-muted text-muted-foreground transition-colors hover:bg-primary/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1"
+          aria-label={`Criar lançamento em ${day.date}`}
+        >
+          <RiAddLine className="size-3.5" />
+        </button>
+      </div>
+
+      <div className="flex flex-1 flex-col gap-1.5">
+        {previewEvents.map((event) => (
+          <DayEventPreview key={event.id} event={event} />
+        ))}
+
+        {hasOverflow ? (
+          <span className="text-xs font-medium text-primary/80">
+            + ver mais
+          </span>
+        ) : null}
+      </div>
+    </div>
+  );
+}
diff --git a/components/calendario/event-modal.tsx b/components/calendario/event-modal.tsx
new file mode 100644
index 0000000..cf7435a
--- /dev/null
+++ b/components/calendario/event-modal.tsx
@@ -0,0 +1,229 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { cn } from "@/lib/utils/ui";
+import { useMemo, type ReactNode } from "react";
+import type { CalendarDay, CalendarEvent } from "@/components/calendario/types";
+import { parseDateKey } from "@/components/calendario/utils";
+import { EVENT_TYPE_STYLES } from "@/components/calendario/day-cell";
+import { currencyFormatter } from "@/lib/lancamentos/formatting-helpers";
+
+type EventModalProps = {
+  open: boolean;
+  day: CalendarDay | null;
+  onClose: () => void;
+  onCreate: (date: string) => void;
+};
+
+const fullDateFormatter = new Intl.DateTimeFormat("pt-BR", {
+  day: "numeric",
+  month: "long",
+  year: "numeric",
+});
+
+const capitalize = (value: string) =>
+  value.length > 0 ? value[0]?.toUpperCase().concat(value.slice(1)) : value;
+
+const formatCurrency = (value: number, isReceita: boolean) => {
+  const formatted = currencyFormatter.format(value ?? 0);
+  return isReceita ? `+${formatted}` : formatted;
+};
+
+const EventCard = ({
+  children,
+  type,
+}: {
+  children: ReactNode;
+  type: CalendarEvent["type"];
+}) => {
+  const style = EVENT_TYPE_STYLES[type];
+  return (
+    <div className="flex gap-3 rounded-xl border border-border/60 bg-card/85 p-4">
+      <span
+        className={cn("mt-1 size-2.5 shrink-0 rounded-full", style.dot)}
+        aria-hidden
+      />
+      <div className="flex flex-1 flex-col gap-2">{children}</div>
+    </div>
+  );
+};
+
+const renderLancamento = (
+  event: Extract<CalendarEvent, { type: "lancamento" }>
+) => {
+  const isReceita = event.lancamento.transactionType === "Receita";
+  const subtitleParts = [
+    event.lancamento.categoriaName,
+    event.lancamento.paymentMethod,
+    event.lancamento.pagadorName,
+  ].filter(Boolean);
+
+  return (
+    <EventCard type="lancamento">
+      <div className="flex items-start justify-between gap-3">
+        <div className="flex flex-col">
+          <span className="text-sm font-semibold">{event.lancamento.name}</span>
+          {subtitleParts.length ? (
+            <span className="text-xs text-muted-foreground">
+              {subtitleParts.join(" • ")}
+            </span>
+          ) : null}
+        </div>
+        <span
+          className={cn(
+            "text-sm font-semibold",
+            isReceita ? "text-emerald-600" : "text-foreground"
+          )}
+        >
+          {formatCurrency(event.lancamento.amount, isReceita)}
+        </span>
+      </div>
+      <div className="flex flex-wrap gap-2 text-[11px] font-medium text-muted-foreground">
+        <span className="rounded-full bg-muted px-2 py-0.5">
+          {capitalize(event.lancamento.transactionType)}
+        </span>
+        <span className="rounded-full bg-muted px-2 py-0.5">
+          {event.lancamento.condition}
+        </span>
+        <span className="rounded-full bg-muted px-2 py-0.5">
+          {event.lancamento.paymentMethod}
+        </span>
+      </div>
+    </EventCard>
+  );
+};
+
+const renderBoleto = (event: Extract<CalendarEvent, { type: "boleto" }>) => {
+  const isPaid = Boolean(event.lancamento.isSettled);
+  const dueDate = event.lancamento.dueDate;
+  const formattedDueDate = dueDate
+    ? new Intl.DateTimeFormat("pt-BR").format(new Date(dueDate))
+    : null;
+
+  return (
+    <EventCard type="boleto">
+      <div className="flex items-start justify-between gap-3">
+        <div className="flex flex-col">
+          <span className="text-sm font-semibold">{event.lancamento.name}</span>
+          <span className="text-xs text-muted-foreground">
+            Boleto{formattedDueDate ? ` • Vence em ${formattedDueDate}` : ""}
+          </span>
+        </div>
+        <span className="text-sm font-semibold text-foreground">
+          {currencyFormatter.format(event.lancamento.amount ?? 0)}
+        </span>
+      </div>
+      <span
+        className={cn(
+          "inline-flex w-fit items-center rounded-full px-2.5 py-0.5 text-[11px] font-semibold uppercase tracking-wide",
+          isPaid
+            ? "bg-emerald-100 text-emerald-700 dark:bg-emerald-500/20 dark:text-emerald-200"
+            : "bg-amber-100 text-amber-700 dark:bg-amber-500/20 dark:text-amber-200"
+        )}
+      >
+        {isPaid ? "Pago" : "Pendente"}
+      </span>
+    </EventCard>
+  );
+};
+
+const renderCard = (event: Extract<CalendarEvent, { type: "cartao" }>) => (
+  <EventCard type="cartao">
+    <div className="flex items-start justify-between gap-3">
+      <div className="flex flex-col">
+        <span className="text-sm font-semibold">Cartão {event.card.name}</span>
+        <span className="text-xs text-muted-foreground">
+          Vencimento dia {event.card.dueDay}
+        </span>
+      </div>
+      {event.card.totalDue !== null ? (
+        <span className="text-sm font-semibold text-foreground">
+          {currencyFormatter.format(event.card.totalDue)}
+        </span>
+      ) : null}
+    </div>
+    <div className="flex flex-wrap gap-2 text-[11px] font-medium text-muted-foreground">
+      <span className="rounded-full bg-muted px-2 py-0.5">
+        Status: {event.card.status ?? "Indefinido"}
+      </span>
+      {event.card.closingDay ? (
+        <span className="rounded-full bg-muted px-2 py-0.5">
+          Fechamento dia {event.card.closingDay}
+        </span>
+      ) : null}
+    </div>
+  </EventCard>
+);
+
+const renderEvent = (event: CalendarEvent) => {
+  switch (event.type) {
+    case "lancamento":
+      return renderLancamento(event);
+    case "boleto":
+      return renderBoleto(event);
+    case "cartao":
+      return renderCard(event);
+    default:
+      return null;
+  }
+};
+
+export function EventModal({ open, day, onClose, onCreate }: EventModalProps) {
+  const formattedDate = useMemo(() => {
+    if (!day) return "";
+    const parsed = parseDateKey(day.date);
+    return capitalize(fullDateFormatter.format(parsed));
+  }, [day]);
+
+  const handleCreate = () => {
+    if (!day) return;
+    onClose();
+    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.";
+
+  return (
+    <Dialog open={open} onOpenChange={(value) => (!value ? onClose() : null)}>
+      <DialogContent className="max-w-xl">
+        <DialogHeader>
+          <DialogTitle>{formattedDate}</DialogTitle>
+          <DialogDescription>{description}</DialogDescription>
+        </DialogHeader>
+
+        <div className="max-h-[380px] space-y-3 overflow-y-auto pr-2">
+          {day?.events.length ? (
+            day.events.map((event) => (
+              <div key={event.id}>{renderEvent(event)}</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>
+          )}
+        </div>
+
+        <DialogFooter className="flex justify-end gap-2">
+          <Button variant="outline" onClick={onClose}>
+            Cancelar
+          </Button>
+          <Button onClick={handleCreate} disabled={!day}>
+            Novo lançamento
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/components/calendario/monthly-calendar.tsx b/components/calendario/monthly-calendar.tsx
new file mode 100644
index 0000000..92b019f
--- /dev/null
+++ b/components/calendario/monthly-calendar.tsx
@@ -0,0 +1,126 @@
+"use client";
+
+import { useCallback, useMemo, useState } from "react";
+
+import { LancamentoDialog } from "@/components/lancamentos/dialogs/lancamento-dialog/lancamento-dialog";
+
+import type {
+  CalendarDay,
+  CalendarEvent,
+  CalendarFormOptions,
+  CalendarPeriod,
+} from "@/components/calendario/types";
+import { buildCalendarDays } from "@/components/calendario/utils";
+import { CalendarGrid } from "@/components/calendario/calendar-grid";
+import { CalendarLegend } from "@/components/calendario/calendar-legend";
+import { EventModal } from "@/components/calendario/event-modal";
+
+type MonthlyCalendarProps = {
+  period: CalendarPeriod;
+  events: CalendarEvent[];
+  formOptions: CalendarFormOptions;
+};
+
+const parsePeriod = (period: string) => {
+  const [yearStr, monthStr] = period.split("-");
+  const year = Number.parseInt(yearStr ?? "", 10);
+  const month = Number.parseInt(monthStr ?? "", 10);
+
+  return { year, monthIndex: month - 1 };
+};
+
+export function MonthlyCalendar({
+  period,
+  events,
+  formOptions,
+}: MonthlyCalendarProps) {
+  const { year, monthIndex } = useMemo(
+    () => parsePeriod(period.period),
+    [period.period]
+  );
+
+  const eventsByDay = useMemo(() => {
+    const map = new Map<string, CalendarEvent[]>();
+    events.forEach((event) => {
+      const list = map.get(event.date) ?? [];
+      list.push(event);
+      map.set(event.date, list);
+    });
+    return map;
+  }, [events]);
+
+  const days = useMemo(
+    () => buildCalendarDays({ year, monthIndex, events: eventsByDay }),
+    [eventsByDay, monthIndex, year]
+  );
+
+  const [selectedDay, setSelectedDay] = useState<CalendarDay | null>(null);
+  const [isModalOpen, setModalOpen] = useState(false);
+  const [createOpen, setCreateOpen] = useState(false);
+  const [createDate, setCreateDate] = useState<string | null>(null);
+
+  const handleOpenCreate = useCallback((date: string) => {
+    setCreateDate(date);
+    setModalOpen(false);
+    setCreateOpen(true);
+  }, []);
+
+  const handleDaySelect = useCallback((day: CalendarDay) => {
+    setSelectedDay(day);
+    setModalOpen(true);
+  }, []);
+
+  const handleCreateFromCell = useCallback(
+    (day: CalendarDay) => {
+      handleOpenCreate(day.date);
+    },
+    [handleOpenCreate]
+  );
+
+  const handleModalClose = useCallback(() => {
+    setModalOpen(false);
+    setSelectedDay(null);
+  }, []);
+
+  const handleCreateDialogChange = useCallback((open: boolean) => {
+    setCreateOpen(open);
+    if (!open) {
+      setCreateDate(null);
+    }
+  }, []);
+
+  return (
+    <>
+      <div className="space-y-3">
+        <CalendarLegend />
+        <CalendarGrid
+          days={days}
+          onSelectDay={handleDaySelect}
+          onCreateDay={handleCreateFromCell}
+        />
+      </div>
+
+      <EventModal
+        open={isModalOpen}
+        day={selectedDay}
+        onClose={handleModalClose}
+        onCreate={handleOpenCreate}
+      />
+
+      <LancamentoDialog
+        mode="create"
+        open={createOpen}
+        onOpenChange={handleCreateDialogChange}
+        pagadorOptions={formOptions.pagadorOptions}
+        splitPagadorOptions={formOptions.splitPagadorOptions}
+        defaultPagadorId={formOptions.defaultPagadorId}
+        contaOptions={formOptions.contaOptions}
+        cartaoOptions={formOptions.cartaoOptions}
+        categoriaOptions={formOptions.categoriaOptions}
+        estabelecimentos={formOptions.estabelecimentos}
+        defaultPeriod={period.period}
+        defaultPurchaseDate={createDate ?? undefined}
+      />
+    </>
+  );
+}
diff --git a/components/calendario/types.ts b/components/calendario/types.ts
new file mode 100644
index 0000000..c164071
--- /dev/null
+++ b/components/calendario/types.ts
@@ -0,0 +1,61 @@
+import type { LancamentoItem, SelectOption } from "@/components/lancamentos/types";
+
+export type CalendarEventType = "lancamento" | "boleto" | "cartao";
+
+export type CalendarEvent =
+  | {
+      id: string;
+      type: "lancamento";
+      date: string;
+      lancamento: LancamentoItem;
+    }
+  | {
+      id: string;
+      type: "boleto";
+      date: string;
+      lancamento: LancamentoItem;
+    }
+  | {
+      id: string;
+      type: "cartao";
+      date: string;
+      card: {
+        id: string;
+        name: string;
+        dueDay: string;
+        closingDay: string;
+        brand: string | null;
+        status: string;
+        logo: string | null;
+        totalDue: number | null;
+      };
+    };
+
+export type CalendarPeriod = {
+  period: string;
+  monthName: string;
+  year: number;
+};
+
+export type CalendarDay = {
+  date: string;
+  label: string;
+  isCurrentMonth: boolean;
+  isToday: boolean;
+  events: CalendarEvent[];
+};
+
+export type CalendarFormOptions = {
+  pagadorOptions: SelectOption[];
+  splitPagadorOptions: SelectOption[];
+  defaultPagadorId: string | null;
+  contaOptions: SelectOption[];
+  cartaoOptions: SelectOption[];
+  categoriaOptions: SelectOption[];
+  estabelecimentos: string[];
+};
+
+export type CalendarData = {
+  events: CalendarEvent[];
+  formOptions: CalendarFormOptions;
+};
diff --git a/components/calendario/utils.ts b/components/calendario/utils.ts
new file mode 100644
index 0000000..655bab9
--- /dev/null
+++ b/components/calendario/utils.ts
@@ -0,0 +1,61 @@
+import type { CalendarDay, CalendarEvent } from "@/components/calendario/types";
+
+export const formatDateKey = (date: Date) => date.toISOString().slice(0, 10);
+
+export const parseDateKey = (value: string) => {
+  const [yearStr, monthStr, dayStr] = value.split("-");
+  const year = Number.parseInt(yearStr ?? "", 10);
+  const month = Number.parseInt(monthStr ?? "", 10);
+  const day = Number.parseInt(dayStr ?? "", 10);
+
+  return new Date(Date.UTC(year, (month ?? 1) - 1, day ?? 1));
+};
+
+const getWeekdayIndex = (date: Date) => {
+  const day = date.getUTCDay(); // 0 (domingo) - 6 (sábado)
+  // Ajusta para segunda-feira como primeiro dia
+  return day === 0 ? 6 : day - 1;
+};
+
+export const buildCalendarDays = ({
+  year,
+  monthIndex,
+  events,
+}: {
+  year: number;
+  monthIndex: number;
+  events: Map<string, CalendarEvent[]>;
+}): CalendarDay[] => {
+  const startOfMonth = new Date(Date.UTC(year, monthIndex, 1));
+  const offset = getWeekdayIndex(startOfMonth);
+  const startDate = new Date(Date.UTC(year, monthIndex, 1 - offset));
+  const totalCells = 42; // 6 semanas
+  const now = new Date();
+  const todayKey = formatDateKey(
+    new Date(Date.UTC(now.getFullYear(), now.getMonth(), now.getDate()))
+  );
+
+  const days: CalendarDay[] = [];
+
+  for (let index = 0; index < totalCells; index += 1) {
+    const currentDate = new Date(startDate);
+    currentDate.setUTCDate(startDate.getUTCDate() + index);
+
+    const dateKey = formatDateKey(currentDate);
+    const isCurrentMonth = currentDate.getUTCMonth() === monthIndex;
+    const dateLabel = currentDate.getUTCDate().toString();
+    const eventsForDay = events.get(dateKey) ?? [];
+
+    days.push({
+      date: dateKey,
+      label: dateLabel,
+      isCurrentMonth,
+      isToday: dateKey === todayKey,
+      events: eventsForDay,
+    });
+  }
+
+  return days;
+};
+
+export const WEEK_DAYS_SHORT = ["Seg", "Ter", "Qua", "Qui", "Sex", "Sáb", "Dom"];
diff --git a/components/cartoes/card-dialog.tsx b/components/cartoes/card-dialog.tsx
new file mode 100644
index 0000000..84b9bc8
--- /dev/null
+++ b/components/cartoes/card-dialog.tsx
@@ -0,0 +1,250 @@
+"use client";
+
+import {
+  createCardAction,
+  updateCardAction,
+} from "@/app/(dashboard)/cartoes/actions";
+import { LogoPickerDialog, LogoPickerTrigger } from "@/components/logo-picker";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { useControlledState } from "@/hooks/use-controlled-state";
+import { useFormState } from "@/hooks/use-form-state";
+import { useLogoSelection } from "@/hooks/use-logo-selection";
+import { deriveNameFromLogo, normalizeLogo } from "@/lib/logo";
+import { formatLimitInput } from "@/lib/utils/currency";
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+  useTransition,
+} from "react";
+import { toast } from "sonner";
+
+import { DEFAULT_CARD_BRANDS, DEFAULT_CARD_STATUS } from "./constants";
+import { CardFormFields } from "./card-form-fields";
+import type { Card, CardFormValues } from "./types";
+
+type AccountOption = {
+  id: string;
+  name: string;
+  logo: string | null;
+};
+
+interface CardDialogProps {
+  mode: "create" | "update";
+  trigger?: React.ReactNode;
+  logoOptions: string[];
+  accounts: AccountOption[];
+  card?: Card;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}
+
+const buildInitialValues = ({
+  card,
+  logoOptions,
+  accounts,
+}: {
+  card?: Card;
+  logoOptions: string[];
+  accounts: AccountOption[];
+}): CardFormValues => {
+  const fallbackLogo = logoOptions[0] ?? "";
+  const selectedLogo = normalizeLogo(card?.logo) || fallbackLogo;
+  const derivedName = deriveNameFromLogo(selectedLogo);
+
+  return {
+    name: card?.name ?? derivedName,
+    brand: card?.brand ?? DEFAULT_CARD_BRANDS[0],
+    status: card?.status ?? DEFAULT_CARD_STATUS[0],
+    closingDay: card?.closingDay ?? "01",
+    dueDay: card?.dueDay ?? "10",
+    limit: formatLimitInput(card?.limit ?? null),
+    note: card?.note ?? "",
+    logo: selectedLogo,
+    contaId: card?.contaId ?? accounts[0]?.id ?? "",
+  };
+};
+
+export function CardDialog({
+  mode,
+  trigger,
+  logoOptions,
+  accounts,
+  card,
+  open,
+  onOpenChange,
+}: CardDialogProps) {
+  const [logoDialogOpen, setLogoDialogOpen] = useState(false);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [isPending, startTransition] = useTransition();
+
+  // Use controlled state hook for dialog open state
+  const [dialogOpen, setDialogOpen] = useControlledState(
+    open,
+    false,
+    onOpenChange
+  );
+
+  const initialState = useMemo(
+    () => buildInitialValues({ card, logoOptions, accounts }),
+    [card, logoOptions, accounts]
+  );
+
+  // Use form state hook for form management
+  const { formState, updateField, updateFields, setFormState } =
+    useFormState<CardFormValues>(initialState);
+
+  // Reset form when dialog opens
+  useEffect(() => {
+    if (dialogOpen) {
+      setFormState(initialState);
+      setErrorMessage(null);
+    }
+  }, [dialogOpen, initialState, setFormState]);
+
+  // Close logo dialog when main dialog closes
+  useEffect(() => {
+    if (!dialogOpen) {
+      setErrorMessage(null);
+      setLogoDialogOpen(false);
+    }
+  }, [dialogOpen]);
+
+  // Use logo selection hook
+  const handleLogoSelection = useLogoSelection({
+    mode,
+    currentLogo: formState.logo,
+    currentName: formState.name,
+    onUpdate: (updates) => {
+      updateFields(updates);
+      setLogoDialogOpen(false);
+    },
+  });
+
+  const handleSubmit = useCallback(
+    (event: React.FormEvent<HTMLFormElement>) => {
+      event.preventDefault();
+      setErrorMessage(null);
+
+      if (mode === "update" && !card?.id) {
+        const message = "Cartão inválido.";
+        setErrorMessage(message);
+        toast.error(message);
+        return;
+      }
+
+      if (!formState.contaId) {
+        const message = "Selecione a conta vinculada.";
+        setErrorMessage(message);
+        toast.error(message);
+        return;
+      }
+
+      const payload = { ...formState };
+
+      if (!payload.logo) {
+        const message = "Selecione um logo.";
+        setErrorMessage(message);
+        toast.error(message);
+        return;
+      }
+
+      startTransition(async () => {
+        const result =
+          mode === "create"
+            ? await createCardAction(payload)
+            : await updateCardAction({
+                id: card?.id ?? "",
+                ...payload,
+              });
+
+        if (result.success) {
+          toast.success(result.message);
+          setDialogOpen(false);
+          setFormState(initialState);
+          return;
+        }
+
+        setErrorMessage(result.error);
+        toast.error(result.error);
+      });
+    },
+    [card?.id, formState, initialState, mode, setDialogOpen, setFormState]
+  );
+
+  const title = mode === "create" ? "Novo cartão" : "Editar 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";
+
+  return (
+    <>
+      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+        {trigger ? <DialogTrigger asChild>{trigger}</DialogTrigger> : null}
+        <DialogContent className="">
+          <DialogHeader>
+            <DialogTitle>{title}</DialogTitle>
+            <DialogDescription>{description}</DialogDescription>
+          </DialogHeader>
+
+          <form className="flex flex-col gap-5" onSubmit={handleSubmit}>
+            <LogoPickerTrigger
+              selectedLogo={formState.logo}
+              disabled={logoOptions.length === 0}
+              helperText="Clique para escolher o logo do cartão"
+              onOpen={() => {
+                if (logoOptions.length > 0) {
+                  setLogoDialogOpen(true);
+                }
+              }}
+            />
+
+            <CardFormFields
+              values={formState}
+              accountOptions={accounts}
+              onChange={updateField}
+            />
+
+            {errorMessage && (
+              <p className="text-sm text-destructive">{errorMessage}</p>
+            )}
+
+            <DialogFooter className="gap-3">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => setDialogOpen(false)}
+                disabled={isPending}
+              >
+                Cancelar
+              </Button>
+              <Button type="submit" disabled={isPending}>
+                {isPending ? "Salvando..." : submitLabel}
+              </Button>
+            </DialogFooter>
+          </form>
+        </DialogContent>
+      </Dialog>
+
+      <LogoPickerDialog
+        open={logoDialogOpen}
+        logos={logoOptions}
+        value={formState.logo}
+        onOpenChange={setLogoDialogOpen}
+        onSelect={handleLogoSelection}
+      />
+    </>
+  );
+}
diff --git a/components/cartoes/card-form-fields.tsx b/components/cartoes/card-form-fields.tsx
new file mode 100644
index 0000000..8120a5e
--- /dev/null
+++ b/components/cartoes/card-form-fields.tsx
@@ -0,0 +1,214 @@
+"use client";
+
+import { CurrencyInput } from "@/components/ui/currency-input";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  DAYS_IN_MONTH,
+  DEFAULT_CARD_BRANDS,
+  DEFAULT_CARD_STATUS,
+} from "./constants";
+import type { CardFormValues } from "./types";
+import {
+  BrandSelectContent,
+  StatusSelectContent,
+  AccountSelectContent,
+} from "./card-select-items";
+
+interface AccountOption {
+  id: string;
+  name: string;
+  logo: string | null;
+}
+
+interface CardFormFieldsProps {
+  values: CardFormValues;
+  accountOptions: AccountOption[];
+  onChange: (field: keyof CardFormValues, value: string) => void;
+}
+
+const ensureOption = (options: string[], value: string) => {
+  if (!value) {
+    return options;
+  }
+  return options.includes(value) ? options : [value, ...options];
+};
+
+export function CardFormFields({
+  values,
+  accountOptions,
+  onChange,
+}: CardFormFieldsProps) {
+  const brands = ensureOption(
+    DEFAULT_CARD_BRANDS as unknown as string[],
+    values.brand
+  );
+  const statuses = ensureOption(
+    DEFAULT_CARD_STATUS as unknown as string[],
+    values.status
+  );
+
+  return (
+    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+      <div className="flex flex-col gap-2">
+        <Label htmlFor="card-name">Nome do cartão</Label>
+        <Input
+          id="card-name"
+          value={values.name}
+          onChange={(event) => onChange("name", event.target.value)}
+          placeholder="Ex.: Nubank Platinum"
+          required
+        />
+      </div>
+
+      <div className="flex flex-col gap-2">
+        <Label htmlFor="card-brand">Bandeira</Label>
+        <Select
+          value={values.brand}
+          onValueChange={(value) => onChange("brand", value)}
+        >
+          <SelectTrigger id="card-brand" className="w-full">
+            <SelectValue placeholder="Selecione a bandeira">
+              {values.brand && <BrandSelectContent label={values.brand} />}
+            </SelectValue>
+          </SelectTrigger>
+          <SelectContent>
+            {brands.map((brand) => (
+              <SelectItem key={brand} value={brand}>
+                <BrandSelectContent label={brand} />
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+
+      <div className="flex flex-col gap-2">
+        <Label htmlFor="card-status">Status</Label>
+        <Select
+          value={values.status}
+          onValueChange={(value) => onChange("status", value)}
+        >
+          <SelectTrigger id="card-status" className="w-full">
+            <SelectValue placeholder="Selecione o status">
+              {values.status && <StatusSelectContent label={values.status} />}
+            </SelectValue>
+          </SelectTrigger>
+          <SelectContent>
+            {statuses.map((status) => (
+              <SelectItem key={status} value={status}>
+                <StatusSelectContent label={status} />
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+
+      <div className="flex flex-col gap-2">
+        <Label htmlFor="card-limit">Limite (R$)</Label>
+        <CurrencyInput
+          id="card-limit"
+          value={values.limit}
+          onValueChange={(value) => onChange("limit", value)}
+          placeholder="R$ 0,00"
+        />
+      </div>
+
+      <div className="flex flex-col gap-2">
+        <Label htmlFor="card-closing-day">Dia de fechamento</Label>
+        <Select
+          value={values.closingDay}
+          onValueChange={(value) => onChange("closingDay", value)}
+        >
+          <SelectTrigger id="card-closing-day" className="w-full">
+            <SelectValue placeholder="Dia de fechamento" />
+          </SelectTrigger>
+          <SelectContent>
+            {DAYS_IN_MONTH.map((day) => (
+              <SelectItem key={day} value={day}>
+                Dia {day}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+
+      <div className="flex flex-col gap-2">
+        <Label htmlFor="card-due-day">Dia de vencimento</Label>
+        <Select
+          value={values.dueDay}
+          onValueChange={(value) => onChange("dueDay", value)}
+        >
+          <SelectTrigger id="card-due-day" className="w-full">
+            <SelectValue placeholder="Dia de vencimento" />
+          </SelectTrigger>
+          <SelectContent>
+            {DAYS_IN_MONTH.map((day) => (
+              <SelectItem key={day} value={day}>
+                Dia {day}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+
+      <div className="flex flex-col gap-2 sm:col-span-2">
+        <Label htmlFor="card-account">Conta vinculada</Label>
+        <Select
+          value={values.contaId}
+          onValueChange={(value) => onChange("contaId", value)}
+          disabled={accountOptions.length === 0}
+        >
+          <SelectTrigger id="card-account" className="w-full">
+            <SelectValue
+              placeholder={
+                accountOptions.length === 0
+                  ? "Cadastre uma conta primeiro"
+                  : "Selecione a conta"
+              }
+            >
+              {values.contaId && (() => {
+                const selectedAccount = accountOptions.find(
+                  (acc) => acc.id === values.contaId
+                );
+                return selectedAccount ? (
+                  <AccountSelectContent
+                    label={selectedAccount.name}
+                    logo={selectedAccount.logo}
+                  />
+                ) : null;
+              })()}
+            </SelectValue>
+          </SelectTrigger>
+          <SelectContent>
+            {accountOptions.map((account) => (
+              <SelectItem key={account.id} value={account.id}>
+                <AccountSelectContent
+                  label={account.name}
+                  logo={account.logo}
+                />
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+
+      <div className="flex flex-col gap-2 sm:col-span-2">
+        <Label htmlFor="card-note">Anotação</Label>
+        <Textarea
+          id="card-note"
+          value={values.note}
+          onChange={(event) => onChange("note", event.target.value)}
+          placeholder="Observações sobre este cartão"
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/components/cartoes/card-item.tsx b/components/cartoes/card-item.tsx
new file mode 100644
index 0000000..c58b333
--- /dev/null
+++ b/components/cartoes/card-item.tsx
@@ -0,0 +1,307 @@
+"use client";
+
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+} from "@/components/ui/card";
+import { Progress } from "@/components/ui/progress";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils/ui";
+import {
+  RiChat3Line,
+  RiDeleteBin5Line,
+  RiEyeLine,
+  RiPencilLine,
+} from "@remixicon/react";
+import Image from "next/image";
+import { useMemo } from "react";
+import MoneyValues from "../money-values";
+
+interface CardItemProps {
+  name: string;
+  brand: string;
+  status: string;
+  closingDay: string;
+  dueDay: string;
+  limit: number | null;
+  limitInUse?: number | null;
+  limitAvailable?: number | null;
+  contaName: string;
+  logo?: string | null;
+  note?: string | null;
+  onEdit?: () => void;
+  onInvoice?: () => void;
+  onRemove?: () => void;
+}
+
+const BRAND_ASSETS: Record<string, string> = {
+  visa: "/bandeiras/visa.svg",
+  mastercard: "/bandeiras/mastercard.svg",
+  amex: "/bandeiras/amex.svg",
+  american: "/bandeiras/amex.svg",
+  elo: "/bandeiras/elo.svg",
+  hipercard: "/bandeiras/hipercard.svg",
+  hiper: "/bandeiras/hipercard.svg",
+};
+
+const resolveBrandAsset = (brand: string) => {
+  const normalized = brand.trim().toLowerCase();
+
+  const match = (
+    Object.keys(BRAND_ASSETS) as Array<keyof typeof BRAND_ASSETS>
+  ).find((entry) => normalized.includes(entry));
+
+  return match ? BRAND_ASSETS[match] : null;
+};
+
+const formatDay = (value: string) => value.padStart(2, "0");
+
+export function CardItem({
+  name,
+  brand,
+  status,
+  closingDay,
+  dueDay,
+  limit,
+  limitInUse,
+  limitAvailable,
+  contaName: _contaName,
+  logo,
+  note,
+  onEdit,
+  onInvoice,
+  onRemove,
+}: CardItemProps) {
+  void _contaName;
+
+  const limitTotal = limit ?? null;
+  const used =
+    limitInUse ??
+    (limitTotal !== null && limitAvailable !== null
+      ? Math.max(limitTotal - limitAvailable, 0)
+      : limitTotal !== null
+      ? 0
+      : null);
+
+  const available =
+    limitAvailable ??
+    (limitTotal !== null && used !== null
+      ? Math.max(limitTotal - used, 0)
+      : null);
+
+  const usagePercent =
+    limitTotal && limitTotal > 0 && used !== null
+      ? Math.min(Math.max((used / limitTotal) * 100, 0), 100)
+      : 0;
+
+  const logoPath = useMemo(() => {
+    if (!logo) {
+      return null;
+    }
+
+    if (
+      logo.startsWith("http://") ||
+      logo.startsWith("https://") ||
+      logo.startsWith("data:")
+    ) {
+      return logo;
+    }
+
+    return logo.startsWith("/") ? logo : `/logos/${logo}`;
+  }, [logo]);
+
+  const brandAsset = useMemo(() => resolveBrandAsset(brand), [brand]);
+
+  const isInactive = useMemo(
+    () => status?.toLowerCase() === "inativo",
+    [status]
+  );
+
+  const metrics = useMemo(() => {
+    if (limitTotal === null) return null;
+
+    return [
+      { label: "Limite Total", value: limitTotal },
+      { label: "Em uso", value: used },
+      { label: "Disponível", value: available },
+    ];
+  }, [available, limitTotal, used]);
+
+  const actions = useMemo(
+    () => [
+      {
+        label: "editar",
+        icon: <RiPencilLine className="size-4" aria-hidden />,
+        onClick: onEdit,
+        className: "text-primary",
+      },
+      {
+        label: "ver fatura",
+        icon: <RiEyeLine className="size-4" aria-hidden />,
+        onClick: onInvoice,
+        className: "text-primary",
+      },
+      {
+        label: "remover",
+        icon: <RiDeleteBin5Line className="size-4" aria-hidden />,
+        onClick: onRemove,
+        className: "text-destructive",
+      },
+    ],
+    [onEdit, onInvoice, onRemove]
+  );
+
+  return (
+    <Card className="flex p-6 h-[300px] w-[440px]">
+      <CardHeader className="space-y-2 px-0 pb-0">
+        <div className="flex items-start justify-between gap-2">
+          <div className="flex flex-1 items-center gap-2">
+            {logoPath ? (
+              <div className="flex size-10 shrink-0 items-center justify-center overflow-hidden">
+                <Image
+                  src={logoPath}
+                  alt={`Logo do cartão ${name}`}
+                  width={42}
+                  height={42}
+                  className={cn(
+                    "rounded-lg",
+                    isInactive && "grayscale opacity-40"
+                  )}
+                />
+              </div>
+            ) : 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">
+                  {name}
+                </h3>
+                {note ? (
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <button
+                        type="button"
+                        className="text-muted-foreground/70 transition-colors hover:text-foreground"
+                        aria-label="Observações do cartão"
+                      >
+                        <RiChat3Line className="size-3.5" />
+                      </button>
+                    </TooltipTrigger>
+                    <TooltipContent side="top" align="start">
+                      {note}
+                    </TooltipContent>
+                  </Tooltip>
+                ) : null}
+              </div>
+
+              {status ? (
+                <span className="text-xs tracking-wide text-muted-foreground">
+                  {status}
+                </span>
+              ) : null}
+            </div>
+          </div>
+
+          {brandAsset ? (
+            <div className="flex items-center justify-center rounded-lg py-1">
+              <Image
+                src={brandAsset}
+                alt={`Bandeira ${brand}`}
+                width={42}
+                height={42}
+                className={cn(
+                  "h-6 w-auto rounded",
+                  isInactive && "grayscale opacity-40"
+                )}
+              />
+            </div>
+          ) : (
+            <span className="text-sm font-medium text-muted-foreground">
+              {brand}
+            </span>
+          )}
+        </div>
+
+        <div className="flex items-center justify-between border-y border-dashed py-3 text-xs font-medium text-muted-foreground sm:text-sm">
+          <span>
+            Fecha dia{" "}
+            <span className="font-semibold text-foreground">
+              {formatDay(closingDay)}
+            </span>
+          </span>
+          <span>
+            Vence dia{" "}
+            <span className="font-semibold text-foreground">
+              {formatDay(dueDay)}
+            </span>
+          </span>
+        </div>
+      </CardHeader>
+
+      <CardContent className="flex flex-1 flex-col gap-5 px-0">
+        {metrics ? (
+          <>
+            <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 font-medium text-muted-foreground">
+                  {metrics[0].label}
+                </span>
+              </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>
+                <span className="text-xs font-medium text-muted-foreground">
+                  {metrics[1].label}
+                </span>
+              </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 font-medium text-muted-foreground">
+                  {metrics[2].label}
+                </span>
+              </div>
+            </div>
+
+            <Progress value={usagePercent} className="h-3" />
+          </>
+        ) : (
+          <p className="text-sm text-muted-foreground">
+            Ainda não há limite registrado para este cartão.
+          </p>
+        )}
+      </CardContent>
+
+      <CardFooter className="mt-auto flex flex-wrap gap-4 px-0 text-sm">
+        {actions.map(({ label, icon, onClick, className }) => (
+          <button
+            key={label}
+            type="button"
+            onClick={onClick}
+            className={cn(
+              "flex items-center gap-1 font-medium transition-opacity hover:opacity-80",
+              className
+            )}
+          >
+            {icon}
+            {label}
+          </button>
+        ))}
+      </CardFooter>
+    </Card>
+  );
+}
diff --git a/components/cartoes/card-select-items.tsx b/components/cartoes/card-select-items.tsx
new file mode 100644
index 0000000..36893a7
--- /dev/null
+++ b/components/cartoes/card-select-items.tsx
@@ -0,0 +1,89 @@
+"use client";
+
+import DotIcon from "@/components/dot-icon";
+import Image from "next/image";
+import { RiBankLine } from "@remixicon/react";
+
+type SelectItemContentProps = {
+  label: string;
+  logo?: string | null;
+};
+
+const resolveLogoSrc = (logo: string | null) => {
+  if (!logo) {
+    return null;
+  }
+
+  const fileName = logo.split("/").filter(Boolean).pop() ?? logo;
+  return `/logos/${fileName}`;
+};
+
+const getBrandLogo = (brand: string): string | null => {
+  const brandMap: Record<string, string> = {
+    Visa: "visa.png",
+    Mastercard: "mastercard.png",
+    Elo: "elo.png",
+  };
+
+  return brandMap[brand] ?? null;
+};
+
+export function BrandSelectContent({ label }: { label: string }) {
+  const brandLogo = getBrandLogo(label);
+  const logoSrc = brandLogo ? `/logos/${brandLogo}` : null;
+
+  return (
+    <span className="flex items-center gap-2">
+      {logoSrc ? (
+        <Image
+          src={logoSrc}
+          alt={`Logo ${label}`}
+          width={24}
+          height={24}
+          className="rounded object-contain"
+        />
+      ) : (
+        <RiBankLine className="size-5 text-muted-foreground" aria-hidden />
+      )}
+      <span>{label}</span>
+    </span>
+  );
+}
+
+export function StatusSelectContent({ label }: { label: string }) {
+  const isActive = label === "Ativo";
+
+  return (
+    <span className="flex items-center gap-2">
+      <DotIcon
+        bg_dot={
+          isActive
+            ? "bg-emerald-600 dark:bg-emerald-300"
+            : "bg-slate-400 dark:bg-slate-500"
+        }
+      />
+      <span>{label}</span>
+    </span>
+  );
+}
+
+export function AccountSelectContent({ label, logo }: SelectItemContentProps) {
+  const logoSrc = resolveLogoSrc(logo);
+
+  return (
+    <span className="flex items-center gap-2">
+      {logoSrc ? (
+        <Image
+          src={logoSrc}
+          alt={`Logo de ${label}`}
+          width={20}
+          height={20}
+          className="rounded"
+        />
+      ) : (
+        <RiBankLine className="size-4 text-muted-foreground" aria-hidden />
+      )}
+      <span>{label}</span>
+    </span>
+  );
+}
diff --git a/components/cartoes/cards-page.tsx b/components/cartoes/cards-page.tsx
new file mode 100644
index 0000000..c565242
--- /dev/null
+++ b/components/cartoes/cards-page.tsx
@@ -0,0 +1,173 @@
+"use client";
+
+import { deleteCardAction } from "@/app/(dashboard)/cartoes/actions";
+import { ConfirmActionDialog } from "@/components/confirm-action-dialog";
+import { EmptyState } from "@/components/empty-state";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { RiAddCircleLine, RiBankCardLine } from "@remixicon/react";
+import { useRouter } from "next/navigation";
+import { useCallback, useMemo, useState } from "react";
+import { toast } from "sonner";
+import { CardDialog } from "./card-dialog";
+import { CardItem } from "./card-item";
+
+type AccountOption = {
+  id: string;
+  name: string;
+};
+
+interface CardsPageProps {
+  cards: Card[];
+  accounts: AccountOption[];
+  logoOptions: string[];
+}
+
+export function CardsPage({ cards, accounts, logoOptions }: CardsPageProps) {
+  const router = useRouter();
+  const [editOpen, setEditOpen] = useState(false);
+  const [selectedCard, setSelectedCard] = useState<Card | null>(null);
+  const [removeOpen, setRemoveOpen] = useState(false);
+  const [cardToRemove, setCardToRemove] = useState<Card | null>(null);
+
+  const hasCards = cards.length > 0;
+
+  const orderedCards = useMemo(
+    () =>
+      [...cards].sort((a, b) => {
+        // Coloca inativos no final
+        const aIsInactive = a.status?.toLowerCase() === "inativo";
+        const bIsInactive = b.status?.toLowerCase() === "inativo";
+
+        if (aIsInactive && !bIsInactive) return 1;
+        if (!aIsInactive && bIsInactive) return -1;
+
+        // Mesma ordem alfabética dentro de cada grupo
+        return a.name.localeCompare(b.name, "pt-BR", { sensitivity: "base" });
+      }),
+    [cards]
+  );
+
+  const handleEdit = useCallback((card: Card) => {
+    setSelectedCard(card);
+    setEditOpen(true);
+  }, []);
+
+  const handleEditOpenChange = useCallback((open: boolean) => {
+    setEditOpen(open);
+    if (!open) {
+      setSelectedCard(null);
+    }
+  }, []);
+
+  const handleRemoveRequest = useCallback((card: Card) => {
+    setCardToRemove(card);
+    setRemoveOpen(true);
+  }, []);
+
+  const handleInvoice = useCallback(
+    (card: Card) => {
+      router.push(`/cartoes/${card.id}/fatura`);
+    },
+    [router]
+  );
+
+  const handleRemoveOpenChange = useCallback((open: boolean) => {
+    setRemoveOpen(open);
+    if (!open) {
+      setCardToRemove(null);
+    }
+  }, []);
+
+  const handleRemoveConfirm = useCallback(async () => {
+    if (!cardToRemove) {
+      return;
+    }
+
+    const result = await deleteCardAction({ id: cardToRemove.id });
+
+    if (result.success) {
+      toast.success(result.message);
+      return;
+    }
+
+    toast.error(result.error);
+    throw new Error(result.error);
+  }, [cardToRemove]);
+
+  const removeTitle = cardToRemove
+    ? `Remover cartão "${cardToRemove.name}"?`
+    : "Remover cartão?";
+
+  return (
+    <>
+      <div className="flex w-full flex-col gap-6">
+        <div className="flex justify-start">
+          <CardDialog
+            mode="create"
+            accounts={accounts}
+            logoOptions={logoOptions}
+            trigger={
+              <Button>
+                <RiAddCircleLine className="size-4" />
+                Novo cartão
+              </Button>
+            }
+          />
+        </div>
+
+        {hasCards ? (
+          <div className="flex flex-wrap gap-4">
+            {orderedCards.map((card) => (
+              <CardItem
+                key={card.id}
+                name={card.name}
+                brand={card.brand}
+                status={card.status}
+                closingDay={card.closingDay}
+                dueDay={card.dueDay}
+                limit={card.limit}
+                limitInUse={card.limitInUse ?? null}
+                limitAvailable={card.limitAvailable ?? card.limit ?? null}
+                contaName={card.contaName}
+                logo={card.logo}
+                note={card.note}
+                onEdit={() => handleEdit(card)}
+                onInvoice={() => handleInvoice(card)}
+                onRemove={() => handleRemoveRequest(card)}
+              />
+            ))}
+          </div>
+        ) : (
+          <Card className="flex w-full items-center justify-center py-12">
+            <EmptyState
+              media={<RiBankCardLine className="size-6 text-primary" />}
+              title="Nenhum cartão cadastrado"
+              description="Adicione seu primeiro cartão para acompanhar limites e faturas com mais controle."
+            />
+          </Card>
+        )}
+      </div>
+
+      <CardDialog
+        mode="update"
+        accounts={accounts}
+        logoOptions={logoOptions}
+        card={selectedCard ?? undefined}
+        open={editOpen && !!selectedCard}
+        onOpenChange={handleEditOpenChange}
+      />
+
+      <ConfirmActionDialog
+        open={removeOpen && !!cardToRemove}
+        onOpenChange={handleRemoveOpenChange}
+        title={removeTitle}
+        description="Ao remover este cartão, os registros relacionados a ele serão excluídos permanentemente."
+        confirmLabel="Remover cartão"
+        pendingLabel="Removendo..."
+        confirmVariant="destructive"
+        onConfirm={handleRemoveConfirm}
+      />
+    </>
+  );
+}
diff --git a/components/cartoes/constants.ts b/components/cartoes/constants.ts
new file mode 100644
index 0000000..a5ba7c6
--- /dev/null
+++ b/components/cartoes/constants.ts
@@ -0,0 +1,7 @@
+export const DEFAULT_CARD_BRANDS = ["Visa", "Mastercard", "Elo"] as const;
+
+export const DEFAULT_CARD_STATUS = ["Ativo", "Inativo"] as const;
+
+export const DAYS_IN_MONTH = Array.from({ length: 31 }, (_, index) =>
+  String(index + 1).padStart(2, "0")
+);
diff --git a/components/cartoes/types.ts b/components/cartoes/types.ts
new file mode 100644
index 0000000..8f69f7d
--- /dev/null
+++ b/components/cartoes/types.ts
@@ -0,0 +1,27 @@
+export type Card = {
+  id: string;
+  name: string;
+  brand: string;
+  status: string;
+  closingDay: string;
+  dueDay: string;
+  note: string | null;
+  logo: string | null;
+  limit: number | null;
+  contaId: string;
+  contaName: string;
+  limitInUse?: number | null;
+  limitAvailable?: number | null;
+};
+
+export type CardFormValues = {
+  name: string;
+  brand: string;
+  status: string;
+  closingDay: string;
+  dueDay: string;
+  limit: string;
+  note: string;
+  logo: string;
+  contaId: string;
+};
diff --git a/components/categorias/categories-page.tsx b/components/categorias/categories-page.tsx
new file mode 100644
index 0000000..672bc9d
--- /dev/null
+++ b/components/categorias/categories-page.tsx
@@ -0,0 +1,167 @@
+"use client";
+
+import { deleteCategoryAction } from "@/app/(dashboard)/categorias/actions";
+import { ConfirmActionDialog } from "@/components/confirm-action-dialog";
+import { Button } from "@/components/ui/button";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import {
+  CATEGORY_TYPE_LABEL,
+  CATEGORY_TYPES,
+} from "@/lib/categorias/constants";
+import { RiAddCircleLine } from "@remixicon/react";
+import { useCallback, useMemo, useState } from "react";
+import { toast } from "sonner";
+import { CategoryCard } from "./category-card";
+import { CategoryDialog } from "./category-dialog";
+import type { Category, CategoryType } from "./types";
+
+interface CategoriesPageProps {
+  categories: Category[];
+}
+
+export function CategoriesPage({ categories }: CategoriesPageProps) {
+  const [activeType, setActiveType] = useState<CategoryType>(CATEGORY_TYPES[0]);
+  const [editOpen, setEditOpen] = useState(false);
+  const [selectedCategory, setSelectedCategory] = useState<Category | null>(
+    null
+  );
+  const [removeOpen, setRemoveOpen] = useState(false);
+  const [categoryToRemove, setCategoryToRemove] = useState<Category | null>(
+    null
+  );
+
+  const categoriesByType = useMemo(() => {
+    const base = Object.fromEntries(
+      CATEGORY_TYPES.map((type) => [type, [] as Category[]])
+    ) as Record<CategoryType, Category[]>;
+
+    categories.forEach((category) => {
+      base[category.type]?.push(category);
+    });
+
+    CATEGORY_TYPES.forEach((type) => {
+      base[type].sort((a, b) =>
+        a.name.localeCompare(b.name, "pt-BR", { sensitivity: "base" })
+      );
+    });
+
+    return base;
+  }, [categories]);
+
+  const handleEdit = useCallback((category: Category) => {
+    setSelectedCategory(category);
+    setEditOpen(true);
+  }, []);
+
+  const handleEditOpenChange = useCallback((open: boolean) => {
+    setEditOpen(open);
+    if (!open) {
+      setSelectedCategory(null);
+    }
+  }, []);
+
+  const handleRemoveRequest = useCallback((category: Category) => {
+    setCategoryToRemove(category);
+    setRemoveOpen(true);
+  }, []);
+
+  const handleRemoveOpenChange = useCallback((open: boolean) => {
+    setRemoveOpen(open);
+    if (!open) {
+      setCategoryToRemove(null);
+    }
+  }, []);
+
+  const handleRemoveConfirm = useCallback(async () => {
+    if (!categoryToRemove) {
+      return;
+    }
+
+    const result = await deleteCategoryAction({ id: categoryToRemove.id });
+
+    if (result.success) {
+      toast.success(result.message);
+      return;
+    }
+
+    toast.error(result.error);
+    throw new Error(result.error);
+  }, [categoryToRemove]);
+
+  const removeTitle = categoryToRemove
+    ? `Remover categoria "${categoryToRemove.name}"?`
+    : "Remover categoria?";
+
+  return (
+    <>
+      <div className="flex w-full flex-col gap-6">
+        <div className="flex justify-start">
+          <CategoryDialog
+            mode="create"
+            defaultType={activeType}
+            trigger={
+              <Button>
+                <RiAddCircleLine className="size-4" />
+                Nova categoria
+              </Button>
+            }
+          />
+        </div>
+
+        <Tabs
+          value={activeType}
+          onValueChange={(value) => setActiveType(value as CategoryType)}
+          className="w-full"
+        >
+          <TabsList>
+            {CATEGORY_TYPES.map((type) => (
+              <TabsTrigger key={type} value={type}>
+                {CATEGORY_TYPE_LABEL[type]}
+              </TabsTrigger>
+            ))}
+          </TabsList>
+
+          {CATEGORY_TYPES.map((type) => (
+            <TabsContent key={type} value={type} className="mt-4">
+              {categoriesByType[type].length === 0 ? (
+                <div className="flex min-h-[280px] items-center justify-center rounded-lg border border-dashed bg-muted/10 p-10 text-center text-sm text-muted-foreground">
+                  Ainda não há categorias de{" "}
+                  {CATEGORY_TYPE_LABEL[type].toLowerCase()}.
+                </div>
+              ) : (
+                <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+                  {categoriesByType[type].map((category) => (
+                    <CategoryCard
+                      key={category.id}
+                      category={category}
+                      onEdit={handleEdit}
+                      onRemove={handleRemoveRequest}
+                    />
+                  ))}
+                </div>
+              )}
+            </TabsContent>
+          ))}
+        </Tabs>
+      </div>
+
+      <CategoryDialog
+        mode="update"
+        category={selectedCategory ?? undefined}
+        open={editOpen && !!selectedCategory}
+        onOpenChange={handleEditOpenChange}
+      />
+
+      <ConfirmActionDialog
+        open={removeOpen && !!categoryToRemove}
+        onOpenChange={handleRemoveOpenChange}
+        title={removeTitle}
+        description="Ao remover esta categoria, os lançamentos associados serão desrelacionados."
+        confirmLabel="Remover categoria"
+        pendingLabel="Removendo..."
+        confirmVariant="destructive"
+        onConfirm={handleRemoveConfirm}
+      />
+    </>
+  );
+}
diff --git a/components/categorias/category-card.tsx b/components/categorias/category-card.tsx
new file mode 100644
index 0000000..7258f2c
--- /dev/null
+++ b/components/categorias/category-card.tsx
@@ -0,0 +1,94 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { RiDeleteBin5Line, RiMore2Fill, RiPencilLine } from "@remixicon/react";
+import Link from "next/link";
+import { TypeBadge } from "../type-badge";
+import { CategoryIcon } from "./category-icon";
+import type { Category } from "./types";
+
+interface CategoryCardProps {
+  category: Category;
+  onEdit: (category: Category) => void;
+  onRemove: (category: Category) => void;
+}
+
+export function CategoryCard({
+  category,
+  onEdit,
+  onRemove,
+}: CategoryCardProps) {
+  // Categorias protegidas que não podem ser editadas ou removidas
+  const categoriasProtegidas = [
+    "Transferência interna",
+    "Saldo inicial",
+    "Pagamentos",
+  ];
+  const isProtegida = categoriasProtegidas.includes(category.name);
+  const canEdit = !isProtegida;
+  const canRemove = !isProtegida;
+
+  return (
+    <Card className="group py-2">
+      <CardContent className="p-2">
+        <div className="flex items-start justify-between gap-3">
+          <div className="flex items-start gap-2">
+            <span className="flex size-11 items-center justify-center text-primary">
+              <CategoryIcon name={category.icon} className="size-6" />
+            </span>
+            <div className="space-y-1">
+              <h3 className="text-base font-medium leading-tight">
+                <Link
+                  href={`/categorias/${category.id}`}
+                  className="underline-offset-4 hover:underline"
+                >
+                  {category.name}
+                </Link>
+              </h3>
+              <div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
+                <TypeBadge type={category.type} />
+              </div>
+            </div>
+          </div>
+
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon-sm"
+                className="opacity-0 transition-opacity group-hover:opacity-100"
+              >
+                <RiMore2Fill className="size-4" />
+                <span className="sr-only">Abrir ações da categoria</span>
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem
+                onSelect={() => onEdit(category)}
+                disabled={!canEdit}
+              >
+                <RiPencilLine className="mr-2 size-4" />
+                Editar
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                variant="destructive"
+                onSelect={() => onRemove(category)}
+                disabled={!canRemove}
+              >
+                <RiDeleteBin5Line className="mr-2 size-4" />
+                Remover
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/components/categorias/category-detail-header.tsx b/components/categorias/category-detail-header.tsx
new file mode 100644
index 0000000..49170d7
--- /dev/null
+++ b/components/categorias/category-detail-header.tsx
@@ -0,0 +1,149 @@
+import { type CategoryType } from "@/lib/categorias/constants";
+import { currencyFormatter } from "@/lib/lancamentos/formatting-helpers";
+import { getIconComponent } from "@/lib/utils/icons";
+import { cn } from "@/lib/utils/ui";
+import { RiArrowDownLine, RiArrowUpLine } from "@remixicon/react";
+import { TypeBadge } from "../type-badge";
+import { Card } from "../ui/card";
+
+const buildInitials = (value: string) => {
+  const parts = value.trim().split(/\s+/).filter(Boolean);
+  if (parts.length === 0) {
+    return "CT";
+  }
+  if (parts.length === 1) {
+    const firstPart = parts[0];
+    return firstPart ? firstPart.slice(0, 2).toUpperCase() : "CT";
+  }
+  const firstChar = parts[0]?.[0] ?? "";
+  const secondChar = parts[1]?.[0] ?? "";
+  return `${firstChar}${secondChar}`.toUpperCase() || "CT";
+};
+
+type CategorySummary = {
+  id: string;
+  name: string;
+  icon: string | null;
+  type: CategoryType;
+};
+
+type CategoryDetailHeaderProps = {
+  category: CategorySummary;
+  currentPeriodLabel: string;
+  previousPeriodLabel: string;
+  currentTotal: number;
+  previousTotal: number;
+  percentageChange: number | null;
+  transactionCount: number;
+};
+
+export function CategoryDetailHeader({
+  category,
+  currentPeriodLabel,
+  previousPeriodLabel,
+  currentTotal,
+  previousTotal,
+  percentageChange,
+  transactionCount,
+}: CategoryDetailHeaderProps) {
+  const IconComponent = category.icon ? getIconComponent(category.icon) : null;
+  const initials = buildInitials(category.name);
+
+  const isIncrease =
+    typeof percentageChange === "number" && percentageChange > 0;
+  const isDecrease =
+    typeof percentageChange === "number" && percentageChange < 0;
+
+  const variationColor =
+    category.type === "receita"
+      ? isIncrease
+        ? "text-emerald-600"
+        : isDecrease
+        ? "text-rose-600"
+        : "text-muted-foreground"
+      : isIncrease
+      ? "text-rose-600"
+      : isDecrease
+      ? "text-emerald-600"
+      : "text-muted-foreground";
+
+  const variationIcon =
+    isIncrease || isDecrease ? (
+      isIncrease ? (
+        <RiArrowUpLine className="size-4" aria-hidden />
+      ) : (
+        <RiArrowDownLine className="size-4" aria-hidden />
+      )
+    ) : null;
+
+  const variationLabel =
+    typeof percentageChange === "number"
+      ? `${percentageChange > 0 ? "+" : ""}${Math.abs(percentageChange).toFixed(
+          1
+        )}%`
+      : "—";
+
+  return (
+    <Card className="px-4">
+      <div className="flex flex-col gap-6 lg:flex-row lg:items-center lg:justify-between">
+        <div className="flex items-start gap-3">
+          <span className="flex size-12 items-center justify-center rounded-xl bg-muted border text-primary">
+            {IconComponent ? (
+              <IconComponent className="size-6" aria-hidden />
+            ) : (
+              <span className="text-sm font-semibold uppercase text-muted-foreground">
+                {initials}
+              </span>
+            )}
+          </span>
+          <div className="space-y-2">
+            <h1 className="text-xl font-semibold leading-tight">
+              {category.name}
+            </h1>
+            <div className="flex flex-wrap items-center gap-2 text-sm text-muted-foreground">
+              <TypeBadge type={category.type} />
+              <span>
+                {transactionCount}{" "}
+                {transactionCount === 1 ? "lançamento" : "lançamentos"} no{" "}
+                período
+              </span>
+            </div>
+          </div>
+        </div>
+
+        <div className="grid w-full gap-4 sm:grid-cols-2 lg:w-auto lg:grid-cols-3">
+          <div>
+            <p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
+              Total em {currentPeriodLabel}
+            </p>
+            <p className="mt-1 text-2xl font-semibold">
+              {currencyFormatter.format(currentTotal)}
+            </p>
+          </div>
+          <div>
+            <p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
+              Total em {previousPeriodLabel}
+            </p>
+            <p className="mt-1 text-lg font-medium text-muted-foreground">
+              {currencyFormatter.format(previousTotal)}
+            </p>
+          </div>
+          <div>
+            <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-xl font-semibold",
+                variationColor
+              )}
+            >
+              {variationIcon}
+              <span>{variationLabel}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Card>
+  );
+}
diff --git a/components/categorias/category-dialog.tsx b/components/categorias/category-dialog.tsx
new file mode 100644
index 0000000..5fab239
--- /dev/null
+++ b/components/categorias/category-dialog.tsx
@@ -0,0 +1,189 @@
+"use client";
+
+import {
+  createCategoryAction,
+  updateCategoryAction,
+} from "@/app/(dashboard)/categorias/actions";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { useControlledState } from "@/hooks/use-controlled-state";
+import { useFormState } from "@/hooks/use-form-state";
+import { CATEGORY_TYPES } from "@/lib/categorias/constants";
+import { getDefaultIconForType } from "@/lib/categorias/icons";
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+  useTransition,
+} from "react";
+import { toast } from "sonner";
+
+import { CategoryFormFields } from "./category-form-fields";
+import type { Category, CategoryFormValues } from "./types";
+
+interface CategoryDialogProps {
+  mode: "create" | "update";
+  trigger?: React.ReactNode;
+  category?: Category;
+  defaultType?: CategoryFormValues["type"];
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}
+
+const buildInitialValues = ({
+  category,
+  defaultType,
+}: {
+  category?: Category;
+  defaultType?: CategoryFormValues["type"];
+}): CategoryFormValues => {
+  const initialType = category?.type ?? defaultType ?? CATEGORY_TYPES[0];
+  const fallbackIcon = getDefaultIconForType(initialType);
+  const existingIcon = category?.icon ?? "";
+  const icon = existingIcon || fallbackIcon;
+
+  return {
+    name: category?.name ?? "",
+    type: initialType,
+    icon,
+  };
+};
+
+export function CategoryDialog({
+  mode,
+  trigger,
+  category,
+  defaultType,
+  open,
+  onOpenChange,
+}: CategoryDialogProps) {
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [isPending, startTransition] = useTransition();
+
+  // Use controlled state hook for dialog open state
+  const [dialogOpen, setDialogOpen] = useControlledState(
+    open,
+    false,
+    onOpenChange
+  );
+
+  const initialState = useMemo(
+    () =>
+      buildInitialValues({
+        category,
+        defaultType,
+      }),
+    [category, defaultType]
+  );
+
+  // Use form state hook for form management
+  const { formState, updateField, setFormState } =
+    useFormState<CategoryFormValues>(initialState);
+
+  // Reset form when dialog opens
+  useEffect(() => {
+    if (dialogOpen) {
+      setFormState(initialState);
+      setErrorMessage(null);
+    }
+  }, [dialogOpen, initialState, setFormState]);
+
+  // Clear error when dialog closes
+  useEffect(() => {
+    if (!dialogOpen) {
+      setErrorMessage(null);
+    }
+  }, [dialogOpen]);
+
+  const handleSubmit = useCallback(
+    (event: React.FormEvent<HTMLFormElement>) => {
+      event.preventDefault();
+      setErrorMessage(null);
+
+      if (mode === "update" && !category?.id) {
+        const message = "Categoria inválida.";
+        setErrorMessage(message);
+        toast.error(message);
+        return;
+      }
+
+      const payload = {
+        name: formState.name.trim(),
+        type: formState.type,
+        icon: formState.icon.trim(),
+      };
+
+      startTransition(async () => {
+        const result =
+          mode === "create"
+            ? await createCategoryAction(payload)
+            : await updateCategoryAction({
+                id: category?.id ?? "",
+                ...payload,
+              });
+
+        if (result.success) {
+          toast.success(result.message);
+          setDialogOpen(false);
+          setFormState(initialState);
+          return;
+        }
+
+        setErrorMessage(result.error);
+        toast.error(result.error);
+      });
+    },
+    [category?.id, formState, initialState, mode, setDialogOpen, setFormState]
+  );
+
+  const title = mode === "create" ? "Nova categoria" : "Editar 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";
+
+  return (
+    <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+      {trigger ? <DialogTrigger asChild>{trigger}</DialogTrigger> : null}
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+          <DialogDescription>{description}</DialogDescription>
+        </DialogHeader>
+
+        <form className="flex flex-col gap-5" onSubmit={handleSubmit}>
+          <CategoryFormFields values={formState} onChange={updateField} />
+
+          {errorMessage && (
+            <p className="text-sm text-destructive">{errorMessage}</p>
+          )}
+
+          <DialogFooter className="gap-3">
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => setDialogOpen(false)}
+              disabled={isPending}
+            >
+              Cancelar
+            </Button>
+            <Button type="submit" disabled={isPending}>
+              {isPending ? "Salvando..." : submitLabel}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/components/categorias/category-form-fields.tsx b/components/categorias/category-form-fields.tsx
new file mode 100644
index 0000000..24fb065
--- /dev/null
+++ b/components/categorias/category-form-fields.tsx
@@ -0,0 +1,128 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  CATEGORY_TYPE_LABEL,
+  CATEGORY_TYPES,
+} from "@/lib/categorias/constants";
+import { getCategoryIconOptions } from "@/lib/categorias/icons";
+import { cn } from "@/lib/utils/ui";
+import { RiMoreLine } from "@remixicon/react";
+import { useState } from "react";
+
+import { CategoryIcon } from "./category-icon";
+import { TypeSelectContent } from "./category-select-items";
+import type { CategoryFormValues } from "./types";
+
+interface CategoryFormFieldsProps {
+  values: CategoryFormValues;
+  onChange: (field: keyof CategoryFormValues, value: string) => void;
+}
+
+export function CategoryFormFields({
+  values,
+  onChange,
+}: CategoryFormFieldsProps) {
+  const [popoverOpen, setPopoverOpen] = useState(false);
+  const iconOptions = getCategoryIconOptions();
+
+  const handleIconSelect = (icon: string) => {
+    onChange("icon", icon);
+    setPopoverOpen(false);
+  };
+
+  return (
+    <div className="grid grid-cols-1 gap-4">
+      <div className="flex flex-col gap-2">
+        <Label htmlFor="category-name">Nome</Label>
+        <Input
+          id="category-name"
+          value={values.name}
+          onChange={(event) => onChange("name", event.target.value)}
+          placeholder="Ex.: Alimentação"
+          required
+        />
+      </div>
+
+      <div className="flex flex-col gap-2">
+        <Label htmlFor="category-type">Tipo da categoria</Label>
+        <Select
+          value={values.type}
+          onValueChange={(value) => onChange("type", value)}
+        >
+          <SelectTrigger id="category-type" className="w-full">
+            <SelectValue placeholder="Selecione o tipo">
+              {values.type && (
+                <TypeSelectContent label={CATEGORY_TYPE_LABEL[values.type]} />
+              )}
+            </SelectValue>
+          </SelectTrigger>
+          <SelectContent>
+            {CATEGORY_TYPES.map((type) => (
+              <SelectItem key={type} value={type}>
+                <TypeSelectContent label={CATEGORY_TYPE_LABEL[type]} />
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+
+      <div className="flex flex-col gap-2">
+        <Label>Ícone</Label>
+        <div className="flex items-center gap-3">
+          <div className="flex size-12 items-center justify-center rounded-lg border bg-muted/30 text-primary">
+            {values.icon ? (
+              <CategoryIcon name={values.icon} className="size-7" />
+            ) : (
+              <RiMoreLine className="size-6 text-muted-foreground" />
+            )}
+          </div>
+          <Popover open={popoverOpen} onOpenChange={setPopoverOpen}>
+            <PopoverTrigger asChild>
+              <Button type="button" variant="outline" className="flex-1">
+                Selecionar ícone
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent className="w-[480px] p-3" align="start">
+              <div className="grid max-h-96 grid-cols-8 gap-2 overflow-y-auto">
+                {iconOptions.map((option) => (
+                  <button
+                    key={option.value}
+                    type="button"
+                    onClick={() => handleIconSelect(option.value)}
+                    className={cn(
+                      "flex size-12 items-center justify-center rounded-lg border transition-all hover:border-primary hover:bg-primary/5",
+                      values.icon === option.value
+                        ? "border-primary bg-primary/10 text-primary"
+                        : "border-border text-muted-foreground hover:text-primary"
+                    )}
+                    title={option.label}
+                  >
+                    <CategoryIcon name={option.value} className="size-6" />
+                  </button>
+                ))}
+              </div>
+            </PopoverContent>
+          </Popover>
+        </div>
+        <p className="text-xs text-muted-foreground">
+          Escolha um ícone que represente melhor esta categoria.
+        </p>
+      </div>
+    </div>
+  );
+}
diff --git a/components/categorias/category-icon.tsx b/components/categorias/category-icon.tsx
new file mode 100644
index 0000000..4498a8b
--- /dev/null
+++ b/components/categorias/category-icon.tsx
@@ -0,0 +1,28 @@
+"use client";
+
+import type { RemixiconComponentType } from "@remixicon/react";
+import * as RemixIcons from "@remixicon/react";
+import { cn } from "@/lib/utils/ui";
+
+const ICONS = RemixIcons as Record<string, RemixiconComponentType | undefined>;
+const FALLBACK_ICON = ICONS["RiPriceTag3Line"];
+
+interface CategoryIconProps {
+  name?: string | null;
+  className?: string;
+}
+
+export function CategoryIcon({ name, className }: CategoryIconProps) {
+  const IconComponent =
+    (name ? ICONS[name] : undefined) ?? FALLBACK_ICON ?? null;
+
+  if (!IconComponent) {
+    return (
+      <span className={cn("text-xs text-muted-foreground", className)}>
+        {name ?? "Categoria"}
+      </span>
+    );
+  }
+
+  return <IconComponent className={cn("size-5", className)} aria-hidden />;
+}
diff --git a/components/categorias/category-select-items.tsx b/components/categorias/category-select-items.tsx
new file mode 100644
index 0000000..6ce2087
--- /dev/null
+++ b/components/categorias/category-select-items.tsx
@@ -0,0 +1,20 @@
+"use client";
+
+import DotIcon from "@/components/dot-icon";
+
+export function TypeSelectContent({ label }: { label: string }) {
+  const isReceita = label === "Receita";
+
+  return (
+    <span className="flex items-center gap-2">
+      <DotIcon
+        bg_dot={
+          isReceita
+            ? "bg-emerald-600 dark:bg-emerald-300"
+            : "bg-rose-600 dark:bg-rose-300"
+        }
+      />
+      <span>{label}</span>
+    </span>
+  );
+}
diff --git a/components/categorias/types.ts b/components/categorias/types.ts
new file mode 100644
index 0000000..816f6e0
--- /dev/null
+++ b/components/categorias/types.ts
@@ -0,0 +1,18 @@
+export {
+  CATEGORY_TYPES,
+  CATEGORY_TYPE_LABEL,
+} from "@/lib/categorias/constants";
+export type { CategoryType } from "@/lib/categorias/constants";
+
+export type Category = {
+  id: string;
+  name: string;
+  type: CategoryType;
+  icon: string | null;
+};
+
+export type CategoryFormValues = {
+  name: string;
+  type: CategoryType;
+  icon: string;
+};
diff --git a/components/confirm-action-dialog.tsx b/components/confirm-action-dialog.tsx
new file mode 100644
index 0000000..dfa7ef0
--- /dev/null
+++ b/components/confirm-action-dialog.tsx
@@ -0,0 +1,116 @@
+"use client";
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
+import { buttonVariants } from "@/components/ui/button";
+import { cn } from "@/lib/utils/ui";
+import { type VariantProps } from "class-variance-authority";
+import { useCallback, useMemo, useState, useTransition } from "react";
+
+interface ConfirmActionDialogProps {
+  trigger?: React.ReactNode;
+  title: string;
+  description?: string;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  pendingLabel?: string;
+  confirmVariant?: VariantProps<typeof buttonVariants>["variant"];
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  onConfirm?: () => Promise<void> | void;
+  disabled?: boolean;
+  className?: string;
+}
+
+export function ConfirmActionDialog({
+  trigger,
+  title,
+  description,
+  confirmLabel = "Confirmar",
+  cancelLabel = "Cancelar",
+  pendingLabel,
+  confirmVariant = "default",
+  open,
+  onOpenChange,
+  onConfirm,
+  disabled = false,
+  className,
+}: ConfirmActionDialogProps) {
+  const [internalOpen, setInternalOpen] = useState(false);
+  const [isPending, startTransition] = useTransition();
+  const dialogOpen = open ?? internalOpen;
+
+  const setDialogOpen = useCallback(
+    (value: boolean) => {
+      if (open === undefined) {
+        setInternalOpen(value);
+      }
+      onOpenChange?.(value);
+    },
+    [onOpenChange, open]
+  );
+
+  const resolvedPendingLabel = useMemo(
+    () => pendingLabel ?? confirmLabel,
+    [pendingLabel, confirmLabel]
+  );
+
+  const handleConfirm = useCallback(() => {
+    if (!onConfirm) {
+      setDialogOpen(false);
+      return;
+    }
+
+    startTransition(async () => {
+      try {
+        await onConfirm();
+        setDialogOpen(false);
+      } catch {
+        // Mantém o diálogo aberto para que o chamador trate o erro.
+      }
+    });
+  }, [onConfirm, setDialogOpen]);
+
+  return (
+    <AlertDialog open={dialogOpen} onOpenChange={setDialogOpen}>
+      {trigger ? (
+        <AlertDialogTrigger asChild>{trigger}</AlertDialogTrigger>
+      ) : null}
+      <AlertDialogContent className={className}>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{title}</AlertDialogTitle>
+          {description ? (
+            <AlertDialogDescription>{description}</AlertDialogDescription>
+          ) : null}
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel
+            disabled={isPending || disabled}
+            className="w-full sm:w-auto"
+          >
+            {cancelLabel}
+          </AlertDialogCancel>
+          <AlertDialogAction
+            onClick={handleConfirm}
+            disabled={isPending || disabled}
+            className={cn(
+              buttonVariants({ variant: confirmVariant }),
+              "w-full sm:w-auto"
+            )}
+          >
+            {isPending ? resolvedPendingLabel : confirmLabel}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}
diff --git a/components/contas/account-card.tsx b/components/contas/account-card.tsx
new file mode 100644
index 0000000..ba0fac2
--- /dev/null
+++ b/components/contas/account-card.tsx
@@ -0,0 +1,128 @@
+"use client";
+
+import { cn } from "@/lib/utils/ui";
+import {
+  RiArrowLeftRightLine,
+  RiDeleteBin5Line,
+  RiEyeOffLine,
+  RiFileList2Line,
+  RiPencilLine,
+} from "@remixicon/react";
+import type React from "react";
+import MoneyValues from "../money-values";
+import { Card, CardContent, CardFooter } from "../ui/card";
+
+interface AccountCardProps {
+  accountName: string;
+  accountType: string;
+  balance: number;
+  status?: string;
+  icon?: React.ReactNode;
+  excludeFromBalance?: boolean;
+  onViewStatement?: () => void;
+  onEdit?: () => void;
+  onRemove?: () => void;
+  onTransfer?: () => void;
+  className?: string;
+}
+
+export function AccountCard({
+  accountName,
+  accountType,
+  balance,
+  status,
+  icon,
+  excludeFromBalance,
+  onViewStatement,
+  onEdit,
+  onRemove,
+  onTransfer,
+  className,
+}: AccountCardProps) {
+  const isInactive = status?.toLowerCase() === "inativa";
+
+  const actions = [
+    {
+      label: "editar",
+      icon: <RiPencilLine className="size-4" aria-hidden />,
+      onClick: onEdit,
+      variant: "default" as const,
+    },
+    {
+      label: "extrato",
+      icon: <RiFileList2Line className="size-4" aria-hidden />,
+      onClick: onViewStatement,
+      variant: "default" as const,
+    },
+    {
+      label: "transferir",
+      icon: <RiArrowLeftRightLine className="size-4" aria-hidden />,
+      onClick: onTransfer,
+      variant: "default" as const,
+    },
+    {
+      label: "remover",
+      icon: <RiDeleteBin5Line className="size-4" aria-hidden />,
+      onClick: onRemove,
+      variant: "destructive" as const,
+    },
+  ].filter((action) => typeof action.onClick === "function");
+
+  return (
+    <Card className={cn("h-full w-96 gap-0", className)}>
+      <CardContent className="flex flex-1 flex-col gap-4">
+        <div className="flex items-center gap-2">
+          {icon ? (
+            <div
+              className={cn(
+                "flex items-center justify-center",
+                isInactive && "[&_img]:grayscale [&_img]:opacity-40"
+              )}
+            >
+              {icon}
+            </div>
+          ) : null}
+          <h2 className="text-lg font-semibold text-foreground">
+            {accountName}
+          </h2>
+          {excludeFromBalance ? (
+            <div
+              className="flex items-center gap-1 text-muted-foreground"
+              title="Excluída do saldo geral"
+            >
+              <RiEyeOffLine className="size-4" aria-hidden />
+            </div>
+          ) : null}
+        </div>
+
+        <div className="space-y-1">
+          <p className="text-sm text-muted-foreground">Saldo</p>
+          <p className="text-3xl text-foreground">
+            <MoneyValues amount={balance} className="text-3xl" />
+          </p>
+          <p className="text-sm text-muted-foreground">{accountType}</p>
+        </div>
+      </CardContent>
+
+      {actions.length > 0 ? (
+        <CardFooter className="flex flex-wrap gap-3 px-6 pt-6 text-sm">
+          {actions.map(({ label, icon, onClick, variant }) => (
+            <button
+              key={label}
+              type="button"
+              onClick={onClick}
+              className={cn(
+                "flex items-center gap-1 font-medium transition-opacity hover:opacity-80",
+                variant === "destructive" ? "text-destructive" : "text-primary"
+              )}
+              aria-label={`${label} conta`}
+            >
+              {icon}
+              {label}
+            </button>
+          ))}
+        </CardFooter>
+      ) : null}
+    </Card>
+  );
+}
diff --git a/components/contas/account-dialog.tsx b/components/contas/account-dialog.tsx
new file mode 100644
index 0000000..bd81bcb
--- /dev/null
+++ b/components/contas/account-dialog.tsx
@@ -0,0 +1,268 @@
+"use client";
+
+import {
+  createAccountAction,
+  updateAccountAction,
+} from "@/app/(dashboard)/contas/actions";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+  useTransition,
+} from "react";
+import { toast } from "sonner";
+
+import { LogoPickerDialog, LogoPickerTrigger } from "@/components/logo-picker";
+import { useControlledState } from "@/hooks/use-controlled-state";
+import { useFormState } from "@/hooks/use-form-state";
+import { useLogoSelection } from "@/hooks/use-logo-selection";
+import { deriveNameFromLogo, normalizeLogo } from "@/lib/logo";
+import { formatInitialBalanceInput } from "@/lib/utils/currency";
+
+import { AccountFormFields } from "./account-form-fields";
+import type { Account, AccountFormValues } from "./types";
+
+const DEFAULT_ACCOUNT_TYPES = [
+  "Conta Corrente",
+  "Conta Poupança",
+  "Carteira Digital",
+  "Conta Investimento",
+  "Cartão Pré-pago",
+] as const;
+
+const DEFAULT_ACCOUNT_STATUS = ["Ativa", "Inativa"] as const;
+
+interface AccountDialogProps {
+  mode: "create" | "update";
+  trigger?: React.ReactNode;
+  logoOptions: string[];
+  account?: Account;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}
+
+const buildInitialValues = ({
+  account,
+  logoOptions,
+  accountTypes,
+  accountStatuses,
+}: {
+  account?: Account;
+  logoOptions: string[];
+  accountTypes: string[];
+  accountStatuses: string[];
+}): AccountFormValues => {
+  const fallbackLogo = logoOptions[0] ?? "";
+  const selectedLogo = normalizeLogo(account?.logo) || fallbackLogo;
+  const derivedName = deriveNameFromLogo(selectedLogo);
+
+  return {
+    name: account?.name ?? derivedName,
+    accountType: account?.accountType ?? accountTypes[0] ?? "",
+    status: account?.status ?? accountStatuses[0] ?? "",
+    note: account?.note ?? "",
+    logo: selectedLogo,
+    initialBalance: formatInitialBalanceInput(account?.initialBalance ?? 0),
+    excludeFromBalance: account?.excludeFromBalance ?? false,
+  };
+};
+
+export function AccountDialog({
+  mode,
+  trigger,
+  logoOptions,
+  account,
+  open,
+  onOpenChange,
+}: AccountDialogProps) {
+  const [logoDialogOpen, setLogoDialogOpen] = useState(false);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [isPending, startTransition] = useTransition();
+
+  // Use controlled state hook for dialog open state
+  const [dialogOpen, setDialogOpen] = useControlledState(
+    open,
+    false,
+    onOpenChange
+  );
+
+  const accountTypes = useMemo(() => {
+    const values = new Set<string>(DEFAULT_ACCOUNT_TYPES);
+    if (account?.accountType) {
+      values.add(account.accountType);
+    }
+    return Array.from(values);
+  }, [account?.accountType]);
+
+  const accountStatuses = useMemo(() => {
+    const values = new Set<string>(DEFAULT_ACCOUNT_STATUS);
+    if (account?.status) {
+      values.add(account.status);
+    }
+    return Array.from(values);
+  }, [account?.status]);
+
+  const initialState = useMemo(
+    () =>
+      buildInitialValues({
+        account,
+        logoOptions,
+        accountTypes,
+        accountStatuses,
+      }),
+    [account, logoOptions, accountTypes, accountStatuses]
+  );
+
+  // Use form state hook for form management
+  const { formState, updateField, updateFields, setFormState } =
+    useFormState<AccountFormValues>(initialState);
+
+  // Reset form when dialog opens
+  useEffect(() => {
+    if (dialogOpen) {
+      setFormState(initialState);
+      setErrorMessage(null);
+    }
+  }, [dialogOpen, initialState, setFormState]);
+
+  // Close logo dialog when main dialog closes
+  useEffect(() => {
+    if (!dialogOpen) {
+      setErrorMessage(null);
+      setLogoDialogOpen(false);
+    }
+  }, [dialogOpen]);
+
+  // Use logo selection hook
+  const handleLogoSelection = useLogoSelection({
+    mode,
+    currentLogo: formState.logo,
+    currentName: formState.name,
+    onUpdate: (updates) => {
+      updateFields(updates);
+      setLogoDialogOpen(false);
+    },
+  });
+
+  const handleSubmit = useCallback(
+    (event: React.FormEvent<HTMLFormElement>) => {
+      event.preventDefault();
+      setErrorMessage(null);
+
+      if (mode === "update" && !account?.id) {
+        const message = "Conta inválida.";
+        setErrorMessage(message);
+        toast.error(message);
+        return;
+      }
+
+      const payload = { ...formState };
+
+      if (!payload.logo) {
+        setErrorMessage("Selecione um logo.");
+        return;
+      }
+
+      startTransition(async () => {
+        const result =
+          mode === "create"
+            ? await createAccountAction(payload)
+            : await updateAccountAction({
+                id: account?.id ?? "",
+                ...payload,
+              });
+
+        if (result.success) {
+          toast.success(result.message);
+          setDialogOpen(false);
+          setFormState(initialState);
+          return;
+        }
+
+        setErrorMessage(result.error);
+        toast.error(result.error);
+      });
+    },
+    [account?.id, formState, initialState, mode, setDialogOpen, setFormState]
+  );
+
+  const title = mode === "create" ? "Nova conta" : "Editar 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";
+
+  return (
+    <>
+      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+        {trigger ? <DialogTrigger asChild>{trigger}</DialogTrigger> : null}
+        <DialogContent className="sm:max-w-xl">
+          <DialogHeader>
+            <DialogTitle>{title}</DialogTitle>
+            <DialogDescription>{description}</DialogDescription>
+          </DialogHeader>
+
+          <form className="flex flex-col gap-5" onSubmit={handleSubmit}>
+            <div className="flex flex-col gap-2">
+              <LogoPickerTrigger
+                selectedLogo={formState.logo}
+                disabled={logoOptions.length === 0}
+                onOpen={() => {
+                  if (logoOptions.length > 0) {
+                    setLogoDialogOpen(true);
+                  }
+                }}
+              />
+            </div>
+
+            <AccountFormFields
+              values={formState}
+              accountTypes={accountTypes}
+              accountStatuses={accountStatuses}
+              onChange={updateField}
+              showInitialBalance={mode === "create"}
+            />
+
+            {errorMessage && (
+              <p className="text-sm text-destructive">{errorMessage}</p>
+            )}
+
+            <DialogFooter className="gap-3">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => setDialogOpen(false)}
+                disabled={isPending}
+              >
+                Cancelar
+              </Button>
+              <Button type="submit" disabled={isPending}>
+                {isPending ? "Salvando..." : submitLabel}
+              </Button>
+            </DialogFooter>
+          </form>
+        </DialogContent>
+      </Dialog>
+
+      <LogoPickerDialog
+        open={logoDialogOpen}
+        logos={logoOptions}
+        value={formState.logo}
+        onOpenChange={setLogoDialogOpen}
+        onSelect={handleLogoSelection}
+      />
+    </>
+  );
+}
diff --git a/components/contas/account-form-fields.tsx b/components/contas/account-form-fields.tsx
new file mode 100644
index 0000000..0efa008
--- /dev/null
+++ b/components/contas/account-form-fields.tsx
@@ -0,0 +1,123 @@
+"use client";
+
+import { CurrencyInput } from "@/components/ui/currency-input";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+import { Checkbox } from "@/components/ui/checkbox";
+import { StatusSelectContent } from "./account-select-items";
+
+import type { AccountFormValues } from "./types";
+
+interface AccountFormFieldsProps {
+  values: AccountFormValues;
+  accountTypes: string[];
+  accountStatuses: string[];
+  onChange: (field: keyof AccountFormValues, value: string) => void;
+  showInitialBalance?: boolean;
+}
+
+export function AccountFormFields({
+  values,
+  accountTypes,
+  accountStatuses,
+  onChange,
+  showInitialBalance = true,
+}: AccountFormFieldsProps) {
+  return (
+    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+      <div className="flex flex-col gap-2">
+        <Label htmlFor="account-name">Nome</Label>
+        <Input
+          id="account-name"
+          value={values.name}
+          onChange={(event) => onChange("name", event.target.value)}
+          placeholder="Ex.: Nubank"
+          required
+        />
+      </div>
+
+      <div className="flex flex-col gap-2">
+        <Label htmlFor="account-type">Tipo de conta</Label>
+        <Select
+          value={values.accountType}
+          onValueChange={(value) => onChange("accountType", value)}
+        >
+          <SelectTrigger id="account-type" className="w-full">
+            <SelectValue placeholder="Selecione o tipo" />
+          </SelectTrigger>
+          <SelectContent>
+            {accountTypes.map((type) => (
+              <SelectItem key={type} value={type}>
+                {type}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+
+      <div className="flex flex-col gap-2 sm:col-span-2">
+        <Label htmlFor="account-status">Status</Label>
+        <Select
+          value={values.status}
+          onValueChange={(value) => onChange("status", value)}
+        >
+          <SelectTrigger id="account-status" className="w-full">
+            <SelectValue placeholder="Selecione o status">
+              {values.status && <StatusSelectContent label={values.status} />}
+            </SelectValue>
+          </SelectTrigger>
+          <SelectContent>
+            {accountStatuses.map((status) => (
+              <SelectItem key={status} value={status}>
+                <StatusSelectContent label={status} />
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+
+      {showInitialBalance ? (
+        <div className="flex flex-col gap-2 sm:col-span-2">
+          <Label htmlFor="account-initial-balance">Saldo inicial</Label>
+          <CurrencyInput
+            id="account-initial-balance"
+            value={values.initialBalance}
+            onValueChange={(value) => onChange("initialBalance", value)}
+            placeholder="R$ 0,00"
+          />
+        </div>
+      ) : null}
+
+      <div className="flex flex-col gap-2 sm:col-span-2">
+        <Label htmlFor="account-note">Anotação</Label>
+        <Textarea
+          id="account-note"
+          value={values.note}
+          onChange={(event) => onChange("note", event.target.value)}
+          placeholder="Informações adicionais sobre a conta"
+        />
+      </div>
+
+      <div className="flex items-center gap-2 sm:col-span-2">
+        <Checkbox
+          id="exclude-from-balance"
+          checked={values.excludeFromBalance}
+          onCheckedChange={(checked) =>
+            onChange("excludeFromBalance", checked ? "true" : "false")
+          }
+        />
+        <Label htmlFor="exclude-from-balance" className="cursor-pointer text-sm font-normal">
+          Excluir do saldo total (útil para contas de investimento ou reserva)
+        </Label>
+      </div>
+    </div>
+  );
+}
diff --git a/components/contas/account-select-items.tsx b/components/contas/account-select-items.tsx
new file mode 100644
index 0000000..2bfe6d1
--- /dev/null
+++ b/components/contas/account-select-items.tsx
@@ -0,0 +1,20 @@
+"use client";
+
+import DotIcon from "@/components/dot-icon";
+
+export function StatusSelectContent({ label }: { label: string }) {
+  const isActive = label === "Ativa";
+
+  return (
+    <span className="flex items-center gap-2">
+      <DotIcon
+        bg_dot={
+          isActive
+            ? "bg-emerald-600 dark:bg-emerald-300"
+            : "bg-slate-400 dark:bg-slate-500"
+        }
+      />
+      <span>{label}</span>
+    </span>
+  );
+}
diff --git a/components/contas/account-statement-card.tsx b/components/contas/account-statement-card.tsx
new file mode 100644
index 0000000..9b302d5
--- /dev/null
+++ b/components/contas/account-statement-card.tsx
@@ -0,0 +1,219 @@
+"use client";
+import MoneyValues from "@/components/money-values";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils/ui";
+import { RiInformationLine } from "@remixicon/react";
+import Image from "next/image";
+import { useMemo, type ReactNode } from "react";
+
+type DetailValue = string | number | ReactNode;
+
+type AccountStatementCardProps = {
+  accountName: string;
+  accountType: string;
+  status: string;
+  periodLabel: string;
+  currentBalance: number;
+  openingBalance: number;
+  totalIncomes: number;
+  totalExpenses: number;
+  logo?: string | null;
+  actions?: React.ReactNode;
+};
+
+const resolveLogoPath = (logo?: string | null) => {
+  if (!logo) return null;
+  if (
+    logo.startsWith("http://") ||
+    logo.startsWith("https://") ||
+    logo.startsWith("data:")
+  ) {
+    return logo;
+  }
+
+  return logo.startsWith("/") ? logo : `/logos/${logo}`;
+};
+
+const getAccountStatusBadgeVariant = (
+  status: string
+): "success" | "secondary" => {
+  const normalizedStatus = status.toLowerCase();
+  if (normalizedStatus === "ativa") {
+    return "success";
+  }
+  return "outline";
+};
+
+export function AccountStatementCard({
+  accountName,
+  accountType,
+  status,
+  periodLabel,
+  currentBalance,
+  openingBalance,
+  totalIncomes,
+  totalExpenses,
+  logo,
+  actions,
+}: AccountStatementCardProps) {
+  const logoPath = useMemo(() => resolveLogoPath(logo), [logo]);
+
+  const formatCurrency = (value: number) =>
+    value.toLocaleString("pt-BR", {
+      style: "currency",
+      currency: "BRL",
+    });
+
+  return (
+    <Card className="border">
+      <CardHeader className="flex flex-col gap-3">
+        <div className="flex items-start gap-3">
+          {logoPath ? (
+            <div className="flex size-12 shrink-0 items-center justify-center overflow-hidden rounded-lg border border-border/60 bg-background">
+              <Image
+                src={logoPath}
+                alt={`Logo da conta ${accountName}`}
+                width={48}
+                height={48}
+                className="h-full w-full object-contain"
+              />
+            </div>
+          ) : null}
+
+          <div className="flex w-full items-start justify-between gap-3">
+            <div className="space-y-1">
+              <CardTitle className="text-xl font-semibold text-foreground">
+                {accountName}
+              </CardTitle>
+              <p className="text-sm text-muted-foreground">
+                Extrato de {periodLabel}
+              </p>
+            </div>
+            {actions ? <div className="shrink-0">{actions}</div> : null}
+          </div>
+        </div>
+      </CardHeader>
+
+      <CardContent className="space-y-4 border-t border-border/60 border-dashed pt-4">
+        {/* Destaque Principal */}
+        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+          <DetailItem
+            label="Saldo atual"
+            value={<MoneyValues amount={currentBalance} className="text-2xl" />}
+            tooltip="Saldo inicial do período + entradas - saídas realizadas neste mês."
+          />
+          <DetailItem
+            label="Status da conta"
+            value={
+              <div className="flex items-center">
+                <Badge
+                  variant={getAccountStatusBadgeVariant(status)}
+                  className="text-xs"
+                >
+                  {status}
+                </Badge>
+              </div>
+            }
+            tooltip="Indica se a conta está ativa para lançamentos ou foi desativada."
+          />
+        </div>
+
+        {/* Movimentação do Período */}
+        <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
+          <DetailItem
+            label="Saldo inicial"
+            value={
+              <MoneyValues
+                amount={openingBalance}
+                className="font-medium text-foreground"
+              />
+            }
+            tooltip="Saldo inicial cadastrado na conta somado aos lançamentos pagos anteriores a este mês."
+          />
+          <DetailItem
+            label="Entradas"
+            value={
+              <span className="font-medium text-emerald-600">
+                {formatCurrency(totalIncomes)}
+              </span>
+            }
+            tooltip="Total de receitas deste mês classificadas como pagas para esta conta."
+          />
+          <DetailItem
+            label="Saídas"
+            value={
+              <span className="font-medium text-destructive">
+                {formatCurrency(totalExpenses)}
+              </span>
+            }
+            tooltip="Total de despesas pagas neste mês (considerando divisão entre pagadores)."
+          />
+          <DetailItem
+            label="Resultado"
+            value={
+              <MoneyValues
+                amount={totalIncomes - totalExpenses}
+                className={cn(
+                  "font-semibold",
+                  totalIncomes - totalExpenses >= 0
+                    ? "text-emerald-600"
+                    : "text-destructive"
+                )}
+              />
+            }
+            tooltip="Diferença entre entradas e saídas do mês; positivo indica saldo crescente."
+          />
+        </div>
+
+        {/* Informações da Conta */}
+        <DetailItem
+          label="Tipo da conta"
+          value={accountType}
+          tooltip="Classificação definida na criação da conta (corrente, poupança, etc.)."
+          className="sm:w-1/2"
+        />
+      </CardContent>
+    </Card>
+  );
+}
+
+function DetailItem({
+  label,
+  value,
+  className,
+  tooltip,
+}: {
+  label: string;
+  value: DetailValue;
+  className?: string;
+  tooltip?: string;
+}) {
+  return (
+    <div className={cn("space-y-1", className)}>
+      <span className="flex items-center gap-1 text-xs font-medium uppercase text-muted-foreground/80">
+        {label}
+        {tooltip ? (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <RiInformationLine className="size-3.5 cursor-help text-muted-foreground/60" />
+            </TooltipTrigger>
+            <TooltipContent
+              side="top"
+              align="start"
+              className="max-w-xs text-xs"
+            >
+              {tooltip}
+            </TooltipContent>
+          </Tooltip>
+        ) : null}
+      </span>
+      <div className="text-base text-foreground">{value}</div>
+    </div>
+  );
+}
diff --git a/components/contas/accounts-page.tsx b/components/contas/accounts-page.tsx
new file mode 100644
index 0000000..13f7591
--- /dev/null
+++ b/components/contas/accounts-page.tsx
@@ -0,0 +1,206 @@
+"use client";
+
+import { deleteAccountAction } from "@/app/(dashboard)/contas/actions";
+import { ConfirmActionDialog } from "@/components/confirm-action-dialog";
+import { AccountCard } from "@/components/contas/account-card";
+import { EmptyState } from "@/components/empty-state";
+import { Button } from "@/components/ui/button";
+import { getCurrentPeriod } from "@/lib/utils/period";
+import { RiAddCircleLine, RiBankLine } from "@remixicon/react";
+import Image from "next/image";
+import { useRouter } from "next/navigation";
+import { useCallback, useMemo, useState } from "react";
+import { toast } from "sonner";
+import { Card } from "../ui/card";
+import { AccountDialog } from "./account-dialog";
+import { TransferDialog } from "./transfer-dialog";
+import type { Account } from "./types";
+
+interface AccountsPageProps {
+  accounts: Account[];
+  logoOptions: string[];
+}
+
+const resolveLogoSrc = (logo: string | null) => {
+  if (!logo) {
+    return undefined;
+  }
+
+  const fileName = logo.split("/").filter(Boolean).pop() ?? logo;
+  return `/logos/${fileName}`;
+};
+
+export function AccountsPage({ accounts, logoOptions }: AccountsPageProps) {
+  const router = useRouter();
+  const [editOpen, setEditOpen] = useState(false);
+  const [selectedAccount, setSelectedAccount] = useState<Account | null>(null);
+  const [removeOpen, setRemoveOpen] = useState(false);
+  const [accountToRemove, setAccountToRemove] = useState<Account | null>(null);
+  const [transferOpen, setTransferOpen] = useState(false);
+  const [transferFromAccount, setTransferFromAccount] =
+    useState<Account | null>(null);
+
+  const hasAccounts = accounts.length > 0;
+
+  const orderedAccounts = useMemo(() => {
+    return [...accounts].sort((a, b) => {
+      // Coloca inativas no final
+      const aIsInactive = a.status?.toLowerCase() === "inativa";
+      const bIsInactive = b.status?.toLowerCase() === "inativa";
+
+      if (aIsInactive && !bIsInactive) return 1;
+      if (!aIsInactive && bIsInactive) return -1;
+
+      // Mesma ordem alfabética dentro de cada grupo
+      return a.name.localeCompare(b.name, "pt-BR", { sensitivity: "base" });
+    });
+  }, [accounts]);
+
+  const handleEdit = useCallback((account: Account) => {
+    setSelectedAccount(account);
+    setEditOpen(true);
+  }, []);
+
+  const handleEditOpenChange = useCallback((open: boolean) => {
+    setEditOpen(open);
+    if (!open) {
+      setSelectedAccount(null);
+    }
+  }, []);
+
+  const handleRemoveRequest = useCallback((account: Account) => {
+    setAccountToRemove(account);
+    setRemoveOpen(true);
+  }, []);
+
+  const handleRemoveOpenChange = useCallback((open: boolean) => {
+    setRemoveOpen(open);
+    if (!open) {
+      setAccountToRemove(null);
+    }
+  }, []);
+
+  const handleRemoveConfirm = useCallback(async () => {
+    if (!accountToRemove) {
+      return;
+    }
+
+    const result = await deleteAccountAction({ id: accountToRemove.id });
+
+    if (result.success) {
+      toast.success(result.message);
+      return;
+    }
+
+    toast.error(result.error);
+    throw new Error(result.error);
+  }, [accountToRemove]);
+
+  const handleTransferRequest = useCallback((account: Account) => {
+    setTransferFromAccount(account);
+    setTransferOpen(true);
+  }, []);
+
+  const handleTransferOpenChange = useCallback((open: boolean) => {
+    setTransferOpen(open);
+    if (!open) {
+      setTransferFromAccount(null);
+    }
+  }, []);
+
+  const removeTitle = accountToRemove
+    ? `Remover conta "${accountToRemove.name}"?`
+    : "Remover conta?";
+
+  return (
+    <>
+      <div className="flex w-full flex-col gap-6">
+        <div className="flex justify-start">
+          <AccountDialog
+            mode="create"
+            logoOptions={logoOptions}
+            trigger={
+              <Button>
+                <RiAddCircleLine className="size-4" />
+                Nova conta
+              </Button>
+            }
+          />
+        </div>
+
+        {hasAccounts ? (
+          <div className="flex flex-wrap gap-4">
+            {orderedAccounts.map((account) => {
+              const logoSrc = resolveLogoSrc(account.logo);
+
+              return (
+                <AccountCard
+                  key={account.id}
+                  accountName={account.name}
+                  accountType={`${account.accountType} • ${account.status}`}
+                  balance={account.balance ?? account.initialBalance ?? 0}
+                  status={account.status}
+                  excludeFromBalance={account.excludeFromBalance}
+                  icon={
+                    logoSrc ? (
+                      <Image
+                        src={logoSrc}
+                        alt={`Logo da conta ${account.name}`}
+                        width={42}
+                        height={42}
+                        className="rounded-lg"
+                      />
+                    ) : undefined
+                  }
+                  onEdit={() => handleEdit(account)}
+                  onRemove={() => handleRemoveRequest(account)}
+                  onTransfer={() => handleTransferRequest(account)}
+                  onViewStatement={() =>
+                    router.push(`/contas/${account.id}/extrato`)
+                  }
+                />
+              );
+            })}
+          </div>
+        ) : (
+          <Card className="flex min-h-[50vh] w-full items-center justify-center py-12">
+            <EmptyState
+              media={<RiBankLine className="size-6 text-primary" />}
+              title="Nenhuma conta cadastrada"
+              description="Cadastre sua primeira conta para começar a organizar os lançamentos."
+            />
+          </Card>
+        )}
+      </div>
+
+      <AccountDialog
+        mode="update"
+        logoOptions={logoOptions}
+        account={selectedAccount ?? undefined}
+        open={editOpen && !!selectedAccount}
+        onOpenChange={handleEditOpenChange}
+      />
+
+      <ConfirmActionDialog
+        open={removeOpen && !!accountToRemove}
+        onOpenChange={handleRemoveOpenChange}
+        title={removeTitle}
+        description="Ao remover esta conta, todos os dados relacionados a ela serão perdidos."
+        confirmLabel="Remover conta"
+        pendingLabel="Removendo..."
+        confirmVariant="destructive"
+        onConfirm={handleRemoveConfirm}
+      />
+
+      {transferFromAccount && (
+        <TransferDialog
+          accounts={accounts}
+          fromAccountId={transferFromAccount.id}
+          currentPeriod={getCurrentPeriod()}
+          open={transferOpen}
+          onOpenChange={handleTransferOpenChange}
+        />
+      )}
+    </>
+  );
+}
diff --git a/components/contas/transfer-dialog.tsx b/components/contas/transfer-dialog.tsx
new file mode 100644
index 0000000..4e601a7
--- /dev/null
+++ b/components/contas/transfer-dialog.tsx
@@ -0,0 +1,223 @@
+"use client";
+
+import { transferBetweenAccountsAction } from "@/app/(dashboard)/contas/actions";
+import type { AccountData } from "@/app/(dashboard)/contas/data";
+import { Button } from "@/components/ui/button";
+import { CurrencyInput } from "@/components/ui/currency-input";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { useControlledState } from "@/hooks/use-controlled-state";
+import { formatDateForDb } from "@/lib/utils/date";
+import { useMemo, useState, useTransition } from "react";
+import { toast } from "sonner";
+
+interface TransferDialogProps {
+  trigger?: React.ReactNode;
+  accounts: AccountData[];
+  fromAccountId: string;
+  currentPeriod: string;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}
+
+export function TransferDialog({
+  trigger,
+  accounts,
+  fromAccountId,
+  currentPeriod,
+  open,
+  onOpenChange,
+}: TransferDialogProps) {
+  const [dialogOpen, setDialogOpen] = useControlledState(
+    open,
+    false,
+    onOpenChange
+  );
+
+  const [isPending, startTransition] = useTransition();
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+
+  // Form state
+  const [toAccountId, setToAccountId] = useState("");
+  const [amount, setAmount] = useState("");
+  const [date, setDate] = useState(formatDateForDb(new Date()));
+  const [period, setPeriod] = useState(currentPeriod);
+
+  // Available destination accounts (exclude source account)
+  const availableAccounts = useMemo(
+    () => accounts.filter((account) => account.id !== fromAccountId),
+    [accounts, fromAccountId]
+  );
+
+  // Source account info
+  const fromAccount = useMemo(
+    () => accounts.find((account) => account.id === fromAccountId),
+    [accounts, fromAccountId]
+  );
+
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setErrorMessage(null);
+
+    if (!toAccountId) {
+      setErrorMessage("Selecione a conta de destino.");
+      return;
+    }
+
+    if (toAccountId === fromAccountId) {
+      setErrorMessage("Selecione uma conta de destino diferente da origem.");
+      return;
+    }
+
+    if (!amount || parseFloat(amount.replace(",", ".")) <= 0) {
+      setErrorMessage("Informe um valor válido maior que zero.");
+      return;
+    }
+
+    startTransition(async () => {
+      const result = await transferBetweenAccountsAction({
+        fromAccountId,
+        toAccountId,
+        amount,
+        date: new Date(date),
+        period,
+      });
+
+      if (result.success) {
+        toast.success(result.message);
+        setDialogOpen(false);
+        // Reset form
+        setToAccountId("");
+        setAmount("");
+        setDate(formatDateForDb(new Date()));
+        setPeriod(currentPeriod);
+        return;
+      }
+
+      setErrorMessage(result.error);
+      toast.error(result.error);
+    });
+  };
+
+  return (
+    <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+      {trigger ? <DialogTrigger asChild>{trigger}</DialogTrigger> : null}
+      <DialogContent className="sm:max-w-xl">
+        <DialogHeader>
+          <DialogTitle>Transferir entre contas</DialogTitle>
+          <DialogDescription>
+            Registre uma transferência de valores entre suas contas.
+          </DialogDescription>
+        </DialogHeader>
+
+        <form className="flex flex-col gap-5" onSubmit={handleSubmit}>
+          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+            <div className="flex flex-col gap-2">
+              <Label htmlFor="transfer-date">Data da transferência</Label>
+              <Input
+                id="transfer-date"
+                type="date"
+                value={date}
+                onChange={(e) => setDate(e.target.value)}
+                required
+              />
+            </div>
+
+            <div className="flex flex-col gap-2">
+              <Label htmlFor="transfer-period">Período</Label>
+              <Input
+                id="transfer-period"
+                type="month"
+                value={period}
+                onChange={(e) => setPeriod(e.target.value)}
+                placeholder="AAAA-MM"
+                required
+              />
+            </div>
+
+            <div className="flex flex-col gap-2 sm:col-span-2">
+              <Label htmlFor="transfer-amount">Valor</Label>
+              <CurrencyInput
+                id="transfer-amount"
+                value={amount}
+                onValueChange={setAmount}
+                placeholder="R$ 0,00"
+                required
+              />
+            </div>
+
+            <div className="flex flex-col gap-2 sm:col-span-2">
+              <Label htmlFor="from-account">Conta de origem</Label>
+              <Input
+                id="from-account"
+                value={fromAccount?.name || ""}
+                disabled
+                className="bg-muted"
+              />
+            </div>
+
+            <div className="flex flex-col gap-2 sm:col-span-2">
+              <Label htmlFor="to-account">Conta de destino</Label>
+              {availableAccounts.length === 0 ? (
+                <div className="rounded-md border border-border bg-muted p-3 text-sm text-muted-foreground">
+                  É necessário ter mais de uma conta cadastrada para realizar
+                  transferências.
+                </div>
+              ) : (
+                <Select value={toAccountId} onValueChange={setToAccountId}>
+                  <SelectTrigger id="to-account" className="w-full">
+                    <SelectValue placeholder="Selecione a conta de destino" />
+                  </SelectTrigger>
+                  <SelectContent className="w-full">
+                    {availableAccounts.map((account) => (
+                      <SelectItem key={account.id} value={account.id}>
+                        {account.name} - {account.accountType}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              )}
+            </div>
+          </div>
+
+          {errorMessage && (
+            <p className="text-sm text-destructive">{errorMessage}</p>
+          )}
+
+          <DialogFooter className="gap-3">
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => setDialogOpen(false)}
+              disabled={isPending}
+            >
+              Cancelar
+            </Button>
+            <Button
+              type="submit"
+              disabled={isPending || availableAccounts.length === 0}
+            >
+              {isPending ? "Processando..." : "Confirmar transferência"}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/components/contas/types.ts b/components/contas/types.ts
new file mode 100644
index 0000000..8445dd5
--- /dev/null
+++ b/components/contas/types.ts
@@ -0,0 +1,21 @@
+export type Account = {
+  id: string;
+  name: string;
+  accountType: string;
+  status: string;
+  note: string | null;
+  logo: string | null;
+  initialBalance: number;
+  balance?: number | null;
+  excludeFromBalance?: boolean;
+};
+
+export type AccountFormValues = {
+  name: string;
+  accountType: string;
+  status: string;
+  note: string;
+  logo: string;
+  initialBalance: string;
+  excludeFromBalance: boolean;
+};
diff --git a/components/dashboard/boletos-widget.tsx b/components/dashboard/boletos-widget.tsx
new file mode 100644
index 0000000..a635d74
--- /dev/null
+++ b/components/dashboard/boletos-widget.tsx
@@ -0,0 +1,364 @@
+"use client";
+
+import { toggleLancamentoSettlementAction } from "@/app/(dashboard)/lancamentos/actions";
+import MoneyValues from "@/components/money-values";
+import { Button } from "@/components/ui/button";
+import { CardContent } from "@/components/ui/card";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter as ModalFooter,
+} from "@/components/ui/dialog";
+import type { DashboardBoleto } from "@/lib/dashboard/boletos";
+import { cn } from "@/lib/utils/ui";
+import {
+  RiBarcodeFill,
+  RiCheckboxCircleFill,
+  RiCheckboxCircleLine,
+  RiLoader4Line,
+} from "@remixicon/react";
+import { useRouter } from "next/navigation";
+import { useEffect, useMemo, useState, useTransition } from "react";
+import { toast } from "sonner";
+import { Badge } from "../ui/badge";
+import { WidgetEmptyState } from "../widget-empty-state";
+
+type BoletosWidgetProps = {
+  boletos: DashboardBoleto[];
+};
+
+type ModalState = "idle" | "processing" | "success";
+
+const DATE_FORMATTER = new Intl.DateTimeFormat("pt-BR", {
+  day: "2-digit",
+  month: "short",
+  year: "numeric",
+  timeZone: "UTC",
+});
+
+const buildDateLabel = (value: string | null, prefix?: string) => {
+  if (!value) {
+    return null;
+  }
+
+  const [year, month, day] = value.split("-").map((part) => Number(part));
+  if (!year || !month || !day) {
+    return null;
+  }
+
+  const formatted = DATE_FORMATTER.format(
+    new Date(Date.UTC(year, month - 1, day))
+  );
+
+  return prefix ? `${prefix} ${formatted}` : formatted;
+};
+
+const buildStatusLabel = (boleto: DashboardBoleto) => {
+  if (boleto.isSettled) {
+    return buildDateLabel(boleto.boletoPaymentDate, "Pago em");
+  }
+
+  return buildDateLabel(boleto.dueDate, "Vence em");
+};
+
+const getTodayDateString = () => {
+  const now = new Date();
+  const year = now.getFullYear();
+  const month = String(now.getMonth() + 1).padStart(2, "0");
+  const day = String(now.getDate()).padStart(2, "0");
+  return `${year}-${month}-${day}`;
+};
+
+export function BoletosWidget({ boletos }: BoletosWidgetProps) {
+  const router = useRouter();
+  const [items, setItems] = useState(boletos);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [modalState, setModalState] = useState<ModalState>("idle");
+  const [isPending, startTransition] = useTransition();
+
+  useEffect(() => {
+    setItems(boletos);
+  }, [boletos]);
+
+  const selectedBoleto = useMemo(
+    () => items.find((boleto) => boleto.id === selectedId) ?? null,
+    [items, selectedId]
+  );
+
+  const isProcessing = modalState === "processing" || isPending;
+
+  const selectedBoletoDueLabel = selectedBoleto
+    ? buildDateLabel(selectedBoleto.dueDate, "Vencimento:")
+    : null;
+
+  const handleOpenModal = (boletoId: string) => {
+    setSelectedId(boletoId);
+    setModalState("idle");
+    setIsModalOpen(true);
+  };
+
+  const resetModalState = () => {
+    setIsModalOpen(false);
+    setSelectedId(null);
+    setModalState("idle");
+  };
+
+  const handleConfirmPayment = () => {
+    if (!selectedBoleto || selectedBoleto.isSettled || isProcessing) {
+      return;
+    }
+
+    setModalState("processing");
+
+    startTransition(async () => {
+      const result = await toggleLancamentoSettlementAction({
+        id: selectedBoleto.id,
+        value: true,
+      });
+
+      if (!result.success) {
+        toast.error(result.error);
+        setModalState("idle");
+        return;
+      }
+
+      setItems((previous) =>
+        previous.map((boleto) =>
+          boleto.id === selectedBoleto.id
+            ? {
+                ...boleto,
+                isSettled: true,
+                boletoPaymentDate: getTodayDateString(),
+              }
+            : boleto
+        )
+      );
+      toast.success(result.message);
+      router.refresh();
+      setModalState("success");
+    });
+  };
+
+  const getStatusBadgeVariant = (status: string): "success" | "info" => {
+    const normalizedStatus = status.toLowerCase();
+    if (normalizedStatus === "pendente") {
+      return "info";
+    }
+    return "success";
+  };
+
+  return (
+    <>
+      <CardContent className="flex flex-col gap-4 px-0">
+        {items.length === 0 ? (
+          <WidgetEmptyState
+            icon={<RiBarcodeFill className="size-6 text-muted-foreground" />}
+            title="Nenhum boleto cadastrado para o período selecionado"
+            description="Cadastre boletos para monitorar os pagamentos aqui."
+          />
+        ) : (
+          <ul className="flex flex-col">
+            {items.map((boleto) => {
+              const statusLabel = buildStatusLabel(boleto);
+
+              return (
+                <li
+                  key={boleto.id}
+                  className="flex items-center justify-between border-b border-dashed last:border-b-0 last:pb-0"
+                >
+                  <div className="flex min-w-0 flex-1 items-center gap-3 py-2">
+                    <div className="flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted">
+                      <RiBarcodeFill className="size-5" />
+                    </div>
+
+                    <div className="min-w-0">
+                      <span className="block truncate text-sm font-medium text-foreground">
+                        {boleto.name}
+                      </span>
+                      <div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
+                        <span
+                          className={cn(
+                            "rounded-full py-0.5",
+                            boleto.isSettled &&
+                              "text-green-600 dark:text-green-400"
+                          )}
+                        >
+                          {statusLabel}
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div className="flex shrink-0 flex-col items-end">
+                    <MoneyValues amount={boleto.amount} />
+                    <Button
+                      type="button"
+                      size="sm"
+                      variant="link"
+                      className="h-auto p-0 disabled:opacity-100"
+                      disabled={boleto.isSettled}
+                      onClick={() => handleOpenModal(boleto.id)}
+                    >
+                      {boleto.isSettled ? (
+                        <span className="flex items-center gap-1 text-green-600 dark:text-green-400">
+                          <RiCheckboxCircleFill className="size-3" /> Pago
+                        </span>
+                      ) : (
+                        "Pagar"
+                      )}
+                    </Button>
+                  </div>
+                </li>
+              );
+            })}
+          </ul>
+        )}
+      </CardContent>
+
+      <Dialog
+        open={isModalOpen}
+        onOpenChange={(open) => {
+          if (!open) {
+            if (isProcessing) {
+              return;
+            }
+            resetModalState();
+            return;
+          }
+          setIsModalOpen(true);
+        }}
+      >
+        <DialogContent
+          className="max-w-md"
+          onEscapeKeyDown={(event) => {
+            if (isProcessing) {
+              event.preventDefault();
+              return;
+            }
+            resetModalState();
+          }}
+          onPointerDownOutside={(event) => {
+            if (isProcessing) {
+              event.preventDefault();
+            }
+          }}
+        >
+          {modalState === "success" ? (
+            <div className="flex flex-col items-center gap-4 py-6 text-center">
+              <div className="flex size-16 items-center justify-center rounded-full bg-emerald-500/10 text-emerald-500">
+                <RiCheckboxCircleLine className="size-8" />
+              </div>
+              <div className="space-y-2">
+                <DialogTitle className="text-base">
+                  Pagamento registrado!
+                </DialogTitle>
+                <DialogDescription className="text-sm">
+                  Atualizamos o status do boleto para pago. Em instantes ele
+                  aparecerá como baixado no histórico.
+                </DialogDescription>
+              </div>
+              <ModalFooter className="sm:justify-center">
+                <Button
+                  type="button"
+                  onClick={resetModalState}
+                  className="sm:w-auto"
+                >
+                  Fechar
+                </Button>
+              </ModalFooter>
+            </div>
+          ) : (
+            <>
+              <DialogHeader className="gap-3 text-center sm:text-left">
+                <DialogTitle>Confirmar pagamento do boleto</DialogTitle>
+                <DialogDescription>
+                  Confirme os dados para registrar o pagamento. Você poderá
+                  editar o lançamento depois, se necessário.
+                </DialogDescription>
+              </DialogHeader>
+
+              {selectedBoleto ? (
+                <div className="flex flex-col gap-4">
+                  <div className="flex flex-col items-center gap-3 rounded-lg border border-border/60 bg-muted/50 p-4 text-center sm:flex-row sm:text-left">
+                    <div className="flex size-12 shrink-0 items-center justify-center">
+                      <RiBarcodeFill className="size-8" />
+                    </div>
+                    <div className="space-y-1">
+                      <p className="text-sm font-medium text-foreground">
+                        {selectedBoleto.name}
+                      </p>
+                      {selectedBoletoDueLabel ? (
+                        <p className="text-xs text-muted-foreground">
+                          {selectedBoletoDueLabel}
+                        </p>
+                      ) : null}
+                    </div>
+                  </div>
+
+                  <div className="grid grid-cols-1 gap-3 text-sm">
+                    <div className="flex items-center justify-between rounded border border-border/60 px-3 py-2">
+                      <span className="text-xs uppercase text-muted-foreground/80">
+                        Valor do boleto
+                      </span>
+                      <MoneyValues
+                        amount={selectedBoleto.amount}
+                        className="text-lg"
+                      />
+                    </div>
+                    <div className="flex items-center justify-between rounded border border-border/60 px-3 py-2">
+                      <span className="text-xs uppercase text-muted-foreground/80">
+                        Status atual
+                      </span>
+                      <span className="text-sm font-medium">
+                        <Badge
+                          variant={getStatusBadgeVariant(
+                            selectedBoleto.isSettled ? "Pago" : "Pendente"
+                          )}
+                          className="text-xs"
+                        >
+                          {selectedBoleto.isSettled ? "Pago" : "Pendente"}
+                        </Badge>
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              ) : null}
+
+              <ModalFooter className="sm:justify-end">
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={resetModalState}
+                  disabled={isProcessing}
+                >
+                  Cancelar
+                </Button>
+                <Button
+                  type="button"
+                  onClick={handleConfirmPayment}
+                  disabled={
+                    isProcessing || !selectedBoleto || selectedBoleto.isSettled
+                  }
+                  className="relative"
+                >
+                  {isProcessing ? (
+                    <>
+                      <RiLoader4Line className="mr-1.5 size-4 animate-spin" />
+                      Processando...
+                    </>
+                  ) : (
+                    "Confirmar pagamento"
+                  )}
+                </Button>
+              </ModalFooter>
+            </>
+          )}
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}
diff --git a/components/dashboard/dashboard-grid.tsx b/components/dashboard/dashboard-grid.tsx
new file mode 100644
index 0000000..271b7f4
--- /dev/null
+++ b/components/dashboard/dashboard-grid.tsx
@@ -0,0 +1,25 @@
+import WidgetCard from "@/components/widget-card";
+import type { DashboardData } from "@/lib/dashboard/fetch-dashboard-data";
+import { widgetsConfig } from "@/lib/dashboard/widgets/widgets-config";
+
+type DashboardGridProps = {
+  data: DashboardData;
+  period: string;
+};
+
+export function DashboardGrid({ data, period }: DashboardGridProps) {
+  return (
+    <section className="grid grid-cols-1 gap-3 @4xl/main:grid-cols-2 @6xl/main:grid-cols-3">
+      {widgetsConfig.map((widget) => (
+        <WidgetCard
+          key={widget.id}
+          title={widget.title}
+          subtitle={widget.subtitle}
+          icon={widget.icon}
+        >
+          {widget.component({ data, period })}
+        </WidgetCard>
+      ))}
+    </section>
+  );
+}
diff --git a/components/dashboard/dashboard-welcome.tsx b/components/dashboard/dashboard-welcome.tsx
new file mode 100644
index 0000000..a62d136
--- /dev/null
+++ b/components/dashboard/dashboard-welcome.tsx
@@ -0,0 +1,76 @@
+"use client";
+
+import { main_font } from "@/public/fonts/font_index";
+import MagnetLines from "../magnet-lines";
+import { Card } from "../ui/card";
+
+type DashboardWelcomeProps = {
+  name?: string | null;
+};
+
+const capitalizeFirstLetter = (value: string) =>
+  value.length > 0 ? value[0]?.toUpperCase() + value.slice(1) : value;
+
+const formatCurrentDate = (date = new Date()) => {
+  const formatted = new Intl.DateTimeFormat("pt-BR", {
+    weekday: "long",
+    day: "numeric",
+    month: "long",
+    year: "numeric",
+    timeZone: "America/Sao_Paulo",
+  }).format(date);
+
+  return capitalizeFirstLetter(formatted);
+};
+
+const getGreeting = () => {
+  const now = new Date();
+
+  // Get hour in Brasilia timezone
+  const brasiliaHour = new Intl.DateTimeFormat("pt-BR", {
+    hour: "numeric",
+    hour12: false,
+    timeZone: "America/Sao_Paulo",
+  }).format(now);
+
+  const hour = parseInt(brasiliaHour, 10);
+
+  if (hour >= 5 && hour < 12) {
+    return "Bom dia";
+  } else if (hour >= 12 && hour < 18) {
+    return "Boa tarde";
+  } else {
+    return "Boa noite";
+  }
+};
+
+export function DashboardWelcome({ name }: DashboardWelcomeProps) {
+  const displayName = name && name.trim().length > 0 ? name : "Administrador";
+  const formattedDate = formatCurrentDate();
+  const greeting = getGreeting();
+
+  return (
+    <Card
+      className={`${main_font.className} relative px-6 py-12 bg-welcome-banner border-none shadow-lg overflow-hidden`}
+    >
+      <div className="absolute inset-0 flex items-center justify-center opacity-20 pointer-events-none">
+        <MagnetLines
+          rows={8}
+          columns={16}
+          containerSize="100%"
+          lineColor="currentColor"
+          lineWidth="0.4vmin"
+          lineHeight="5vmin"
+          baseAngle={0}
+          className="text-welcome-banner-foreground"
+        />
+      </div>
+      <div className="relative tracking-tight text-welcome-banner-foreground">
+        <h1 className="text-xl font-medium">
+          {greeting}, {displayName}! <span aria-hidden="true">👋</span>
+        </h1>
+        <p className="mt-2 text-sm opacity-90">{formattedDate}</p>
+      </div>
+    </Card>
+  );
+}
diff --git a/components/dashboard/expenses-by-category-widget.tsx b/components/dashboard/expenses-by-category-widget.tsx
new file mode 100644
index 0000000..c1ca3c3
--- /dev/null
+++ b/components/dashboard/expenses-by-category-widget.tsx
@@ -0,0 +1,179 @@
+import MoneyValues from "@/components/money-values";
+import type { ExpensesByCategoryData } from "@/lib/dashboard/categories/expenses-by-category";
+import { getIconComponent } from "@/lib/utils/icons";
+import { formatPeriodForUrl } from "@/lib/utils/period";
+import {
+  RiArrowDownLine,
+  RiArrowUpLine,
+  RiExternalLinkLine,
+  RiPieChartLine,
+  RiWallet3Line,
+} from "@remixicon/react";
+import Link from "next/link";
+import { WidgetEmptyState } from "../widget-empty-state";
+
+type ExpensesByCategoryWidgetProps = {
+  data: ExpensesByCategoryData;
+  period: string;
+};
+
+const buildInitials = (value: string) => {
+  const parts = value.trim().split(/\s+/).filter(Boolean);
+  if (parts.length === 0) {
+    return "CT";
+  }
+  if (parts.length === 1) {
+    const firstPart = parts[0];
+    return firstPart ? firstPart.slice(0, 2).toUpperCase() : "CT";
+  }
+  const firstChar = parts[0]?.[0] ?? "";
+  const secondChar = parts[1]?.[0] ?? "";
+  return `${firstChar}${secondChar}`.toUpperCase() || "CT";
+};
+
+const formatPercentage = (value: number) => {
+  return `${Math.abs(value).toFixed(0)}%`;
+};
+
+export function ExpensesByCategoryWidget({
+  data,
+  period,
+}: ExpensesByCategoryWidgetProps) {
+  const periodParam = formatPeriodForUrl(period);
+
+  if (data.categories.length === 0) {
+    return (
+      <WidgetEmptyState
+        icon={<RiPieChartLine className="size-6 text-muted-foreground" />}
+        title="Nenhuma despesa encontrada"
+        description="Quando houver despesas registradas, elas aparecerão aqui."
+      />
+    );
+  }
+
+  return (
+    <div className="flex flex-col px-0">
+      {data.categories.map((category) => {
+        const IconComponent = category.categoryIcon
+          ? getIconComponent(category.categoryIcon)
+          : null;
+        const initials = buildInitials(category.categoryName);
+        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 formatCurrency = (value: number) =>
+          new Intl.NumberFormat("pt-BR", {
+            style: "currency",
+            currency: "BRL",
+          }).format(value);
+
+        const exceededAmount =
+          budgetExceeded && category.budgetAmount
+            ? category.currentAmount - category.budgetAmount
+            : 0;
+
+        return (
+          <div
+            key={category.categoryId}
+            className="flex flex-col py-2 border-b border-dashed last:border-0"
+          >
+            <div className="flex items-center justify-between gap-3">
+              <div className="flex min-w-0 flex-1 items-center gap-2">
+                <div className="flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-muted">
+                  {IconComponent ? (
+                    <IconComponent className="size-4 text-foreground" />
+                  ) : (
+                    <span className="text-xs font-semibold uppercase text-muted-foreground">
+                      {initials}
+                    </span>
+                  )}
+                </div>
+
+                <div className="min-w-0 flex-1">
+                  <div className="flex items-center gap-2">
+                    <Link
+                      href={`/categorias/${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 items-center gap-2 text-xs text-muted-foreground">
+                    <span>
+                      {formatPercentage(category.percentageOfTotal)} da despesa
+                      total
+                    </span>
+                  </div>
+                </div>
+              </div>
+
+              <div className="flex shrink-0 flex-col items-end gap-0.5">
+                <MoneyValues
+                  className="text-foreground"
+                  amount={category.currentAmount}
+                />
+                {category.percentageChange !== null && (
+                  <span
+                    className={`flex items-center gap-0.5 text-xs ${
+                      hasIncrease
+                        ? "text-red-600"
+                        : hasDecrease
+                        ? "text-green-600"
+                        : "text-muted-foreground"
+                    }`}
+                  >
+                    {hasIncrease && <RiArrowUpLine className="size-3" />}
+                    {hasDecrease && <RiArrowDownLine className="size-3" />}
+                    {formatPercentage(category.percentageChange)}
+                  </span>
+                )}
+              </div>
+            </div>
+
+            {hasBudget && category.budgetUsedPercentage !== null && (
+              <div className="ml-11 flex items-center gap-1.5 text-xs">
+                <RiWallet3Line
+                  className={`size-3 ${
+                    budgetExceeded
+                      ? "text-red-600"
+                      : "text-blue-600 dark:text-blue-400"
+                  }`}
+                />
+                <span
+                  className={
+                    budgetExceeded
+                      ? "text-red-600"
+                      : "text-blue-600 dark:text-blue-400"
+                  }
+                >
+                  {budgetExceeded ? (
+                    <>
+                      {formatPercentage(category.budgetUsedPercentage)} do
+                      limite • excedeu em {formatCurrency(exceededAmount)}
+                    </>
+                  ) : (
+                    <>
+                      {formatPercentage(category.budgetUsedPercentage)} do
+                      limite
+                    </>
+                  )}
+                </span>
+              </div>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/components/dashboard/income-by-category-widget.tsx b/components/dashboard/income-by-category-widget.tsx
new file mode 100644
index 0000000..3654d70
--- /dev/null
+++ b/components/dashboard/income-by-category-widget.tsx
@@ -0,0 +1,182 @@
+import MoneyValues from "@/components/money-values";
+import type { IncomeByCategoryData } from "@/lib/dashboard/categories/income-by-category";
+import { getIconComponent } from "@/lib/utils/icons";
+import { formatPeriodForUrl } from "@/lib/utils/period";
+import {
+  RiArrowDownLine,
+  RiArrowUpLine,
+  RiExternalLinkLine,
+  RiPieChartLine,
+  RiWallet3Line,
+} from "@remixicon/react";
+import Link from "next/link";
+import { WidgetEmptyState } from "../widget-empty-state";
+
+type IncomeByCategoryWidgetProps = {
+  data: IncomeByCategoryData;
+  period: string;
+};
+
+const buildInitials = (value: string) => {
+  const parts = value.trim().split(/\s+/).filter(Boolean);
+  if (parts.length === 0) {
+    return "CT";
+  }
+  if (parts.length === 1) {
+    const firstPart = parts[0];
+    return firstPart ? firstPart.slice(0, 2).toUpperCase() : "CT";
+  }
+  const firstChar = parts[0]?.[0] ?? "";
+  const secondChar = parts[1]?.[0] ?? "";
+  return `${firstChar}${secondChar}`.toUpperCase() || "CT";
+};
+
+const formatPercentage = (value: number) => {
+  return `${Math.abs(value).toFixed(1)}%`;
+};
+
+export function IncomeByCategoryWidget({
+  data,
+  period,
+}: IncomeByCategoryWidgetProps) {
+  const periodParam = formatPeriodForUrl(period);
+
+  if (data.categories.length === 0) {
+    return (
+      <WidgetEmptyState
+        icon={<RiPieChartLine className="size-6 text-muted-foreground" />}
+        title="Nenhuma receita encontrada"
+        description="Quando houver receitas registradas, elas aparecerão aqui."
+      />
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-2 px-0">
+      {data.categories.map((category) => {
+        const IconComponent = category.categoryIcon
+          ? getIconComponent(category.categoryIcon)
+          : null;
+        const initials = buildInitials(category.categoryName);
+        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 formatCurrency = (value: number) =>
+          new Intl.NumberFormat("pt-BR", {
+            style: "currency",
+            currency: "BRL",
+          }).format(value);
+
+        const exceededAmount =
+          budgetExceeded && category.budgetAmount
+            ? category.currentAmount - category.budgetAmount
+            : 0;
+
+        return (
+          <div
+            key={category.categoryId}
+            className="flex flex-col gap-1.5 py-2 border-b border-dashed last:border-0"
+          >
+            <div className="flex items-center justify-between gap-3">
+              <div className="flex min-w-0 flex-1 items-center gap-2">
+                <div className="flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-muted">
+                  {IconComponent ? (
+                    <IconComponent className="size-4 text-foreground" />
+                  ) : (
+                    <span className="text-xs font-semibold uppercase text-muted-foreground">
+                      {initials}
+                    </span>
+                  )}
+                </div>
+
+                <div className="min-w-0 flex-1">
+                  <div className="flex items-center gap-2">
+                    <Link
+                      href={`/categorias/${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 items-center gap-2 text-xs text-muted-foreground">
+                    <span>
+                      {formatPercentage(category.percentageOfTotal)} da receita
+                      total
+                    </span>
+                  </div>
+                </div>
+              </div>
+
+              <div className="flex shrink-0 flex-col items-end gap-0.5">
+                <MoneyValues
+                  className="text-foreground"
+                  amount={category.currentAmount}
+                />
+                {category.percentageChange !== null && (
+                  <span
+                    className={`flex items-center gap-0.5 text-xs ${
+                      hasIncrease
+                        ? "text-green-600"
+                        : hasDecrease
+                        ? "text-red-600"
+                        : "text-muted-foreground"
+                    }`}
+                  >
+                    {hasIncrease && <RiArrowUpLine className="size-3" />}
+                    {hasDecrease && <RiArrowDownLine className="size-3" />}
+                    {formatPercentage(category.percentageChange)}
+                  </span>
+                )}
+              </div>
+            </div>
+
+            {hasBudget &&
+              category.budgetUsedPercentage !== null &&
+              category.budgetAmount !== null && (
+                <div className="ml-11 flex items-center gap-1.5 text-xs">
+                  <RiWallet3Line
+                    className={`size-3 ${
+                      budgetExceeded
+                        ? "text-red-600"
+                        : "text-blue-600 dark:text-blue-400"
+                    }`}
+                  />
+                  <span
+                    className={
+                      budgetExceeded
+                        ? "text-red-600"
+                        : "text-blue-600 dark:text-blue-400"
+                    }
+                  >
+                    {budgetExceeded ? (
+                      <>
+                        {formatPercentage(category.budgetUsedPercentage)} do
+                        limite {formatCurrency(category.budgetAmount)} • excedeu
+                        em {formatCurrency(exceededAmount)}
+                      </>
+                    ) : (
+                      <>
+                        {formatPercentage(category.budgetUsedPercentage)} do
+                        limite {formatCurrency(category.budgetAmount)}
+                      </>
+                    )}
+                  </span>
+                </div>
+              )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/components/dashboard/income-expense-balance-widget.tsx b/components/dashboard/income-expense-balance-widget.tsx
new file mode 100644
index 0000000..3bc8aa1
--- /dev/null
+++ b/components/dashboard/income-expense-balance-widget.tsx
@@ -0,0 +1,175 @@
+"use client";
+
+import { CardContent } from "@/components/ui/card";
+import {
+  ChartContainer,
+  ChartTooltip,
+  type ChartConfig,
+} from "@/components/ui/chart";
+import { WidgetEmptyState } from "@/components/widget-empty-state";
+import type { IncomeExpenseBalanceData } from "@/lib/dashboard/income-expense-balance";
+import { RiLineChartLine } from "@remixicon/react";
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts";
+
+type IncomeExpenseBalanceWidgetProps = {
+  data: IncomeExpenseBalanceData;
+};
+
+const chartConfig = {
+  receita: {
+    label: "Receita",
+    color: "var(--chart-1)",
+  },
+  despesa: {
+    label: "Despesa",
+    color: "var(--chart-2)",
+  },
+  balanco: {
+    label: "Balanço",
+    color: "var(--chart-3)",
+  },
+} satisfies ChartConfig;
+
+export function IncomeExpenseBalanceWidget({
+  data,
+}: IncomeExpenseBalanceWidgetProps) {
+  const chartData = data.months.map((month) => ({
+    month: month.monthLabel,
+    receita: month.income,
+    despesa: month.expense,
+    balanco: month.balance,
+  }));
+
+  // Verifica se todos os valores são zero
+  const isEmpty = chartData.every(
+    (item) => item.receita === 0 && item.despesa === 0 && item.balanco === 0
+  );
+
+  if (isEmpty) {
+    return (
+      <CardContent className="px-0">
+        <WidgetEmptyState
+          icon={<RiLineChartLine className="size-6 text-muted-foreground" />}
+          title="Nenhuma movimentação financeira no período"
+          description="Registre receitas e despesas para visualizar o balanço mensal."
+        />
+      </CardContent>
+    );
+  }
+
+  return (
+    <CardContent className="space-y-4 px-0">
+      <ChartContainer
+        config={chartConfig}
+        className="h-[270px] w-full aspect-auto"
+      >
+        <BarChart
+          data={chartData}
+          margin={{ top: 20, right: 10, left: 10, bottom: 5 }}
+        >
+          <CartesianGrid strokeDasharray="3 3" vertical={false} />
+          <XAxis
+            dataKey="month"
+            tickLine={false}
+            axisLine={false}
+            tickMargin={8}
+          />
+          <ChartTooltip
+            content={({ active, payload }) => {
+              if (!active || !payload || payload.length === 0) {
+                return null;
+              }
+
+              const formatCurrency = (value: number) => {
+                return new Intl.NumberFormat("pt-BR", {
+                  style: "currency",
+                  currency: "BRL",
+                  minimumFractionDigits: 2,
+                  maximumFractionDigits: 2,
+                }).format(value);
+              };
+
+              return (
+                <div className="rounded-lg border bg-background p-2 shadow-sm">
+                  <div className="grid gap-2">
+                    {payload.map((entry) => {
+                      const config =
+                        chartConfig[entry.dataKey as keyof typeof chartConfig];
+                      const value = entry.value as number;
+
+                      return (
+                        <div
+                          key={entry.dataKey}
+                          className="flex items-center gap-2"
+                        >
+                          <div
+                            className="h-2.5 w-2.5 rounded"
+                            style={{ backgroundColor: config?.color }}
+                          />
+                          <span className="text-xs text-muted-foreground">
+                            {config?.label}:
+                          </span>
+                          <span className="text-xs font-medium">
+                            {formatCurrency(value)}
+                          </span>
+                        </div>
+                      );
+                    })}
+                  </div>
+                </div>
+              );
+            }}
+            cursor={{ fill: "hsl(var(--muted))", opacity: 0.3 }}
+          />
+          <Bar
+            dataKey="receita"
+            fill={chartConfig.receita.color}
+            radius={[4, 4, 0, 0]}
+            maxBarSize={60}
+          />
+          <Bar
+            dataKey="despesa"
+            fill={chartConfig.despesa.color}
+            radius={[4, 4, 0, 0]}
+            maxBarSize={60}
+          />
+          <Bar
+            dataKey="balanco"
+            fill={chartConfig.balanco.color}
+            radius={[4, 4, 0, 0]}
+            maxBarSize={60}
+          />
+        </BarChart>
+      </ChartContainer>
+      <div className="flex items-center justify-center gap-6">
+        <div className="flex items-center gap-2">
+          <div
+            className="h-3 w-3 rounded"
+            style={{ backgroundColor: chartConfig.receita.color }}
+          />
+          <span className="text-sm text-muted-foreground">
+            {chartConfig.receita.label}
+          </span>
+        </div>
+        <div className="flex items-center gap-2">
+          <div
+            className="h-3 w-3 rounded"
+            style={{ backgroundColor: chartConfig.despesa.color }}
+          />
+          <span className="text-sm text-muted-foreground">
+            {chartConfig.despesa.label}
+          </span>
+        </div>
+        <div className="flex items-center gap-2">
+          <div
+            className="h-3 w-3 rounded"
+            style={{ backgroundColor: chartConfig.balanco.color }}
+          />
+          <span className="text-sm text-muted-foreground">
+            {chartConfig.balanco.label}
+          </span>
+        </div>
+      </div>
+    </CardContent>
+  );
+}
diff --git a/components/dashboard/installment-expenses-widget.tsx b/components/dashboard/installment-expenses-widget.tsx
new file mode 100644
index 0000000..7c6b6ee
--- /dev/null
+++ b/components/dashboard/installment-expenses-widget.tsx
@@ -0,0 +1,190 @@
+import MoneyValues from "@/components/money-values";
+import { CardContent } from "@/components/ui/card";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import type { InstallmentExpensesData } from "@/lib/dashboard/expenses/installment-expenses";
+import {
+  calculateLastInstallmentDate,
+  formatLastInstallmentDate,
+} from "@/lib/installments/utils";
+import { RiNumbersLine } from "@remixicon/react";
+import Image from "next/image";
+import { Progress } from "../ui/progress";
+import { WidgetEmptyState } from "../widget-empty-state";
+
+type InstallmentExpensesWidgetProps = {
+  data: InstallmentExpensesData;
+};
+
+const buildCompactInstallmentLabel = (
+  currentInstallment: number | null,
+  installmentCount: number | null
+) => {
+  if (currentInstallment && installmentCount) {
+    return `${currentInstallment} de ${installmentCount}`;
+  }
+  return null;
+};
+
+const isLastInstallment = (
+  currentInstallment: number | null,
+  installmentCount: number | null
+) => {
+  if (!currentInstallment || !installmentCount) return false;
+  return currentInstallment === installmentCount && installmentCount > 1;
+};
+
+const calculateRemainingInstallments = (
+  currentInstallment: number | null,
+  installmentCount: number | null
+) => {
+  if (!currentInstallment || !installmentCount) return 0;
+  return Math.max(0, installmentCount - currentInstallment);
+};
+
+const calculateRemainingAmount = (
+  amount: number,
+  currentInstallment: number | null,
+  installmentCount: number | null
+) => {
+  const remaining = calculateRemainingInstallments(
+    currentInstallment,
+    installmentCount
+  );
+  return amount * remaining;
+};
+
+const formatEndDate = (
+  period: string,
+  currentInstallment: number | null,
+  installmentCount: number | null
+) => {
+  if (!currentInstallment || !installmentCount) return null;
+
+  const lastDate = calculateLastInstallmentDate(
+    period,
+    currentInstallment,
+    installmentCount
+  );
+
+  return formatLastInstallmentDate(lastDate);
+};
+
+const buildProgress = (
+  currentInstallment: number | null,
+  installmentCount: number | null
+) => {
+  if (!currentInstallment || !installmentCount || installmentCount <= 0) {
+    return 0;
+  }
+
+  return Math.min(
+    100,
+    Math.max(0, (currentInstallment / installmentCount) * 100)
+  );
+};
+
+export function InstallmentExpensesWidget({
+  data,
+}: InstallmentExpensesWidgetProps) {
+  if (data.expenses.length === 0) {
+    return (
+      <WidgetEmptyState
+        icon={<RiNumbersLine className="size-6 text-muted-foreground" />}
+        title="Nenhuma despesa parcelada"
+        description="Lançamentos parcelados aparecerão aqui conforme forem registrados."
+      />
+    );
+  }
+
+  return (
+    <CardContent className="flex flex-col gap-4 px-0">
+      <ul className="flex flex-col gap-2">
+        {data.expenses.map((expense) => {
+          const compactLabel = buildCompactInstallmentLabel(
+            expense.currentInstallment,
+            expense.installmentCount
+          );
+          const isLast = isLastInstallment(
+            expense.currentInstallment,
+            expense.installmentCount
+          );
+          const remainingInstallments = calculateRemainingInstallments(
+            expense.currentInstallment,
+            expense.installmentCount
+          );
+          const remainingAmount = calculateRemainingAmount(
+            expense.amount,
+            expense.currentInstallment,
+            expense.installmentCount
+          );
+          const endDate = formatEndDate(
+            expense.period,
+            expense.currentInstallment,
+            expense.installmentCount
+          );
+          const progress = buildProgress(
+            expense.currentInstallment,
+            expense.installmentCount
+          );
+
+          return (
+            <li
+              key={expense.id}
+              className="flex items-center gap-3 border-b border-dashed pb-2 last:border-b-0 last:pb-0"
+            >
+              <div className="min-w-0 flex-1 ">
+                <div className="flex items-center justify-between gap-3">
+                  <div className="flex min-w-0 items-center gap-2">
+                    <p className="truncate text-sm font-medium text-foreground">
+                      {expense.name}
+                    </p>
+                    {compactLabel && (
+                      <span className="inline-flex shrink-0 items-center gap-1 text-xs font-medium text-muted-foreground">
+                        {compactLabel}
+                        {isLast && (
+                          <Tooltip>
+                            <TooltipTrigger asChild>
+                              <span className="inline-flex">
+                                <Image
+                                  src="/icones/party.svg"
+                                  alt="Última parcela"
+                                  width={14}
+                                  height={14}
+                                  className="h-3.5 w-3.5"
+                                />
+                                <span className="sr-only">Última parcela</span>
+                              </span>
+                            </TooltipTrigger>
+                            <TooltipContent side="top">
+                              Última parcela!
+                            </TooltipContent>
+                          </Tooltip>
+                        )}
+                      </span>
+                    )}
+                  </div>
+                  <MoneyValues amount={expense.amount} className="shrink-0" />
+                </div>
+                <Progress value={progress} className="h-2" />
+
+                <p className="text-xs text-muted-foreground mt-1">
+                  Restantes {remainingInstallments}
+                  {endDate && ` • Termina em ${endDate}`}
+                  {" • Restante "}
+                  <MoneyValues
+                    amount={remainingAmount}
+                    className="inline-block font-medium"
+                  />
+                </p>
+              </div>
+            </li>
+          );
+        })}
+      </ul>
+    </CardContent>
+  );
+}
diff --git a/components/dashboard/invoices-widget.tsx b/components/dashboard/invoices-widget.tsx
new file mode 100644
index 0000000..bf25536
--- /dev/null
+++ b/components/dashboard/invoices-widget.tsx
@@ -0,0 +1,561 @@
+"use client";
+import { updateInvoicePaymentStatusAction } from "@/app/(dashboard)/cartoes/[cartaoId]/fatura/actions";
+import MoneyValues from "@/components/money-values";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { CardContent } from "@/components/ui/card";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter as ModalFooter,
+} from "@/components/ui/dialog";
+import type { DashboardInvoice } from "@/lib/dashboard/invoices";
+import { INVOICE_PAYMENT_STATUS, INVOICE_STATUS_LABEL } from "@/lib/faturas";
+import { getAvatarSrc } from "@/lib/pagadores/utils";
+import { formatPeriodForUrl } from "@/lib/utils/period";
+import {
+  RiBillLine,
+  RiCheckboxCircleFill,
+  RiCheckboxCircleLine,
+  RiExternalLinkLine,
+  RiLoader4Line,
+} from "@remixicon/react";
+import Image from "next/image";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useEffect, useMemo, useState, useTransition } from "react";
+import { toast } from "sonner";
+import { Badge } from "../ui/badge";
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "../ui/hover-card";
+import { WidgetEmptyState } from "../widget-empty-state";
+
+type InvoicesWidgetProps = {
+  invoices: DashboardInvoice[];
+};
+
+type ModalState = "idle" | "processing" | "success";
+
+const DUE_DATE_FORMATTER = new Intl.DateTimeFormat("pt-BR", {
+  day: "2-digit",
+  month: "short",
+  year: "numeric",
+  timeZone: "UTC",
+});
+
+const resolveLogoPath = (logo: string | null) => {
+  if (!logo) {
+    return null;
+  }
+  if (/^(https?:\/\/|data:)/.test(logo)) {
+    return logo;
+  }
+  return logo.startsWith("/") ? logo : `/logos/${logo}`;
+};
+
+const buildInitials = (value: string) => {
+  const parts = value.trim().split(/\s+/).filter(Boolean);
+  if (parts.length === 0) {
+    return "CC";
+  }
+  if (parts.length === 1) {
+    const firstPart = parts[0];
+    return firstPart ? firstPart.slice(0, 2).toUpperCase() : "CC";
+  }
+  const firstChar = parts[0]?.[0] ?? "";
+  const secondChar = parts[1]?.[0] ?? "";
+  return `${firstChar}${secondChar}`.toUpperCase() || "CC";
+};
+
+const parseDueDate = (period: string, dueDay: string) => {
+  const [yearStr, monthStr] = period.split("-");
+  const dayNumber = Number.parseInt(dueDay, 10);
+  const year = Number.parseInt(yearStr ?? "", 10);
+  const month = Number.parseInt(monthStr ?? "", 10);
+
+  if (
+    Number.isNaN(dayNumber) ||
+    Number.isNaN(year) ||
+    Number.isNaN(month) ||
+    period.length !== 7
+  ) {
+    return {
+      label: `Vence dia ${dueDay}`,
+    };
+  }
+
+  const date = new Date(Date.UTC(year, month - 1, dayNumber));
+  return {
+    label: `Vence em ${DUE_DATE_FORMATTER.format(date)}`,
+  };
+};
+
+const formatPaymentDate = (value: string | null) => {
+  if (!value) {
+    return null;
+  }
+
+  const [yearStr, monthStr, dayStr] = value.split("-");
+  const year = Number.parseInt(yearStr ?? "", 10);
+  const month = Number.parseInt(monthStr ?? "", 10);
+  const day = Number.parseInt(dayStr ?? "", 10);
+
+  if (
+    Number.isNaN(year) ||
+    Number.isNaN(month) ||
+    Number.isNaN(day) ||
+    yearStr?.length !== 4 ||
+    monthStr?.length !== 2 ||
+    dayStr?.length !== 2
+  ) {
+    return null;
+  }
+
+  const date = new Date(Date.UTC(year, month - 1, day));
+  return {
+    label: `Pago em ${DUE_DATE_FORMATTER.format(date)}`,
+  };
+};
+
+const getTodayDateString = () => {
+  const now = new Date();
+  const year = now.getFullYear();
+  const month = String(now.getMonth() + 1).padStart(2, "0");
+  const day = String(now.getDate()).padStart(2, "0");
+  return `${year}-${month}-${day}`;
+};
+
+const formatSharePercentage = (value: number) => {
+  if (!Number.isFinite(value) || value <= 0) {
+    return "0%";
+  }
+  const digits = value >= 10 ? 0 : value >= 1 ? 1 : 2;
+  return (
+    value.toLocaleString("pt-BR", {
+      minimumFractionDigits: digits,
+      maximumFractionDigits: digits,
+    }) + "%"
+  );
+};
+
+const getShareLabel = (amount: number, total: number) => {
+  if (total <= 0) {
+    return "0% do total";
+  }
+  const percentage = (amount / total) * 100;
+  return `${formatSharePercentage(percentage)} do total`;
+};
+
+export function InvoicesWidget({ invoices }: InvoicesWidgetProps) {
+  const router = useRouter();
+  const [isPending, startTransition] = useTransition();
+  const [items, setItems] = useState(invoices);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [modalState, setModalState] = useState<ModalState>("idle");
+
+  useEffect(() => {
+    setItems(invoices);
+  }, [invoices]);
+
+  const selectedInvoice = useMemo(
+    () => items.find((invoice) => invoice.id === selectedId) ?? null,
+    [items, selectedId]
+  );
+
+  const selectedLogo = useMemo(
+    () => (selectedInvoice ? resolveLogoPath(selectedInvoice.logo) : null),
+    [selectedInvoice]
+  );
+
+  const selectedPaymentInfo = useMemo(
+    () => (selectedInvoice ? formatPaymentDate(selectedInvoice.paidAt) : null),
+    [selectedInvoice]
+  );
+
+  const handleOpenModal = (invoiceId: string) => {
+    setSelectedId(invoiceId);
+    setModalState("idle");
+    setIsModalOpen(true);
+  };
+
+  const handleCloseModal = () => {
+    setIsModalOpen(false);
+    setModalState("idle");
+    setSelectedId(null);
+  };
+
+  const handleConfirmPayment = () => {
+    if (!selectedInvoice) {
+      return;
+    }
+
+    setModalState("processing");
+
+    startTransition(async () => {
+      const result = await updateInvoicePaymentStatusAction({
+        cartaoId: selectedInvoice.cardId,
+        period: selectedInvoice.period,
+        status: INVOICE_PAYMENT_STATUS.PAID,
+      });
+
+      if (result.success) {
+        toast.success(result.message);
+        setItems((previous) =>
+          previous.map((invoice) =>
+            invoice.id === selectedInvoice.id
+              ? {
+                  ...invoice,
+                  paymentStatus: INVOICE_PAYMENT_STATUS.PAID,
+                  paidAt: getTodayDateString(),
+                }
+              : invoice
+          )
+        );
+        setModalState("success");
+        router.refresh();
+        return;
+      }
+
+      toast.error(result.error);
+      setModalState("idle");
+    });
+  };
+
+  const getStatusBadgeVariant = (status: string): "success" | "info" => {
+    const normalizedStatus = status.toLowerCase();
+    if (normalizedStatus === "em aberto") {
+      return "info";
+    }
+    return "success";
+  };
+
+  return (
+    <>
+      <CardContent className="flex flex-col gap-4 px-0">
+        {items.length === 0 ? (
+          <WidgetEmptyState
+            icon={<RiBillLine className="size-6 text-muted-foreground" />}
+            title="Nenhuma fatura para o período selecionado"
+            description="Quando houver cartões com compras registradas, eles aparecerão aqui."
+          />
+        ) : (
+          <ul className="flex flex-col">
+            {items.map((invoice) => {
+              const logo = resolveLogoPath(invoice.logo);
+              const initials = buildInitials(invoice.cardName);
+              const dueInfo = parseDueDate(invoice.period, invoice.dueDay);
+              const isPaid =
+                invoice.paymentStatus === INVOICE_PAYMENT_STATUS.PAID;
+              const paymentInfo = formatPaymentDate(invoice.paidAt);
+
+              return (
+                <li
+                  key={invoice.id}
+                  className="flex items-center justify-between border-b border-dashed last:border-b-0 last:pb-0"
+                >
+                  <div className="flex min-w-0 flex-1 items-center gap-2 py-2">
+                    <div className="flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-lg">
+                      {logo ? (
+                        <Image
+                          src={logo}
+                          alt={`Logo do cartão ${invoice.cardName}`}
+                          width={44}
+                          height={44}
+                          className="h-full w-full object-contain"
+                        />
+                      ) : (
+                        <span className="text-sm font-semibold uppercase text-muted-foreground">
+                          {initials}
+                        </span>
+                      )}
+                    </div>
+
+                    <div className="min-w-0">
+                      {(() => {
+                        const breakdown = invoice.pagadorBreakdown ?? [];
+                        const hasBreakdown = breakdown.length > 0;
+                        const linkNode = (
+                          <Link
+                            prefetch
+                            href={`/cartoes/${
+                              invoice.cardId
+                            }/fatura?periodo=${formatPeriodForUrl(
+                              invoice.period
+                            )}`}
+                            className="inline-flex max-w-full items-center gap-1 text-sm font-medium text-foreground underline-offset-2 hover:text-primary hover:underline"
+                          >
+                            <span className="truncate">{invoice.cardName}</span>
+                            <RiExternalLinkLine
+                              className="size-3 shrink-0 text-muted-foreground"
+                              aria-hidden
+                            />
+                          </Link>
+                        );
+
+                        if (!hasBreakdown) {
+                          return linkNode;
+                        }
+
+                        const totalForShare = Math.abs(invoice.totalAmount);
+
+                        return (
+                          <HoverCard openDelay={150}>
+                            <HoverCardTrigger asChild>
+                              {linkNode}
+                            </HoverCardTrigger>
+                            <HoverCardContent
+                              align="start"
+                              className="w-72 space-y-3"
+                            >
+                              <p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
+                                Distribuição por pagador
+                              </p>
+                              <ul className="space-y-2">
+                                {breakdown.map((share, index) => (
+                                  <li
+                                    key={`${invoice.id}-${
+                                      share.pagadorId ??
+                                      share.pagadorName ??
+                                      index
+                                    }`}
+                                    className="flex items-center gap-3"
+                                  >
+                                    <Avatar className="size-9">
+                                      <AvatarImage
+                                        src={getAvatarSrc(share.pagadorAvatar)}
+                                        alt={`Avatar de ${share.pagadorName}`}
+                                      />
+                                      <AvatarFallback>
+                                        {buildInitials(share.pagadorName)}
+                                      </AvatarFallback>
+                                    </Avatar>
+                                    <div className="min-w-0 flex-1">
+                                      <p className="truncate text-sm font-medium text-foreground">
+                                        {share.pagadorName}
+                                      </p>
+                                      <p className="text-xs text-muted-foreground">
+                                        {getShareLabel(
+                                          share.amount,
+                                          totalForShare
+                                        )}
+                                      </p>
+                                    </div>
+                                    <div className="text-sm font-semibold text-foreground">
+                                      <MoneyValues amount={share.amount} />
+                                    </div>
+                                  </li>
+                                ))}
+                              </ul>
+                            </HoverCardContent>
+                          </HoverCard>
+                        );
+                      })()}
+                      <div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
+                        {!isPaid ? <span>{dueInfo.label}</span> : null}
+                        {isPaid && paymentInfo ? (
+                          <span className="text-green-600 dark:text-green-400">
+                            {paymentInfo.label}
+                          </span>
+                        ) : null}
+                      </div>
+                    </div>
+                  </div>
+
+                  <div className="flex shrink-0 flex-col items-end">
+                    <MoneyValues amount={invoice.totalAmount} />
+                    <div className="flex items-center gap-2">
+                      <Button
+                        type="button"
+                        size="sm"
+                        disabled={isPaid}
+                        onClick={() => handleOpenModal(invoice.id)}
+                        variant={"link"}
+                        className="p-0 h-auto disabled:opacity-100"
+                      >
+                        {isPaid ? (
+                          <span className="text-green-600 dark:text-green-400 flex items-center gap-1">
+                            <RiCheckboxCircleFill className="size-3" /> Pago
+                          </span>
+                        ) : (
+                          <span>Pagar</span>
+                        )}
+                      </Button>
+                    </div>
+                  </div>
+                </li>
+              );
+            })}
+          </ul>
+        )}
+      </CardContent>
+
+      <Dialog
+        open={isModalOpen}
+        onOpenChange={(open) => {
+          if (!open) {
+            handleCloseModal();
+            return;
+          }
+          setIsModalOpen(true);
+        }}
+      >
+        <DialogContent
+          className="max-w-md"
+          onEscapeKeyDown={(event) => {
+            if (modalState === "processing") {
+              event.preventDefault();
+              return;
+            }
+            handleCloseModal();
+          }}
+          onPointerDownOutside={(event) => {
+            if (modalState === "processing") {
+              event.preventDefault();
+            }
+          }}
+        >
+          {modalState === "success" ? (
+            <div className="flex flex-col items-center gap-4 py-6 text-center">
+              <div className="flex size-16 items-center justify-center rounded-full bg-emerald-500/10 text-emerald-500">
+                <RiCheckboxCircleLine className="size-8" />
+              </div>
+              <div className="space-y-2">
+                <DialogTitle className="text-base">
+                  Pagamento confirmado!
+                </DialogTitle>
+                <DialogDescription className="text-sm">
+                  Atualizamos o status da fatura. O lançamento do pagamento
+                  aparecerá no extrato em instantes.
+                </DialogDescription>
+              </div>
+              <ModalFooter className="sm:justify-center">
+                <Button
+                  type="button"
+                  onClick={handleCloseModal}
+                  className="sm:w-auto"
+                >
+                  Fechar
+                </Button>
+              </ModalFooter>
+            </div>
+          ) : (
+            <>
+              <DialogHeader className="gap-3">
+                <DialogTitle>Confirmar pagamento</DialogTitle>
+                <DialogDescription>
+                  Revise os dados antes de confirmar. Vamos registrar a fatura
+                  como paga.
+                </DialogDescription>
+              </DialogHeader>
+
+              {selectedInvoice ? (
+                <div className="flex flex-col gap-4">
+                  <div className="flex items-center gap-3 rounded-lg border border-border/60 bg-muted/50 p-3">
+                    <div className="flex size-12 shrink-0 items-center justify-center overflow-hidden rounded-lg border border-border/60 bg-background">
+                      {selectedLogo ? (
+                        <Image
+                          src={selectedLogo}
+                          alt={`Logo do cartão ${selectedInvoice.cardName}`}
+                          width={48}
+                          height={48}
+                          className="h-full w-full object-contain"
+                        />
+                      ) : (
+                        <span className="text-sm font-semibold uppercase text-muted-foreground">
+                          {buildInitials(selectedInvoice.cardName)}
+                        </span>
+                      )}
+                    </div>
+                    <div>
+                      <p className="text-sm text-muted-foreground">Cartão</p>
+                      <p className="text-base font-semibold text-foreground">
+                        {selectedInvoice.cardName}
+                      </p>
+                      {selectedInvoice.paymentStatus !==
+                      INVOICE_PAYMENT_STATUS.PAID ? (
+                        <p className="text-xs text-muted-foreground">
+                          {
+                            parseDueDate(
+                              selectedInvoice.period,
+                              selectedInvoice.dueDay
+                            ).label
+                          }
+                        </p>
+                      ) : null}
+                      {selectedInvoice.paymentStatus ===
+                        INVOICE_PAYMENT_STATUS.PAID && selectedPaymentInfo ? (
+                        <p className="text-xs text-emerald-600">
+                          {selectedPaymentInfo.label}
+                        </p>
+                      ) : null}
+                    </div>
+                  </div>
+
+                  <div className="grid grid-cols-1 gap-3 text-sm sm:grid-cols-1">
+                    <div className="rounded border border-border/60 px-3 items-center py-2 flex justify-between">
+                      <span className="text-xs uppercase text-muted-foreground/80">
+                        Valor da fatura
+                      </span>
+                      <MoneyValues
+                        amount={selectedInvoice.totalAmount}
+                        className="text-lg"
+                      />
+                    </div>
+                    <div className="rounded border border-border/60 px-3 py-2 flex justify-between items-center">
+                      <span className="text-xs uppercase text-muted-foreground/80">
+                        Status atual
+                      </span>
+                      <span className="block text-sm">
+                        <Badge
+                          variant={getStatusBadgeVariant(
+                            INVOICE_STATUS_LABEL[selectedInvoice.paymentStatus]
+                          )}
+                          className="text-xs"
+                        >
+                          {INVOICE_STATUS_LABEL[selectedInvoice.paymentStatus]}
+                        </Badge>
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              ) : null}
+
+              <ModalFooter className="sm:justify-end">
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={handleCloseModal}
+                  disabled={modalState === "processing"}
+                >
+                  Cancelar
+                </Button>
+                <Button
+                  type="button"
+                  onClick={handleConfirmPayment}
+                  disabled={modalState === "processing" || isPending}
+                  className="relative"
+                >
+                  {modalState === "processing" || isPending ? (
+                    <>
+                      <RiLoader4Line className="mr-1.5 size-4 animate-spin" />
+                      Processando...
+                    </>
+                  ) : (
+                    "Confirmar pagamento"
+                  )}
+                </Button>
+              </ModalFooter>
+            </>
+          )}
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}
diff --git a/components/dashboard/my-accounts-widget.tsx b/components/dashboard/my-accounts-widget.tsx
new file mode 100644
index 0000000..d3fb96d
--- /dev/null
+++ b/components/dashboard/my-accounts-widget.tsx
@@ -0,0 +1,130 @@
+import {
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+} from "@/components/ui/card";
+import type { DashboardAccount } from "@/lib/dashboard/accounts";
+import { formatPeriodForUrl } from "@/lib/utils/period";
+import { RiBarChartBoxLine } from "@remixicon/react";
+import Image from "next/image";
+import Link from "next/link";
+import MoneyValues from "../money-values";
+import { WidgetEmptyState } from "../widget-empty-state";
+
+type MyAccountsWidgetProps = {
+  accounts: DashboardAccount[];
+  totalBalance: number;
+  maxVisible?: number;
+  period: string;
+};
+
+const resolveLogoSrc = (logo: string | null) => {
+  if (!logo) {
+    return null;
+  }
+
+  const fileName = logo.split("/").filter(Boolean).pop() ?? logo;
+  return `/logos/${fileName}`;
+};
+
+const buildInitials = (name: string) => {
+  const parts = name.trim().split(/\s+/).filter(Boolean);
+  if (parts.length === 0) return "CC";
+  if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
+  return `${parts[0][0] ?? ""}${parts[1][0] ?? ""}`.toUpperCase();
+};
+
+export function MyAccountsWidget({
+  accounts,
+  totalBalance,
+  maxVisible = 5,
+  period,
+}: MyAccountsWidgetProps) {
+  const visibleAccounts = accounts.filter(
+    (account) => !account.excludeFromBalance
+  );
+  const displayedAccounts = visibleAccounts.slice(0, maxVisible);
+  const remainingCount = visibleAccounts.length - displayedAccounts.length;
+
+  return (
+    <>
+      <CardHeader className="pb-4 px-0">
+        <CardDescription>Saldo Total</CardDescription>
+        <div className="text-2xl text-foreground">
+          <MoneyValues amount={totalBalance} />
+        </div>
+      </CardHeader>
+
+      <CardContent className="py-2 px-0">
+        {displayedAccounts.length === 0 ? (
+          <div className="-mt-10">
+            <WidgetEmptyState
+              icon={
+                <RiBarChartBoxLine className="size-6 text-muted-foreground" />
+              }
+              title="Você ainda não adicionou nenhuma conta"
+              description="Cadastre suas contas bancárias para acompanhar os saldos e movimentações."
+            />
+          </div>
+        ) : (
+          <ul className="flex flex-col">
+            {displayedAccounts.map((account) => {
+              const logoSrc = resolveLogoSrc(account.logo);
+              const initials = buildInitials(account.name);
+
+              return (
+                <li
+                  key={account.id}
+                  className="flex items-center justify-between gap-2 border-b border-dashed py-1"
+                >
+                  <div className="flex min-w-0 flex-1 items-center gap-3">
+                    {logoSrc ? (
+                      <div className="relative size-10 overflow-hidden">
+                        <Image
+                          src={logoSrc}
+                          alt={`Logo da conta ${account.name}`}
+                          fill
+                          className="object-contain rounded-lg"
+                        />
+                      </div>
+                    ) : (
+                      <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-secondary text-sm font-semibold uppercase text-secondary-foreground">
+                        {initials}
+                      </div>
+                    )}
+
+                    <div className="min-w-0">
+                      <Link
+                        prefetch
+                        href={`/contas/${
+                          account.id
+                        }/extrato?periodo=${formatPeriodForUrl(period)}`}
+                        className="truncate font-medium text-foreground hover:text-primary hover:underline"
+                      >
+                        <span className="truncate text-sm">{account.name}</span>
+                      </Link>
+                      <div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
+                        <span className="truncate">{account.accountType}</span>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div className="flex flex-col items-end gap-0.5 text-right">
+                    <MoneyValues amount={account.balance} />
+                  </div>
+                </li>
+              );
+            })}
+          </ul>
+        )}
+      </CardContent>
+
+      {visibleAccounts.length > displayedAccounts.length ? (
+        <CardFooter className="border-border/60 border-t pt-4 text-sm text-muted-foreground">
+          +{remainingCount} contas não exibidas
+        </CardFooter>
+      ) : null}
+    </>
+  );
+}
diff --git a/components/dashboard/payment-conditions-widget.tsx b/components/dashboard/payment-conditions-widget.tsx
new file mode 100644
index 0000000..b5c243b
--- /dev/null
+++ b/components/dashboard/payment-conditions-widget.tsx
@@ -0,0 +1,88 @@
+import MoneyValues from "@/components/money-values";
+import type { PaymentConditionsData } from "@/lib/dashboard/payments/payment-conditions";
+import {
+  RiCheckLine,
+  RiLoader2Fill,
+  RiRefreshLine,
+  RiSlideshowLine,
+} from "@remixicon/react";
+import type { ReactNode } from "react";
+import { Progress } from "../ui/progress";
+import { WidgetEmptyState } from "../widget-empty-state";
+
+type PaymentConditionsWidgetProps = {
+  data: PaymentConditionsData;
+};
+
+const CONDITION_ICON_CLASSES =
+  "flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground";
+
+const CONDITION_ICONS: Record<string, ReactNode> = {
+  "À vista": <RiCheckLine className="size-5" aria-hidden />,
+  Parcelado: <RiLoader2Fill className="size-5" aria-hidden />,
+  Recorrente: <RiRefreshLine className="size-5" aria-hidden />,
+};
+
+const formatPercentage = (value: number) =>
+  new Intl.NumberFormat("pt-BR", {
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 1,
+  }).format(value);
+
+export function PaymentConditionsWidget({
+  data,
+}: PaymentConditionsWidgetProps) {
+  if (data.conditions.length === 0) {
+    return (
+      <WidgetEmptyState
+        icon={<RiSlideshowLine className="size-6 text-muted-foreground" />}
+        title="Nenhuma despesa encontrada"
+        description="As distribuições por condição aparecerão conforme novos lançamentos."
+      />
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-4 px-0">
+      <ul className="flex flex-col gap-2">
+        {data.conditions.map((condition) => {
+          const Icon =
+            CONDITION_ICONS[condition.condition] ?? CONDITION_ICONS["À vista"];
+          const percentageLabel = formatPercentage(condition.percentage);
+
+          return (
+            <li
+              key={condition.condition}
+              className="flex items-center gap-3 border-b border-dashed pb-4 last:border-b-0 last:pb-0"
+            >
+              <div className={CONDITION_ICON_CLASSES}>{Icon}</div>
+
+              <div className="min-w-0 flex-1">
+                <div className="flex items-center justify-between gap-3">
+                  <p className="font-medium text-foreground text-sm">
+                    {condition.condition}
+                  </p>
+                  <MoneyValues amount={condition.amount} />
+                </div>
+
+                <div className="flex items-center justify-between text-xs text-muted-foreground">
+                  <span>
+                    {condition.transactions}{" "}
+                    {condition.transactions === 1
+                      ? "lançamento"
+                      : "lançamentos"}
+                  </span>
+                  <span>{percentageLabel}%</span>
+                </div>
+
+                <div className="mt-1">
+                  <Progress value={condition.percentage} />
+                </div>
+              </div>
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+}
diff --git a/components/dashboard/payment-methods-widget.tsx b/components/dashboard/payment-methods-widget.tsx
new file mode 100644
index 0000000..aade767
--- /dev/null
+++ b/components/dashboard/payment-methods-widget.tsx
@@ -0,0 +1,87 @@
+import MoneyValues from "@/components/money-values";
+import type { PaymentMethodsData } from "@/lib/dashboard/payments/payment-methods";
+import { getPaymentMethodIcon } from "@/lib/utils/icons";
+import { RiBankCardLine, RiMoneyDollarCircleLine } from "@remixicon/react";
+import { Progress } from "../ui/progress";
+import { WidgetEmptyState } from "../widget-empty-state";
+
+type PaymentMethodsWidgetProps = {
+  data: PaymentMethodsData;
+};
+
+const ICON_WRAPPER_CLASS =
+  "flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground";
+
+const formatPercentage = (value: number) =>
+  new Intl.NumberFormat("pt-BR", {
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 1,
+  }).format(value);
+
+const resolveIcon = (paymentMethod: string | null | undefined) => {
+  if (!paymentMethod) {
+    return <RiMoneyDollarCircleLine className="size-5" aria-hidden />;
+  }
+
+  const icon = getPaymentMethodIcon(paymentMethod);
+  if (icon) {
+    return icon;
+  }
+
+  return <RiBankCardLine className="size-5" aria-hidden />;
+};
+
+export function PaymentMethodsWidget({ data }: PaymentMethodsWidgetProps) {
+  if (data.methods.length === 0) {
+    return (
+      <WidgetEmptyState
+        icon={
+          <RiMoneyDollarCircleLine className="size-6 text-muted-foreground" />
+        }
+        title="Nenhuma despesa encontrada"
+        description="Cadastre despesas para visualizar a distribuição por forma de pagamento."
+      />
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-4 px-0">
+      <ul className="flex flex-col gap-2">
+        {data.methods.map((method) => {
+          const icon = resolveIcon(method.paymentMethod);
+          const percentageLabel = formatPercentage(method.percentage);
+
+          return (
+            <li
+              key={method.paymentMethod}
+              className="flex items-center gap-3 border-b border-dashed pb-4 last:border-b-0 last:pb-0"
+            >
+              <div className={ICON_WRAPPER_CLASS}>{icon}</div>
+
+              <div className="min-w-0 flex-1">
+                <div className="flex items-center justify-between gap-3">
+                  <p className="font-medium text-foreground text-sm">
+                    {method.paymentMethod}
+                  </p>
+                  <MoneyValues amount={method.amount} />
+                </div>
+
+                <div className="flex items-center justify-between text-xs text-muted-foreground">
+                  <span>
+                    {method.transactions}{" "}
+                    {method.transactions === 1 ? "lançamento" : "lançamentos"}
+                  </span>
+                  <span>{percentageLabel}%</span>
+                </div>
+
+                <div className="mt-1">
+                  <Progress value={method.percentage} />
+                </div>
+              </div>
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+}
diff --git a/components/dashboard/payment-status-widget.tsx b/components/dashboard/payment-status-widget.tsx
new file mode 100644
index 0000000..d6e8c61
--- /dev/null
+++ b/components/dashboard/payment-status-widget.tsx
@@ -0,0 +1,100 @@
+"use client";
+
+import MoneyValues from "@/components/money-values";
+import { CardContent } from "@/components/ui/card";
+import { WidgetEmptyState } from "@/components/widget-empty-state";
+import type { PaymentStatusData } from "@/lib/dashboard/payments/payment-status";
+import {
+  RiCheckboxCircleLine,
+  RiHourglass2Line,
+  RiWallet3Line,
+} from "@remixicon/react";
+import { Progress } from "../ui/progress";
+
+type PaymentStatusWidgetProps = {
+  data: PaymentStatusData;
+};
+
+type CategorySectionProps = {
+  title: string;
+  total: number;
+  confirmed: number;
+  pending: number;
+};
+
+function CategorySection({
+  title,
+  total,
+  confirmed,
+  pending,
+}: CategorySectionProps) {
+  // Usa valores absolutos para calcular percentual corretamente
+  const absTotal = Math.abs(total);
+  const absConfirmed = Math.abs(confirmed);
+  const confirmedPercentage =
+    absTotal > 0 ? (absConfirmed / absTotal) * 100 : 0;
+
+  return (
+    <div className="space-y-2">
+      <div className="flex items-center justify-between">
+        <span className="text-sm font-medium text-foreground">{title}</span>
+        <MoneyValues amount={total} />
+      </div>
+
+      {/* Barra de progresso */}
+      <Progress value={confirmedPercentage} className="h-2" />
+
+      {/* Status de confirmados e pendentes */}
+      <div className="flex items-center justify-between gap-4 text-sm">
+        <div className="flex items-center gap-1.5 ">
+          <RiCheckboxCircleLine className="size-3 text-emerald-600" />
+          <MoneyValues amount={confirmed} />
+          <span className="text-xs text-muted-foreground">confirmados</span>
+        </div>
+
+        <div className="flex items-center gap-1.5 ">
+          <RiHourglass2Line className="size-3 text-orange-500" />
+          <MoneyValues amount={pending} />
+          <span className="text-xs text-muted-foreground">pendentes</span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function PaymentStatusWidget({ data }: PaymentStatusWidgetProps) {
+  const isEmpty = data.income.total === 0 && data.expenses.total === 0;
+
+  if (isEmpty) {
+    return (
+      <CardContent className="px-0">
+        <WidgetEmptyState
+          icon={<RiWallet3Line className="size-6 text-muted-foreground" />}
+          title="Nenhum valor a receber ou pagar no período"
+          description="Registre lançamentos para visualizar os valores confirmados e pendentes."
+        />
+      </CardContent>
+    );
+  }
+
+  return (
+    <CardContent className="space-y-6 px-0">
+      <CategorySection
+        title="A Receber"
+        total={data.income.total}
+        confirmed={data.income.confirmed}
+        pending={data.income.pending}
+      />
+
+      {/* Linha divisória pontilhada */}
+      <div className="border-t border-dashed" />
+
+      <CategorySection
+        title="A Pagar"
+        total={data.expenses.total}
+        confirmed={data.expenses.confirmed}
+        pending={data.expenses.pending}
+      />
+    </CardContent>
+  );
+}
diff --git a/components/dashboard/purchases-by-category-widget.tsx b/components/dashboard/purchases-by-category-widget.tsx
new file mode 100644
index 0000000..0a25b70
--- /dev/null
+++ b/components/dashboard/purchases-by-category-widget.tsx
@@ -0,0 +1,228 @@
+"use client";
+
+import MoneyValues from "@/components/money-values";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { CATEGORY_TYPE_LABEL } from "@/lib/categorias/constants";
+import type { PurchasesByCategoryData } from "@/lib/dashboard/purchases-by-category";
+import { RiArrowDownLine, RiStore3Line } from "@remixicon/react";
+import Image from "next/image";
+import { useEffect, useMemo, useState } from "react";
+import { WidgetEmptyState } from "../widget-empty-state";
+
+type PurchasesByCategoryWidgetProps = {
+  data: PurchasesByCategoryData;
+};
+
+const resolveLogoPath = (logo: string | null) => {
+  if (!logo) {
+    return null;
+  }
+  if (/^(https?:\/\/|data:)/.test(logo)) {
+    return logo;
+  }
+  return logo.startsWith("/") ? logo : `/logos/${logo}`;
+};
+
+const buildInitials = (value: string) => {
+  const parts = value.trim().split(/\s+/).filter(Boolean);
+  if (parts.length === 0) {
+    return "LC";
+  }
+  if (parts.length === 1) {
+    const firstPart = parts[0];
+    return firstPart ? firstPart.slice(0, 2).toUpperCase() : "LC";
+  }
+  const firstChar = parts[0]?.[0] ?? "";
+  const secondChar = parts[1]?.[0] ?? "";
+  return `${firstChar}${secondChar}`.toUpperCase() || "LC";
+};
+
+const formatTransactionDate = (date: Date) => {
+  const formatter = new Intl.DateTimeFormat("pt-BR", {
+    weekday: "short",
+    day: "2-digit",
+    month: "short",
+    timeZone: "UTC",
+  });
+
+  const formatted = formatter.format(date);
+  // Capitaliza a primeira letra do dia da semana
+  return formatted.charAt(0).toUpperCase() + formatted.slice(1);
+};
+
+const STORAGE_KEY = "purchases-by-category-selected";
+
+export function PurchasesByCategoryWidget({
+  data,
+}: PurchasesByCategoryWidgetProps) {
+  // Inicializa com a categoria salva ou a primeira disponível
+  const [selectedCategoryId, setSelectedCategoryId] = useState<string>(() => {
+    if (typeof window === "undefined") {
+      const firstCategory = data.categories[0];
+      return firstCategory ? firstCategory.id : "";
+    }
+
+    const saved = sessionStorage.getItem(STORAGE_KEY);
+    if (saved && data.categories.some((cat) => cat.id === saved)) {
+      return saved;
+    }
+
+    const firstCategory = data.categories[0];
+    return firstCategory ? firstCategory.id : "";
+  });
+
+  // Agrupa categorias por tipo
+  const categoriesByType = useMemo(() => {
+    const grouped: Record<string, typeof data.categories> = {};
+
+    for (const category of data.categories) {
+      if (!grouped[category.type]) {
+        grouped[category.type] = [];
+      }
+      const typeGroup = grouped[category.type];
+      if (typeGroup) {
+        typeGroup.push(category);
+      }
+    }
+
+    return grouped;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [data.categories]);
+
+  // Salva a categoria selecionada quando mudar
+  useEffect(() => {
+    if (selectedCategoryId) {
+      sessionStorage.setItem(STORAGE_KEY, selectedCategoryId);
+    }
+  }, [selectedCategoryId]);
+
+  // Atualiza a categoria selecionada se ela não existir mais na lista
+  useEffect(() => {
+    if (
+      selectedCategoryId &&
+      !data.categories.some((cat) => cat.id === selectedCategoryId)
+    ) {
+      const firstCategory = data.categories[0];
+      if (firstCategory) {
+        setSelectedCategoryId(firstCategory.id);
+      } else {
+        setSelectedCategoryId("");
+      }
+    }
+  }, [data.categories, selectedCategoryId]);
+
+  const currentTransactions = useMemo(() => {
+    if (!selectedCategoryId) {
+      return [];
+    }
+    return data.transactionsByCategory[selectedCategoryId] ?? [];
+  }, [selectedCategoryId, data.transactionsByCategory]);
+
+  const selectedCategory = useMemo(() => {
+    return data.categories.find((cat) => cat.id === selectedCategoryId);
+  }, [data.categories, selectedCategoryId]);
+
+  if (data.categories.length === 0) {
+    return (
+      <WidgetEmptyState
+        icon={<RiStore3Line className="size-6 text-muted-foreground" />}
+        title="Nenhuma categoria encontrada"
+        description="Crie categorias de despesas ou receitas para visualizar as compras."
+      />
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-4 px-0">
+      <div className="flex items-center gap-3">
+        <Select
+          value={selectedCategoryId}
+          onValueChange={setSelectedCategoryId}
+        >
+          <SelectTrigger className="w-full">
+            <SelectValue placeholder="Selecione uma categoria" />
+          </SelectTrigger>
+          <SelectContent>
+            {Object.entries(categoriesByType).map(([type, categories]) => (
+              <div key={type}>
+                <div className="px-2 py-1.5 text-xs font-semibold text-muted-foreground">
+                  {CATEGORY_TYPE_LABEL[
+                    type as keyof typeof CATEGORY_TYPE_LABEL
+                  ] ?? type}
+                </div>
+                {categories.map((category) => (
+                  <SelectItem key={category.id} value={category.id}>
+                    {category.name}
+                  </SelectItem>
+                ))}
+              </div>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+
+      {currentTransactions.length === 0 ? (
+        <WidgetEmptyState
+          icon={<RiArrowDownLine className="size-6 text-muted-foreground" />}
+          title="Nenhuma compra encontrada"
+          description={
+            selectedCategory
+              ? `Não há lançamentos na categoria "${selectedCategory.name}".`
+              : "Selecione uma categoria para visualizar as compras."
+          }
+        />
+      ) : (
+        <ul className="flex flex-col">
+          {currentTransactions.map((transaction) => {
+            const logo = resolveLogoPath(transaction.logo);
+            const initials = buildInitials(transaction.name);
+
+            return (
+              <li
+                key={transaction.id}
+                className="flex items-center justify-between gap-3 border-b border-dashed py-2 last:border-b-0 last:pb-0"
+              >
+                <div className="flex min-w-0 flex-1 items-center gap-3">
+                  <div className="flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-muted">
+                    {logo ? (
+                      <Image
+                        src={logo}
+                        alt={`Logo de ${transaction.name}`}
+                        width={48}
+                        height={48}
+                        className="h-full w-full object-contain"
+                      />
+                    ) : (
+                      <span className="text-sm font-semibold uppercase text-muted-foreground">
+                        {initials}
+                      </span>
+                    )}
+                  </div>
+
+                  <div className="min-w-0">
+                    <p className="truncate text-sm font-medium text-foreground">
+                      {transaction.name}
+                    </p>
+                    <p className="text-xs text-muted-foreground">
+                      {formatTransactionDate(transaction.purchaseDate)}
+                    </p>
+                  </div>
+                </div>
+
+                <div className="shrink-0 text-foreground">
+                  <MoneyValues amount={transaction.amount} />
+                </div>
+              </li>
+            );
+          })}
+        </ul>
+      )}
+    </div>
+  );
+}
diff --git a/components/dashboard/recent-transactions-widget.tsx b/components/dashboard/recent-transactions-widget.tsx
new file mode 100644
index 0000000..fdcc193
--- /dev/null
+++ b/components/dashboard/recent-transactions-widget.tsx
@@ -0,0 +1,109 @@
+import MoneyValues from "@/components/money-values";
+import type { RecentTransactionsData } from "@/lib/dashboard/recent-transactions";
+import { RiExchangeLine } from "@remixicon/react";
+import Image from "next/image";
+import { WidgetEmptyState } from "../widget-empty-state";
+
+type RecentTransactionsWidgetProps = {
+  data: RecentTransactionsData;
+};
+
+const resolveLogoPath = (logo: string | null) => {
+  if (!logo) {
+    return null;
+  }
+  if (/^(https?:\/\/|data:)/.test(logo)) {
+    return logo;
+  }
+  return logo.startsWith("/") ? logo : `/logos/${logo}`;
+};
+
+const buildInitials = (value: string) => {
+  const parts = value.trim().split(/\s+/).filter(Boolean);
+  if (parts.length === 0) {
+    return "LC";
+  }
+  if (parts.length === 1) {
+    const firstPart = parts[0];
+    return firstPart ? firstPart.slice(0, 2).toUpperCase() : "LC";
+  }
+  const firstChar = parts[0]?.[0] ?? "";
+  const secondChar = parts[1]?.[0] ?? "";
+  return `${firstChar}${secondChar}`.toUpperCase() || "LC";
+};
+
+const formatTransactionDate = (date: Date) => {
+  const formatter = new Intl.DateTimeFormat("pt-BR", {
+    weekday: "short",
+    day: "2-digit",
+    month: "short",
+    timeZone: "UTC",
+  });
+
+  const formatted = formatter.format(date);
+  // Capitaliza a primeira letra do dia da semana
+  return formatted.charAt(0).toUpperCase() + formatted.slice(1);
+};
+
+export function RecentTransactionsWidget({
+  data,
+}: RecentTransactionsWidgetProps) {
+  return (
+    <div className="flex flex-col px-0">
+      {data.transactions.length === 0 ? (
+        <WidgetEmptyState
+          icon={<RiExchangeLine className="size-6 text-muted-foreground" />}
+          title="Nenhum lançamento encontrado"
+          description="Quando houver despesas registradas, elas aparecerão aqui."
+        />
+      ) : (
+        <ul className="flex flex-col">
+          {data.transactions.map((transaction) => {
+            const logo = resolveLogoPath(
+              transaction.cardLogo ?? transaction.accountLogo
+            );
+            const initials = buildInitials(transaction.name);
+
+            return (
+              <li
+                key={transaction.id}
+                className="flex items-center justify-between gap-3 border-b border-dashed py-2 last:border-b-0 last:pb-0"
+              >
+                <div className="flex min-w-0 flex-1 items-center gap-3">
+                  <div className="flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-lg">
+                    {logo ? (
+                      <Image
+                        src={logo}
+                        alt={`Logo de ${transaction.name}`}
+                        width={48}
+                        height={48}
+                        className="h-full w-full object-contain"
+                      />
+                    ) : (
+                      <span className="text-sm font-semibold uppercase text-muted-foreground">
+                        {initials}
+                      </span>
+                    )}
+                  </div>
+
+                  <div className="min-w-0">
+                    <p className="truncate text-sm font-medium text-foreground">
+                      {transaction.name}
+                    </p>
+                    <p className="text-xs text-muted-foreground">
+                      {formatTransactionDate(transaction.purchaseDate)}
+                    </p>
+                  </div>
+                </div>
+
+                <div className="shrink-0 text-foreground">
+                  <MoneyValues amount={transaction.amount} />
+                </div>
+              </li>
+            );
+          })}
+        </ul>
+      )}
+    </div>
+  );
+}
diff --git a/components/dashboard/recurring-expenses-widget.tsx b/components/dashboard/recurring-expenses-widget.tsx
new file mode 100644
index 0000000..e9945b7
--- /dev/null
+++ b/components/dashboard/recurring-expenses-widget.tsx
@@ -0,0 +1,67 @@
+import MoneyValues from "@/components/money-values";
+import { CardContent } from "@/components/ui/card";
+import type { RecurringExpensesData } from "@/lib/dashboard/expenses/recurring-expenses";
+import { RiRefreshLine } from "@remixicon/react";
+import { WidgetEmptyState } from "../widget-empty-state";
+
+type RecurringExpensesWidgetProps = {
+  data: RecurringExpensesData;
+};
+
+const formatOccurrences = (value: number | null) => {
+  if (!value) {
+    return "Recorrência contínua";
+  }
+
+  return `${value} recorrências`;
+};
+
+export function RecurringExpensesWidget({
+  data,
+}: RecurringExpensesWidgetProps) {
+  if (data.expenses.length === 0) {
+    return (
+      <WidgetEmptyState
+        icon={<RiRefreshLine className="size-6 text-muted-foreground" />}
+        title="Nenhuma despesa recorrente"
+        description="Lançamentos recorrentes aparecerão aqui conforme forem registrados."
+      />
+    );
+  }
+
+  return (
+    <CardContent className="flex flex-col gap-4 px-0">
+      <ul className="flex flex-col gap-2">
+        {data.expenses.map((expense) => {
+          return (
+            <li
+              key={expense.id}
+              className="flex items-start gap-3 border-b border-dashed pb-2 last:border-b-0 last:pb-0"
+            >
+              <div className="flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted">
+                <RiRefreshLine className="size-5 text-foreground" />
+              </div>
+
+              <div className="min-w-0 flex-1">
+                <div className="flex items-center justify-between gap-2">
+                  <p className="truncate text-foreground text-sm font-medium">
+                    {expense.name}
+                  </p>
+
+                  <MoneyValues amount={expense.amount} />
+                </div>
+
+                <div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
+                  <span className="inline-flex items-center gap-1">
+                    {expense.paymentMethod}
+                  </span>
+                  •<span>{formatOccurrences(expense.recurrenceCount)}</span>
+                </div>
+              </div>
+            </li>
+          );
+        })}
+      </ul>
+    </CardContent>
+  );
+}
diff --git a/components/dashboard/section-cards.tsx b/components/dashboard/section-cards.tsx
new file mode 100644
index 0000000..fbd271b
--- /dev/null
+++ b/components/dashboard/section-cards.tsx
@@ -0,0 +1,97 @@
+import { Badge } from "@/components/ui/badge";
+import {
+  Card,
+  CardAction,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import type { DashboardCardMetrics } from "@/lib/dashboard/metrics";
+import {
+  RiArrowDownLine,
+  RiArrowUpLine,
+  RiCurrencyLine,
+  RiIncreaseDecreaseLine,
+  RiSubtractLine,
+} from "@remixicon/react";
+import MoneyValues from "../money-values";
+
+type SectionCardsProps = {
+  metrics: DashboardCardMetrics;
+};
+
+type Trend = "up" | "down" | "flat";
+
+const TREND_THRESHOLD = 0.005;
+
+const CARDS = [
+  { label: "Receitas", key: "receitas", icon: RiArrowUpLine },
+  { label: "Despesas", key: "despesas", icon: RiArrowDownLine },
+  { label: "Balanço", key: "balanco", icon: RiIncreaseDecreaseLine },
+  { label: "Previsto", key: "previsto", icon: RiCurrencyLine },
+] as const;
+
+const TREND_ICONS = {
+  up: RiArrowUpLine,
+  down: RiArrowDownLine,
+  flat: RiSubtractLine,
+} as const;
+
+const getTrend = (current: number, previous: number): Trend => {
+  const diff = current - previous;
+  if (diff > TREND_THRESHOLD) return "up";
+  if (diff < -TREND_THRESHOLD) return "down";
+  return "flat";
+};
+
+const getPercentChange = (current: number, previous: number): string => {
+  const EPSILON = 0.01; // Considera valores menores que 1 centavo como zero
+
+  if (Math.abs(previous) < EPSILON) {
+    if (Math.abs(current) < EPSILON) return "0%";
+    return "—";
+  }
+
+  const change = ((current - previous) / Math.abs(previous)) * 100;
+  return Number.isFinite(change) && Math.abs(change) < 1000000
+    ? `${change > 0 ? "+" : ""}${change.toFixed(1)}%`
+    : "—";
+};
+
+export function SectionCards({ metrics }: SectionCardsProps) {
+  return (
+    <div className="*:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card grid grid-cols-1 gap-3 @xl/main:grid-cols-2 @5xl/main:grid-cols-4">
+      {CARDS.map(({ label, key, icon: Icon }) => {
+        const metric = metrics[key];
+        const trend = getTrend(metric.current, metric.previous);
+        const TrendIcon = TREND_ICONS[trend];
+
+        return (
+          <Card key={label} className="@container/card gap-2">
+            <CardHeader>
+              <CardTitle className="flex items-center gap-1">
+                <Icon className="size-4" />
+                {label}
+              </CardTitle>
+              <MoneyValues className="text-2xl" amount={metric.current} />
+              <CardAction>
+                <Badge variant="outline">
+                  <TrendIcon />
+                  {getPercentChange(metric.current, metric.previous)}
+                </Badge>
+              </CardAction>
+            </CardHeader>
+            <CardFooter className="flex-col items-start gap-1.5 text-sm">
+              <div className="line-clamp-1 flex gap-2 text-sm">
+                Mês anterior:
+              </div>
+              <div className="text-muted-foreground">
+                <MoneyValues amount={metric.previous} />
+              </div>
+            </CardFooter>
+          </Card>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/components/dashboard/top-establishments-widget.tsx b/components/dashboard/top-establishments-widget.tsx
new file mode 100644
index 0000000..124792b
--- /dev/null
+++ b/components/dashboard/top-establishments-widget.tsx
@@ -0,0 +1,101 @@
+import MoneyValues from "@/components/money-values";
+import type { TopEstablishmentsData } from "@/lib/dashboard/top-establishments";
+import { RiStore2Line } from "@remixicon/react";
+import Image from "next/image";
+import { WidgetEmptyState } from "../widget-empty-state";
+
+type TopEstablishmentsWidgetProps = {
+  data: TopEstablishmentsData;
+};
+
+const resolveLogoPath = (logo: string | null) => {
+  if (!logo) {
+    return null;
+  }
+  if (/^(https?:\/\/|data:)/.test(logo)) {
+    return logo;
+  }
+  return logo.startsWith("/") ? logo : `/logos/${logo}`;
+};
+
+const buildInitials = (value: string) => {
+  const parts = value.trim().split(/\s+/).filter(Boolean);
+  if (parts.length === 0) {
+    return "LC";
+  }
+  if (parts.length === 1) {
+    const firstPart = parts[0];
+    return firstPart ? firstPart.slice(0, 2).toUpperCase() : "LC";
+  }
+  const firstChar = parts[0]?.[0] ?? "";
+  const secondChar = parts[1]?.[0] ?? "";
+  return `${firstChar}${secondChar}`.toUpperCase() || "LC";
+};
+
+const formatOccurrencesLabel = (occurrences: number) => {
+  if (occurrences === 1) {
+    return "1 lançamento";
+  }
+  return `${occurrences} lançamentos`;
+};
+
+export function TopEstablishmentsWidget({
+  data,
+}: TopEstablishmentsWidgetProps) {
+  return (
+    <div className="flex flex-col px-0">
+      {data.establishments.length === 0 ? (
+        <WidgetEmptyState
+          icon={<RiStore2Line className="size-6 text-muted-foreground" />}
+          title="Nenhum estabelecimento encontrado"
+          description="Quando houver despesas registradas, elas aparecerão aqui."
+        />
+      ) : (
+        <ul className="flex flex-col">
+          {data.establishments.map((establishment) => {
+            const logo = resolveLogoPath(establishment.logo);
+            const initials = buildInitials(establishment.name);
+
+            return (
+              <li
+                key={establishment.id}
+                className="flex items-center justify-between gap-3 border-b border-dashed py-2 last:border-b-0 last:pb-0"
+              >
+                <div className="flex min-w-0 flex-1 items-center gap-3">
+                  <div className="flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-muted">
+                    {logo ? (
+                      <Image
+                        src={logo}
+                        alt={`Logo de ${establishment.name}`}
+                        width={48}
+                        height={48}
+                        className="h-full w-full object-contain"
+                      />
+                    ) : (
+                      <span className="text-sm font-semibold uppercase text-muted-foreground">
+                        {initials}
+                      </span>
+                    )}
+                  </div>
+
+                  <div className="min-w-0">
+                    <p className="truncate text-sm font-medium text-foreground">
+                      {establishment.name}
+                    </p>
+                    <p className="text-xs text-muted-foreground">
+                      {formatOccurrencesLabel(establishment.occurrences)}
+                    </p>
+                  </div>
+                </div>
+
+                <div className="shrink-0 text-foreground">
+                  <MoneyValues amount={establishment.amount} />
+                </div>
+              </li>
+            );
+          })}
+        </ul>
+      )}
+    </div>
+  );
+}
diff --git a/components/dashboard/top-expenses-widget.tsx b/components/dashboard/top-expenses-widget.tsx
new file mode 100644
index 0000000..1d8f4f6
--- /dev/null
+++ b/components/dashboard/top-expenses-widget.tsx
@@ -0,0 +1,177 @@
+"use client";
+
+import MoneyValues from "@/components/money-values";
+import { Switch } from "@/components/ui/switch";
+import type { TopExpense, TopExpensesData } from "@/lib/dashboard/expenses/top-expenses";
+import { RiArrowUpDoubleLine } from "@remixicon/react";
+import Image from "next/image";
+import { useMemo, useState } from "react";
+import { WidgetEmptyState } from "../widget-empty-state";
+
+type TopExpensesWidgetProps = {
+  allExpenses: TopExpensesData;
+  cardOnlyExpenses: TopExpensesData;
+};
+
+const resolveLogoPath = (logo: string | null) => {
+  if (!logo) {
+    return null;
+  }
+  if (/^(https?:\/\/|data:)/.test(logo)) {
+    return logo;
+  }
+  return logo.startsWith("/") ? logo : `/logos/${logo}`;
+};
+
+const buildInitials = (value: string) => {
+  const parts = value.trim().split(/\s+/).filter(Boolean);
+  if (parts.length === 0) {
+    return "LC";
+  }
+  if (parts.length === 1) {
+    const firstPart = parts[0];
+    return firstPart ? firstPart.slice(0, 2).toUpperCase() : "LC";
+  }
+  const firstChar = parts[0]?.[0] ?? "";
+  const secondChar = parts[1]?.[0] ?? "";
+  return `${firstChar}${secondChar}`.toUpperCase() || "LC";
+};
+
+const formatTransactionDate = (date: Date) => {
+  const formatter = new Intl.DateTimeFormat("pt-BR", {
+    weekday: "short",
+    day: "2-digit",
+    month: "short",
+    timeZone: "UTC",
+  });
+
+  const formatted = formatter.format(date);
+  // Capitaliza a primeira letra do dia da semana
+  return formatted.charAt(0).toUpperCase() + formatted.slice(1);
+};
+
+const shouldIncludeExpense = (expense: TopExpense) => {
+  const normalizedName = expense.name.trim().toLowerCase();
+
+  if (normalizedName === "saldo inicial") {
+    return false;
+  }
+
+  if (normalizedName.includes("fatura")) {
+    return false;
+  }
+
+  return true;
+};
+
+const isCardExpense = (expense: TopExpense) =>
+  expense.paymentMethod?.toLowerCase().includes("cartão") ?? false;
+
+export function TopExpensesWidget({
+  allExpenses,
+  cardOnlyExpenses,
+}: TopExpensesWidgetProps) {
+  const [cardOnly, setCardOnly] = useState(false);
+  const normalizedAllExpenses = useMemo(() => {
+    return allExpenses.expenses.filter(shouldIncludeExpense);
+  }, [allExpenses]);
+
+  const normalizedCardOnlyExpenses = useMemo(() => {
+    const merged = [...cardOnlyExpenses.expenses, ...normalizedAllExpenses];
+    const seen = new Set<string>();
+
+    return merged.filter((expense) => {
+      if (seen.has(expense.id)) {
+        return false;
+      }
+
+      if (!isCardExpense(expense) || !shouldIncludeExpense(expense)) {
+        return false;
+      }
+
+      seen.add(expense.id);
+      return true;
+    });
+  }, [cardOnlyExpenses, normalizedAllExpenses]);
+
+  const data = cardOnly
+    ? { expenses: normalizedCardOnlyExpenses }
+    : { expenses: normalizedAllExpenses };
+
+  return (
+    <div className="flex flex-col gap-4 px-0">
+      <div className="flex items-center justify-between gap-3">
+        <label
+          htmlFor="card-only-toggle"
+          className="text-sm text-muted-foreground"
+        >
+          {cardOnly
+            ? "Somente cartões de crédito ou débito."
+            : "Todas as despesas"}
+        </label>
+        <Switch
+          id="card-only-toggle"
+          checked={cardOnly}
+          onCheckedChange={setCardOnly}
+        />
+      </div>
+
+      {data.expenses.length === 0 ? (
+        <div className="-mt-10">
+          <WidgetEmptyState
+            icon={
+              <RiArrowUpDoubleLine className="size-6 text-muted-foreground" />
+            }
+            title="Nenhuma despesa encontrada"
+            description="Quando houver despesas registradas, elas aparecerão aqui."
+          />
+        </div>
+      ) : (
+        <ul className="flex flex-col">
+          {data.expenses.map((expense) => {
+            const logo = resolveLogoPath(expense.logo);
+            const initials = buildInitials(expense.name);
+
+            return (
+              <li
+                key={expense.id}
+                className="flex items-center justify-between gap-3 border-b border-dashed py-2 last:border-b-0 last:pb-0"
+              >
+                <div className="flex min-w-0 flex-1 items-center gap-3">
+                  <div className="flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-muted">
+                    {logo ? (
+                      <Image
+                        src={logo}
+                        alt={`Logo de ${expense.name}`}
+                        width={48}
+                        height={48}
+                        className="h-full w-full object-contain"
+                      />
+                    ) : (
+                      <span className="text-sm font-semibold uppercase text-muted-foreground">
+                        {initials}
+                      </span>
+                    )}
+                  </div>
+
+                  <div className="min-w-0">
+                    <p className="truncate text-sm font-medium text-foreground">
+                      {expense.name}
+                    </p>
+                    <p className="text-xs text-muted-foreground">
+                      {formatTransactionDate(expense.purchaseDate)}
+                    </p>
+                  </div>
+                </div>
+
+                <div className="shrink-0 text-foreground">
+                  <MoneyValues amount={expense.amount} />
+                </div>
+              </li>
+            );
+          })}
+        </ul>
+      )}
+    </div>
+  );
+}
diff --git a/components/dot-icon.tsx b/components/dot-icon.tsx
new file mode 100644
index 0000000..8e693d2
--- /dev/null
+++ b/components/dot-icon.tsx
@@ -0,0 +1,11 @@
+type DotIconProps = {
+  bg_dot: string;
+};
+
+export default function DotIcon({ bg_dot }: DotIconProps) {
+  return (
+    <span>
+      <span className={`${bg_dot} flex h-2 w-2 rounded-full`}></span>
+    </span>
+  );
+}
diff --git a/components/empty-state.tsx b/components/empty-state.tsx
new file mode 100644
index 0000000..cd2e49e
--- /dev/null
+++ b/components/empty-state.tsx
@@ -0,0 +1,53 @@
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from "@/components/ui/empty";
+import { cn } from "@/lib/utils/ui";
+import type { ReactNode } from "react";
+
+interface EmptyStateProps {
+  title: ReactNode;
+  description?: ReactNode;
+  action?: ReactNode;
+  media?: ReactNode;
+  mediaVariant?: "default" | "icon";
+  className?: string;
+  contentClassName?: string;
+  children?: ReactNode;
+}
+
+export function EmptyState({
+  title,
+  description,
+  media,
+  mediaVariant = "default",
+  className,
+  contentClassName,
+  children,
+}: EmptyStateProps) {
+  const hasContent = Boolean(children);
+
+  return (
+    <Empty className={cn("w-full max-w-xl min-h-[320px]", className)}>
+      <EmptyHeader>
+        {media ? (
+          <EmptyMedia variant={mediaVariant} className="mb-0">
+            {media}
+          </EmptyMedia>
+        ) : null}
+        <EmptyTitle>{title}</EmptyTitle>
+        {description ? (
+          <EmptyDescription>{description}</EmptyDescription>
+        ) : null}
+      </EmptyHeader>
+
+      {hasContent ? (
+        <EmptyContent className={cn(contentClassName)}>{children}</EmptyContent>
+      ) : null}
+    </Empty>
+  );
+}
diff --git a/components/faturas/edit-payment-date-dialog.tsx b/components/faturas/edit-payment-date-dialog.tsx
new file mode 100644
index 0000000..e07fb6a
--- /dev/null
+++ b/components/faturas/edit-payment-date-dialog.tsx
@@ -0,0 +1,75 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { DatePicker } from "@/components/ui/date-picker";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Label } from "@/components/ui/label";
+import { useState } from "react";
+
+type EditPaymentDateDialogProps = {
+  trigger: React.ReactNode;
+  currentDate: Date;
+  onDateChange: (date: Date) => void;
+};
+
+export function EditPaymentDateDialog({
+  trigger,
+  currentDate,
+  onDateChange,
+}: EditPaymentDateDialogProps) {
+  const [open, setOpen] = useState(false);
+  const [selectedDate, setSelectedDate] = useState<Date>(currentDate);
+
+  const handleSave = () => {
+    onDateChange(selectedDate);
+    setOpen(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>{trigger}</DialogTrigger>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>Editar data de pagamento</DialogTitle>
+          <DialogDescription>
+            Selecione a data em que o pagamento foi realizado.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="space-y-4 py-4">
+          <div className="space-y-2">
+            <Label htmlFor="payment-date">Data de pagamento</Label>
+            <DatePicker
+              id="payment-date"
+              value={selectedDate.toISOString().split("T")[0] ?? ""}
+              onChange={(value) => {
+                if (value) {
+                  setSelectedDate(new Date(value));
+                }
+              }}
+            />
+          </div>
+        </div>
+        <DialogFooter>
+          <Button
+            type="button"
+            variant="outline"
+            onClick={() => setOpen(false)}
+          >
+            Cancelar
+          </Button>
+          <Button type="button" onClick={handleSave}>
+            Salvar
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/components/faturas/invoice-summary-card.tsx b/components/faturas/invoice-summary-card.tsx
new file mode 100644
index 0000000..3ceaad6
--- /dev/null
+++ b/components/faturas/invoice-summary-card.tsx
@@ -0,0 +1,361 @@
+"use client";
+
+import {
+  updateInvoicePaymentStatusAction,
+  updatePaymentDateAction,
+} from "@/app/(dashboard)/cartoes/[cartaoId]/fatura/actions";
+import DotIcon from "@/components/dot-icon";
+import MoneyValues from "@/components/money-values";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  INVOICE_PAYMENT_STATUS,
+  INVOICE_STATUS_BADGE_VARIANT,
+  INVOICE_STATUS_DESCRIPTION,
+  INVOICE_STATUS_LABEL,
+  type InvoicePaymentStatus,
+} from "@/lib/faturas";
+import { cn } from "@/lib/utils/ui";
+import { RiEditLine } from "@remixicon/react";
+import Image from "next/image";
+import { useRouter } from "next/navigation";
+import { useEffect, useMemo, useState, useTransition } from "react";
+import { toast } from "sonner";
+import { EditPaymentDateDialog } from "./edit-payment-date-dialog";
+
+type InvoiceSummaryCardProps = {
+  cartaoId: string;
+  period: string;
+  cardName: string;
+  cardBrand: string | null;
+  cardStatus: string | null;
+  closingDay: string;
+  dueDay: string;
+  periodLabel: string;
+  totalAmount: number;
+  limitAmount: number | null;
+  invoiceStatus: InvoicePaymentStatus;
+  paymentDate: Date | null;
+  logo?: string | null;
+  actions?: React.ReactNode;
+};
+
+const BRAND_ASSETS: Record<string, string> = {
+  visa: "/bandeiras/visa.svg",
+  mastercard: "/bandeiras/mastercard.svg",
+  amex: "/bandeiras/amex.svg",
+  american: "/bandeiras/amex.svg",
+  elo: "/bandeiras/elo.svg",
+  hipercard: "/bandeiras/hipercard.svg",
+  hiper: "/bandeiras/hipercard.svg",
+};
+
+const resolveBrandAsset = (brand: string) => {
+  const normalized = brand.trim().toLowerCase();
+
+  const match = (
+    Object.keys(BRAND_ASSETS) as Array<keyof typeof BRAND_ASSETS>
+  ).find((entry) => normalized.includes(entry));
+
+  return match ? BRAND_ASSETS[match] : null;
+};
+
+const actionLabelByStatus: Record<InvoicePaymentStatus, string> = {
+  [INVOICE_PAYMENT_STATUS.PENDING]: "Marcar como paga",
+  [INVOICE_PAYMENT_STATUS.PAID]: "Desfazer pagamento",
+};
+
+const actionVariantByStatus: Record<
+  InvoicePaymentStatus,
+  "default" | "outline"
+> = {
+  [INVOICE_PAYMENT_STATUS.PENDING]: "default",
+  [INVOICE_PAYMENT_STATUS.PAID]: "outline",
+};
+
+const formatDay = (value: string) => value.padStart(2, "0");
+
+const resolveLogoPath = (logo?: string | null) => {
+  if (!logo) return null;
+  if (
+    logo.startsWith("http://") ||
+    logo.startsWith("https://") ||
+    logo.startsWith("data:")
+  ) {
+    return logo;
+  }
+
+  return logo.startsWith("/") ? logo : `/logos/${logo}`;
+};
+
+const getCardStatusDotColor = (status: string | null) => {
+  if (!status) return "bg-gray-400";
+  const normalizedStatus = status.toLowerCase();
+  if (normalizedStatus === "ativo" || normalizedStatus === "active") {
+    return "bg-green-500";
+  }
+  return "bg-gray-400";
+};
+
+export function InvoiceSummaryCard({
+  cartaoId,
+  period,
+  cardName,
+  cardBrand,
+  cardStatus,
+  closingDay,
+  dueDay,
+  periodLabel,
+  totalAmount,
+  limitAmount,
+  invoiceStatus,
+  paymentDate: initialPaymentDate,
+  logo,
+  actions,
+}: InvoiceSummaryCardProps) {
+  const router = useRouter();
+  const [isPending, startTransition] = useTransition();
+  const [paymentDate, setPaymentDate] = useState<Date>(
+    initialPaymentDate ?? new Date()
+  );
+
+  // Atualizar estado quando initialPaymentDate mudar
+  useEffect(() => {
+    if (initialPaymentDate) {
+      setPaymentDate(initialPaymentDate);
+    }
+  }, [initialPaymentDate]);
+
+  const logoPath = useMemo(() => resolveLogoPath(logo), [logo]);
+
+  const brandAsset = useMemo(
+    () => (cardBrand ? resolveBrandAsset(cardBrand) : null),
+    [cardBrand]
+  );
+
+  const limitLabel = useMemo(() => {
+    if (typeof limitAmount !== "number") return "—";
+    return limitAmount.toLocaleString("pt-BR", {
+      style: "currency",
+      currency: "BRL",
+      maximumFractionDigits: 2,
+    });
+  }, [limitAmount]);
+
+  const targetStatus =
+    invoiceStatus === INVOICE_PAYMENT_STATUS.PAID
+      ? INVOICE_PAYMENT_STATUS.PENDING
+      : INVOICE_PAYMENT_STATUS.PAID;
+
+  const handleAction = () => {
+    startTransition(async () => {
+      const result = await updateInvoicePaymentStatusAction({
+        cartaoId,
+        period,
+        status: targetStatus,
+        paymentDate:
+          targetStatus === INVOICE_PAYMENT_STATUS.PAID
+            ? paymentDate.toISOString().split("T")[0]
+            : undefined,
+      });
+
+      if (result.success) {
+        toast.success(result.message);
+        router.refresh();
+        return;
+      }
+
+      toast.error(result.error);
+    });
+  };
+
+  const handleDateChange = (newDate: Date) => {
+    setPaymentDate(newDate);
+    startTransition(async () => {
+      const result = await updatePaymentDateAction({
+        cartaoId,
+        period,
+        paymentDate: newDate.toISOString().split("T")[0] ?? "",
+      });
+
+      if (result.success) {
+        toast.success(result.message);
+        router.refresh();
+        return;
+      }
+
+      toast.error(result.error);
+    });
+  };
+
+  return (
+    <Card className="border">
+      <CardHeader className="flex flex-col gap-3">
+        <div className="flex items-start gap-3">
+          {logoPath ? (
+            <div className="flex size-12 shrink-0 items-center justify-center overflow-hidden rounded-lg border border-border/60 bg-background">
+              <Image
+                src={logoPath}
+                alt={`Logo do cartão ${cardName}`}
+                width={48}
+                height={48}
+                className="h-full w-full object-contain"
+              />
+            </div>
+          ) : cardBrand ? (
+            <span className="flex size-12 shrink-0 items-center justify-center rounded-lg border border-border/60 bg-background text-sm font-semibold text-muted-foreground">
+              {cardBrand}
+            </span>
+          ) : null}
+
+          <div className="flex w-full items-start justify-between gap-3">
+            <div className="space-y-1">
+              <CardTitle className="text-xl font-semibold text-foreground">
+                {cardName}
+              </CardTitle>
+              <p className="text-sm text-muted-foreground">
+                Fatura de {periodLabel}
+              </p>
+            </div>
+            {actions ? <div className="shrink-0">{actions}</div> : null}
+          </div>
+        </div>
+      </CardHeader>
+
+      <CardContent className="space-y-4 border-t border-border/60 border-dashed pt-4">
+        {/* Destaque Principal */}
+        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+          <DetailItem
+            label="Valor total"
+            value={
+              <MoneyValues
+                amount={totalAmount}
+                className="text-2xl text-foreground"
+              />
+            }
+          />
+          <DetailItem
+            label="Status da fatura"
+            value={
+              <Badge
+                variant={INVOICE_STATUS_BADGE_VARIANT[invoiceStatus]}
+                className="text-xs"
+              >
+                {INVOICE_STATUS_LABEL[invoiceStatus]}
+              </Badge>
+            }
+          />
+        </div>
+
+        {/* Informações Gerais */}
+        <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
+          <DetailItem
+            label="Fechamento"
+            value={
+              <span className="font-medium">Dia {formatDay(closingDay)}</span>
+            }
+          />
+          <DetailItem
+            label="Vencimento"
+            value={<span className="font-medium">Dia {formatDay(dueDay)}</span>}
+          />
+          <DetailItem
+            label="Bandeira"
+            value={
+              brandAsset ? (
+                <div className="flex items-center gap-2">
+                  <Image
+                    src={brandAsset}
+                    alt={`Bandeira ${cardBrand}`}
+                    width={32}
+                    height={32}
+                    className="h-5 w-auto rounded"
+                  />
+                  <span className="truncate">{cardBrand}</span>
+                </div>
+              ) : cardBrand ? (
+                <span className="truncate">{cardBrand}</span>
+              ) : (
+                <span className="text-muted-foreground">—</span>
+              )
+            }
+          />
+          <DetailItem
+            label="Status cartão"
+            value={
+              cardStatus ? (
+                <div className="flex items-center gap-1.5">
+                  <DotIcon bg_dot={getCardStatusDotColor(cardStatus)} />
+                  <span className="truncate">{cardStatus}</span>
+                </div>
+              ) : (
+                <span className="text-muted-foreground">—</span>
+              )
+            }
+          />
+        </div>
+
+        <DetailItem
+          label="Limite do cartão"
+          value={limitLabel}
+          className="sm:w-1/2"
+        />
+
+        {/* Ações */}
+        <div className="flex flex-col gap-2 pt-2 sm:flex-row sm:items-center sm:justify-between">
+          <p className="text-xs text-muted-foreground">
+            {INVOICE_STATUS_DESCRIPTION[invoiceStatus]}
+          </p>
+          <div className="flex items-center gap-2">
+            <Button
+              type="button"
+              variant={actionVariantByStatus[invoiceStatus]}
+              disabled={isPending}
+              onClick={handleAction}
+              className="w-full shrink-0 sm:w-auto"
+            >
+              {isPending ? "Salvando..." : actionLabelByStatus[invoiceStatus]}
+            </Button>
+            {invoiceStatus === INVOICE_PAYMENT_STATUS.PAID && (
+              <EditPaymentDateDialog
+                trigger={
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon"
+                    className="shrink-0"
+                    aria-label="Editar data de pagamento"
+                  >
+                    <RiEditLine className="size-4" />
+                  </Button>
+                }
+                currentDate={paymentDate}
+                onDateChange={handleDateChange}
+              />
+            )}
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+type DetailItemProps = {
+  label?: string;
+  value: React.ReactNode;
+  className?: string;
+};
+
+function DetailItem({ label, value, className }: DetailItemProps) {
+  return (
+    <div className={cn("space-y-1", className)}>
+      {label && (
+        <span className="block text-xs font-medium uppercase text-muted-foreground/80">
+          {label}
+        </span>
+      )}
+      <div className="text-base text-foreground">{value}</div>
+    </div>
+  );
+}
diff --git a/components/header-dashboard.tsx b/components/header-dashboard.tsx
new file mode 100644
index 0000000..72c414e
--- /dev/null
+++ b/components/header-dashboard.tsx
@@ -0,0 +1,32 @@
+import { NotificationBell } from "@/components/notifications/notification-bell";
+import { SidebarTrigger } from "@/components/ui/sidebar";
+import type { DashboardNotificationsSnapshot } from "@/lib/dashboard/notifications";
+import LogoutButton from "./auth/logout-button";
+import { AnimatedThemeToggler } from "./animated-theme-toggler";
+import { PrivacyModeToggle } from "./privacy-mode-toggle";
+import { CalculatorDialogButton } from "./calculadora/calculator-dialog";
+
+type SiteHeaderProps = {
+  notificationsSnapshot: DashboardNotificationsSnapshot;
+};
+
+export function SiteHeader({ notificationsSnapshot }: SiteHeaderProps) {
+  return (
+    <header className="border-b flex h-12 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12">
+      <div className="flex w-full items-center gap-1 px-4 lg:gap-2 lg:px-6">
+        <SidebarTrigger className="-ml-1" />
+        <div className="ml-auto flex items-center gap-2">
+          <CalculatorDialogButton withTooltip />
+          <span className="text-muted-foreground">|</span>
+          <NotificationBell
+            notifications={notificationsSnapshot.notifications}
+            totalCount={notificationsSnapshot.totalCount}
+          />
+          <PrivacyModeToggle />
+          <AnimatedThemeToggler />
+          <LogoutButton />
+        </div>
+      </div>
+    </header>
+  );
+}
diff --git a/components/insights/insights-grid.tsx b/components/insights/insights-grid.tsx
new file mode 100644
index 0000000..e78c8a7
--- /dev/null
+++ b/components/insights/insights-grid.tsx
@@ -0,0 +1,110 @@
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import type {
+  InsightCategoryId,
+  InsightsResponse,
+} from "@/lib/schemas/insights";
+import { INSIGHT_CATEGORIES } from "@/lib/schemas/insights";
+import { cn } from "@/lib/utils/ui";
+import {
+  RiChatAi3Line,
+  RiEyeLine,
+  RiFlashlightLine,
+  RiLightbulbLine,
+  RiRocketLine,
+  type RemixiconComponentType,
+} from "@remixicon/react";
+import { format } from "date-fns";
+import { ptBR } from "date-fns/locale";
+
+interface InsightsGridProps {
+  insights: InsightsResponse;
+}
+
+const CATEGORY_ICONS: Record<InsightCategoryId, RemixiconComponentType> = {
+  behaviors: RiEyeLine,
+  triggers: RiFlashlightLine,
+  recommendations: RiLightbulbLine,
+  improvements: RiRocketLine,
+};
+
+const CATEGORY_COLORS: Record<
+  InsightCategoryId,
+  { titleText: string; chatAiIcon: string }
+> = {
+  behaviors: {
+    titleText: "text-orange-700 dark:text-orange-400",
+    chatAiIcon: "text-orange-600 dark:text-orange-400",
+  },
+  triggers: {
+    titleText: "text-amber-700 dark:text-amber-400 ",
+    chatAiIcon: "text-amber-600 dark:text-amber-400",
+  },
+  recommendations: {
+    titleText: "text-sky-700 dark:text-sky-400",
+    chatAiIcon: "text-sky-600 dark:text-sky-400",
+  },
+  improvements: {
+    titleText: "text-emerald-700 dark:text-emerald-400",
+    chatAiIcon: "text-emerald-600 dark:text-emerald-400",
+  },
+};
+
+export function InsightsGrid({ insights }: InsightsGridProps) {
+  // Formatar o período para exibição
+  const [year, month] = insights.month.split("-");
+  const periodDate = new Date(parseInt(year), parseInt(month) - 1);
+  const formattedPeriod = format(periodDate, "MMMM 'de' yyyy", {
+    locale: ptBR,
+  });
+
+  return (
+    <div className="space-y-6">
+      <div className="space-y-2 px-1 text-muted-foreground">
+        <p>
+          No período selecionado ({formattedPeriod}), identificamos os
+          principais comportamentos e gatilhos que impactaram seu padrão de
+          consumo.
+        </p>
+        <p>Segue um panorama prático com recomendações acionáveis.</p>
+      </div>
+
+      {/* Grid de Cards */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+        {insights.categories.map((categoryData) => {
+          const categoryConfig = INSIGHT_CATEGORIES[categoryData.category];
+          const colors = CATEGORY_COLORS[categoryData.category];
+          const Icon = CATEGORY_ICONS[categoryData.category];
+
+          return (
+            <Card
+              key={categoryData.category}
+              className="relative overflow-hidden"
+            >
+              <CardHeader>
+                <div className="flex items-center gap-2">
+                  <Icon className={cn("size-5", colors.chatAiIcon)} />
+                  <CardTitle className={cn("font-semibold", colors.titleText)}>
+                    {categoryConfig.title}
+                  </CardTitle>
+                </div>
+              </CardHeader>
+              <CardContent>
+                {categoryData.items.map((item, index) => (
+                  <div
+                    key={index}
+                    className="flex flex-1 border-b border-dashed py-2.5 gap-2 items-start last:border-0"
+                  >
+                    <RiChatAi3Line
+                      className={cn("size-4 shrink-0", colors.chatAiIcon)}
+                    />
+                    <span className="text-sm">{item.text}</span>
+                  </div>
+                ))}
+              </CardContent>
+            </Card>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
diff --git a/components/insights/insights-page.tsx b/components/insights/insights-page.tsx
new file mode 100644
index 0000000..f59abe7
--- /dev/null
+++ b/components/insights/insights-page.tsx
@@ -0,0 +1,255 @@
+"use client";
+
+import {
+  generateInsightsAction,
+  loadSavedInsightsAction,
+  saveInsightsAction,
+  deleteSavedInsightsAction,
+} from "@/app/(dashboard)/insights/actions";
+import { DEFAULT_MODEL } from "@/app/(dashboard)/insights/data";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+import type { InsightsResponse } from "@/lib/schemas/insights";
+import { RiDeleteBinLine, RiSaveLine, RiSparklingLine } from "@remixicon/react";
+import { useEffect, useState, useTransition } from "react";
+import { toast } from "sonner";
+import { EmptyState } from "../empty-state";
+import { InsightsGrid } from "./insights-grid";
+import { ModelSelector } from "./model-selector";
+import { format } from "date-fns";
+import { ptBR } from "date-fns/locale";
+
+interface InsightsPageProps {
+  period: string;
+  onAnalyze?: () => void;
+}
+
+export function InsightsPage({ period, onAnalyze }: InsightsPageProps) {
+  const [selectedModel, setSelectedModel] = useState(DEFAULT_MODEL);
+  const [insights, setInsights] = useState<InsightsResponse | null>(null);
+  const [isPending, startTransition] = useTransition();
+  const [isSaving, startSaveTransition] = useTransition();
+  const [error, setError] = useState<string | null>(null);
+  const [isSaved, setIsSaved] = useState(false);
+  const [savedDate, setSavedDate] = useState<Date | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+
+  // Carregar insights salvos ao montar o componente
+  useEffect(() => {
+    const loadSaved = async () => {
+      try {
+        const result = await loadSavedInsightsAction(period);
+        if (result.success && result.data) {
+          setInsights(result.data.insights);
+          setSelectedModel(result.data.modelId);
+          setIsSaved(true);
+          setSavedDate(result.data.createdAt);
+        }
+      } catch (err) {
+        console.error("Error loading saved insights:", err);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    loadSaved();
+  }, [period]);
+
+  const handleAnalyze = () => {
+    setError(null);
+    setIsSaved(false);
+    setSavedDate(null);
+    onAnalyze?.();
+    startTransition(async () => {
+      try {
+        const result = await generateInsightsAction(period, selectedModel);
+
+        if (result.success) {
+          setInsights(result.data);
+          toast.success("Insights gerados com sucesso!");
+        } else {
+          setError(result.error);
+          toast.error(result.error);
+        }
+      } catch (err) {
+        const errorMessage = "Erro inesperado ao gerar insights.";
+        setError(errorMessage);
+        toast.error(errorMessage);
+        console.error("Error generating insights:", err);
+      }
+    });
+  };
+
+  const handleSave = () => {
+    if (!insights) return;
+
+    startSaveTransition(async () => {
+      try {
+        const result = await saveInsightsAction(period, selectedModel, insights);
+
+        if (result.success) {
+          setIsSaved(true);
+          setSavedDate(result.data.createdAt);
+          toast.success("Análise salva com sucesso!");
+        } else {
+          toast.error(result.error);
+        }
+      } catch (err) {
+        toast.error("Erro ao salvar análise.");
+        console.error("Error saving insights:", err);
+      }
+    });
+  };
+
+  const handleDelete = () => {
+    startSaveTransition(async () => {
+      try {
+        const result = await deleteSavedInsightsAction(period);
+
+        if (result.success) {
+          setIsSaved(false);
+          setSavedDate(null);
+          toast.success("Análise removida com sucesso!");
+        } else {
+          toast.error(result.error);
+        }
+      } catch (err) {
+        toast.error("Erro ao remover análise.");
+        console.error("Error deleting insights:", err);
+      }
+    });
+  };
+
+  return (
+    <div className="flex flex-col gap-6">
+      {/* Model Selector */}
+      <ModelSelector
+        value={selectedModel}
+        onValueChange={setSelectedModel}
+        disabled={isPending}
+      />
+
+      {/* Analyze Button */}
+      <div className="flex items-center gap-3 flex-wrap">
+        <Button
+          onClick={handleAnalyze}
+          disabled={isPending || isLoading}
+          className="bg-linear-to-r from-primary to-emerald-400 dark:from-primary-dark dark:to-emerald-600"
+        >
+          <RiSparklingLine className="mr-2 size-5" aria-hidden="true" />
+          {isPending ? "Analisando..." : "Gerar análise inteligente"}
+        </Button>
+
+        {insights && !error && (
+          <Button
+            onClick={isSaved ? handleDelete : handleSave}
+            disabled={isSaving || isPending || isLoading}
+            variant={isSaved ? "destructive" : "outline"}
+          >
+            {isSaved ? (
+              <>
+                <RiDeleteBinLine className="mr-2 size-4" />
+                {isSaving ? "Removendo..." : "Remover análise"}
+              </>
+            ) : (
+              <>
+                <RiSaveLine className="mr-2 size-4" />
+                {isSaving ? "Salvando..." : "Salvar análise"}
+              </>
+            )}
+          </Button>
+        )}
+
+        {isSaved && savedDate && (
+          <span className="text-sm text-muted-foreground">
+            Salva em {format(new Date(savedDate), "dd/MM/yyyy 'às' HH:mm", { locale: ptBR })}
+          </span>
+        )}
+      </div>
+
+      {/* Content Area */}
+      <div className="min-h-[400px]">
+        {(isPending || isLoading) && <LoadingState />}
+        {!isPending && !isLoading && !insights && !error && (
+          <Card className="flex min-h-[50vh] w-full items-center justify-center py-12">
+            <EmptyState
+              media={<RiSparklingLine className="size-6 text-primary" />}
+              title="Nenhuma análise realizada"
+              description="Clique no botão acima para gerar insights inteligentes sobre seus
+          dados financeiros do mês selecionado."
+            />
+          </Card>
+        )}
+        {!isPending && !isLoading && error && (
+          <ErrorState error={error} onRetry={handleAnalyze} />
+        )}
+        {!isPending && !isLoading && insights && !error && (
+          <InsightsGrid insights={insights} />
+        )}
+      </div>
+    </div>
+  );
+}
+
+function LoadingState() {
+  return (
+    <div className="space-y-6">
+      {/* Intro text skeleton */}
+      <div className="space-y-2 px-1">
+        <Skeleton className="h-5 w-full max-w-2xl" />
+        <Skeleton className="h-5 w-full max-w-md" />
+      </div>
+
+      {/* Grid de Cards */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+        {Array.from({ length: 4 }).map((_, i) => (
+          <Card key={i} className="relative overflow-hidden">
+            <CardHeader>
+              <div className="flex items-center gap-2">
+                <Skeleton className="size-5 rounded" />
+                <Skeleton className="h-5 w-32" />
+              </div>
+            </CardHeader>
+            <CardContent>
+              {Array.from({ length: 4 }).map((_, j) => (
+                <div
+                  key={j}
+                  className="flex flex-1 border-b border-dashed py-2.5 gap-2 items-start last:border-0"
+                >
+                  <Skeleton className="size-4 shrink-0 rounded" />
+                  <div className="flex-1 space-y-2">
+                    <Skeleton className="h-4 w-full" />
+                    <Skeleton className="h-4 w-3/4" />
+                  </div>
+                </div>
+              ))}
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function ErrorState({
+  error,
+  onRetry,
+}: {
+  error: string;
+  onRetry: () => void;
+}) {
+  return (
+    <div className="flex flex-col items-center justify-center gap-4 py-12 px-4 text-center">
+      <div className="flex flex-col gap-2">
+        <h3 className="text-lg font-semibold text-destructive">
+          Erro ao gerar insights
+        </h3>
+        <p className="text-sm text-muted-foreground max-w-md">{error}</p>
+      </div>
+      <Button onClick={onRetry} variant="outline">
+        Tentar novamente
+      </Button>
+    </div>
+  );
+}
diff --git a/components/insights/model-selector.tsx b/components/insights/model-selector.tsx
new file mode 100644
index 0000000..1f53c1a
--- /dev/null
+++ b/components/insights/model-selector.tsx
@@ -0,0 +1,236 @@
+"use client";
+
+import {
+  AVAILABLE_MODELS,
+  DEFAULT_PROVIDER,
+  PROVIDERS,
+  type AIProvider,
+} from "@/app/(dashboard)/insights/data";
+import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Input } from "@/components/ui/input";
+import { RiExternalLinkLine } from "@remixicon/react";
+import Image from "next/image";
+import { useEffect, useMemo, useState } from "react";
+import { Card } from "../ui/card";
+
+interface ModelSelectorProps {
+  value: string;
+  onValueChange: (value: string) => void;
+  disabled?: boolean;
+}
+
+const PROVIDER_ICON_PATHS: Record<
+  AIProvider,
+  { light: string; dark?: string }
+> = {
+  openai: {
+    light: "/providers/chatgpt.svg",
+    dark: "/providers/chatgpt_dark_mode.svg",
+  },
+  anthropic: {
+    light: "/providers/claude.svg",
+  },
+  google: {
+    light: "/providers/gemini.svg",
+  },
+  openrouter: {
+    light: "/providers/openrouter_light.svg",
+    dark: "/providers/openrouter_dark.svg",
+  },
+};
+
+export function ModelSelector({
+  value,
+  onValueChange,
+  disabled,
+}: ModelSelectorProps) {
+  // Estado para armazenar o provider selecionado manualmente
+  const [selectedProvider, setSelectedProvider] = useState<AIProvider | null>(
+    null
+  );
+  const [customModel, setCustomModel] = useState(value);
+
+  // Sincronizar customModel quando value mudar (importante para pré-carregamento)
+  useEffect(() => {
+    // Se o value tem "/" é um modelo OpenRouter customizado
+    if (value.includes("/")) {
+      setCustomModel(value);
+      setSelectedProvider("openrouter");
+    } else {
+      setCustomModel(value);
+      // Limpar selectedProvider para deixar o useMemo detectar automaticamente
+      setSelectedProvider(null);
+    }
+  }, [value]);
+
+  // Determinar provider atual baseado no modelo selecionado ou provider manual
+  const currentProvider = useMemo(() => {
+    // Se há um provider selecionado manualmente, use-o
+    if (selectedProvider) {
+      return selectedProvider;
+    }
+
+    // Se o modelo tem "/" é OpenRouter
+    if (value.includes("/")) {
+      return "openrouter";
+    }
+
+    // Caso contrário, tente detectar baseado no modelo
+    const model = AVAILABLE_MODELS.find((m) => m.id === value);
+    return model?.provider ?? DEFAULT_PROVIDER;
+  }, [value, selectedProvider]);
+
+  // Agrupar modelos por provider
+  const modelsByProvider = useMemo(() => {
+    const grouped: Record<
+      AIProvider,
+      Array<(typeof AVAILABLE_MODELS)[number]>
+    > = {
+      openai: [],
+      anthropic: [],
+      google: [],
+      openrouter: [],
+    };
+
+    AVAILABLE_MODELS.forEach((model) => {
+      grouped[model.provider].push(model);
+    });
+
+    return grouped;
+  }, []);
+
+  // Atualizar provider (seleciona primeiro modelo daquele provider)
+  const handleProviderChange = (newProvider: AIProvider) => {
+    setSelectedProvider(newProvider);
+
+    if (newProvider === "openrouter") {
+      // Para OpenRouter, usa o modelo customizado ou limpa o valor
+      onValueChange(customModel || "");
+      return;
+    }
+
+    const firstModel = modelsByProvider[newProvider][0];
+    if (firstModel) {
+      onValueChange(firstModel.id);
+    }
+  };
+
+  // Atualizar modelo customizado do OpenRouter
+  const handleCustomModelChange = (modelName: string) => {
+    setCustomModel(modelName);
+    onValueChange(modelName);
+  };
+
+  return (
+    <Card className="grid grid-cols-1 lg:grid-cols-[1fr,auto] gap-6 items-start p-6">
+      {/* Descrição */}
+      <div className="space-y-2">
+        <h3 className="text-lg font-semibold">Definir modelo de análise</h3>
+        <p className="text-sm text-muted-foreground leading-relaxed">
+          Escolha o provedor de IA e o modelo específico que será utilizado para
+          gerar insights sobre seus dados financeiros. <br />
+          Diferentes modelos podem oferecer perspectivas variadas na análise.
+        </p>
+      </div>
+
+      {/* Seletor */}
+      <div className="flex flex-col gap-4 min-w-xs">
+        <RadioGroup
+          value={currentProvider}
+          onValueChange={(v) => handleProviderChange(v as AIProvider)}
+          disabled={disabled}
+          className="gap-3"
+        >
+          {(Object.keys(PROVIDERS) as AIProvider[]).map((providerId) => {
+            const provider = PROVIDERS[providerId];
+            const iconPaths = PROVIDER_ICON_PATHS[providerId];
+
+            return (
+              <div key={providerId} className="flex items-center gap-3">
+                <RadioGroupItem
+                  value={providerId}
+                  id={`provider-${providerId}`}
+                  disabled={disabled}
+                />
+                <div className="size-6 relative">
+                  <Image
+                    src={iconPaths.light}
+                    alt={provider.name}
+                    width={22}
+                    height={22}
+                    className={iconPaths.dark ? "dark:hidden" : ""}
+                  />
+                  {iconPaths.dark && (
+                    <Image
+                      src={iconPaths.dark}
+                      alt={provider.name}
+                      width={22}
+                      height={22}
+                      className="hidden dark:block"
+                    />
+                  )}
+                </div>
+                <Label
+                  htmlFor={`provider-${providerId}`}
+                  className="text-sm font-medium cursor-pointer flex-1"
+                >
+                  {provider.name}
+                </Label>
+              </div>
+            );
+          })}
+        </RadioGroup>
+
+        {/* Seletor de Modelo */}
+        {currentProvider === "openrouter" ? (
+          <div className="space-y-2">
+            <Input
+              value={customModel}
+              onChange={(e) => handleCustomModelChange(e.target.value)}
+              placeholder="Ex: anthropic/claude-3.5-sonnet"
+              disabled={disabled}
+              className="border-none bg-neutral-200 dark:bg-neutral-800"
+            />
+            <a
+              href="https://openrouter.ai/models"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors"
+            >
+              <RiExternalLinkLine className="h-3 w-3" />
+              Ver modelos disponíveis no OpenRouter
+            </a>
+          </div>
+        ) : (
+          <Select
+            value={value}
+            onValueChange={onValueChange}
+            disabled={disabled}
+          >
+            <SelectTrigger
+              disabled={disabled}
+              className="border-none bg-neutral-200 dark:bg-neutral-800"
+            >
+              <SelectValue placeholder="Selecione um modelo" />
+            </SelectTrigger>
+            <SelectContent>
+              {modelsByProvider[currentProvider].map((model) => (
+                <SelectItem key={model.id} value={model.id}>
+                  {model.name}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        )}
+      </div>
+    </Card>
+  );
+}
diff --git a/components/lancamentos/dialogs/anticipate-installments-dialog/anticipate-installments-dialog.tsx b/components/lancamentos/dialogs/anticipate-installments-dialog/anticipate-installments-dialog.tsx
new file mode 100644
index 0000000..018f97d
--- /dev/null
+++ b/components/lancamentos/dialogs/anticipate-installments-dialog/anticipate-installments-dialog.tsx
@@ -0,0 +1,489 @@
+"use client";
+
+import {
+  createInstallmentAnticipationAction,
+  getEligibleInstallmentsAction,
+} from "@/app/(dashboard)/lancamentos/anticipation-actions";
+import { CategoryIcon } from "@/components/categorias/category-icon";
+import { InstallmentSelectionTable } from "./installment-selection-table";
+import { Button } from "@/components/ui/button";
+import { CurrencyInput } from "@/components/ui/currency-input";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+  Field,
+  FieldContent,
+  FieldGroup,
+  FieldLabel,
+  FieldLegend,
+} from "@/components/ui/field";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+import { useControlledState } from "@/hooks/use-controlled-state";
+import { useFormState } from "@/hooks/use-form-state";
+import type { EligibleInstallment } from "@/lib/installments/anticipation-types";
+import { RiLoader4Line } from "@remixicon/react";
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+  useTransition,
+} from "react";
+import { toast } from "sonner";
+import MoneyValues from "@/components/money-values";
+
+interface AnticipateInstallmentsDialogProps {
+  trigger?: React.ReactNode;
+  seriesId: string;
+  lancamentoName: string;
+  categorias: Array<{ id: string; name: string; icon: string | null }>;
+  pagadores: Array<{ id: string; name: string }>;
+  defaultPeriod: string;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}
+
+type AnticipationFormValues = {
+  anticipationPeriod: string;
+  discount: number;
+  pagadorId: string;
+  categoriaId: string;
+  note: string;
+};
+
+type SelectOption = {
+  value: string;
+  label: string;
+};
+
+const monthFormatter = new Intl.DateTimeFormat("pt-BR", {
+  month: "long",
+  year: "numeric",
+});
+
+const formatPeriodLabel = (period: string) => {
+  const [year, month] = period.split("-").map(Number);
+  if (!year || !month) {
+    return period;
+  }
+  const date = new Date(year, month - 1, 1);
+  if (Number.isNaN(date.getTime())) {
+    return period;
+  }
+  const label = monthFormatter.format(date);
+  return label.charAt(0).toUpperCase() + label.slice(1);
+};
+
+const buildPeriodOptions = (currentValue?: string): SelectOption[] => {
+  const now = new Date();
+  const options: SelectOption[] = [];
+
+  // Adiciona opções de 3 meses no passado até 6 meses no futuro
+  for (let offset = -3; offset <= 6; offset += 1) {
+    const date = new Date(now.getFullYear(), now.getMonth() + offset, 1);
+    const value = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(
+      2,
+      "0"
+    )}`;
+    options.push({ value, label: formatPeriodLabel(value) });
+  }
+
+  // Adiciona o valor atual se não estiver na lista
+  if (
+    currentValue &&
+    !options.some((option) => option.value === currentValue)
+  ) {
+    options.push({
+      value: currentValue,
+      label: formatPeriodLabel(currentValue),
+    });
+  }
+
+  return options.sort((a, b) => a.value.localeCompare(b.value));
+};
+
+export function AnticipateInstallmentsDialog({
+  trigger,
+  seriesId,
+  lancamentoName,
+  categorias,
+  pagadores,
+  defaultPeriod,
+  open,
+  onOpenChange,
+}: AnticipateInstallmentsDialogProps) {
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [isPending, startTransition] = useTransition();
+  const [isLoadingInstallments, setIsLoadingInstallments] = useState(false);
+  const [eligibleInstallments, setEligibleInstallments] = useState<
+    EligibleInstallment[]
+  >([]);
+  const [selectedIds, setSelectedIds] = useState<string[]>([]);
+
+  // Use controlled state hook for dialog open state
+  const [dialogOpen, setDialogOpen] = useControlledState(
+    open,
+    false,
+    onOpenChange
+  );
+
+  // Use form state hook for form management
+  const { formState, updateField, setFormState } =
+    useFormState<AnticipationFormValues>({
+      anticipationPeriod: defaultPeriod,
+      discount: 0,
+      pagadorId: "",
+      categoriaId: "",
+      note: "",
+    });
+
+  const periodOptions = useMemo(
+    () => buildPeriodOptions(formState.anticipationPeriod),
+    [formState.anticipationPeriod]
+  );
+
+  // Buscar parcelas elegíveis ao abrir o dialog
+  useEffect(() => {
+    if (dialogOpen) {
+      setIsLoadingInstallments(true);
+      setSelectedIds([]);
+      setErrorMessage(null);
+
+      getEligibleInstallmentsAction(seriesId)
+        .then((result) => {
+          if (result.success && result.data) {
+            setEligibleInstallments(result.data);
+
+            // Pré-preencher pagador e categoria da primeira parcela
+            if (result.data.length > 0) {
+              const first = result.data[0];
+              setFormState({
+                anticipationPeriod: defaultPeriod,
+                discount: 0,
+                pagadorId: first.pagadorId ?? "",
+                categoriaId: first.categoriaId ?? "",
+                note: "",
+              });
+            }
+          } else {
+            toast.error(result.error || "Erro ao carregar parcelas");
+            setEligibleInstallments([]);
+          }
+        })
+        .catch((error) => {
+          console.error("Erro ao buscar parcelas:", error);
+          toast.error("Erro ao carregar parcelas elegíveis");
+          setEligibleInstallments([]);
+        })
+        .finally(() => {
+          setIsLoadingInstallments(false);
+        });
+    }
+  }, [dialogOpen, seriesId, defaultPeriod, setFormState]);
+
+  const totalAmount = useMemo(() => {
+    return eligibleInstallments
+      .filter((inst) => selectedIds.includes(inst.id))
+      .reduce((sum, inst) => sum + Number(inst.amount), 0);
+  }, [eligibleInstallments, selectedIds]);
+
+  const finalAmount = useMemo(() => {
+    // Se for despesa (negativo), soma o desconto para reduzir
+    // Se for receita (positivo), subtrai o desconto
+    const discount = Number(formState.discount) || 0;
+    return totalAmount < 0 ? totalAmount + discount : totalAmount - discount;
+  }, [totalAmount, formState.discount]);
+
+  const handleSubmit = useCallback(
+    (event: React.FormEvent<HTMLFormElement>) => {
+      event.preventDefault();
+      setErrorMessage(null);
+
+      if (selectedIds.length === 0) {
+        const message = "Selecione pelo menos uma parcela para antecipar.";
+        setErrorMessage(message);
+        toast.error(message);
+        return;
+      }
+
+      if (formState.anticipationPeriod.length === 0) {
+        const message = "Informe o período da antecipação.";
+        setErrorMessage(message);
+        toast.error(message);
+        return;
+      }
+
+      const discount = Number(formState.discount) || 0;
+      if (discount > Math.abs(totalAmount)) {
+        const message =
+          "O desconto não pode ser maior que o valor total das parcelas.";
+        setErrorMessage(message);
+        toast.error(message);
+        return;
+      }
+
+      startTransition(async () => {
+        const result = await createInstallmentAnticipationAction({
+          seriesId,
+          installmentIds: selectedIds,
+          anticipationPeriod: formState.anticipationPeriod,
+          discount: Number(formState.discount) || 0,
+          pagadorId: formState.pagadorId || undefined,
+          categoriaId: formState.categoriaId || undefined,
+          note: formState.note || undefined,
+        });
+
+        if (result.success) {
+          toast.success(result.message);
+          setDialogOpen(false);
+        } else {
+          const errorMsg = result.error || "Erro ao criar antecipação";
+          setErrorMessage(errorMsg);
+          toast.error(errorMsg);
+        }
+      });
+    },
+    [selectedIds, formState, seriesId, setDialogOpen]
+  );
+
+  const handleCancel = useCallback(() => {
+    setDialogOpen(false);
+  }, [setDialogOpen]);
+
+  return (
+    <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+      {trigger && <DialogTrigger asChild>{trigger}</DialogTrigger>}
+      <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto px-6 py-5 sm:px-8 sm:py-6">
+        <DialogHeader>
+          <DialogTitle>Antecipar Parcelas</DialogTitle>
+          <DialogDescription>{lancamentoName}</DialogDescription>
+        </DialogHeader>
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          {/* Seção 1: Seleção de Parcelas */}
+          <FieldGroup className="gap-1">
+            <FieldLegend>Parcelas Disponíveis</FieldLegend>
+
+            {isLoadingInstallments ? (
+              <div className="flex items-center justify-center rounded-lg border border-dashed p-8">
+                <RiLoader4Line className="size-6 animate-spin text-muted-foreground" />
+                <span className="ml-2 text-sm text-muted-foreground">
+                  Carregando parcelas...
+                </span>
+              </div>
+            ) : (
+              <div className="max-h-[280px] overflow-y-auto rounded-lg border">
+                <InstallmentSelectionTable
+                  installments={eligibleInstallments}
+                  selectedIds={selectedIds}
+                  onSelectionChange={setSelectedIds}
+                />
+              </div>
+            )}
+          </FieldGroup>
+
+          {/* Seção 2: Configuração da Antecipação */}
+          <FieldGroup className="gap-1">
+            <FieldLegend>Configuração</FieldLegend>
+
+            <div className="grid gap-2 sm:grid-cols-2">
+              <Field className="gap-1">
+                <FieldLabel htmlFor="anticipation-period">Período</FieldLabel>
+                <FieldContent>
+                  <Select
+                    value={formState.anticipationPeriod}
+                    onValueChange={(value) =>
+                      updateField("anticipationPeriod", value)
+                    }
+                    disabled={isPending}
+                  >
+                    <SelectTrigger id="anticipation-period" className="w-full">
+                      <SelectValue placeholder="Selecione o período" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {periodOptions.map((option) => (
+                        <SelectItem key={option.value} value={option.value}>
+                          {option.label}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </FieldContent>
+              </Field>
+
+              <Field className="gap-1">
+                <FieldLabel htmlFor="anticipation-discount">
+                  Desconto
+                </FieldLabel>
+                <FieldContent>
+                  <CurrencyInput
+                    id="anticipation-discount"
+                    value={formState.discount}
+                    onValueChange={(value) =>
+                      updateField("discount", value ?? 0)
+                    }
+                    placeholder="R$ 0,00"
+                    disabled={isPending}
+                  />
+                </FieldContent>
+              </Field>
+
+              <Field className="gap-1">
+                <FieldLabel htmlFor="anticipation-pagador">Pagador</FieldLabel>
+                <FieldContent>
+                  <Select
+                    value={formState.pagadorId}
+                    onValueChange={(value) => updateField("pagadorId", value)}
+                    disabled={isPending}
+                  >
+                    <SelectTrigger id="anticipation-pagador" className="w-full">
+                      <SelectValue placeholder="Padrão" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {pagadores.map((pagador) => (
+                        <SelectItem key={pagador.id} value={pagador.id}>
+                          {pagador.name}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </FieldContent>
+              </Field>
+
+              <Field className="gap-1">
+                <FieldLabel htmlFor="anticipation-categoria">
+                  Categoria
+                </FieldLabel>
+                <FieldContent>
+                  <Select
+                    value={formState.categoriaId}
+                    onValueChange={(value) => updateField("categoriaId", value)}
+                    disabled={isPending}
+                  >
+                    <SelectTrigger
+                      id="anticipation-categoria"
+                      className="w-full"
+                    >
+                      <SelectValue placeholder="Padrão" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {categorias.map((categoria) => (
+                        <SelectItem key={categoria.id} value={categoria.id}>
+                          <div className="flex items-center gap-2">
+                            <CategoryIcon
+                              name={categoria.icon ?? undefined}
+                              className="size-4"
+                            />
+                            <span>{categoria.name}</span>
+                          </div>
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </FieldContent>
+              </Field>
+
+              <Field className="sm:col-span-2">
+                <FieldLabel htmlFor="anticipation-note">Observação</FieldLabel>
+                <FieldContent>
+                  <Textarea
+                    id="anticipation-note"
+                    value={formState.note}
+                    onChange={(e) => updateField("note", e.target.value)}
+                    placeholder="Observação (opcional)"
+                    rows={2}
+                    disabled={isPending}
+                  />
+                </FieldContent>
+              </Field>
+            </div>
+          </FieldGroup>
+
+          {/* Seção 3: Resumo */}
+          {selectedIds.length > 0 && (
+            <div className="rounded-lg border bg-muted/20 p-3">
+              <h4 className="text-sm font-semibold mb-2">Resumo</h4>
+              <dl className="space-y-1.5 text-sm">
+                <div className="flex items-center justify-between">
+                  <dt className="text-muted-foreground">
+                    {selectedIds.length} parcela
+                    {selectedIds.length > 1 ? "s" : ""}
+                  </dt>
+                  <dd className="font-medium tabular-nums">
+                    <MoneyValues amount={totalAmount} className="text-sm" />
+                  </dd>
+                </div>
+                {Number(formState.discount) > 0 && (
+                  <div className="flex items-center justify-between">
+                    <dt className="text-muted-foreground">Desconto</dt>
+                    <dd className="font-medium tabular-nums text-green-600">
+                      -{" "}
+                      <MoneyValues
+                        amount={Number(formState.discount)}
+                        className="text-sm"
+                      />
+                    </dd>
+                  </div>
+                )}
+                <div className="flex items-center justify-between border-t pt-1.5">
+                  <dt className="font-medium">Total</dt>
+                  <dd className="text-base font-semibold tabular-nums text-primary">
+                    <MoneyValues amount={finalAmount} className="text-sm" />
+                  </dd>
+                </div>
+              </dl>
+            </div>
+          )}
+
+          {/* Mensagem de erro */}
+          {errorMessage && (
+            <div
+              className="rounded-lg border border-destructive/50 bg-destructive/10 p-3 text-sm text-destructive"
+              role="alert"
+            >
+              {errorMessage}
+            </div>
+          )}
+
+          <DialogFooter className="gap-3">
+            <Button
+              type="button"
+              variant="outline"
+              onClick={handleCancel}
+              disabled={isPending}
+            >
+              Cancelar
+            </Button>
+            <Button
+              type="submit"
+              disabled={isPending || selectedIds.length === 0}
+            >
+              {isPending ? (
+                <>
+                  <RiLoader4Line className="mr-2 size-4 animate-spin" />
+                  Antecipando...
+                </>
+              ) : (
+                "Confirmar Antecipação"
+              )}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/components/lancamentos/dialogs/anticipate-installments-dialog/anticipation-history-dialog.tsx b/components/lancamentos/dialogs/anticipate-installments-dialog/anticipation-history-dialog.tsx
new file mode 100644
index 0000000..93dde4d
--- /dev/null
+++ b/components/lancamentos/dialogs/anticipate-installments-dialog/anticipation-history-dialog.tsx
@@ -0,0 +1,135 @@
+"use client";
+
+import { getInstallmentAnticipationsAction } from "@/app/(dashboard)/lancamentos/anticipation-actions";
+import { AnticipationCard } from "../../shared/anticipation-card";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription } from "@/components/ui/empty";
+import { useControlledState } from "@/hooks/use-controlled-state";
+import type { InstallmentAnticipationWithRelations } from "@/lib/installments/anticipation-types";
+import { useEffect, useState } from "react";
+import { toast } from "sonner";
+import { RiCalendarCheckLine, RiLoader4Line } from "@remixicon/react";
+
+interface AnticipationHistoryDialogProps {
+  trigger?: React.ReactNode;
+  seriesId: string;
+  lancamentoName: string;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  onViewLancamento?: (lancamentoId: string) => void;
+}
+
+export function AnticipationHistoryDialog({
+  trigger,
+  seriesId,
+  lancamentoName,
+  open,
+  onOpenChange,
+  onViewLancamento,
+}: AnticipationHistoryDialogProps) {
+  const [isLoading, setIsLoading] = useState(false);
+  const [anticipations, setAnticipations] = useState<
+    InstallmentAnticipationWithRelations[]
+  >([]);
+
+  // Use controlled state hook for dialog open state
+  const [dialogOpen, setDialogOpen] = useControlledState(
+    open,
+    false,
+    onOpenChange
+  );
+
+  // Buscar antecipações ao abrir o dialog
+  useEffect(() => {
+    if (dialogOpen) {
+      loadAnticipations();
+    }
+  }, [dialogOpen, seriesId]);
+
+  const loadAnticipations = async () => {
+    setIsLoading(true);
+
+    try {
+      const result = await getInstallmentAnticipationsAction(seriesId);
+
+      if (result.success && result.data) {
+        setAnticipations(result.data);
+      } else {
+        toast.error(result.error || "Erro ao carregar histórico de antecipações");
+        setAnticipations([]);
+      }
+    } catch (error) {
+      console.error("Erro ao buscar antecipações:", error);
+      toast.error("Erro ao carregar histórico de antecipações");
+      setAnticipations([]);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleCanceled = () => {
+    // Recarregar lista após cancelamento
+    loadAnticipations();
+  };
+
+  return (
+    <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+      {trigger && <DialogTrigger asChild>{trigger}</DialogTrigger>}
+      <DialogContent className="max-w-3xl px-6 py-5 sm:px-8 sm:py-6">
+        <DialogHeader>
+          <DialogTitle>Histórico de Antecipações</DialogTitle>
+          <DialogDescription>{lancamentoName}</DialogDescription>
+        </DialogHeader>
+
+        <div className="max-h-[60vh] space-y-4 overflow-y-auto pr-2">
+          {isLoading ? (
+            <div className="flex items-center justify-center rounded-lg border border-dashed p-12">
+              <RiLoader4Line className="size-6 animate-spin text-muted-foreground" />
+              <span className="ml-2 text-sm text-muted-foreground">
+                Carregando histórico...
+              </span>
+            </div>
+          ) : anticipations.length === 0 ? (
+            <Empty>
+              <EmptyHeader>
+                <EmptyMedia variant="icon">
+                  <RiCalendarCheckLine className="size-6 text-muted-foreground" />
+                </EmptyMedia>
+                <EmptyTitle>Nenhuma antecipação registrada</EmptyTitle>
+                <EmptyDescription>
+                  As antecipações realizadas para esta compra parcelada aparecerão aqui.
+                </EmptyDescription>
+              </EmptyHeader>
+            </Empty>
+          ) : (
+            anticipations.map((anticipation) => (
+              <AnticipationCard
+                key={anticipation.id}
+                anticipation={anticipation}
+                onViewLancamento={onViewLancamento}
+                onCanceled={handleCanceled}
+              />
+            ))
+          )}
+        </div>
+
+        {!isLoading && anticipations.length > 0 && (
+          <div className="border-t pt-4 text-center text-sm text-muted-foreground">
+            {anticipations.length}{" "}
+            {anticipations.length === 1
+              ? "antecipação encontrada"
+              : "antecipações encontradas"}
+          </div>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/components/lancamentos/dialogs/anticipate-installments-dialog/installment-selection-table.tsx b/components/lancamentos/dialogs/anticipate-installments-dialog/installment-selection-table.tsx
new file mode 100644
index 0000000..fcd9780
--- /dev/null
+++ b/components/lancamentos/dialogs/anticipate-installments-dialog/installment-selection-table.tsx
@@ -0,0 +1,155 @@
+"use client";
+
+import { Badge } from "@/components/ui/badge";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import type { EligibleInstallment } from "@/lib/installments/anticipation-types";
+import { formatCurrentInstallment } from "@/lib/installments/utils";
+import { cn } from "@/lib/utils/ui";
+import { format } from "date-fns";
+import { ptBR } from "date-fns/locale";
+import MoneyValues from "@/components/money-values";
+
+interface InstallmentSelectionTableProps {
+  installments: EligibleInstallment[];
+  selectedIds: string[];
+  onSelectionChange: (ids: string[]) => void;
+}
+
+export function InstallmentSelectionTable({
+  installments,
+  selectedIds,
+  onSelectionChange,
+}: InstallmentSelectionTableProps) {
+  const toggleSelection = (id: string) => {
+    const newSelection = selectedIds.includes(id)
+      ? selectedIds.filter((selectedId) => selectedId !== id)
+      : [...selectedIds, id];
+    onSelectionChange(newSelection);
+  };
+
+  const toggleAll = () => {
+    if (selectedIds.length === installments.length && installments.length > 0) {
+      onSelectionChange([]);
+    } else {
+      onSelectionChange(installments.map((inst) => inst.id));
+    }
+  };
+
+  const formatPeriod = (period: string) => {
+    const [year, month] = period.split("-");
+    const date = new Date(Number(year), Number(month) - 1);
+    return format(date, "MMM/yyyy", { locale: ptBR });
+  };
+
+  const formatDate = (date: Date | null) => {
+    if (!date) return "—";
+    return format(date, "dd/MM/yyyy", { locale: ptBR });
+  };
+
+  if (installments.length === 0) {
+    return (
+      <div className="rounded-lg border border-dashed p-8 text-center">
+        <p className="text-sm text-muted-foreground">
+          Nenhuma parcela elegível para antecipação encontrada.
+        </p>
+        <p className="mt-1 text-xs text-muted-foreground">
+          Todas as parcelas desta compra já foram pagas ou antecipadas.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="overflow-hidden rounded-lg border">
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead className="w-12">
+              <Checkbox
+                checked={
+                  selectedIds.length === installments.length &&
+                  installments.length > 0
+                }
+                onCheckedChange={toggleAll}
+                aria-label="Selecionar todas as parcelas"
+              />
+            </TableHead>
+            <TableHead>Parcela</TableHead>
+            <TableHead>Período</TableHead>
+            <TableHead>Vencimento</TableHead>
+            <TableHead className="text-right">Valor</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {installments.map((inst) => {
+            const isSelected = selectedIds.includes(inst.id);
+            return (
+              <TableRow
+                key={inst.id}
+                className={cn(
+                  "cursor-pointer transition-colors",
+                  isSelected && "bg-muted/50"
+                )}
+                onClick={() => toggleSelection(inst.id)}
+              >
+                <TableCell onClick={(e) => e.stopPropagation()}>
+                  <Checkbox
+                    checked={isSelected}
+                    onCheckedChange={() => toggleSelection(inst.id)}
+                    aria-label={`Selecionar parcela ${inst.currentInstallment}`}
+                  />
+                </TableCell>
+                <TableCell>
+                  <Badge variant="outline">
+                    {formatCurrentInstallment(
+                      inst.currentInstallment ?? 0,
+                      inst.installmentCount ?? 0
+                    )}
+                  </Badge>
+                </TableCell>
+                <TableCell className="font-medium">
+                  {formatPeriod(inst.period)}
+                </TableCell>
+                <TableCell className="text-muted-foreground">
+                  {formatDate(inst.dueDate)}
+                </TableCell>
+                <TableCell className="text-right font-semibold tabular-nums">
+                  <MoneyValues amount={Number(inst.amount)} />
+                </TableCell>
+              </TableRow>
+            );
+          })}
+        </TableBody>
+      </Table>
+
+      {selectedIds.length > 0 && (
+        <div className="border-t bg-muted/20 px-4 py-3">
+          <div className="flex items-center justify-between text-sm">
+            <span className="text-muted-foreground">
+              {selectedIds.length}{" "}
+              {selectedIds.length === 1
+                ? "parcela selecionada"
+                : "parcelas selecionadas"}
+            </span>
+            <span className="font-semibold">
+              Total:{" "}
+              <MoneyValues
+                amount={installments
+                  .filter((inst) => selectedIds.includes(inst.id))
+                  .reduce((sum, inst) => sum + Number(inst.amount), 0)}
+              />
+            </span>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/components/lancamentos/dialogs/bulk-action-dialog.tsx b/components/lancamentos/dialogs/bulk-action-dialog.tsx
new file mode 100644
index 0000000..95ad123
--- /dev/null
+++ b/components/lancamentos/dialogs/bulk-action-dialog.tsx
@@ -0,0 +1,162 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { useState } from "react";
+
+export type BulkActionScope = "current" | "future" | "all";
+
+type BulkActionDialogProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  actionType: "edit" | "delete";
+  seriesType: "installment" | "recurring";
+  currentNumber?: number;
+  totalCount?: number;
+  onConfirm: (scope: BulkActionScope) => void;
+};
+
+export function BulkActionDialog({
+  open,
+  onOpenChange,
+  actionType,
+  seriesType,
+  currentNumber,
+  totalCount,
+  onConfirm,
+}: BulkActionDialogProps) {
+  const [scope, setScope] = useState<BulkActionScope>("current");
+
+  const handleConfirm = () => {
+    onConfirm(scope);
+    onOpenChange(false);
+  };
+
+  const seriesLabel =
+    seriesType === "installment" ? "parcelamento" : "recorrência";
+  const actionLabel = actionType === "edit" ? "editar" : "remover";
+
+  const getDescription = () => {
+    if (seriesType === "installment" && currentNumber && totalCount) {
+      return `Este lançamento faz parte de um ${seriesLabel} (${currentNumber}/${totalCount}). Escolha o que deseja ${actionLabel}:`;
+    }
+    return `Este lançamento faz parte de uma ${seriesLabel}. Escolha o que deseja ${actionLabel}:`;
+  };
+
+  const getCurrentLabel = () => {
+    if (seriesType === "installment" && currentNumber) {
+      return `Apenas esta parcela (${currentNumber}/${totalCount})`;
+    }
+    return "Apenas este lançamento";
+  };
+
+  const getFutureLabel = () => {
+    if (seriesType === "installment" && currentNumber && totalCount) {
+      const remaining = totalCount - currentNumber + 1;
+      return `Esta e as próximas parcelas (${remaining} ${
+        remaining === 1 ? "parcela" : "parcelas"
+      })`;
+    }
+    return "Este e os próximos lançamentos";
+  };
+
+  const getAllLabel = () => {
+    if (seriesType === "installment" && totalCount) {
+      return `Todas as parcelas (${totalCount} ${
+        totalCount === 1 ? "parcela" : "parcelas"
+      })`;
+    }
+    return `Todos os lançamentos da ${seriesLabel}`;
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle className="capitalize">
+            {actionLabel} {seriesLabel}
+          </DialogTitle>
+          <DialogDescription>{getDescription()}</DialogDescription>
+        </DialogHeader>
+
+        <RadioGroup
+          value={scope}
+          onValueChange={(v) => setScope(v as BulkActionScope)}
+        >
+          <div className="space-y-4">
+            <div className="flex items-start space-x-3">
+              <RadioGroupItem value="current" id="current" className="mt-0.5" />
+              <div className="flex-1">
+                <Label
+                  htmlFor="current"
+                  className="text-sm cursor-pointer font-medium"
+                >
+                  {getCurrentLabel()}
+                </Label>
+                <p className="text-xs text-muted-foreground">
+                  Aplica a alteração apenas neste lançamento
+                </p>
+              </div>
+            </div>
+
+            <div className="flex items-start space-x-3">
+              <RadioGroupItem value="future" id="future" className="mt-0.5" />
+              <div className="flex-1">
+                <Label
+                  htmlFor="future"
+                  className="text-sm cursor-pointer font-medium"
+                >
+                  {getFutureLabel()}
+                </Label>
+                <p className="text-xs text-muted-foreground">
+                  Aplica a alteração neste e nos próximos lançamentos da série
+                </p>
+              </div>
+            </div>
+
+            <div className="flex items-start space-x-3">
+              <RadioGroupItem value="all" id="all" className="mt-0.5" />
+              <div className="flex-1">
+                <Label
+                  htmlFor="all"
+                  className="text-sm cursor-pointer font-medium"
+                >
+                  {getAllLabel()}
+                </Label>
+                <p className="text-xs text-muted-foreground">
+                  Aplica a alteração em todos os lançamentos da série
+                </p>
+              </div>
+            </div>
+          </div>
+        </RadioGroup>
+
+        <DialogFooter className="gap-2">
+          <Button
+            type="button"
+            variant="outline"
+            onClick={() => onOpenChange(false)}
+          >
+            Cancelar
+          </Button>
+          <Button
+            type="button"
+            onClick={handleConfirm}
+            variant={actionType === "delete" ? "destructive" : "default"}
+          >
+            Confirmar
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/components/lancamentos/dialogs/lancamento-details-dialog.tsx b/components/lancamentos/dialogs/lancamento-details-dialog.tsx
new file mode 100644
index 0000000..19a5b6d
--- /dev/null
+++ b/components/lancamentos/dialogs/lancamento-details-dialog.tsx
@@ -0,0 +1,210 @@
+"use client";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+} from "@/components/ui/card";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogFooter,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Separator } from "@/components/ui/separator";
+import { getPaymentMethodIcon } from "@/lib/utils/icons";
+import {
+  currencyFormatter,
+  formatCondition,
+  formatDate,
+  formatPeriod,
+  getTransactionBadgeVariant,
+} from "@/lib/lancamentos/formatting-helpers";
+import { InstallmentTimeline } from "../shared/installment-timeline";
+import type { LancamentoItem } from "../types";
+
+interface LancamentoDetailsDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  lancamento: LancamentoItem | null;
+}
+
+export function LancamentoDetailsDialog({
+  open,
+  onOpenChange,
+  lancamento,
+}: LancamentoDetailsDialogProps) {
+  if (!lancamento) return null;
+
+  const isInstallment =
+    lancamento.condition?.toLowerCase() === "parcelado" &&
+    lancamento.currentInstallment &&
+    lancamento.installmentCount;
+
+  const valorParcela = Math.abs(lancamento.amount);
+  const totalParcelas = lancamento.installmentCount ?? 1;
+  const parcelaAtual = lancamento.currentInstallment ?? 1;
+  const valorTotal = isInstallment
+    ? valorParcela * totalParcelas
+    : valorParcela;
+  const valorRestante = isInstallment
+    ? valorParcela * (totalParcelas - parcelaAtual)
+    : 0;
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="p-0 sm:max-w-xl">
+        <Card className="gap-2 space-y-4">
+          <CardHeader className="flex flex-row items-start border-b">
+            <div>
+              <DialogTitle className="group flex items-center gap-2 text-lg">
+                #{lancamento.id}
+              </DialogTitle>
+              <CardDescription>
+                {formatDate(lancamento.purchaseDate)}
+              </CardDescription>
+            </div>
+          </CardHeader>
+
+          <CardContent className="text-sm">
+            <div className="grid gap-3">
+              <ul className="grid gap-3">
+                <DetailRow label="Descrição" value={lancamento.name} />
+
+                <DetailRow
+                  label="Período"
+                  value={formatPeriod(lancamento.period)}
+                />
+
+                <li className="flex items-center justify-between">
+                  <span className="text-muted-foreground">
+                    Forma de Pagamento
+                  </span>
+                  <span className="flex items-center gap-1.5">
+                    {getPaymentMethodIcon(lancamento.paymentMethod)}
+                    <span className="capitalize">
+                      {lancamento.paymentMethod}
+                    </span>
+                  </span>
+                </li>
+
+                <DetailRow
+                  label={lancamento.cartaoName ? "Cartão" : "Conta"}
+                  value={lancamento.cartaoName ?? lancamento.contaName ?? "—"}
+                />
+
+                <DetailRow
+                  label="Categoria"
+                  value={lancamento.categoriaName ?? "—"}
+                />
+
+                <li className="flex items-center justify-between">
+                  <span className="text-muted-foreground">
+                    Tipo de Transação
+                  </span>
+                  <span className="capitalize">
+                    <Badge
+                      variant={getTransactionBadgeVariant(
+                        lancamento.transactionType
+                      )}
+                    >
+                      {lancamento.transactionType}
+                    </Badge>
+                  </span>
+                </li>
+
+                <DetailRow
+                  label="Condição"
+                  value={formatCondition(lancamento.condition)}
+                />
+
+                <li className="flex items-center justify-between">
+                  <span className="text-muted-foreground">Responsável</span>
+                  <span className="flex items-center gap-2 capitalize">
+                    <span>{lancamento.pagadorName}</span>
+                  </span>
+                </li>
+
+                <DetailRow
+                  label="Status"
+                  value={lancamento.isSettled ? "Pago" : "Pendente"}
+                />
+
+                {lancamento.note && (
+                  <DetailRow label="Notas" value={lancamento.note} />
+                )}
+              </ul>
+
+              <ul className="mb-6 grid gap-3">
+                {isInstallment && (
+                  <li className="mt-4">
+                    <InstallmentTimeline
+                      purchaseDate={new Date(lancamento.purchaseDate)}
+                      currentInstallment={parcelaAtual}
+                      totalInstallments={totalParcelas}
+                      period={lancamento.period}
+                    />
+                  </li>
+                )}
+
+                <DetailRow
+                  label={isInstallment ? "Valor da Parcela" : "Valor"}
+                  value={currencyFormatter.format(valorParcela)}
+                />
+
+                {isInstallment && (
+                  <DetailRow
+                    label="Valor Restante"
+                    value={currencyFormatter.format(valorRestante)}
+                  />
+                )}
+
+                {lancamento.recurrenceCount && (
+                  <DetailRow
+                    label="Quantidade de Recorrências"
+                    value={`${lancamento.recurrenceCount} meses`}
+                  />
+                )}
+
+                {!isInstallment && <Separator className="my-2" />}
+
+                <li className="flex items-center justify-between font-semibold">
+                  <span className="text-muted-foreground">Total da Compra</span>
+                  <span className="text-lg">
+                    {currencyFormatter.format(valorTotal)}
+                  </span>
+                </li>
+              </ul>
+            </div>
+
+            <DialogFooter>
+              <DialogClose asChild>
+                <Button className="w-full" type="button">
+                  Entendi
+                </Button>
+              </DialogClose>
+            </DialogFooter>
+          </CardContent>
+        </Card>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+interface DetailRowProps {
+  label: string;
+  value: string;
+}
+
+function DetailRow({ label, value }: DetailRowProps) {
+  return (
+    <li className="flex items-center justify-between">
+      <span className="text-muted-foreground">{label}</span>
+      <span className="capitalize">{value}</span>
+    </li>
+  );
+}
diff --git a/components/lancamentos/dialogs/lancamento-dialog/basic-fields-section.tsx b/components/lancamentos/dialogs/lancamento-dialog/basic-fields-section.tsx
new file mode 100644
index 0000000..b0da06d
--- /dev/null
+++ b/components/lancamentos/dialogs/lancamento-dialog/basic-fields-section.tsx
@@ -0,0 +1,95 @@
+"use client";
+
+import { Label } from "@/components/ui/label";
+import { DatePicker } from "@/components/ui/date-picker";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { CurrencyInput } from "@/components/ui/currency-input";
+import { CalculatorDialogButton } from "@/components/calculadora/calculator-dialog";
+import { RiCalculatorLine } from "@remixicon/react";
+import { EstabelecimentoInput } from "../../shared/estabelecimento-input";
+import type { BasicFieldsSectionProps } from "./lancamento-dialog-types";
+
+export function BasicFieldsSection({
+  formState,
+  onFieldChange,
+  estabelecimentos,
+  monthOptions,
+}: BasicFieldsSectionProps) {
+  return (
+    <>
+      <div className="flex w-full flex-col gap-2 md:flex-row">
+        <div className="w-1/2 space-y-1">
+          <Label htmlFor="purchaseDate">Data da transação</Label>
+          <DatePicker
+            id="purchaseDate"
+            value={formState.purchaseDate}
+            onChange={(value) => onFieldChange("purchaseDate", value)}
+            placeholder="Data da transação"
+            required
+          />
+        </div>
+
+        <div className="w-1/2 space-y-1">
+          <Label htmlFor="period">Período</Label>
+          <Select
+            value={formState.period}
+            onValueChange={(value) => onFieldChange("period", value)}
+          >
+            <SelectTrigger id="period" className="w-full">
+              <SelectValue placeholder="Selecione" />
+            </SelectTrigger>
+            <SelectContent>
+              {monthOptions.map((option) => (
+                <SelectItem key={option.value} value={option.value}>
+                  {option.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+
+      <div className="flex w-full flex-col gap-2 md:flex-row">
+        <div className="w-1/2 space-y-1">
+          <Label htmlFor="name">Estabelecimento</Label>
+          <EstabelecimentoInput
+            id="name"
+            value={formState.name}
+            onChange={(value) => onFieldChange("name", value)}
+            estabelecimentos={estabelecimentos}
+            placeholder="Ex.: Padaria"
+            maxLength={20}
+            required
+          />
+        </div>
+
+        <div className="w-1/2 space-y-1">
+          <Label htmlFor="amount">Valor</Label>
+          <div className="relative">
+            <CurrencyInput
+              id="amount"
+              value={formState.amount}
+              onValueChange={(value) => onFieldChange("amount", value)}
+              placeholder="R$ 0,00"
+              required
+              className="pr-10"
+            />
+            <CalculatorDialogButton
+              variant="ghost"
+              size="icon-sm"
+              className="absolute right-1 top-1/2 h-7 w-7 -translate-y-1/2"
+            >
+              <RiCalculatorLine className="h-4 w-4 text-muted-foreground" />
+            </CalculatorDialogButton>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/components/lancamentos/dialogs/lancamento-dialog/boleto-fields-section.tsx b/components/lancamentos/dialogs/lancamento-dialog/boleto-fields-section.tsx
new file mode 100644
index 0000000..8316bde
--- /dev/null
+++ b/components/lancamentos/dialogs/lancamento-dialog/boleto-fields-section.tsx
@@ -0,0 +1,42 @@
+"use client";
+
+import { Label } from "@/components/ui/label";
+import { DatePicker } from "@/components/ui/date-picker";
+import { cn } from "@/lib/utils/ui";
+import type { BoletoFieldsSectionProps } from "./lancamento-dialog-types";
+
+export function BoletoFieldsSection({
+  formState,
+  onFieldChange,
+  showPaymentDate,
+}: BoletoFieldsSectionProps) {
+  return (
+    <div className="flex w-full flex-col gap-2 md:flex-row">
+      <div
+        className={cn(
+          "space-y-2 w-full",
+          showPaymentDate ? "md:w-1/2" : "md:w-full"
+        )}
+      >
+        <Label htmlFor="dueDate">Vencimento do boleto</Label>
+        <DatePicker
+          id="dueDate"
+          value={formState.dueDate}
+          onChange={(value) => onFieldChange("dueDate", value)}
+          placeholder="Selecione o vencimento"
+        />
+      </div>
+      {showPaymentDate ? (
+        <div className="space-y-2 w-full md:w-1/2">
+          <Label htmlFor="boletoPaymentDate">Pagamento do boleto</Label>
+          <DatePicker
+            id="boletoPaymentDate"
+            value={formState.boletoPaymentDate}
+            onChange={(value) => onFieldChange("boletoPaymentDate", value)}
+            placeholder="Selecione a data de pagamento"
+          />
+        </div>
+      ) : null}
+    </div>
+  );
+}
diff --git a/components/lancamentos/dialogs/lancamento-dialog/category-section.tsx b/components/lancamentos/dialogs/lancamento-dialog/category-section.tsx
new file mode 100644
index 0000000..84015f6
--- /dev/null
+++ b/components/lancamentos/dialogs/lancamento-dialog/category-section.tsx
@@ -0,0 +1,105 @@
+"use client";
+
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { LANCAMENTO_TRANSACTION_TYPES } from "@/lib/lancamentos/constants";
+import { cn } from "@/lib/utils/ui";
+import {
+  CategoriaSelectContent,
+  TransactionTypeSelectContent,
+} from "../../select-items";
+import type { CategorySectionProps } from "./lancamento-dialog-types";
+
+export function CategorySection({
+  formState,
+  onFieldChange,
+  categoriaOptions,
+  categoriaGroups,
+  isUpdateMode,
+}: CategorySectionProps) {
+  return (
+    <div className="flex w-full flex-col gap-2 md:flex-row">
+      {!isUpdateMode ? (
+        <div className="w-full space-y-1 md:w-1/2">
+          <Label htmlFor="transactionType">Tipo de transação</Label>
+          <Select
+            value={formState.transactionType}
+            onValueChange={(value) => onFieldChange("transactionType", value)}
+          >
+            <SelectTrigger id="transactionType" className="w-full">
+              <SelectValue placeholder="Selecione">
+                {formState.transactionType && (
+                  <TransactionTypeSelectContent
+                    label={formState.transactionType}
+                  />
+                )}
+              </SelectValue>
+            </SelectTrigger>
+            <SelectContent>
+              {LANCAMENTO_TRANSACTION_TYPES.filter(
+                (type) => type !== "Transferência"
+              ).map((type) => (
+                <SelectItem key={type} value={type}>
+                  <TransactionTypeSelectContent label={type} />
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+      ) : null}
+
+      <div
+        className={cn(
+          "space-y-1 w-full",
+          !isUpdateMode ? "md:w-1/2" : "md:w-full"
+        )}
+      >
+        <Label htmlFor="categoria">Categoria</Label>
+        <Select
+          value={formState.categoriaId}
+          onValueChange={(value) => onFieldChange("categoriaId", value)}
+        >
+          <SelectTrigger id="categoria" className="w-full">
+            <SelectValue placeholder="Selecione">
+              {formState.categoriaId &&
+                (() => {
+                  const selectedOption = categoriaOptions.find(
+                    (opt) => opt.value === formState.categoriaId
+                  );
+                  return selectedOption ? (
+                    <CategoriaSelectContent
+                      label={selectedOption.label}
+                      icon={selectedOption.icon}
+                    />
+                  ) : null;
+                })()}
+            </SelectValue>
+          </SelectTrigger>
+          <SelectContent>
+            {categoriaGroups.map((group) => (
+              <SelectGroup key={group.label}>
+                <SelectLabel>{group.label}</SelectLabel>
+                {group.options.map((option) => (
+                  <SelectItem key={option.value} value={option.value}>
+                    <CategoriaSelectContent
+                      label={option.label}
+                      icon={option.icon}
+                    />
+                  </SelectItem>
+                ))}
+              </SelectGroup>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+    </div>
+  );
+}
diff --git a/components/lancamentos/dialogs/lancamento-dialog/condition-section.tsx b/components/lancamentos/dialogs/lancamento-dialog/condition-section.tsx
new file mode 100644
index 0000000..443b94a
--- /dev/null
+++ b/components/lancamentos/dialogs/lancamento-dialog/condition-section.tsx
@@ -0,0 +1,95 @@
+"use client";
+
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { LANCAMENTO_CONDITIONS } from "@/lib/lancamentos/constants";
+import { cn } from "@/lib/utils/ui";
+import { ConditionSelectContent } from "../../select-items";
+import type { ConditionSectionProps } from "./lancamento-dialog-types";
+
+export function ConditionSection({
+  formState,
+  onFieldChange,
+  showInstallments,
+  showRecurrence,
+}: ConditionSectionProps) {
+  return (
+    <div className="flex w-full flex-col gap-2 md:flex-row">
+      <div
+        className={cn(
+          "space-y-2 w-full",
+          showInstallments || showRecurrence ? "md:w-1/2" : "md:w-full"
+        )}
+      >
+        <Label htmlFor="condition">Condição</Label>
+        <Select
+          value={formState.condition}
+          onValueChange={(value) => onFieldChange("condition", value)}
+        >
+          <SelectTrigger id="condition" className="w-full">
+            <SelectValue placeholder="Selecione">
+              {formState.condition && (
+                <ConditionSelectContent label={formState.condition} />
+              )}
+            </SelectValue>
+          </SelectTrigger>
+          <SelectContent>
+            {LANCAMENTO_CONDITIONS.map((condition) => (
+              <SelectItem key={condition} value={condition}>
+                <ConditionSelectContent label={condition} />
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+
+      {showInstallments ? (
+        <div className="space-y-2 w-full md:w-1/2">
+          <Label htmlFor="installmentCount">Parcelado em</Label>
+          <Select
+            value={formState.installmentCount}
+            onValueChange={(value) => onFieldChange("installmentCount", value)}
+          >
+            <SelectTrigger id="installmentCount" className="w-full">
+              <SelectValue placeholder="Selecione" />
+            </SelectTrigger>
+            <SelectContent>
+              {[...Array(24)].map((_, index) => (
+                <SelectItem key={index + 2} value={String(index + 2)}>
+                  {index + 2}x
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+      ) : null}
+
+      {showRecurrence ? (
+        <div className="space-y-2 w-full md:w-1/2">
+          <Label htmlFor="recurrenceCount">Lançamento fixo</Label>
+          <Select
+            value={formState.recurrenceCount}
+            onValueChange={(value) => onFieldChange("recurrenceCount", value)}
+          >
+            <SelectTrigger id="recurrenceCount" className="w-full">
+              <SelectValue placeholder="Selecione" />
+            </SelectTrigger>
+            <SelectContent>
+              {[...Array(24)].map((_, index) => (
+                <SelectItem key={index + 2} value={String(index + 2)}>
+                  Por {index + 2} meses
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+      ) : null}
+    </div>
+  );
+}
diff --git a/components/lancamentos/dialogs/lancamento-dialog/lancamento-dialog-types.ts b/components/lancamentos/dialogs/lancamento-dialog/lancamento-dialog-types.ts
new file mode 100644
index 0000000..9a46f94
--- /dev/null
+++ b/components/lancamentos/dialogs/lancamento-dialog/lancamento-dialog-types.ts
@@ -0,0 +1,87 @@
+import type { LancamentoFormState } from "@/lib/lancamentos/form-helpers";
+import type { LancamentoItem, SelectOption } from "../../types";
+
+export type FormState = LancamentoFormState;
+
+export interface LancamentoDialogProps {
+  mode: "create" | "update";
+  trigger?: React.ReactNode;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  pagadorOptions: SelectOption[];
+  splitPagadorOptions: SelectOption[];
+  defaultPagadorId?: string | null;
+  contaOptions: SelectOption[];
+  cartaoOptions: SelectOption[];
+  categoriaOptions: SelectOption[];
+  estabelecimentos: string[];
+  lancamento?: LancamentoItem;
+  defaultPeriod?: string;
+  defaultCartaoId?: string | null;
+  defaultPaymentMethod?: string | null;
+  defaultPurchaseDate?: string | null;
+  lockCartaoSelection?: boolean;
+  lockPaymentMethod?: boolean;
+  onBulkEditRequest?: (data: {
+    id: string;
+    name: string;
+    categoriaId: string | undefined;
+    note: string;
+    pagadorId: string | undefined;
+    contaId: string | undefined;
+    cartaoId: string | undefined;
+    amount: number;
+    dueDate: string | null;
+    boletoPaymentDate: string | null;
+  }) => void;
+}
+
+export interface BaseFieldSectionProps {
+  formState: FormState;
+  onFieldChange: <Key extends keyof FormState>(
+    key: Key,
+    value: FormState[Key]
+  ) => void;
+}
+
+export interface BasicFieldsSectionProps extends BaseFieldSectionProps {
+  estabelecimentos: string[];
+  monthOptions: Array<{ value: string; label: string }>;
+}
+
+export interface CategorySectionProps extends BaseFieldSectionProps {
+  categoriaOptions: SelectOption[];
+  categoriaGroups: Array<{
+    label: string;
+    options: SelectOption[];
+  }>;
+  isUpdateMode: boolean;
+}
+
+export interface SplitAndSettlementSectionProps extends BaseFieldSectionProps {
+  showSettledToggle: boolean;
+}
+
+export interface PagadorSectionProps extends BaseFieldSectionProps {
+  pagadorOptions: SelectOption[];
+  secondaryPagadorOptions: SelectOption[];
+}
+
+export interface PaymentMethodSectionProps extends BaseFieldSectionProps {
+  contaOptions: SelectOption[];
+  cartaoOptions: SelectOption[];
+  isUpdateMode: boolean;
+  disablePaymentMethod: boolean;
+  disableCartaoSelect: boolean;
+}
+
+export interface BoletoFieldsSectionProps extends BaseFieldSectionProps {
+  showPaymentDate: boolean;
+}
+
+export interface ConditionSectionProps extends BaseFieldSectionProps {
+  showInstallments: boolean;
+  showRecurrence: boolean;
+}
+
+export type NoteSectionProps = BaseFieldSectionProps;
diff --git a/components/lancamentos/dialogs/lancamento-dialog/lancamento-dialog.tsx b/components/lancamentos/dialogs/lancamento-dialog/lancamento-dialog.tsx
new file mode 100644
index 0000000..9d4ef79
--- /dev/null
+++ b/components/lancamentos/dialogs/lancamento-dialog/lancamento-dialog.tsx
@@ -0,0 +1,421 @@
+"use client";
+import {
+  createLancamentoAction,
+  updateLancamentoAction,
+} from "@/app/(dashboard)/lancamentos/actions";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { useControlledState } from "@/hooks/use-controlled-state";
+import {
+  filterSecondaryPagadorOptions,
+  groupAndSortCategorias,
+} from "@/lib/lancamentos/categoria-helpers";
+import {
+  applyFieldDependencies,
+  buildLancamentoInitialState,
+} from "@/lib/lancamentos/form-helpers";
+import { createMonthOptions } from "@/lib/utils/period";
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+  useTransition,
+} from "react";
+import { toast } from "sonner";
+import { BasicFieldsSection } from "./basic-fields-section";
+import { BoletoFieldsSection } from "./boleto-fields-section";
+import { CategorySection } from "./category-section";
+import { ConditionSection } from "./condition-section";
+import type {
+  FormState,
+  LancamentoDialogProps,
+} from "./lancamento-dialog-types";
+import { NoteSection } from "./note-section";
+import { PagadorSection } from "./pagador-section";
+import { PaymentMethodSection } from "./payment-method-section";
+import { SplitAndSettlementSection } from "./split-settlement-section";
+
+export function LancamentoDialog({
+  mode,
+  trigger,
+  open,
+  onOpenChange,
+  pagadorOptions,
+  splitPagadorOptions,
+  defaultPagadorId,
+  contaOptions,
+  cartaoOptions,
+  categoriaOptions,
+  estabelecimentos,
+  lancamento,
+  defaultPeriod,
+  defaultCartaoId,
+  defaultPaymentMethod,
+  defaultPurchaseDate,
+  lockCartaoSelection,
+  lockPaymentMethod,
+  onBulkEditRequest,
+}: LancamentoDialogProps) {
+  const [dialogOpen, setDialogOpen] = useControlledState(
+    open,
+    false,
+    onOpenChange
+  );
+
+  const [formState, setFormState] = useState<FormState>(() =>
+    buildLancamentoInitialState(lancamento, defaultPagadorId, defaultPeriod, {
+      defaultCartaoId,
+      defaultPaymentMethod,
+      defaultPurchaseDate,
+    })
+  );
+  const [periodDirty, setPeriodDirty] = useState(false);
+  const [isPending, startTransition] = useTransition();
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (dialogOpen) {
+      setFormState(
+        buildLancamentoInitialState(
+          lancamento,
+          defaultPagadorId,
+          defaultPeriod,
+          {
+            defaultCartaoId,
+            defaultPaymentMethod,
+            defaultPurchaseDate,
+          }
+        )
+      );
+      setErrorMessage(null);
+      setPeriodDirty(false);
+    }
+  }, [
+    dialogOpen,
+    lancamento,
+    defaultPagadorId,
+    defaultPeriod,
+    defaultCartaoId,
+    defaultPaymentMethod,
+    defaultPurchaseDate,
+  ]);
+
+  const primaryPagador = formState.pagadorId;
+
+  const secondaryPagadorOptions = useMemo(
+    () => filterSecondaryPagadorOptions(splitPagadorOptions, primaryPagador),
+    [splitPagadorOptions, primaryPagador]
+  );
+
+  const categoriaGroups = useMemo(() => {
+    const filtered = categoriaOptions.filter(
+      (option) =>
+        option.group?.toLowerCase() === formState.transactionType.toLowerCase()
+    );
+    return groupAndSortCategorias(filtered);
+  }, [categoriaOptions, formState.transactionType]);
+
+  const monthOptions = useMemo(
+    () => createMonthOptions(formState.period),
+    [formState.period]
+  );
+
+  const handleFieldChange = useCallback(
+    <Key extends keyof FormState>(key: Key, value: FormState[Key]) => {
+      if (key === "period") {
+        setPeriodDirty(true);
+      }
+
+      setFormState((prev) => {
+        const dependencies = applyFieldDependencies(
+          key,
+          value,
+          prev,
+          periodDirty
+        );
+
+        return {
+          ...prev,
+          [key]: value,
+          ...dependencies,
+        };
+      });
+    },
+    [periodDirty]
+  );
+
+  const handleSubmit = useCallback(
+    (event: React.FormEvent<HTMLFormElement>) => {
+      event.preventDefault();
+      setErrorMessage(null);
+
+      if (!formState.purchaseDate) {
+        const message = "Informe a data da transação.";
+        setErrorMessage(message);
+        toast.error(message);
+        return;
+      }
+
+      if (!formState.name.trim()) {
+        const message = "Informe a descrição do lançamento.";
+        setErrorMessage(message);
+        toast.error(message);
+        return;
+      }
+
+      if (formState.isSplit && !formState.pagadorId) {
+        const message =
+          "Selecione o pagador principal para dividir o lançamento.";
+        setErrorMessage(message);
+        toast.error(message);
+        return;
+      }
+
+      if (formState.isSplit && !formState.secondaryPagadorId) {
+        const message =
+          "Selecione o pagador secundário para dividir o lançamento.";
+        setErrorMessage(message);
+        toast.error(message);
+        return;
+      }
+
+      const amountValue = Number(formState.amount);
+      if (Number.isNaN(amountValue)) {
+        const message = "Informe um valor válido.";
+        setErrorMessage(message);
+        toast.error(message);
+        return;
+      }
+
+      const sanitizedAmount = Math.abs(amountValue);
+
+      const payload = {
+        purchaseDate: formState.purchaseDate,
+        period: formState.period,
+        name: formState.name.trim(),
+        transactionType: formState.transactionType,
+        amount: sanitizedAmount,
+        condition: formState.condition,
+        paymentMethod: formState.paymentMethod,
+        pagadorId: formState.pagadorId,
+        secondaryPagadorId: formState.isSplit
+          ? formState.secondaryPagadorId
+          : undefined,
+        isSplit: formState.isSplit,
+        contaId: formState.contaId,
+        cartaoId: formState.cartaoId,
+        categoriaId: formState.categoriaId,
+        note: formState.note.trim() || undefined,
+        isSettled:
+          formState.paymentMethod === "Cartão de crédito"
+            ? null
+            : Boolean(formState.isSettled),
+        installmentCount:
+          formState.condition === "Parcelado" && formState.installmentCount
+            ? Number(formState.installmentCount)
+            : undefined,
+        recurrenceCount:
+          formState.condition === "Recorrente" && formState.recurrenceCount
+            ? Number(formState.recurrenceCount)
+            : undefined,
+        dueDate:
+          formState.paymentMethod === "Boleto" && formState.dueDate
+            ? formState.dueDate
+            : undefined,
+        boletoPaymentDate:
+          mode === "update" &&
+          formState.paymentMethod === "Boleto" &&
+          formState.boletoPaymentDate
+            ? formState.boletoPaymentDate
+            : undefined,
+      };
+
+      startTransition(async () => {
+        if (mode === "create") {
+          const result = await createLancamentoAction(payload);
+
+          if (result.success) {
+            toast.success(result.message);
+            setDialogOpen(false);
+            return;
+          }
+
+          setErrorMessage(result.error);
+          toast.error(result.error);
+          return;
+        }
+
+        // Update mode
+        const hasSeriesId = Boolean(lancamento?.seriesId);
+
+        if (hasSeriesId && onBulkEditRequest) {
+          // Para lançamentos em série, abre o diálogo de bulk action
+          onBulkEditRequest({
+            id: lancamento?.id ?? "",
+            name: formState.name.trim(),
+            categoriaId: formState.categoriaId,
+            note: formState.note.trim() || "",
+            pagadorId: formState.pagadorId,
+            contaId: formState.contaId,
+            cartaoId: formState.cartaoId,
+            amount: sanitizedAmount,
+            dueDate:
+              formState.paymentMethod === "Boleto"
+                ? formState.dueDate || null
+                : null,
+            boletoPaymentDate:
+              mode === "update" && formState.paymentMethod === "Boleto"
+                ? formState.boletoPaymentDate || null
+                : null,
+          });
+          return;
+        }
+
+        // Atualização normal para lançamentos únicos ou todos os campos
+        const result = await updateLancamentoAction({
+          id: lancamento?.id ?? "",
+          ...payload,
+        });
+
+        if (result.success) {
+          toast.success(result.message);
+          setDialogOpen(false);
+          return;
+        }
+
+        setErrorMessage(result.error);
+        toast.error(result.error);
+      });
+    },
+    [
+      formState,
+      mode,
+      lancamento?.id,
+      lancamento?.seriesId,
+      setDialogOpen,
+      onBulkEditRequest,
+    ]
+  );
+
+  const title = mode === "create" ? "Novo lançamento" : "Editar lançamento";
+  const description =
+    mode === "create"
+      ? "Informe os dados abaixo para registrar um novo lançamento."
+      : "Atualize as informações do lançamento selecionado.";
+  const submitLabel = mode === "create" ? "Salvar lançamento" : "Atualizar";
+
+  const showInstallments = formState.condition === "Parcelado";
+  const showRecurrence = formState.condition === "Recorrente";
+  const showDueDate = formState.paymentMethod === "Boleto";
+  const showPaymentDate = mode === "update" && showDueDate;
+  const showSettledToggle = formState.paymentMethod !== "Cartão de crédito";
+  const isUpdateMode = mode === "update";
+  const disablePaymentMethod = Boolean(lockPaymentMethod && mode === "create");
+  const disableCartaoSelect = Boolean(lockCartaoSelection && mode === "create");
+
+  return (
+    <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+      {trigger ? <DialogTrigger asChild>{trigger}</DialogTrigger> : null}
+      <DialogContent className="sm:max-w-xl p-6 sm:px-8">
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+          <DialogDescription>{description}</DialogDescription>
+        </DialogHeader>
+
+        <form
+          className="space-y-2 -mx-6 max-h-[80vh] overflow-y-auto px-6 pb-1"
+          onSubmit={handleSubmit}
+        >
+          <BasicFieldsSection
+            formState={formState}
+            onFieldChange={handleFieldChange}
+            estabelecimentos={estabelecimentos}
+            monthOptions={monthOptions}
+          />
+
+          <CategorySection
+            formState={formState}
+            onFieldChange={handleFieldChange}
+            categoriaOptions={categoriaOptions}
+            categoriaGroups={categoriaGroups}
+            isUpdateMode={isUpdateMode}
+          />
+
+          {!isUpdateMode ? (
+            <SplitAndSettlementSection
+              formState={formState}
+              onFieldChange={handleFieldChange}
+              showSettledToggle={showSettledToggle}
+            />
+          ) : null}
+
+          <PagadorSection
+            formState={formState}
+            onFieldChange={handleFieldChange}
+            pagadorOptions={pagadorOptions}
+            secondaryPagadorOptions={secondaryPagadorOptions}
+          />
+
+          <PaymentMethodSection
+            formState={formState}
+            onFieldChange={handleFieldChange}
+            contaOptions={contaOptions}
+            cartaoOptions={cartaoOptions}
+            isUpdateMode={isUpdateMode}
+            disablePaymentMethod={disablePaymentMethod}
+            disableCartaoSelect={disableCartaoSelect}
+          />
+
+          {showDueDate ? (
+            <BoletoFieldsSection
+              formState={formState}
+              onFieldChange={handleFieldChange}
+              showPaymentDate={showPaymentDate}
+            />
+          ) : null}
+
+          {!isUpdateMode ? (
+            <ConditionSection
+              formState={formState}
+              onFieldChange={handleFieldChange}
+              showInstallments={showInstallments}
+              showRecurrence={showRecurrence}
+            />
+          ) : null}
+
+          <NoteSection
+            formState={formState}
+            onFieldChange={handleFieldChange}
+          />
+
+          {errorMessage ? (
+            <p className="text-sm text-destructive">{errorMessage}</p>
+          ) : null}
+
+          <DialogFooter className="gap-3">
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => setDialogOpen(false)}
+              disabled={isPending}
+            >
+              Cancelar
+            </Button>
+            <Button type="submit" disabled={isPending}>
+              {isPending ? "Salvando..." : submitLabel}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/components/lancamentos/dialogs/lancamento-dialog/note-section.tsx b/components/lancamentos/dialogs/lancamento-dialog/note-section.tsx
new file mode 100644
index 0000000..9f4a6fa
--- /dev/null
+++ b/components/lancamentos/dialogs/lancamento-dialog/note-section.tsx
@@ -0,0 +1,20 @@
+"use client";
+
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import type { NoteSectionProps } from "./lancamento-dialog-types";
+
+export function NoteSection({ formState, onFieldChange }: NoteSectionProps) {
+  return (
+    <div className="space-y-2">
+      <Label htmlFor="note">Anotação</Label>
+      <Textarea
+        id="note"
+        value={formState.note}
+        onChange={(event) => onFieldChange("note", event.target.value)}
+        placeholder="Adicione observações sobre o lançamento"
+        rows={2}
+      />
+    </div>
+  );
+}
diff --git a/components/lancamentos/dialogs/lancamento-dialog/pagador-section.tsx b/components/lancamentos/dialogs/lancamento-dialog/pagador-section.tsx
new file mode 100644
index 0000000..0ccb57c
--- /dev/null
+++ b/components/lancamentos/dialogs/lancamento-dialog/pagador-section.tsx
@@ -0,0 +1,101 @@
+"use client";
+
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { PagadorSelectContent } from "../../select-items";
+import type { PagadorSectionProps } from "./lancamento-dialog-types";
+
+export function PagadorSection({
+  formState,
+  onFieldChange,
+  pagadorOptions,
+  secondaryPagadorOptions,
+}: PagadorSectionProps) {
+  return (
+    <div className="flex w-full flex-col gap-2 md:flex-row">
+      <div className="w-full space-y-1">
+        <Label htmlFor="pagador">Pagador</Label>
+        <Select
+          value={formState.pagadorId}
+          onValueChange={(value) => onFieldChange("pagadorId", value)}
+        >
+          <SelectTrigger id="pagador" className="w-full">
+            <SelectValue placeholder="Selecione">
+              {formState.pagadorId &&
+                (() => {
+                  const selectedOption = pagadorOptions.find(
+                    (opt) => opt.value === formState.pagadorId
+                  );
+                  return selectedOption ? (
+                    <PagadorSelectContent
+                      label={selectedOption.label}
+                      avatarUrl={selectedOption.avatarUrl}
+                    />
+                  ) : null;
+                })()}
+            </SelectValue>
+          </SelectTrigger>
+          <SelectContent>
+            {pagadorOptions.map((option) => (
+              <SelectItem key={option.value} value={option.value}>
+                <PagadorSelectContent
+                  label={option.label}
+                  avatarUrl={option.avatarUrl}
+                />
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+
+      {formState.isSplit ? (
+        <div className="w-full space-y-1">
+          <Label htmlFor="secondaryPagador">Dividir com</Label>
+          <Select
+            value={formState.secondaryPagadorId}
+            onValueChange={(value) =>
+              onFieldChange("secondaryPagadorId", value)
+            }
+          >
+            <SelectTrigger
+              id="secondaryPagador"
+              disabled={secondaryPagadorOptions.length === 0}
+              className={"w-full"}
+            >
+              <SelectValue placeholder="Selecione">
+                {formState.secondaryPagadorId &&
+                  (() => {
+                    const selectedOption = secondaryPagadorOptions.find(
+                      (opt) => opt.value === formState.secondaryPagadorId
+                    );
+                    return selectedOption ? (
+                      <PagadorSelectContent
+                        label={selectedOption.label}
+                        avatarUrl={selectedOption.avatarUrl}
+                      />
+                    ) : null;
+                  })()}
+              </SelectValue>
+            </SelectTrigger>
+            <SelectContent>
+              {secondaryPagadorOptions.map((option) => (
+                <SelectItem key={option.value} value={option.value}>
+                  <PagadorSelectContent
+                    label={option.label}
+                    avatarUrl={option.avatarUrl}
+                  />
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+      ) : null}
+    </div>
+  );
+}
diff --git a/components/lancamentos/dialogs/lancamento-dialog/payment-method-section.tsx b/components/lancamentos/dialogs/lancamento-dialog/payment-method-section.tsx
new file mode 100644
index 0000000..02caf85
--- /dev/null
+++ b/components/lancamentos/dialogs/lancamento-dialog/payment-method-section.tsx
@@ -0,0 +1,288 @@
+"use client";
+
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { LANCAMENTO_PAYMENT_METHODS } from "@/lib/lancamentos/constants";
+import { cn } from "@/lib/utils/ui";
+import {
+  PaymentMethodSelectContent,
+  ContaCartaoSelectContent,
+} from "../../select-items";
+import type { PaymentMethodSectionProps } from "./lancamento-dialog-types";
+
+export function PaymentMethodSection({
+  formState,
+  onFieldChange,
+  contaOptions,
+  cartaoOptions,
+  isUpdateMode,
+  disablePaymentMethod,
+  disableCartaoSelect,
+}: PaymentMethodSectionProps) {
+  const isCartaoSelected = formState.paymentMethod === "Cartão de crédito";
+  const showContaSelect = [
+    "Pix",
+    "Dinheiro",
+    "Boleto",
+    "Cartão de débito",
+  ].includes(formState.paymentMethod);
+
+  return (
+    <>
+      {!isUpdateMode ? (
+        <div className="flex w-full flex-col gap-2 md:flex-row">
+          <div
+            className={cn(
+              "space-y-1 w-full",
+              isCartaoSelected || showContaSelect ? "md:w-1/2" : "md:w-full"
+            )}
+          >
+            <Label htmlFor="paymentMethod">Forma de pagamento</Label>
+            <Select
+              value={formState.paymentMethod}
+              onValueChange={(value) => onFieldChange("paymentMethod", value)}
+              disabled={disablePaymentMethod}
+            >
+              <SelectTrigger
+                id="paymentMethod"
+                className="w-full"
+                disabled={disablePaymentMethod}
+              >
+                <SelectValue placeholder="Selecione" className="w-full">
+                  {formState.paymentMethod && (
+                    <PaymentMethodSelectContent label={formState.paymentMethod} />
+                  )}
+                </SelectValue>
+              </SelectTrigger>
+              <SelectContent>
+                {LANCAMENTO_PAYMENT_METHODS.map((method) => (
+                  <SelectItem key={method} value={method}>
+                    <PaymentMethodSelectContent label={method} />
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          {isCartaoSelected ? (
+            <div className="space-y-1 w-full md:w-1/2">
+              <Label htmlFor="cartao">Cartão</Label>
+              <Select
+                value={formState.cartaoId}
+                onValueChange={(value) => onFieldChange("cartaoId", value)}
+                disabled={disableCartaoSelect}
+              >
+                <SelectTrigger
+                  id="cartao"
+                  className="w-full"
+                  disabled={disableCartaoSelect}
+                >
+                  <SelectValue placeholder="Selecione">
+                    {formState.cartaoId &&
+                      (() => {
+                        const selectedOption = cartaoOptions.find(
+                          (opt) => opt.value === formState.cartaoId
+                        );
+                        return selectedOption ? (
+                          <ContaCartaoSelectContent
+                            label={selectedOption.label}
+                            logo={selectedOption.logo}
+                            isCartao={true}
+                          />
+                        ) : null;
+                      })()}
+                  </SelectValue>
+                </SelectTrigger>
+                <SelectContent>
+                  {cartaoOptions.length === 0 ? (
+                    <div className="px-2 py-6 text-center">
+                      <p className="text-sm text-muted-foreground">
+                        Nenhum cartão cadastrado
+                      </p>
+                    </div>
+                  ) : (
+                    cartaoOptions.map((option) => (
+                      <SelectItem key={option.value} value={option.value}>
+                        <ContaCartaoSelectContent
+                          label={option.label}
+                          logo={option.logo}
+                          isCartao={true}
+                        />
+                      </SelectItem>
+                    ))
+                  )}
+                </SelectContent>
+              </Select>
+            </div>
+          ) : null}
+
+          {!isCartaoSelected && showContaSelect ? (
+            <div
+              className={cn(
+                "space-y-1 w-full",
+                !isUpdateMode ? "md:w-1/2" : "md:w-full"
+              )}
+            >
+              <Label htmlFor="conta">Conta</Label>
+              <Select
+                value={formState.contaId}
+                onValueChange={(value) => onFieldChange("contaId", value)}
+              >
+                <SelectTrigger id="conta" className="w-full">
+                  <SelectValue placeholder="Selecione">
+                    {formState.contaId &&
+                      (() => {
+                        const selectedOption = contaOptions.find(
+                          (opt) => opt.value === formState.contaId
+                        );
+                        return selectedOption ? (
+                          <ContaCartaoSelectContent
+                            label={selectedOption.label}
+                            logo={selectedOption.logo}
+                            isCartao={false}
+                          />
+                        ) : null;
+                      })()}
+                  </SelectValue>
+                </SelectTrigger>
+                <SelectContent>
+                  {contaOptions.length === 0 ? (
+                    <div className="px-2 py-6 text-center">
+                      <p className="text-sm text-muted-foreground">
+                        Nenhuma conta cadastrada
+                      </p>
+                    </div>
+                  ) : (
+                    contaOptions.map((option) => (
+                      <SelectItem key={option.value} value={option.value}>
+                        <ContaCartaoSelectContent
+                          label={option.label}
+                          logo={option.logo}
+                          isCartao={false}
+                        />
+                      </SelectItem>
+                    ))
+                  )}
+                </SelectContent>
+              </Select>
+            </div>
+          ) : null}
+        </div>
+      ) : null}
+
+      {isUpdateMode ? (
+        <div className="flex w-full flex-col gap-2 md:flex-row">
+          {isCartaoSelected ? (
+            <div
+              className={cn(
+                "space-y-1 w-full",
+                !isUpdateMode ? "md:w-1/2" : "md:w-full"
+              )}
+            >
+              <Label htmlFor="cartaoUpdate">Cartão</Label>
+              <Select
+                value={formState.cartaoId}
+                onValueChange={(value) => onFieldChange("cartaoId", value)}
+              >
+                <SelectTrigger id="cartaoUpdate" className="w-full">
+                  <SelectValue placeholder="Selecione">
+                    {formState.cartaoId &&
+                      (() => {
+                        const selectedOption = cartaoOptions.find(
+                          (opt) => opt.value === formState.cartaoId
+                        );
+                        return selectedOption ? (
+                          <ContaCartaoSelectContent
+                            label={selectedOption.label}
+                            logo={selectedOption.logo}
+                            isCartao={true}
+                          />
+                        ) : null;
+                      })()}
+                  </SelectValue>
+                </SelectTrigger>
+                <SelectContent>
+                  {cartaoOptions.length === 0 ? (
+                    <div className="px-2 py-6 text-center">
+                      <p className="text-sm text-muted-foreground">
+                        Nenhum cartão cadastrado
+                      </p>
+                    </div>
+                  ) : (
+                    cartaoOptions.map((option) => (
+                      <SelectItem key={option.value} value={option.value}>
+                        <ContaCartaoSelectContent
+                          label={option.label}
+                          logo={option.logo}
+                          isCartao={true}
+                        />
+                      </SelectItem>
+                    ))
+                  )}
+                </SelectContent>
+              </Select>
+            </div>
+          ) : null}
+
+          {!isCartaoSelected && showContaSelect ? (
+            <div
+              className={cn(
+                "space-y-1 w-full",
+                !isUpdateMode ? "md:w-1/2" : "md:w-full"
+              )}
+            >
+              <Label htmlFor="contaUpdate">Conta</Label>
+              <Select
+                value={formState.contaId}
+                onValueChange={(value) => onFieldChange("contaId", value)}
+              >
+                <SelectTrigger id="contaUpdate" className="w-full">
+                  <SelectValue placeholder="Selecione">
+                    {formState.contaId &&
+                      (() => {
+                        const selectedOption = contaOptions.find(
+                          (opt) => opt.value === formState.contaId
+                        );
+                        return selectedOption ? (
+                          <ContaCartaoSelectContent
+                            label={selectedOption.label}
+                            logo={selectedOption.logo}
+                            isCartao={false}
+                          />
+                        ) : null;
+                      })()}
+                  </SelectValue>
+                </SelectTrigger>
+                <SelectContent>
+                  {contaOptions.length === 0 ? (
+                    <div className="px-2 py-6 text-center">
+                      <p className="text-sm text-muted-foreground">
+                        Nenhuma conta cadastrada
+                      </p>
+                    </div>
+                  ) : (
+                    contaOptions.map((option) => (
+                      <SelectItem key={option.value} value={option.value}>
+                        <ContaCartaoSelectContent
+                          label={option.label}
+                          logo={option.logo}
+                          isCartao={false}
+                        />
+                      </SelectItem>
+                    ))
+                  )}
+                </SelectContent>
+              </Select>
+            </div>
+          ) : null}
+        </div>
+      ) : null}
+    </>
+  );
+}
diff --git a/components/lancamentos/dialogs/lancamento-dialog/split-settlement-section.tsx b/components/lancamentos/dialogs/lancamento-dialog/split-settlement-section.tsx
new file mode 100644
index 0000000..b4946c3
--- /dev/null
+++ b/components/lancamentos/dialogs/lancamento-dialog/split-settlement-section.tsx
@@ -0,0 +1,58 @@
+"use client";
+
+import { cn } from "@/lib/utils/ui";
+import { Checkbox } from "@/components/ui/checkbox";
+import type { SplitAndSettlementSectionProps } from "./lancamento-dialog-types";
+
+export function SplitAndSettlementSection({
+  formState,
+  onFieldChange,
+  showSettledToggle,
+}: SplitAndSettlementSectionProps) {
+  return (
+    <div className="flex w-full flex-col gap-2 py-2 md:flex-row">
+      <div
+        className={cn(
+          "space-y-1",
+          showSettledToggle ? "md:w-1/2 md:pr-2" : "md:w-full"
+        )}
+      >
+        <div className="flex items-center justify-between">
+          <div>
+            <p className="text-sm text-foreground">Dividir lançamento</p>
+            <p className="text-xs text-muted-foreground">
+              Selecione para atribuir parte do valor a outro pagador.
+            </p>
+          </div>
+          <Checkbox
+            checked={formState.isSplit}
+            onCheckedChange={(checked) =>
+              onFieldChange("isSplit", Boolean(checked))
+            }
+            aria-label="Dividir lançamento"
+          />
+        </div>
+      </div>
+
+      {showSettledToggle ? (
+        <div className="space-y-1 md:w-1/2 md:pr-2">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-sm text-foreground">Marcar como pago</p>
+              <p className="text-xs text-muted-foreground">
+                Indica que o lançamento já foi pago ou recebido.
+              </p>
+            </div>
+            <Checkbox
+              checked={Boolean(formState.isSettled)}
+              onCheckedChange={(checked) =>
+                onFieldChange("isSettled", Boolean(checked))
+              }
+              aria-label="Marcar como concluído"
+            />
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+}
diff --git a/components/lancamentos/dialogs/mass-add-dialog.tsx b/components/lancamentos/dialogs/mass-add-dialog.tsx
new file mode 100644
index 0000000..7fd004d
--- /dev/null
+++ b/components/lancamentos/dialogs/mass-add-dialog.tsx
@@ -0,0 +1,608 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { CurrencyInput } from "@/components/ui/currency-input";
+import { DatePicker } from "@/components/ui/date-picker";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Separator } from "@/components/ui/separator";
+import { Spinner } from "@/components/ui/spinner";
+import { groupAndSortCategorias } from "@/lib/lancamentos/categoria-helpers";
+import { LANCAMENTO_PAYMENT_METHODS } from "@/lib/lancamentos/constants";
+import { getTodayDateString } from "@/lib/utils/date";
+import { createMonthOptions } from "@/lib/utils/period";
+import { RiAddLine, RiDeleteBinLine } from "@remixicon/react";
+import { useMemo, useState } from "react";
+import { toast } from "sonner";
+import { EstabelecimentoInput } from "../shared/estabelecimento-input";
+import type { SelectOption } from "../../types";
+import {
+  CategoriaSelectContent,
+  ConditionSelectContent,
+  ContaCartaoSelectContent,
+  PagadorSelectContent,
+  PaymentMethodSelectContent,
+  TransactionTypeSelectContent,
+} from "../select-items";
+
+interface MassAddDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSubmit: (data: MassAddFormData) => Promise<void>;
+  pagadorOptions: SelectOption[];
+  contaOptions: SelectOption[];
+  cartaoOptions: SelectOption[];
+  categoriaOptions: SelectOption[];
+  estabelecimentos: string[];
+  selectedPeriod: string;
+  defaultPagadorId?: string | null;
+}
+
+export interface MassAddFormData {
+  fixedFields: {
+    transactionType?: string;
+    pagadorId?: string;
+    paymentMethod?: string;
+    condition?: string;
+    period?: string;
+    contaId?: string;
+    cartaoId?: string;
+  };
+  transactions: Array<{
+    purchaseDate: string;
+    name: string;
+    amount: string;
+    categoriaId?: string;
+  }>;
+}
+
+interface TransactionRow {
+  id: string;
+  purchaseDate: string;
+  name: string;
+  amount: string;
+  categoriaId: string | undefined;
+}
+
+export function MassAddDialog({
+  open,
+  onOpenChange,
+  onSubmit,
+  pagadorOptions,
+  contaOptions,
+  cartaoOptions,
+  categoriaOptions,
+  estabelecimentos,
+  selectedPeriod,
+  defaultPagadorId,
+}: MassAddDialogProps) {
+  const [loading, setLoading] = useState(false);
+
+  // Fixed fields state (sempre ativos, sem checkboxes)
+  const [transactionType, setTransactionType] = useState<string>("Despesa");
+  const [pagadorId, setPagadorId] = useState<string | undefined>(
+    defaultPagadorId ?? undefined
+  );
+  const [paymentMethod, setPaymentMethod] = useState<string>(
+    LANCAMENTO_PAYMENT_METHODS[0]
+  );
+  const [condition, setCondition] = useState<string>("À vista");
+  const [period, setPeriod] = useState<string>(selectedPeriod);
+  const [contaId, setContaId] = useState<string | undefined>();
+  const [cartaoId, setCartaoId] = useState<string | undefined>();
+
+  // Transaction rows
+  const [transactions, setTransactions] = useState<TransactionRow[]>([
+    {
+      id: crypto.randomUUID(),
+      purchaseDate: getTodayDateString(),
+      name: "",
+      amount: "",
+      categoriaId: undefined,
+    },
+  ]);
+
+  // Period options
+  const periodOptions = useMemo(
+    () => createMonthOptions(selectedPeriod, 3),
+    [selectedPeriod]
+  );
+
+  // Categorias agrupadas e filtradas por tipo de transação
+  const groupedCategorias = useMemo(() => {
+    const filtered = categoriaOptions.filter(
+      (option) => option.group?.toLowerCase() === transactionType.toLowerCase()
+    );
+    return groupAndSortCategorias(filtered);
+  }, [categoriaOptions, transactionType]);
+
+  const addTransaction = () => {
+    setTransactions([
+      ...transactions,
+      {
+        id: crypto.randomUUID(),
+        purchaseDate: getTodayDateString(),
+        name: "",
+        amount: "",
+        categoriaId: undefined,
+      },
+    ]);
+  };
+
+  const removeTransaction = (id: string) => {
+    if (transactions.length === 1) {
+      toast.error("É necessário ter pelo menos uma transação");
+      return;
+    }
+    setTransactions(transactions.filter((t) => t.id !== id));
+  };
+
+  const updateTransaction = (
+    id: string,
+    field: keyof TransactionRow,
+    value: string | undefined
+  ) => {
+    setTransactions(
+      transactions.map((t) => (t.id === id ? { ...t, [field]: value } : t))
+    );
+  };
+
+  const handleSubmit = async () => {
+    // Validate conta/cartao selection
+    if (paymentMethod === "Cartão de crédito" && !cartaoId) {
+      toast.error("Selecione um cartão para continuar");
+      return;
+    }
+
+    if (paymentMethod !== "Cartão de crédito" && !contaId) {
+      toast.error("Selecione uma conta para continuar");
+      return;
+    }
+
+    // Validate transactions
+    const invalidTransactions = transactions.filter(
+      (t) => !t.name.trim() || !t.amount.trim() || !t.purchaseDate
+    );
+
+    if (invalidTransactions.length > 0) {
+      toast.error(
+        "Preencha todos os campos obrigatórios das transações (data, estabelecimento e valor)"
+      );
+      return;
+    }
+
+    // Build form data
+    const formData: MassAddFormData = {
+      fixedFields: {
+        transactionType,
+        pagadorId,
+        paymentMethod,
+        condition,
+        period,
+        contaId: paymentMethod !== "Cartão de crédito" ? contaId : undefined,
+        cartaoId: paymentMethod === "Cartão de crédito" ? cartaoId : undefined,
+      },
+      transactions: transactions.map((t) => ({
+        purchaseDate: t.purchaseDate,
+        name: t.name.trim(),
+        amount: t.amount.trim(),
+        categoriaId: t.categoriaId,
+      })),
+    };
+
+    setLoading(true);
+    try {
+      await onSubmit(formData);
+      onOpenChange(false);
+      // Reset form
+      setTransactionType("Despesa");
+      setPagadorId(defaultPagadorId ?? undefined);
+      setPaymentMethod(LANCAMENTO_PAYMENT_METHODS[0]);
+      setCondition("À vista");
+      setPeriod(selectedPeriod);
+      setContaId(undefined);
+      setCartaoId(undefined);
+      setTransactions([
+        {
+          id: crypto.randomUUID(),
+          purchaseDate: getTodayDateString(),
+          name: "",
+          amount: "",
+          categoriaId: undefined,
+        },
+      ]);
+    } catch (_error) {
+      // Error is handled by the onSubmit function
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-2xl max-h-[90vh] overflow-y-auto p-6 sm:px-8">
+        <DialogHeader>
+          <DialogTitle>Adicionar múltiplos lançamentos</DialogTitle>
+          <DialogDescription>
+            Configure os valores padrão e adicione várias transações de uma vez.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-6">
+          {/* Fixed Fields Section */}
+          <div className="space-y-4">
+            <h3 className="text-sm font-semibold">Valores Padrão</h3>
+            <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+              {/* Transaction Type */}
+              <div className="space-y-2">
+                <Label htmlFor="transaction-type">Tipo de Transação</Label>
+                <Select
+                  value={transactionType}
+                  onValueChange={setTransactionType}
+                >
+                  <SelectTrigger id="transaction-type" className="w-full">
+                    <SelectValue>
+                      {transactionType && (
+                        <TransactionTypeSelectContent label={transactionType} />
+                      )}
+                    </SelectValue>
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="Despesa">
+                      <TransactionTypeSelectContent label="Despesa" />
+                    </SelectItem>
+                    <SelectItem value="Receita">
+                      <TransactionTypeSelectContent label="Receita" />
+                    </SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+
+              {/* Pagador */}
+              <div className="space-y-2">
+                <Label htmlFor="pagador">Pagador</Label>
+                <Select value={pagadorId} onValueChange={setPagadorId}>
+                  <SelectTrigger id="pagador" className="w-full">
+                    <SelectValue placeholder="Selecione o pagador">
+                      {pagadorId &&
+                        (() => {
+                          const selectedOption = pagadorOptions.find(
+                            (opt) => opt.value === pagadorId
+                          );
+                          return selectedOption ? (
+                            <PagadorSelectContent
+                              label={selectedOption.label}
+                              avatarUrl={selectedOption.avatarUrl}
+                            />
+                          ) : null;
+                        })()}
+                    </SelectValue>
+                  </SelectTrigger>
+                  <SelectContent>
+                    {pagadorOptions.map((option) => (
+                      <SelectItem key={option.value} value={option.value}>
+                        <PagadorSelectContent
+                          label={option.label}
+                          avatarUrl={option.avatarUrl}
+                        />
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+
+              {/* Payment Method */}
+              <div className="space-y-2">
+                <Label htmlFor="payment-method">Forma de Pagamento</Label>
+                <Select
+                  value={paymentMethod}
+                  onValueChange={(value) => {
+                    setPaymentMethod(value);
+                    // Reset conta/cartao when changing payment method
+                    if (value === "Cartão de crédito") {
+                      setContaId(undefined);
+                    } else {
+                      setCartaoId(undefined);
+                    }
+                  }}
+                >
+                  <SelectTrigger id="payment-method" className="w-full">
+                    <SelectValue>
+                      {paymentMethod && (
+                        <PaymentMethodSelectContent label={paymentMethod} />
+                      )}
+                    </SelectValue>
+                  </SelectTrigger>
+                  <SelectContent>
+                    {LANCAMENTO_PAYMENT_METHODS.map((method) => (
+                      <SelectItem key={method} value={method}>
+                        <PaymentMethodSelectContent label={method} />
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+
+              {/* Condition */}
+              <div className="space-y-2">
+                <Label htmlFor="condition">Condição</Label>
+                <Select value={condition} onValueChange={setCondition} disabled>
+                  <SelectTrigger id="condition" className="w-full">
+                    <SelectValue>
+                      {condition && (
+                        <ConditionSelectContent label={condition} />
+                      )}
+                    </SelectValue>
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="À vista">
+                      <ConditionSelectContent label="À vista" />
+                    </SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+
+              {/* Period */}
+              <div className="space-y-2">
+                <Label htmlFor="period">Período</Label>
+                <Select value={period} onValueChange={setPeriod}>
+                  <SelectTrigger id="period" className="w-full">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {periodOptions.map((option) => (
+                      <SelectItem key={option.value} value={option.value}>
+                        {option.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+
+              {/* Conta/Cartao */}
+              <div className="space-y-2">
+                <Label htmlFor="conta-cartao">
+                  {paymentMethod === "Cartão de crédito" ? "Cartão" : "Conta"}
+                </Label>
+                {paymentMethod === "Cartão de crédito" ? (
+                  <Select value={cartaoId} onValueChange={setCartaoId}>
+                    <SelectTrigger id="conta-cartao" className="w-full">
+                      <SelectValue placeholder="Selecione o cartão">
+                        {cartaoId &&
+                          (() => {
+                            const selectedOption = cartaoOptions.find(
+                              (opt) => opt.value === cartaoId
+                            );
+                            return selectedOption ? (
+                              <ContaCartaoSelectContent
+                                label={selectedOption.label}
+                                logo={selectedOption.logo}
+                                isCartao={true}
+                              />
+                            ) : null;
+                          })()}
+                      </SelectValue>
+                    </SelectTrigger>
+                    <SelectContent>
+                      {cartaoOptions.map((option) => (
+                        <SelectItem key={option.value} value={option.value}>
+                          <ContaCartaoSelectContent
+                            label={option.label}
+                            logo={option.logo}
+                            isCartao={true}
+                          />
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                ) : (
+                  <Select value={contaId} onValueChange={setContaId}>
+                    <SelectTrigger id="conta-cartao" className="w-full">
+                      <SelectValue placeholder="Selecione a conta">
+                        {contaId &&
+                          (() => {
+                            const selectedOption = contaOptions.find(
+                              (opt) => opt.value === contaId
+                            );
+                            return selectedOption ? (
+                              <ContaCartaoSelectContent
+                                label={selectedOption.label}
+                                logo={selectedOption.logo}
+                                isCartao={false}
+                              />
+                            ) : null;
+                          })()}
+                      </SelectValue>
+                    </SelectTrigger>
+                    <SelectContent>
+                      {contaOptions.map((option) => (
+                        <SelectItem key={option.value} value={option.value}>
+                          <ContaCartaoSelectContent
+                            label={option.label}
+                            logo={option.logo}
+                            isCartao={false}
+                          />
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                )}
+              </div>
+            </div>
+          </div>
+
+          <Separator />
+
+          {/* Transactions Section */}
+          <div className="space-y-4">
+            <div className="flex items-center justify-between">
+              <h3 className="text-sm font-semibold">Transações</h3>
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                onClick={addTransaction}
+              >
+                <RiAddLine className="size-4" />
+                Adicionar linha
+              </Button>
+            </div>
+
+            <div className="space-y-3">
+              {transactions.map((transaction, index) => (
+                <div
+                  key={transaction.id}
+                  className="grid gap-2 border-b pb-3 border-dashed last:border-0"
+                >
+                  <div className="flex gap-2 w-full">
+                    <div className="w-full">
+                      <Label
+                        htmlFor={`date-${transaction.id}`}
+                        className="sr-only"
+                      >
+                        Data {index + 1}
+                      </Label>
+                      <DatePicker
+                        id={`date-${transaction.id}`}
+                        value={transaction.purchaseDate}
+                        onChange={(value) =>
+                          updateTransaction(
+                            transaction.id,
+                            "purchaseDate",
+                            value
+                          )
+                        }
+                        placeholder="Data"
+                        required
+                      />
+                    </div>
+                    <div className="w-full">
+                      <Label
+                        htmlFor={`name-${transaction.id}`}
+                        className="sr-only"
+                      >
+                        Estabelecimento {index + 1}
+                      </Label>
+                      <EstabelecimentoInput
+                        id={`name-${transaction.id}`}
+                        placeholder="Local"
+                        value={transaction.name}
+                        onChange={(value) =>
+                          updateTransaction(transaction.id, "name", value)
+                        }
+                        estabelecimentos={estabelecimentos}
+                        required
+                      />
+                    </div>
+
+                    <div className="w-full">
+                      <Label
+                        htmlFor={`amount-${transaction.id}`}
+                        className="sr-only"
+                      >
+                        Valor {index + 1}
+                      </Label>
+                      <CurrencyInput
+                        id={`amount-${transaction.id}`}
+                        placeholder="R$ 0,00"
+                        value={transaction.amount}
+                        onValueChange={(value) =>
+                          updateTransaction(transaction.id, "amount", value)
+                        }
+                        required
+                      />
+                    </div>
+                    <div className="w-full">
+                      <Label
+                        htmlFor={`categoria-${transaction.id}`}
+                        className="sr-only"
+                      >
+                        Categoria {index + 1}
+                      </Label>
+                      <Select
+                        value={transaction.categoriaId}
+                        onValueChange={(value) =>
+                          updateTransaction(
+                            transaction.id,
+                            "categoriaId",
+                            value
+                          )
+                        }
+                      >
+                        <SelectTrigger
+                          id={`categoria-${transaction.id}`}
+                          className="w-42 truncate"
+                        >
+                          <SelectValue placeholder="Categoria" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {groupedCategorias.map((group) => (
+                            <SelectGroup key={group.label}>
+                              <SelectLabel>{group.label}</SelectLabel>
+                              {group.options.map((option) => (
+                                <SelectItem
+                                  key={option.value}
+                                  value={option.value}
+                                >
+                                  <CategoriaSelectContent
+                                    label={option.label}
+                                    icon={option.icon}
+                                  />
+                                </SelectItem>
+                              ))}
+                            </SelectGroup>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="icon"
+                      onClick={() => removeTransaction(transaction.id)}
+                      disabled={transactions.length === 1}
+                    >
+                      <RiDeleteBinLine className="size-4" />
+                      <span className="sr-only">Remover transação</span>
+                    </Button>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button
+            variant="outline"
+            onClick={() => onOpenChange(false)}
+            disabled={loading}
+          >
+            Cancelar
+          </Button>
+          <Button onClick={handleSubmit} disabled={loading}>
+            {loading && <Spinner className="size-4" />}
+            Criar {transactions.length}{" "}
+            {transactions.length === 1 ? "lançamento" : "lançamentos"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/components/lancamentos/index.ts b/components/lancamentos/index.ts
new file mode 100644
index 0000000..b919440
--- /dev/null
+++ b/components/lancamentos/index.ts
@@ -0,0 +1,23 @@
+// Main page component
+export { default as LancamentosPage } from "./page/lancamentos-page";
+
+// Table components
+export { default as LancamentosTable } from "./table/lancamentos-table";
+export { default as LancamentosFilters } from "./table/lancamentos-filters";
+
+// Main dialogs
+export { default as LancamentoDialog } from "./dialogs/lancamento-dialog/lancamento-dialog";
+export { default as LancamentoDetailsDialog } from "./dialogs/lancamento-details-dialog";
+export { default as MassAddDialog } from "./dialogs/mass-add-dialog";
+export { default as BulkActionDialog } from "./dialogs/bulk-action-dialog";
+export { default as AnticipateInstallmentsDialog } from "./dialogs/anticipate-installments-dialog/anticipate-installments-dialog";
+
+// Shared components
+export { default as EstabelecimentoInput } from "./shared/estabelecimento-input";
+export { default as InstallmentTimeline } from "./shared/installment-timeline";
+export { default as AnticipationCard } from "./shared/anticipation-card";
+
+// Types and utilities
+export type * from "./types";
+export type * from "./dialogs/lancamento-dialog/lancamento-dialog-types";
+export * from "./select-items";
diff --git a/components/lancamentos/page/lancamentos-page.tsx b/components/lancamentos/page/lancamentos-page.tsx
new file mode 100644
index 0000000..81781bc
--- /dev/null
+++ b/components/lancamentos/page/lancamentos-page.tsx
@@ -0,0 +1,503 @@
+"use client";
+
+import {
+  createMassLancamentosAction,
+  deleteLancamentoAction,
+  deleteLancamentoBulkAction,
+  deleteMultipleLancamentosAction,
+  toggleLancamentoSettlementAction,
+  updateLancamentoBulkAction,
+} from "@/app/(dashboard)/lancamentos/actions";
+import { ConfirmActionDialog } from "@/components/confirm-action-dialog";
+import { useCallback, useState } from "react";
+import { toast } from "sonner";
+
+import { AnticipateInstallmentsDialog } from "../dialogs/anticipate-installments-dialog/anticipate-installments-dialog";
+import { AnticipationHistoryDialog } from "../dialogs/anticipate-installments-dialog/anticipation-history-dialog";
+import { BulkActionDialog, type BulkActionScope } from "../dialogs/bulk-action-dialog";
+import { LancamentoDetailsDialog } from "../dialogs/lancamento-details-dialog";
+import { LancamentoDialog } from "../dialogs/lancamento-dialog/lancamento-dialog";
+import { LancamentosTable } from "../table/lancamentos-table";
+import { MassAddDialog, type MassAddFormData } from "../dialogs/mass-add-dialog";
+import type {
+  ContaCartaoFilterOption,
+  LancamentoFilterOption,
+  LancamentoItem,
+  SelectOption,
+} from "../types";
+
+interface LancamentosPageProps {
+  lancamentos: LancamentoItem[];
+  pagadorOptions: SelectOption[];
+  splitPagadorOptions: SelectOption[];
+  defaultPagadorId: string | null;
+  contaOptions: SelectOption[];
+  cartaoOptions: SelectOption[];
+  categoriaOptions: SelectOption[];
+  pagadorFilterOptions: LancamentoFilterOption[];
+  categoriaFilterOptions: LancamentoFilterOption[];
+  contaCartaoFilterOptions: ContaCartaoFilterOption[];
+  selectedPeriod: string;
+  estabelecimentos: string[];
+  allowCreate?: boolean;
+  defaultCartaoId?: string | null;
+  defaultPaymentMethod?: string | null;
+  lockCartaoSelection?: boolean;
+  lockPaymentMethod?: boolean;
+}
+
+export function LancamentosPage({
+  lancamentos,
+  pagadorOptions,
+  splitPagadorOptions,
+  defaultPagadorId,
+  contaOptions,
+  cartaoOptions,
+  categoriaOptions,
+  pagadorFilterOptions,
+  categoriaFilterOptions,
+  contaCartaoFilterOptions,
+  selectedPeriod,
+  estabelecimentos,
+  allowCreate = true,
+  defaultCartaoId,
+  defaultPaymentMethod,
+  lockCartaoSelection,
+  lockPaymentMethod,
+}: LancamentosPageProps) {
+  const [selectedLancamento, setSelectedLancamento] =
+    useState<LancamentoItem | null>(null);
+  const [editOpen, setEditOpen] = useState(false);
+  const [createOpen, setCreateOpen] = useState(false);
+  const [massAddOpen, setMassAddOpen] = useState(false);
+  const [deleteOpen, setDeleteOpen] = useState(false);
+  const [lancamentoToDelete, setLancamentoToDelete] =
+    useState<LancamentoItem | null>(null);
+  const [detailsOpen, setDetailsOpen] = useState(false);
+  const [settlementLoadingId, setSettlementLoadingId] = useState<string | null>(
+    null
+  );
+  const [bulkEditOpen, setBulkEditOpen] = useState(false);
+  const [bulkDeleteOpen, setBulkDeleteOpen] = useState(false);
+  const [pendingEditData, setPendingEditData] = useState<{
+    id: string;
+    name: string;
+    categoriaId: string | undefined;
+    note: string;
+    pagadorId: string | undefined;
+    contaId: string | undefined;
+    cartaoId: string | undefined;
+    amount: number;
+    dueDate: string | null;
+    boletoPaymentDate: string | null;
+    lancamento: LancamentoItem;
+  } | null>(null);
+  const [pendingDeleteData, setPendingDeleteData] =
+    useState<LancamentoItem | null>(null);
+  const [multipleBulkDeleteOpen, setMultipleBulkDeleteOpen] = useState(false);
+  const [pendingMultipleDeleteData, setPendingMultipleDeleteData] = useState<
+    LancamentoItem[]
+  >([]);
+  const [anticipateOpen, setAnticipateOpen] = useState(false);
+  const [anticipationHistoryOpen, setAnticipationHistoryOpen] = useState(false);
+  const [selectedForAnticipation, setSelectedForAnticipation] =
+    useState<LancamentoItem | null>(null);
+
+  const handleToggleSettlement = useCallback(async (item: LancamentoItem) => {
+    if (item.paymentMethod === "Cartão de crédito") {
+      toast.info(
+        "Pagamentos com cartão são conciliados automaticamente. Ajuste pelo cartão."
+      );
+      return;
+    }
+
+    const supportedMethods = ["Pix", "Boleto", "Dinheiro", "Cartão de débito"];
+    if (!supportedMethods.includes(item.paymentMethod)) {
+      return;
+    }
+
+    const nextValue = !Boolean(item.isSettled);
+
+    try {
+      setSettlementLoadingId(item.id);
+      const result = await toggleLancamentoSettlementAction({
+        id: item.id,
+        value: nextValue,
+      });
+
+      if (!result.success) {
+        throw new Error(result.error);
+      }
+
+      toast.success(result.message);
+    } catch (error) {
+      const message =
+        error instanceof Error
+          ? error.message
+          : "Não foi possível atualizar o pagamento.";
+      toast.error(message);
+    } finally {
+      setSettlementLoadingId(null);
+    }
+  }, []);
+
+  const handleDelete = useCallback(async () => {
+    if (!lancamentoToDelete) {
+      return;
+    }
+
+    const result = await deleteLancamentoAction({
+      id: lancamentoToDelete.id,
+    });
+
+    if (!result.success) {
+      toast.error(result.error);
+      throw new Error(result.error);
+    }
+
+    toast.success(result.message);
+    setDeleteOpen(false);
+  }, [lancamentoToDelete]);
+
+  const handleBulkDelete = useCallback(
+    async (scope: BulkActionScope) => {
+      if (!pendingDeleteData) {
+        return;
+      }
+
+      const result = await deleteLancamentoBulkAction({
+        id: pendingDeleteData.id,
+        scope,
+      });
+
+      if (!result.success) {
+        toast.error(result.error);
+        throw new Error(result.error);
+      }
+
+      toast.success(result.message);
+      setBulkDeleteOpen(false);
+      setPendingDeleteData(null);
+    },
+    [pendingDeleteData]
+  );
+
+  const handleBulkEditRequest = useCallback(
+    (data: {
+      id: string;
+      name: string;
+      categoriaId: string | undefined;
+      note: string;
+      pagadorId: string | undefined;
+      contaId: string | undefined;
+      cartaoId: string | undefined;
+      amount: number;
+      dueDate: string | null;
+      boletoPaymentDate: string | null;
+    }) => {
+      if (!selectedLancamento) {
+        return;
+      }
+
+      setPendingEditData({
+        ...data,
+        lancamento: selectedLancamento,
+      });
+      setEditOpen(false);
+      setBulkEditOpen(true);
+    },
+    [selectedLancamento]
+  );
+
+  const handleBulkEdit = useCallback(
+    async (scope: BulkActionScope) => {
+      if (!pendingEditData) {
+        return;
+      }
+
+      const result = await updateLancamentoBulkAction({
+        id: pendingEditData.id,
+        scope,
+        name: pendingEditData.name,
+        categoriaId: pendingEditData.categoriaId,
+        note: pendingEditData.note,
+        pagadorId: pendingEditData.pagadorId,
+        contaId: pendingEditData.contaId,
+        cartaoId: pendingEditData.cartaoId,
+        amount: pendingEditData.amount,
+        dueDate: pendingEditData.dueDate,
+        boletoPaymentDate: pendingEditData.boletoPaymentDate,
+      });
+
+      if (!result.success) {
+        toast.error(result.error);
+        throw new Error(result.error);
+      }
+
+      toast.success(result.message);
+      setBulkEditOpen(false);
+      setPendingEditData(null);
+    },
+    [pendingEditData]
+  );
+
+  const handleMassAddSubmit = useCallback(async (data: MassAddFormData) => {
+    const result = await createMassLancamentosAction(data);
+
+    if (!result.success) {
+      toast.error(result.error);
+      throw new Error(result.error);
+    }
+
+    toast.success(result.message);
+  }, []);
+
+  const handleMultipleBulkDelete = useCallback((items: LancamentoItem[]) => {
+    setPendingMultipleDeleteData(items);
+    setMultipleBulkDeleteOpen(true);
+  }, []);
+
+  const confirmMultipleBulkDelete = useCallback(async () => {
+    if (pendingMultipleDeleteData.length === 0) {
+      return;
+    }
+
+    const ids = pendingMultipleDeleteData.map((item) => item.id);
+    const result = await deleteMultipleLancamentosAction({ ids });
+
+    if (!result.success) {
+      toast.error(result.error);
+      throw new Error(result.error);
+    }
+
+    toast.success(result.message);
+    setMultipleBulkDeleteOpen(false);
+    setPendingMultipleDeleteData([]);
+  }, [pendingMultipleDeleteData]);
+
+  const handleCreate = useCallback(() => {
+    setCreateOpen(true);
+  }, []);
+
+  const handleMassAdd = useCallback(() => {
+    setMassAddOpen(true);
+  }, []);
+
+  const handleEdit = useCallback((item: LancamentoItem) => {
+    setSelectedLancamento(item);
+    setEditOpen(true);
+  }, []);
+
+  const handleConfirmDelete = useCallback((item: LancamentoItem) => {
+    if (item.seriesId) {
+      setPendingDeleteData(item);
+      setBulkDeleteOpen(true);
+    } else {
+      setLancamentoToDelete(item);
+      setDeleteOpen(true);
+    }
+  }, []);
+
+  const handleViewDetails = useCallback((item: LancamentoItem) => {
+    setSelectedLancamento(item);
+    setDetailsOpen(true);
+  }, []);
+
+  const handleAnticipate = useCallback((item: LancamentoItem) => {
+    setSelectedForAnticipation(item);
+    setAnticipateOpen(true);
+  }, []);
+
+  const handleViewAnticipationHistory = useCallback((item: LancamentoItem) => {
+    setSelectedForAnticipation(item);
+    setAnticipationHistoryOpen(true);
+  }, []);
+
+  return (
+    <>
+      <LancamentosTable
+        data={lancamentos}
+        pagadorFilterOptions={pagadorFilterOptions}
+        categoriaFilterOptions={categoriaFilterOptions}
+        contaCartaoFilterOptions={contaCartaoFilterOptions}
+        onCreate={allowCreate ? handleCreate : undefined}
+        onMassAdd={allowCreate ? handleMassAdd : undefined}
+        onEdit={handleEdit}
+        onConfirmDelete={handleConfirmDelete}
+        onBulkDelete={handleMultipleBulkDelete}
+        onViewDetails={handleViewDetails}
+        onToggleSettlement={handleToggleSettlement}
+        onAnticipate={handleAnticipate}
+        onViewAnticipationHistory={handleViewAnticipationHistory}
+        isSettlementLoading={(id) => settlementLoadingId === id}
+      />
+
+      {allowCreate ? (
+        <LancamentoDialog
+          mode="create"
+          open={createOpen}
+          onOpenChange={setCreateOpen}
+          pagadorOptions={pagadorOptions}
+          splitPagadorOptions={splitPagadorOptions}
+          defaultPagadorId={defaultPagadorId}
+          contaOptions={contaOptions}
+          cartaoOptions={cartaoOptions}
+          categoriaOptions={categoriaOptions}
+          estabelecimentos={estabelecimentos}
+          defaultPeriod={selectedPeriod}
+          defaultCartaoId={defaultCartaoId}
+          defaultPaymentMethod={defaultPaymentMethod}
+          lockCartaoSelection={lockCartaoSelection}
+          lockPaymentMethod={lockPaymentMethod}
+        />
+      ) : null}
+
+      <LancamentoDialog
+        mode="update"
+        open={editOpen && !!selectedLancamento}
+        onOpenChange={setEditOpen}
+        pagadorOptions={pagadorOptions}
+        splitPagadorOptions={splitPagadorOptions}
+        defaultPagadorId={defaultPagadorId}
+        contaOptions={contaOptions}
+        cartaoOptions={cartaoOptions}
+        categoriaOptions={categoriaOptions}
+        estabelecimentos={estabelecimentos}
+        lancamento={selectedLancamento ?? undefined}
+        defaultPeriod={selectedPeriod}
+        onBulkEditRequest={handleBulkEditRequest}
+      />
+
+      <LancamentoDetailsDialog
+        open={detailsOpen && !!selectedLancamento}
+        onOpenChange={(open) => {
+          setDetailsOpen(open);
+          if (!open) {
+            setSelectedLancamento(null);
+          }
+        }}
+        lancamento={detailsOpen ? selectedLancamento : null}
+      />
+
+      <ConfirmActionDialog
+        open={deleteOpen && !!lancamentoToDelete}
+        onOpenChange={setDeleteOpen}
+        title={
+          lancamentoToDelete
+            ? `Remover lançamento "${lancamentoToDelete.name}"?`
+            : "Remover lançamento?"
+        }
+        description="Essa ação é irreversível e removerá o lançamento de forma permanente."
+        confirmLabel="Remover"
+        pendingLabel="Removendo..."
+        confirmVariant="destructive"
+        onConfirm={handleDelete}
+        disabled={!lancamentoToDelete}
+      />
+
+      <BulkActionDialog
+        open={bulkDeleteOpen && !!pendingDeleteData}
+        onOpenChange={setBulkDeleteOpen}
+        actionType="delete"
+        seriesType={
+          pendingDeleteData?.condition === "Parcelado"
+            ? "installment"
+            : "recurring"
+        }
+        currentNumber={pendingDeleteData?.currentInstallment ?? undefined}
+        totalCount={
+          pendingDeleteData?.installmentCount ??
+          pendingDeleteData?.recurrenceCount ??
+          undefined
+        }
+        onConfirm={handleBulkDelete}
+      />
+
+      <BulkActionDialog
+        open={bulkEditOpen && !!pendingEditData}
+        onOpenChange={setBulkEditOpen}
+        actionType="edit"
+        seriesType={
+          pendingEditData?.lancamento.condition === "Parcelado"
+            ? "installment"
+            : "recurring"
+        }
+        currentNumber={
+          pendingEditData?.lancamento.currentInstallment ?? undefined
+        }
+        totalCount={
+          pendingEditData?.lancamento.installmentCount ??
+          pendingEditData?.lancamento.recurrenceCount ??
+          undefined
+        }
+        onConfirm={handleBulkEdit}
+      />
+
+      {allowCreate ? (
+        <MassAddDialog
+          open={massAddOpen}
+          onOpenChange={setMassAddOpen}
+          onSubmit={handleMassAddSubmit}
+          pagadorOptions={pagadorOptions}
+          contaOptions={contaOptions}
+          cartaoOptions={cartaoOptions}
+          categoriaOptions={categoriaOptions}
+          estabelecimentos={estabelecimentos}
+          selectedPeriod={selectedPeriod}
+          defaultPagadorId={defaultPagadorId}
+        />
+      ) : null}
+
+      <ConfirmActionDialog
+        open={multipleBulkDeleteOpen && pendingMultipleDeleteData.length > 0}
+        onOpenChange={setMultipleBulkDeleteOpen}
+        title={`Remover ${pendingMultipleDeleteData.length} ${
+          pendingMultipleDeleteData.length === 1 ? "lançamento" : "lançamentos"
+        }?`}
+        description="Essa ação é irreversível e removerá os lançamentos selecionados de forma permanente."
+        confirmLabel="Remover"
+        pendingLabel="Removendo..."
+        confirmVariant="destructive"
+        onConfirm={confirmMultipleBulkDelete}
+        disabled={pendingMultipleDeleteData.length === 0}
+      />
+
+      {/* Dialogs de Antecipação */}
+      {selectedForAnticipation && (
+        <AnticipateInstallmentsDialog
+          open={anticipateOpen}
+          onOpenChange={setAnticipateOpen}
+          seriesId={selectedForAnticipation.seriesId!}
+          lancamentoName={selectedForAnticipation.name}
+          categorias={categoriaOptions.map((c) => ({
+            id: c.value,
+            name: c.label,
+            icon: c.icon ?? null,
+          }))}
+          pagadores={pagadorOptions.map((p) => ({
+            id: p.value,
+            name: p.label,
+          }))}
+          defaultPeriod={selectedPeriod}
+        />
+      )}
+
+      {selectedForAnticipation && (
+        <AnticipationHistoryDialog
+          open={anticipationHistoryOpen}
+          onOpenChange={setAnticipationHistoryOpen}
+          seriesId={selectedForAnticipation.seriesId!}
+          lancamentoName={selectedForAnticipation.name}
+          onViewLancamento={(lancamentoId) => {
+            const lancamento = lancamentos.find((l) => l.id === lancamentoId);
+            if (lancamento) {
+              setSelectedLancamento(lancamento);
+              setDetailsOpen(true);
+              setAnticipationHistoryOpen(false);
+            }
+          }}
+        />
+      )}
+    </>
+  );
+}
diff --git a/components/lancamentos/select-items.tsx b/components/lancamentos/select-items.tsx
new file mode 100644
index 0000000..24ad3b2
--- /dev/null
+++ b/components/lancamentos/select-items.tsx
@@ -0,0 +1,120 @@
+"use client";
+
+import { CategoryIcon } from "@/components/categorias/category-icon";
+import DotIcon from "@/components/dot-icon";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { getAvatarSrc } from "@/lib/pagadores/utils";
+import { getConditionIcon, getPaymentMethodIcon } from "@/lib/utils/icons";
+import { RiBankCard2Line, RiBankLine } from "@remixicon/react";
+import Image from "next/image";
+
+type SelectItemContentProps = {
+  label: string;
+  avatarUrl?: string | null;
+  logo?: string | null;
+  icon?: string | null;
+};
+
+export function PagadorSelectContent({
+  label,
+  avatarUrl,
+}: SelectItemContentProps) {
+  const avatarSrc = getAvatarSrc(avatarUrl);
+  const initial = label.charAt(0).toUpperCase() || "?";
+
+  return (
+    <span className="flex items-center gap-2">
+      <Avatar className="size-5 border border-border/60 bg-background">
+        <AvatarImage src={avatarSrc} alt={`Avatar de ${label}`} />
+        <AvatarFallback className="text-[10px] font-medium uppercase">
+          {initial}
+        </AvatarFallback>
+      </Avatar>
+      <span>{label}</span>
+    </span>
+  );
+}
+
+export function CategoriaSelectContent({
+  label,
+  icon,
+}: SelectItemContentProps) {
+  return (
+    <span className="flex items-center gap-2">
+      <CategoryIcon name={icon} className="size-4" />
+      <span>{label}</span>
+    </span>
+  );
+}
+
+export function TransactionTypeSelectContent({ label }: { label: string }) {
+  const colorMap: Record<string, string> = {
+    Receita: "bg-emerald-600 dark:bg-emerald-400",
+    Despesa: "bg-red-600 dark:bg-red-400",
+    Transferência: "bg-blue-600 dark:bg-blue-400",
+  };
+
+  return (
+    <span className="flex items-center gap-2">
+      <DotIcon bg_dot={colorMap[label]} />
+      <span>{label}</span>
+    </span>
+  );
+}
+
+export function PaymentMethodSelectContent({ label }: { label: string }) {
+  const icon = getPaymentMethodIcon(label);
+
+  return (
+    <span className="flex items-center gap-2">
+      {icon}
+      <span>{label}</span>
+    </span>
+  );
+}
+
+export function ConditionSelectContent({ label }: { label: string }) {
+  const icon = getConditionIcon(label);
+
+  return (
+    <span className="flex items-center gap-2">
+      {icon}
+      <span>{label}</span>
+    </span>
+  );
+}
+
+export function ContaCartaoSelectContent({
+  label,
+  logo,
+  isCartao,
+}: SelectItemContentProps & { isCartao?: boolean }) {
+  const resolveLogoSrc = (logoPath: string | null) => {
+    if (!logoPath) {
+      return null;
+    }
+
+    const fileName = logoPath.split("/").filter(Boolean).pop() ?? logoPath;
+    return `/logos/${fileName}`;
+  };
+
+  const logoSrc = resolveLogoSrc(logo);
+  const Icon = isCartao ? RiBankCard2Line : RiBankLine;
+
+  return (
+    <span className="flex items-center gap-2">
+      {logoSrc ? (
+        <Image
+          src={logoSrc}
+          alt={`Logo de ${label}`}
+          width={20}
+          height={20}
+          className="rounded"
+        />
+      ) : (
+        <Icon className="size-4 text-muted-foreground" aria-hidden />
+      )}
+      <span>{label}</span>
+    </span>
+  );
+}
diff --git a/components/lancamentos/shared/anticipation-card.tsx b/components/lancamentos/shared/anticipation-card.tsx
new file mode 100644
index 0000000..3917c6e
--- /dev/null
+++ b/components/lancamentos/shared/anticipation-card.tsx
@@ -0,0 +1,205 @@
+"use client";
+
+import { cancelInstallmentAnticipationAction } from "@/app/(dashboard)/lancamentos/anticipation-actions";
+import { ConfirmActionDialog } from "@/components/confirm-action-dialog";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import type { InstallmentAnticipationWithRelations } from "@/lib/installments/anticipation-types";
+import { RiCalendarCheckLine, RiCloseLine, RiEyeLine } from "@remixicon/react";
+import { format } from "date-fns";
+import { ptBR } from "date-fns/locale";
+import { useTransition } from "react";
+import { toast } from "sonner";
+import MoneyValues from "@/components/money-values";
+
+interface AnticipationCardProps {
+  anticipation: InstallmentAnticipationWithRelations;
+  onViewLancamento?: (lancamentoId: string) => void;
+  onCanceled?: () => void;
+}
+
+const monthFormatter = new Intl.DateTimeFormat("pt-BR", {
+  month: "long",
+  year: "numeric",
+});
+
+const formatPeriodLabel = (period: string) => {
+  const [year, month] = period.split("-").map(Number);
+  if (!year || !month) {
+    return period;
+  }
+  const date = new Date(year, month - 1, 1);
+  if (Number.isNaN(date.getTime())) {
+    return period;
+  }
+  const label = monthFormatter.format(date);
+  return label.charAt(0).toUpperCase() + label.slice(1);
+};
+
+export function AnticipationCard({
+  anticipation,
+  onViewLancamento,
+  onCanceled,
+}: AnticipationCardProps) {
+  const [isPending, startTransition] = useTransition();
+
+  const isSettled = anticipation.lancamento.isSettled === true;
+  const canCancel = !isSettled;
+
+  const formatDate = (date: Date) => {
+    return format(date, "dd 'de' MMMM 'de' yyyy", { locale: ptBR });
+  };
+
+  const handleCancel = async () => {
+    startTransition(async () => {
+      const result = await cancelInstallmentAnticipationAction({
+        anticipationId: anticipation.id,
+      });
+
+      if (result.success) {
+        toast.success(result.message);
+        onCanceled?.();
+      } else {
+        toast.error(result.error || "Erro ao cancelar antecipação");
+      }
+    });
+  };
+
+  const handleViewLancamento = () => {
+    onViewLancamento?.(anticipation.lancamentoId);
+  };
+
+  return (
+    <Card>
+      <CardHeader className="flex flex-row items-start justify-between space-y-0 pb-3">
+        <div className="space-y-1">
+          <CardTitle className="text-base">
+            {anticipation.installmentCount}{" "}
+            {anticipation.installmentCount === 1
+              ? "parcela antecipada"
+              : "parcelas antecipadas"}
+          </CardTitle>
+          <CardDescription>
+            <RiCalendarCheckLine className="mr-1 inline size-3.5" />
+            {formatDate(anticipation.anticipationDate)}
+          </CardDescription>
+        </div>
+        <Badge variant="secondary">
+          {formatPeriodLabel(anticipation.anticipationPeriod)}
+        </Badge>
+      </CardHeader>
+
+      <CardContent className="space-y-3">
+        <dl className="grid grid-cols-2 gap-3 text-sm">
+          <div>
+            <dt className="text-muted-foreground">Valor Original</dt>
+            <dd className="mt-1 font-medium tabular-nums">
+              <MoneyValues amount={Number(anticipation.totalAmount)} />
+            </dd>
+          </div>
+
+          {Number(anticipation.discount) > 0 && (
+            <div>
+              <dt className="text-muted-foreground">Desconto</dt>
+              <dd className="mt-1 font-medium tabular-nums text-green-600">
+                - <MoneyValues amount={Number(anticipation.discount)} />
+              </dd>
+            </div>
+          )}
+
+          <div className={Number(anticipation.discount) > 0 ? "col-span-2 border-t pt-3" : ""}>
+            <dt className="text-muted-foreground">
+              {Number(anticipation.discount) > 0 ? "Valor Final" : "Valor Total"}
+            </dt>
+            <dd className="mt-1 text-lg font-semibold tabular-nums text-primary">
+              <MoneyValues
+                amount={
+                  Number(anticipation.totalAmount) < 0
+                    ? Number(anticipation.totalAmount) + Number(anticipation.discount)
+                    : Number(anticipation.totalAmount) - Number(anticipation.discount)
+                }
+              />
+            </dd>
+          </div>
+
+          <div>
+            <dt className="text-muted-foreground">Status do Lançamento</dt>
+            <dd className="mt-1">
+              <Badge variant={isSettled ? "success" : "outline"}>
+                {isSettled ? "Pago" : "Pendente"}
+              </Badge>
+            </dd>
+          </div>
+
+          {anticipation.pagador && (
+            <div>
+              <dt className="text-muted-foreground">Pagador</dt>
+              <dd className="mt-1 font-medium">{anticipation.pagador.name}</dd>
+            </div>
+          )}
+
+          {anticipation.categoria && (
+            <div>
+              <dt className="text-muted-foreground">Categoria</dt>
+              <dd className="mt-1 font-medium">
+                {anticipation.categoria.name}
+              </dd>
+            </div>
+          )}
+        </dl>
+
+        {anticipation.note && (
+          <div className="rounded-lg border bg-muted/20 p-3">
+            <dt className="text-xs font-medium text-muted-foreground">
+              Observação
+            </dt>
+            <dd className="mt-1 text-sm">{anticipation.note}</dd>
+          </div>
+        )}
+      </CardContent>
+
+      <CardFooter className="flex flex-wrap items-center justify-between gap-2 border-t pt-4">
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={handleViewLancamento}
+          disabled={isPending}
+        >
+          <RiEyeLine className="mr-2 size-4" />
+          Ver Lançamento
+        </Button>
+
+        {canCancel && (
+          <ConfirmActionDialog
+            trigger={
+              <Button variant="destructive" size="sm" disabled={isPending}>
+                <RiCloseLine className="mr-2 size-4" />
+                Cancelar Antecipação
+              </Button>
+            }
+            title="Cancelar antecipação?"
+            description="Esta ação irá reverter a antecipação e restaurar as parcelas originais. O lançamento de antecipação será removido."
+            confirmLabel="Cancelar Antecipação"
+            confirmVariant="destructive"
+            pendingLabel="Cancelando..."
+            onConfirm={handleCancel}
+          />
+        )}
+
+        {isSettled && (
+          <div className="text-xs text-muted-foreground">
+            Não é possível cancelar uma antecipação paga
+          </div>
+        )}
+      </CardFooter>
+    </Card>
+  );
+}
diff --git a/components/lancamentos/shared/estabelecimento-input.tsx b/components/lancamentos/shared/estabelecimento-input.tsx
new file mode 100644
index 0000000..4215f8a
--- /dev/null
+++ b/components/lancamentos/shared/estabelecimento-input.tsx
@@ -0,0 +1,129 @@
+"use client";
+
+import { RiCheckLine, RiSearchLine } from "@remixicon/react";
+import * as React from "react";
+
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import { Input } from "@/components/ui/input";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { cn } from "@/lib/utils/ui";
+
+export interface EstabelecimentoInputProps {
+  id?: string;
+  value: string;
+  onChange: (value: string) => void;
+  estabelecimentos: string[];
+  placeholder?: string;
+  required?: boolean;
+  maxLength?: number;
+}
+
+export function EstabelecimentoInput({
+  id,
+  value,
+  onChange,
+  estabelecimentos = [],
+  placeholder = "Ex.: Padaria",
+  required = false,
+  maxLength = 20,
+}: EstabelecimentoInputProps) {
+  const [open, setOpen] = React.useState(false);
+  const [searchValue, setSearchValue] = React.useState("");
+
+  const handleSelect = (selectedValue: string) => {
+    onChange(selectedValue);
+    setOpen(false);
+    setSearchValue("");
+  };
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = e.target.value;
+    onChange(newValue);
+    setSearchValue(newValue);
+
+    // Open popover when user types and there are suggestions
+    if (newValue.length > 0 && estabelecimentos.length > 0) {
+      setOpen(true);
+    }
+  };
+
+  const filteredEstabelecimentos = React.useMemo(() => {
+    if (!searchValue) return estabelecimentos;
+
+    const lowerSearch = searchValue.toLowerCase();
+    return estabelecimentos.filter((item) =>
+      item.toLowerCase().includes(lowerSearch)
+    );
+  }, [estabelecimentos, searchValue]);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <div className="relative">
+          <Input
+            id={id}
+            value={value}
+            onChange={handleInputChange}
+            placeholder={placeholder}
+            required={required}
+            maxLength={maxLength}
+            autoComplete="off"
+            onFocus={() => {
+              if (estabelecimentos.length > 0) {
+                setOpen(true);
+              }
+            }}
+          />
+          {estabelecimentos.length > 0 && (
+            <RiSearchLine className="absolute right-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground pointer-events-none" />
+          )}
+        </div>
+      </PopoverTrigger>
+      {estabelecimentos.length > 0 && (
+        <PopoverContent
+          className="p-0 w-[--radix-popover-trigger-width]"
+          align="start"
+          onOpenAutoFocus={(e) => e.preventDefault()}
+        >
+          <Command>
+            <CommandList className="max-h-[300px] overflow-y-auto">
+              <CommandEmpty className="p-6">
+                Nenhum estabelecimento encontrado.
+              </CommandEmpty>
+              <CommandGroup className="p-1">
+                {filteredEstabelecimentos.map((item) => (
+                  <CommandItem
+                    key={item}
+                    value={item}
+                    onSelect={() => handleSelect(item)}
+                    className="cursor-pointer gap-1"
+                  >
+                    <RiCheckLine
+                      className={cn(
+                        "size-4 shrink-0",
+                        value === item
+                          ? "opacity-100  text-green-500"
+                          : "opacity-5"
+                      )}
+                    />
+                    <span className="truncate flex-1">{item}</span>
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      )}
+    </Popover>
+  );
+}
diff --git a/components/lancamentos/shared/installment-timeline.tsx b/components/lancamentos/shared/installment-timeline.tsx
new file mode 100644
index 0000000..c144c42
--- /dev/null
+++ b/components/lancamentos/shared/installment-timeline.tsx
@@ -0,0 +1,92 @@
+import {
+  calculateLastInstallmentDate,
+  formatCurrentInstallment,
+  formatLastInstallmentDate,
+  formatPurchaseDate,
+} from "@/lib/installments/utils";
+import { RiArrowDownFill, RiCheckLine } from "@remixicon/react";
+
+type InstallmentTimelineProps = {
+  purchaseDate: Date;
+  currentInstallment: number;
+  totalInstallments: number;
+  period: string;
+};
+
+export function InstallmentTimeline({
+  purchaseDate,
+  currentInstallment,
+  totalInstallments,
+  period,
+}: InstallmentTimelineProps) {
+  const lastInstallmentDate = calculateLastInstallmentDate(
+    period,
+    currentInstallment,
+    totalInstallments
+  );
+
+  return (
+    <div className="relative flex items-center justify-between px-4 py-4">
+      {/* Linha de conexão */}
+      <div className="absolute left-0 right-0 top-6 h-0.5 bg-border">
+        <div
+          className="h-full bg-blue-600 transition-all duration-300"
+          style={{
+            width: `${
+              ((currentInstallment - 1) / (totalInstallments - 1)) * 100
+            }%`,
+          }}
+        />
+      </div>
+
+      {/* Ponto 1: Data de Compra */}
+      <div className="relative z-10 flex flex-col items-center gap-2">
+        <div className="flex size-4 items-center justify-center rounded-full border-2 border-blue-600 bg-blue-600 shadow-sm">
+          <RiCheckLine className="size-5 text-white" />
+        </div>
+        <div className="flex flex-col items-center">
+          <span className="text-xs font-medium text-foreground">
+            Data de Compra
+          </span>
+          <span className="text-xs text-muted-foreground">
+            {formatPurchaseDate(purchaseDate)}
+          </span>
+        </div>
+      </div>
+
+      {/* Ponto 2: Parcela Atual */}
+      <div className="relative z-10 flex flex-col items-center gap-2">
+        <div
+          className={`flex size-4 items-center justify-center rounded-full border-2 shadow-sm border-orange-600 bg-orange-600`}
+        >
+          <RiArrowDownFill className="size-5 text-white" />
+        </div>
+        <div className="flex flex-col items-center">
+          <span className="text-xs font-medium text-foreground">
+            Parcela Atual
+          </span>
+          <span className="text-xs text-muted-foreground">
+            {formatCurrentInstallment(currentInstallment, totalInstallments)}
+          </span>
+        </div>
+      </div>
+
+      {/* Ponto 3: Última Parcela */}
+      <div className="relative z-10 flex flex-col items-center gap-2">
+        <div
+          className={`flex size-4 items-center justify-center rounded-full border-2 shadow-sm border-green-600 bg-green-600`}
+        >
+          <RiCheckLine className="size-5 text-white" />
+        </div>
+        <div className="flex flex-col items-center">
+          <span className="text-xs font-medium text-foreground">
+            Última Parcela
+          </span>
+          <span className="text-xs text-muted-foreground">
+            {formatLastInstallmentDate(lastInstallmentDate)}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/components/lancamentos/table/lancamentos-filters.tsx b/components/lancamentos/table/lancamentos-filters.tsx
new file mode 100644
index 0000000..0b732f0
--- /dev/null
+++ b/components/lancamentos/table/lancamentos-filters.tsx
@@ -0,0 +1,463 @@
+"use client";
+
+import { CheckIcon, ChevronsUpDownIcon } from "lucide-react";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+  useTransition,
+  type ReactNode,
+} from "react";
+import { Button } from "@/components/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import { Input } from "@/components/ui/input";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+} from "@/components/ui/select";
+import {
+  LANCAMENTO_CONDITIONS,
+  LANCAMENTO_PAYMENT_METHODS,
+  LANCAMENTO_TRANSACTION_TYPES,
+} from "@/lib/lancamentos/constants";
+import { cn } from "@/lib/utils/ui";
+import {
+  TransactionTypeSelectContent,
+  ConditionSelectContent,
+  PaymentMethodSelectContent,
+  CategoriaSelectContent,
+  PagadorSelectContent,
+  ContaCartaoSelectContent,
+} from "../select-items";
+
+import type { ContaCartaoFilterOption, LancamentoFilterOption } from "../types";
+
+const FILTER_EMPTY_VALUE = "__all";
+
+const buildStaticOptions = (values: readonly string[]) =>
+  values.map((value) => ({ value, label: value }));
+
+interface FilterSelectProps {
+  param: string;
+  placeholder: string;
+  options: { value: string; label: string }[];
+  widthClass?: string;
+  disabled?: boolean;
+  getParamValue: (key: string) => string;
+  onChange: (key: string, value: string | null) => void;
+  renderContent?: (label: string) => ReactNode;
+}
+
+function FilterSelect({
+  param,
+  placeholder,
+  options,
+  widthClass = "w-[130px]",
+  disabled,
+  getParamValue,
+  onChange,
+  renderContent,
+}: FilterSelectProps) {
+  const value = getParamValue(param);
+  const current = options.find((option) => option.value === value);
+  const displayLabel =
+    value === FILTER_EMPTY_VALUE ? placeholder : current?.label ?? placeholder;
+
+  return (
+    <Select
+      value={value}
+      onValueChange={(nextValue) =>
+        onChange(param, nextValue === FILTER_EMPTY_VALUE ? null : nextValue)
+      }
+      disabled={disabled}
+    >
+      <SelectTrigger
+        className={cn("text-sm border-dashed", widthClass)}
+        disabled={disabled}
+      >
+        <span className="truncate">
+          {value !== FILTER_EMPTY_VALUE && current && renderContent
+            ? renderContent(current.label)
+            : displayLabel}
+        </span>
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value={FILTER_EMPTY_VALUE}>Todos</SelectItem>
+        {options.map((option) => (
+          <SelectItem key={option.value} value={option.value}>
+            {renderContent ? renderContent(option.label) : option.label}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}
+
+interface LancamentosFiltersProps {
+  pagadorOptions: LancamentoFilterOption[];
+  categoriaOptions: LancamentoFilterOption[];
+  contaCartaoOptions: ContaCartaoFilterOption[];
+  className?: string;
+}
+
+export function LancamentosFilters({
+  pagadorOptions,
+  categoriaOptions,
+  contaCartaoOptions,
+  className,
+}: LancamentosFiltersProps) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const [isPending, startTransition] = useTransition();
+
+  const getParamValue = useCallback(
+    (key: string) => searchParams.get(key) ?? FILTER_EMPTY_VALUE,
+    [searchParams]
+  );
+
+  const handleFilterChange = useCallback(
+    (key: string, value: string | null) => {
+      const nextParams = new URLSearchParams(searchParams.toString());
+
+      if (value && value !== FILTER_EMPTY_VALUE) {
+        nextParams.set(key, value);
+      } else {
+        nextParams.delete(key);
+      }
+
+      startTransition(() => {
+        router.replace(`${pathname}?${nextParams.toString()}`, {
+          scroll: false,
+        });
+      });
+    },
+    [pathname, router, searchParams, startTransition]
+  );
+
+  const [searchValue, setSearchValue] = useState(searchParams.get("q") ?? "");
+  const currentSearchParam = searchParams.get("q") ?? "";
+
+  useEffect(() => {
+    setSearchValue(currentSearchParam);
+  }, [currentSearchParam]);
+
+  useEffect(() => {
+    if (searchValue === currentSearchParam) {
+      return;
+    }
+
+    const timeout = setTimeout(() => {
+      const normalized = searchValue.trim();
+      handleFilterChange("q", normalized.length > 0 ? normalized : null);
+    }, 350);
+
+    return () => clearTimeout(timeout);
+  }, [searchValue, currentSearchParam, handleFilterChange]);
+
+  const handleReset = useCallback(() => {
+    const periodValue = searchParams.get("periodo");
+    const nextParams = new URLSearchParams();
+    if (periodValue) {
+      nextParams.set("periodo", periodValue);
+    }
+    setSearchValue("");
+    setCategoriaOpen(false);
+    startTransition(() => {
+      const target = nextParams.toString()
+        ? `${pathname}?${nextParams.toString()}`
+        : pathname;
+      router.replace(target, { scroll: false });
+    });
+  }, [pathname, router, searchParams, startTransition]);
+
+  const pagadorSelectOptions = useMemo(
+    () =>
+      pagadorOptions.map((option) => ({
+        value: option.slug,
+        label: option.label,
+        avatarUrl: option.avatarUrl,
+      })),
+    [pagadorOptions]
+  );
+
+  const contaOptions = useMemo(
+    () =>
+      contaCartaoOptions
+        .filter((option) => option.kind === "conta")
+        .map((option) => ({
+          value: option.slug,
+          label: option.label,
+          logo: option.logo,
+        })),
+    [contaCartaoOptions]
+  );
+
+  const cartaoOptions = useMemo(
+    () =>
+      contaCartaoOptions
+        .filter((option) => option.kind === "cartao")
+        .map((option) => ({
+          value: option.slug,
+          label: option.label,
+          logo: option.logo,
+        })),
+    [contaCartaoOptions]
+  );
+
+  const categoriaValue = getParamValue("categoria");
+  const selectedCategoria =
+    categoriaValue !== FILTER_EMPTY_VALUE
+      ? categoriaOptions.find((option) => option.slug === categoriaValue)
+      : null;
+
+  const pagadorValue = getParamValue("pagador");
+  const selectedPagador =
+    pagadorValue !== FILTER_EMPTY_VALUE
+      ? pagadorOptions.find((option) => option.slug === pagadorValue)
+      : null;
+
+  const contaCartaoValue = getParamValue("contaCartao");
+  const selectedContaCartao =
+    contaCartaoValue !== FILTER_EMPTY_VALUE
+      ? contaCartaoOptions.find((option) => option.slug === contaCartaoValue)
+      : null;
+
+  const [categoriaOpen, setCategoriaOpen] = useState(false);
+
+  return (
+    <div className={cn("flex flex-wrap items-center gap-2", className)}>
+      <FilterSelect
+        param="transacao"
+        placeholder="Tipo de Lançamento"
+        options={buildStaticOptions(LANCAMENTO_TRANSACTION_TYPES)}
+        widthClass="w-[130px]"
+        disabled={isPending}
+        getParamValue={getParamValue}
+        onChange={handleFilterChange}
+        renderContent={(label) => (
+          <TransactionTypeSelectContent label={label} />
+        )}
+      />
+
+      <FilterSelect
+        param="condicao"
+        placeholder="Condição"
+        options={buildStaticOptions(LANCAMENTO_CONDITIONS)}
+        widthClass="w-[130px]"
+        disabled={isPending}
+        getParamValue={getParamValue}
+        onChange={handleFilterChange}
+        renderContent={(label) => <ConditionSelectContent label={label} />}
+      />
+
+      <FilterSelect
+        param="pagamento"
+        placeholder="Pagamento"
+        options={buildStaticOptions(LANCAMENTO_PAYMENT_METHODS)}
+        widthClass="w-[130px]"
+        disabled={isPending}
+        getParamValue={getParamValue}
+        onChange={handleFilterChange}
+        renderContent={(label) => <PaymentMethodSelectContent label={label} />}
+      />
+
+      <Select
+        value={getParamValue("pagador")}
+        onValueChange={(value) =>
+          handleFilterChange(
+            "pagador",
+            value === FILTER_EMPTY_VALUE ? null : value
+          )
+        }
+        disabled={isPending}
+      >
+        <SelectTrigger
+          className="w-[150px] text-sm border-dashed"
+          disabled={isPending}
+        >
+          <span className="truncate">
+            {selectedPagador ? (
+              <PagadorSelectContent
+                label={selectedPagador.label}
+                avatarUrl={selectedPagador.avatarUrl}
+              />
+            ) : (
+              "Pagador"
+            )}
+          </span>
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value={FILTER_EMPTY_VALUE}>Todos</SelectItem>
+          {pagadorSelectOptions.map((option) => (
+            <SelectItem key={option.value} value={option.value}>
+              <PagadorSelectContent
+                label={option.label}
+                avatarUrl={option.avatarUrl}
+              />
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+
+      <Popover open={categoriaOpen} onOpenChange={setCategoriaOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            role="combobox"
+            aria-expanded={categoriaOpen}
+            className="w-[150px] justify-between text-sm border-dashed border-input"
+            disabled={isPending}
+          >
+            <span className="truncate flex items-center gap-2">
+              {selectedCategoria ? (
+                <CategoriaSelectContent
+                  label={selectedCategoria.label}
+                  icon={selectedCategoria.icon}
+                />
+              ) : (
+                "Categoria"
+              )}
+            </span>
+            <ChevronsUpDownIcon className="ml-2 size-4 shrink-0 opacity-50" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent align="start" className="w-[220px] p-0">
+          <Command>
+            <CommandInput placeholder="Buscar categoria..." />
+            <CommandList>
+              <CommandEmpty>Nada encontrado.</CommandEmpty>
+              <CommandGroup>
+                <CommandItem
+                  value={FILTER_EMPTY_VALUE}
+                  onSelect={() => {
+                    handleFilterChange("categoria", null);
+                    setCategoriaOpen(false);
+                  }}
+                >
+                  Todas
+                  {categoriaValue === FILTER_EMPTY_VALUE ? (
+                    <CheckIcon className="ml-auto size-4" />
+                  ) : null}
+                </CommandItem>
+                {categoriaOptions.map((option) => (
+                  <CommandItem
+                    key={option.slug}
+                    value={option.slug}
+                    onSelect={() => {
+                      handleFilterChange("categoria", option.slug);
+                      setCategoriaOpen(false);
+                    }}
+                  >
+                    <CategoriaSelectContent
+                      label={option.label}
+                      icon={option.icon}
+                    />
+                    {categoriaValue === option.slug ? (
+                      <CheckIcon className="ml-auto size-4" />
+                    ) : null}
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+
+      <Select
+        value={getParamValue("contaCartao")}
+        onValueChange={(value) =>
+          handleFilterChange(
+            "contaCartao",
+            value === FILTER_EMPTY_VALUE ? null : value
+          )
+        }
+        disabled={isPending}
+      >
+        <SelectTrigger
+          className="w-[150px] text-sm border-dashed"
+          disabled={isPending}
+        >
+          <span className="truncate">
+            {selectedContaCartao ? (
+              <ContaCartaoSelectContent
+                label={selectedContaCartao.label}
+                logo={selectedContaCartao.logo}
+                isCartao={selectedContaCartao.kind === "cartao"}
+              />
+            ) : (
+              "Conta/Cartão"
+            )}
+          </span>
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value={FILTER_EMPTY_VALUE}>Todos</SelectItem>
+          {contaOptions.length > 0 ? (
+            <SelectGroup>
+              <SelectLabel>Contas</SelectLabel>
+              {contaOptions.map((option) => (
+                <SelectItem key={option.value} value={option.value}>
+                  <ContaCartaoSelectContent
+                    label={option.label}
+                    logo={option.logo}
+                    isCartao={false}
+                  />
+                </SelectItem>
+              ))}
+            </SelectGroup>
+          ) : null}
+          {cartaoOptions.length > 0 ? (
+            <SelectGroup>
+              <SelectLabel>Cartões</SelectLabel>
+              {cartaoOptions.map((option) => (
+                <SelectItem key={option.value} value={option.value}>
+                  <ContaCartaoSelectContent
+                    label={option.label}
+                    logo={option.logo}
+                    isCartao={true}
+                  />
+                </SelectItem>
+              ))}
+            </SelectGroup>
+          ) : null}
+        </SelectContent>
+      </Select>
+
+      <Input
+        value={searchValue}
+        onChange={(event) => setSearchValue(event.target.value)}
+        placeholder="Buscar"
+        aria-label="Buscar lançamentos"
+        className="w-[150px] text-sm border-dashed"
+      />
+
+      <Button
+        type="button"
+        variant="link"
+        size="sm"
+        onClick={handleReset}
+        disabled={isPending}
+      >
+        Limpar
+      </Button>
+    </div>
+  );
+}
diff --git a/components/lancamentos/table/lancamentos-table.tsx b/components/lancamentos/table/lancamentos-table.tsx
new file mode 100644
index 0000000..f8d161d
--- /dev/null
+++ b/components/lancamentos/table/lancamentos-table.tsx
@@ -0,0 +1,857 @@
+"use client";
+import { EmptyState } from "@/components/empty-state";
+import MoneyValues from "@/components/money-values";
+import { TypeBadge } from "@/components/type-badge";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Spinner } from "@/components/ui/spinner";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { getAvatarSrc } from "@/lib/pagadores/utils";
+import { formatDate } from "@/lib/utils/date";
+import { getConditionIcon, getPaymentMethodIcon } from "@/lib/utils/icons";
+import { cn } from "@/lib/utils/ui";
+import { title_font } from "@/public/fonts/font_index";
+import {
+  RiAddCircleFill,
+  RiAddCircleLine,
+  RiArrowLeftRightLine,
+  RiBankCard2Line,
+  RiBankLine,
+  RiChat1Line,
+  RiCheckLine,
+  RiDeleteBin5Line,
+  RiEyeLine,
+  RiGroupLine,
+  RiHistoryLine,
+  RiMoreFill,
+  RiPencilLine,
+  RiThumbUpFill,
+  RiThumbUpLine,
+  RiTimeLine,
+} from "@remixicon/react";
+import {
+  ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  RowSelectionState,
+  SortingState,
+  useReactTable,
+} from "@tanstack/react-table";
+import Image from "next/image";
+import Link from "next/link";
+import { useMemo, useState } from "react";
+import type {
+  ContaCartaoFilterOption,
+  LancamentoFilterOption,
+  LancamentoItem,
+} from "../types";
+import { LancamentosFilters } from "./lancamentos-filters";
+
+const resolveLogoSrc = (logo: string | null) => {
+  if (!logo) {
+    return null;
+  }
+
+  const fileName = logo.split("/").filter(Boolean).pop() ?? logo;
+  return `/logos/${fileName}`;
+};
+
+type BuildColumnsArgs = {
+  onEdit?: (item: LancamentoItem) => void;
+  onConfirmDelete?: (item: LancamentoItem) => void;
+  onViewDetails?: (item: LancamentoItem) => void;
+  onToggleSettlement?: (item: LancamentoItem) => void;
+  onAnticipate?: (item: LancamentoItem) => void;
+  onViewAnticipationHistory?: (item: LancamentoItem) => void;
+  isSettlementLoading: (id: string) => boolean;
+  showActions: boolean;
+};
+
+const buildColumns = ({
+  onEdit,
+  onConfirmDelete,
+  onViewDetails,
+  onToggleSettlement,
+  onAnticipate,
+  onViewAnticipationHistory,
+  isSettlementLoading,
+  showActions,
+}: BuildColumnsArgs): ColumnDef<LancamentoItem>[] => {
+  const noop = () => undefined;
+  const handleEdit = onEdit ?? noop;
+  const handleConfirmDelete = onConfirmDelete ?? noop;
+  const handleViewDetails = onViewDetails ?? noop;
+  const handleToggleSettlement = onToggleSettlement ?? noop;
+  const handleAnticipate = onAnticipate ?? noop;
+  const handleViewAnticipationHistory = onViewAnticipationHistory ?? noop;
+
+  const columns: ColumnDef<LancamentoItem>[] = [
+    {
+      id: "select",
+      header: ({ table }) => (
+        <Checkbox
+          checked={
+            table.getIsAllPageRowsSelected() ||
+            (table.getIsSomePageRowsSelected() && "indeterminate")
+          }
+          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+          aria-label="Selecionar todos"
+        />
+      ),
+      cell: ({ row }) => (
+        <Checkbox
+          checked={row.getIsSelected()}
+          onCheckedChange={(value) => row.toggleSelected(!!value)}
+          aria-label="Selecionar linha"
+        />
+      ),
+      enableSorting: false,
+      enableHiding: false,
+    },
+    {
+      accessorKey: "purchaseDate",
+      header: "Data",
+      cell: ({ row }) => (
+        <span className="whitespace-nowrap text-muted-foreground">
+          {formatDate(row.original.purchaseDate)}
+        </span>
+      ),
+    },
+    {
+      accessorKey: "name",
+      header: "Estabelecimento",
+      cell: ({ row }) => {
+        const {
+          name,
+          installmentCount,
+          currentInstallment,
+          paymentMethod,
+          dueDate,
+          note,
+          isDivided,
+          isAnticipated,
+        } = row.original;
+
+        const installmentBadge =
+          currentInstallment && installmentCount
+            ? `${currentInstallment} de ${installmentCount}`
+            : null;
+
+        const isBoleto = paymentMethod === "Boleto" && dueDate;
+        const dueDateLabel =
+          isBoleto && dueDate ? `Venc. ${formatDate(dueDate)}` : null;
+        const hasNote = Boolean(note?.trim().length);
+        const isLastInstallment =
+          currentInstallment === installmentCount &&
+          installmentCount &&
+          installmentCount > 1;
+
+        return (
+          <span className="flex items-center gap-2">
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <span className="line-clamp-2 max-w-[180px] font-bold truncate">
+                  {name}
+                </span>
+              </TooltipTrigger>
+              <TooltipContent side="top" className="max-w-xs">
+                {name}
+              </TooltipContent>
+            </Tooltip>
+
+            {isDivided && (
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <span className="inline-flex rounded-full p-1">
+                    <RiGroupLine
+                      size={14}
+                      className="text-muted-foreground"
+                      aria-hidden
+                    />
+                    <span className="sr-only">Dividido entre pagadores</span>
+                  </span>
+                </TooltipTrigger>
+                <TooltipContent side="top">
+                  Dividido entre pagadores
+                </TooltipContent>
+              </Tooltip>
+            )}
+
+            {isLastInstallment ? (
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <span className="inline-flex">
+                    <Image
+                      src="/icones/party.svg"
+                      alt="Última parcela"
+                      width={16}
+                      height={16}
+                      className="h-4 w-4"
+                    />
+                    <span className="sr-only">Última parcela</span>
+                  </span>
+                </TooltipTrigger>
+                <TooltipContent side="top">Última parcela!</TooltipContent>
+              </Tooltip>
+            ) : null}
+
+            {installmentBadge ? (
+              <Badge variant="outline" className="px-2 text-xs">
+                {installmentBadge}
+              </Badge>
+            ) : null}
+
+            {dueDateLabel ? (
+              <Badge variant="outline" className="px-2 text-xs">
+                {dueDateLabel}
+              </Badge>
+            ) : null}
+
+            {isAnticipated && (
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <span className="inline-flex rounded-full p-1">
+                    <RiTimeLine
+                      size={14}
+                      className="text-muted-foreground"
+                      aria-hidden
+                    />
+                    <span className="sr-only">Parcela antecipada</span>
+                  </span>
+                </TooltipTrigger>
+                <TooltipContent side="top">Parcela antecipada</TooltipContent>
+              </Tooltip>
+            )}
+
+            {hasNote ? (
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <span className="inline-flex rounded-full p-1 hover:bg-muted/60">
+                    <RiChat1Line
+                      className="h-4 w-4 text-muted-foreground"
+                      aria-hidden
+                    />
+                    <span className="sr-only">Ver anotação</span>
+                  </span>
+                </TooltipTrigger>
+                <TooltipContent
+                  side="top"
+                  align="start"
+                  className="max-w-xs whitespace-pre-line text-sm"
+                >
+                  {note}
+                </TooltipContent>
+              </Tooltip>
+            ) : null}
+          </span>
+        );
+      },
+    },
+    {
+      accessorKey: "transactionType",
+      header: "Transação",
+      cell: ({ row }) => (
+        <TypeBadge
+          type={
+            row.original.transactionType as
+              | "Despesa"
+              | "Receita"
+              | "Transferência"
+          }
+        />
+      ),
+    },
+    {
+      accessorKey: "amount",
+      header: "Valor",
+      cell: ({ row }) => {
+        const isReceita = row.original.transactionType === "Receita";
+        const isTransfer = row.original.transactionType === "Transferência";
+
+        return (
+          <MoneyValues
+            amount={row.original.amount}
+            className={cn(
+              "whitespace-nowrap",
+              isReceita
+                ? "text-green-600 dark:text-green-400"
+                : "text-foreground",
+              isTransfer && "text-blue-700 dark:text-blue-500"
+            )}
+          />
+        );
+      },
+    },
+    {
+      accessorKey: "condition",
+      header: "Condição",
+      cell: ({ row }) => {
+        const condition = row.original.condition;
+        const icon = getConditionIcon(condition);
+        return (
+          <span className="flex items-center gap-2">
+            {icon}
+            <span>{condition}</span>
+          </span>
+        );
+      },
+    },
+    {
+      accessorKey: "paymentMethod",
+      header: "Forma de Pagamento",
+      cell: ({ row }) => {
+        const method = row.original.paymentMethod;
+        const icon = getPaymentMethodIcon(method);
+        return (
+          <span className="flex items-center gap-2">
+            {icon}
+            <span>{method}</span>
+          </span>
+        );
+      },
+    },
+    {
+      accessorKey: "pagadorName",
+      header: "Pagador",
+      cell: ({ row }) => {
+        const { pagadorId, pagadorName, pagadorAvatar } = row.original;
+
+        if (!pagadorName) {
+          return <Badge variant="outline">—</Badge>;
+        }
+
+        const label = pagadorName.trim() || "Sem pagador";
+        const displayName = label.split(/\s+/)[0] ?? label;
+        const avatarSrc = getAvatarSrc(pagadorAvatar);
+        const initial = displayName.charAt(0).toUpperCase() || "?";
+        const content = (
+          <>
+            <Avatar className="size-6 border border-border/60 bg-background">
+              <AvatarImage src={avatarSrc} alt={`Avatar de ${label}`} />
+              <AvatarFallback className="text-[10px] font-medium uppercase">
+                {initial}
+              </AvatarFallback>
+            </Avatar>
+            <span className="truncate">{displayName}</span>
+          </>
+        );
+
+        if (!pagadorId) {
+          return (
+            <Badge
+              variant="outline"
+              className="max-w-[200px] px-2 py-0.5"
+              title={label}
+            >
+              <span className="inline-flex items-center gap-2">{content}</span>
+            </Badge>
+          );
+        }
+
+        return (
+          <Badge
+            asChild
+            variant="outline"
+            className="max-w-[200px] px-2 py-0.5"
+          >
+            <Link
+              href={`/pagadores/${pagadorId}`}
+              className="inline-flex items-center gap-2"
+              title={label}
+            >
+              {content}
+            </Link>
+          </Badge>
+        );
+      },
+    },
+    {
+      id: "contaCartao",
+      header: "Conta/Cartão",
+      cell: ({ row }) => {
+        const {
+          cartaoName,
+          contaName,
+          cartaoLogo,
+          contaLogo,
+          cartaoId,
+          contaId,
+        } = row.original;
+        const label = cartaoName ?? contaName;
+        const logoSrc = resolveLogoSrc(cartaoLogo ?? contaLogo);
+        const href = cartaoId
+          ? `/cartoes/${cartaoId}/fatura`
+          : contaId
+          ? `/contas/${contaId}/extrato`
+          : null;
+        const Icon = cartaoId ? RiBankCard2Line : contaId ? RiBankLine : null;
+
+        if (!label) {
+          return "—";
+        }
+
+        return (
+          <Link
+            href={href ?? "#"}
+            className={cn(
+              "flex items-center gap-2",
+              href ? "underline " : "pointer-events-none"
+            )}
+            aria-disabled={!href}
+          >
+            {logoSrc ? (
+              <Image
+                src={logoSrc}
+                alt={`Logo de ${label}`}
+                width={32}
+                height={32}
+                className="rounded-lg"
+              />
+            ) : null}
+            <span className="truncate">{label}</span>
+            {Icon ? (
+              <Icon className="size-4 text-muted-foreground" aria-hidden />
+            ) : null}
+          </Link>
+        );
+      },
+    },
+  ];
+
+  if (showActions) {
+    columns.push({
+      id: "actions",
+      header: "Ações",
+      enableSorting: false,
+      cell: ({ row }) => (
+        <div className="flex items-center gap-2">
+          {(() => {
+            const paymentMethod = row.original.paymentMethod;
+            const showSettlementButton = [
+              "Pix",
+              "Boleto",
+              "Cartão de crédito",
+              "Dinheiro",
+              "Cartão de débito",
+            ].includes(paymentMethod);
+
+            if (!showSettlementButton) {
+              return null;
+            }
+
+            const canToggleSettlement =
+              paymentMethod === "Pix" ||
+              paymentMethod === "Boleto" ||
+              paymentMethod === "Dinheiro" ||
+              paymentMethod === "Cartão de débito";
+            const readOnly = row.original.readonly;
+            const loading = isSettlementLoading(row.original.id);
+            const settled = Boolean(row.original.isSettled);
+            const Icon = settled ? RiThumbUpFill : RiThumbUpLine;
+
+            return (
+              <Button
+                variant={settled ? "secondary" : "ghost"}
+                size="icon-sm"
+                onClick={() => handleToggleSettlement(row.original)}
+                disabled={loading || readOnly || !canToggleSettlement}
+                className={canToggleSettlement ? undefined : "opacity-70"}
+              >
+                {loading ? (
+                  <Spinner className="size-4" />
+                ) : (
+                  <Icon className={cn("size-4", settled && "text-green-600")} />
+                )}
+                <span className="sr-only">
+                  {settled ? "Desfazer pagamento" : "Marcar como pago"}
+                </span>
+              </Button>
+            );
+          })()}
+
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" size="icon-sm">
+                <RiMoreFill className="size-4" />
+                <span className="sr-only">Abrir ações do lançamento</span>
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="w-44">
+              <DropdownMenuItem
+                onSelect={() => handleViewDetails(row.original)}
+              >
+                <RiEyeLine className="size-4" />
+                Detalhes
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                onSelect={() => handleEdit(row.original)}
+                disabled={row.original.readonly}
+              >
+                <RiPencilLine className="size-4" />
+                Editar
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                variant="destructive"
+                onSelect={() => handleConfirmDelete(row.original)}
+                disabled={row.original.readonly}
+              >
+                <RiDeleteBin5Line className="size-4" />
+                Remover
+              </DropdownMenuItem>
+
+              {/* Opções de Antecipação */}
+              {row.original.condition === "Parcelado" &&
+                row.original.seriesId && (
+                  <>
+                    <DropdownMenuSeparator />
+
+                    {!row.original.isAnticipated && onAnticipate && (
+                      <DropdownMenuItem
+                        onSelect={() => handleAnticipate(row.original)}
+                      >
+                        <RiTimeLine className="size-4" />
+                        Antecipar Parcelas
+                      </DropdownMenuItem>
+                    )}
+
+                    {onViewAnticipationHistory && (
+                      <DropdownMenuItem
+                        onSelect={() =>
+                          handleViewAnticipationHistory(row.original)
+                        }
+                      >
+                        <RiHistoryLine className="size-4" />
+                        Histórico de Antecipações
+                      </DropdownMenuItem>
+                    )}
+
+                    {row.original.isAnticipated && (
+                      <DropdownMenuItem disabled>
+                        <RiCheckLine className="size-4 text-green-500" />
+                        Parcela Antecipada
+                      </DropdownMenuItem>
+                    )}
+                  </>
+                )}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      ),
+    });
+  }
+
+  return columns;
+};
+
+type LancamentosTableProps = {
+  data: LancamentoItem[];
+  pagadorFilterOptions?: LancamentoFilterOption[];
+  categoriaFilterOptions?: LancamentoFilterOption[];
+  contaCartaoFilterOptions?: ContaCartaoFilterOption[];
+  onCreate?: () => void;
+  onMassAdd?: () => void;
+  onEdit?: (item: LancamentoItem) => void;
+  onConfirmDelete?: (item: LancamentoItem) => void;
+  onBulkDelete?: (items: LancamentoItem[]) => void;
+  onViewDetails?: (item: LancamentoItem) => void;
+  onToggleSettlement?: (item: LancamentoItem) => void;
+  onAnticipate?: (item: LancamentoItem) => void;
+  onViewAnticipationHistory?: (item: LancamentoItem) => void;
+  isSettlementLoading?: (id: string) => boolean;
+  showActions?: boolean;
+  showFilters?: boolean;
+};
+
+export function LancamentosTable({
+  data,
+  pagadorFilterOptions = [],
+  categoriaFilterOptions = [],
+  contaCartaoFilterOptions = [],
+  onCreate,
+  onMassAdd,
+  onEdit,
+  onConfirmDelete,
+  onBulkDelete,
+  onViewDetails,
+  onToggleSettlement,
+  onAnticipate,
+  onViewAnticipationHistory,
+  isSettlementLoading,
+  showActions = true,
+  showFilters = true,
+}: LancamentosTableProps) {
+  const [sorting, setSorting] = useState<SortingState>([
+    { id: "purchaseDate", desc: true },
+  ]);
+  const [pagination, setPagination] = useState({
+    pageIndex: 0,
+    pageSize: 30,
+  });
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
+
+  const columns = useMemo(
+    () =>
+      buildColumns({
+        onEdit,
+        onConfirmDelete,
+        onViewDetails,
+        onToggleSettlement,
+        onAnticipate,
+        onViewAnticipationHistory,
+        isSettlementLoading: isSettlementLoading ?? (() => false),
+        showActions,
+      }),
+    [
+      onEdit,
+      onConfirmDelete,
+      onViewDetails,
+      onToggleSettlement,
+      onAnticipate,
+      onViewAnticipationHistory,
+      isSettlementLoading,
+      showActions,
+    ]
+  );
+
+  const table = useReactTable({
+    data,
+    columns,
+    state: {
+      sorting,
+      pagination,
+      rowSelection,
+    },
+    onSortingChange: setSorting,
+    onPaginationChange: setPagination,
+    onRowSelectionChange: setRowSelection,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    enableRowSelection: true,
+  });
+
+  const rowModel = table.getRowModel();
+  const hasRows = rowModel.rows.length > 0;
+  const totalRows = table.getCoreRowModel().rows.length;
+  const selectedRows = table.getFilteredSelectedRowModel().rows;
+  const selectedCount = selectedRows.length;
+  const selectedTotal = selectedRows.reduce(
+    (total, row) => total + (row.original.amount ?? 0),
+    0
+  );
+
+  const handleBulkDelete = () => {
+    if (onBulkDelete && selectedCount > 0) {
+      const selectedItems = selectedRows.map((row) => row.original);
+      onBulkDelete(selectedItems);
+      setRowSelection({});
+    }
+  };
+
+  const showTopControls =
+    Boolean(onCreate) || Boolean(onMassAdd) || showFilters;
+
+  return (
+    <TooltipProvider>
+      {showTopControls ? (
+        <div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
+          {onCreate || onMassAdd ? (
+            <div className="flex gap-2">
+              {onCreate ? (
+                <Button onClick={onCreate} className="w-full sm:w-auto">
+                  <RiAddCircleLine className="size-4" />
+                  Novo lançamento
+                </Button>
+              ) : null}
+              {onMassAdd ? (
+                <Button
+                  onClick={onMassAdd}
+                  variant="outline"
+                  size="icon"
+                  className="shrink-0"
+                >
+                  <RiAddCircleFill className="size-4" />
+                  <span className="sr-only">
+                    Adicionar múltiplos lançamentos
+                  </span>
+                </Button>
+              ) : null}
+            </div>
+          ) : (
+            <span className={showFilters ? "hidden sm:block" : ""} />
+          )}
+
+          {showFilters ? (
+            <LancamentosFilters
+              pagadorOptions={pagadorFilterOptions}
+              categoriaOptions={categoriaFilterOptions}
+              contaCartaoOptions={contaCartaoFilterOptions}
+              className="w-full lg:flex-1 lg:justify-end"
+            />
+          ) : null}
+        </div>
+      ) : null}
+
+      {selectedCount > 0 && onBulkDelete ? (
+        <div className="flex flex-wrap items-center gap-3 rounded-lg border bg-muted/50 px-4 py-2">
+          <div className="flex flex-col text-sm text-muted-foreground sm:flex-row sm:items-center sm:gap-2">
+            <span>
+              {selectedCount}{" "}
+              {selectedCount === 1 ? "item selecionado" : "itens selecionados"}
+            </span>
+            <span className="hidden sm:inline" aria-hidden>
+              •
+            </span>
+            <span>
+              Total:{" "}
+              <MoneyValues
+                amount={selectedTotal}
+                className="inline font-medium text-foreground"
+              />
+            </span>
+          </div>
+          <Button
+            onClick={handleBulkDelete}
+            variant="destructive"
+            size="sm"
+            className="ml-auto"
+          >
+            <RiDeleteBin5Line className="size-4" />
+            Remover selecionados
+          </Button>
+        </div>
+      ) : null}
+
+      <Card className="py-2">
+        <CardContent className="px-2 py-4 sm:px-4">
+          {hasRows ? (
+            <>
+              <div className="overflow-x-auto">
+                <Table>
+                  <TableHeader className={`${title_font.className}`}>
+                    {table.getHeaderGroups().map((headerGroup) => (
+                      <TableRow key={headerGroup.id}>
+                        {headerGroup.headers.map((header) => (
+                          <TableHead
+                            key={header.id}
+                            className="whitespace-nowrap"
+                          >
+                            {header.isPlaceholder
+                              ? null
+                              : flexRender(
+                                  header.column.columnDef.header,
+                                  header.getContext()
+                                )}
+                          </TableHead>
+                        ))}
+                      </TableRow>
+                    ))}
+                  </TableHeader>
+                  <TableBody>
+                    {rowModel.rows.map((row) => (
+                      <TableRow key={row.id}>
+                        {row.getVisibleCells().map((cell) => (
+                          <TableCell key={cell.id}>
+                            {flexRender(
+                              cell.column.columnDef.cell,
+                              cell.getContext()
+                            )}
+                          </TableCell>
+                        ))}
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </div>
+
+              <div className="mt-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+                <div className="flex items-center gap-2">
+                  <span className="text-sm text-muted-foreground">
+                    Exibindo {rowModel.rows.length} de {totalRows} lançamentos
+                  </span>
+                  <Select
+                    value={pagination.pageSize.toString()}
+                    onValueChange={(value) => {
+                      table.setPageSize(Number(value));
+                    }}
+                  >
+                    <SelectTrigger className="w-max">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="5">5 linhas</SelectItem>
+                      <SelectItem value="10">10 linhas</SelectItem>
+                      <SelectItem value="20">20 linhas</SelectItem>
+                      <SelectItem value="30">30 linhas</SelectItem>
+                      <SelectItem value="40">40 linhas</SelectItem>
+                      <SelectItem value="50">50 linhas</SelectItem>
+                      <SelectItem value="100">100 linhas</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="flex items-center gap-2">
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => table.previousPage()}
+                    disabled={!table.getCanPreviousPage()}
+                  >
+                    Anterior
+                  </Button>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => table.nextPage()}
+                    disabled={!table.getCanNextPage()}
+                  >
+                    Próximo
+                  </Button>
+                </div>
+              </div>
+            </>
+          ) : (
+            <div className="flex w-full items-center justify-center py-12">
+              <EmptyState
+                media={<RiArrowLeftRightLine className="size-6 text-primary" />}
+                title="Nenhum lançamento encontrado"
+                description="Ajuste os filtros ou cadastre um novo lançamento para visualizar aqui."
+              />
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </TooltipProvider>
+  );
+}
diff --git a/components/lancamentos/types.ts b/components/lancamentos/types.ts
new file mode 100644
index 0000000..871386d
--- /dev/null
+++ b/components/lancamentos/types.ts
@@ -0,0 +1,58 @@
+export type LancamentoItem = {
+  id: string;
+  name: string;
+  purchaseDate: string;
+  period: string;
+  transactionType: string;
+  amount: number;
+  condition: string;
+  paymentMethod: string;
+  pagadorId: string | null;
+  pagadorName: string | null;
+  pagadorAvatar: string | null;
+  pagadorRole: string | null;
+  contaId: string | null;
+  contaName: string | null;
+  contaLogo: string | null;
+  cartaoId: string | null;
+  cartaoName: string | null;
+  cartaoLogo: string | null;
+  categoriaId: string | null;
+  categoriaName: string | null;
+  categoriaType: string | null;
+  installmentCount: number | null;
+  recurrenceCount: number | null;
+  currentInstallment: number | null;
+  dueDate: string | null;
+  boletoPaymentDate: string | null;
+  note: string | null;
+  isSettled: boolean | null;
+  isDivided: boolean;
+  isAnticipated: boolean;
+  anticipationId: string | null;
+  seriesId: string | null;
+  readonly?: boolean;
+};
+
+export type SelectOption = {
+  value: string;
+  label: string;
+  role?: string | null;
+  group?: string | null;
+  slug?: string | null;
+  avatarUrl?: string | null;
+  logo?: string | null;
+  icon?: string | null;
+};
+
+export type LancamentoFilterOption = {
+  slug: string;
+  label: string;
+  icon?: string | null;
+  avatarUrl?: string | null;
+};
+
+export type ContaCartaoFilterOption = LancamentoFilterOption & {
+  kind: "conta" | "cartao";
+  logo?: string | null;
+};
diff --git a/components/logo-picker.tsx b/components/logo-picker.tsx
new file mode 100644
index 0000000..4fdda0f
--- /dev/null
+++ b/components/logo-picker.tsx
@@ -0,0 +1,160 @@
+"use client";
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { cn } from "@/lib/utils/ui";
+import Image from "next/image";
+
+import { deriveNameFromLogo } from "@/lib/logo";
+
+const DEFAULT_BASE_PATH = "/logos";
+
+const resolveLogoSrc = (logo: string, basePath: string) => {
+  if (/^https?:\/\//.test(logo)) {
+    return logo;
+  }
+  return `${basePath.replace(/\/$/, "")}/${logo.replace(/^\//, "")}`;
+};
+
+interface LogoPickerTriggerProps {
+  selectedLogo?: string | null;
+  disabled?: boolean;
+  helperText?: string;
+  placeholder?: string;
+  basePath?: string;
+  onOpen: () => void;
+  className?: string;
+}
+
+export function LogoPickerTrigger({
+  selectedLogo,
+  disabled,
+  helperText = "Clique para trocar o logo",
+  placeholder = "Selecionar logo",
+  basePath = DEFAULT_BASE_PATH,
+  onOpen,
+  className,
+}: LogoPickerTriggerProps) {
+  const hasLogo = Boolean(selectedLogo);
+  const selectedLogoLabel = deriveNameFromLogo(selectedLogo);
+  const selectedLogoPath =
+    hasLogo && selectedLogo ? resolveLogoSrc(selectedLogo, basePath) : null;
+
+  return (
+    <button
+      type="button"
+      onClick={onOpen}
+      disabled={disabled}
+      className={cn(
+        "flex w-full items-center gap-3 rounded-lg border p-3 text-left transition-colors hover:border-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-60",
+        className
+      )}
+    >
+      <span className="flex size-14 shrink-0 items-center justify-center overflow-hidden rounded-lg border border-border/40 bg-background shadow-xs">
+        {selectedLogoPath ? (
+          <Image
+            src={selectedLogoPath}
+            alt={selectedLogoLabel || "Logo selecionado"}
+            width={48}
+            height={48}
+            className="h-full w-full object-contain"
+          />
+        ) : (
+          <span className="text-xs text-muted-foreground">{placeholder}</span>
+        )}
+      </span>
+
+      <span className="flex min-w-0 flex-1 flex-col">
+        <span className="truncate font-medium text-foreground">
+          {selectedLogoLabel || placeholder}
+        </span>
+        <span className="text-xs text-muted-foreground">
+          {disabled ? "Nenhum logo disponível" : helperText}
+        </span>
+      </span>
+    </button>
+  );
+}
+
+interface LogoPickerDialogProps {
+  open: boolean;
+  logos: string[];
+  value: string;
+  onOpenChange: (open: boolean) => void;
+  onSelect: (logo: string) => void;
+  basePath?: string;
+  title?: string;
+  description?: string;
+  emptyState?: React.ReactNode;
+}
+
+export function LogoPickerDialog({
+  open,
+  logos,
+  value,
+  onOpenChange,
+  onSelect,
+  basePath = DEFAULT_BASE_PATH,
+  title = "Escolher logo",
+  description = "Selecione o logo que será usado para identificar este item.",
+  emptyState,
+}: LogoPickerDialogProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-xl">
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+          {description ? (
+            <DialogDescription>{description}</DialogDescription>
+          ) : null}
+        </DialogHeader>
+
+        {logos.length === 0 ? (
+          emptyState ?? (
+            <p className="text-sm text-muted-foreground">
+              Nenhum logo encontrado. Adicione arquivos na pasta de logos.
+            </p>
+          )
+        ) : (
+          <div className="grid max-h-72 grid-cols-3 gap-4 overflow-y-auto p-1 sm:grid-cols-4">
+            {logos.map((logo) => {
+              const isActive = value === logo;
+              const logoLabel = deriveNameFromLogo(logo);
+
+              return (
+                <button
+                  type="button"
+                  key={logo}
+                  onClick={() => onSelect(logo)}
+                  className={cn(
+                    "flex flex-col items-center gap-2 border rounded-lg bg-card p-2 text-center text-xs transition-all hover:border-primary hover:bg-primary/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+                    isActive &&
+                      "border-primary bg-primary/5 ring-2 ring-primary/40"
+                  )}
+                >
+                  <span className="flex w-full items-center justify-center overflow-hidden rounded-lg">
+                    <Image
+                      src={resolveLogoSrc(logo, basePath)}
+                      alt={logoLabel || logo}
+                      width={48}
+                      height={48}
+                      className="rounded-lg"
+                    />
+                  </span>
+                  <span className="line-clamp-2 leading-tight text-muted-foreground">
+                    {logoLabel}
+                  </span>
+                </button>
+              );
+            })}
+          </div>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/components/logo.tsx b/components/logo.tsx
new file mode 100644
index 0000000..5acf1a3
--- /dev/null
+++ b/components/logo.tsx
@@ -0,0 +1,43 @@
+import { cn } from "@/lib/utils/ui";
+import Image from "next/image";
+
+interface LogoProps {
+  variant?: "full" | "small";
+  className?: string;
+}
+
+export function Logo({ variant = "full", className }: LogoProps) {
+  if (variant === "small") {
+    return (
+      <Image
+        src="/logo_small.png"
+        alt="OpenSheets"
+        width={32}
+        height={32}
+        className={cn("object-contain", className)}
+        priority
+      />
+    );
+  }
+
+  return (
+    <div className={cn("flex items-center", className)}>
+      <Image
+        src="/logo_small.png"
+        alt="OpenSheets"
+        width={28}
+        height={28}
+        className="object-contain"
+        priority
+      />
+      <Image
+        src="/logo_text.png"
+        alt="OpenSheets"
+        width={100}
+        height={32}
+        className="object-contain dark:invert"
+        priority
+      />
+    </div>
+  );
+}
diff --git a/components/magnet-lines.tsx b/components/magnet-lines.tsx
new file mode 100644
index 0000000..ac13efc
--- /dev/null
+++ b/components/magnet-lines.tsx
@@ -0,0 +1,101 @@
+import React, { CSSProperties, useEffect, useRef } from "react";
+
+interface MagnetLinesProps {
+  rows?: number;
+  columns?: number;
+  containerSize?: string;
+  lineColor?: string;
+  lineWidth?: string;
+  lineHeight?: string;
+  baseAngle?: number;
+  className?: string;
+  style?: CSSProperties;
+}
+
+const MagnetLines: React.FC<MagnetLinesProps> = ({
+  rows = 9,
+  columns = 9,
+  containerSize = "80vmin",
+  lineColor = "#efefef",
+  lineWidth = "1vmin",
+  lineHeight = "6vmin",
+  baseAngle = -10,
+  className = "",
+  style = {},
+}) => {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const items = container.querySelectorAll<HTMLSpanElement>("span");
+
+    const onPointerMove = (pointer: { x: number; y: number }) => {
+      items.forEach((item) => {
+        const rect = item.getBoundingClientRect();
+        const centerX = rect.x + rect.width / 2;
+        const centerY = rect.y + rect.height / 2;
+
+        const b = pointer.x - centerX;
+        const a = pointer.y - centerY;
+        const c = Math.sqrt(a * a + b * b) || 1;
+        const r =
+          ((Math.acos(b / c) * 180) / Math.PI) * (pointer.y > centerY ? 1 : -1);
+
+        item.style.setProperty("--rotate", `${r}deg`);
+      });
+    };
+
+    const handlePointerMove = (e: PointerEvent) => {
+      onPointerMove({ x: e.x, y: e.y });
+    };
+
+    window.addEventListener("pointermove", handlePointerMove);
+
+    if (items.length) {
+      const middleIndex = Math.floor(items.length / 2);
+      const rect = items[middleIndex].getBoundingClientRect();
+      onPointerMove({ x: rect.x, y: rect.y });
+    }
+
+    return () => {
+      window.removeEventListener("pointermove", handlePointerMove);
+    };
+  }, []);
+
+  const total = rows * columns;
+  const spans = Array.from({ length: total }, (_, i) => (
+    <span
+      key={i}
+      className="block origin-center"
+      style={{
+        backgroundColor: lineColor,
+        width: lineWidth,
+        height: lineHeight,
+        // @ts-expect-error -- CSS custom property para controlar a rotação inline
+        "--rotate": `${baseAngle}deg`,
+        transform: "rotate(var(--rotate))",
+        willChange: "transform",
+      }}
+    />
+  ));
+
+  return (
+    <div
+      ref={containerRef}
+      className={`grid place-items-center ${className}`}
+      style={{
+        gridTemplateColumns: `repeat(${columns}, 1fr)`,
+        gridTemplateRows: `repeat(${rows}, 1fr)`,
+        width: containerSize,
+        height: containerSize,
+        ...style,
+      }}
+    >
+      {spans}
+    </div>
+  );
+};
+
+export default MagnetLines;
diff --git a/components/money-values.tsx b/components/money-values.tsx
new file mode 100644
index 0000000..b1e85d0
--- /dev/null
+++ b/components/money-values.tsx
@@ -0,0 +1,41 @@
+"use client";
+
+import { cn } from "@/lib/utils/ui";
+import { money_font } from "@/public/fonts/font_index";
+import { usePrivacyMode } from "./privacy-provider";
+
+type Props = {
+  amount: number;
+  className?: string;
+};
+
+function MoneyValues({ amount, className }: Props) {
+  const { privacyMode } = usePrivacyMode();
+
+  const formattedValue = amount.toLocaleString("pt-BR", {
+    style: "currency",
+    currency: "BRL",
+    maximumFractionDigits: 2,
+  });
+
+  return (
+    <span
+      className={cn(
+        money_font.className,
+        "inline-flex items-baseline font-medium transition-all duration-200",
+        privacyMode &&
+          "blur-[6px] select-none hover:blur-none focus-within:blur-none",
+        className
+      )}
+      aria-label={privacyMode ? "Valor oculto" : formattedValue}
+      data-privacy={privacyMode ? "hidden" : undefined}
+      title={
+        privacyMode ? "Valor oculto - passe o mouse para revelar" : undefined
+      }
+    >
+      {formattedValue}
+    </span>
+  );
+}
+
+export default MoneyValues;
diff --git a/components/month-picker/loading-spinner.tsx b/components/month-picker/loading-spinner.tsx
new file mode 100644
index 0000000..425f0f6
--- /dev/null
+++ b/components/month-picker/loading-spinner.tsx
@@ -0,0 +1,9 @@
+"use client";
+
+import { RiLoader2Line } from "@remixicon/react";
+
+const LoadingSpinner = () => (
+  <RiLoader2Line size={"20"} className="animate-spin" />
+);
+
+export default LoadingSpinner;
diff --git a/components/month-picker/month-picker.tsx b/components/month-picker/month-picker.tsx
new file mode 100644
index 0000000..2c4b953
--- /dev/null
+++ b/components/month-picker/month-picker.tsx
@@ -0,0 +1,121 @@
+"use client";
+
+import { Card } from "@/components/ui/card";
+import { useMonthPeriod } from "@/hooks/use-month-period";
+import { money_font } from "@/public/fonts/font_index";
+import { useRouter } from "next/navigation";
+import { useEffect, useMemo, useTransition } from "react";
+import LoadingSpinner from "./loading-spinner";
+import NavigationButton from "./nav-button";
+import ReturnButton from "./return-button";
+
+export default function MonthPicker() {
+  const {
+    monthNames,
+    currentMonth,
+    currentYear,
+    defaultMonth,
+    defaultYear,
+    buildHref,
+  } = useMonthPeriod();
+
+  const router = useRouter();
+  const [isPending, startTransition] = useTransition();
+
+  const currentMonthLabel = useMemo(
+    () => currentMonth.charAt(0).toUpperCase() + currentMonth.slice(1),
+    [currentMonth]
+  );
+
+  const currentMonthIndex = useMemo(
+    () => monthNames.indexOf(currentMonth),
+    [monthNames, currentMonth]
+  );
+
+  const prevTarget = useMemo(() => {
+    let idx = currentMonthIndex - 1;
+    let year = currentYear;
+    if (idx < 0) {
+      idx = monthNames.length - 1;
+      year = (parseInt(currentYear) - 1).toString();
+    }
+    return buildHref(monthNames[idx], year);
+  }, [currentMonthIndex, currentYear, monthNames, buildHref]);
+
+  const nextTarget = useMemo(() => {
+    let idx = currentMonthIndex + 1;
+    let year = currentYear;
+    if (idx >= monthNames.length) {
+      idx = 0;
+      year = (parseInt(currentYear) + 1).toString();
+    }
+    return buildHref(monthNames[idx], year);
+  }, [currentMonthIndex, currentYear, monthNames, buildHref]);
+
+  const returnTarget = useMemo(
+    () => buildHref(defaultMonth, defaultYear),
+    [buildHref, defaultMonth, defaultYear]
+  );
+
+  const isDifferentFromCurrent =
+    currentMonth !== defaultMonth || currentYear !== defaultYear.toString();
+
+  // Prefetch otimizado: apenas meses adjacentes (M-1, M+1) e mês atual
+  // Isso melhora a performance da navegação sem sobrecarregar o cliente
+  useEffect(() => {
+    // Prefetch do mês anterior e próximo para navegação instantânea
+    router.prefetch(prevTarget);
+    router.prefetch(nextTarget);
+
+    // Prefetch do mês atual se não estivermos nele
+    if (isDifferentFromCurrent) {
+      router.prefetch(returnTarget);
+    }
+  }, [router, prevTarget, nextTarget, returnTarget, isDifferentFromCurrent]);
+
+  const handleNavigate = (href: string) => {
+    startTransition(() => {
+      router.replace(href, { scroll: false });
+    });
+  };
+
+  return (
+    <Card
+      className={`${money_font.className} sticky top-0 z-30 w-full flex-row border-none bg-month-picker text-month-picker-foreground p-5 shadow-none drop-shadow-none`}
+    >
+      <div className="flex items-center gap-1">
+        <NavigationButton
+          direction="left"
+          disabled={isPending}
+          onClick={() => handleNavigate(prevTarget)}
+        />
+
+        <div className="flex items-center">
+          <div
+            className="mx-1 space-x-1 capitalize font-medium tracking-wide"
+            aria-current={!isDifferentFromCurrent ? "date" : undefined}
+            aria-label={`Período selecionado: ${currentMonthLabel} de ${currentYear}`}
+          >
+            <span>{currentMonthLabel}</span>
+            <span className="font-bold">{currentYear}</span>
+          </div>
+
+          {isPending && <LoadingSpinner />}
+        </div>
+
+        <NavigationButton
+          direction="right"
+          disabled={isPending}
+          onClick={() => handleNavigate(nextTarget)}
+        />
+      </div>
+
+      {isDifferentFromCurrent && (
+        <ReturnButton
+          disabled={isPending}
+          onClick={() => handleNavigate(returnTarget)}
+        />
+      )}
+    </Card>
+  );
+}
diff --git a/components/month-picker/nav-button.tsx b/components/month-picker/nav-button.tsx
new file mode 100644
index 0000000..1a576a9
--- /dev/null
+++ b/components/month-picker/nav-button.tsx
@@ -0,0 +1,33 @@
+"use client";
+
+import { RiArrowLeftSLine, RiArrowRightSLine } from "@remixicon/react";
+import React from "react";
+
+interface NavigationButtonProps {
+  direction: "left" | "right";
+  disabled?: boolean;
+  onClick: () => void;
+}
+
+const NavigationButton = React.memo(
+  ({ direction, disabled, onClick }: NavigationButtonProps) => {
+    const Icon = direction === "left" ? RiArrowLeftSLine : RiArrowRightSLine;
+
+    return (
+      <button
+        onClick={onClick}
+        className="text-month-picker-foreground transition-all duration-200 cursor-pointer rounded-lg p-1 hover:bg-month-picker-foreground/10 focus:outline-hidden focus:ring-2 focus:ring-month-picker-foreground/30 disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent"
+        disabled={disabled}
+        aria-label={`Navegar para o mês ${
+          direction === "left" ? "anterior" : "seguinte"
+        }`}
+      >
+        <Icon className="text-primary" size={18} />
+      </button>
+    );
+  }
+);
+
+NavigationButton.displayName = "NavigationButton";
+
+export default NavigationButton;
diff --git a/components/month-picker/return-button.tsx b/components/month-picker/return-button.tsx
new file mode 100644
index 0000000..813162b
--- /dev/null
+++ b/components/month-picker/return-button.tsx
@@ -0,0 +1,27 @@
+"use client";
+
+import React from "react";
+import { Button } from "../ui/button";
+
+interface ReturnButtonProps {
+  disabled?: boolean;
+  onClick: () => void;
+}
+
+const ReturnButton = React.memo(({ disabled, onClick }: ReturnButtonProps) => {
+  return (
+    <Button
+      className="w-28 h-6"
+      size="sm"
+      disabled={disabled}
+      onClick={onClick}
+      aria-label="Retornar para o mês atual"
+    >
+      Mês Atual
+    </Button>
+  );
+});
+
+ReturnButton.displayName = "ReturnButton";
+
+export default ReturnButton;
diff --git a/components/notifications/notification-bell.tsx b/components/notifications/notification-bell.tsx
new file mode 100644
index 0000000..a7be2dc
--- /dev/null
+++ b/components/notifications/notification-bell.tsx
@@ -0,0 +1,205 @@
+"use client";
+
+import { Badge } from "@/components/ui/badge";
+import { buttonVariants } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  Empty,
+  EmptyDescription,
+  EmptyMedia,
+  EmptyTitle,
+} from "@/components/ui/empty";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import type { DashboardNotification } from "@/lib/dashboard/notifications";
+import { cn } from "@/lib/utils/ui";
+import {
+  RiAlertFill,
+  RiCheckboxCircleFill,
+  RiNotification3Fill,
+  RiTimeLine,
+} from "@remixicon/react";
+import { useState } from "react";
+
+type NotificationBellProps = {
+  notifications: DashboardNotification[];
+  totalCount: number;
+};
+
+function formatDate(dateString: string): string {
+  // Parse manual para evitar problemas de timezone
+  // Formato esperado: "YYYY-MM-DD"
+  const [year, month, day] = dateString.split("-").map(Number);
+
+  // Criar data em UTC usando os valores diretos
+  const date = new Date(Date.UTC(year, month - 1, day));
+
+  return date.toLocaleDateString("pt-BR", {
+    day: "2-digit",
+    month: "short",
+    timeZone: "UTC", // Força uso de UTC para evitar conversão de timezone
+  });
+}
+
+function formatCurrency(amount: number): string {
+  return new Intl.NumberFormat("pt-BR", {
+    style: "currency",
+    currency: "BRL",
+  }).format(amount);
+}
+
+export function NotificationBell({
+  notifications,
+  totalCount,
+}: NotificationBellProps) {
+  const [open, setOpen] = useState(false);
+  const displayCount = totalCount > 99 ? "99+" : totalCount.toString();
+  const hasNotifications = totalCount > 0;
+
+  return (
+    <DropdownMenu open={open} onOpenChange={setOpen}>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <DropdownMenuTrigger asChild>
+            <button
+              type="button"
+              aria-label="Notificações"
+              aria-expanded={open}
+              data-has-notifications={hasNotifications}
+              className={cn(
+                buttonVariants({ variant: "ghost", size: "icon-sm" }),
+                "group relative text-muted-foreground transition-all duration-200",
+                "hover:text-foreground focus-visible:ring-2 focus-visible:ring-primary/40",
+                "data-[state=open]:bg-accent/60 data-[state=open]:text-foreground border"
+              )}
+            >
+              <RiNotification3Fill
+                className={cn(
+                  "size-4 transition-transform duration-200",
+                  open ? "scale-90" : "scale-100"
+                )}
+              />
+              {hasNotifications && (
+                <>
+                  <span
+                    aria-hidden
+                    className="absolute -right-1.5 -top-1.5 inline-flex min-h-5 min-w-5 items-center justify-center rounded-full bg-destructive px-1 text-[10px] font-semibold text-destructive-foreground shadow-xs ring-2 ring-background"
+                  >
+                    {displayCount}
+                  </span>
+                  <span className="absolute -right-1.5 -top-1.5 size-5 animate-ping rounded-full bg-destructive/40" />
+                </>
+              )}
+            </button>
+          </DropdownMenuTrigger>
+        </TooltipTrigger>
+        <TooltipContent side="bottom" sideOffset={8}>
+          Notificações
+        </TooltipContent>
+      </Tooltip>
+      <DropdownMenuContent
+        align="end"
+        sideOffset={12}
+        className="w-80 max-h-[500px] overflow-hidden rounded-lg border border-border/60 bg-popover/95 p-0 shadow-lg backdrop-blur-lg supports-backdrop-filter:backdrop-blur-md"
+      >
+        <DropdownMenuLabel className="sticky top-0 z-10 flex items-center justify-between gap-2 border-b border-border/60 bg-linear-to-b from-background/95 to-background/80 px-4 py-3 text-sm font-semibold">
+          <span>Notificações</span>
+          {hasNotifications && (
+            <Badge variant="outline" className="text-[10px] font-semibold">
+              {totalCount} {totalCount === 1 ? "item" : "itens"}
+            </Badge>
+          )}
+        </DropdownMenuLabel>
+        {notifications.length === 0 ? (
+          <div className="px-4 py-8">
+            <Empty>
+              <EmptyMedia>
+                <RiCheckboxCircleFill color="green" />
+              </EmptyMedia>
+              <EmptyTitle>Nenhuma notificação</EmptyTitle>
+              <EmptyDescription>
+                Você está em dia com seus pagamentos!
+              </EmptyDescription>
+            </Empty>
+          </div>
+        ) : (
+          <div className="max-h-[400px] overflow-y-auto py-2">
+            {notifications.map((notification) => (
+              <DropdownMenuItem
+                key={notification.id}
+                className={cn(
+                  "group relative flex flex-col gap-2 rounded-none border-b border-dashed last:border-0 p-2.5",
+                  "cursor-default focus:bg-transparent data-highlighted:bg-accent/60"
+                )}
+              >
+                <div className="flex items-start justify-between w-full gap-2">
+                  <div className="flex items-start gap-2 flex-1 min-w-0">
+                    <div
+                      className={cn(
+                        "flex items-center justify-center text-sm transition-all duration-200"
+                      )}
+                    >
+                      {notification.status === "overdue" ? (
+                        <RiAlertFill color="red" className="size-4" />
+                      ) : (
+                        <RiTimeLine className="size-4" />
+                      )}
+                    </div>
+                    <div className="flex-1 min-w-0">
+                      <div className="flex flex-wrap items-center gap-2">
+                        <span className="truncate text-sm font-medium">
+                          {notification.name}
+                        </span>
+                        <Badge
+                          variant="outline"
+                          className="px-1.5 py-0  tracking-wide text-muted-foreground"
+                        >
+                          {notification.type === "invoice"
+                            ? "Cartão"
+                            : "Boleto"}
+                        </Badge>
+                      </div>
+                      <div className="mt-1 flex flex-col items-start gap-2 text-xs text-muted-foreground">
+                        <span className="font-no">
+                          {notification.status === "overdue"
+                            ? "Venceu em "
+                            : "Vence em "}
+                          {formatDate(notification.dueDate)}
+                        </span>
+
+                        {notification.showAmount && notification.amount > 0 && (
+                          <span className="font-medium">
+                            {formatCurrency(notification.amount)}
+                          </span>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                  <Badge
+                    variant={
+                      notification.status === "overdue" ? "destructive" : "info"
+                    }
+                    className={cn("shrink-0 px-2 py-0.5 tracking-wide")}
+                  >
+                    {notification.status === "overdue"
+                      ? "Atrasado"
+                      : "Em breve"}
+                  </Badge>
+                </div>
+              </DropdownMenuItem>
+            ))}
+          </div>
+        )}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
diff --git a/components/orcamentos/budget-card.tsx b/components/orcamentos/budget-card.tsx
new file mode 100644
index 0000000..9646b1c
--- /dev/null
+++ b/components/orcamentos/budget-card.tsx
@@ -0,0 +1,110 @@
+"use client";
+
+import { CategoryIcon } from "@/components/categorias/category-icon";
+import MoneyValues from "@/components/money-values";
+import { Card, CardContent, CardFooter } from "@/components/ui/card";
+import { Progress } from "@/components/ui/progress";
+import { cn } from "@/lib/utils/ui";
+
+import { RiDeleteBin5Line, RiPencilLine } from "@remixicon/react";
+import type { Budget } from "./types";
+
+interface BudgetCardProps {
+  budget: Budget;
+  periodLabel: string;
+  onEdit: (budget: Budget) => void;
+  onRemove: (budget: Budget) => void;
+}
+
+const buildUsagePercent = (spent: number, limit: number) => {
+  if (limit <= 0) {
+    return spent > 0 ? 100 : 0;
+  }
+  const percent = (spent / limit) * 100;
+  return Math.min(Math.max(percent, 0), 100);
+};
+
+const formatCategoryName = (budget: Budget) =>
+  budget.category?.name ?? "Categoria removida";
+
+export function BudgetCard({
+  budget,
+  periodLabel,
+  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);
+
+  return (
+    <Card className="flex h-full flex-col">
+      <CardContent className="flex h-full flex-col gap-4">
+        <div className="flex items-start gap-3">
+          <span className="flex size-10 shrink-0 items-center justify-center text-primary">
+            <CategoryIcon
+              name={budget.category?.icon ?? undefined}
+              className="size-6"
+            />
+          </span>
+          <div className="space-y-1">
+            <h3 className="text-base font-semibold leading-tight">
+              {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>
+            <MoneyValues
+              amount={spent}
+              className={cn(exceeded && "text-destructive")}
+            />
+          </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 className="mt-2">
+            {exceeded ? (
+              <div className="text-xs text-red-500">
+                Excedeu em <MoneyValues amount={difference} />
+              </div>
+            ) : (
+              <div className="text-sm text-green-600">
+                Restam <MoneyValues amount={Math.max(limit - spent, 0)} />{" "}
+                disponíveis.
+              </div>
+            )}
+          </div>
+        </div>
+      </CardContent>
+      <CardFooter className="flex flex-wrap gap-3 px-5 text-sm">
+        <button
+          type="button"
+          onClick={() => onEdit(budget)}
+          className="flex items-center gap-1 text-primary font-medium transition-opacity hover:opacity-80"
+        >
+          <RiPencilLine className="size-4" aria-hidden /> editar
+        </button>
+        <button
+          type="button"
+          onClick={() => onRemove(budget)}
+          className="flex items-center gap-1 text-destructive font-medium transition-opacity hover:opacity-80"
+        >
+          <RiDeleteBin5Line className="size-4" aria-hidden /> remover
+        </button>
+      </CardFooter>
+    </Card>
+  );
+}
diff --git a/components/orcamentos/budget-dialog.tsx b/components/orcamentos/budget-dialog.tsx
new file mode 100644
index 0000000..f98d2d9
--- /dev/null
+++ b/components/orcamentos/budget-dialog.tsx
@@ -0,0 +1,344 @@
+"use client";
+
+import {
+  createBudgetAction,
+  updateBudgetAction,
+} from "@/app/(dashboard)/orcamentos/actions";
+import { CategoryIcon } from "@/components/categorias/category-icon";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { CurrencyInput } from "@/components/ui/currency-input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Label } from "@/components/ui/label";
+import { useControlledState } from "@/hooks/use-controlled-state";
+import { useFormState } from "@/hooks/use-form-state";
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+  useTransition,
+} from "react";
+import { toast } from "sonner";
+
+import type { Budget, BudgetCategory, BudgetFormValues } from "./types";
+
+interface BudgetDialogProps {
+  mode: "create" | "update";
+  trigger?: React.ReactNode;
+  budget?: Budget;
+  categories: BudgetCategory[];
+  defaultPeriod: string;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}
+
+type SelectOption = {
+  value: string;
+  label: string;
+};
+
+const monthFormatter = new Intl.DateTimeFormat("pt-BR", {
+  month: "long",
+  year: "numeric",
+});
+
+const formatPeriodLabel = (period: string) => {
+  const [year, month] = period.split("-").map(Number);
+  if (!year || !month) {
+    return period;
+  }
+  const date = new Date(year, month - 1, 1);
+  if (Number.isNaN(date.getTime())) {
+    return period;
+  }
+  const label = monthFormatter.format(date);
+  return label.charAt(0).toUpperCase() + label.slice(1);
+};
+
+const buildPeriodOptions = (currentValue?: string): SelectOption[] => {
+  const now = new Date();
+  const options: SelectOption[] = [];
+
+  for (let offset = -3; offset <= 3; offset += 1) {
+    const date = new Date(now.getFullYear(), now.getMonth() + offset, 1);
+    const value = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(
+      2,
+      "0"
+    )}`;
+    options.push({ value, label: formatPeriodLabel(value) });
+  }
+
+  if (
+    currentValue &&
+    !options.some((option) => option.value === currentValue)
+  ) {
+    options.push({
+      value: currentValue,
+      label: formatPeriodLabel(currentValue),
+    });
+  }
+
+  return options
+    .sort((a, b) => a.value.localeCompare(b.value))
+    .map((option) => ({
+      value: option.value,
+      label: option.label,
+    }));
+};
+
+const buildInitialValues = ({
+  budget,
+  defaultPeriod,
+}: {
+  budget?: Budget;
+  defaultPeriod: string;
+}): BudgetFormValues => ({
+  categoriaId: budget?.category?.id ?? "",
+  period: budget?.period ?? defaultPeriod,
+  amount: budget ? (Math.round(budget.amount * 100) / 100).toFixed(2) : "",
+});
+
+export function BudgetDialog({
+  mode,
+  trigger,
+  budget,
+  categories,
+  defaultPeriod,
+  open,
+  onOpenChange,
+}: BudgetDialogProps) {
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [isPending, startTransition] = useTransition();
+
+  // Use controlled state hook for dialog open state
+  const [dialogOpen, setDialogOpen] = useControlledState(
+    open,
+    false,
+    onOpenChange
+  );
+
+  const initialState = useMemo(
+    () =>
+      buildInitialValues({
+        budget,
+        defaultPeriod,
+      }),
+    [budget, defaultPeriod]
+  );
+
+  // Use form state hook for form management
+  const { formState, updateField, setFormState } =
+    useFormState<BudgetFormValues>(initialState);
+
+  // Reset form when dialog opens
+  useEffect(() => {
+    if (dialogOpen) {
+      setFormState(initialState);
+      setErrorMessage(null);
+    }
+  }, [dialogOpen, initialState, setFormState]);
+
+  // Clear error when dialog closes
+  useEffect(() => {
+    if (!dialogOpen) {
+      setErrorMessage(null);
+    }
+  }, [dialogOpen]);
+
+  const periodOptions = useMemo(
+    () => buildPeriodOptions(formState.period),
+    [formState.period]
+  );
+
+  const handleSubmit = useCallback(
+    (event: React.FormEvent<HTMLFormElement>) => {
+      event.preventDefault();
+      setErrorMessage(null);
+
+      if (mode === "update" && !budget?.id) {
+        const message = "Orçamento inválido.";
+        setErrorMessage(message);
+        toast.error(message);
+        return;
+      }
+
+      if (formState.categoriaId.length === 0) {
+        const message = "Selecione uma categoria.";
+        setErrorMessage(message);
+        toast.error(message);
+        return;
+      }
+
+      if (formState.period.length === 0) {
+        const message = "Informe o período.";
+        setErrorMessage(message);
+        toast.error(message);
+        return;
+      }
+
+      if (formState.amount.length === 0) {
+        const message = "Informe o valor limite.";
+        setErrorMessage(message);
+        toast.error(message);
+        return;
+      }
+
+      const payload = {
+        categoriaId: formState.categoriaId,
+        period: formState.period,
+        amount: formState.amount,
+      };
+
+      startTransition(async () => {
+        const result =
+          mode === "create"
+            ? await createBudgetAction(payload)
+            : await updateBudgetAction({
+                id: budget?.id ?? "",
+                ...payload,
+              });
+
+        if (result.success) {
+          toast.success(result.message);
+          setDialogOpen(false);
+          setFormState(initialState);
+          return;
+        }
+
+        setErrorMessage(result.error);
+        toast.error(result.error);
+      });
+    },
+    [budget?.id, formState, initialState, mode, setDialogOpen, setFormState]
+  );
+
+  const title = mode === "create" ? "Novo orçamento" : "Editar 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 disabled = categories.length === 0;
+
+  return (
+    <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+      {trigger ? <DialogTrigger asChild>{trigger}</DialogTrigger> : null}
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+          <DialogDescription>{description}</DialogDescription>
+        </DialogHeader>
+
+        {disabled ? (
+          <div className="space-y-4">
+            <div className="rounded-lg border border-dashed bg-muted/10 p-4 text-sm text-muted-foreground">
+              Cadastre pelo menos uma categoria de despesa para criar um
+              orçamento.
+            </div>
+            <DialogFooter className="gap-3">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => setDialogOpen(false)}
+              >
+                Fechar
+              </Button>
+            </DialogFooter>
+          </div>
+        ) : (
+          <form className="space-y-4" onSubmit={handleSubmit}>
+            <div className="space-y-2">
+              <Label htmlFor="budget-category">Categoria</Label>
+              <Select
+                value={formState.categoriaId}
+                onValueChange={(value) => updateField("categoriaId", value)}
+              >
+                <SelectTrigger id="budget-category" className="w-full">
+                  <SelectValue placeholder="Selecione uma categoria" />
+                </SelectTrigger>
+                <SelectContent>
+                  {categories.map((category) => (
+                    <SelectItem key={category.id} value={category.id}>
+                      <CategoryIcon
+                        name={category.icon ?? undefined}
+                        className="size-4"
+                      />
+                      <span>{category.name}</span>
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="grid gap-4 sm:grid-cols-2">
+              <div className="space-y-2">
+                <Label htmlFor="budget-period">Período</Label>
+                <Select
+                  value={formState.period}
+                  onValueChange={(value) => updateField("period", value)}
+                >
+                  <SelectTrigger id="budget-period" className="w-full">
+                    <SelectValue placeholder="Selecione o período" />
+                  </SelectTrigger>
+                  <SelectContent className="max-h-64">
+                    {periodOptions.map((option) => (
+                      <SelectItem key={option.value} value={option.value}>
+                        {option.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="budget-amount">Valor limite</Label>
+                <CurrencyInput
+                  id="budget-amount"
+                  placeholder="R$ 0,00"
+                  value={formState.amount}
+                  onValueChange={(value) => updateField("amount", value)}
+                />
+              </div>
+            </div>
+
+            {errorMessage ? (
+              <p className="text-sm font-medium text-destructive">
+                {errorMessage}
+              </p>
+            ) : null}
+
+            <DialogFooter className="gap-3">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => setDialogOpen(false)}
+                disabled={isPending}
+              >
+                Cancelar
+              </Button>
+              <Button type="submit" disabled={isPending}>
+                {isPending ? "Salvando..." : submitLabel}
+              </Button>
+            </DialogFooter>
+          </form>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/components/orcamentos/budgets-page.tsx b/components/orcamentos/budgets-page.tsx
new file mode 100644
index 0000000..06b7e69
--- /dev/null
+++ b/components/orcamentos/budgets-page.tsx
@@ -0,0 +1,147 @@
+"use client";
+
+import { deleteBudgetAction } from "@/app/(dashboard)/orcamentos/actions";
+import { ConfirmActionDialog } from "@/components/confirm-action-dialog";
+import { EmptyState } from "@/components/empty-state";
+import { Button } from "@/components/ui/button";
+import { RiAddCircleLine, RiFundsLine } from "@remixicon/react";
+import { useCallback, useState } from "react";
+import { toast } from "sonner";
+import { Card } from "../ui/card";
+import { BudgetCard } from "./budget-card";
+import { BudgetDialog } from "./budget-dialog";
+import type { Budget, BudgetCategory } from "./types";
+
+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);
+  const [removeOpen, setRemoveOpen] = useState(false);
+  const [budgetToRemove, setBudgetToRemove] = useState<Budget | null>(null);
+
+  const hasBudgets = budgets.length > 0;
+
+  const handleEdit = useCallback((budget: Budget) => {
+    setSelectedBudget(budget);
+    setEditOpen(true);
+  }, []);
+
+  const handleEditOpenChange = useCallback((open: boolean) => {
+    setEditOpen(open);
+    if (!open) {
+      setSelectedBudget(null);
+    }
+  }, []);
+
+  const handleRemoveRequest = useCallback((budget: Budget) => {
+    setBudgetToRemove(budget);
+    setRemoveOpen(true);
+  }, []);
+
+  const handleRemoveOpenChange = useCallback((open: boolean) => {
+    setRemoveOpen(open);
+    if (!open) {
+      setBudgetToRemove(null);
+    }
+  }, []);
+
+  const handleRemoveConfirm = useCallback(async () => {
+    if (!budgetToRemove) {
+      return;
+    }
+
+    const result = await deleteBudgetAction({ id: budgetToRemove.id });
+
+    if (result.success) {
+      toast.success(result.message);
+      return;
+    }
+
+    toast.error(result.error);
+    throw new Error(result.error);
+  }, [budgetToRemove]);
+
+  const removeTitle = budgetToRemove
+    ? `Remover orçamento de "${
+        budgetToRemove.category?.name ?? "categoria removida"
+      }"?`
+    : "Remover orçamento?";
+
+  const emptyDescription =
+    categories.length === 0
+      ? "Cadastre uma categoria de despesa para começar a planejar seus gastos."
+      : "Crie seu primeiro orçamento para controlar os gastos por categoria.";
+
+  return (
+    <>
+      <div className="flex w-full flex-col gap-6">
+        <div className="flex justify-start">
+          <BudgetDialog
+            mode="create"
+            categories={categories}
+            defaultPeriod={selectedPeriod}
+            trigger={
+              <Button disabled={categories.length === 0}>
+                <RiAddCircleLine className="size-4" />
+                Novo orçamento
+              </Button>
+            }
+          />
+        </div>
+
+        {hasBudgets ? (
+          <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
+            {budgets.map((budget) => (
+              <BudgetCard
+                key={budget.id}
+                budget={budget}
+                periodLabel={periodLabel}
+                onEdit={handleEdit}
+                onRemove={handleRemoveRequest}
+              />
+            ))}
+          </div>
+        ) : (
+          <Card className="flex min-h-[50vh] w-full items-center justify-center py-12">
+            <EmptyState
+              media={<RiFundsLine className="size-6 text-primary" />}
+              title="Nenhum orçamento cadastrado"
+              description={emptyDescription}
+            />
+          </Card>
+        )}
+      </div>
+
+      <BudgetDialog
+        mode="update"
+        budget={selectedBudget ?? undefined}
+        categories={categories}
+        defaultPeriod={selectedPeriod}
+        open={editOpen && !!selectedBudget}
+        onOpenChange={handleEditOpenChange}
+      />
+
+      <ConfirmActionDialog
+        open={removeOpen && !!budgetToRemove}
+        onOpenChange={handleRemoveOpenChange}
+        title={removeTitle}
+        description="Esta ação remove o limite configurado para a categoria selecionada."
+        confirmLabel="Remover orçamento"
+        pendingLabel="Removendo..."
+        confirmVariant="destructive"
+        onConfirm={handleRemoveConfirm}
+      />
+    </>
+  );
+}
diff --git a/components/orcamentos/types.ts b/components/orcamentos/types.ts
new file mode 100644
index 0000000..7bcb58a
--- /dev/null
+++ b/components/orcamentos/types.ts
@@ -0,0 +1,21 @@
+export type BudgetCategory = {
+  id: string;
+  name: string;
+  icon: string | null;
+};
+
+export type Budget = {
+  id: string;
+  amount: number;
+  spent: number;
+  period: string;
+  createdAt: string;
+  category: BudgetCategory | null;
+};
+
+export type BudgetFormValues = {
+  categoriaId: string;
+  period: string;
+  amount: string;
+};
+
diff --git a/components/pagadores/details/pagador-card-usage-card.tsx b/components/pagadores/details/pagador-card-usage-card.tsx
new file mode 100644
index 0000000..99c0862
--- /dev/null
+++ b/components/pagadores/details/pagador-card-usage-card.tsx
@@ -0,0 +1,90 @@
+import MoneyValues from "@/components/money-values";
+import { WidgetEmptyState } from "@/components/widget-empty-state";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import type { PagadorCardUsageItem } from "@/lib/pagadores/details";
+import { RiBankCardLine } from "@remixicon/react";
+import Image from "next/image";
+
+const resolveLogoPath = (logo?: string | null) => {
+  if (!logo) return null;
+  if (
+    logo.startsWith("http://") ||
+    logo.startsWith("https://") ||
+    logo.startsWith("data:")
+  ) {
+    return logo;
+  }
+  return logo.startsWith("/") ? logo : `/logos/${logo}`;
+};
+
+type PagadorCardUsageCardProps = {
+  items: PagadorCardUsageItem[];
+};
+
+export function PagadorCardUsageCard({ items }: PagadorCardUsageCardProps) {
+  return (
+    <Card className="border">
+      <CardHeader>
+        <CardTitle className="text-xl font-semibold">
+          Cartões utilizados
+        </CardTitle>
+        <p className="text-sm text-muted-foreground">
+          Valores por cartão neste período (inclui logo quando disponível).
+        </p>
+      </CardHeader>
+
+      <CardContent className="space-y-3 pt-2">
+        {items.length === 0 ? (
+          <WidgetEmptyState
+            icon={<RiBankCardLine className="size-6 text-muted-foreground" />}
+            title="Nenhum lançamento com cartão de crédito"
+            description="Quando houver despesas registradas com cartão, elas aparecerão aqui."
+          />
+        ) : (
+          <ul className="space-y-3">
+            {items.map((item) => {
+              const logoPath = resolveLogoPath(item.logo);
+              return (
+                <li
+                  key={item.id}
+                  className="flex items-center justify-between gap-3 rounded-xl border border-border/80 px-4 py-3"
+                >
+                  <div className="flex items-center gap-3">
+                    {logoPath ? (
+                      <span className="flex size-10 items-center justify-center overflow-hidden rounded-lg border border-border/60 bg-background">
+                        <Image
+                          src={logoPath}
+                          alt={`Logo ${item.name}`}
+                          width={40}
+                          height={40}
+                          className="h-full w-full object-contain"
+                        />
+                      </span>
+                    ) : (
+                      <span className="flex size-10 items-center justify-center rounded-lg bg-muted text-xs font-semibold uppercase text-muted-foreground">
+                        {item.name.slice(0, 2)}
+                      </span>
+                    )}
+
+                    <div className="flex flex-col">
+                      <span className="font-medium text-foreground">
+                        {item.name}
+                      </span>
+                      <span className="text-xs text-muted-foreground">
+                        Despesas no mês
+                      </span>
+                    </div>
+                  </div>
+                  <MoneyValues
+                    amount={item.amount}
+                    className="text-lg font-semibold text-foreground"
+                  />
+                </li>
+              );
+            })}
+          </ul>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/components/pagadores/details/pagador-history-card.tsx b/components/pagadores/details/pagador-history-card.tsx
new file mode 100644
index 0000000..0d6a160
--- /dev/null
+++ b/components/pagadores/details/pagador-history-card.tsx
@@ -0,0 +1,107 @@
+"use client";
+
+import { WidgetEmptyState } from "@/components/widget-empty-state";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart";
+import type { PagadorHistoryPoint } from "@/lib/pagadores/details";
+import { RiBarChartLine } from "@remixicon/react";
+import {
+  Bar,
+  BarChart,
+  CartesianGrid,
+  LabelList,
+  type LabelProps,
+  XAxis,
+} from "recharts";
+import { currencyFormatter } from "@/lib/lancamentos/formatting-helpers";
+
+const chartConfig = {
+  despesas: {
+    label: "Despesas",
+    color: "hsl(356, 72%, 50%)",
+  },
+};
+
+type PagadorHistoryCardProps = {
+  data: PagadorHistoryPoint[];
+};
+
+const ValueLabel = (props: LabelProps) => {
+  const { x, y, value, width } = props;
+  if (typeof x !== "number" || typeof y !== "number" || width === undefined) {
+    return null;
+  }
+  const labelX = x + (Number(width) ?? 0) / 2;
+  const amount =
+    typeof value === "number" ? currencyFormatter.format(value) : value;
+  const labelY = Math.max(y - 6, 12);
+  return (
+    <text
+      x={labelX}
+      y={labelY}
+      fill="currentColor"
+      textAnchor="middle"
+      className="text-[11px] font-semibold text-muted-foreground"
+    >
+      {amount}
+    </text>
+  );
+};
+
+export function PagadorHistoryCard({ data }: PagadorHistoryCardProps) {
+  const hasData = data.length > 0;
+
+  return (
+    <Card className="border">
+      <CardHeader className="gap-1.5 pb-3">
+        <CardTitle className="text-lg font-semibold">
+          Evolução (últimos 6 meses)
+        </CardTitle>
+        <p className="text-xs text-muted-foreground">
+          Despesas registradas para este pagador ao longo do tempo.
+        </p>
+      </CardHeader>
+
+      <CardContent className="pt-0">
+        {hasData ? (
+          <ChartContainer
+            config={chartConfig}
+            className="mx-auto flex h-[210px] w-full max-w-[520px] items-center justify-center aspect-auto"
+          >
+            <BarChart
+              data={data}
+              barCategoryGap={16}
+              margin={{ top: 28, right: 8, left: 8, bottom: 0 }}
+            >
+              <CartesianGrid strokeDasharray="3 3" vertical={false} />
+              <XAxis
+                dataKey="label"
+                tickLine={false}
+                axisLine={false}
+                tickMargin={8}
+              />
+              <ChartTooltip content={<ChartTooltipContent />} />
+              <Bar
+                dataKey="despesas"
+                fill="var(--color-despesas)"
+                radius={[6, 6, 0, 0]}
+              >
+                <LabelList dataKey="despesas" content={<ValueLabel />} />
+              </Bar>
+            </BarChart>
+          </ChartContainer>
+        ) : (
+          <WidgetEmptyState
+            icon={<RiBarChartLine className="size-6 text-muted-foreground" />}
+            title="Sem dados para exibir"
+            description="Ainda não há movimentações suficientes para gerar este gráfico."
+          />
+        )}
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/components/pagadores/details/pagador-info-card.tsx b/components/pagadores/details/pagador-info-card.tsx
new file mode 100644
index 0000000..f3f14c9
--- /dev/null
+++ b/components/pagadores/details/pagador-info-card.tsx
@@ -0,0 +1,407 @@
+"use client";
+
+import { sendPagadorSummaryAction } from "@/app/(dashboard)/pagadores/[pagadorId]/actions";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { PAGADOR_ROLE_ADMIN } from "@/lib/pagadores/constants";
+import { getAvatarSrc } from "@/lib/pagadores/utils";
+import { cn } from "@/lib/utils/ui";
+import {
+  RiMailLine,
+  RiMailSendLine,
+  RiUser3Line,
+  RiVerifiedBadgeFill,
+} from "@remixicon/react";
+import Image from "next/image";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useMemo, useState, useTransition, type ReactNode } from "react";
+import { toast } from "sonner";
+
+type PagadorInfo = {
+  id: string;
+  name: string;
+  email: string | null;
+  avatarUrl: string | null;
+  status: string;
+  note: string | null;
+  role: string | null;
+  isAutoSend: boolean;
+  createdAt: string;
+  lastMailAt: string | null;
+  shareCode: string | null;
+  canEdit: boolean;
+};
+
+type PagadorSummaryPreview = {
+  periodLabel: string;
+  totalExpenses: number;
+  paymentSplits: {
+    card: number;
+    boleto: number;
+    instant: number;
+  };
+  cardUsage: { name: string; amount: number }[];
+  boletoStats: {
+    totalAmount: number;
+    paidAmount: number;
+    pendingAmount: number;
+    paidCount: number;
+    pendingCount: number;
+  };
+  lancamentoCount: number;
+};
+
+type PagadorInfoCardProps = {
+  pagador: PagadorInfo;
+  selectedPeriod: string;
+  summary: PagadorSummaryPreview;
+};
+
+export function PagadorInfoCard({
+  pagador,
+  selectedPeriod,
+  summary,
+}: PagadorInfoCardProps) {
+  const router = useRouter();
+  const [isSending, startTransition] = useTransition();
+  const [confirmOpen, setConfirmOpen] = useState(false);
+
+  const avatarSrc = getAvatarSrc(pagador.avatarUrl);
+  const createdAtLabel = formatDate(pagador.createdAt);
+  const isAdmin = pagador.role === PAGADOR_ROLE_ADMIN;
+
+  const lastMailLabel = useMemo(() => {
+    if (!pagador.lastMailAt) {
+      return "Nunca enviado";
+    }
+    const date = new Date(pagador.lastMailAt);
+    if (Number.isNaN(date.getTime())) {
+      return "Nunca enviado";
+    }
+    return date.toLocaleString("pt-BR", {
+      dateStyle: "short",
+      timeStyle: "short",
+    });
+  }, [pagador.lastMailAt]);
+
+  const disableSend = isSending || !pagador.email || !pagador.canEdit;
+
+  const openConfirmDialog = () => {
+    if (!pagador.email) {
+      toast.error("Cadastre um e-mail para este pagador antes de enviar.");
+      return;
+    }
+    setConfirmOpen(true);
+  };
+
+  const handleSendSummary = () => {
+    if (!pagador.email) {
+      toast.error("Cadastre um e-mail para este pagador antes de enviar.");
+      return;
+    }
+
+    startTransition(async () => {
+      const result = await sendPagadorSummaryAction({
+        pagadorId: pagador.id,
+        period: selectedPeriod,
+      });
+
+      if (!result.success) {
+        toast.error(result.error);
+        return;
+      }
+
+      toast.success(result.message);
+      setConfirmOpen(false);
+      router.refresh();
+    });
+  };
+
+  const getStatusBadgeVariant = (status: string): "success" | "secondary" => {
+    const normalizedStatus = status.toLowerCase();
+    if (normalizedStatus === "ativo") {
+      return "success";
+    }
+    return "outline";
+  };
+
+  return (
+    <Card className="border gap-4">
+      <CardHeader className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
+        <div className="flex flex-1 items-start gap-4">
+          <div className="relative flex size-16 shrink-0 items-center justify-center overflow-hidden">
+            <Image
+              src={avatarSrc}
+              alt={`Avatar de ${pagador.name}`}
+              width={64}
+              height={64}
+              className="h-full w-full object-cover"
+            />
+          </div>
+
+          <div className="flex flex-1 flex-col gap-1">
+            <div className="flex flex-wrap items-center gap-2">
+              <CardTitle className="text-xl font-semibold text-foreground">
+                {pagador.name}
+              </CardTitle>
+              {isAdmin ? (
+                <RiVerifiedBadgeFill
+                  className="size-4 text-sky-500"
+                  aria-hidden
+                />
+              ) : null}
+              {pagador.isAutoSend ? (
+                <RiMailSendLine
+                  className="size-4 text-primary"
+                  aria-label="Envio automático habilitado"
+                />
+              ) : null}
+            </div>
+            <span className="text-sm text-muted-foreground">
+              Criado em {createdAtLabel}
+            </span>
+          </div>
+        </div>
+
+        <div className="flex w-full flex-col items-stretch gap-2 lg:w-auto lg:items-end">
+          {pagador.canEdit ? (
+            <>
+              <Button
+                type="button"
+                size="sm"
+                onClick={openConfirmDialog}
+                disabled={disableSend}
+                className="w-full min-w-[180px] lg:w-auto"
+              >
+                {isSending ? "Enviando..." : "Enviar resumo"}
+              </Button>
+              <span className="text-xs text-muted-foreground">
+                Último envio: {lastMailLabel}
+              </span>
+            </>
+          ) : (
+            <span className="text-xs font-medium text-amber-600">
+              Acesso somente leitura
+            </span>
+          )}
+        </div>
+      </CardHeader>
+
+      <CardContent className="grid gap-4 border-t border-dashed border-border/60 pt-6 text-sm sm:grid-cols-2">
+        <InfoItem
+          label="E-mail"
+          value={
+            pagador.email ? (
+              <Link
+                prefetch
+                href={`mailto:${pagador.email}`}
+                className="inline-flex items-center gap-2 text-primary"
+              >
+                <RiMailLine className="size-4" aria-hidden />
+                {pagador.email}
+              </Link>
+            ) : (
+              "—"
+            )
+          }
+        />
+        <InfoItem
+          label="Status"
+          value={
+            <Badge
+              variant={getStatusBadgeVariant(pagador.status)}
+              className="text-xs"
+            >
+              {pagador.status}
+            </Badge>
+          }
+        />
+
+        <InfoItem
+          label="Papel"
+          value={
+            <span className="inline-flex items-center gap-2">
+              <RiUser3Line className="size-4 text-muted-foreground" />
+              {resolveRoleLabel(pagador.role)}
+            </span>
+          }
+        />
+        <InfoItem
+          label="Envio automático"
+          value={pagador.isAutoSend ? "Ativado" : "Desativado"}
+        />
+        {!pagador.email ? (
+          <InfoItem
+            label="Aviso"
+            value={
+              <span className="text-[13px] text-amber-700">
+                Cadastre um e-mail para permitir o envio automático.
+              </span>
+            }
+            className="sm:col-span-2"
+          />
+        ) : null}
+        <InfoItem
+          label="Observações"
+          value={
+            pagador.note ? (
+              <span className="text-muted-foreground">{pagador.note}</span>
+            ) : (
+              "—"
+            )
+          }
+          className="sm:col-span-2"
+        />
+      </CardContent>
+
+      {pagador.canEdit ? (
+        <Dialog
+          open={confirmOpen}
+          onOpenChange={(open) => {
+            if (isSending) return;
+            setConfirmOpen(open);
+          }}
+        >
+          <DialogContent className="max-w-lg">
+            <DialogHeader>
+              <DialogTitle>Confirmar envio do resumo</DialogTitle>
+              <DialogDescription>
+                O resumo de{" "}
+                <span className="font-semibold text-foreground">
+                  {summary.periodLabel}
+                </span>{" "}
+                será enviado para{" "}
+                <span className="font-medium text-foreground">
+                  {pagador.email ?? "—"}
+                </span>
+              </DialogDescription>
+            </DialogHeader>
+
+            <div className="space-y-3 rounded-lg border border-dashed border-border/70 bg-muted/30 p-4 text-sm text-muted-foreground">
+              <div>
+                <span className="text-xs font-semibold uppercase text-muted-foreground/70">
+                  Totais do mês
+                </span>
+                <p className="text-foreground">
+                  {formatCurrency(summary.totalExpenses)} em despesas
+                  registradas
+                </p>
+                <p className="text-xs">
+                  Cartões: {formatCurrency(summary.paymentSplits.card)} •
+                  Boletos: {formatCurrency(summary.paymentSplits.boleto)} •
+                  Pix/Débito/Dinheiro:{" "}
+                  {formatCurrency(summary.paymentSplits.instant)}
+                </p>
+              </div>
+
+              <div>
+                <span className="text-xs font-semibold uppercase text-muted-foreground/70">
+                  Principais cartões
+                </span>
+                <p>
+                  {summary.cardUsage.length
+                    ? summary.cardUsage
+                        .map(
+                          (item) =>
+                            `${item.name}: ${formatCurrency(item.amount)}`
+                        )
+                        .join(" • ")
+                    : "Sem lançamentos com cartão no período."}
+                </p>
+              </div>
+
+              <div className="rounded-lg border border-border/60 p-3">
+                <div className="space-y-1">
+                  <span className="text-xs font-semibold uppercase text-muted-foreground/70">
+                    Boletos
+                  </span>
+                  <p>
+                    Pagos: {formatCurrency(summary.boletoStats.paidAmount)} (
+                    {summary.boletoStats.paidCount})
+                  </p>
+                  <p>
+                    Pendentes:{" "}
+                    {formatCurrency(summary.boletoStats.pendingAmount)} (
+                    {summary.boletoStats.pendingCount})
+                  </p>
+                </div>
+              </div>
+
+              <div className="flex items-center justify-between text-xs text-muted-foreground">
+                <span>Inclui {summary.lancamentoCount} lançamentos.</span>
+                <span>Último envio: {lastMailLabel}</span>
+              </div>
+            </div>
+
+            <DialogFooter className="gap-2">
+              <Button
+                type="button"
+                variant="outline"
+                disabled={isSending}
+                onClick={() => setConfirmOpen(false)}
+              >
+                Cancelar
+              </Button>
+              <Button
+                type="button"
+                onClick={handleSendSummary}
+                disabled={disableSend}
+              >
+                {isSending ? "Enviando..." : "Confirmar envio"}
+              </Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      ) : null}
+    </Card>
+  );
+}
+
+const formatDate = (value: string) => {
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return "—";
+  return date.toLocaleDateString("pt-BR", {
+    day: "2-digit",
+    month: "long",
+    year: "numeric",
+  });
+};
+
+const resolveRoleLabel = (role: string | null) => {
+  if (role === PAGADOR_ROLE_ADMIN) return "Administrador";
+  return "Pagador";
+};
+
+const formatCurrency = (value: number) =>
+  value.toLocaleString("pt-BR", {
+    style: "currency",
+    currency: "BRL",
+    maximumFractionDigits: 2,
+  });
+
+type InfoItemProps = {
+  label: string;
+  value: ReactNode;
+  className?: string;
+};
+
+function InfoItem({ label, value, className }: InfoItemProps) {
+  return (
+    <div className={cn("space-y-1", className)}>
+      <span className="text-xs font-semibold uppercase tracking-wide text-muted-foreground/80">
+        {label}
+      </span>
+      <div className="text-base text-foreground">{value}</div>
+    </div>
+  );
+}
diff --git a/components/pagadores/details/pagador-monthly-summary-card.tsx b/components/pagadores/details/pagador-monthly-summary-card.tsx
new file mode 100644
index 0000000..d011c71
--- /dev/null
+++ b/components/pagadores/details/pagador-monthly-summary-card.tsx
@@ -0,0 +1,119 @@
+import MoneyValues from "@/components/money-values";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import type { PagadorMonthlyBreakdown } from "@/lib/pagadores/details";
+import { cn } from "@/lib/utils/ui";
+import type { CSSProperties } from "react";
+
+const segmentConfig = {
+  card: {
+    label: "Cartões",
+    color: "bg-violet-500",
+  },
+  boleto: {
+    label: "Boletos",
+    color: "bg-amber-500",
+  },
+  instant: {
+    label: "Pix/Débito/Dinheiro",
+    color: "bg-emerald-500",
+  },
+} as const;
+
+type PagadorMonthlySummaryCardProps = {
+  periodLabel: string;
+  breakdown: PagadorMonthlyBreakdown;
+};
+
+export function PagadorMonthlySummaryCard({
+  periodLabel,
+  breakdown,
+}: PagadorMonthlySummaryCardProps) {
+  const splittableEntries = (
+    Object.keys(segmentConfig) as Array<keyof typeof segmentConfig>
+  ).map((key) => ({
+    key,
+    ...segmentConfig[key],
+    value: breakdown.paymentSplits[key],
+  }));
+
+  const totalBase = splittableEntries.reduce(
+    (sum, entry) => sum + entry.value,
+    0
+  );
+
+  let offset = 0;
+
+  return (
+    <Card className="border">
+      <CardHeader className="flex flex-col gap-1.5 pb-4">
+        <CardTitle className="text-lg font-semibold">Totais do mês</CardTitle>
+        <p className="text-xs text-muted-foreground">
+          {periodLabel} • despesas por forma de pagamento
+        </p>
+      </CardHeader>
+
+      <CardContent className="space-y-4 pt-0">
+        <div className="space-y-2">
+          <div>
+            <span className="text-[11px] uppercase tracking-wide text-muted-foreground">
+              Total gasto no mês
+            </span>
+            <MoneyValues
+              amount={breakdown.totalExpenses}
+              className="block text-2xl font-semibold text-foreground"
+            />
+          </div>
+
+          <div className="relative h-1.5 w-full overflow-hidden rounded-full bg-muted">
+            {splittableEntries.map((entry) => {
+              const percent =
+                totalBase > 0
+                  ? Math.max((entry.value / totalBase) * 100, 0)
+                  : 0;
+              const style: CSSProperties = {
+                width: `${percent}%`,
+                left: `${offset}%`,
+              };
+              offset += percent;
+              return (
+                <span
+                  key={entry.key}
+                  className={cn(
+                    "absolute inset-y-0 rounded-full transition-all",
+                    entry.color
+                  )}
+                  style={style}
+                />
+              );
+            })}
+          </div>
+        </div>
+
+        <div className="grid gap-3 sm:grid-cols-3">
+          {splittableEntries.map((entry) => {
+            const percent =
+              totalBase > 0 ? Math.round((entry.value / totalBase) * 100) : 0;
+            return (
+              <div key={entry.key} className="space-y-1 rounded-lg border p-3">
+                <span className="flex items-center gap-2 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground/70">
+                  <span
+                    className={cn("size-2 rounded-full", entry.color)}
+                    aria-hidden
+                  />
+                  {entry.label}
+                </span>
+                <MoneyValues
+                  amount={entry.value}
+                  className="block text-lg font-semibold text-foreground"
+                />
+                <span className="text-xs text-muted-foreground">
+                  {percent}% das despesas
+                </span>
+              </div>
+            );
+          })}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/components/pagadores/details/pagador-payment-method-cards.tsx b/components/pagadores/details/pagador-payment-method-cards.tsx
new file mode 100644
index 0000000..d725d12
--- /dev/null
+++ b/components/pagadores/details/pagador-payment-method-cards.tsx
@@ -0,0 +1,106 @@
+import MoneyValues from "@/components/money-values";
+import { WidgetEmptyState } from "@/components/widget-empty-state";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import type { PagadorBoletoStats } from "@/lib/pagadores/details";
+import { cn } from "@/lib/utils/ui";
+import { RiBarcodeLine } from "@remixicon/react";
+
+type PagadorBoletoCardProps = {
+  stats: PagadorBoletoStats;
+};
+
+export function PagadorBoletoCard({ stats }: PagadorBoletoCardProps) {
+  const total = stats.totalAmount;
+  const paidPercent =
+    total > 0 ? Math.round((stats.paidAmount / total) * 100) : 0;
+  const pendingPercent =
+    total > 0 ? Math.round((stats.pendingAmount / total) * 100) : 0;
+
+  return (
+    <Card className="border">
+      <CardHeader>
+        <CardTitle className="text-xl font-semibold">Boletos</CardTitle>
+        <p className="text-sm text-muted-foreground">
+          Totais por status considerando o período atual.
+        </p>
+      </CardHeader>
+      <CardContent className="space-y-4 pt-2">
+        {total === 0 ? (
+          <WidgetEmptyState
+            icon={<RiBarcodeLine className="size-6 text-muted-foreground" />}
+            title="Nenhum lançamento com boleto"
+            description="Quando houver despesas registradas com boleto, elas aparecerão aqui."
+          />
+        ) : (
+          <>
+            <div>
+              <span className="text-xs uppercase tracking-wide text-muted-foreground">
+                Total de boletos
+              </span>
+              <MoneyValues
+                amount={total}
+                className="block text-2xl font-semibold text-foreground"
+              />
+            </div>
+
+            <div className="space-y-2 rounded-xl border border-dashed p-3">
+              <StatusRow
+                label="Pagos"
+                amount={stats.paidAmount}
+                count={stats.paidCount}
+                percent={paidPercent}
+                tone="success"
+              />
+              <StatusRow
+                label="Pendentes"
+                amount={stats.pendingAmount}
+                count={stats.pendingCount}
+                percent={pendingPercent}
+                tone="warning"
+              />
+            </div>
+          </>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+type StatusRowProps = {
+  label: string;
+  amount: number;
+  count: number;
+  percent: number;
+  tone: "success" | "warning";
+};
+
+function StatusRow({ label, amount, count, percent, tone }: StatusRowProps) {
+  const clampedPercent = Math.min(Math.max(percent, 0), 100);
+  return (
+    <div className="space-y-1 rounded-lg bg-muted/40 p-3">
+      <div className="flex items-center justify-between text-sm font-semibold">
+        <span>{label}</span>
+        <span className="text-muted-foreground">{count} registros</span>
+      </div>
+      <MoneyValues
+        amount={amount}
+        className={cn(
+          "text-xl font-semibold",
+          tone === "success" ? "text-emerald-600" : "text-amber-600"
+        )}
+      />
+      <div className="flex items-center justify-between text-xs text-muted-foreground">
+        <span>{clampedPercent}% do total</span>
+        <div className="h-1.5 w-1/2 rounded-full bg-border/80">
+          <div
+            className={cn(
+              "h-full rounded-full",
+              tone === "success" ? "bg-emerald-500" : "bg-amber-500"
+            )}
+            style={{ width: `${clampedPercent}%` }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/components/pagadores/details/pagador-sharing-card.tsx b/components/pagadores/details/pagador-sharing-card.tsx
new file mode 100644
index 0000000..778f10d
--- /dev/null
+++ b/components/pagadores/details/pagador-sharing-card.tsx
@@ -0,0 +1,160 @@
+"use client";
+
+import {
+  deletePagadorShareAction,
+  regeneratePagadorShareCodeAction,
+} from "@/app/(dashboard)/pagadores/actions";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { RiDeleteBin5Line } from "@remixicon/react";
+import { useRouter } from "next/navigation";
+import { useState, useTransition } from "react";
+import { toast } from "sonner";
+
+type PagadorShare = {
+  id: string;
+  userId: string;
+  name: string;
+  email: string;
+  createdAt: string;
+};
+
+interface PagadorSharingCardProps {
+  pagadorId: string;
+  shareCode: string;
+  shares: PagadorShare[];
+}
+
+export function PagadorSharingCard({
+  pagadorId,
+  shareCode,
+  shares,
+}: PagadorSharingCardProps) {
+  const router = useRouter();
+  const [currentCode, setCurrentCode] = useState(shareCode);
+  const [regeneratePending, startRegenerate] = useTransition();
+  const [removePendingId, setRemovePendingId] = useState<string | null>(null);
+
+  const handleCopyCode = async () => {
+    try {
+      await navigator.clipboard.writeText(currentCode);
+      toast.success("Código copiado para a área de transferência.");
+    } catch {
+      toast.error("Não foi possível copiar o código.");
+    }
+  };
+
+  const handleRegenerate = () => {
+    startRegenerate(async () => {
+      const result = await regeneratePagadorShareCodeAction({ pagadorId });
+
+      if (!result.success) {
+        toast.error(result.error);
+        return;
+      }
+
+      setCurrentCode(result.code);
+      toast.success("Novo código gerado com sucesso.");
+      router.refresh();
+    });
+  };
+
+  const handleRemove = (shareId: string) => {
+    setRemovePendingId(shareId);
+    startRegenerate(async () => {
+      const result = await deletePagadorShareAction({ shareId });
+
+      if (!result.success) {
+        toast.error(result.error);
+        setRemovePendingId(null);
+        return;
+      }
+
+      toast.success(result.message);
+      setRemovePendingId(null);
+      router.refresh();
+    });
+  };
+
+  return (
+    <Card className="border">
+      <CardHeader>
+        <CardTitle className="text-base font-semibold">
+          Compartilhamentos
+        </CardTitle>
+        <p className="text-sm text-muted-foreground">
+          Compartilhe o código abaixo com outra pessoa. Ela poderá adicioná-lo
+          na página de pagadores usando a opção Adicionar por código para ter
+          acesso somente leitura.
+        </p>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="flex flex-col gap-2 rounded-lg border border-dashed p-4 text-sm">
+          <span className="text-xs font-semibold uppercase text-muted-foreground/80">
+            Código de compartilhamento
+          </span>
+          <div className="flex flex-wrap items-center gap-2">
+            <code className="rounded bg-muted px-2 py-1 text-xs font-mono">
+              {currentCode}
+            </code>
+            <Button
+              type="button"
+              size="sm"
+              variant="outline"
+              onClick={handleCopyCode}
+            >
+              Copiar
+            </Button>
+            <Button
+              type="button"
+              size="sm"
+              onClick={handleRegenerate}
+              disabled={regeneratePending}
+            >
+              {regeneratePending ? "Gerando..." : "Gerar novo código"}
+            </Button>
+          </div>
+          <p className="text-xs text-muted-foreground">
+            Gerar um novo código não remove acessos existentes, apenas impede
+            que novos convites usem o código anterior.
+          </p>
+        </div>
+
+        {shares.length === 0 ? (
+          <p className="text-sm text-muted-foreground">
+            Nenhum usuário com acesso de leitura.
+          </p>
+        ) : (
+          <ul className="space-y-3">
+            {shares.map((share) => (
+              <li
+                key={share.id}
+                className="flex items-center justify-between rounded-lg border border-dashed p-4 text-sm"
+              >
+                <div className="flex flex-col">
+                  <span className="font-medium text-foreground">
+                    {share.name}
+                  </span>
+                  <span className="text-muted-foreground">{share.email}</span>
+                  <span className="text-xs text-muted-foreground/80">
+                    ID: ****{share.userId.slice(-4)}
+                  </span>
+                </div>
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon-sm"
+                  onClick={() => handleRemove(share.id)}
+                  disabled={removePendingId === share.id}
+                >
+                  <RiDeleteBin5Line className="size-4" />
+                  <span className="sr-only">Remover acesso</span>
+                </Button>
+              </li>
+            ))}
+          </ul>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/components/pagadores/pagador-card.tsx b/components/pagadores/pagador-card.tsx
new file mode 100644
index 0000000..ebcb598
--- /dev/null
+++ b/components/pagadores/pagador-card.tsx
@@ -0,0 +1,121 @@
+"use client";
+
+import { Badge } from "@/components/ui/badge";
+import { Card } from "@/components/ui/card";
+import { PAGADOR_ROLE_ADMIN } from "@/lib/pagadores/constants";
+import { getAvatarSrc } from "@/lib/pagadores/utils";
+import {
+  RiDeleteBin5Line,
+  RiEyeLine,
+  RiMailSendLine,
+  RiPencilLine,
+  RiVerifiedBadgeFill,
+} from "@remixicon/react";
+import Image from "next/image";
+import Link from "next/link";
+import { useMemo } from "react";
+import type { Pagador } from "./types";
+
+interface PagadorCardProps {
+  pagador: Pagador;
+  onEdit?: () => void;
+  onRemove?: () => void;
+}
+
+export function PagadorCard({ pagador, onEdit, onRemove }: PagadorCardProps) {
+  const avatarSrc = useMemo(
+    () => getAvatarSrc(pagador.avatarUrl),
+    [pagador.avatarUrl]
+  );
+
+  const isAdmin = pagador.role === PAGADOR_ROLE_ADMIN;
+  const isReadOnly = !pagador.canEdit;
+
+  return (
+    <Card className=" overflow-hidden px-6">
+      {/* Avatar posicionado sobre o header */}
+      <div className="relative flex flex-col items-start">
+        <div className="relative mb-3 flex size-16 items-center justify-center overflow-hidden rounded-full  border-background bg-background shadow-lg">
+          <Image
+            src={avatarSrc}
+            alt={`Avatar de ${pagador.name}`}
+            width={80}
+            height={80}
+            className="h-full w-full object-cover"
+          />
+        </div>
+
+        {/* Nome e badges */}
+        <div className="flex items-center gap-1.5">
+          <h3 className="text-base font-semibold text-foreground">
+            {pagador.name}
+          </h3>
+          {isAdmin ? (
+            <RiVerifiedBadgeFill className="size-4 text-blue-500" aria-hidden />
+          ) : null}
+          {pagador.isAutoSend ? (
+            <RiMailSendLine className="size-4 text-primary" aria-hidden />
+          ) : null}
+        </div>
+
+        {/* Email */}
+        {pagador.email ? (
+          <p className="mt-1 text-xs text-muted-foreground">{pagador.email}</p>
+        ) : (
+          <p className="mt-1 text-xs text-muted-foreground">
+            Sem Email cadastrado
+          </p>
+        )}
+
+        {/* Status badges */}
+        <div className="mt-2 flex flex-wrap items-center justify-center gap-1.5">
+          <Badge
+            variant={pagador.status === "Ativo" ? "success" : "outline"}
+            className="text-xs"
+          >
+            {pagador.status}
+          </Badge>
+
+          {isReadOnly ? (
+            <Badge variant="outline" className="text-xs text-amber-600">
+              Somente leitura
+            </Badge>
+          ) : null}
+        </div>
+      </div>
+
+      {/* Footer com links */}
+      <div className="flex flex-wrap items-start justify-start gap-3 text-sm font-medium">
+        {!isReadOnly && onEdit ? (
+          <button
+            type="button"
+            onClick={onEdit}
+            className={`text-primary flex items-center gap-1 font-medium transition-opacity hover:opacity-80`}
+          >
+            <RiPencilLine className="size-4" aria-hidden />
+            editar
+          </button>
+        ) : null}
+
+        <Link
+          href={`/pagadores/${pagador.id}`}
+          className={`text-primary flex items-center gap-1 font-medium transition-opacity hover:opacity-80`}
+        >
+          <RiEyeLine className="size-4" aria-hidden />
+          detalhes
+        </Link>
+
+        {!isAdmin && !isReadOnly && onRemove ? (
+          <button
+            type="button"
+            onClick={onRemove}
+            className={`text-destructive flex items-center gap-1 font-medium transition-opacity hover:opacity-80`}
+          >
+            <RiDeleteBin5Line className="size-4" aria-hidden />
+            remover
+          </button>
+        ) : null}
+      </div>
+    </Card>
+  );
+}
diff --git a/components/pagadores/pagador-dialog.tsx b/components/pagadores/pagador-dialog.tsx
new file mode 100644
index 0000000..93ebf5c
--- /dev/null
+++ b/components/pagadores/pagador-dialog.tsx
@@ -0,0 +1,348 @@
+"use client";
+import {
+  createPagadorAction,
+  updatePagadorAction,
+} from "@/app/(dashboard)/pagadores/actions";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+import { useControlledState } from "@/hooks/use-controlled-state";
+import { useFormState } from "@/hooks/use-form-state";
+import {
+  DEFAULT_PAGADOR_AVATAR,
+  PAGADOR_STATUS_OPTIONS,
+  type PagadorStatus,
+} from "@/lib/pagadores/constants";
+import { RiCheckLine, RiCloseCircleLine } from "@remixicon/react";
+import Image from "next/image";
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+  useTransition,
+} from "react";
+import { toast } from "sonner";
+import { StatusSelectContent } from "./pagador-select-items";
+
+import { getAvatarSrc } from "@/lib/pagadores/utils";
+import type { Pagador, PagadorFormValues } from "./types";
+
+interface PagadorDialogProps {
+  mode: "create" | "update";
+  trigger?: React.ReactNode;
+  pagador?: Pagador;
+  avatarOptions: string[];
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}
+
+const buildInitialValues = ({
+  pagador,
+  avatarOptions,
+}: {
+  pagador?: Pagador;
+  avatarOptions: string[];
+}): PagadorFormValues => {
+  const defaultAvatar = avatarOptions[0] ?? DEFAULT_PAGADOR_AVATAR;
+
+  return {
+    name: pagador?.name ?? "",
+    email: pagador?.email ?? "",
+    status: (pagador?.status as PagadorStatus) ?? PAGADOR_STATUS_OPTIONS[0],
+    avatarUrl: pagador?.avatarUrl ?? defaultAvatar,
+    note: pagador?.note ?? "",
+    isAutoSend: pagador?.isAutoSend ?? false,
+  };
+};
+
+export function PagadorDialog({
+  mode,
+  trigger,
+  pagador,
+  avatarOptions,
+  open,
+  onOpenChange,
+}: PagadorDialogProps) {
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [isPending, startTransition] = useTransition();
+
+  // Use controlled state hook for dialog open state
+  const [dialogOpen, setDialogOpen] = useControlledState(
+    open,
+    false,
+    onOpenChange
+  );
+
+  const initialState = useMemo(
+    () => buildInitialValues({ pagador, avatarOptions }),
+    [pagador, avatarOptions]
+  );
+
+  // Use form state hook for form management
+  const { formState, updateField, setFormState } =
+    useFormState<PagadorFormValues>(initialState);
+
+  const availableAvatars = useMemo(() => {
+    const set = new Set<string>();
+    avatarOptions.forEach((avatar) => set.add(avatar));
+    set.add(initialState.avatarUrl);
+    set.add(DEFAULT_PAGADOR_AVATAR);
+    return Array.from(set).sort((a, b) =>
+      a.localeCompare(b, "pt-BR", { sensitivity: "base" })
+    );
+  }, [avatarOptions, initialState.avatarUrl]);
+
+  // Reset form when dialog opens
+  useEffect(() => {
+    if (dialogOpen) {
+      setFormState(initialState);
+      setErrorMessage(null);
+    }
+  }, [dialogOpen, initialState, setFormState]);
+
+  const handleSubmit = useCallback(
+    (event: React.FormEvent<HTMLFormElement>) => {
+      event.preventDefault();
+      setErrorMessage(null);
+
+      if (mode === "update" && !pagador?.id) {
+        const message = "Pagador inválido.";
+        setErrorMessage(message);
+        toast.error(message);
+        return;
+      }
+
+      const payload: {
+        name: string;
+        email?: string;
+        status: PagadorStatus;
+        avatarUrl: string;
+        note: string;
+        isAutoSend: boolean;
+      } = {
+        name: formState.name.trim(),
+        status: formState.status,
+        avatarUrl: formState.avatarUrl,
+        note: formState.note.trim(),
+        isAutoSend: formState.isAutoSend,
+      };
+
+      const emailValue = formState.email.trim();
+      if (emailValue.length > 0) {
+        payload.email = emailValue;
+      }
+
+      startTransition(async () => {
+        const result =
+          mode === "create"
+            ? await createPagadorAction(payload)
+            : await updatePagadorAction({
+                id: pagador?.id ?? "",
+                ...payload,
+              });
+
+        if (result.success) {
+          toast.success(result.message);
+          setDialogOpen(false);
+          setFormState(initialState);
+          return;
+        }
+
+        setErrorMessage(result.error);
+        toast.error(result.error);
+      });
+    },
+    [formState, initialState, mode, pagador?.id, setDialogOpen, setFormState]
+  );
+
+  const title = mode === "create" ? "Novo pagador" : "Editar pagador";
+  const description =
+    mode === "create"
+      ? "Selecione um avatar e informe os detalhes para criar um novo pagador."
+      : "Atualize os detalhes do pagador selecionado.";
+  const submitLabel =
+    mode === "create" ? "Salvar pagador" : "Atualizar pagador";
+
+  return (
+    <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+      {trigger ? <DialogTrigger asChild>{trigger}</DialogTrigger> : null}
+      <DialogContent className="max-w-2xl px-6 py-5 sm:px-8 sm:py-6">
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+          <DialogDescription>{description}</DialogDescription>
+        </DialogHeader>
+
+        <form className="flex flex-col gap-6" onSubmit={handleSubmit}>
+          <fieldset className="flex flex-col gap-3">
+            <div className="flex flex-col gap-3">
+              <div className="flex w-full gap-2">
+                <div className="flex flex-col gap-2 w-full">
+                  <Label htmlFor="pagador-name">Nome</Label>
+                  <Input
+                    id="pagador-name"
+                    value={formState.name}
+                    onChange={(event) =>
+                      updateField("name", event.target.value)
+                    }
+                    placeholder="Ex.: Felipe Coutinho"
+                    required
+                  />
+                </div>
+
+                <div className="flex flex-col gap-2 w-full">
+                  <Label htmlFor="pagador-email">E-mail</Label>
+                  <Input
+                    id="pagador-email"
+                    type="email"
+                    value={formState.email}
+                    onChange={(event) =>
+                      updateField("email", event.target.value)
+                    }
+                    placeholder="Ex.: felipe@email.com"
+                  />
+                </div>
+              </div>
+
+              <div className="flex flex-col gap-2">
+                <Label htmlFor="pagador-status">Status</Label>
+                <Select
+                  value={formState.status}
+                  onValueChange={(value: PagadorStatus) =>
+                    updateField("status", value)
+                  }
+                >
+                  <SelectTrigger id="pagador-status" className="w-full">
+                    <SelectValue placeholder="Selecione o status">
+                      {formState.status && (
+                        <StatusSelectContent label={formState.status} />
+                      )}
+                    </SelectValue>
+                  </SelectTrigger>
+                  <SelectContent>
+                    {PAGADOR_STATUS_OPTIONS.map((status) => (
+                      <SelectItem key={status} value={status}>
+                        <StatusSelectContent label={status} />
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+
+              <fieldset className="flex flex-col gap-3">
+                <div className="flex items-start gap-3 rounded-lg border border-border/60 bg-muted/10 p-3">
+                  <Checkbox
+                    id="pagador-auto-send"
+                    checked={formState.isAutoSend}
+                    onCheckedChange={(checked) =>
+                      updateField("isAutoSend", Boolean(checked))
+                    }
+                    aria-label="Ativar envio automático"
+                  />
+                  <div className="space-y-1">
+                    <Label
+                      htmlFor="pagador-auto-send"
+                      className="text-sm font-medium text-foreground"
+                    >
+                      Enviar automaticamente
+                    </Label>
+                    <p className="text-xs text-muted-foreground">
+                      Dispare cobranças e lembretes sem intervenção manual.
+                    </p>
+                  </div>
+                </div>
+              </fieldset>
+
+              <fieldset className="flex flex-col gap-3">
+                <div className="grid grid-cols-4 gap-3 sm:grid-cols-5">
+                  {availableAvatars.length === 0 ? (
+                    <div className="col-span-5 flex flex-col items-center justify-center gap-3 rounded-xl border border-dashed border-border/60 bg-muted/10 p-6 text-center text-sm text-muted-foreground">
+                      <RiCloseCircleLine className="size-6" />
+                      Nenhum avatar disponível. Adicione imagens em
+                      <span className="font-mono text-xs">public/avatares</span>
+                      .
+                    </div>
+                  ) : null}
+                  {availableAvatars.map((avatar) => {
+                    const isSelected = avatar === formState.avatarUrl;
+                    return (
+                      <button
+                        type="button"
+                        key={avatar}
+                        onClick={() => updateField("avatarUrl", avatar)}
+                        className="group relative flex items-center justify-center overflow-hidden rounded-xl border border-border/70 p-2 transition-all hover:border-primary/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2 data-[selected=true]:border-primary data-[selected=true]:bg-primary/10"
+                        data-selected={isSelected}
+                        aria-pressed={isSelected}
+                      >
+                        <span className="absolute inset-0 rounded-xl border-2 border-primary/80 opacity-0 transition-opacity group-data-[selected=true]:opacity-100" />
+                        {isSelected ? (
+                          <span className="absolute right-1 top-1 flex size-4 items-center justify-center rounded-full bg-sidebar-foreground text-primary-foreground shadow-sm">
+                            <RiCheckLine className="size-3.5" />
+                          </span>
+                        ) : null}
+                        <Image
+                          src={getAvatarSrc(avatar)}
+                          alt={`Avatar ${avatar}`}
+                          width={72}
+                          height={72}
+                          className="size-12 rounded-lg object-cover"
+                        />
+                      </button>
+                    );
+                  })}
+                </div>
+              </fieldset>
+
+              <div className="flex flex-col gap-2">
+                <Label htmlFor="pagador-note">Anotações</Label>
+                <Textarea
+                  id="pagador-note"
+                  rows={2}
+                  value={formState.note}
+                  onChange={(event) => updateField("note", event.target.value)}
+                  placeholder="Observações, preferências ou detalhes relevantes sobre este pagador"
+                />
+              </div>
+            </div>
+          </fieldset>
+
+          {errorMessage ? (
+            <p className="text-sm text-destructive">{errorMessage}</p>
+          ) : null}
+
+          <DialogFooter className="gap-3">
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => setDialogOpen(false)}
+              disabled={isPending}
+            >
+              Cancelar
+            </Button>
+            <Button type="submit" disabled={isPending}>
+              {isPending ? "Salvando..." : submitLabel}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/components/pagadores/pagador-select-items.tsx b/components/pagadores/pagador-select-items.tsx
new file mode 100644
index 0000000..52439f9
--- /dev/null
+++ b/components/pagadores/pagador-select-items.tsx
@@ -0,0 +1,20 @@
+"use client";
+
+import DotIcon from "@/components/dot-icon";
+
+export function StatusSelectContent({ label }: { label: string }) {
+  const isActive = label === "Ativo";
+
+  return (
+    <span className="flex items-center gap-2">
+      <DotIcon
+        bg_dot={
+          isActive
+            ? "bg-emerald-600 dark:bg-emerald-300"
+            : "bg-slate-400 dark:bg-slate-500"
+        }
+      />
+      <span>{label}</span>
+    </span>
+  );
+}
diff --git a/components/pagadores/pagadores-page.tsx b/components/pagadores/pagadores-page.tsx
new file mode 100644
index 0000000..3af012c
--- /dev/null
+++ b/components/pagadores/pagadores-page.tsx
@@ -0,0 +1,203 @@
+"use client";
+
+import {
+  deletePagadorAction,
+  joinPagadorByShareCodeAction,
+} from "@/app/(dashboard)/pagadores/actions";
+import { PagadorCard } from "@/components/pagadores/pagador-card";
+import { PagadorDialog } from "@/components/pagadores/pagador-dialog";
+import { ConfirmActionDialog } from "@/components/confirm-action-dialog";
+import { Button } from "@/components/ui/button";
+import { PAGADOR_ROLE_ADMIN } from "@/lib/pagadores/constants";
+import { Input } from "@/components/ui/input";
+import { useRouter } from "next/navigation";
+import { useCallback, useMemo, useState, useTransition } from "react";
+import { toast } from "sonner";
+
+import type { Pagador } from "./types";
+import { RiAddCircleLine } from "@remixicon/react";
+
+interface PagadoresPageProps {
+  pagadores: Pagador[];
+  avatarOptions: string[];
+}
+
+export function PagadoresPage({
+  pagadores,
+  avatarOptions,
+}: PagadoresPageProps) {
+  const router = useRouter();
+  const [editOpen, setEditOpen] = useState(false);
+  const [selectedPagador, setSelectedPagador] = useState<Pagador | null>(null);
+  const [removeOpen, setRemoveOpen] = useState(false);
+  const [pagadorToRemove, setPagadorToRemove] = useState<Pagador | null>(null);
+  const [shareCodeInput, setShareCodeInput] = useState("");
+  const [joinPending, startJoin] = useTransition();
+
+  const orderedPagadores = useMemo(
+    () =>
+      [...pagadores].sort((a, b) => {
+        // Admin sempre primeiro
+        if (a.role === PAGADOR_ROLE_ADMIN && b.role !== PAGADOR_ROLE_ADMIN) {
+          return -1;
+        }
+        if (a.role !== PAGADOR_ROLE_ADMIN && b.role === PAGADOR_ROLE_ADMIN) {
+          return 1;
+        }
+        // Se ambos têm o mesmo tipo de role, ordena por nome
+        return a.name.localeCompare(b.name, "pt-BR", { sensitivity: "base" });
+      }),
+    [pagadores]
+  );
+
+  const handleEdit = useCallback((pagador: Pagador) => {
+    setSelectedPagador(pagador);
+    setEditOpen(true);
+  }, []);
+
+  const handleEditOpenChange = useCallback((open: boolean) => {
+    setEditOpen(open);
+    if (!open) {
+      setSelectedPagador(null);
+    }
+  }, []);
+
+  const handleRemoveRequest = useCallback((pagador: Pagador) => {
+    if (pagador.role === PAGADOR_ROLE_ADMIN) {
+      toast.error("Pagadores administradores não podem ser removidos.");
+      return;
+    }
+    setPagadorToRemove(pagador);
+    setRemoveOpen(true);
+  }, []);
+
+  const handleRemoveOpenChange = useCallback((open: boolean) => {
+    setRemoveOpen(open);
+    if (!open) {
+      setPagadorToRemove(null);
+    }
+  }, []);
+
+  const handleRemoveConfirm = useCallback(async () => {
+    if (!pagadorToRemove) {
+      return;
+    }
+
+    const result = await deletePagadorAction({ id: pagadorToRemove.id });
+
+    if (result.success) {
+      toast.success(result.message);
+      return;
+    }
+
+    toast.error(result.error);
+    throw new Error(result.error);
+  }, [pagadorToRemove]);
+
+  const removeTitle = pagadorToRemove
+    ? `Remover pagador "${pagadorToRemove.name}"?`
+    : "Remover pagador?";
+
+  const handleJoinByCode = useCallback(
+    (event: React.FormEvent<HTMLFormElement>) => {
+      event.preventDefault();
+      if (!shareCodeInput.trim()) {
+        toast.error("Informe um código válido.");
+        return;
+      }
+
+      startJoin(async () => {
+        const result = await joinPagadorByShareCodeAction({
+          code: shareCodeInput.trim(),
+        });
+
+        if (!result.success) {
+          toast.error(result.error);
+          return;
+        }
+
+        toast.success(result.message);
+        setShareCodeInput("");
+        router.refresh();
+      });
+    },
+    [shareCodeInput, router]
+  );
+
+  return (
+    <>
+      <div className="flex flex-col gap-6 w-full">
+        <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+          <PagadorDialog
+            mode="create"
+            avatarOptions={avatarOptions}
+            trigger={
+              <Button>
+                <RiAddCircleLine className="size-4" />
+                Novo pagador
+              </Button>
+            }
+          />
+          <form
+            onSubmit={handleJoinByCode}
+            className="flex w-full flex-col gap-2 sm:w-auto sm:flex-row"
+          >
+            <Input
+              placeholder="Código de Compartilhamento"
+              value={shareCodeInput}
+              onChange={(event) => setShareCodeInput(event.target.value)}
+              disabled={joinPending}
+              className="w-56"
+            />
+            <Button type="submit" disabled={joinPending}>
+              {joinPending ? "Adicionando..." : "Adicionar por código"}
+            </Button>
+          </form>
+        </div>
+
+        {orderedPagadores.length === 0 ? (
+          <div className="flex min-h-[320px] items-center justify-center rounded-lg border border-dashed bg-muted/30">
+            <div className="max-w-sm text-center text-sm text-muted-foreground">
+              Cadastre seu primeiro pagador para organizar cobranças e
+              pagamentos recorrentes.
+            </div>
+          </div>
+        ) : (
+          <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
+            {orderedPagadores.map((pagador) => (
+              <PagadorCard
+                key={pagador.id}
+                pagador={pagador}
+                onEdit={pagador.canEdit ? () => handleEdit(pagador) : undefined}
+                onRemove={
+                  pagador.canEdit && pagador.role !== PAGADOR_ROLE_ADMIN
+                    ? () => handleRemoveRequest(pagador)
+                    : undefined
+                }
+              />
+            ))}
+          </div>
+        )}
+      </div>
+
+      <PagadorDialog
+        mode="update"
+        pagador={selectedPagador ?? undefined}
+        avatarOptions={avatarOptions}
+        open={editOpen && !!selectedPagador}
+        onOpenChange={handleEditOpenChange}
+      />
+
+      <ConfirmActionDialog
+        open={removeOpen && !!pagadorToRemove}
+        onOpenChange={handleRemoveOpenChange}
+        title={removeTitle}
+        description="Ao remover este pagador, os registros relacionados a ele deixarão de ser associados automaticamente."
+        confirmLabel="Remover pagador"
+        pendingLabel="Removendo..."
+        confirmVariant="destructive"
+        onConfirm={handleRemoveConfirm}
+      />
+    </>
+  );
+}
diff --git a/components/pagadores/types.ts b/components/pagadores/types.ts
new file mode 100644
index 0000000..99d9b3d
--- /dev/null
+++ b/components/pagadores/types.ts
@@ -0,0 +1,27 @@
+import type { PagadorStatus } from "@/lib/pagadores/constants";
+
+export type Pagador = {
+  id: string;
+  name: string;
+  email: string | null;
+  avatarUrl: string | null;
+  status: PagadorStatus;
+  note: string | null;
+  role: string | null;
+  isAutoSend: boolean;
+  createdAt: string;
+  canEdit: boolean;
+  sharedByName?: string | null;
+  sharedByEmail?: string | null;
+  shareId?: string | null;
+  shareCode?: string | null;
+};
+
+export type PagadorFormValues = {
+  name: string;
+  email: string;
+  status: PagadorStatus;
+  avatarUrl: string;
+  note: string;
+  isAutoSend: boolean;
+};
diff --git a/components/page-description.tsx b/components/page-description.tsx
new file mode 100644
index 0000000..14cacd1
--- /dev/null
+++ b/components/page-description.tsx
@@ -0,0 +1,21 @@
+export default function PageDescription({
+  title,
+  subtitle,
+  icon,
+}: {
+  title?: string;
+  subtitle?: string;
+  icon?: React.ReactNode;
+}) {
+  return (
+    <div>
+      <h1 className="text-2xl font-semibold flex items-center gap-1">
+        <span className="text-primary">{icon}</span>
+        {title}
+      </h1>
+      <h2 className="text-sm max-w-2xl text-muted-foreground leading-relaxed mt-2">
+        {subtitle}
+      </h2>
+    </div>
+  );
+}
diff --git a/components/privacy-mode-toggle.tsx b/components/privacy-mode-toggle.tsx
new file mode 100644
index 0000000..a884265
--- /dev/null
+++ b/components/privacy-mode-toggle.tsx
@@ -0,0 +1,78 @@
+"use client";
+
+import { buttonVariants } from "@/components/ui/button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils/ui";
+import { RiEyeLine, RiEyeOffLine } from "@remixicon/react";
+import { usePrivacyMode } from "./privacy-provider";
+
+type PrivacyModeToggleProps = React.ComponentPropsWithoutRef<"button">;
+
+export const PrivacyModeToggle = ({
+  className,
+  ...props
+}: PrivacyModeToggleProps) => {
+  const { privacyMode, toggle } = usePrivacyMode();
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <button
+          ref={undefined}
+          type="button"
+          onClick={toggle}
+          aria-pressed={privacyMode}
+          aria-label={
+            privacyMode
+              ? "Desativar modo privacidade"
+              : "Ativar modo privacidade"
+          }
+          title={
+            privacyMode
+              ? "Desativar modo privacidade"
+              : "Ativar modo privacidade"
+          }
+          data-state={privacyMode ? "active" : "inactive"}
+          className={cn(
+            buttonVariants({ variant: "ghost", size: "icon-sm" }),
+            "group relative text-muted-foreground transition-all duration-200",
+            "hover:text-foreground focus-visible:ring-2 focus-visible:ring-primary/40",
+            "data-[state=active]:bg-accent/60 data-[state=active]:text-foreground border",
+            className
+          )}
+          {...props}
+        >
+          <span
+            aria-hidden
+            className="pointer-events-none absolute inset-0 -z-10 opacity-0 transition-opacity duration-200 data-[state=active]:opacity-100"
+          >
+            <span className="absolute inset-0 bg-linear-to-br from-blue-500/5 via-transparent to-blue-500/15 dark:from-blue-500/10 dark:to-blue-500/30" />
+          </span>
+          {privacyMode ? (
+            <RiEyeOffLine
+              className="size-4 transition-transform duration-200"
+              aria-hidden
+            />
+          ) : (
+            <RiEyeLine
+              className="size-4 transition-transform duration-200"
+              aria-hidden
+            />
+          )}
+          <span className="sr-only">
+            {privacyMode
+              ? "Modo privacidade ativo"
+              : "Modo privacidade inativo"}
+          </span>
+        </button>
+      </TooltipTrigger>
+      <TooltipContent side="bottom" sideOffset={8}>
+        {privacyMode ? "Desativar privacidade" : "Ativar privacidade"}
+      </TooltipContent>
+    </Tooltip>
+  );
+};
diff --git a/components/privacy-provider.tsx b/components/privacy-provider.tsx
new file mode 100644
index 0000000..3bf5be8
--- /dev/null
+++ b/components/privacy-provider.tsx
@@ -0,0 +1,58 @@
+"use client";
+
+import React, { createContext, useContext, useEffect, useState } from "react";
+
+interface PrivacyContextType {
+  privacyMode: boolean;
+  toggle: () => void;
+  set: (value: boolean) => void;
+}
+
+const PrivacyContext = createContext<PrivacyContextType | undefined>(
+  undefined
+);
+
+const STORAGE_KEY = "app:privacyMode";
+
+export function PrivacyProvider({ children }: { children: React.ReactNode }) {
+  const [privacyMode, setPrivacyMode] = useState(false);
+  const [hydrated, setHydrated] = useState(false);
+
+  // Sincronizar com localStorage na montagem (evitar mismatch SSR/CSR)
+  useEffect(() => {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (stored !== null) {
+      setPrivacyMode(stored === "true");
+    }
+    setHydrated(true);
+  }, []);
+
+  // Persistir mudanças no localStorage
+  useEffect(() => {
+    if (hydrated) {
+      localStorage.setItem(STORAGE_KEY, String(privacyMode));
+    }
+  }, [privacyMode, hydrated]);
+
+  const toggle = () => {
+    setPrivacyMode((prev) => !prev);
+  };
+
+  const set = (value: boolean) => {
+    setPrivacyMode(value);
+  };
+
+  return (
+    <PrivacyContext.Provider value={{ privacyMode, toggle, set }}>
+      {children}
+    </PrivacyContext.Provider>
+  );
+}
+
+export function usePrivacyMode() {
+  const context = useContext(PrivacyContext);
+  if (context === undefined) {
+    throw new Error("usePrivacyMode must be used within a PrivacyProvider");
+  }
+  return context;
+}
diff --git a/components/sidebar/app-sidebar.tsx b/components/sidebar/app-sidebar.tsx
new file mode 100644
index 0000000..4ec323a
--- /dev/null
+++ b/components/sidebar/app-sidebar.tsx
@@ -0,0 +1,79 @@
+"use client";
+import { Logo } from "@/components/logo";
+import { NavMain } from "@/components/sidebar/nav-main";
+import { NavSecondary } from "@/components/sidebar/nav-secondary";
+import { NavUser } from "@/components/sidebar/nav-user";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/components/ui/sidebar";
+import * as React from "react";
+import { createSidebarNavData, type PagadorLike } from "./nav-link";
+
+type AppUser = {
+  id: string;
+  name: string;
+  email: string;
+  image: string | null;
+};
+
+interface AppSidebarProps extends React.ComponentProps<typeof Sidebar> {
+  user: AppUser;
+  pagadorAvatarUrl: string | null;
+  pagadores: PagadorLike[];
+}
+
+export function AppSidebar({
+  user,
+  pagadorAvatarUrl,
+  pagadores,
+  ...props
+}: AppSidebarProps) {
+  if (!user) {
+    throw new Error("AppSidebar requires a user but received undefined.");
+  }
+
+  const navigation = React.useMemo(
+    () => createSidebarNavData(pagadores),
+    [pagadores]
+  );
+
+  return (
+    <Sidebar collapsible="icon" {...props}>
+      <SidebarHeader>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton
+              asChild
+              className="data-[slot=sidebar-menu-button]:p-1.5!"
+            >
+              <a href="/dashboard">
+                <LogoContent />
+              </a>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarHeader>
+      <SidebarContent>
+        <NavMain sections={navigation.navMain} />
+        <NavSecondary items={navigation.navSecondary} className="mt-auto" />
+      </SidebarContent>
+      <SidebarFooter>
+        <NavUser user={user} pagadorAvatarUrl={pagadorAvatarUrl} />
+      </SidebarFooter>
+    </Sidebar>
+  );
+}
+
+function LogoContent() {
+  const { state } = useSidebar();
+  const isCollapsed = state === "collapsed";
+
+  return <Logo variant={isCollapsed ? "small" : "full"} />;
+}
diff --git a/components/sidebar/nav-link.tsx b/components/sidebar/nav-link.tsx
new file mode 100644
index 0000000..6f98af8
--- /dev/null
+++ b/components/sidebar/nav-link.tsx
@@ -0,0 +1,150 @@
+import {
+  RiArrowLeftRightLine,
+  RiBankCardLine,
+  RiBankLine,
+  RiCalendarEventLine,
+  RiDashboardLine,
+  RiFileListLine,
+  RiFundsLine,
+  RiGroupLine,
+  RiPriceTag3Line,
+  RiSettingsLine,
+  RiSparklingLine,
+  type RemixiconComponentType,
+} from "@remixicon/react";
+
+export type SidebarSubItem = {
+  title: string;
+  url: string;
+  avatarUrl?: string | null;
+  isShared?: boolean;
+  key?: string;
+};
+
+export type SidebarItem = {
+  title: string;
+  url: string;
+  icon: RemixiconComponentType;
+  isActive?: boolean;
+  items?: SidebarSubItem[];
+};
+
+export type SidebarSection = {
+  title: string;
+  items: SidebarItem[];
+};
+
+export type SidebarNavData = {
+  navMain: SidebarSection[];
+  navSecondary: {
+    title: string;
+    url: string;
+    icon: RemixiconComponentType;
+  }[];
+};
+
+export interface PagadorLike {
+  id: string;
+  name: string | null;
+  avatarUrl: string | null;
+  canEdit?: boolean;
+}
+
+export function createSidebarNavData(pagadores: PagadorLike[]): SidebarNavData {
+  const pagadorItems = pagadores
+    .map((pagador) => ({
+      title: pagador.name?.trim().length
+        ? pagador.name.trim()
+        : "Pagador sem nome",
+      url: `/pagadores/${pagador.id}`,
+      key: pagador.canEdit ? pagador.id : `${pagador.id}-shared`,
+      isShared: !pagador.canEdit,
+      avatarUrl: pagador.avatarUrl,
+    }))
+    .sort((a, b) =>
+      a.title.localeCompare(b.title, "pt-BR", { sensitivity: "base" })
+    );
+
+  return {
+    navMain: [
+      {
+        title: "Visão Geral",
+        items: [
+          {
+            title: "Dashboard",
+            url: "/dashboard",
+            icon: RiDashboardLine,
+          },
+        ],
+      },
+      {
+        title: "Gestão Financeira",
+        items: [
+          {
+            title: "Lançamentos",
+            url: "/lancamentos",
+            icon: RiArrowLeftRightLine,
+          },
+          {
+            title: "Calendário",
+            url: "/calendario",
+            icon: RiCalendarEventLine,
+          },
+          {
+            title: "Cartões",
+            url: "/cartoes",
+            icon: RiBankCardLine,
+          },
+          {
+            title: "Contas",
+            url: "/contas",
+            icon: RiBankLine,
+          },
+          {
+            title: "Orçamentos",
+            url: "/orcamentos",
+            icon: RiFundsLine,
+          },
+        ],
+      },
+      {
+        title: "Organização",
+        items: [
+          {
+            title: "Pagadores",
+            url: "/pagadores",
+            icon: RiGroupLine,
+            items: pagadorItems,
+          },
+          {
+            title: "Categorias",
+            url: "/categorias",
+            icon: RiPriceTag3Line,
+          },
+        ],
+      },
+      {
+        title: "Análise e Anotações",
+        items: [
+          {
+            title: "Anotações",
+            url: "/anotacoes",
+            icon: RiFileListLine,
+          },
+          {
+            title: "Insights",
+            url: "/insights",
+            icon: RiSparklingLine,
+          },
+        ],
+      },
+    ],
+    navSecondary: [
+      {
+        title: "Ajustes",
+        url: "/ajustes",
+        icon: RiSettingsLine,
+      },
+    ],
+  };
+}
diff --git a/components/sidebar/nav-main.tsx b/components/sidebar/nav-main.tsx
new file mode 100644
index 0000000..ed108c0
--- /dev/null
+++ b/components/sidebar/nav-main.tsx
@@ -0,0 +1,203 @@
+"use client";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+} from "@/components/ui/sidebar";
+import { getAvatarSrc } from "@/lib/pagadores/utils";
+import {
+  RiArrowRightSLine,
+  RiStackshareLine,
+  type RemixiconComponentType,
+} from "@remixicon/react";
+import Link from "next/link";
+import { usePathname, useSearchParams } from "next/navigation";
+import * as React from "react";
+
+type NavItem = {
+  title: string;
+  url: string;
+  icon: RemixiconComponentType;
+  isActive?: boolean;
+  items?: {
+    title: string;
+    url: string;
+    avatarUrl?: string | null;
+    isShared?: boolean;
+    key?: string;
+  }[];
+};
+
+type NavSection = {
+  title: string;
+  items: NavItem[];
+};
+
+export function NavMain({ sections }: { sections: NavSection[] }) {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const periodParam = searchParams.get(MONTH_PERIOD_PARAM);
+
+  const isLinkActive = React.useCallback(
+    (url: string) => {
+      const normalizedPathname =
+        pathname.endsWith("/") && pathname !== "/"
+          ? pathname.slice(0, -1)
+          : pathname;
+      const normalizedUrl =
+        url.endsWith("/") && url !== "/" ? url.slice(0, -1) : url;
+
+      // Verifica se é exatamente igual ou se o pathname começa com a URL
+      return (
+        normalizedPathname === normalizedUrl ||
+        normalizedPathname.startsWith(normalizedUrl + "/")
+      );
+    },
+    [pathname]
+  );
+
+  const buildHrefWithPeriod = React.useCallback(
+    (url: string) => {
+      if (!periodParam) {
+        return url;
+      }
+
+      const [rawPathname, existingSearch = ""] = url.split("?");
+      const normalizedPathname =
+        rawPathname.endsWith("/") && rawPathname !== "/"
+          ? rawPathname.slice(0, -1)
+          : rawPathname;
+
+      if (!PERIOD_AWARE_PATHS.has(normalizedPathname)) {
+        return url;
+      }
+
+      const params = new URLSearchParams(existingSearch);
+      params.set(MONTH_PERIOD_PARAM, periodParam);
+
+      const queryString = params.toString();
+      return queryString
+        ? `${normalizedPathname}?${queryString}`
+        : normalizedPathname;
+    },
+    [periodParam]
+  );
+
+  const activeLinkClasses =
+    "data-[active=true]:bg-dark! shadow-md data-[active=true]:text-dark-foreground! hover:bg-primary/10! hover:text-primary!";
+
+  return (
+    <>
+      {sections.map((section) => (
+        <SidebarGroup key={section.title}>
+          <SidebarGroupLabel>{section.title}</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {section.items.map((item) => {
+                const itemIsActive = isLinkActive(item.url);
+                return (
+                  <Collapsible key={item.title} asChild>
+                    <SidebarMenuItem>
+                      <SidebarMenuButton
+                        asChild
+                        tooltip={item.title}
+                        isActive={itemIsActive}
+                        className={itemIsActive ? activeLinkClasses : ""}
+                      >
+                        <Link prefetch href={buildHrefWithPeriod(item.url)}>
+                          <item.icon className="h-4 w-4" />
+                          <span className="lowercase">{item.title}</span>
+                        </Link>
+                      </SidebarMenuButton>
+                      {item.items?.length ? (
+                        <>
+                          <CollapsibleTrigger asChild>
+                            <SidebarMenuAction className="data-[state=open]:rotate-90 text-foreground px-2 trasition-transform duration-200">
+                              <RiArrowRightSLine />
+                              <span className="sr-only">Toggle</span>
+                            </SidebarMenuAction>
+                          </CollapsibleTrigger>
+                          <CollapsibleContent>
+                            <SidebarMenuSub>
+                              {item.items?.map((subItem) => {
+                                const subItemIsActive = isLinkActive(
+                                  subItem.url
+                                );
+                                const avatarSrc = getAvatarSrc(
+                                  subItem.avatarUrl
+                                );
+                                const initial =
+                                  subItem.title.charAt(0).toUpperCase() || "?";
+                                return (
+                                  <SidebarMenuSubItem
+                                    key={subItem.key ?? subItem.title}
+                                  >
+                                    <SidebarMenuSubButton
+                                      asChild
+                                      isActive={subItemIsActive}
+                                      className={
+                                        subItemIsActive ? activeLinkClasses : ""
+                                      }
+                                    >
+                                      <Link
+                                        prefetch
+                                        href={buildHrefWithPeriod(subItem.url)}
+                                        className="flex items-center gap-2"
+                                      >
+                                        {subItem.avatarUrl !== undefined ? (
+                                          <Avatar className="size-5 border border-border/60 bg-background">
+                                            <AvatarImage
+                                              src={avatarSrc}
+                                              alt={`Avatar de ${subItem.title}`}
+                                            />
+                                            <AvatarFallback className="text-[10px] font-medium uppercase">
+                                              {initial}
+                                            </AvatarFallback>
+                                          </Avatar>
+                                        ) : null}
+                                        <span>{subItem.title}</span>
+                                        {subItem.isShared ? (
+                                          <RiStackshareLine className="size-3.5 text-muted-foreground" />
+                                        ) : null}
+                                      </Link>
+                                    </SidebarMenuSubButton>
+                                  </SidebarMenuSubItem>
+                                );
+                              })}
+                            </SidebarMenuSub>
+                          </CollapsibleContent>
+                        </>
+                      ) : null}
+                    </SidebarMenuItem>
+                  </Collapsible>
+                );
+              })}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      ))}
+    </>
+  );
+}
+
+const MONTH_PERIOD_PARAM = "periodo";
+
+const PERIOD_AWARE_PATHS = new Set([
+  "/dashboard",
+  "/lancamentos",
+  "/orcamentos",
+]);
diff --git a/components/sidebar/nav-secondary.tsx b/components/sidebar/nav-secondary.tsx
new file mode 100644
index 0000000..6385f97
--- /dev/null
+++ b/components/sidebar/nav-secondary.tsx
@@ -0,0 +1,75 @@
+"use client";
+
+import type { RemixiconComponentType } from "@remixicon/react";
+import { usePathname } from "next/navigation";
+import * as React from "react";
+
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/components/ui/sidebar";
+import Link from "next/link";
+
+export function NavSecondary({
+  items,
+  ...props
+}: {
+  items: {
+    title: string;
+    url: string;
+    icon: RemixiconComponentType;
+  }[];
+} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {
+  const pathname = usePathname();
+
+  const isLinkActive = React.useCallback(
+    (url: string) => {
+      const normalizedPathname =
+        pathname.endsWith("/") && pathname !== "/"
+          ? pathname.slice(0, -1)
+          : pathname;
+      const normalizedUrl =
+        url.endsWith("/") && url !== "/" ? url.slice(0, -1) : url;
+
+      // Verifica se é exatamente igual ou se o pathname começa com a URL
+      return (
+        normalizedPathname === normalizedUrl ||
+        normalizedPathname.startsWith(normalizedUrl + "/")
+      );
+    },
+    [pathname]
+  );
+
+  return (
+    <SidebarGroup {...props}>
+      <SidebarGroupContent>
+        <SidebarMenu>
+          {items.map((item) => {
+            const itemIsActive = isLinkActive(item.url);
+            return (
+              <SidebarMenuItem key={item.title}>
+                <SidebarMenuButton
+                  asChild
+                  isActive={itemIsActive}
+                  className={
+                    itemIsActive
+                      ? "data-[active=true]:bg-dark! shadow-md data-[active=true]:text-dark-foreground! hover:bg-primary/10! hover:text-primary!"
+                      : ""
+                  }
+                >
+                  <Link prefetch href={item.url}>
+                    <item.icon className="h-4 w-4" />
+                    <span>{item.title}</span>
+                  </Link>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            );
+          })}
+        </SidebarMenu>
+      </SidebarGroupContent>
+    </SidebarGroup>
+  );
+}
diff --git a/components/sidebar/nav-user.tsx b/components/sidebar/nav-user.tsx
new file mode 100644
index 0000000..dd6d08f
--- /dev/null
+++ b/components/sidebar/nav-user.tsx
@@ -0,0 +1,58 @@
+"use client";
+
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/components/ui/sidebar";
+import { getAvatarSrc } from "@/lib/pagadores/utils";
+import Image from "next/image";
+import { useMemo } from "react";
+
+type NavUserProps = {
+  user: {
+    id: string;
+    name: string;
+    email: string;
+    image: string | null;
+  };
+  pagadorAvatarUrl: string | null;
+};
+
+export function NavUser({ user, pagadorAvatarUrl }: NavUserProps) {
+  useSidebar();
+
+  // Lógica de fallback: user.image (Google) > pagador avatar > default
+  const avatarSrc = useMemo(() => {
+    if (user.image) {
+      return user.image;
+    }
+    return getAvatarSrc(pagadorAvatarUrl);
+  }, [user.image, pagadorAvatarUrl]);
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <SidebarMenuButton
+          size="lg"
+          className="data-popup-open:bg-sidebar-accent data-popup-open:text-sidebar-accent-foreground "
+        >
+          <Image
+            src={avatarSrc}
+            alt={user.name}
+            width={32}
+            height={32}
+            className="size-8 shrink-0 rounded-full object-cover"
+          />
+          <div className="grid flex-1 text-left text-sm leading-tight">
+            <span className="truncate font-medium">{user.name}</span>
+            <span className="text-muted-foreground truncate text-xs">
+              {user.email}
+            </span>
+          </div>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+}
diff --git a/components/skeletons/account-statement-card-skeleton.tsx b/components/skeletons/account-statement-card-skeleton.tsx
new file mode 100644
index 0000000..7d7378d
--- /dev/null
+++ b/components/skeletons/account-statement-card-skeleton.tsx
@@ -0,0 +1,43 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+/**
+ * Skeleton para o card de resumo da conta (AccountStatementCard)
+ * Reflete fielmente o layout: logo + nome + tipo + badge + métricas
+ */
+export function AccountStatementCardSkeleton() {
+  return (
+    <div className="rounded-2xl border p-6 space-y-6">
+      {/* Header com logo, nome, tipo e badge */}
+      <div className="flex items-start justify-between">
+        <div className="flex items-start gap-4">
+          {/* Logo */}
+          <Skeleton className="size-12 rounded-2xl bg-foreground/10" />
+
+          <div className="space-y-2">
+            {/* Nome da conta */}
+            <Skeleton className="h-6 w-48 rounded-2xl bg-foreground/10" />
+            {/* Tipo de conta */}
+            <Skeleton className="h-4 w-32 rounded-2xl bg-foreground/10" />
+          </div>
+        </div>
+
+        <div className="flex items-center gap-2">
+          {/* Badge de status */}
+          <Skeleton className="h-6 w-16 rounded-2xl bg-foreground/10" />
+          {/* Botão de editar */}
+          <Skeleton className="size-8 rounded-2xl bg-foreground/10" />
+        </div>
+      </div>
+
+      {/* Métricas em grid */}
+      <div className="grid grid-cols-2 gap-4 pt-4 border-t md:grid-cols-4">
+        {Array.from({ length: 4 }).map((_, i) => (
+          <div key={i} className="space-y-2">
+            <Skeleton className="h-4 w-24 rounded-2xl bg-foreground/10" />
+            <Skeleton className="h-6 w-32 rounded-2xl bg-foreground/10" />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/components/skeletons/dashboard-grid-skeleton.tsx b/components/skeletons/dashboard-grid-skeleton.tsx
new file mode 100644
index 0000000..2db69e1
--- /dev/null
+++ b/components/skeletons/dashboard-grid-skeleton.tsx
@@ -0,0 +1,22 @@
+import { SectionCardsSkeleton } from "./section-cards-skeleton";
+import { WidgetSkeleton } from "./widget-skeleton";
+
+/**
+ * Skeleton completo para o dashboard grid
+ * Mantém a mesma estrutura de layout do dashboard real
+ */
+export function DashboardGridSkeleton() {
+  return (
+    <div className="@container/main space-y-4">
+      {/* Section Cards no topo */}
+      <SectionCardsSkeleton />
+
+      {/* Grid de widgets */}
+      <div className="grid grid-cols-1 gap-4 @3xl/main:grid-cols-2 @7xl/main:grid-cols-3">
+        {Array.from({ length: 12 }).map((_, i) => (
+          <WidgetSkeleton key={i} />
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/components/skeletons/filter-skeleton.tsx b/components/skeletons/filter-skeleton.tsx
new file mode 100644
index 0000000..5a10ee3
--- /dev/null
+++ b/components/skeletons/filter-skeleton.tsx
@@ -0,0 +1,20 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+/**
+ * Skeleton para os filtros de lançamentos
+ * Mantém o layout horizontal com múltiplos selects
+ */
+export function FilterSkeleton() {
+  return (
+    <div className="flex flex-wrap items-center gap-2">
+      {Array.from({ length: 6 }).map((_, i) => (
+        <Skeleton
+          key={i}
+          className="h-10 w-[130px] rounded-2xl bg-foreground/10"
+        />
+      ))}
+      <Skeleton className="h-10 w-[150px] rounded-2xl bg-foreground/10" />
+      <Skeleton className="h-8 w-16 rounded-2xl bg-foreground/10" />
+    </div>
+  );
+}
diff --git a/components/skeletons/index.ts b/components/skeletons/index.ts
new file mode 100644
index 0000000..ce6fde8
--- /dev/null
+++ b/components/skeletons/index.ts
@@ -0,0 +1,11 @@
+/**
+ * Barrel export para todos os skeletons
+ * Facilita a importação em outros componentes
+ */
+export { AccountStatementCardSkeleton } from "./account-statement-card-skeleton";
+export { DashboardGridSkeleton } from "./dashboard-grid-skeleton";
+export { FilterSkeleton } from "./filter-skeleton";
+export { InvoiceSummaryCardSkeleton } from "./invoice-summary-card-skeleton";
+export { SectionCardsSkeleton } from "./section-cards-skeleton";
+export { TransactionsTableSkeleton } from "./transactions-table-skeleton";
+export { WidgetSkeleton } from "./widget-skeleton";
diff --git a/components/skeletons/invoice-summary-card-skeleton.tsx b/components/skeletons/invoice-summary-card-skeleton.tsx
new file mode 100644
index 0000000..a4ed87b
--- /dev/null
+++ b/components/skeletons/invoice-summary-card-skeleton.tsx
@@ -0,0 +1,64 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+/**
+ * Skeleton para o card de resumo da fatura (InvoiceSummaryCard)
+ * Reflete fielmente o layout: logo + nome + bandeira + badges + total + limite + ações
+ */
+export function InvoiceSummaryCardSkeleton() {
+  return (
+    <div className="rounded-2xl border p-6 space-y-6">
+      {/* Header com logo, nome, bandeira e badges */}
+      <div className="flex items-start justify-between">
+        <div className="flex items-start gap-4">
+          {/* Logo do cartão */}
+          <Skeleton className="size-12 rounded-2xl bg-foreground/10" />
+
+          <div className="space-y-2">
+            {/* Nome do cartão */}
+            <Skeleton className="h-6 w-48 rounded-2xl bg-foreground/10" />
+
+            <div className="flex items-center gap-2">
+              {/* Bandeira */}
+              <Skeleton className="h-4 w-20 rounded-2xl bg-foreground/10" />
+              {/* Badge de status */}
+              <Skeleton className="h-6 w-16 rounded-2xl bg-foreground/10" />
+            </div>
+          </div>
+        </div>
+
+        {/* Botão de editar */}
+        <Skeleton className="size-8 rounded-2xl bg-foreground/10" />
+      </div>
+
+      {/* Informações da fatura */}
+      <div className="space-y-4 pt-4 border-t">
+        {/* Período e status */}
+        <div className="flex items-center justify-between">
+          <Skeleton className="h-5 w-32 rounded-2xl bg-foreground/10" />
+          <Skeleton className="h-6 w-24 rounded-2xl bg-foreground/10" />
+        </div>
+
+        {/* Total da fatura */}
+        <div className="space-y-2">
+          <Skeleton className="h-4 w-28 rounded-2xl bg-foreground/10" />
+          <Skeleton className="h-8 w-40 rounded-2xl bg-foreground/10" />
+        </div>
+
+        {/* Limite e utilização */}
+        <div className="grid grid-cols-2 gap-4 pt-4">
+          <div className="space-y-2">
+            <Skeleton className="h-4 w-20 rounded-2xl bg-foreground/10" />
+            <Skeleton className="h-6 w-28 rounded-2xl bg-foreground/10" />
+          </div>
+          <div className="space-y-2">
+            <Skeleton className="h-4 w-24 rounded-2xl bg-foreground/10" />
+            <Skeleton className="h-6 w-28 rounded-2xl bg-foreground/10" />
+          </div>
+        </div>
+
+        {/* Botão de ação */}
+        <Skeleton className="h-10 w-full rounded-2xl bg-foreground/10" />
+      </div>
+    </div>
+  );
+}
diff --git a/components/skeletons/section-cards-skeleton.tsx b/components/skeletons/section-cards-skeleton.tsx
new file mode 100644
index 0000000..3643062
--- /dev/null
+++ b/components/skeletons/section-cards-skeleton.tsx
@@ -0,0 +1,37 @@
+import { Card, CardFooter, CardHeader } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+
+/**
+ * Skeleton fiel aos cards de métricas do dashboard (SectionCards)
+ * Mantém o mesmo layout de 4 colunas responsivo
+ */
+export function SectionCardsSkeleton() {
+  return (
+    <div className="*:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card grid grid-cols-1 gap-3 @xl/main:grid-cols-2 @5xl/main:grid-cols-4">
+      {Array.from({ length: 4 }).map((_, index) => (
+        <Card key={index} className="@container/card gap-2">
+          <CardHeader>
+            <div className="space-y-3">
+              {/* Título com ícone */}
+              <div className="flex items-center gap-1">
+                <Skeleton className="size-4 rounded-2xl bg-foreground/10" />
+                <Skeleton className="h-5 w-20 rounded-2xl bg-foreground/10" />
+              </div>
+
+              {/* Valor principal */}
+              <Skeleton className="h-8 w-32 rounded-2xl bg-foreground/10" />
+
+              {/* Badge de tendência */}
+              <Skeleton className="h-6 w-16 rounded-2xl bg-foreground/10" />
+            </div>
+          </CardHeader>
+
+          <CardFooter className="flex-col items-start gap-1.5 text-sm">
+            <Skeleton className="h-4 w-24 rounded-2xl bg-foreground/10" />
+            <Skeleton className="h-4 w-20 rounded-2xl bg-foreground/10" />
+          </CardFooter>
+        </Card>
+      ))}
+    </div>
+  );
+}
diff --git a/components/skeletons/transactions-table-skeleton.tsx b/components/skeletons/transactions-table-skeleton.tsx
new file mode 100644
index 0000000..67374d3
--- /dev/null
+++ b/components/skeletons/transactions-table-skeleton.tsx
@@ -0,0 +1,84 @@
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+
+/**
+ * Skeleton fiel à tabela de lançamentos
+ * Mantém a mesma estrutura de colunas
+ */
+export function TransactionsTableSkeleton() {
+  return (
+    <div className="rounded-2xl border">
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead className="w-[180px]">Nome</TableHead>
+            <TableHead className="w-[100px]">Data</TableHead>
+            <TableHead className="w-[120px]">Tipo</TableHead>
+            <TableHead className="w-[120px]">Valor</TableHead>
+            <TableHead className="w-[120px]">Condição</TableHead>
+            <TableHead className="w-[120px]">Pagamento</TableHead>
+            <TableHead className="w-[140px]">Pagador</TableHead>
+            <TableHead className="w-[140px]">Categoria</TableHead>
+            <TableHead className="w-[140px]">Conta/Cartão</TableHead>
+            <TableHead className="w-[80px]">Ações</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {Array.from({ length: 8 }).map((_, i) => (
+            <TableRow key={i}>
+              <TableCell>
+                <Skeleton className="h-4 w-full rounded-2xl bg-foreground/10" />
+              </TableCell>
+              <TableCell>
+                <Skeleton className="h-4 w-16 rounded-2xl bg-foreground/10" />
+              </TableCell>
+              <TableCell>
+                <Skeleton className="h-6 w-20 rounded-2xl bg-foreground/10" />
+              </TableCell>
+              <TableCell>
+                <Skeleton className="h-4 w-20 rounded-2xl bg-foreground/10" />
+              </TableCell>
+              <TableCell>
+                <Skeleton className="h-6 w-16 rounded-2xl bg-foreground/10" />
+              </TableCell>
+              <TableCell>
+                <Skeleton className="h-6 w-20 rounded-2xl bg-foreground/10" />
+              </TableCell>
+              <TableCell>
+                <div className="flex items-center gap-2">
+                  <Skeleton className="size-6 rounded-full bg-foreground/10" />
+                  <Skeleton className="h-4 w-16 rounded-2xl bg-foreground/10" />
+                </div>
+              </TableCell>
+              <TableCell>
+                <div className="flex items-center gap-2">
+                  <Skeleton className="size-4 rounded-2xl bg-foreground/10" />
+                  <Skeleton className="h-4 w-16 rounded-2xl bg-foreground/10" />
+                </div>
+              </TableCell>
+              <TableCell>
+                <div className="flex items-center gap-2">
+                  <Skeleton className="size-6 rounded-2xl bg-foreground/10" />
+                  <Skeleton className="h-4 w-20 rounded-2xl bg-foreground/10" />
+                </div>
+              </TableCell>
+              <TableCell>
+                <div className="flex gap-1">
+                  <Skeleton className="size-8 rounded-2xl bg-foreground/10" />
+                  <Skeleton className="size-8 rounded-2xl bg-foreground/10" />
+                </div>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}
diff --git a/components/skeletons/widget-skeleton.tsx b/components/skeletons/widget-skeleton.tsx
new file mode 100644
index 0000000..96edb95
--- /dev/null
+++ b/components/skeletons/widget-skeleton.tsx
@@ -0,0 +1,44 @@
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+
+/**
+ * Skeleton fiel ao WidgetCard
+ * Usado enquanto widgets do dashboard estão carregando
+ */
+export function WidgetSkeleton() {
+  return (
+    <Card className="md:h-custom-height-1 relative h-auto md:overflow-hidden">
+      <CardHeader className="border-b [.border-b]:pb-2">
+        <div className="flex w-full items-start justify-between">
+          <div className="space-y-2">
+            {/* Title com ícone */}
+            <div className="flex items-center gap-1">
+              <Skeleton className="size-4 rounded-2xl bg-foreground/10" />
+              <Skeleton className="h-5 w-32 rounded-2xl bg-foreground/10" />
+            </div>
+            {/* Subtitle */}
+            <Skeleton className="h-4 w-48 rounded-2xl bg-foreground/10" />
+          </div>
+        </div>
+      </CardHeader>
+
+      <CardContent className="max-h-[calc(var(--spacing-custom-height-1)-5rem)] overflow-hidden md:max-h-[calc(100%-5rem)]">
+        <div className="flex flex-col gap-3 py-4">
+          {/* Simula 5 linhas de conteúdo */}
+          {Array.from({ length: 5 }).map((_, i) => (
+            <div key={i} className="flex items-center justify-between gap-3">
+              <div className="flex flex-1 items-center gap-3">
+                <Skeleton className="size-10 rounded-2xl bg-foreground/10" />
+                <div className="flex-1 space-y-2">
+                  <Skeleton className="h-4 w-full rounded-2xl bg-foreground/10" />
+                  <Skeleton className="h-3 w-24 rounded-2xl bg-foreground/10" />
+                </div>
+              </div>
+              <Skeleton className="h-6 w-20 rounded-2xl bg-foreground/10" />
+            </div>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/components/theme-provider.tsx b/components/theme-provider.tsx
new file mode 100644
index 0000000..9618131
--- /dev/null
+++ b/components/theme-provider.tsx
@@ -0,0 +1,11 @@
+"use client";
+
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+import * as React from "react";
+
+export function ThemeProvider({
+  children,
+  ...props
+}: React.ComponentProps<typeof NextThemesProvider>) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+}
diff --git a/components/type-badge.tsx b/components/type-badge.tsx
new file mode 100644
index 0000000..40a717c
--- /dev/null
+++ b/components/type-badge.tsx
@@ -0,0 +1,58 @@
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils/ui";
+import DotIcon from "./dot-icon";
+
+type TypeBadgeType =
+  | "receita"
+  | "despesa"
+  | "Receita"
+  | "Despesa"
+  | "Transferência"
+  | "transferência";
+
+interface TypeBadgeProps {
+  type: TypeBadgeType;
+  className?: string;
+}
+
+const TYPE_LABELS: Record<string, string> = {
+  receita: "Receita",
+  despesa: "Despesa",
+  Receita: "Receita",
+  Despesa: "Despesa",
+  Transferência: "Transferência",
+  transferência: "Transferência",
+};
+
+export function TypeBadge({ type, className }: TypeBadgeProps) {
+  const normalizedType = type.toLowerCase();
+  const isReceita = normalizedType === "receita";
+  const isTransferencia = normalizedType === "transferência";
+  const label = TYPE_LABELS[type] || type;
+
+  const colorClass = isTransferencia
+    ? "text-blue-700 dark:text-blue-400"
+    : isReceita
+    ? "text-green-700  dark:text-green-400"
+    : "text-red-700 dark:text-red-400";
+
+  const dotColor = isTransferencia
+    ? "bg-blue-700 dark:bg-blue-400"
+    : isReceita
+    ? "bg-green-600 dark:bg-green-400"
+    : "bg-red-600 dark:bg-red-400";
+
+  return (
+    <Badge
+      variant={"outline"}
+      className={cn(
+        "flex items-center gap-1 px-2 text-xs",
+        colorClass,
+        className
+      )}
+    >
+      <DotIcon bg_dot={dotColor} />
+      {label}
+    </Badge>
+  );
+}
diff --git a/components/ui/alert-dialog.tsx b/components/ui/alert-dialog.tsx
new file mode 100644
index 0000000..64456a7
--- /dev/null
+++ b/components/ui/alert-dialog.tsx
@@ -0,0 +1,157 @@
+"use client"
+
+import * as React from "react"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+
+import { cn } from "@/lib/utils/ui"
+import { buttonVariants } from "@/components/ui/button"
+
+function AlertDialog({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
+}
+
+function AlertDialogTrigger({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  )
+}
+
+function AlertDialogPortal({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  )
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Content
+        data-slot="alert-dialog-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  )
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn("text-lg font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogAction({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
+  return (
+    <AlertDialogPrimitive.Action
+      className={cn(buttonVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogCancel({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
+  return (
+    <AlertDialogPrimitive.Cancel
+      className={cn(buttonVariants({ variant: "outline" }), className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+}
diff --git a/components/ui/alert.tsx b/components/ui/alert.tsx
new file mode 100644
index 0000000..d94343a
--- /dev/null
+++ b/components/ui/alert.tsx
@@ -0,0 +1,66 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils/ui"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription }
diff --git a/components/ui/avatar.tsx b/components/ui/avatar.tsx
new file mode 100644
index 0000000..2364a2d
--- /dev/null
+++ b/components/ui/avatar.tsx
@@ -0,0 +1,53 @@
+"use client"
+
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "@/lib/utils/ui"
+
+function Avatar({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      className={cn(
+        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn("aspect-square size-full", className)}
+      {...props}
+    />
+  )
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "bg-muted flex size-full items-center justify-center rounded-full",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Avatar, AvatarImage, AvatarFallback }
diff --git a/components/ui/badge.tsx b/components/ui/badge.tsx
new file mode 100644
index 0000000..247188e
--- /dev/null
+++ b/components/ui/badge.tsx
@@ -0,0 +1,50 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils/ui"
+
+const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+        success:
+          "border-transparent bg-green-500 text-white [a&]:hover:bg-green-600 dark:bg-green-600 dark:[a&]:hover:bg-green-700",
+        info:
+          "border-transparent bg-blue-500 text-white [a&]:hover:bg-blue-600 dark:bg-blue-600 dark:[a&]:hover:bg-blue-700",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }
diff --git a/components/ui/breadcrumb.tsx b/components/ui/breadcrumb.tsx
new file mode 100644
index 0000000..8f58fb7
--- /dev/null
+++ b/components/ui/breadcrumb.tsx
@@ -0,0 +1,109 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { ChevronRight, MoreHorizontal } from "lucide-react"
+
+import { cn } from "@/lib/utils/ui"
+
+function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
+  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />
+}
+
+function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
+  return (
+    <ol
+      data-slot="breadcrumb-list"
+      className={cn(
+        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-item"
+      className={cn("inline-flex items-center gap-1.5", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbLink({
+  asChild,
+  className,
+  ...props
+}: React.ComponentProps<"a"> & {
+  asChild?: boolean
+}) {
+  const Comp = asChild ? Slot : "a"
+
+  return (
+    <Comp
+      data-slot="breadcrumb-link"
+      className={cn("hover:text-foreground transition-colors", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-page"
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn("text-foreground font-normal", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-separator"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("[&>svg]:size-3.5", className)}
+      {...props}
+    >
+      {children ?? <ChevronRight />}
+    </li>
+  )
+}
+
+function BreadcrumbEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-ellipsis"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("flex size-9 items-center justify-center", className)}
+      {...props}
+    >
+      <MoreHorizontal className="size-4" />
+      <span className="sr-only">More</span>
+    </span>
+  )
+}
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+}
diff --git a/components/ui/button.tsx b/components/ui/button.tsx
new file mode 100644
index 0000000..2a3ca09
--- /dev/null
+++ b/components/ui/button.tsx
@@ -0,0 +1,60 @@
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+import { cn } from "@/lib/utils/ui";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:scale-105 transition-transform",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+  }) {
+  const Comp = asChild ? Slot : "button";
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+export { Button, buttonVariants };
diff --git a/components/ui/calendar.tsx b/components/ui/calendar.tsx
new file mode 100644
index 0000000..6c41007
--- /dev/null
+++ b/components/ui/calendar.tsx
@@ -0,0 +1,216 @@
+"use client"
+
+import * as React from "react"
+import {
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+} from "lucide-react"
+import { DayButton, DayPicker, getDefaultClassNames } from "react-day-picker"
+
+import { cn } from "@/lib/utils/ui"
+import { Button, buttonVariants } from "@/components/ui/button"
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  captionLayout = "label",
+  buttonVariant = "ghost",
+  formatters,
+  components,
+  ...props
+}: React.ComponentProps<typeof DayPicker> & {
+  buttonVariant?: React.ComponentProps<typeof Button>["variant"]
+}) {
+  const defaultClassNames = getDefaultClassNames()
+
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn(
+        "bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+        className
+      )}
+      captionLayout={captionLayout}
+      formatters={{
+        formatMonthDropdown: (date) =>
+          date.toLocaleString("default", { month: "short" }),
+        ...formatters,
+      }}
+      classNames={{
+        root: cn("w-fit", defaultClassNames.root),
+        months: cn(
+          "flex gap-4 flex-col md:flex-row relative",
+          defaultClassNames.months
+        ),
+        month: cn("flex flex-col w-full gap-4", defaultClassNames.month),
+        nav: cn(
+          "flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between",
+          defaultClassNames.nav
+        ),
+        button_previous: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+          defaultClassNames.button_previous
+        ),
+        button_next: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+          defaultClassNames.button_next
+        ),
+        month_caption: cn(
+          "flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)",
+          defaultClassNames.month_caption
+        ),
+        dropdowns: cn(
+          "w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5",
+          defaultClassNames.dropdowns
+        ),
+        dropdown_root: cn(
+          "relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md",
+          defaultClassNames.dropdown_root
+        ),
+        dropdown: cn(
+          "absolute bg-popover inset-0 opacity-0",
+          defaultClassNames.dropdown
+        ),
+        caption_label: cn(
+          "select-none font-medium",
+          captionLayout === "label"
+            ? "text-sm"
+            : "rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5",
+          defaultClassNames.caption_label
+        ),
+        table: "w-full border-collapse",
+        weekdays: cn("flex", defaultClassNames.weekdays),
+        weekday: cn(
+          "text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none",
+          defaultClassNames.weekday
+        ),
+        week: cn("flex w-full mt-2", defaultClassNames.week),
+        week_number_header: cn(
+          "select-none w-(--cell-size)",
+          defaultClassNames.week_number_header
+        ),
+        week_number: cn(
+          "text-[0.8rem] select-none text-muted-foreground",
+          defaultClassNames.week_number
+        ),
+        day: cn(
+          "relative w-full h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none",
+          props.showWeekNumber
+            ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-md"
+            : "[&:first-child[data-selected=true]_button]:rounded-l-md",
+          defaultClassNames.day
+        ),
+        range_start: cn(
+          "rounded-l-md bg-accent",
+          defaultClassNames.range_start
+        ),
+        range_middle: cn("rounded-none", defaultClassNames.range_middle),
+        range_end: cn("rounded-r-md bg-accent", defaultClassNames.range_end),
+        today: cn(
+          "bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
+          defaultClassNames.today
+        ),
+        outside: cn(
+          "text-muted-foreground aria-selected:text-muted-foreground",
+          defaultClassNames.outside
+        ),
+        disabled: cn(
+          "text-muted-foreground opacity-50",
+          defaultClassNames.disabled
+        ),
+        hidden: cn("invisible", defaultClassNames.hidden),
+        ...classNames,
+      }}
+      components={{
+        Root: ({ className, rootRef, ...props }) => {
+          return (
+            <div
+              data-slot="calendar"
+              ref={rootRef}
+              className={cn(className)}
+              {...props}
+            />
+          )
+        },
+        Chevron: ({ className, orientation, ...props }) => {
+          if (orientation === "left") {
+            return (
+              <ChevronLeftIcon className={cn("size-4", className)} {...props} />
+            )
+          }
+
+          if (orientation === "right") {
+            return (
+              <ChevronRightIcon
+                className={cn("size-4", className)}
+                {...props}
+              />
+            )
+          }
+
+          return (
+            <ChevronDownIcon className={cn("size-4", className)} {...props} />
+          )
+        },
+        DayButton: CalendarDayButton,
+        WeekNumber: ({ children, ...props }) => {
+          return (
+            <td {...props}>
+              <div className="flex size-(--cell-size) items-center justify-center text-center">
+                {children}
+              </div>
+            </td>
+          )
+        },
+        ...components,
+      }}
+      {...props}
+    />
+  )
+}
+
+function CalendarDayButton({
+  className,
+  day,
+  modifiers,
+  ...props
+}: React.ComponentProps<typeof DayButton>) {
+  const defaultClassNames = getDefaultClassNames()
+
+  const ref = React.useRef<HTMLButtonElement>(null)
+  React.useEffect(() => {
+    if (modifiers.focused) ref.current?.focus()
+  }, [modifiers.focused])
+
+  return (
+    <Button
+      ref={ref}
+      variant="ghost"
+      size="icon"
+      data-day={day.date.toLocaleDateString()}
+      data-selected-single={
+        modifiers.selected &&
+        !modifiers.range_start &&
+        !modifiers.range_end &&
+        !modifiers.range_middle
+      }
+      data-range-start={modifiers.range_start}
+      data-range-end={modifiers.range_end}
+      data-range-middle={modifiers.range_middle}
+      className={cn(
+        "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70",
+        defaultClassNames.day,
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Calendar, CalendarDayButton }
diff --git a/components/ui/card.tsx b/components/ui/card.tsx
new file mode 100644
index 0000000..54ceb9a
--- /dev/null
+++ b/components/ui/card.tsx
@@ -0,0 +1,92 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils/ui";
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 border drop-shadow-xs py-6 rounded-md hover:border-primary/50 transition-colors",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  );
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  );
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+};
diff --git a/components/ui/chart.tsx b/components/ui/chart.tsx
new file mode 100644
index 0000000..98ce46a
--- /dev/null
+++ b/components/ui/chart.tsx
@@ -0,0 +1,361 @@
+"use client"
+
+import * as React from "react"
+import * as RechartsPrimitive from "recharts"
+
+import { cn } from "@/lib/utils/ui"
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: "", dark: ".dark" } as const
+
+export type ChartConfig = {
+  [k in string]: {
+    label?: React.ReactNode
+    icon?: React.ComponentType
+  } & (
+    | { color?: string; theme?: never }
+    | { color?: never; theme: Record<keyof typeof THEMES, string> }
+  )
+}
+
+type ChartContextProps = {
+  config: ChartConfig
+}
+
+const ChartContext = React.createContext<ChartContextProps | null>(null)
+
+function useChart() {
+  const context = React.useContext(ChartContext)
+
+  if (!context) {
+    throw new Error("useChart must be used within a <ChartContainer />")
+  }
+
+  return context
+}
+
+function ChartContainer({
+  id,
+  className,
+  children,
+  config,
+  style,
+  ...props
+}: React.ComponentProps<"div"> & {
+  config: ChartConfig
+  children: React.ComponentProps<
+    typeof RechartsPrimitive.ResponsiveContainer
+  >["children"]
+}) {
+  const uniqueId = React.useId()
+  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`
+
+  return (
+    <ChartContext.Provider value={{ config }}>
+      <div
+        data-slot="chart"
+        data-chart={chartId}
+        style={{ minWidth: 0, minHeight: 0, ...style }}
+        className={cn(
+          "flex w-full min-h-0 min-w-0 justify-center text-xs aspect-video [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
+          className
+        )}
+        {...props}
+      >
+        <ChartStyle id={chartId} config={config} />
+        <div className="h-full w-full">
+          <RechartsPrimitive.ResponsiveContainer width="100%" height="100%">
+            {children}
+          </RechartsPrimitive.ResponsiveContainer>
+        </div>
+      </div>
+    </ChartContext.Provider>
+  )
+}
+
+const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+  const colorConfig = Object.entries(config).filter(
+    ([, config]) => config.theme || config.color
+  )
+
+  if (!colorConfig.length) {
+    return null
+  }
+
+  return (
+    <style
+      dangerouslySetInnerHTML={{
+        __html: Object.entries(THEMES)
+          .map(
+            ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+  .map(([key, itemConfig]) => {
+    const color =
+      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
+      itemConfig.color
+    return color ? `  --color-${key}: ${color};` : null
+  })
+  .join("\n")}
+}
+`
+          )
+          .join("\n"),
+      }}
+    />
+  )
+}
+
+const ChartTooltip = RechartsPrimitive.Tooltip
+
+function ChartTooltipContent({
+  active,
+  payload,
+  className,
+  indicator = "dot",
+  hideLabel = false,
+  hideIndicator = false,
+  label,
+  labelFormatter,
+  labelClassName,
+  formatter,
+  color,
+  nameKey,
+  labelKey,
+}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
+  React.ComponentProps<"div"> & {
+    hideLabel?: boolean
+    hideIndicator?: boolean
+    indicator?: "line" | "dot" | "dashed"
+    nameKey?: string
+    labelKey?: string
+  }) {
+  const { config } = useChart()
+
+  const tooltipLabel = React.useMemo(() => {
+    if (hideLabel || !payload?.length) {
+      return null
+    }
+
+    const [item] = payload
+    const key = `${labelKey || item?.dataKey || item?.name || "value"}`
+    const itemConfig = getPayloadConfigFromPayload(config, item, key)
+    const value =
+      !labelKey && typeof label === "string"
+        ? config[label as keyof typeof config]?.label || label
+        : itemConfig?.label
+
+    if (labelFormatter) {
+      return (
+        <div className={cn("font-medium", labelClassName)}>
+          {labelFormatter(value, payload)}
+        </div>
+      )
+    }
+
+    if (!value) {
+      return null
+    }
+
+    return <div className={cn("font-medium", labelClassName)}>{value}</div>
+  }, [
+    label,
+    labelFormatter,
+    payload,
+    hideLabel,
+    labelClassName,
+    config,
+    labelKey,
+  ])
+
+  if (!active || !payload?.length) {
+    return null
+  }
+
+  const nestLabel = payload.length === 1 && indicator !== "dot"
+
+  return (
+    <div
+      className={cn(
+        "border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
+        className
+      )}
+    >
+      {!nestLabel ? tooltipLabel : null}
+      <div className="grid gap-1.5">
+        {payload
+          .filter((item) => item.type !== "none")
+          .map((item, index) => {
+            const key = `${nameKey || item.name || item.dataKey || "value"}`
+            const itemConfig = getPayloadConfigFromPayload(config, item, key)
+            const indicatorColor = color || item.payload.fill || item.color
+
+            return (
+              <div
+                key={item.dataKey}
+                className={cn(
+                  "[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
+                  indicator === "dot" && "items-center"
+                )}
+              >
+                {formatter && item?.value !== undefined && item.name ? (
+                  formatter(item.value, item.name, item, index, item.payload)
+                ) : (
+                  <>
+                    {itemConfig?.icon ? (
+                      <itemConfig.icon />
+                    ) : (
+                      !hideIndicator && (
+                        <div
+                          className={cn(
+                            "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
+                            {
+                              "h-2.5 w-2.5": indicator === "dot",
+                              "w-1": indicator === "line",
+                              "w-0 border-[1.5px] border-dashed bg-transparent":
+                                indicator === "dashed",
+                              "my-0.5": nestLabel && indicator === "dashed",
+                            }
+                          )}
+                          style={
+                            {
+                              "--color-bg": indicatorColor,
+                              "--color-border": indicatorColor,
+                            } as React.CSSProperties
+                          }
+                        />
+                      )
+                    )}
+                    <div
+                      className={cn(
+                        "flex flex-1 justify-between leading-none",
+                        nestLabel ? "items-end" : "items-center"
+                      )}
+                    >
+                      <div className="grid gap-1.5">
+                        {nestLabel ? tooltipLabel : null}
+                        <span className="text-muted-foreground">
+                          {itemConfig?.label || item.name}
+                        </span>
+                      </div>
+                      {item.value && (
+                        <span className="text-foreground font-mono font-medium tabular-nums">
+                          {item.value.toLocaleString()}
+                        </span>
+                      )}
+                    </div>
+                  </>
+                )}
+              </div>
+            )
+          })}
+      </div>
+    </div>
+  )
+}
+
+const ChartLegend = RechartsPrimitive.Legend
+
+function ChartLegendContent({
+  className,
+  hideIcon = false,
+  payload,
+  verticalAlign = "bottom",
+  nameKey,
+}: React.ComponentProps<"div"> &
+  Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
+    hideIcon?: boolean
+    nameKey?: string
+  }) {
+  const { config } = useChart()
+
+  if (!payload?.length) {
+    return null
+  }
+
+  return (
+    <div
+      className={cn(
+        "flex items-center justify-center gap-4",
+        verticalAlign === "top" ? "pb-3" : "pt-3",
+        className
+      )}
+    >
+      {payload
+        .filter((item) => item.type !== "none")
+        .map((item) => {
+          const key = `${nameKey || item.dataKey || "value"}`
+          const itemConfig = getPayloadConfigFromPayload(config, item, key)
+
+          return (
+            <div
+              key={item.value}
+              className={cn(
+                "[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3"
+              )}
+            >
+              {itemConfig?.icon && !hideIcon ? (
+                <itemConfig.icon />
+              ) : (
+                <div
+                  className="h-2 w-2 shrink-0 rounded-[2px]"
+                  style={{
+                    backgroundColor: item.color,
+                  }}
+                />
+              )}
+              {itemConfig?.label}
+            </div>
+          )
+        })}
+    </div>
+  )
+}
+
+// Helper to extract item config from a payload.
+function getPayloadConfigFromPayload(
+  config: ChartConfig,
+  payload: unknown,
+  key: string
+) {
+  if (typeof payload !== "object" || payload === null) {
+    return undefined
+  }
+
+  const payloadPayload =
+    "payload" in payload &&
+    typeof payload.payload === "object" &&
+    payload.payload !== null
+      ? payload.payload
+      : undefined
+
+  let configLabelKey: string = key
+
+  if (
+    key in payload &&
+    typeof payload[key as keyof typeof payload] === "string"
+  ) {
+    configLabelKey = payload[key as keyof typeof payload] as string
+  } else if (
+    payloadPayload &&
+    key in payloadPayload &&
+    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
+  ) {
+    configLabelKey = payloadPayload[
+      key as keyof typeof payloadPayload
+    ] as string
+  }
+
+  return configLabelKey in config
+    ? config[configLabelKey]
+    : config[key as keyof typeof config]
+}
+
+export {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  ChartLegend,
+  ChartLegendContent,
+  ChartStyle,
+}
diff --git a/components/ui/checkbox.tsx b/components/ui/checkbox.tsx
new file mode 100644
index 0000000..fd708cf
--- /dev/null
+++ b/components/ui/checkbox.tsx
@@ -0,0 +1,32 @@
+"use client"
+
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { CheckIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils/ui"
+
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="grid place-content-center text-current transition-none"
+      >
+        <CheckIcon className="size-3.5" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export { Checkbox }
diff --git a/components/ui/collapsible.tsx b/components/ui/collapsible.tsx
new file mode 100644
index 0000000..90935c6
--- /dev/null
+++ b/components/ui/collapsible.tsx
@@ -0,0 +1,33 @@
+"use client";
+
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+
+function Collapsible({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />;
+}
+
+function CollapsibleTrigger({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleTrigger
+      data-slot="collapsible-trigger"
+      {...props}
+    />
+  );
+}
+
+function CollapsibleContent({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleContent
+      data-slot="collapsible-content"
+      {...props}
+    />
+  );
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };
diff --git a/components/ui/command.tsx b/components/ui/command.tsx
new file mode 100644
index 0000000..d3882ad
--- /dev/null
+++ b/components/ui/command.tsx
@@ -0,0 +1,184 @@
+"use client"
+
+import * as React from "react"
+import { Command as CommandPrimitive } from "cmdk"
+import { SearchIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils/ui"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+
+function Command({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive>) {
+  return (
+    <CommandPrimitive
+      data-slot="command"
+      className={cn(
+        "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandDialog({
+  title = "Command Palette",
+  description = "Search for a command to run...",
+  children,
+  className,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof Dialog> & {
+  title?: string
+  description?: string
+  className?: string
+  showCloseButton?: boolean
+}) {
+  return (
+    <Dialog {...props}>
+      <DialogHeader className="sr-only">
+        <DialogTitle>{title}</DialogTitle>
+        <DialogDescription>{description}</DialogDescription>
+      </DialogHeader>
+      <DialogContent
+        className={cn("overflow-hidden p-0", className)}
+        showCloseButton={showCloseButton}
+      >
+        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+function CommandInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+  return (
+    <div
+      data-slot="command-input-wrapper"
+      className="flex h-9 items-center gap-2 border-b px-3"
+    >
+      <SearchIcon className="size-4 shrink-0 opacity-50" />
+      <CommandPrimitive.Input
+        data-slot="command-input"
+        className={cn(
+          "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function CommandList({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.List>) {
+  return (
+    <CommandPrimitive.List
+      data-slot="command-list"
+      className={cn(
+        "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandEmpty({
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+  return (
+    <CommandPrimitive.Empty
+      data-slot="command-empty"
+      className="py-6 text-center text-sm"
+      {...props}
+    />
+  )
+}
+
+function CommandGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Group>) {
+  return (
+    <CommandPrimitive.Group
+      data-slot="command-group"
+      className={cn(
+        "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+  return (
+    <CommandPrimitive.Separator
+      data-slot="command-separator"
+      className={cn("bg-border -mx-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function CommandItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Item>) {
+  return (
+    <CommandPrimitive.Item
+      data-slot="command-item"
+      className={cn(
+        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="command-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+}
diff --git a/components/ui/currency-input.tsx b/components/ui/currency-input.tsx
new file mode 100644
index 0000000..1d1ea2e
--- /dev/null
+++ b/components/ui/currency-input.tsx
@@ -0,0 +1,105 @@
+"use client";
+
+import * as React from "react";
+
+import { cn } from "@/lib/utils/ui";
+import { Input } from "./input";
+
+const BRL_FORMATTER = new Intl.NumberFormat("pt-BR", {
+  style: "currency",
+  currency: "BRL",
+  minimumFractionDigits: 2,
+  maximumFractionDigits: 2,
+});
+
+const digitsToDecimalString = (digits: string) => {
+  const sanitized = digits.replace(/\D/g, "");
+  if (sanitized.length === 0) {
+    return "";
+  }
+
+  const padded = sanitized.padStart(3, "0");
+  const integerPart = padded.slice(0, -2).replace(/^0+(?=\d)/, "") || "0";
+  const fractionPart = padded.slice(-2);
+
+  return `${integerPart}.${fractionPart}`;
+};
+
+const decimalToDigits = (value: string | undefined | null) => {
+  if (!value) {
+    return "";
+  }
+
+  const normalized = value.toString().replace(/\s/g, "").replace(",", ".");
+  const numeric = Number(normalized);
+
+  if (Number.isNaN(numeric)) {
+    return "";
+  }
+
+  const cents = Math.round(Math.abs(numeric) * 100);
+  return cents === 0 ? "0" : cents.toString();
+};
+
+const formatDigits = (digits: string) => {
+  if (digits.length === 0) {
+    return "";
+  }
+
+  const decimal = digitsToDecimalString(digits);
+  const numeric = Number(decimal);
+
+  if (Number.isNaN(numeric)) {
+    return "";
+  }
+
+  return BRL_FORMATTER.format(numeric);
+};
+
+export interface CurrencyInputProps
+  extends Omit<
+    React.ComponentProps<typeof Input>,
+    "value" | "defaultValue" | "type" | "inputMode" | "onChange"
+  > {
+  value: string;
+  onValueChange: (value: string) => void;
+}
+
+export const CurrencyInput = React.forwardRef<
+  HTMLInputElement,
+  CurrencyInputProps
+>(({ className, value, onValueChange, onBlur, onChange, ...props }, ref) => {
+  const digits = React.useMemo(() => decimalToDigits(value), [value]);
+  const displayValue = React.useMemo(() => formatDigits(digits), [digits]);
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const rawValue = event.target.value;
+    const nextDigits = rawValue.replace(/\D/g, "");
+
+    if (nextDigits.length === 0) {
+      onValueChange("");
+    } else {
+      onValueChange(digitsToDecimalString(nextDigits));
+    }
+
+    onChange?.(event);
+  };
+
+  return (
+    <Input
+      {...props}
+      ref={ref}
+      type="text"
+      inputMode="decimal"
+      value={displayValue}
+      onChange={handleChange}
+      onBlur={onBlur}
+      className={cn(
+        "text-left font-medium tabular-nums tracking-tight",
+        className
+      )}
+    />
+  );
+});
+
+CurrencyInput.displayName = "CurrencyInput";
diff --git a/components/ui/date-picker.tsx b/components/ui/date-picker.tsx
new file mode 100644
index 0000000..0966540
--- /dev/null
+++ b/components/ui/date-picker.tsx
@@ -0,0 +1,193 @@
+"use client";
+
+import * as React from "react";
+import { RiCalendarLine } from "@remixicon/react";
+
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import { Input } from "@/components/ui/input";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { cn } from "@/lib/utils/ui";
+
+function formatDate(date: Date | undefined): string {
+  if (!date) {
+    return "";
+  }
+
+  return date.toLocaleDateString("pt-BR", {
+    day: "2-digit",
+    month: "long",
+    year: "numeric",
+  });
+}
+
+function isValidDate(date: Date | undefined): boolean {
+  if (!date) {
+    return false;
+  }
+  return !isNaN(date.getTime());
+}
+
+function dateToYYYYMMDD(date: Date | undefined): string {
+  if (!date || !isValidDate(date)) {
+    return "";
+  }
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+  return `${year}-${month}-${day}`;
+}
+
+function parseYYYYMMDD(dateString: string): Date | undefined {
+  if (!dateString) {
+    return undefined;
+  }
+
+  // Tenta formato YYYY-MM-DD primeiro
+  const ymdMatch = dateString.match(/^(\d{4})-(\d{2})-(\d{2})$/);
+  if (ymdMatch) {
+    const [, year, month, day] = ymdMatch;
+    const date = new Date(Number(year), Number(month) - 1, Number(day));
+    return isValidDate(date) ? date : undefined;
+  }
+
+  // Fallback para Date parser nativo
+  const date = new Date(dateString);
+  return isValidDate(date) ? date : undefined;
+}
+
+export interface DatePickerProps {
+  id?: string;
+  value?: string;
+  onChange?: (value: string) => void;
+  placeholder?: string;
+  required?: boolean;
+  disabled?: boolean;
+  className?: string;
+}
+
+export function DatePicker({
+  id,
+  value = "",
+  onChange,
+  placeholder = "Selecione uma data",
+  required = false,
+  disabled = false,
+  className,
+}: DatePickerProps) {
+  const [open, setOpen] = React.useState(false);
+  const [date, setDate] = React.useState<Date | undefined>(() =>
+    parseYYYYMMDD(value)
+  );
+  const [month, setMonth] = React.useState<Date | undefined>(() =>
+    parseYYYYMMDD(value)
+  );
+  const [displayValue, setDisplayValue] = React.useState(() =>
+    formatDate(parseYYYYMMDD(value))
+  );
+
+  // Sincronizar quando value externo mudar
+  React.useEffect(() => {
+    const newDate = parseYYYYMMDD(value);
+    setDate(newDate);
+    setMonth(newDate);
+    setDisplayValue(formatDate(newDate));
+  }, [value]);
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const inputValue = e.target.value;
+    setDisplayValue(inputValue);
+
+    const parsedDate = parseYYYYMMDD(inputValue);
+    if (isValidDate(parsedDate)) {
+      setDate(parsedDate);
+      setMonth(parsedDate);
+      onChange?.(dateToYYYYMMDD(parsedDate));
+    }
+  };
+
+  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setOpen(true);
+    }
+  };
+
+  const handleCalendarSelect = (selectedDate: Date | undefined) => {
+    setDate(selectedDate);
+    setDisplayValue(formatDate(selectedDate));
+    onChange?.(dateToYYYYMMDD(selectedDate));
+    setOpen(false);
+  };
+
+  return (
+    <div className={cn("relative flex gap-2", className)}>
+      <Input
+        id={id}
+        value={displayValue}
+        placeholder={placeholder}
+        className="bg-background pr-10"
+        onChange={handleInputChange}
+        onKeyDown={handleInputKeyDown}
+        required={required}
+        disabled={disabled}
+      />
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            type="button"
+            variant="ghost"
+            disabled={disabled}
+            className="absolute top-1/2 right-2 size-6 -translate-y-1/2"
+            aria-label="Abrir calendário"
+          >
+            <RiCalendarLine className="size-3.5" />
+            <span className="sr-only">Selecionar data</span>
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent
+          className="w-auto overflow-hidden p-0"
+          align="end"
+          alignOffset={-8}
+          sideOffset={10}
+        >
+          <Calendar
+            mode="single"
+            selected={date}
+            captionLayout="dropdown"
+            month={month}
+            onMonthChange={setMonth}
+            onSelect={handleCalendarSelect}
+            locale={{
+              localize: {
+                day: (n) => ["D", "S", "T", "Q", "Q", "S", "S"][n],
+                month: (n) =>
+                  [
+                    "Jan",
+                    "Fev",
+                    "Mar",
+                    "Abr",
+                    "Mai",
+                    "Jun",
+                    "Jul",
+                    "Ago",
+                    "Set",
+                    "Out",
+                    "Nov",
+                    "Dez",
+                  ][n],
+              },
+              formatLong: {
+                date: () => "dd/MM/yyyy",
+              },
+            }}
+          />
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+}
diff --git a/components/ui/dialog.tsx b/components/ui/dialog.tsx
new file mode 100644
index 0000000..c2fe6c8
--- /dev/null
+++ b/components/ui/dialog.tsx
@@ -0,0 +1,143 @@
+"use client"
+
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { XIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils/ui"
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-lg leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}
diff --git a/components/ui/drawer.tsx b/components/ui/drawer.tsx
new file mode 100644
index 0000000..0958649
--- /dev/null
+++ b/components/ui/drawer.tsx
@@ -0,0 +1,135 @@
+"use client"
+
+import * as React from "react"
+import { Drawer as DrawerPrimitive } from "vaul"
+
+import { cn } from "@/lib/utils/ui"
+
+function Drawer({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Root>) {
+  return <DrawerPrimitive.Root data-slot="drawer" {...props} />
+}
+
+function DrawerTrigger({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
+  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />
+}
+
+function DrawerPortal({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
+  return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />
+}
+
+function DrawerClose({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Close>) {
+  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />
+}
+
+function DrawerOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
+  return (
+    <DrawerPrimitive.Overlay
+      data-slot="drawer-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DrawerContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Content>) {
+  return (
+    <DrawerPortal data-slot="drawer-portal">
+      <DrawerOverlay />
+      <DrawerPrimitive.Content
+        data-slot="drawer-content"
+        className={cn(
+          "group/drawer-content bg-background fixed z-50 flex h-auto flex-col",
+          "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b",
+          "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t",
+          "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm",
+          "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm",
+          className
+        )}
+        {...props}
+      >
+        <div className="bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
+        {children}
+      </DrawerPrimitive.Content>
+    </DrawerPortal>
+  )
+}
+
+function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="drawer-header"
+      className={cn(
+        "flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="drawer-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      {...props}
+    />
+  )
+}
+
+function DrawerTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Title>) {
+  return (
+    <DrawerPrimitive.Title
+      data-slot="drawer-title"
+      className={cn("text-foreground font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function DrawerDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Description>) {
+  return (
+    <DrawerPrimitive.Description
+      data-slot="drawer-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+}
diff --git a/components/ui/dropdown-menu.tsx b/components/ui/dropdown-menu.tsx
new file mode 100644
index 0000000..7fbd9b3
--- /dev/null
+++ b/components/ui/dropdown-menu.tsx
@@ -0,0 +1,261 @@
+"use client";
+
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import {
+  RiArrowRightSLine,
+  RiCheckboxBlankCircleFill,
+  RiCheckLine,
+} from "@remixicon/react";
+import * as React from "react";
+
+import { cn } from "@/lib/utils/ui";
+
+function DropdownMenu({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
+}
+
+function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return (
+    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+  );
+}
+
+function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+          className
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  );
+}
+
+function DropdownMenuGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return (
+    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+  );
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean;
+  variant?: "default" | "destructive";
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive! [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <RiCheckLine className="size-4" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  );
+}
+
+function DropdownMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <RiCheckboxBlankCircleFill className="size-2 fill-current" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  );
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean;
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-2 py-1.5 text-sm font-medium data-inset:pl-8",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean;
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-inset:pl-8",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <RiArrowRightSLine className="ml-auto size-4" />
+    </DropdownMenuPrimitive.SubTrigger>
+  );
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+};
diff --git a/components/ui/empty.tsx b/components/ui/empty.tsx
new file mode 100644
index 0000000..1549900
--- /dev/null
+++ b/components/ui/empty.tsx
@@ -0,0 +1,104 @@
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils/ui"
+
+function Empty({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty"
+      className={cn(
+        "flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function EmptyHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-header"
+      className={cn(
+        "flex max-w-sm flex-col items-center gap-2 text-center",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const emptyMediaVariants = cva(
+  "flex shrink-0 items-center justify-center mb-2 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function EmptyMedia({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>) {
+  return (
+    <div
+      data-slot="empty-icon"
+      data-variant={variant}
+      className={cn(emptyMediaVariants({ variant, className }))}
+      {...props}
+    />
+  )
+}
+
+function EmptyTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-title"
+      className={cn("text-lg font-medium tracking-tight", className)}
+      {...props}
+    />
+  )
+}
+
+function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <div
+      data-slot="empty-description"
+      className={cn(
+        "text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function EmptyContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-content"
+      className={cn(
+        "flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Empty,
+  EmptyHeader,
+  EmptyTitle,
+  EmptyDescription,
+  EmptyContent,
+  EmptyMedia,
+}
diff --git a/components/ui/field.tsx b/components/ui/field.tsx
new file mode 100644
index 0000000..1e7f20b
--- /dev/null
+++ b/components/ui/field.tsx
@@ -0,0 +1,248 @@
+"use client";
+
+import { useMemo } from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils/ui";
+import { Label } from "@/components/ui/label";
+import { Separator } from "@/components/ui/separator";
+
+function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
+  return (
+    <fieldset
+      data-slot="field-set"
+      className={cn(
+        "flex flex-col gap-6",
+        "has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function FieldLegend({
+  className,
+  variant = "legend",
+  ...props
+}: React.ComponentProps<"legend"> & { variant?: "legend" | "label" }) {
+  return (
+    <legend
+      data-slot="field-legend"
+      data-variant={variant}
+      className={cn(
+        "mb-3 font-medium",
+        "data-[variant=legend]:text-base",
+        "data-[variant=label]:text-sm",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-group"
+      className={cn(
+        "group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+const fieldVariants = cva(
+  "group/field flex w-full gap-3 data-[invalid=true]:text-destructive",
+  {
+    variants: {
+      orientation: {
+        vertical: ["flex-col *:w-full [&>.sr-only]:w-auto"],
+        horizontal: [
+          "flex-row items-center",
+          "*:data-[slot=field-label]:flex-auto",
+          "has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+        ],
+        responsive: [
+          "flex-col *:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto",
+          "@md/field-group:*:data-[slot=field-label]:flex-auto",
+          "@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+        ],
+      },
+    },
+    defaultVariants: {
+      orientation: "vertical",
+    },
+  }
+);
+
+function Field({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="field"
+      data-orientation={orientation}
+      className={cn(fieldVariants({ orientation }), className)}
+      {...props}
+    />
+  );
+}
+
+function FieldContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-content"
+      className={cn(
+        "group/field-content flex flex-1 flex-col gap-1.5 leading-snug",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function FieldLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof Label>) {
+  return (
+    <Label
+      data-slot="field-label"
+      className={cn(
+        "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50",
+        "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border *:data-[slot=field]:p-4",
+        "has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-label"
+      className={cn(
+        "flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="field-description"
+      className={cn(
+        "text-muted-foreground text-sm leading-normal font-normal group-has-data-[orientation=horizontal]/field:text-balance",
+        "last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5",
+        "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function FieldSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"div"> & {
+  children?: React.ReactNode;
+}) {
+  return (
+    <div
+      data-slot="field-separator"
+      data-content={!!children}
+      className={cn(
+        "relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
+        className
+      )}
+      {...props}
+    >
+      <Separator className="absolute inset-0 top-1/2" />
+      {children && (
+        <span
+          className="bg-background text-muted-foreground relative mx-auto block w-fit px-2"
+          data-slot="field-separator-content"
+        >
+          {children}
+        </span>
+      )}
+    </div>
+  );
+}
+
+function FieldError({
+  className,
+  children,
+  errors,
+  ...props
+}: React.ComponentProps<"div"> & {
+  errors?: Array<{ message?: string } | undefined>;
+}) {
+  const content = useMemo(() => {
+    if (children) {
+      return children;
+    }
+
+    if (!errors?.length) {
+      return null;
+    }
+
+    const uniqueErrors = [
+      ...new Map(errors.map((error) => [error?.message, error])).values(),
+    ];
+
+    if (uniqueErrors?.length == 1) {
+      return uniqueErrors[0]?.message;
+    }
+
+    return (
+      <ul className="ml-4 flex list-disc flex-col gap-1">
+        {uniqueErrors.map(
+          (error, index) =>
+            error?.message && <li key={index}>{error.message}</li>
+        )}
+      </ul>
+    );
+  }, [children, errors]);
+
+  if (!content) {
+    return null;
+  }
+
+  return (
+    <div
+      role="alert"
+      data-slot="field-error"
+      className={cn("text-destructive text-sm font-normal", className)}
+      {...props}
+    >
+      {content}
+    </div>
+  );
+}
+
+export {
+  Field,
+  FieldLabel,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+  FieldContent,
+  FieldTitle,
+};
diff --git a/components/ui/hover-card.tsx b/components/ui/hover-card.tsx
new file mode 100644
index 0000000..c700451
--- /dev/null
+++ b/components/ui/hover-card.tsx
@@ -0,0 +1,44 @@
+"use client"
+
+import * as React from "react"
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
+
+import { cn } from "@/lib/utils/ui"
+
+function HoverCard({
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
+  return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />
+}
+
+function HoverCardTrigger({
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
+  return (
+    <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
+  )
+}
+
+function HoverCardContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
+  return (
+    <HoverCardPrimitive.Portal data-slot="hover-card-portal">
+      <HoverCardPrimitive.Content
+        data-slot="hover-card-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+          className
+        )}
+        {...props}
+      />
+    </HoverCardPrimitive.Portal>
+  )
+}
+
+export { HoverCard, HoverCardTrigger, HoverCardContent }
diff --git a/components/ui/input.tsx b/components/ui/input.tsx
new file mode 100644
index 0000000..2652231
--- /dev/null
+++ b/components/ui/input.tsx
@@ -0,0 +1,21 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils/ui";
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Input };
diff --git a/components/ui/label.tsx b/components/ui/label.tsx
new file mode 100644
index 0000000..e4d82e0
--- /dev/null
+++ b/components/ui/label.tsx
@@ -0,0 +1,24 @@
+"use client";
+
+import * as LabelPrimitive from "@radix-ui/react-label";
+import * as React from "react";
+
+import { cn } from "@/lib/utils/ui";
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-xs leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Label };
diff --git a/components/ui/popover.tsx b/components/ui/popover.tsx
new file mode 100644
index 0000000..b13f056
--- /dev/null
+++ b/components/ui/popover.tsx
@@ -0,0 +1,48 @@
+"use client"
+
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "@/lib/utils/ui"
+
+function Popover({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+}
+
+function PopoverTrigger({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+}
+
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot="popover-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+          className
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  )
+}
+
+function PopoverAnchor({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
+}
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }
diff --git a/components/ui/progress.tsx b/components/ui/progress.tsx
new file mode 100644
index 0000000..dd83e66
--- /dev/null
+++ b/components/ui/progress.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import * as ProgressPrimitive from "@radix-ui/react-progress"
+
+import { cn } from "@/lib/utils/ui"
+
+function Progress({
+  className,
+  value,
+  ...props
+}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
+  return (
+    <ProgressPrimitive.Root
+      data-slot="progress"
+      className={cn(
+        "bg-primary/20 relative h-2 w-full overflow-hidden rounded-full",
+        className
+      )}
+      {...props}
+    >
+      <ProgressPrimitive.Indicator
+        data-slot="progress-indicator"
+        className="bg-primary h-full w-full flex-1 transition-all"
+        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+      />
+    </ProgressPrimitive.Root>
+  )
+}
+
+export { Progress }
diff --git a/components/ui/radio-group.tsx b/components/ui/radio-group.tsx
new file mode 100644
index 0000000..e464675
--- /dev/null
+++ b/components/ui/radio-group.tsx
@@ -0,0 +1,45 @@
+"use client"
+
+import * as React from "react"
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
+import { CircleIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils/ui"
+
+function RadioGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
+  return (
+    <RadioGroupPrimitive.Root
+      data-slot="radio-group"
+      className={cn("grid gap-3", className)}
+      {...props}
+    />
+  )
+}
+
+function RadioGroupItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
+  return (
+    <RadioGroupPrimitive.Item
+      data-slot="radio-group-item"
+      className={cn(
+        "border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator
+        data-slot="radio-group-indicator"
+        className="relative flex items-center justify-center"
+      >
+        <CircleIcon className="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  )
+}
+
+export { RadioGroup, RadioGroupItem }
diff --git a/components/ui/select.tsx b/components/ui/select.tsx
new file mode 100644
index 0000000..bc78693
--- /dev/null
+++ b/components/ui/select.tsx
@@ -0,0 +1,187 @@
+"use client";
+
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "@/lib/utils/ui";
+
+function Select({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />;
+}
+
+function SelectGroup({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />;
+}
+
+function SelectValue({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />;
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: "sm" | "default";
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "border-input data-placeholder:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap  transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="size-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  );
+}
+
+function SelectContent({
+  className,
+  children,
+  position = "popper",
+  align = "center",
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+          position === "popper" &&
+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          className
+        )}
+        position={position}
+        align={align}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            "p-1",
+            position === "popper" &&
+              "h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width) scroll-my-1"
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  );
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+      {...props}
+    />
+  );
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      )}
+      {...props}
+    >
+      <span className="absolute right-2 flex size-3.5 items-center justify-center">
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  );
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  );
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronUpIcon className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  );
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronDownIcon className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  );
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+};
diff --git a/components/ui/separator.tsx b/components/ui/separator.tsx
new file mode 100644
index 0000000..94189d9
--- /dev/null
+++ b/components/ui/separator.tsx
@@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "@/lib/utils/ui"
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }
diff --git a/components/ui/sheet.tsx b/components/ui/sheet.tsx
new file mode 100644
index 0000000..a808b59
--- /dev/null
+++ b/components/ui/sheet.tsx
@@ -0,0 +1,139 @@
+"use client"
+
+import * as React from "react"
+import * as SheetPrimitive from "@radix-ui/react-dialog"
+import { XIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils/ui"
+
+function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />
+}
+
+function SheetTrigger({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
+}
+
+function SheetClose({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Close>) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
+}
+
+function SheetPortal({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
+}
+
+function SheetOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
+  return (
+    <SheetPrimitive.Overlay
+      data-slot="sheet-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Content> & {
+  side?: "top" | "right" | "bottom" | "left"
+}) {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Content
+        data-slot="sheet-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+          side === "right" &&
+            "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+          side === "left" &&
+            "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+          side === "top" &&
+            "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
+          side === "bottom" &&
+            "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
+          <XIcon className="size-4" />
+          <span className="sr-only">Close</span>
+        </SheetPrimitive.Close>
+      </SheetPrimitive.Content>
+    </SheetPortal>
+  )
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn("flex flex-col gap-1.5 p-4", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Title>) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn("text-foreground font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Description>) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}
diff --git a/components/ui/sidebar.tsx b/components/ui/sidebar.tsx
new file mode 100644
index 0000000..d8d9a8f
--- /dev/null
+++ b/components/ui/sidebar.tsx
@@ -0,0 +1,725 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Separator } from "@/components/ui/separator";
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet";
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { useIsMobile } from "@/hooks/use-mobile";
+import { cn } from "@/lib/utils/ui";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import { PanelLeftIcon } from "lucide-react";
+import * as React from "react";
+
+const SIDEBAR_COOKIE_NAME = "sidebar_state";
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+const SIDEBAR_WIDTH = "16rem";
+const SIDEBAR_WIDTH_MOBILE = "18rem";
+const SIDEBAR_WIDTH_ICON = "3rem";
+const SIDEBAR_KEYBOARD_SHORTCUT = "b";
+
+type SidebarContextProps = {
+  state: "expanded" | "collapsed";
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  openMobile: boolean;
+  setOpenMobile: (open: boolean) => void;
+  isMobile: boolean;
+  toggleSidebar: () => void;
+};
+
+const SidebarContext = React.createContext<SidebarContextProps | null>(null);
+
+function useSidebar() {
+  const context = React.useContext(SidebarContext);
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider.");
+  }
+
+  return context;
+}
+
+function SidebarProvider({
+  defaultOpen = true,
+  open: openProp,
+  onOpenChange: setOpenProp,
+  className,
+  style,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  defaultOpen?: boolean;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}) {
+  const isMobile = useIsMobile();
+  const [openMobile, setOpenMobile] = React.useState(false);
+
+  // This is the internal state of the sidebar.
+  // We use openProp and setOpenProp for control from outside the component.
+  const [_open, _setOpen] = React.useState(defaultOpen);
+  const open = openProp ?? _open;
+  const setOpen = React.useCallback(
+    (value: boolean | ((value: boolean) => boolean)) => {
+      const openState = typeof value === "function" ? value(open) : value;
+      if (setOpenProp) {
+        setOpenProp(openState);
+      } else {
+        _setOpen(openState);
+      }
+
+      // This sets the cookie to keep the sidebar state.
+      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+    },
+    [setOpenProp, open]
+  );
+
+  // Helper to toggle the sidebar.
+  const toggleSidebar = React.useCallback(() => {
+    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
+  }, [isMobile, setOpen, setOpenMobile]);
+
+  // Adds a keyboard shortcut to toggle the sidebar.
+  React.useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (
+        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+        (event.metaKey || event.ctrlKey)
+      ) {
+        event.preventDefault();
+        toggleSidebar();
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [toggleSidebar]);
+
+  // We add a state so that we can do data-state="expanded" or "collapsed".
+  // This makes it easier to style the sidebar with Tailwind classes.
+  const state = open ? "expanded" : "collapsed";
+
+  const contextValue = React.useMemo<SidebarContextProps>(
+    () => ({
+      state,
+      open,
+      setOpen,
+      isMobile,
+      openMobile,
+      setOpenMobile,
+      toggleSidebar,
+    }),
+    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
+  );
+
+  return (
+    <SidebarContext.Provider value={contextValue}>
+      <TooltipProvider delayDuration={0}>
+        <div
+          data-slot="sidebar-wrapper"
+          style={
+            {
+              "--sidebar-width": SIDEBAR_WIDTH,
+              "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+              ...style,
+            } as React.CSSProperties
+          }
+          className={cn(
+            "group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
+            className
+          )}
+          {...props}
+        >
+          {children}
+        </div>
+      </TooltipProvider>
+    </SidebarContext.Provider>
+  );
+}
+
+function Sidebar({
+  side = "left",
+  variant = "sidebar",
+  collapsible = "offcanvas",
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  side?: "left" | "right";
+  variant?: "sidebar" | "floating" | "inset";
+  collapsible?: "offcanvas" | "icon" | "none";
+}) {
+  const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+
+  if (collapsible === "none") {
+    return (
+      <div
+        data-slot="sidebar"
+        className={cn(
+          "bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+
+  if (isMobile) {
+    return (
+      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+        <SheetContent
+          data-sidebar="sidebar"
+          data-slot="sidebar"
+          data-mobile="true"
+          className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
+          style={
+            {
+              "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
+            } as React.CSSProperties
+          }
+          side={side}
+        >
+          <SheetHeader className="sr-only">
+            <SheetTitle>Sidebar</SheetTitle>
+            <SheetDescription>Displays the mobile sidebar.</SheetDescription>
+          </SheetHeader>
+          <div className="flex h-full w-full flex-col">{children}</div>
+        </SheetContent>
+      </Sheet>
+    );
+  }
+
+  return (
+    <div
+      className="group peer text-sidebar-foreground hidden md:block"
+      data-state={state}
+      data-collapsible={state === "collapsed" ? collapsible : ""}
+      data-variant={variant}
+      data-side={side}
+      data-slot="sidebar"
+    >
+      {/* This is what handles the sidebar gap on desktop */}
+      <div
+        data-slot="sidebar-gap"
+        className={cn(
+          "relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
+          "group-data-[collapsible=offcanvas]:w-0",
+          "group-data-[side=right]:rotate-180",
+          variant === "floating" || variant === "inset"
+            ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
+            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
+        )}
+      />
+      <div
+        data-slot="sidebar-container"
+        className={cn(
+          "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
+          side === "left"
+            ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
+            : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
+          // Adjust the padding for floating and inset variants.
+          variant === "floating" || variant === "inset"
+            ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
+            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
+          className
+        )}
+        {...props}
+      >
+        <div
+          data-sidebar="sidebar"
+          data-slot="sidebar-inner"
+          className="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
+        >
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function SidebarTrigger({
+  className,
+  onClick,
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { toggleSidebar } = useSidebar();
+
+  return (
+    <Button
+      data-sidebar="trigger"
+      data-slot="sidebar-trigger"
+      variant="ghost"
+      size="icon"
+      className={cn("size-7", className)}
+      onClick={(event) => {
+        onClick?.(event);
+        toggleSidebar();
+      }}
+      {...props}
+    >
+      <PanelLeftIcon />
+      <span className="sr-only">Toggle Sidebar</span>
+    </Button>
+  );
+}
+
+function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
+  const { toggleSidebar } = useSidebar();
+
+  return (
+    <button
+      data-sidebar="rail"
+      data-slot="sidebar-rail"
+      aria-label="Toggle Sidebar"
+      tabIndex={-1}
+      onClick={toggleSidebar}
+      title="Toggle Sidebar"
+      className={cn(
+        "hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex",
+        "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
+        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+        "hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
+        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
+  return (
+    <main
+      data-slot="sidebar-inset"
+      className={cn(
+        "bg-background relative flex w-full flex-1 flex-col",
+        "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-0",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function SidebarInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof Input>) {
+  return (
+    <Input
+      data-slot="sidebar-input"
+      data-sidebar="input"
+      className={cn("bg-background h-8 w-full shadow-none", className)}
+      {...props}
+    />
+  );
+}
+
+function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-header"
+      data-sidebar="header"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  );
+}
+
+function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-footer"
+      data-sidebar="footer"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  );
+}
+
+function SidebarSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="sidebar-separator"
+      data-sidebar="separator"
+      className={cn("bg-sidebar-border mx-2 w-auto", className)}
+      {...props}
+    />
+  );
+}
+
+function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-content"
+      data-sidebar="content"
+      className={cn(
+        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-group"
+      data-sidebar="group"
+      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
+      {...props}
+    />
+  );
+}
+
+function SidebarGroupLabel({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"div"> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "div";
+
+  return (
+    <Comp
+      data-slot="sidebar-group-label"
+      data-sidebar="group-label"
+      className={cn(
+        "text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function SidebarGroupAction({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "button";
+
+  return (
+    <Comp
+      data-slot="sidebar-group-action"
+      data-sidebar="group-action"
+      className={cn(
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 md:after:hidden",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function SidebarGroupContent({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-group-content"
+      data-sidebar="group-content"
+      className={cn("w-full text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="sidebar-menu"
+      data-sidebar="menu"
+      className={cn("flex w-full min-w-0 flex-col gap-1", className)}
+      {...props}
+    />
+  );
+}
+
+function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="sidebar-menu-item"
+      data-sidebar="menu-item"
+      className={cn("group/menu-item relative", className)}
+      {...props}
+    />
+  );
+}
+
+const sidebarMenuButtonVariants = cva(
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        outline:
+          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+      },
+      size: {
+        default: "h-8 text-sm",
+        sm: "h-7 text-xs",
+        lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+function SidebarMenuButton({
+  asChild = false,
+  isActive = false,
+  variant = "default",
+  size = "default",
+  tooltip,
+  className,
+  ...props
+}: React.ComponentProps<"button"> & {
+  asChild?: boolean;
+  isActive?: boolean;
+  tooltip?: string | React.ComponentProps<typeof TooltipContent>;
+} & VariantProps<typeof sidebarMenuButtonVariants>) {
+  const Comp = asChild ? Slot : "button";
+  const { isMobile, state } = useSidebar();
+
+  const button = (
+    <Comp
+      data-slot="sidebar-menu-button"
+      data-sidebar="menu-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
+      {...props}
+    />
+  );
+
+  if (!tooltip) {
+    return button;
+  }
+
+  if (typeof tooltip === "string") {
+    tooltip = {
+      children: tooltip,
+    };
+  }
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>{button}</TooltipTrigger>
+      <TooltipContent
+        side="right"
+        align="center"
+        hidden={state !== "collapsed" || isMobile}
+        {...tooltip}
+      />
+    </Tooltip>
+  );
+}
+
+function SidebarMenuAction({
+  className,
+  asChild = false,
+  showOnHover = false,
+  ...props
+}: React.ComponentProps<"button"> & {
+  asChild?: boolean;
+  showOnHover?: boolean;
+}) {
+  const Comp = asChild ? Slot : "button";
+
+  return (
+    <Comp
+      data-slot="sidebar-menu-action"
+      data-sidebar="menu-action"
+      className={cn(
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 md:after:hidden",
+        "peer-data-[size=sm]/menu-button:top-1",
+        "peer-data-[size=default]/menu-button:top-1.5",
+        "peer-data-[size=lg]/menu-button:top-2.5",
+        "group-data-[collapsible=icon]:hidden",
+        showOnHover &&
+          "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function SidebarMenuBadge({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-menu-badge"
+      data-sidebar="menu-badge"
+      className={cn(
+        "text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none",
+        "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
+        "peer-data-[size=sm]/menu-button:top-1",
+        "peer-data-[size=default]/menu-button:top-1.5",
+        "peer-data-[size=lg]/menu-button:top-2.5",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function SidebarMenuSkeleton({
+  className,
+  showIcon = false,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showIcon?: boolean;
+}) {
+  // Random width between 50 to 90%.
+  const width = React.useMemo(() => {
+    return `${Math.floor(Math.random() * 40) + 50}%`;
+  }, []);
+
+  return (
+    <div
+      data-slot="sidebar-menu-skeleton"
+      data-sidebar="menu-skeleton"
+      className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
+      {...props}
+    >
+      {showIcon && (
+        <Skeleton
+          className="size-4 rounded-md"
+          data-sidebar="menu-skeleton-icon"
+        />
+      )}
+      <Skeleton
+        className="h-4 max-w-(--skeleton-width) flex-1"
+        data-sidebar="menu-skeleton-text"
+        style={
+          {
+            "--skeleton-width": width,
+          } as React.CSSProperties
+        }
+      />
+    </div>
+  );
+}
+
+function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="sidebar-menu-sub"
+      data-sidebar="menu-sub"
+      className={cn(
+        "border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function SidebarMenuSubItem({
+  className,
+  ...props
+}: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="sidebar-menu-sub-item"
+      data-sidebar="menu-sub-item"
+      className={cn("group/menu-sub-item relative", className)}
+      {...props}
+    />
+  );
+}
+
+function SidebarMenuSubButton({
+  asChild = false,
+  size = "md",
+  isActive = false,
+  className,
+  ...props
+}: React.ComponentProps<"a"> & {
+  asChild?: boolean;
+  size?: "sm" | "md";
+  isActive?: boolean;
+}) {
+  const Comp = asChild ? Slot : "a";
+
+  return (
+    <Comp
+      data-slot="sidebar-menu-sub-button"
+      data-sidebar="menu-sub-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+        "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+        size === "sm" && "text-xs",
+        size === "md" && "text-sm",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+  useSidebar,
+};
diff --git a/components/ui/skeleton.tsx b/components/ui/skeleton.tsx
new file mode 100644
index 0000000..564a0d8
--- /dev/null
+++ b/components/ui/skeleton.tsx
@@ -0,0 +1,13 @@
+import { cn } from "@/lib/utils/ui"
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("bg-accent animate-pulse rounded-md", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }
diff --git a/components/ui/sonner.tsx b/components/ui/sonner.tsx
new file mode 100644
index 0000000..9b20afe
--- /dev/null
+++ b/components/ui/sonner.tsx
@@ -0,0 +1,40 @@
+"use client"
+
+import {
+  CircleCheckIcon,
+  InfoIcon,
+  Loader2Icon,
+  OctagonXIcon,
+  TriangleAlertIcon,
+} from "lucide-react"
+import { useTheme } from "next-themes"
+import { Toaster as Sonner, type ToasterProps } from "sonner"
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      icons={{
+        success: <CircleCheckIcon className="size-4" />,
+        info: <InfoIcon className="size-4" />,
+        warning: <TriangleAlertIcon className="size-4" />,
+        error: <OctagonXIcon className="size-4" />,
+        loading: <Loader2Icon className="size-4 animate-spin" />,
+      }}
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+          "--border-radius": "var(--radius)",
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  )
+}
+
+export { Toaster }
diff --git a/components/ui/spinner.tsx b/components/ui/spinner.tsx
new file mode 100644
index 0000000..d67f07f
--- /dev/null
+++ b/components/ui/spinner.tsx
@@ -0,0 +1,16 @@
+import { Loader2Icon } from "lucide-react"
+
+import { cn } from "@/lib/utils/ui"
+
+function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
+  return (
+    <Loader2Icon
+      role="status"
+      aria-label="Loading"
+      className={cn("size-4 animate-spin", className)}
+      {...props}
+    />
+  )
+}
+
+export { Spinner }
diff --git a/components/ui/switch.tsx b/components/ui/switch.tsx
new file mode 100644
index 0000000..5df2950
--- /dev/null
+++ b/components/ui/switch.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import * as SwitchPrimitive from "@radix-ui/react-switch"
+
+import { cn } from "@/lib/utils/ui"
+
+function Switch({
+  className,
+  ...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      className={cn(
+        "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className={cn(
+          "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
+        )}
+      />
+    </SwitchPrimitive.Root>
+  )
+}
+
+export { Switch }
diff --git a/components/ui/table.tsx b/components/ui/table.tsx
new file mode 100644
index 0000000..41e6e6d
--- /dev/null
+++ b/components/ui/table.tsx
@@ -0,0 +1,116 @@
+"use client";
+
+import * as React from "react";
+
+import { cn } from "@/lib/utils/ui";
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto"
+    >
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  );
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("[&_tr]:border-b", className)}
+      {...props}
+    />
+  );
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  );
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b border-dashed transition-colors",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("text-muted-foreground mt-4 text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+};
diff --git a/components/ui/tabs.tsx b/components/ui/tabs.tsx
new file mode 100644
index 0000000..f4d2db4
--- /dev/null
+++ b/components/ui/tabs.tsx
@@ -0,0 +1,66 @@
+"use client";
+
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import * as React from "react";
+
+import { cn } from "@/lib/utils/ui";
+
+function Tabs({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      className={cn("flex flex-col gap-2", className)}
+      {...props}
+    />
+  );
+}
+
+function TabsList({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      className={cn(
+        "text-muted-foreground inline-flex h-9 w-full items-center justify-start rounded-none border-b bg-transparent p-0",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function TabsTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        "ring-offset-background focus-visible:ring-ring data-[state=active]:bg-background text-muted-foreground data-[state=active]:border-b-primary data-[state=active]:text-foreground relative inline-flex h-9 items-center justify-center rounded-none border-b-2 border-b-transparent bg-transparent px-4 py-1 pt-2 pb-3 text-sm font-semibold whitespace-nowrap shadow-none transition-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-none",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function TabsContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn("flex-1 outline-none", className)}
+      {...props}
+    />
+  );
+}
+
+export { Tabs, TabsContent, TabsList, TabsTrigger };
diff --git a/components/ui/textarea.tsx b/components/ui/textarea.tsx
new file mode 100644
index 0000000..1d1667a
--- /dev/null
+++ b/components/ui/textarea.tsx
@@ -0,0 +1,18 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils/ui";
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full wrap-break-word rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Textarea };
diff --git a/components/ui/toggle-group.tsx b/components/ui/toggle-group.tsx
new file mode 100644
index 0000000..6278949
--- /dev/null
+++ b/components/ui/toggle-group.tsx
@@ -0,0 +1,73 @@
+"use client"
+
+import * as React from "react"
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
+import { type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils/ui"
+import { toggleVariants } from "@/components/ui/toggle"
+
+const ToggleGroupContext = React.createContext<
+  VariantProps<typeof toggleVariants>
+>({
+  size: "default",
+  variant: "default",
+})
+
+function ToggleGroup({
+  className,
+  variant,
+  size,
+  children,
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &
+  VariantProps<typeof toggleVariants>) {
+  return (
+    <ToggleGroupPrimitive.Root
+      data-slot="toggle-group"
+      data-variant={variant}
+      data-size={size}
+      className={cn(
+        "group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs",
+        className
+      )}
+      {...props}
+    >
+      <ToggleGroupContext.Provider value={{ variant, size }}>
+        {children}
+      </ToggleGroupContext.Provider>
+    </ToggleGroupPrimitive.Root>
+  )
+}
+
+function ToggleGroupItem({
+  className,
+  children,
+  variant,
+  size,
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &
+  VariantProps<typeof toggleVariants>) {
+  const context = React.useContext(ToggleGroupContext)
+
+  return (
+    <ToggleGroupPrimitive.Item
+      data-slot="toggle-group-item"
+      data-variant={context.variant || variant}
+      data-size={context.size || size}
+      className={cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+        "min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </ToggleGroupPrimitive.Item>
+  )
+}
+
+export { ToggleGroup, ToggleGroupItem }
diff --git a/components/ui/toggle.tsx b/components/ui/toggle.tsx
new file mode 100644
index 0000000..c1384b3
--- /dev/null
+++ b/components/ui/toggle.tsx
@@ -0,0 +1,47 @@
+"use client"
+
+import * as React from "react"
+import * as TogglePrimitive from "@radix-ui/react-toggle"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils/ui"
+
+const toggleVariants = cva(
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline:
+          "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
+      },
+      size: {
+        default: "h-9 px-2 min-w-9",
+        sm: "h-8 px-1.5 min-w-8",
+        lg: "h-10 px-2.5 min-w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Toggle({
+  className,
+  variant,
+  size,
+  ...props
+}: React.ComponentProps<typeof TogglePrimitive.Root> &
+  VariantProps<typeof toggleVariants>) {
+  return (
+    <TogglePrimitive.Root
+      data-slot="toggle"
+      className={cn(toggleVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Toggle, toggleVariants }
diff --git a/components/ui/tooltip.tsx b/components/ui/tooltip.tsx
new file mode 100644
index 0000000..b9a8fcd
--- /dev/null
+++ b/components/ui/tooltip.tsx
@@ -0,0 +1,61 @@
+"use client"
+
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils/ui"
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  )
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
diff --git a/components/widget-card.tsx b/components/widget-card.tsx
new file mode 100644
index 0000000..f8adfe1
--- /dev/null
+++ b/components/widget-card.tsx
@@ -0,0 +1,128 @@
+"use client";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { RiExpandDiagonalLine } from "@remixicon/react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Button } from "./ui/button";
+
+const OVERFLOW_THRESHOLD_PX = 16;
+const OVERFLOW_CHECK_DEBOUNCE_MS = 100;
+
+type WidgetProps = {
+  title: string;
+  subtitle: string;
+  children: React.ReactNode;
+  icon: React.ReactElement;
+};
+
+export default function WidgetCard({
+  title,
+  subtitle,
+  icon,
+  children,
+}: WidgetProps) {
+  const contentRef = useRef<HTMLDivElement | null>(null);
+  const [hasOverflow, setHasOverflow] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
+  const debounceTimerRef = useRef<NodeJS.Timeout | null>(null);
+
+  const checkOverflow = useCallback(() => {
+    const el = contentRef.current;
+    if (!el) return;
+
+    if (debounceTimerRef.current) {
+      clearTimeout(debounceTimerRef.current);
+    }
+
+    debounceTimerRef.current = setTimeout(() => {
+      const hasOverflowNow =
+        el.scrollHeight - el.clientHeight > OVERFLOW_THRESHOLD_PX;
+      setHasOverflow(hasOverflowNow);
+    }, OVERFLOW_CHECK_DEBOUNCE_MS);
+  }, []);
+
+  useEffect(() => {
+    const el = contentRef.current;
+    if (!el) return;
+
+    // Checagem inicial
+    checkOverflow();
+
+    // Observa apenas resize do container (suficiente para detectar overflow)
+    const ro = new ResizeObserver(checkOverflow);
+    ro.observe(el);
+
+    return () => {
+      ro.disconnect();
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+      }
+    };
+  }, [checkOverflow]);
+
+  return (
+    <Card className="md:h-custom-height-1 relative h-auto md:overflow-hidden">
+      <CardHeader className="border-b [.border-b]:pb-2">
+        <div className="flex w-full items-start justify-between">
+          <div>
+            <CardTitle className="flex items-center gap-1">
+              {icon}
+              {title}
+            </CardTitle>
+            <CardDescription className="text-muted-foreground text-sm capitalize mt-1">
+              {subtitle}
+            </CardDescription>
+          </div>
+        </div>
+      </CardHeader>
+
+      <CardContent
+        ref={contentRef}
+        className="max-h-[calc(var(--spacing-custom-height-1)-5rem)] overflow-hidden md:max-h-[calc(100%-5rem)]"
+      >
+        {children}
+      </CardContent>
+
+      {hasOverflow && (
+        <div className="pointer-events-none absolute inset-x-0 bottom-0 flex justify-center bg-linear-to-t from-card to-transparent pt-12 pb-6">
+          <Button
+            variant="outline"
+            className="pointer-events-auto rounded-full text-xs dark:text-white"
+            onClick={() => setIsOpen(true)}
+            aria-label="Expandir para ver todo o conteúdo"
+          >
+            Ver tudo <RiExpandDiagonalLine size={10} aria-hidden="true" />
+          </Button>
+        </div>
+      )}
+
+      <Dialog open={isOpen} onOpenChange={setIsOpen}>
+        <DialogContent className="max-h-[85vh] w-full max-w-3xl overflow-hidden p-0">
+          <DialogHeader className="px-6 pt-4">
+            <DialogTitle className="flex items-center gap-2">
+              {icon}
+              <span>{title}</span>
+            </DialogTitle>
+            {subtitle ? (
+              <p className="text-muted-foreground text-sm">{subtitle}</p>
+            ) : null}
+          </DialogHeader>
+          <div className="scrollbar-hide max-h-[calc(85vh-6rem)] overflow-y-auto px-6 pb-6">
+            {children}
+          </div>
+        </DialogContent>
+      </Dialog>
+    </Card>
+  );
+}
diff --git a/components/widget-empty-state.tsx b/components/widget-empty-state.tsx
new file mode 100644
index 0000000..82575b9
--- /dev/null
+++ b/components/widget-empty-state.tsx
@@ -0,0 +1,30 @@
+import type { ReactNode } from "react";
+import {
+  Empty,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from "@/components/ui/empty";
+
+type WidgetEmptyStateProps = {
+  icon?: ReactNode;
+  title: string;
+  description?: string;
+};
+
+export function WidgetEmptyState({
+  icon,
+  title,
+  description,
+}: WidgetEmptyStateProps) {
+  return (
+    <Empty>
+      <EmptyHeader>
+        <EmptyMedia>{icon}</EmptyMedia>
+        <EmptyTitle>{title}</EmptyTitle>
+        <EmptyDescription>{description}</EmptyDescription>
+      </EmptyHeader>
+    </Empty>
+  );
+}
diff --git a/db/schema.ts b/db/schema.ts
new file mode 100644
index 0000000..77f4b02
--- /dev/null
+++ b/db/schema.ts
@@ -0,0 +1,618 @@
+import { relations, sql } from "drizzle-orm";
+import {
+  boolean,
+  date,
+  index,
+  integer,
+  jsonb,
+  numeric,
+  pgTable,
+  smallint,
+  text,
+  timestamp,
+  uniqueIndex,
+  uuid,
+} from "drizzle-orm/pg-core";
+
+export const user = pgTable("user", {
+  id: text("id").primaryKey(),
+  name: text("name").notNull(),
+  email: text("email").notNull().unique(),
+  emailVerified: boolean("emailVerified").notNull(),
+  image: text("image"),
+  createdAt: timestamp("createdAt", {
+    mode: "date",
+    withTimezone: true,
+  }).notNull(),
+  updatedAt: timestamp("updatedAt", {
+    mode: "date",
+    withTimezone: true,
+  }).notNull(),
+});
+
+export const account = pgTable("account", {
+  id: text("id").primaryKey(),
+  accountId: text("accountId").notNull(),
+  providerId: text("providerId").notNull(),
+  userId: text("userId")
+    .notNull()
+    .references(() => user.id, { onDelete: "cascade" }),
+  accessToken: text("accessToken"),
+  refreshToken: text("refreshToken"),
+  idToken: text("idToken"),
+  accessTokenExpiresAt: timestamp("accessTokenExpiresAt", {
+    mode: "date",
+    withTimezone: true,
+  }),
+  refreshTokenExpiresAt: timestamp("refreshTokenExpiresAt", {
+    mode: "date",
+    withTimezone: true,
+  }),
+  scope: text("scope"),
+  password: text("password"),
+  createdAt: timestamp("createdAt", {
+    mode: "date",
+    withTimezone: true,
+  }).notNull(),
+  updatedAt: timestamp("updatedAt", {
+    mode: "date",
+    withTimezone: true,
+  }).notNull(),
+});
+
+export const session = pgTable("session", {
+  id: text("id").primaryKey(),
+  expiresAt: timestamp("expiresAt", {
+    mode: "date",
+    withTimezone: true,
+  }).notNull(),
+  token: text("token").notNull().unique(),
+  createdAt: timestamp("createdAt", {
+    mode: "date",
+    withTimezone: true,
+  }).notNull(),
+  updatedAt: timestamp("updatedAt", {
+    mode: "date",
+    withTimezone: true,
+  }).notNull(),
+  ipAddress: text("ipAddress"),
+  userAgent: text("userAgent"),
+  userId: text("userId")
+    .notNull()
+    .references(() => user.id, { onDelete: "cascade" }),
+});
+
+export const verification = pgTable("verification", {
+  id: text("id").primaryKey(),
+  identifier: text("identifier").notNull(),
+  value: text("value").notNull(),
+  expiresAt: timestamp("expiresAt", {
+    mode: "date",
+    withTimezone: true,
+  }).notNull(),
+  createdAt: timestamp("createdAt", {
+    mode: "date",
+    withTimezone: true,
+  }),
+  updatedAt: timestamp("updatedAt", {
+    mode: "date",
+    withTimezone: true,
+  }),
+});
+
+// ===================== PUBLIC TABLES =====================
+
+export const contas = pgTable("contas", {
+  id: uuid("id")
+    .primaryKey()
+    .default(sql`gen_random_uuid()`),
+  name: text("nome").notNull(),
+  accountType: text("tipo_conta").notNull(),
+  note: text("anotacao"),
+  status: text("status").notNull(),
+  logo: text("logo").notNull(),
+  initialBalance: numeric("saldo_inicial", { precision: 12, scale: 2 })
+    .notNull()
+    .default("0"),
+  excludeFromBalance: boolean("excluir_do_saldo")
+    .notNull()
+    .default(false),
+  userId: text("user_id")
+    .notNull()
+    .references(() => user.id, { onDelete: "cascade" }),
+  createdAt: timestamp("created_at", {
+    mode: "date",
+    withTimezone: true,
+  })
+    .notNull()
+    .defaultNow(),
+});
+
+export const categorias = pgTable("categorias", {
+  id: uuid("id")
+    .primaryKey()
+    .default(sql`gen_random_uuid()`),
+  name: text("nome").notNull(),
+  type: text("tipo").notNull(),
+  icon: text("icone"),
+  createdAt: timestamp("created_at", {
+    mode: "date",
+    withTimezone: true,
+  })
+    .notNull()
+    .defaultNow(),
+  userId: text("user_id")
+    .notNull()
+    .references(() => user.id, { onDelete: "cascade" }),
+});
+
+export const pagadores = pgTable(
+  "pagadores",
+  {
+    id: uuid("id")
+      .primaryKey()
+      .default(sql`gen_random_uuid()`),
+    name: text("nome").notNull(),
+    email: text("email"),
+    avatarUrl: text("avatar_url"),
+    status: text("status").notNull(),
+    note: text("anotacao"),
+    role: text("role"),
+    isAutoSend: boolean("is_auto_send").notNull().default(false),
+    shareCode: text("share_code")
+      .notNull()
+      .default(sql`substr(encode(gen_random_bytes(24), 'base64'), 1, 24)`),
+    lastMailAt: timestamp("last_mail", {
+      mode: "date",
+      withTimezone: true,
+    }),
+    createdAt: timestamp("created_at", {
+      mode: "date",
+      withTimezone: true,
+    })
+      .notNull()
+      .defaultNow(),
+    userId: text("user_id")
+      .notNull()
+      .references(() => user.id, { onDelete: "cascade" }),
+  },
+  (table) => ({
+    uniqueShareCode: uniqueIndex("pagadores_share_code_key").on(
+      table.shareCode
+    ),
+  })
+);
+
+export const pagadorShares = pgTable(
+  "pagador_shares",
+  {
+    id: uuid("id")
+      .primaryKey()
+      .default(sql`gen_random_uuid()`),
+    pagadorId: uuid("pagador_id")
+      .notNull()
+      .references(() => pagadores.id, { onDelete: "cascade" }),
+    sharedWithUserId: text("shared_with_user_id")
+      .notNull()
+      .references(() => user.id, { onDelete: "cascade" }),
+    permission: text("permission").notNull().default("read"),
+    createdByUserId: text("created_by_user_id")
+      .notNull()
+      .references(() => user.id, { onDelete: "cascade" }),
+    createdAt: timestamp("created_at", {
+      mode: "date",
+      withTimezone: true,
+    })
+      .notNull()
+      .defaultNow(),
+  },
+  (table) => ({
+    uniquePagadorShare: uniqueIndex("pagador_shares_unique").on(
+      table.pagadorId,
+      table.sharedWithUserId
+    ),
+  })
+);
+
+export const cartoes = pgTable("cartoes", {
+  id: uuid("id")
+    .primaryKey()
+    .default(sql`gen_random_uuid()`),
+  name: text("nome").notNull(),
+  closingDay: text("dt_fechamento").notNull(),
+  dueDay: text("dt_vencimento").notNull(),
+  note: text("anotacao"),
+  limit: numeric("limite", { precision: 10, scale: 2 }),
+  brand: text("bandeira"),
+  logo: text("logo"),
+  status: text("status").notNull(),
+  createdAt: timestamp("created_at", {
+    mode: "date",
+    withTimezone: true,
+  })
+    .notNull()
+    .defaultNow(),
+  userId: text("user_id")
+    .notNull()
+    .references(() => user.id, { onDelete: "cascade" }),
+  contaId: uuid("conta_id")
+    .notNull()
+    .references(() => contas.id, { onDelete: "cascade", onUpdate: "cascade" }),
+});
+
+export const faturas = pgTable("faturas", {
+  id: uuid("id")
+    .primaryKey()
+    .default(sql`gen_random_uuid()`),
+  paymentStatus: text("status_pagamento"),
+  period: text("periodo"),
+  createdAt: timestamp("created_at", {
+    mode: "date",
+    withTimezone: true,
+  })
+    .notNull()
+    .defaultNow(),
+  userId: text("user_id")
+    .notNull()
+    .references(() => user.id, { onDelete: "cascade" }),
+  cartaoId: uuid("cartao_id").references(() => cartoes.id, {
+    onDelete: "cascade",
+    onUpdate: "cascade",
+  }),
+});
+
+export const orcamentos = pgTable("orcamentos", {
+  id: uuid("id")
+    .primaryKey()
+    .default(sql`gen_random_uuid()`),
+  amount: numeric("valor", { precision: 10, scale: 2 }).notNull(),
+  period: text("periodo").notNull(),
+  createdAt: timestamp("created_at", {
+    mode: "date",
+    withTimezone: true,
+  })
+    .notNull()
+    .defaultNow(),
+  userId: text("user_id")
+    .notNull()
+    .references(() => user.id, { onDelete: "cascade" }),
+  categoriaId: uuid("categoria_id").references(() => categorias.id, {
+    onDelete: "cascade",
+    onUpdate: "cascade",
+  }),
+});
+
+export const anotacoes = pgTable("anotacoes", {
+  id: uuid("id")
+    .primaryKey()
+    .default(sql`gen_random_uuid()`),
+  title: text("titulo"),
+  description: text("descricao"),
+  type: text("tipo").notNull().default("nota"), // "nota" ou "tarefa"
+  tasks: text("tasks"), // JSON stringificado com array de tarefas
+  createdAt: timestamp("created_at", {
+    mode: "date",
+    withTimezone: true,
+  })
+    .notNull()
+    .defaultNow(),
+  userId: text("user_id")
+    .notNull()
+    .references(() => user.id, { onDelete: "cascade" }),
+});
+
+export const savedInsights = pgTable(
+  "saved_insights",
+  {
+    id: uuid("id")
+      .primaryKey()
+      .default(sql`gen_random_uuid()`),
+    userId: text("user_id")
+      .notNull()
+      .references(() => user.id, { onDelete: "cascade" }),
+    period: text("period").notNull(),
+    modelId: text("model_id").notNull(),
+    data: text("data").notNull(), // JSON stringificado com as análises
+    createdAt: timestamp("created_at", {
+      mode: "date",
+      withTimezone: true,
+    })
+      .notNull()
+      .defaultNow(),
+    updatedAt: timestamp("updated_at", {
+      mode: "date",
+      withTimezone: true,
+    })
+      .notNull()
+      .defaultNow(),
+  },
+  (table) => ({
+    userPeriodIdx: uniqueIndex("saved_insights_user_period_idx").on(
+      table.userId,
+      table.period
+    ),
+  })
+);
+
+export const installmentAnticipations = pgTable(
+  "installment_anticipations",
+  {
+    id: uuid("id")
+      .primaryKey()
+      .default(sql`gen_random_uuid()`),
+    seriesId: uuid("series_id").notNull(),
+    anticipationPeriod: text("periodo_antecipacao").notNull(),
+    anticipationDate: date("data_antecipacao", { mode: "date" }).notNull(),
+    anticipatedInstallmentIds: jsonb("parcelas_antecipadas")
+      .notNull()
+      .$type<string[]>(),
+    totalAmount: numeric("valor_total", { precision: 12, scale: 2 }).notNull(),
+    installmentCount: smallint("qtde_parcelas").notNull(),
+    discount: numeric("desconto", { precision: 12, scale: 2 })
+      .notNull()
+      .default("0"),
+    lancamentoId: uuid("lancamento_id")
+      .notNull()
+      .references(() => lancamentos.id, { onDelete: "cascade" }),
+    pagadorId: uuid("pagador_id").references(() => pagadores.id, {
+      onDelete: "cascade",
+    }),
+    categoriaId: uuid("categoria_id").references(() => categorias.id, {
+      onDelete: "cascade",
+    }),
+    note: text("anotacao"),
+    userId: text("user_id")
+      .notNull()
+      .references(() => user.id, { onDelete: "cascade" }),
+    createdAt: timestamp("created_at", {
+      mode: "date",
+      withTimezone: true,
+    })
+      .notNull()
+      .defaultNow(),
+  },
+  (table) => ({
+    seriesIdIdx: index("installment_anticipations_series_id_idx").on(
+      table.seriesId
+    ),
+    userIdIdx: index("installment_anticipations_user_id_idx").on(table.userId),
+  })
+);
+
+export const lancamentos = pgTable("lancamentos", {
+  id: uuid("id")
+    .primaryKey()
+    .default(sql`gen_random_uuid()`),
+  condition: text("condicao").notNull(),
+  name: text("nome").notNull(),
+  paymentMethod: text("forma_pagamento").notNull(),
+  note: text("anotacao"),
+  amount: numeric("valor", { precision: 12, scale: 2 }).notNull(),
+  purchaseDate: date("data_compra", { mode: "date" }).notNull(),
+  transactionType: text("tipo_transacao").notNull(),
+  installmentCount: smallint("qtde_parcela"),
+  period: text("periodo").notNull(),
+  currentInstallment: smallint("parcela_atual"),
+  recurrenceCount: integer("qtde_recorrencia"),
+  dueDate: date("data_vencimento", { mode: "date" }),
+  boletoPaymentDate: date("dt_pagamento_boleto", { mode: "date" }),
+  isSettled: boolean("realizado").default(false),
+  isDivided: boolean("dividido").default(false),
+  isAnticipated: boolean("antecipado").default(false),
+  anticipationId: uuid("antecipacao_id").references(
+    () => installmentAnticipations.id,
+    { onDelete: "set null" }
+  ),
+  createdAt: timestamp("created_at", {
+    mode: "date",
+    withTimezone: true,
+  })
+    .notNull()
+    .defaultNow(),
+  userId: text("user_id")
+    .notNull()
+    .references(() => user.id, { onDelete: "cascade" }),
+  cartaoId: uuid("cartao_id").references(() => cartoes.id, {
+    onDelete: "cascade",
+    onUpdate: "cascade",
+  }),
+  contaId: uuid("conta_id").references(() => contas.id, {
+    onDelete: "cascade",
+    onUpdate: "cascade",
+  }),
+  categoriaId: uuid("categoria_id").references(() => categorias.id, {
+    onDelete: "cascade",
+    onUpdate: "cascade",
+  }),
+  pagadorId: uuid("pagador_id").references(() => pagadores.id, {
+    onDelete: "cascade",
+    onUpdate: "cascade",
+  }),
+  seriesId: uuid("series_id"),
+  transferId: uuid("transfer_id"),
+});
+
+export const userRelations = relations(user, ({ many, one }) => ({
+  accounts: many(account),
+  sessions: many(session),
+  anotacoes: many(anotacoes),
+  cartoes: many(cartoes),
+  categorias: many(categorias),
+  contas: many(contas),
+  faturas: many(faturas),
+  lancamentos: many(lancamentos),
+  orcamentos: many(orcamentos),
+  pagadores: many(pagadores),
+  installmentAnticipations: many(installmentAnticipations),
+}));
+
+export const accountRelations = relations(account, ({ one }) => ({
+  user: one(user, {
+    fields: [account.userId],
+    references: [user.id],
+  }),
+}));
+
+export const sessionRelations = relations(session, ({ one }) => ({
+  user: one(user, {
+    fields: [session.userId],
+    references: [user.id],
+  }),
+}));
+
+export const contasRelations = relations(contas, ({ one, many }) => ({
+  user: one(user, {
+    fields: [contas.userId],
+    references: [user.id],
+  }),
+  cartoes: many(cartoes),
+  lancamentos: many(lancamentos),
+}));
+
+export const categoriasRelations = relations(categorias, ({ one, many }) => ({
+  user: one(user, {
+    fields: [categorias.userId],
+    references: [user.id],
+  }),
+  lancamentos: many(lancamentos),
+  orcamentos: many(orcamentos),
+}));
+
+export const pagadoresRelations = relations(pagadores, ({ one, many }) => ({
+  user: one(user, {
+    fields: [pagadores.userId],
+    references: [user.id],
+  }),
+  lancamentos: many(lancamentos),
+  shares: many(pagadorShares),
+}));
+
+export const pagadorSharesRelations = relations(pagadorShares, ({ one }) => ({
+  pagador: one(pagadores, {
+    fields: [pagadorShares.pagadorId],
+    references: [pagadores.id],
+  }),
+  sharedWithUser: one(user, {
+    fields: [pagadorShares.sharedWithUserId],
+    references: [user.id],
+  }),
+  createdByUser: one(user, {
+    fields: [pagadorShares.createdByUserId],
+    references: [user.id],
+  }),
+}));
+
+export const cartoesRelations = relations(cartoes, ({ one, many }) => ({
+  user: one(user, {
+    fields: [cartoes.userId],
+    references: [user.id],
+  }),
+  conta: one(contas, {
+    fields: [cartoes.contaId],
+    references: [contas.id],
+  }),
+  faturas: many(faturas),
+  lancamentos: many(lancamentos),
+}));
+
+export const faturasRelations = relations(faturas, ({ one }) => ({
+  user: one(user, {
+    fields: [faturas.userId],
+    references: [user.id],
+  }),
+  cartao: one(cartoes, {
+    fields: [faturas.cartaoId],
+    references: [cartoes.id],
+  }),
+}));
+
+export const orcamentosRelations = relations(orcamentos, ({ one }) => ({
+  user: one(user, {
+    fields: [orcamentos.userId],
+    references: [user.id],
+  }),
+  categoria: one(categorias, {
+    fields: [orcamentos.categoriaId],
+    references: [categorias.id],
+  }),
+}));
+
+export const anotacoesRelations = relations(anotacoes, ({ one }) => ({
+  user: one(user, {
+    fields: [anotacoes.userId],
+    references: [user.id],
+  }),
+}));
+
+export const savedInsightsRelations = relations(savedInsights, ({ one }) => ({
+  user: one(user, {
+    fields: [savedInsights.userId],
+    references: [user.id],
+  }),
+}));
+
+export const lancamentosRelations = relations(lancamentos, ({ one }) => ({
+  user: one(user, {
+    fields: [lancamentos.userId],
+    references: [user.id],
+  }),
+  cartao: one(cartoes, {
+    fields: [lancamentos.cartaoId],
+    references: [cartoes.id],
+  }),
+  conta: one(contas, {
+    fields: [lancamentos.contaId],
+    references: [contas.id],
+  }),
+  categoria: one(categorias, {
+    fields: [lancamentos.categoriaId],
+    references: [categorias.id],
+  }),
+  pagador: one(pagadores, {
+    fields: [lancamentos.pagadorId],
+    references: [pagadores.id],
+  }),
+  anticipation: one(installmentAnticipations, {
+    fields: [lancamentos.anticipationId],
+    references: [installmentAnticipations.id],
+  }),
+}));
+
+export const installmentAnticipationsRelations = relations(
+  installmentAnticipations,
+  ({ one, many }) => ({
+    user: one(user, {
+      fields: [installmentAnticipations.userId],
+      references: [user.id],
+    }),
+    lancamento: one(lancamentos, {
+      fields: [installmentAnticipations.lancamentoId],
+      references: [lancamentos.id],
+    }),
+    pagador: one(pagadores, {
+      fields: [installmentAnticipations.pagadorId],
+      references: [pagadores.id],
+    }),
+    categoria: one(categorias, {
+      fields: [installmentAnticipations.categoriaId],
+      references: [categorias.id],
+    }),
+  })
+);
+
+export type User = typeof user.$inferSelect;
+export type NewUser = typeof user.$inferInsert;
+export type Account = typeof account.$inferSelect;
+export type Session = typeof session.$inferSelect;
+export type Verification = typeof verification.$inferSelect;
+export type Conta = typeof contas.$inferSelect;
+export type Categoria = typeof categorias.$inferSelect;
+export type Pagador = typeof pagadores.$inferSelect;
+export type Cartao = typeof cartoes.$inferSelect;
+export type Fatura = typeof faturas.$inferSelect;
+export type Orcamento = typeof orcamentos.$inferSelect;
+export type Anotacao = typeof anotacoes.$inferSelect;
+export type SavedInsight = typeof savedInsights.$inferSelect;
+export type Lancamento = typeof lancamentos.$inferSelect;
+export type InstallmentAnticipation =
+  typeof installmentAnticipations.$inferSelect;
diff --git a/docker-compose.yml b/docker-compose.yml
new file mode 100644
index 0000000..f98ea2e
--- /dev/null
+++ b/docker-compose.yml
@@ -0,0 +1,162 @@
+# Docker Compose para Next.js + PostgreSQL
+name: opensheets
+
+# MODOS DE USO:
+# 1. Banco LOCAL (PostgreSQL em container):
+#    - Configure DB_PROVIDER=local no .env
+#    - Execute: docker compose up --build
+#
+# 2. Banco REMOTO (ex: Supabase):
+#    - Configure DB_PROVIDER=remote no .env
+#    - Configure DATABASE_URL com a URL do banco remoto
+#    - Execute: docker compose up app --build (apenas o serviço app)
+#
+# 3. Para parar todos os serviços:
+#    - Execute: docker compose down
+#
+# 4. Para remover volumes (CUIDADO: apaga dados do banco local):
+#    - Execute: docker compose down -v
+
+services:
+  # ============================================
+  # Serviço: PostgreSQL (Banco de dados local)
+  # ============================================
+  db:
+    image: postgres:18-alpine
+    container_name: opensheets_postgres
+    restart: unless-stopped
+
+    environment:
+      POSTGRES_USER: ${POSTGRES_USER:-opensheets}
+      POSTGRES_PASSWORD: ${POSTGRES_PASSWORD:-opensheets_dev_password}
+      POSTGRES_DB: ${POSTGRES_DB:-opensheets_db}
+      # Configurações de performance
+      POSTGRES_INITDB_ARGS: "-E UTF8 --locale=C"
+
+    ports:
+      # Mapeia porta 5432 do container para 5432 do host
+      # Útil para conectar com ferramentas externas (ex: DBeaver, pgAdmin)
+      - "${DB_PORT:-5432}:5432"
+
+    volumes:
+      # Volume nomeado para persistência de dados
+      # Os dados sobrevivem ao restart do container
+      - postgres_data:/var/lib/postgresql/data
+      # Script de inicialização (cria extensão pgcrypto automaticamente)
+      - ./scripts/postgres/init.sql:/docker-entrypoint-initdb.d/init.sql:ro
+
+    healthcheck:
+      test:
+        [
+          "CMD-SHELL",
+          "pg_isready -U ${POSTGRES_USER:-opensheets} -d ${POSTGRES_DB:-opensheets_db}",
+        ]
+      interval: 10s
+      timeout: 5s
+      retries: 5
+      start_period: 10s
+
+    networks:
+      - opensheets_network
+
+    # Descomentar para ativar logs de queries (debug)
+    # command: ["postgres", "-c", "log_statement=all"]
+
+  # ============================================
+  # Serviço: Aplicação Next.js
+  # ============================================
+  app:
+    build:
+      context: .
+      dockerfile: Dockerfile
+
+    container_name: opensheets_app
+    restart: unless-stopped
+
+    ports:
+      # Mapeia porta 3000 do container para 3000 do host
+      - "${APP_PORT:-3000}:3000"
+
+    environment:
+      # Variáveis de ambiente da aplicação
+      NODE_ENV: production
+
+      # DATABASE_URL será definida dinamicamente baseada em DB_PROVIDER
+      # Se DB_PROVIDER=local, usa o serviço 'db'
+      # Se DB_PROVIDER=remote, usa a DATABASE_URL do .env
+      DATABASE_URL: ${DATABASE_URL}
+
+      # Outras variáveis de ambiente necessárias
+      BETTER_AUTH_SECRET: ${BETTER_AUTH_SECRET}
+      BETTER_AUTH_URL: ${BETTER_AUTH_URL:-http://localhost:3000}
+
+      # Configurações de email (se usar)
+      RESEND_API_KEY: ${RESEND_API_KEY:-}
+      EMAIL_FROM: ${EMAIL_FROM:-}
+
+      # Configurações de OAuth (se usar)
+      GOOGLE_CLIENT_ID: ${GOOGLE_CLIENT_ID:-}
+      GOOGLE_CLIENT_SECRET: ${GOOGLE_CLIENT_SECRET:-}
+      GITHUB_CLIENT_ID: ${GITHUB_CLIENT_ID:-}
+      GITHUB_CLIENT_SECRET: ${GITHUB_CLIENT_SECRET:-}
+
+      # Configurações de AI providers (se usar)
+      ANTHROPIC_API_KEY: ${ANTHROPIC_API_KEY:-}
+      OPENAI_API_KEY: ${OPENAI_API_KEY:-}
+      GOOGLE_GENERATIVE_AI_API_KEY: ${GOOGLE_GENERATIVE_AI_API_KEY:-}
+      OPENROUTER_API_KEY: ${OPENROUTER_API_KEY:-}
+
+    # Só depende do 'db' se estiver usando banco local
+    # Para banco remoto, comente a linha abaixo ou suba apenas: docker compose up app
+    depends_on:
+      db:
+        condition: service_healthy
+
+    networks:
+      - opensheets_network
+
+    # Script de inicialização: roda migrations antes de iniciar o app
+    # ATENÇÃO: Em produção, considere rodar migrations separadamente por segurança
+    entrypoint: ["/bin/sh", "-c"]
+    command:
+      - |
+        echo "🚀 Aguardando banco de dados..."
+        sleep 5
+
+        echo "📦 Rodando migrations..."
+        pnpm db:push || echo "⚠️  Migrations falharam ou já estão atualizadas"
+
+        echo "✅ Iniciando aplicação Next.js..."
+        node server.js
+
+    # Healthcheck da aplicação
+    healthcheck:
+      test:
+        [
+          "CMD",
+          "wget",
+          "--quiet",
+          "--tries=1",
+          "--spider",
+          "http://localhost:3000/api/health",
+        ]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+      start_period: 40s
+
+# ============================================
+# Volumes
+# ============================================
+volumes:
+  postgres_data:
+    name: opensheets_postgres_data
+    driver: local
+
+# ============================================
+# Networks
+# ============================================
+networks:
+  opensheets_network:
+    name: opensheets_network
+    driver: bridge
diff --git a/drizzle.config.ts b/drizzle.config.ts
new file mode 100644
index 0000000..d79dbef
--- /dev/null
+++ b/drizzle.config.ts
@@ -0,0 +1,10 @@
+import type { Config } from "drizzle-kit";
+
+export default {
+  schema: "./db/schema.ts",
+  out: "./drizzle",
+  dialect: "postgresql",
+  dbCredentials: {
+    url: process.env.DATABASE_URL!,
+  },
+} satisfies Config;
diff --git a/drizzle/0000_flashy_manta.sql b/drizzle/0000_flashy_manta.sql
new file mode 100644
index 0000000..391dfaa
--- /dev/null
+++ b/drizzle/0000_flashy_manta.sql
@@ -0,0 +1,224 @@
+CREATE TABLE "account" (
+	"id" text PRIMARY KEY NOT NULL,
+	"accountId" text NOT NULL,
+	"providerId" text NOT NULL,
+	"userId" text NOT NULL,
+	"accessToken" text,
+	"refreshToken" text,
+	"idToken" text,
+	"accessTokenExpiresAt" timestamp with time zone,
+	"refreshTokenExpiresAt" timestamp with time zone,
+	"scope" text,
+	"password" text,
+	"createdAt" timestamp with time zone NOT NULL,
+	"updatedAt" timestamp with time zone NOT NULL
+);
+--> statement-breakpoint
+CREATE TABLE "anotacoes" (
+	"id" uuid PRIMARY KEY DEFAULT gen_random_uuid() NOT NULL,
+	"titulo" text,
+	"descricao" text,
+	"tipo" text DEFAULT 'nota' NOT NULL,
+	"tasks" text,
+	"created_at" timestamp with time zone DEFAULT now() NOT NULL,
+	"user_id" text NOT NULL
+);
+--> statement-breakpoint
+CREATE TABLE "cartoes" (
+	"id" uuid PRIMARY KEY DEFAULT gen_random_uuid() NOT NULL,
+	"nome" text NOT NULL,
+	"dt_fechamento" text NOT NULL,
+	"dt_vencimento" text NOT NULL,
+	"anotacao" text,
+	"limite" numeric(10, 2),
+	"bandeira" text,
+	"logo" text,
+	"status" text NOT NULL,
+	"created_at" timestamp with time zone DEFAULT now() NOT NULL,
+	"user_id" text NOT NULL,
+	"conta_id" uuid NOT NULL
+);
+--> statement-breakpoint
+CREATE TABLE "categorias" (
+	"id" uuid PRIMARY KEY DEFAULT gen_random_uuid() NOT NULL,
+	"nome" text NOT NULL,
+	"tipo" text NOT NULL,
+	"icone" text,
+	"created_at" timestamp with time zone DEFAULT now() NOT NULL,
+	"user_id" text NOT NULL
+);
+--> statement-breakpoint
+CREATE TABLE "contas" (
+	"id" uuid PRIMARY KEY DEFAULT gen_random_uuid() NOT NULL,
+	"nome" text NOT NULL,
+	"tipo_conta" text NOT NULL,
+	"anotacao" text,
+	"status" text NOT NULL,
+	"logo" text NOT NULL,
+	"saldo_inicial" numeric(12, 2) DEFAULT '0' NOT NULL,
+	"excluir_do_saldo" boolean DEFAULT false NOT NULL,
+	"user_id" text NOT NULL,
+	"created_at" timestamp with time zone DEFAULT now() NOT NULL
+);
+--> statement-breakpoint
+CREATE TABLE "faturas" (
+	"id" uuid PRIMARY KEY DEFAULT gen_random_uuid() NOT NULL,
+	"status_pagamento" text,
+	"periodo" text,
+	"created_at" timestamp with time zone DEFAULT now() NOT NULL,
+	"user_id" text NOT NULL,
+	"cartao_id" uuid
+);
+--> statement-breakpoint
+CREATE TABLE "installment_anticipations" (
+	"id" uuid PRIMARY KEY DEFAULT gen_random_uuid() NOT NULL,
+	"series_id" uuid NOT NULL,
+	"periodo_antecipacao" text NOT NULL,
+	"data_antecipacao" date NOT NULL,
+	"parcelas_antecipadas" jsonb NOT NULL,
+	"valor_total" numeric(12, 2) NOT NULL,
+	"qtde_parcelas" smallint NOT NULL,
+	"desconto" numeric(12, 2) DEFAULT '0' NOT NULL,
+	"lancamento_id" uuid NOT NULL,
+	"pagador_id" uuid,
+	"categoria_id" uuid,
+	"anotacao" text,
+	"user_id" text NOT NULL,
+	"created_at" timestamp with time zone DEFAULT now() NOT NULL
+);
+--> statement-breakpoint
+CREATE TABLE "lancamentos" (
+	"id" uuid PRIMARY KEY DEFAULT gen_random_uuid() NOT NULL,
+	"condicao" text NOT NULL,
+	"nome" text NOT NULL,
+	"forma_pagamento" text NOT NULL,
+	"anotacao" text,
+	"valor" numeric(12, 2) NOT NULL,
+	"data_compra" date NOT NULL,
+	"tipo_transacao" text NOT NULL,
+	"qtde_parcela" smallint,
+	"periodo" text NOT NULL,
+	"parcela_atual" smallint,
+	"qtde_recorrencia" integer,
+	"data_vencimento" date,
+	"dt_pagamento_boleto" date,
+	"realizado" boolean DEFAULT false,
+	"dividido" boolean DEFAULT false,
+	"antecipado" boolean DEFAULT false,
+	"antecipacao_id" uuid,
+	"created_at" timestamp with time zone DEFAULT now() NOT NULL,
+	"user_id" text NOT NULL,
+	"cartao_id" uuid,
+	"conta_id" uuid,
+	"categoria_id" uuid,
+	"pagador_id" uuid,
+	"series_id" uuid,
+	"transfer_id" uuid
+);
+--> statement-breakpoint
+CREATE TABLE "orcamentos" (
+	"id" uuid PRIMARY KEY DEFAULT gen_random_uuid() NOT NULL,
+	"valor" numeric(10, 2) NOT NULL,
+	"periodo" text NOT NULL,
+	"created_at" timestamp with time zone DEFAULT now() NOT NULL,
+	"user_id" text NOT NULL,
+	"categoria_id" uuid
+);
+--> statement-breakpoint
+CREATE TABLE "pagador_shares" (
+	"id" uuid PRIMARY KEY DEFAULT gen_random_uuid() NOT NULL,
+	"pagador_id" uuid NOT NULL,
+	"shared_with_user_id" text NOT NULL,
+	"permission" text DEFAULT 'read' NOT NULL,
+	"created_by_user_id" text NOT NULL,
+	"created_at" timestamp with time zone DEFAULT now() NOT NULL
+);
+--> statement-breakpoint
+CREATE TABLE "pagadores" (
+	"id" uuid PRIMARY KEY DEFAULT gen_random_uuid() NOT NULL,
+	"nome" text NOT NULL,
+	"email" text,
+	"avatar_url" text,
+	"status" text NOT NULL,
+	"anotacao" text,
+	"role" text,
+	"is_auto_send" boolean DEFAULT false NOT NULL,
+	"share_code" text DEFAULT substr(encode(gen_random_bytes(24), 'base64'), 1, 24) NOT NULL,
+	"last_mail" timestamp with time zone,
+	"created_at" timestamp with time zone DEFAULT now() NOT NULL,
+	"user_id" text NOT NULL
+);
+--> statement-breakpoint
+CREATE TABLE "saved_insights" (
+	"id" uuid PRIMARY KEY DEFAULT gen_random_uuid() NOT NULL,
+	"user_id" text NOT NULL,
+	"period" text NOT NULL,
+	"model_id" text NOT NULL,
+	"data" text NOT NULL,
+	"created_at" timestamp with time zone DEFAULT now() NOT NULL,
+	"updated_at" timestamp with time zone DEFAULT now() NOT NULL
+);
+--> statement-breakpoint
+CREATE TABLE "session" (
+	"id" text PRIMARY KEY NOT NULL,
+	"expiresAt" timestamp with time zone NOT NULL,
+	"token" text NOT NULL,
+	"createdAt" timestamp with time zone NOT NULL,
+	"updatedAt" timestamp with time zone NOT NULL,
+	"ipAddress" text,
+	"userAgent" text,
+	"userId" text NOT NULL,
+	CONSTRAINT "session_token_unique" UNIQUE("token")
+);
+--> statement-breakpoint
+CREATE TABLE "user" (
+	"id" text PRIMARY KEY NOT NULL,
+	"name" text NOT NULL,
+	"email" text NOT NULL,
+	"emailVerified" boolean NOT NULL,
+	"image" text,
+	"createdAt" timestamp with time zone NOT NULL,
+	"updatedAt" timestamp with time zone NOT NULL,
+	CONSTRAINT "user_email_unique" UNIQUE("email")
+);
+--> statement-breakpoint
+CREATE TABLE "verification" (
+	"id" text PRIMARY KEY NOT NULL,
+	"identifier" text NOT NULL,
+	"value" text NOT NULL,
+	"expiresAt" timestamp with time zone NOT NULL,
+	"createdAt" timestamp with time zone,
+	"updatedAt" timestamp with time zone
+);
+--> statement-breakpoint
+ALTER TABLE "account" ADD CONSTRAINT "account_userId_user_id_fk" FOREIGN KEY ("userId") REFERENCES "public"."user"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+ALTER TABLE "anotacoes" ADD CONSTRAINT "anotacoes_user_id_user_id_fk" FOREIGN KEY ("user_id") REFERENCES "public"."user"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+ALTER TABLE "cartoes" ADD CONSTRAINT "cartoes_user_id_user_id_fk" FOREIGN KEY ("user_id") REFERENCES "public"."user"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+ALTER TABLE "cartoes" ADD CONSTRAINT "cartoes_conta_id_contas_id_fk" FOREIGN KEY ("conta_id") REFERENCES "public"."contas"("id") ON DELETE cascade ON UPDATE cascade;--> statement-breakpoint
+ALTER TABLE "categorias" ADD CONSTRAINT "categorias_user_id_user_id_fk" FOREIGN KEY ("user_id") REFERENCES "public"."user"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+ALTER TABLE "contas" ADD CONSTRAINT "contas_user_id_user_id_fk" FOREIGN KEY ("user_id") REFERENCES "public"."user"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+ALTER TABLE "faturas" ADD CONSTRAINT "faturas_user_id_user_id_fk" FOREIGN KEY ("user_id") REFERENCES "public"."user"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+ALTER TABLE "faturas" ADD CONSTRAINT "faturas_cartao_id_cartoes_id_fk" FOREIGN KEY ("cartao_id") REFERENCES "public"."cartoes"("id") ON DELETE cascade ON UPDATE cascade;--> statement-breakpoint
+ALTER TABLE "installment_anticipations" ADD CONSTRAINT "installment_anticipations_lancamento_id_lancamentos_id_fk" FOREIGN KEY ("lancamento_id") REFERENCES "public"."lancamentos"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+ALTER TABLE "installment_anticipations" ADD CONSTRAINT "installment_anticipations_pagador_id_pagadores_id_fk" FOREIGN KEY ("pagador_id") REFERENCES "public"."pagadores"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+ALTER TABLE "installment_anticipations" ADD CONSTRAINT "installment_anticipations_categoria_id_categorias_id_fk" FOREIGN KEY ("categoria_id") REFERENCES "public"."categorias"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+ALTER TABLE "installment_anticipations" ADD CONSTRAINT "installment_anticipations_user_id_user_id_fk" FOREIGN KEY ("user_id") REFERENCES "public"."user"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+ALTER TABLE "lancamentos" ADD CONSTRAINT "lancamentos_antecipacao_id_installment_anticipations_id_fk" FOREIGN KEY ("antecipacao_id") REFERENCES "public"."installment_anticipations"("id") ON DELETE set null ON UPDATE no action;--> statement-breakpoint
+ALTER TABLE "lancamentos" ADD CONSTRAINT "lancamentos_user_id_user_id_fk" FOREIGN KEY ("user_id") REFERENCES "public"."user"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+ALTER TABLE "lancamentos" ADD CONSTRAINT "lancamentos_cartao_id_cartoes_id_fk" FOREIGN KEY ("cartao_id") REFERENCES "public"."cartoes"("id") ON DELETE cascade ON UPDATE cascade;--> statement-breakpoint
+ALTER TABLE "lancamentos" ADD CONSTRAINT "lancamentos_conta_id_contas_id_fk" FOREIGN KEY ("conta_id") REFERENCES "public"."contas"("id") ON DELETE cascade ON UPDATE cascade;--> statement-breakpoint
+ALTER TABLE "lancamentos" ADD CONSTRAINT "lancamentos_categoria_id_categorias_id_fk" FOREIGN KEY ("categoria_id") REFERENCES "public"."categorias"("id") ON DELETE cascade ON UPDATE cascade;--> statement-breakpoint
+ALTER TABLE "lancamentos" ADD CONSTRAINT "lancamentos_pagador_id_pagadores_id_fk" FOREIGN KEY ("pagador_id") REFERENCES "public"."pagadores"("id") ON DELETE cascade ON UPDATE cascade;--> statement-breakpoint
+ALTER TABLE "orcamentos" ADD CONSTRAINT "orcamentos_user_id_user_id_fk" FOREIGN KEY ("user_id") REFERENCES "public"."user"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+ALTER TABLE "orcamentos" ADD CONSTRAINT "orcamentos_categoria_id_categorias_id_fk" FOREIGN KEY ("categoria_id") REFERENCES "public"."categorias"("id") ON DELETE cascade ON UPDATE cascade;--> statement-breakpoint
+ALTER TABLE "pagador_shares" ADD CONSTRAINT "pagador_shares_pagador_id_pagadores_id_fk" FOREIGN KEY ("pagador_id") REFERENCES "public"."pagadores"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+ALTER TABLE "pagador_shares" ADD CONSTRAINT "pagador_shares_shared_with_user_id_user_id_fk" FOREIGN KEY ("shared_with_user_id") REFERENCES "public"."user"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+ALTER TABLE "pagador_shares" ADD CONSTRAINT "pagador_shares_created_by_user_id_user_id_fk" FOREIGN KEY ("created_by_user_id") REFERENCES "public"."user"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+ALTER TABLE "pagadores" ADD CONSTRAINT "pagadores_user_id_user_id_fk" FOREIGN KEY ("user_id") REFERENCES "public"."user"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+ALTER TABLE "saved_insights" ADD CONSTRAINT "saved_insights_user_id_user_id_fk" FOREIGN KEY ("user_id") REFERENCES "public"."user"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+ALTER TABLE "session" ADD CONSTRAINT "session_userId_user_id_fk" FOREIGN KEY ("userId") REFERENCES "public"."user"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+CREATE INDEX "installment_anticipations_series_id_idx" ON "installment_anticipations" USING btree ("series_id");--> statement-breakpoint
+CREATE INDEX "installment_anticipations_user_id_idx" ON "installment_anticipations" USING btree ("user_id");--> statement-breakpoint
+CREATE UNIQUE INDEX "pagador_shares_unique" ON "pagador_shares" USING btree ("pagador_id","shared_with_user_id");--> statement-breakpoint
+CREATE UNIQUE INDEX "pagadores_share_code_key" ON "pagadores" USING btree ("share_code");--> statement-breakpoint
+CREATE UNIQUE INDEX "saved_insights_user_period_idx" ON "saved_insights" USING btree ("user_id","period");
\ No newline at end of file
diff --git a/drizzle/meta/0000_snapshot.json b/drizzle/meta/0000_snapshot.json
new file mode 100644
index 0000000..3ef3edf
--- /dev/null
+++ b/drizzle/meta/0000_snapshot.json
@@ -0,0 +1,1581 @@
+{
+  "id": "8255a4f5-92ef-42dc-bd7f-959b6b2dae0f",
+  "prevId": "00000000-0000-0000-0000-000000000000",
+  "version": "7",
+  "dialect": "postgresql",
+  "tables": {
+    "public.account": {
+      "name": "account",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "accountId": {
+          "name": "accountId",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "providerId": {
+          "name": "providerId",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "userId": {
+          "name": "userId",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "accessToken": {
+          "name": "accessToken",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "refreshToken": {
+          "name": "refreshToken",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "idToken": {
+          "name": "idToken",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "accessTokenExpiresAt": {
+          "name": "accessTokenExpiresAt",
+          "type": "timestamp with time zone",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "refreshTokenExpiresAt": {
+          "name": "refreshTokenExpiresAt",
+          "type": "timestamp with time zone",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "scope": {
+          "name": "scope",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "password": {
+          "name": "password",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "createdAt": {
+          "name": "createdAt",
+          "type": "timestamp with time zone",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "updatedAt": {
+          "name": "updatedAt",
+          "type": "timestamp with time zone",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "account_userId_user_id_fk": {
+          "name": "account_userId_user_id_fk",
+          "tableFrom": "account",
+          "tableTo": "user",
+          "columnsFrom": [
+            "userId"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.anotacoes": {
+      "name": "anotacoes",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "uuid",
+          "primaryKey": true,
+          "notNull": true,
+          "default": "gen_random_uuid()"
+        },
+        "titulo": {
+          "name": "titulo",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "descricao": {
+          "name": "descricao",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "tipo": {
+          "name": "tipo",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'nota'"
+        },
+        "tasks": {
+          "name": "tasks",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp with time zone",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "anotacoes_user_id_user_id_fk": {
+          "name": "anotacoes_user_id_user_id_fk",
+          "tableFrom": "anotacoes",
+          "tableTo": "user",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.cartoes": {
+      "name": "cartoes",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "uuid",
+          "primaryKey": true,
+          "notNull": true,
+          "default": "gen_random_uuid()"
+        },
+        "nome": {
+          "name": "nome",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "dt_fechamento": {
+          "name": "dt_fechamento",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "dt_vencimento": {
+          "name": "dt_vencimento",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "anotacao": {
+          "name": "anotacao",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "limite": {
+          "name": "limite",
+          "type": "numeric(10, 2)",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "bandeira": {
+          "name": "bandeira",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "logo": {
+          "name": "logo",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "status": {
+          "name": "status",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp with time zone",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "conta_id": {
+          "name": "conta_id",
+          "type": "uuid",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "cartoes_user_id_user_id_fk": {
+          "name": "cartoes_user_id_user_id_fk",
+          "tableFrom": "cartoes",
+          "tableTo": "user",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "cartoes_conta_id_contas_id_fk": {
+          "name": "cartoes_conta_id_contas_id_fk",
+          "tableFrom": "cartoes",
+          "tableTo": "contas",
+          "columnsFrom": [
+            "conta_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "cascade"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.categorias": {
+      "name": "categorias",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "uuid",
+          "primaryKey": true,
+          "notNull": true,
+          "default": "gen_random_uuid()"
+        },
+        "nome": {
+          "name": "nome",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "tipo": {
+          "name": "tipo",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "icone": {
+          "name": "icone",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp with time zone",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "categorias_user_id_user_id_fk": {
+          "name": "categorias_user_id_user_id_fk",
+          "tableFrom": "categorias",
+          "tableTo": "user",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.contas": {
+      "name": "contas",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "uuid",
+          "primaryKey": true,
+          "notNull": true,
+          "default": "gen_random_uuid()"
+        },
+        "nome": {
+          "name": "nome",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "tipo_conta": {
+          "name": "tipo_conta",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "anotacao": {
+          "name": "anotacao",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "status": {
+          "name": "status",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "logo": {
+          "name": "logo",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "saldo_inicial": {
+          "name": "saldo_inicial",
+          "type": "numeric(12, 2)",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'0'"
+        },
+        "excluir_do_saldo": {
+          "name": "excluir_do_saldo",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "default": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp with time zone",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "contas_user_id_user_id_fk": {
+          "name": "contas_user_id_user_id_fk",
+          "tableFrom": "contas",
+          "tableTo": "user",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.faturas": {
+      "name": "faturas",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "uuid",
+          "primaryKey": true,
+          "notNull": true,
+          "default": "gen_random_uuid()"
+        },
+        "status_pagamento": {
+          "name": "status_pagamento",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "periodo": {
+          "name": "periodo",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp with time zone",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "cartao_id": {
+          "name": "cartao_id",
+          "type": "uuid",
+          "primaryKey": false,
+          "notNull": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "faturas_user_id_user_id_fk": {
+          "name": "faturas_user_id_user_id_fk",
+          "tableFrom": "faturas",
+          "tableTo": "user",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "faturas_cartao_id_cartoes_id_fk": {
+          "name": "faturas_cartao_id_cartoes_id_fk",
+          "tableFrom": "faturas",
+          "tableTo": "cartoes",
+          "columnsFrom": [
+            "cartao_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "cascade"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.installment_anticipations": {
+      "name": "installment_anticipations",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "uuid",
+          "primaryKey": true,
+          "notNull": true,
+          "default": "gen_random_uuid()"
+        },
+        "series_id": {
+          "name": "series_id",
+          "type": "uuid",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "periodo_antecipacao": {
+          "name": "periodo_antecipacao",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "data_antecipacao": {
+          "name": "data_antecipacao",
+          "type": "date",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "parcelas_antecipadas": {
+          "name": "parcelas_antecipadas",
+          "type": "jsonb",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "valor_total": {
+          "name": "valor_total",
+          "type": "numeric(12, 2)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "qtde_parcelas": {
+          "name": "qtde_parcelas",
+          "type": "smallint",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "desconto": {
+          "name": "desconto",
+          "type": "numeric(12, 2)",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'0'"
+        },
+        "lancamento_id": {
+          "name": "lancamento_id",
+          "type": "uuid",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "pagador_id": {
+          "name": "pagador_id",
+          "type": "uuid",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "categoria_id": {
+          "name": "categoria_id",
+          "type": "uuid",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "anotacao": {
+          "name": "anotacao",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp with time zone",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        }
+      },
+      "indexes": {
+        "installment_anticipations_series_id_idx": {
+          "name": "installment_anticipations_series_id_idx",
+          "columns": [
+            {
+              "expression": "series_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        },
+        "installment_anticipations_user_id_idx": {
+          "name": "installment_anticipations_user_id_idx",
+          "columns": [
+            {
+              "expression": "user_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {
+        "installment_anticipations_lancamento_id_lancamentos_id_fk": {
+          "name": "installment_anticipations_lancamento_id_lancamentos_id_fk",
+          "tableFrom": "installment_anticipations",
+          "tableTo": "lancamentos",
+          "columnsFrom": [
+            "lancamento_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "installment_anticipations_pagador_id_pagadores_id_fk": {
+          "name": "installment_anticipations_pagador_id_pagadores_id_fk",
+          "tableFrom": "installment_anticipations",
+          "tableTo": "pagadores",
+          "columnsFrom": [
+            "pagador_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "installment_anticipations_categoria_id_categorias_id_fk": {
+          "name": "installment_anticipations_categoria_id_categorias_id_fk",
+          "tableFrom": "installment_anticipations",
+          "tableTo": "categorias",
+          "columnsFrom": [
+            "categoria_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "installment_anticipations_user_id_user_id_fk": {
+          "name": "installment_anticipations_user_id_user_id_fk",
+          "tableFrom": "installment_anticipations",
+          "tableTo": "user",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.lancamentos": {
+      "name": "lancamentos",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "uuid",
+          "primaryKey": true,
+          "notNull": true,
+          "default": "gen_random_uuid()"
+        },
+        "condicao": {
+          "name": "condicao",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "nome": {
+          "name": "nome",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "forma_pagamento": {
+          "name": "forma_pagamento",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "anotacao": {
+          "name": "anotacao",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "valor": {
+          "name": "valor",
+          "type": "numeric(12, 2)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "data_compra": {
+          "name": "data_compra",
+          "type": "date",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "tipo_transacao": {
+          "name": "tipo_transacao",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "qtde_parcela": {
+          "name": "qtde_parcela",
+          "type": "smallint",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "periodo": {
+          "name": "periodo",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "parcela_atual": {
+          "name": "parcela_atual",
+          "type": "smallint",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "qtde_recorrencia": {
+          "name": "qtde_recorrencia",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "data_vencimento": {
+          "name": "data_vencimento",
+          "type": "date",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "dt_pagamento_boleto": {
+          "name": "dt_pagamento_boleto",
+          "type": "date",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "realizado": {
+          "name": "realizado",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": false,
+          "default": false
+        },
+        "dividido": {
+          "name": "dividido",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": false,
+          "default": false
+        },
+        "antecipado": {
+          "name": "antecipado",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": false,
+          "default": false
+        },
+        "antecipacao_id": {
+          "name": "antecipacao_id",
+          "type": "uuid",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp with time zone",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "cartao_id": {
+          "name": "cartao_id",
+          "type": "uuid",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "conta_id": {
+          "name": "conta_id",
+          "type": "uuid",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "categoria_id": {
+          "name": "categoria_id",
+          "type": "uuid",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "pagador_id": {
+          "name": "pagador_id",
+          "type": "uuid",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "series_id": {
+          "name": "series_id",
+          "type": "uuid",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "transfer_id": {
+          "name": "transfer_id",
+          "type": "uuid",
+          "primaryKey": false,
+          "notNull": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "lancamentos_antecipacao_id_installment_anticipations_id_fk": {
+          "name": "lancamentos_antecipacao_id_installment_anticipations_id_fk",
+          "tableFrom": "lancamentos",
+          "tableTo": "installment_anticipations",
+          "columnsFrom": [
+            "antecipacao_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        },
+        "lancamentos_user_id_user_id_fk": {
+          "name": "lancamentos_user_id_user_id_fk",
+          "tableFrom": "lancamentos",
+          "tableTo": "user",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "lancamentos_cartao_id_cartoes_id_fk": {
+          "name": "lancamentos_cartao_id_cartoes_id_fk",
+          "tableFrom": "lancamentos",
+          "tableTo": "cartoes",
+          "columnsFrom": [
+            "cartao_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "cascade"
+        },
+        "lancamentos_conta_id_contas_id_fk": {
+          "name": "lancamentos_conta_id_contas_id_fk",
+          "tableFrom": "lancamentos",
+          "tableTo": "contas",
+          "columnsFrom": [
+            "conta_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "cascade"
+        },
+        "lancamentos_categoria_id_categorias_id_fk": {
+          "name": "lancamentos_categoria_id_categorias_id_fk",
+          "tableFrom": "lancamentos",
+          "tableTo": "categorias",
+          "columnsFrom": [
+            "categoria_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "cascade"
+        },
+        "lancamentos_pagador_id_pagadores_id_fk": {
+          "name": "lancamentos_pagador_id_pagadores_id_fk",
+          "tableFrom": "lancamentos",
+          "tableTo": "pagadores",
+          "columnsFrom": [
+            "pagador_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "cascade"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.orcamentos": {
+      "name": "orcamentos",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "uuid",
+          "primaryKey": true,
+          "notNull": true,
+          "default": "gen_random_uuid()"
+        },
+        "valor": {
+          "name": "valor",
+          "type": "numeric(10, 2)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "periodo": {
+          "name": "periodo",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp with time zone",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "categoria_id": {
+          "name": "categoria_id",
+          "type": "uuid",
+          "primaryKey": false,
+          "notNull": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "orcamentos_user_id_user_id_fk": {
+          "name": "orcamentos_user_id_user_id_fk",
+          "tableFrom": "orcamentos",
+          "tableTo": "user",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "orcamentos_categoria_id_categorias_id_fk": {
+          "name": "orcamentos_categoria_id_categorias_id_fk",
+          "tableFrom": "orcamentos",
+          "tableTo": "categorias",
+          "columnsFrom": [
+            "categoria_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "cascade"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.pagador_shares": {
+      "name": "pagador_shares",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "uuid",
+          "primaryKey": true,
+          "notNull": true,
+          "default": "gen_random_uuid()"
+        },
+        "pagador_id": {
+          "name": "pagador_id",
+          "type": "uuid",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "shared_with_user_id": {
+          "name": "shared_with_user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "permission": {
+          "name": "permission",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'read'"
+        },
+        "created_by_user_id": {
+          "name": "created_by_user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp with time zone",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        }
+      },
+      "indexes": {
+        "pagador_shares_unique": {
+          "name": "pagador_shares_unique",
+          "columns": [
+            {
+              "expression": "pagador_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            },
+            {
+              "expression": "shared_with_user_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": true,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {
+        "pagador_shares_pagador_id_pagadores_id_fk": {
+          "name": "pagador_shares_pagador_id_pagadores_id_fk",
+          "tableFrom": "pagador_shares",
+          "tableTo": "pagadores",
+          "columnsFrom": [
+            "pagador_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "pagador_shares_shared_with_user_id_user_id_fk": {
+          "name": "pagador_shares_shared_with_user_id_user_id_fk",
+          "tableFrom": "pagador_shares",
+          "tableTo": "user",
+          "columnsFrom": [
+            "shared_with_user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "pagador_shares_created_by_user_id_user_id_fk": {
+          "name": "pagador_shares_created_by_user_id_user_id_fk",
+          "tableFrom": "pagador_shares",
+          "tableTo": "user",
+          "columnsFrom": [
+            "created_by_user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.pagadores": {
+      "name": "pagadores",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "uuid",
+          "primaryKey": true,
+          "notNull": true,
+          "default": "gen_random_uuid()"
+        },
+        "nome": {
+          "name": "nome",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "email": {
+          "name": "email",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "avatar_url": {
+          "name": "avatar_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "status": {
+          "name": "status",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "anotacao": {
+          "name": "anotacao",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "role": {
+          "name": "role",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "is_auto_send": {
+          "name": "is_auto_send",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "default": false
+        },
+        "share_code": {
+          "name": "share_code",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "substr(encode(gen_random_bytes(24), 'base64'), 1, 24)"
+        },
+        "last_mail": {
+          "name": "last_mail",
+          "type": "timestamp with time zone",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp with time zone",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {
+        "pagadores_share_code_key": {
+          "name": "pagadores_share_code_key",
+          "columns": [
+            {
+              "expression": "share_code",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": true,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {
+        "pagadores_user_id_user_id_fk": {
+          "name": "pagadores_user_id_user_id_fk",
+          "tableFrom": "pagadores",
+          "tableTo": "user",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.saved_insights": {
+      "name": "saved_insights",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "uuid",
+          "primaryKey": true,
+          "notNull": true,
+          "default": "gen_random_uuid()"
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "period": {
+          "name": "period",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "model_id": {
+          "name": "model_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "data": {
+          "name": "data",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp with time zone",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp with time zone",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        }
+      },
+      "indexes": {
+        "saved_insights_user_period_idx": {
+          "name": "saved_insights_user_period_idx",
+          "columns": [
+            {
+              "expression": "user_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            },
+            {
+              "expression": "period",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": true,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {
+        "saved_insights_user_id_user_id_fk": {
+          "name": "saved_insights_user_id_user_id_fk",
+          "tableFrom": "saved_insights",
+          "tableTo": "user",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.session": {
+      "name": "session",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "expiresAt": {
+          "name": "expiresAt",
+          "type": "timestamp with time zone",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "token": {
+          "name": "token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "createdAt": {
+          "name": "createdAt",
+          "type": "timestamp with time zone",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "updatedAt": {
+          "name": "updatedAt",
+          "type": "timestamp with time zone",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "ipAddress": {
+          "name": "ipAddress",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "userAgent": {
+          "name": "userAgent",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "userId": {
+          "name": "userId",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "session_userId_user_id_fk": {
+          "name": "session_userId_user_id_fk",
+          "tableFrom": "session",
+          "tableTo": "user",
+          "columnsFrom": [
+            "userId"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "session_token_unique": {
+          "name": "session_token_unique",
+          "nullsNotDistinct": false,
+          "columns": [
+            "token"
+          ]
+        }
+      },
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.user": {
+      "name": "user",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "email": {
+          "name": "email",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "emailVerified": {
+          "name": "emailVerified",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "image": {
+          "name": "image",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "createdAt": {
+          "name": "createdAt",
+          "type": "timestamp with time zone",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "updatedAt": {
+          "name": "updatedAt",
+          "type": "timestamp with time zone",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "user_email_unique": {
+          "name": "user_email_unique",
+          "nullsNotDistinct": false,
+          "columns": [
+            "email"
+          ]
+        }
+      },
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.verification": {
+      "name": "verification",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "identifier": {
+          "name": "identifier",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "value": {
+          "name": "value",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "expiresAt": {
+          "name": "expiresAt",
+          "type": "timestamp with time zone",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "createdAt": {
+          "name": "createdAt",
+          "type": "timestamp with time zone",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "updatedAt": {
+          "name": "updatedAt",
+          "type": "timestamp with time zone",
+          "primaryKey": false,
+          "notNull": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    }
+  },
+  "enums": {},
+  "schemas": {},
+  "sequences": {},
+  "roles": {},
+  "policies": {},
+  "views": {},
+  "_meta": {
+    "columns": {},
+    "schemas": {},
+    "tables": {}
+  }
+}
\ No newline at end of file
diff --git a/drizzle/meta/_journal.json b/drizzle/meta/_journal.json
new file mode 100644
index 0000000..f178c4a
--- /dev/null
+++ b/drizzle/meta/_journal.json
@@ -0,0 +1,13 @@
+{
+  "version": "7",
+  "dialect": "postgresql",
+  "entries": [
+    {
+      "idx": 0,
+      "version": "7",
+      "when": 1762993507299,
+      "tag": "0000_flashy_manta",
+      "breakpoints": true
+    }
+  ]
+}
\ No newline at end of file
diff --git a/hooks/use-calculator-keyboard.ts b/hooks/use-calculator-keyboard.ts
new file mode 100644
index 0000000..be291fe
--- /dev/null
+++ b/hooks/use-calculator-keyboard.ts
@@ -0,0 +1,94 @@
+import { useEffect } from "react";
+
+type UseCalculatorKeyboardParams = {
+  canCopy: boolean;
+  onCopy: () => void | Promise<void>;
+  onPaste: () => void | Promise<void>;
+};
+
+function shouldIgnoreForEditableTarget(target: EventTarget | null): boolean {
+  if (!target || !(target instanceof HTMLElement)) {
+    return false;
+  }
+
+  const tagName = target.tagName;
+  return (
+    tagName === "INPUT" ||
+    tagName === "TEXTAREA" ||
+    target.isContentEditable
+  );
+}
+
+export function useCalculatorKeyboard({
+  canCopy,
+  onCopy,
+  onPaste,
+}: UseCalculatorKeyboardParams) {
+  useEffect(() => {
+    if (!canCopy) {
+      return;
+    }
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (!(event.ctrlKey || event.metaKey)) {
+        return;
+      }
+
+      if (shouldIgnoreForEditableTarget(event.target)) {
+        return;
+      }
+
+      if (event.key.toLowerCase() !== "c") {
+        return;
+      }
+
+      const selection = window.getSelection();
+      if (selection && selection.toString().trim().length > 0) {
+        return;
+      }
+
+      event.preventDefault();
+      void onCopy();
+    };
+
+    document.addEventListener("keydown", handleKeyDown);
+
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [canCopy, onCopy]);
+
+  useEffect(() => {
+    const handlePasteShortcut = (event: KeyboardEvent) => {
+      if (!(event.ctrlKey || event.metaKey)) {
+        return;
+      }
+
+      if (event.key.toLowerCase() !== "v") {
+        return;
+      }
+
+      if (shouldIgnoreForEditableTarget(event.target)) {
+        return;
+      }
+
+      const selection = window.getSelection();
+      if (selection && selection.toString().trim().length > 0) {
+        return;
+      }
+
+      if (!navigator.clipboard?.readText) {
+        return;
+      }
+
+      event.preventDefault();
+      void onPaste();
+    };
+
+    document.addEventListener("keydown", handlePasteShortcut);
+
+    return () => {
+      document.removeEventListener("keydown", handlePasteShortcut);
+    };
+  }, [onPaste]);
+}
diff --git a/hooks/use-calculator-state.ts b/hooks/use-calculator-state.ts
new file mode 100644
index 0000000..c37ee81
--- /dev/null
+++ b/hooks/use-calculator-state.ts
@@ -0,0 +1,384 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+
+import {
+  OPERATOR_SYMBOLS,
+  formatLocaleValue,
+  formatNumber,
+  normalizeClipboardNumber,
+  performOperation,
+  type Operator,
+} from "@/lib/utils/calculator";
+import { type buttonVariants } from "@/components/ui/button";
+import { type VariantProps } from "class-variance-authority";
+
+export type CalculatorButtonConfig = {
+  label: string;
+  onClick: () => void;
+  variant?: VariantProps<typeof buttonVariants>["variant"];
+  colSpan?: number;
+};
+
+export function useCalculatorState() {
+  const [display, setDisplay] = useState("0");
+  const [accumulator, setAccumulator] = useState<number | null>(null);
+  const [operator, setOperator] = useState<Operator | null>(null);
+  const [overwrite, setOverwrite] = useState(false);
+  const [history, setHistory] = useState<string | null>(null);
+  const [copied, setCopied] = useState(false);
+  const resetCopiedTimeoutRef = useRef<number | undefined>(undefined);
+
+  const currentValue = useMemo(() => Number(display), [display]);
+
+  const resultText = useMemo(() => {
+    if (display === "Erro") {
+      return null;
+    }
+
+    const normalized = formatNumber(currentValue);
+    if (normalized === "Erro") {
+      return null;
+    }
+
+    return formatLocaleValue(normalized);
+  }, [currentValue, display]);
+
+  const reset = useCallback(() => {
+    setDisplay("0");
+    setAccumulator(null);
+    setOperator(null);
+    setOverwrite(false);
+    setHistory(null);
+  }, []);
+
+  const inputDigit = useCallback(
+    (digit: string) => {
+      // Check conditions before state updates
+      const shouldReset = overwrite || display === "Erro";
+
+      setDisplay((prev) => {
+        if (shouldReset) {
+          return digit;
+        }
+
+        if (prev === "0") {
+          return digit;
+        }
+
+        // Limitar a 10 dígitos (excluindo sinal negativo e ponto decimal)
+        const digitCount = prev.replace(/[-.]/g, "").length;
+        if (digitCount >= 10) {
+          return prev;
+        }
+
+        return `${prev}${digit}`;
+      });
+
+      // Update related states after display update
+      if (shouldReset) {
+        setOverwrite(false);
+        setHistory(null);
+      }
+    },
+    [overwrite, display]
+  );
+
+  const inputDecimal = useCallback(() => {
+    // Check conditions before state updates
+    const shouldReset = overwrite || display === "Erro";
+
+    setDisplay((prev) => {
+      if (shouldReset) {
+        return "0.";
+      }
+
+      if (prev.includes(".")) {
+        return prev;
+      }
+
+      // Limitar a 10 dígitos antes de adicionar o ponto decimal
+      const digitCount = prev.replace(/[-]/g, "").length;
+      if (digitCount >= 10) {
+        return prev;
+      }
+
+      return `${prev}.`;
+    });
+
+    // Update related states after display update
+    if (shouldReset) {
+      setOverwrite(false);
+      setHistory(null);
+    }
+  }, [overwrite, display]);
+
+  const setNextOperator = useCallback(
+    (nextOperator: Operator) => {
+      if (display === "Erro") {
+        reset();
+        return;
+      }
+
+      const value = currentValue;
+
+      if (accumulator === null || operator === null || overwrite) {
+        setAccumulator(value);
+      } else {
+        const result = performOperation(accumulator, value, operator);
+        const formatted = formatNumber(result);
+        setAccumulator(Number.isFinite(result) ? result : null);
+        setDisplay(formatted);
+        if (!Number.isFinite(result)) {
+          setOperator(null);
+          setOverwrite(true);
+          setHistory(null);
+          return;
+        }
+      }
+
+      setOperator(nextOperator);
+      setOverwrite(true);
+      setHistory(null);
+    },
+    [accumulator, currentValue, display, operator, overwrite, reset]
+  );
+
+  const evaluate = useCallback(() => {
+    if (operator === null || accumulator === null || display === "Erro") {
+      return;
+    }
+
+    const value = currentValue;
+    const left = formatNumber(accumulator);
+    const right = formatNumber(value);
+    const symbol = OPERATOR_SYMBOLS[operator];
+    const operation = `${formatLocaleValue(left)} ${symbol} ${formatLocaleValue(
+      right
+    )}`;
+    const result = performOperation(accumulator, value, operator);
+    const formatted = formatNumber(result);
+
+    setDisplay(formatted);
+    setAccumulator(Number.isFinite(result) ? result : null);
+    setOperator(null);
+    setOverwrite(true);
+    setHistory(operation);
+  }, [accumulator, currentValue, display, operator]);
+
+  const toggleSign = useCallback(() => {
+    setDisplay((prev) => {
+      if (prev === "Erro") {
+        return prev;
+      }
+      if (prev.startsWith("-")) {
+        return prev.slice(1);
+      }
+      return prev === "0" ? prev : `-${prev}`;
+    });
+    if (overwrite) {
+      setOverwrite(false);
+      setHistory(null);
+    }
+  }, [overwrite]);
+
+  const deleteLastDigit = useCallback(() => {
+    setHistory(null);
+
+    // Check conditions before state updates
+    const isError = display === "Erro";
+
+    setDisplay((prev) => {
+      if (prev === "Erro") {
+        return "0";
+      }
+
+      if (overwrite) {
+        return "0";
+      }
+
+      if (prev.length <= 1 || (prev.length === 2 && prev.startsWith("-"))) {
+        return "0";
+      }
+
+      return prev.slice(0, -1);
+    });
+
+    // Update related states after display update
+    if (isError) {
+      setAccumulator(null);
+      setOperator(null);
+      setOverwrite(false);
+    } else if (overwrite) {
+      setOverwrite(false);
+    }
+  }, [overwrite, display]);
+
+  const applyPercent = useCallback(() => {
+    setDisplay((prev) => {
+      if (prev === "Erro") {
+        return prev;
+      }
+      const value = Number(prev);
+      return formatNumber(value / 100);
+    });
+    setOverwrite(true);
+    setHistory(null);
+  }, []);
+
+  const expression = useMemo(() => {
+    if (display === "Erro") {
+      return "Erro";
+    }
+
+    if (operator && accumulator !== null) {
+      const symbol = OPERATOR_SYMBOLS[operator];
+      const left = formatLocaleValue(formatNumber(accumulator));
+
+      if (overwrite) {
+        return `${left} ${symbol}`;
+      }
+
+      return `${left} ${symbol} ${formatLocaleValue(display)}`;
+    }
+
+    return formatLocaleValue(display);
+  }, [accumulator, display, operator, overwrite]);
+
+  const buttons = useMemo(() => {
+    const makeOperatorHandler = (nextOperator: Operator) => () =>
+      setNextOperator(nextOperator);
+
+    return [
+      [
+        { label: "C", onClick: reset, variant: "destructive" },
+        { label: "⌫", onClick: deleteLastDigit, variant: "default" },
+        { label: "%", onClick: applyPercent, variant: "default" },
+        {
+          label: "÷",
+          onClick: makeOperatorHandler("divide"),
+          variant: "outline",
+        },
+      ],
+      [
+        { label: "7", onClick: () => inputDigit("7") },
+        { label: "8", onClick: () => inputDigit("8") },
+        { label: "9", onClick: () => inputDigit("9") },
+        {
+          label: "×",
+          onClick: makeOperatorHandler("multiply"),
+          variant: "outline",
+        },
+      ],
+      [
+        { label: "4", onClick: () => inputDigit("4") },
+        { label: "5", onClick: () => inputDigit("5") },
+        { label: "6", onClick: () => inputDigit("6") },
+        {
+          label: "-",
+          onClick: makeOperatorHandler("subtract"),
+          variant: "outline",
+        },
+      ],
+      [
+        { label: "1", onClick: () => inputDigit("1") },
+        { label: "2", onClick: () => inputDigit("2") },
+        { label: "3", onClick: () => inputDigit("3") },
+        { label: "+", onClick: makeOperatorHandler("add"), variant: "outline" },
+      ],
+      [
+        { label: "±", onClick: toggleSign, variant: "default" },
+        { label: "0", onClick: () => inputDigit("0") },
+        { label: ",", onClick: inputDecimal },
+        { label: "=", onClick: evaluate, variant: "default" },
+      ],
+    ] satisfies CalculatorButtonConfig[][];
+  }, [
+    applyPercent,
+    deleteLastDigit,
+    evaluate,
+    inputDecimal,
+    inputDigit,
+    reset,
+    setNextOperator,
+    toggleSign,
+  ]);
+
+  const copyToClipboard = useCallback(async () => {
+    if (!resultText) return;
+
+    try {
+      await navigator.clipboard.writeText(resultText);
+
+      setCopied(true);
+      if (resetCopiedTimeoutRef.current !== undefined) {
+        window.clearTimeout(resetCopiedTimeoutRef.current);
+      }
+      resetCopiedTimeoutRef.current = window.setTimeout(() => {
+        setCopied(false);
+      }, 2000);
+    } catch (error) {
+      console.error("Não foi possível copiar o resultado da calculadora.", error);
+    }
+  }, [resultText]);
+
+  const pasteFromClipboard = useCallback(async () => {
+    if (!navigator.clipboard?.readText) return;
+
+    try {
+      const rawValue = await navigator.clipboard.readText();
+      const normalized = normalizeClipboardNumber(rawValue);
+
+      if (resetCopiedTimeoutRef.current !== undefined) {
+        window.clearTimeout(resetCopiedTimeoutRef.current);
+        resetCopiedTimeoutRef.current = undefined;
+      }
+
+      setCopied(false);
+
+      if (!normalized) {
+        setDisplay("Erro");
+        setAccumulator(null);
+        setOperator(null);
+        setOverwrite(true);
+        setHistory(null);
+        return;
+      }
+
+      // Limitar a 10 dígitos
+      const digitCount = normalized.replace(/[-.]/g, "").length;
+      if (digitCount > 10) {
+        setDisplay("Erro");
+        setAccumulator(null);
+        setOperator(null);
+        setOverwrite(true);
+        setHistory(null);
+        return;
+      }
+
+      setDisplay(normalized);
+      setAccumulator(null);
+      setOperator(null);
+      setOverwrite(false);
+      setHistory(null);
+    } catch (error) {
+      console.error("Não foi possível colar o valor na calculadora.", error);
+    }
+  }, []);
+
+  useEffect(() => {
+    return () => {
+      if (resetCopiedTimeoutRef.current !== undefined) {
+        window.clearTimeout(resetCopiedTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  return {
+    expression,
+    history,
+    resultText,
+    copied,
+    buttons,
+    copyToClipboard,
+    pasteFromClipboard,
+  };
+}
diff --git a/hooks/use-controlled-state.ts b/hooks/use-controlled-state.ts
new file mode 100644
index 0000000..2a57e9f
--- /dev/null
+++ b/hooks/use-controlled-state.ts
@@ -0,0 +1,51 @@
+import { useCallback, useEffect, useState } from "react";
+
+/**
+ * Hook for managing controlled/uncontrolled state pattern
+ * Allows a component to work both in controlled and uncontrolled mode
+ *
+ * @param controlledValue - The controlled value (undefined for uncontrolled mode)
+ * @param defaultValue - Default value for uncontrolled mode
+ * @param onChange - Callback when value changes
+ * @returns Tuple of [currentValue, setValue]
+ *
+ * @example
+ * ```tsx
+ * function MyComponent({ value, onChange }) {
+ *   const [internalValue, setValue] = useControlledState(value, false, onChange);
+ *   // Works both as controlled and uncontrolled
+ * }
+ * ```
+ */
+export function useControlledState<T>(
+  controlledValue: T | undefined,
+  defaultValue: T,
+  onChange?: (value: T) => void
+): [T, (value: T) => void] {
+  const [internalValue, setInternalValue] = useState<T>(defaultValue);
+
+  // Sync internal value when controlled value changes
+  useEffect(() => {
+    if (controlledValue !== undefined) {
+      setInternalValue(controlledValue);
+    }
+  }, [controlledValue]);
+
+  // Use controlled value if provided, otherwise use internal value
+  const value = controlledValue !== undefined ? controlledValue : internalValue;
+
+  const setValue = useCallback(
+    (newValue: T) => {
+      // Update internal state if uncontrolled
+      if (controlledValue === undefined) {
+        setInternalValue(newValue);
+      }
+
+      // Always call onChange if provided
+      onChange?.(newValue);
+    },
+    [controlledValue, onChange]
+  );
+
+  return [value, setValue];
+}
diff --git a/hooks/use-form-state.ts b/hooks/use-form-state.ts
new file mode 100644
index 0000000..52930ab
--- /dev/null
+++ b/hooks/use-form-state.ts
@@ -0,0 +1,55 @@
+import { useCallback, useState } from "react";
+
+/**
+ * Hook for managing form state with type-safe field updates
+ *
+ * @param initialValues - Initial form values
+ * @returns Object with formState, updateField, resetForm, setFormState
+ *
+ * @example
+ * ```tsx
+ * const { formState, updateField, resetForm } = useFormState({
+ *   name: '',
+ *   email: ''
+ * });
+ *
+ * updateField('name', 'John');
+ * ```
+ */
+export function useFormState<T extends Record<string, any>>(
+  initialValues: T
+) {
+  const [formState, setFormState] = useState<T>(initialValues);
+
+  /**
+   * Updates a single field in the form state
+   */
+  const updateField = useCallback(<K extends keyof T>(
+    field: K,
+    value: T[K]
+  ) => {
+    setFormState((prev) => ({ ...prev, [field]: value }));
+  }, []);
+
+  /**
+   * Resets form to initial values
+   */
+  const resetForm = useCallback(() => {
+    setFormState(initialValues);
+  }, [initialValues]);
+
+  /**
+   * Updates multiple fields at once
+   */
+  const updateFields = useCallback((updates: Partial<T>) => {
+    setFormState((prev) => ({ ...prev, ...updates }));
+  }, []);
+
+  return {
+    formState,
+    updateField,
+    updateFields,
+    resetForm,
+    setFormState,
+  };
+}
diff --git a/hooks/use-logo-selection.ts b/hooks/use-logo-selection.ts
new file mode 100644
index 0000000..c134aa6
--- /dev/null
+++ b/hooks/use-logo-selection.ts
@@ -0,0 +1,58 @@
+import { useCallback } from "react";
+import { deriveNameFromLogo } from "@/lib/logo";
+
+interface UseLogoSelectionProps {
+  mode: "create" | "update";
+  currentLogo: string;
+  currentName: string;
+  onUpdate: (updates: { logo: string; name?: string }) => void;
+}
+
+/**
+ * Hook for handling logo selection with automatic name derivation
+ *
+ * When a logo is selected, automatically updates the name field if:
+ * - Mode is "create", OR
+ * - Current name is empty, OR
+ * - Current name matches the previously derived name from logo
+ *
+ * @param props Configuration for logo selection behavior
+ * @returns Handler function for logo selection
+ *
+ * @example
+ * ```tsx
+ * const handleLogoSelection = useLogoSelection({
+ *   mode: 'create',
+ *   currentLogo: formState.logo,
+ *   currentName: formState.name,
+ *   onUpdate: (updates) => setFormState(prev => ({ ...prev, ...updates }))
+ * });
+ * ```
+ */
+export function useLogoSelection({
+  mode,
+  currentLogo,
+  currentName,
+  onUpdate,
+}: UseLogoSelectionProps) {
+  const handleLogoSelection = useCallback(
+    (newLogo: string) => {
+      const derived = deriveNameFromLogo(newLogo);
+      const previousDerived = deriveNameFromLogo(currentLogo);
+
+      const shouldUpdateName =
+        mode === "create" ||
+        currentName.trim().length === 0 ||
+        previousDerived === currentName.trim();
+
+      if (shouldUpdateName) {
+        onUpdate({ logo: newLogo, name: derived });
+      } else {
+        onUpdate({ logo: newLogo });
+      }
+    },
+    [mode, currentLogo, currentName, onUpdate]
+  );
+
+  return handleLogoSelection;
+}
diff --git a/hooks/use-mobile.ts b/hooks/use-mobile.ts
new file mode 100644
index 0000000..2b0fe1d
--- /dev/null
+++ b/hooks/use-mobile.ts
@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}
diff --git a/hooks/use-month-period.ts b/hooks/use-month-period.ts
new file mode 100644
index 0000000..188a382
--- /dev/null
+++ b/hooks/use-month-period.ts
@@ -0,0 +1,85 @@
+"use client";
+
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { useCallback, useMemo } from "react";
+
+import { MONTH_NAMES } from "@/lib/utils/period";
+
+const PERIOD_PARAM = "periodo";
+
+const normalizeMonth = (value: string) => value.trim().toLowerCase();
+
+export function useMonthPeriod() {
+  const searchParams = useSearchParams();
+  const pathname = usePathname();
+  const router = useRouter();
+
+  // Get current date info
+  const now = new Date();
+  const currentYear = now.getFullYear();
+  const currentMonthName = MONTH_NAMES[now.getMonth()];
+  const optionsMeses = [...MONTH_NAMES];
+
+  const defaultMonth = currentMonthName;
+  const defaultYear = currentYear.toString();
+
+  const periodFromParams = searchParams.get(PERIOD_PARAM);
+
+  const { month: currentMonth, year: currentYearValue } = useMemo(() => {
+    if (!periodFromParams) {
+      return { month: defaultMonth, year: defaultYear };
+    }
+
+    const [rawMonth, rawYear] = periodFromParams.split("-");
+    const normalizedMonth = normalizeMonth(rawMonth ?? "");
+    const normalizedYear = (rawYear ?? "").trim();
+    const monthExists = optionsMeses.includes(normalizedMonth);
+    const parsedYear = Number.parseInt(normalizedYear, 10);
+
+    if (!monthExists || Number.isNaN(parsedYear)) {
+      return { month: defaultMonth, year: defaultYear };
+    }
+
+    return {
+      month: normalizedMonth,
+      year: parsedYear.toString(),
+    };
+  }, [periodFromParams, defaultMonth, defaultYear, optionsMeses]);
+
+  const buildHref = useCallback(
+    (month: string, year: string | number) => {
+      const normalizedMonth = normalizeMonth(month);
+      const normalizedYear = String(year).trim();
+
+      const params = new URLSearchParams(searchParams.toString());
+      params.set(PERIOD_PARAM, `${normalizedMonth}-${normalizedYear}`);
+
+      return `${pathname}?${params.toString()}`;
+    },
+    [pathname, searchParams]
+  );
+
+  const replacePeriod = useCallback(
+    (target: string) => {
+      if (!target) {
+        return;
+      }
+
+      router.replace(target, { scroll: false });
+    },
+    [router]
+  );
+
+  return {
+    monthNames: optionsMeses,
+    pathname,
+    currentMonth,
+    currentYear: currentYearValue,
+    defaultMonth,
+    defaultYear,
+    buildHref,
+    replacePeriod,
+  };
+}
+
+export { PERIOD_PARAM as MONTH_PERIOD_PARAM };
diff --git a/lib/accounts/constants.ts b/lib/accounts/constants.ts
new file mode 100644
index 0000000..0715e0d
--- /dev/null
+++ b/lib/accounts/constants.ts
@@ -0,0 +1,21 @@
+import {
+  LANCAMENTO_CONDITIONS,
+  LANCAMENTO_PAYMENT_METHODS,
+  LANCAMENTO_TRANSACTION_TYPES,
+} from "@/lib/lancamentos/constants";
+
+export const INITIAL_BALANCE_CATEGORY_NAME = "Saldo inicial";
+export const INITIAL_BALANCE_NOTE = "saldo inicial";
+
+export const INITIAL_BALANCE_CONDITION =
+  LANCAMENTO_CONDITIONS.find((condition) => condition === "À vista") ??
+  "À vista";
+export const INITIAL_BALANCE_PAYMENT_METHOD =
+  LANCAMENTO_PAYMENT_METHODS.find((method) => method === "Pix") ?? "Pix";
+export const INITIAL_BALANCE_TRANSACTION_TYPE =
+  LANCAMENTO_TRANSACTION_TYPES.find((type) => type === "Receita") ?? "Receita";
+
+export const ACCOUNT_AUTO_INVOICE_NOTE_PREFIX = "AUTO_FATURA:";
+
+export const buildInvoicePaymentNote = (cardId: string, period: string) =>
+  `${ACCOUNT_AUTO_INVOICE_NOTE_PREFIX}${cardId}:${period}`;
diff --git a/lib/actions/helpers.ts b/lib/actions/helpers.ts
new file mode 100644
index 0000000..4d4bbe0
--- /dev/null
+++ b/lib/actions/helpers.ts
@@ -0,0 +1,110 @@
+import { getUser } from "@/lib/auth/server";
+import { revalidatePath } from "next/cache";
+import { z } from "zod";
+import type { ActionResult } from "./types";
+import { errorResult } from "./types";
+
+/**
+ * Handles errors in server actions consistently
+ * @param error - The error to handle
+ * @returns ActionResult with error message
+ */
+export function handleActionError(error: unknown): ActionResult {
+  if (error instanceof z.ZodError) {
+    return errorResult(error.issues[0]?.message ?? "Dados inválidos.");
+  }
+
+  if (error instanceof Error) {
+    return errorResult(error.message);
+  }
+
+  return errorResult("Erro inesperado.");
+}
+
+/**
+ * Configuration for revalidation after mutations
+ */
+export const revalidateConfig = {
+  cartoes: ["/cartoes"],
+  contas: ["/contas", "/lancamentos"],
+  categorias: ["/categorias"],
+  orcamentos: ["/orcamentos"],
+  pagadores: ["/pagadores"],
+  anotacoes: ["/anotacoes"],
+  lancamentos: ["/lancamentos", "/contas"],
+} as const;
+
+/**
+ * Revalidates paths for a specific entity
+ * @param entity - The entity type
+ */
+export function revalidateForEntity(
+  entity: keyof typeof revalidateConfig
+): void {
+  revalidateConfig[entity].forEach((path) => revalidatePath(path));
+}
+
+/**
+ * Options for action handler
+ */
+interface ActionHandlerOptions {
+  /** Paths to revalidate after successful execution */
+  revalidatePaths?: string[];
+  /** Entity to revalidate (uses predefined config) */
+  revalidateEntity?: keyof typeof revalidateConfig;
+}
+
+/**
+ * Creates a standardized action handler with automatic user auth and error handling
+ *
+ * @param schema - Zod schema for input validation
+ * @param handler - Handler function that receives validated data and userId
+ * @param options - Additional options for the action
+ * @returns Action function that can be called from client
+ *
+ * @example
+ * ```ts
+ * export const createItemAction = createActionHandler(
+ *   createItemSchema,
+ *   async (data, userId) => {
+ *     await db.insert(items).values({ ...data, userId });
+ *     return "Item criado com sucesso.";
+ *   },
+ *   { revalidateEntity: 'items' }
+ * );
+ * ```
+ */
+export function createActionHandler<TInput, TResult = string>(
+  schema: z.ZodSchema<TInput>,
+  handler: (data: TInput, userId: string) => Promise<TResult>,
+  options?: ActionHandlerOptions
+) {
+  return async (input: unknown): Promise<ActionResult<TResult>> => {
+    try {
+      // Get authenticated user
+      const user = await getUser();
+
+      // Validate input
+      const data = schema.parse(input);
+
+      // Execute handler
+      const result = await handler(data, user.id);
+
+      // Revalidate paths if configured
+      if (options?.revalidateEntity) {
+        revalidateForEntity(options.revalidateEntity);
+      } else if (options?.revalidatePaths) {
+        options.revalidatePaths.forEach((path) => revalidatePath(path));
+      }
+
+      // Return success with message (if result is string) or data
+      if (typeof result === "string") {
+        return { success: true, message: result };
+      }
+
+      return { success: true, message: "Operação realizada com sucesso.", data: result };
+    } catch (error) {
+      return handleActionError(error);
+    }
+  };
+}
diff --git a/lib/actions/types.ts b/lib/actions/types.ts
new file mode 100644
index 0000000..403fd49
--- /dev/null
+++ b/lib/actions/types.ts
@@ -0,0 +1,27 @@
+/**
+ * Common types for server actions
+ */
+
+/**
+ * Standard action result type
+ */
+export type ActionResult<TData = void> =
+  | { success: true; message: string; data?: TData }
+  | { success: false; error: string };
+
+/**
+ * Success result helper
+ */
+export function successResult<TData = void>(
+  message: string,
+  data?: TData
+): ActionResult<TData> {
+  return { success: true, message, data };
+}
+
+/**
+ * Error result helper
+ */
+export function errorResult(error: string): ActionResult {
+  return { success: false, error };
+}
diff --git a/lib/auth/client.ts b/lib/auth/client.ts
new file mode 100644
index 0000000..5e3bec0
--- /dev/null
+++ b/lib/auth/client.ts
@@ -0,0 +1,15 @@
+import { createAuthClient } from "better-auth/react";
+
+const baseURL = process.env.BETTER_AUTH_URL?.replace(/\/$/, "");
+
+export const authClient = createAuthClient({
+  ...(baseURL ? { baseURL } : {}),
+});
+
+/**
+ * Indica se o login com Google está habilitado
+ * Baseado na variável de ambiente NEXT_PUBLIC_GOOGLE_OAUTH_ENABLED
+ */
+export const googleSignInAvailable = Boolean(
+  process.env.NEXT_PUBLIC_GOOGLE_OAUTH_ENABLED
+);
diff --git a/lib/auth/config.ts b/lib/auth/config.ts
new file mode 100644
index 0000000..74f3aa3
--- /dev/null
+++ b/lib/auth/config.ts
@@ -0,0 +1,119 @@
+/**
+ * Better Auth Configuration
+ *
+ * Configuração central de autenticação usando Better Auth.
+ * Suporta email/password e Google OAuth.
+ */
+
+import { seedDefaultCategoriesForUser } from "@/lib/categorias/defaults";
+import { db, schema } from "@/lib/db";
+import { ensureDefaultPagadorForUser } from "@/lib/pagadores/defaults";
+import { normalizeNameFromEmail } from "@/lib/pagadores/utils";
+import { betterAuth } from "better-auth";
+import { drizzleAdapter } from "better-auth/adapters/drizzle";
+import type { GoogleProfile } from "better-auth/social-providers";
+
+// ============================================================================
+// GOOGLE OAUTH CONFIGURATION
+// ============================================================================
+
+const googleClientId = process.env.GOOGLE_CLIENT_ID;
+const googleClientSecret = process.env.GOOGLE_CLIENT_SECRET;
+
+/**
+ * Extrai nome do usuário do perfil do Google com fallback hierárquico:
+ * 1. profile.name (nome completo)
+ * 2. profile.given_name + profile.family_name
+ * 3. Nome extraído do email
+ * 4. "Usuário" (fallback final)
+ */
+function getNameFromGoogleProfile(profile: GoogleProfile): string {
+  const fullName = profile.name?.trim();
+  if (fullName) return fullName;
+
+  const fromGivenFamily = [profile.given_name, profile.family_name]
+    .filter(Boolean)
+    .join(" ")
+    .trim();
+  if (fromGivenFamily) return fromGivenFamily;
+
+  const fromEmail = profile.email
+    ? normalizeNameFromEmail(profile.email)
+    : undefined;
+
+  return fromEmail ?? "Usuário";
+}
+
+// ============================================================================
+// BETTER AUTH INSTANCE
+// ============================================================================
+
+export const auth = betterAuth({
+  // Email/Password authentication
+  emailAndPassword: {
+    enabled: true,
+    autoSignIn: true,
+  },
+
+  // Database adapter (Drizzle + PostgreSQL)
+  database: drizzleAdapter(db, {
+    provider: "pg",
+    schema,
+    camelCase: true,
+  }),
+
+  // Google OAuth (se configurado)
+  socialProviders:
+    googleClientId && googleClientSecret
+      ? {
+          google: {
+            clientId: googleClientId,
+            clientSecret: googleClientSecret,
+            mapProfileToUser: (profile) => ({
+              name: getNameFromGoogleProfile(profile),
+              email: profile.email,
+              image: profile.picture,
+              emailVerified: profile.email_verified,
+            }),
+          },
+        }
+      : undefined,
+
+  // Database hooks - Executados após eventos do DB
+  databaseHooks: {
+    user: {
+      create: {
+        /**
+         * Após criar novo usuário, inicializa:
+         * 1. Categorias padrão (Receitas/Despesas)
+         * 2. Pagador padrão (vinculado ao usuário)
+         */
+        after: async (user) => {
+          // Se falhar aqui, o usuário já foi criado - considere usar queue para retry
+          try {
+            await seedDefaultCategoriesForUser(user.id);
+            await ensureDefaultPagadorForUser({
+              id: user.id,
+              name: user.name ?? undefined,
+              email: user.email ?? undefined,
+              image: user.image ?? undefined,
+            });
+          } catch (error) {
+            console.error(
+              "[Auth] Falha ao criar dados padrão do usuário:",
+              error
+            );
+            // TODO: Considere enfileirar para retry ou notificar admin
+          }
+        },
+      },
+    },
+  },
+});
+
+// Aviso em desenvolvimento se Google OAuth não estiver configurado
+if (!googleClientId && process.env.NODE_ENV === "development") {
+  console.warn(
+    "[Auth] Google OAuth não configurado. Defina GOOGLE_CLIENT_ID e GOOGLE_CLIENT_SECRET."
+  );
+}
diff --git a/lib/auth/server.ts b/lib/auth/server.ts
new file mode 100644
index 0000000..33be4be
--- /dev/null
+++ b/lib/auth/server.ts
@@ -0,0 +1,69 @@
+/**
+ * Server-side authentication utilities
+ *
+ * This module consolidates server-side auth functions from:
+ * - /lib/get-user.tsx
+ * - /lib/get-user-id.tsx
+ * - /lib/get-user-session.tsx
+ *
+ * All functions in this module are server-side only and will redirect
+ * to /login if the user is not authenticated.
+ */
+
+import { auth } from "@/lib/auth/config";
+import { headers } from "next/headers";
+import { redirect } from "next/navigation";
+
+/**
+ * Gets the current authenticated user
+ * @returns User object
+ * @throws Redirects to /login if user is not authenticated
+ */
+export async function getUser() {
+  const session = await auth.api.getSession({ headers: await headers() });
+
+  if (!session?.user) {
+    redirect("/login");
+  }
+
+  return session.user;
+}
+
+/**
+ * Gets the current authenticated user ID
+ * @returns User ID string
+ * @throws Redirects to /login if user is not authenticated
+ */
+export async function getUserId() {
+  const session = await auth.api.getSession({ headers: await headers() });
+
+  if (!session?.user) {
+    redirect("/login");
+  }
+
+  return session.user.id;
+}
+
+/**
+ * Gets the current authenticated session
+ * @returns Full session object including user
+ * @throws Redirects to /login if user is not authenticated
+ */
+export async function getUserSession() {
+  const session = await auth.api.getSession({ headers: await headers() });
+
+  if (!session?.user) {
+    redirect("/login");
+  }
+
+  return session;
+}
+
+/**
+ * Gets the current session without requiring authentication
+ * @returns Session object or null if not authenticated
+ * @note This function does not redirect if user is not authenticated
+ */
+export async function getOptionalUserSession() {
+  return auth.api.getSession({ headers: await headers() });
+}
diff --git a/lib/categorias/constants.ts b/lib/categorias/constants.ts
new file mode 100644
index 0000000..4fcf719
--- /dev/null
+++ b/lib/categorias/constants.ts
@@ -0,0 +1,14 @@
+/**
+ * Category constants and types
+ *
+ * Consolidated from /lib/categories.ts
+ */
+
+export const CATEGORY_TYPES = ["receita", "despesa"] as const;
+
+export type CategoryType = (typeof CATEGORY_TYPES)[number];
+
+export const CATEGORY_TYPE_LABEL: Record<CategoryType, string> = {
+  receita: "Receita",
+  despesa: "Despesa",
+};
diff --git a/lib/categorias/defaults.ts b/lib/categorias/defaults.ts
new file mode 100644
index 0000000..18312b4
--- /dev/null
+++ b/lib/categorias/defaults.ts
@@ -0,0 +1,90 @@
+/**
+ * Category defaults and seeding
+ *
+ * Consolidated from:
+ * - /lib/category-defaults.ts
+ */
+
+import { categorias } from "@/db/schema";
+import type { CategoryType } from "@/lib/categorias/constants";
+import { db } from "@/lib/db";
+import { eq } from "drizzle-orm";
+
+export type DefaultCategory = {
+  name: string;
+  type: CategoryType;
+  icon: string | null;
+};
+
+export const DEFAULT_CATEGORIES: DefaultCategory[] = [
+  // Despesas
+  { name: "Alimentação", type: "despesa", icon: "RiRestaurant2Line" },
+  { name: "Transporte", type: "despesa", icon: "RiBusLine" },
+  { name: "Moradia", type: "despesa", icon: "RiHomeLine" },
+  { name: "Saúde", type: "despesa", icon: "RiStethoscopeLine" },
+  { name: "Educação", type: "despesa", icon: "RiBook2Line" },
+  { name: "Lazer", type: "despesa", icon: "RiGamepadLine" },
+  { name: "Compras", type: "despesa", icon: "RiShoppingBagLine" },
+  { name: "Assinaturas", type: "despesa", icon: "RiServiceLine" },
+  { name: "Pets", type: "despesa", icon: "RiBearSmileLine" },
+  { name: "Mercado", type: "despesa", icon: "RiShoppingBasketLine" },
+  { name: "Restaurantes", type: "despesa", icon: "RiRestaurantLine" },
+  { name: "Delivery", type: "despesa", icon: "RiMotorbikeLine" },
+  { name: "Energia e água", type: "despesa", icon: "RiFlashlightLine" },
+  { name: "Internet", type: "despesa", icon: "RiWifiLine" },
+  { name: "Vestuário", type: "despesa", icon: "RiTShirtLine" },
+  { name: "Viagem", type: "despesa", icon: "RiFlightTakeoffLine" },
+  { name: "Presentes", type: "despesa", icon: "RiGiftLine" },
+  { name: "Pagamentos", type: "despesa", icon: "RiBillLine" },
+  { name: "Outras despesas", type: "despesa", icon: "RiMore2Line" },
+
+  // Receitas
+  { name: "Salário", type: "receita", icon: "RiWallet3Line" },
+  { name: "Freelance", type: "receita", icon: "RiUserStarLine" },
+  { name: "Investimentos", type: "receita", icon: "RiStockLine" },
+  { name: "Vendas", type: "receita", icon: "RiShoppingCartLine" },
+  { name: "Prêmios", type: "receita", icon: "RiMedalLine" },
+  { name: "Reembolso", type: "receita", icon: "RiRefundLine" },
+  { name: "Aluguel recebido", type: "receita", icon: "RiBuilding2Line" },
+  { name: "Outras receitas", type: "receita", icon: "RiMore2Line" },
+  { name: "Saldo inicial", type: "receita", icon: "RiWallet2Line" },
+
+  // Categoria especial para transferências entre contas
+  {
+    name: "Transferência interna",
+    type: "receita",
+    icon: "RiArrowLeftRightLine",
+  },
+];
+
+/**
+ * Seeds default categories for a new user
+ * @param userId - User ID to seed categories for
+ */
+export async function seedDefaultCategoriesForUser(userId: string | undefined) {
+  if (!userId) {
+    return;
+  }
+
+  const existing = await db.query.categorias.findFirst({
+    columns: { id: true },
+    where: eq(categorias.userId, userId),
+  });
+
+  if (existing) {
+    return;
+  }
+
+  if (DEFAULT_CATEGORIES.length === 0) {
+    return;
+  }
+
+  await db.insert(categorias).values(
+    DEFAULT_CATEGORIES.map((category) => ({
+      name: category.name,
+      type: category.type,
+      icon: category.icon,
+      userId,
+    }))
+  );
+}
diff --git a/lib/categorias/icons.ts b/lib/categorias/icons.ts
new file mode 100644
index 0000000..1304db1
--- /dev/null
+++ b/lib/categorias/icons.ts
@@ -0,0 +1,172 @@
+/**
+ * Category icon options and utilities
+ *
+ * Consolidated from:
+ * - /lib/category-icons.ts
+ */
+
+export type CategoryIconOption = {
+  label: string;
+  value: string;
+};
+
+export const CATEGORY_ICON_OPTIONS: CategoryIconOption[] = [
+  // Finanças
+  { label: "Dinheiro", value: "RiMoneyDollarCircleLine" },
+  { label: "Carteira", value: "RiWallet3Line" },
+  { label: "Carteira 2", value: "RiWalletLine" },
+  { label: "Cartão", value: "RiBankCardLine" },
+  { label: "Banco", value: "RiBankLine" },
+  { label: "Moedas", value: "RiHandCoinLine" },
+  { label: "Gráfico", value: "RiLineChartLine" },
+  { label: "Ações", value: "RiStockLine" },
+  { label: "Troca", value: "RiExchangeLine" },
+  { label: "Reembolso", value: "RiRefundLine" },
+  { label: "Recompensa", value: "RiRefund2Line" },
+  { label: "Leilão", value: "RiAuctionLine" },
+
+  // Compras
+  { label: "Carrinho", value: "RiShoppingCartLine" },
+  { label: "Sacola", value: "RiShoppingBagLine" },
+  { label: "Cesta", value: "RiShoppingBasketLine" },
+  { label: "Presente", value: "RiGiftLine" },
+  { label: "Cupom", value: "RiCouponLine" },
+  { label: "Ticket", value: "RiTicket2Line" },
+
+  // Alimentação
+  { label: "Restaurante", value: "RiRestaurantLine" },
+  { label: "Garfo e faca", value: "RiRestaurant2Line" },
+  { label: "Café", value: "RiCupLine" },
+  { label: "Bebida", value: "RiDrinksFill" },
+  { label: "Pizza", value: "RiCake3Line" },
+
+  // Transporte
+  { label: "Ônibus", value: "RiBusLine" },
+  { label: "Carro", value: "RiCarLine" },
+  { label: "Táxi", value: "RiTaxiLine" },
+  { label: "Moto", value: "RiMotorbikeLine" },
+  { label: "Avião", value: "RiFlightTakeoffLine" },
+  { label: "Navio", value: "RiShipLine" },
+  { label: "Trem", value: "RiTrainLine" },
+  { label: "Metrô", value: "RiSubwayLine" },
+  { label: "Bicicleta", value: "RiBikeLine" },
+  { label: "Mapa", value: "RiMapPinLine" },
+  { label: "Combustível", value: "RiGasStationLine" },
+
+  // Moradia
+  { label: "Casa", value: "RiHomeLine" },
+  { label: "Prédio", value: "RiBuilding2Line" },
+  { label: "Apartamento", value: "RiBuildingLine" },
+  { label: "Ferramentas", value: "RiToolsLine" },
+  { label: "Lâmpada", value: "RiLightbulbLine" },
+  { label: "Energia", value: "RiFlashlightLine" },
+
+  // Saúde e bem-estar
+  { label: "Saúde", value: "RiStethoscopeLine" },
+  { label: "Hospital", value: "RiHospitalLine" },
+  { label: "Coração", value: "RiHeart2Line" },
+  { label: "Pulso", value: "RiHeartPulseLine" },
+  { label: "Mental", value: "RiMentalHealthLine" },
+  { label: "Farmácia", value: "RiFirstAidKitLine" },
+  { label: "Fitness", value: "RiRunLine" },
+
+  // Educação
+  { label: "Livro", value: "RiBook2Line" },
+  { label: "Graduação", value: "RiGraduationCapLine" },
+  { label: "Escola", value: "RiSchoolLine" },
+  { label: "Lápis", value: "RiPencilLine" },
+
+  // Trabalho
+  { label: "Maleta", value: "RiBriefcaseLine" },
+  { label: "Pasta", value: "RiBriefcase4Line" },
+  { label: "Escritório", value: "RiUserStarLine" },
+
+  // Lazer
+  { label: "Controle", value: "RiGamepadLine" },
+  { label: "Filme", value: "RiMovie2Line" },
+  { label: "Música", value: "RiMusic2Line" },
+  { label: "Microfone", value: "RiMicLine" },
+  { label: "Fone", value: "RiHeadphoneLine" },
+  { label: "Câmera", value: "RiCameraLine" },
+  { label: "Praia", value: "RiUmbrellaLine" },
+  { label: "Futebol", value: "RiFootballLine" },
+  { label: "Basquete", value: "RiBasketballLine" },
+
+  // Tecnologia
+  { label: "WiFi", value: "RiWifiLine" },
+  { label: "Celular", value: "RiSmartphoneLine" },
+  { label: "Computador", value: "RiComputerLine" },
+  { label: "Monitor", value: "RiMonitorLine" },
+  { label: "Teclado", value: "RiKeyboardLine" },
+  { label: "Mouse", value: "RiMouseLine" },
+  { label: "Fone Bluetooth", value: "RiBluetoothLine" },
+
+  // Pessoas
+  { label: "Usuário", value: "RiUserLine" },
+  { label: "Grupo", value: "RiGroupLine" },
+  { label: "Família", value: "RiParentLine" },
+  { label: "Bebê", value: "RiBabyCarriageLine" },
+
+  // Animais
+  { label: "Pet", value: "RiBearSmileLine" },
+
+  // Vestuário
+  { label: "Camiseta", value: "RiTShirtLine" },
+
+  // Documentos
+  { label: "Arquivo", value: "RiFileTextLine" },
+  { label: "Documento", value: "RiArticleLine" },
+  { label: "Balança", value: "RiScales2Line" },
+  { label: "Escudo", value: "RiShieldCheckLine" },
+
+  // Serviços
+  { label: "Serviço", value: "RiServiceLine" },
+  { label: "Alerta", value: "RiAlertLine" },
+  { label: "Troféu", value: "RiMedalLine" },
+
+  // Outros
+  { label: "Mais", value: "RiMore2Line" },
+  { label: "Estrela", value: "RiStarLine" },
+  { label: "Foguete", value: "RiRocketLine" },
+  { label: "Ampulheta", value: "RiHourglassLine" },
+  { label: "Calendário", value: "RiCalendarLine" },
+  { label: "Relógio", value: "RiTimeLine" },
+  { label: "Timer", value: "RiTimer2Line" },
+  { label: "Fogo", value: "RiFireLine" },
+  { label: "Gota", value: "RiDropLine" },
+  { label: "Sol", value: "RiSunLine" },
+  { label: "Lua", value: "RiMoonLine" },
+  { label: "Nuvem", value: "RiCloudLine" },
+  { label: "Raio", value: "RiFlashlightFill" },
+  { label: "Planta", value: "RiPlantLine" },
+  { label: "Árvore", value: "RiSeedlingLine" },
+  { label: "Globo", value: "RiGlobalLine" },
+  { label: "Localização", value: "RiMapPin2Line" },
+  { label: "Bússola", value: "RiCompassLine" },
+  { label: "Reciclagem", value: "RiRecycleLine" },
+  { label: "Cadeado", value: "RiLockLine" },
+  { label: "Chave", value: "RiKeyLine" },
+  { label: "Configurações", value: "RiSettings3Line" },
+  { label: "Link", value: "RiLinkLine" },
+  { label: "Anexo", value: "RiAttachmentLine" },
+  { label: "Download", value: "RiDownloadLine" },
+  { label: "Upload", value: "RiUploadLine" },
+  { label: "Nuvem Download", value: "RiCloudDownloadLine" },
+  { label: "Nuvem Upload", value: "RiCloudUploadLine" },
+];
+
+/**
+ * Gets all available category icon options
+ * @returns Array of icon options
+ */
+export function getCategoryIconOptions() {
+  return CATEGORY_ICON_OPTIONS;
+}
+
+/**
+ * Gets the default icon for a category type
+ * @returns Default icon value
+ */
+export function getDefaultIconForType() {
+  return CATEGORY_ICON_OPTIONS[0]?.value ?? "";
+}
diff --git a/lib/dashboard/accounts.ts b/lib/dashboard/accounts.ts
new file mode 100644
index 0000000..9125957
--- /dev/null
+++ b/lib/dashboard/accounts.ts
@@ -0,0 +1,113 @@
+import { contas, lancamentos, pagadores } from "@/db/schema";
+import { INITIAL_BALANCE_NOTE } from "@/lib/accounts/constants";
+import { db } from "@/lib/db";
+import { PAGADOR_ROLE_ADMIN } from "@/lib/pagadores/constants";
+import { toNumber } from "@/lib/dashboard/common";
+import { and, eq, sql } from "drizzle-orm";
+
+type RawDashboardAccount = {
+  id: string;
+  name: string;
+  accountType: string;
+  status: string;
+  logo: string | null;
+  initialBalance: string | number | null;
+  balanceMovements: unknown;
+};
+
+export type DashboardAccount = {
+  id: string;
+  name: string;
+  accountType: string;
+  status: string;
+  logo: string | null;
+  initialBalance: number;
+  balance: number;
+  excludeFromBalance: boolean;
+};
+
+export type DashboardAccountsSnapshot = {
+  totalBalance: number;
+  accounts: DashboardAccount[];
+};
+
+export async function fetchDashboardAccounts(
+  userId: string
+): Promise<DashboardAccountsSnapshot> {
+  const rows = await db
+    .select({
+      id: contas.id,
+      name: contas.name,
+      accountType: contas.accountType,
+      status: contas.status,
+      logo: contas.logo,
+      initialBalance: contas.initialBalance,
+      excludeFromBalance: contas.excludeFromBalance,
+      balanceMovements: sql<number>`
+        coalesce(
+          sum(
+            case
+              when ${lancamentos.note} = ${INITIAL_BALANCE_NOTE} then 0
+              else ${lancamentos.amount}
+            end
+          ),
+          0
+        )
+      `,
+    })
+    .from(contas)
+    .leftJoin(
+      lancamentos,
+      and(
+        eq(lancamentos.contaId, contas.id),
+        eq(lancamentos.userId, userId),
+        eq(lancamentos.isSettled, true)
+      )
+    )
+    .leftJoin(
+      pagadores,
+      eq(lancamentos.pagadorId, pagadores.id)
+    )
+    .where(
+      and(
+        eq(contas.userId, userId),
+        sql`(${lancamentos.id} IS NULL OR ${pagadores.role} = ${PAGADOR_ROLE_ADMIN})`
+      )
+    )
+    .groupBy(
+      contas.id,
+      contas.name,
+      contas.accountType,
+      contas.status,
+      contas.logo,
+      contas.initialBalance,
+      contas.excludeFromBalance
+    );
+
+  const accounts = rows
+    .map((row: RawDashboardAccount & { excludeFromBalance: boolean }): DashboardAccount => {
+      const initialBalance = toNumber(row.initialBalance);
+      const balanceMovements = toNumber(row.balanceMovements);
+
+      return {
+        id: row.id,
+        name: row.name,
+        accountType: row.accountType,
+        status: row.status,
+        logo: row.logo,
+        initialBalance,
+        balance: initialBalance + balanceMovements,
+        excludeFromBalance: row.excludeFromBalance,
+      };
+    })
+    .sort((a, b) => b.balance - a.balance);
+
+  const totalBalance = accounts
+    .filter(account => !account.excludeFromBalance)
+    .reduce((total, account) => total + account.balance, 0);
+
+  return {
+    totalBalance,
+    accounts,
+  };
+}
diff --git a/lib/dashboard/boletos.ts b/lib/dashboard/boletos.ts
new file mode 100644
index 0000000..3d49e19
--- /dev/null
+++ b/lib/dashboard/boletos.ts
@@ -0,0 +1,106 @@
+"use server";
+
+import { lancamentos, pagadores } from "@/db/schema";
+import { db } from "@/lib/db";
+import { toNumber } from "@/lib/dashboard/common";
+import { and, asc, eq } from "drizzle-orm";
+
+const PAYMENT_METHOD_BOLETO = "Boleto";
+
+type RawDashboardBoleto = {
+  id: string;
+  name: string;
+  amount: string | number | null;
+  dueDate: string | Date | null;
+  boletoPaymentDate: string | Date | null;
+  isSettled: boolean | null;
+};
+
+export type DashboardBoleto = {
+  id: string;
+  name: string;
+  amount: number;
+  dueDate: string | null;
+  boletoPaymentDate: string | null;
+  isSettled: boolean;
+};
+
+export type DashboardBoletosSnapshot = {
+  boletos: DashboardBoleto[];
+  totalPendingAmount: number;
+  pendingCount: number;
+};
+
+const toISODate = (value: Date | string | null) => {
+  if (!value) {
+    return null;
+  }
+
+  if (value instanceof Date) {
+    return value.toISOString().slice(0, 10);
+  }
+
+  if (typeof value === "string") {
+    return value;
+  }
+
+  return null;
+};
+
+export async function fetchDashboardBoletos(
+  userId: string,
+  period: string
+): Promise<DashboardBoletosSnapshot> {
+  const rows = await db
+    .select({
+      id: lancamentos.id,
+      name: lancamentos.name,
+      amount: lancamentos.amount,
+      dueDate: lancamentos.dueDate,
+      boletoPaymentDate: lancamentos.boletoPaymentDate,
+      isSettled: lancamentos.isSettled,
+    })
+    .from(lancamentos)
+    .innerJoin(pagadores, eq(lancamentos.pagadorId, pagadores.id))
+    .where(
+      and(
+        eq(lancamentos.userId, userId),
+        eq(lancamentos.period, period),
+        eq(lancamentos.paymentMethod, PAYMENT_METHOD_BOLETO),
+        eq(pagadores.role, "admin")
+      )
+    )
+    .orderBy(
+      asc(lancamentos.isSettled),
+      asc(lancamentos.dueDate),
+      asc(lancamentos.name)
+    );
+
+  const boletos = rows.map((row: RawDashboardBoleto): DashboardBoleto => {
+    const amount = Math.abs(toNumber(row.amount));
+    return {
+      id: row.id,
+      name: row.name,
+      amount,
+      dueDate: toISODate(row.dueDate),
+      boletoPaymentDate: toISODate(row.boletoPaymentDate),
+      isSettled: Boolean(row.isSettled),
+    };
+  });
+
+  let totalPendingAmount = 0;
+  let pendingCount = 0;
+
+  for (const boleto of boletos) {
+    if (!boleto.isSettled) {
+      totalPendingAmount += boleto.amount;
+      pendingCount += 1;
+    }
+  }
+
+  return {
+    boletos,
+    totalPendingAmount,
+    pendingCount,
+  };
+}
diff --git a/lib/dashboard/categories/category-details.ts b/lib/dashboard/categories/category-details.ts
new file mode 100644
index 0000000..02345f9
--- /dev/null
+++ b/lib/dashboard/categories/category-details.ts
@@ -0,0 +1,131 @@
+import { categorias, lancamentos, pagadores } from "@/db/schema";
+import { ACCOUNT_AUTO_INVOICE_NOTE_PREFIX } from "@/lib/accounts/constants";
+import type { CategoryType } from "@/lib/categorias/constants";
+import { toNumber } from "@/lib/dashboard/common";
+import { db } from "@/lib/db";
+import { mapLancamentosData } from "@/lib/lancamentos/page-helpers";
+import { PAGADOR_ROLE_ADMIN } from "@/lib/pagadores/constants";
+import { getPreviousPeriod } from "@/lib/utils/period";
+import { and, desc, eq, isNull, or, sql } from "drizzle-orm";
+
+type MappedLancamentos = ReturnType<typeof mapLancamentosData>;
+
+export type CategoryDetailData = {
+  category: {
+    id: string;
+    name: string;
+    icon: string | null;
+    type: CategoryType;
+  };
+  period: string;
+  previousPeriod: string;
+  currentTotal: number;
+  previousTotal: number;
+  percentageChange: number | null;
+  transactions: MappedLancamentos;
+};
+
+const calculatePercentageChange = (
+  current: number,
+  previous: number
+): number | null => {
+  const EPSILON = 0.01; // Considera valores menores que 1 centavo como zero
+
+  if (Math.abs(previous) < EPSILON) {
+    if (Math.abs(current) < EPSILON) return null;
+    return current > 0 ? 100 : -100;
+  }
+
+  const change = ((current - previous) / Math.abs(previous)) * 100;
+
+  // Protege contra valores absurdos (retorna null se > 1 milhão %)
+  return Number.isFinite(change) && Math.abs(change) < 1000000 ? change : null;
+};
+
+export async function fetchCategoryDetails(
+  userId: string,
+  categoryId: string,
+  period: string
+): Promise<CategoryDetailData | null> {
+  const category = await db.query.categorias.findFirst({
+    where: and(eq(categorias.userId, userId), eq(categorias.id, categoryId)),
+  });
+
+  if (!category) {
+    return null;
+  }
+
+  const previousPeriod = getPreviousPeriod(period);
+  const transactionType = category.type === "receita" ? "Receita" : "Despesa";
+
+  const sanitizedNote = or(
+    isNull(lancamentos.note),
+    sql`${lancamentos.note} NOT LIKE ${`${ACCOUNT_AUTO_INVOICE_NOTE_PREFIX}%`}`
+  );
+
+  const currentRows = await db.query.lancamentos.findMany({
+    where: and(
+      eq(lancamentos.userId, userId),
+      eq(lancamentos.categoriaId, categoryId),
+      eq(lancamentos.transactionType, transactionType),
+      eq(lancamentos.period, period),
+      sanitizedNote
+    ),
+    with: {
+      pagador: true,
+      conta: true,
+      cartao: true,
+      categoria: true,
+    },
+    orderBy: [desc(lancamentos.purchaseDate), desc(lancamentos.createdAt)],
+  });
+
+  const filteredRows = currentRows.filter(
+    (row) => row.pagador?.role === PAGADOR_ROLE_ADMIN
+  );
+
+  const transactions = mapLancamentosData(filteredRows);
+
+  const currentTotal = transactions.reduce(
+    (total, transaction) => total + Math.abs(toNumber(transaction.amount)),
+    0
+  );
+
+  const [previousTotalRow] = await db
+    .select({
+      total: sql<number>`coalesce(sum(${lancamentos.amount}), 0)`,
+    })
+    .from(lancamentos)
+    .innerJoin(pagadores, eq(lancamentos.pagadorId, pagadores.id))
+    .where(
+      and(
+        eq(lancamentos.userId, userId),
+        eq(lancamentos.categoriaId, categoryId),
+        eq(lancamentos.transactionType, transactionType),
+        eq(pagadores.role, PAGADOR_ROLE_ADMIN),
+        sanitizedNote,
+        eq(lancamentos.period, previousPeriod)
+      )
+    );
+
+  const previousTotal = Math.abs(toNumber(previousTotalRow?.total ?? 0));
+  const percentageChange = calculatePercentageChange(
+    currentTotal,
+    previousTotal
+  );
+
+  return {
+    category: {
+      id: category.id,
+      name: category.name,
+      icon: category.icon,
+      type: category.type as CategoryType,
+    },
+    period,
+    previousPeriod,
+    currentTotal,
+    previousTotal,
+    percentageChange,
+    transactions,
+  };
+}
diff --git a/lib/dashboard/categories/expenses-by-category.ts b/lib/dashboard/categories/expenses-by-category.ts
new file mode 100644
index 0000000..f73c3b4
--- /dev/null
+++ b/lib/dashboard/categories/expenses-by-category.ts
@@ -0,0 +1,163 @@
+import { categorias, lancamentos, orcamentos, pagadores } from "@/db/schema";
+import { ACCOUNT_AUTO_INVOICE_NOTE_PREFIX } from "@/lib/accounts/constants";
+import { db } from "@/lib/db";
+import { PAGADOR_ROLE_ADMIN } from "@/lib/pagadores/constants";
+import { getPreviousPeriod } from "@/lib/utils/period";
+import { and, eq, isNull, or, sql } from "drizzle-orm";
+import { toNumber } from "@/lib/dashboard/common";
+
+export type CategoryExpenseItem = {
+  categoryId: string;
+  categoryName: string;
+  categoryIcon: string | null;
+  currentAmount: number;
+  previousAmount: number;
+  percentageChange: number | null;
+  percentageOfTotal: number;
+  budgetAmount: number | null;
+  budgetUsedPercentage: number | null;
+};
+
+export type ExpensesByCategoryData = {
+  categories: CategoryExpenseItem[];
+  currentTotal: number;
+  previousTotal: number;
+};
+
+const calculatePercentageChange = (
+  current: number,
+  previous: number
+): number | null => {
+  const EPSILON = 0.01; // Considera valores menores que 1 centavo como zero
+
+  if (Math.abs(previous) < EPSILON) {
+    if (Math.abs(current) < EPSILON) return null;
+    return current > 0 ? 100 : -100;
+  }
+
+  const change = ((current - previous) / Math.abs(previous)) * 100;
+
+  // Protege contra valores absurdos (retorna null se > 1 milhão %)
+  return Number.isFinite(change) && Math.abs(change) < 1000000 ? change : null;
+};
+
+export async function fetchExpensesByCategory(
+  userId: string,
+  period: string
+): Promise<ExpensesByCategoryData> {
+  const previousPeriod = getPreviousPeriod(period);
+
+  // Busca despesas do período atual agrupadas por categoria
+  const currentPeriodRows = await db
+    .select({
+      categoryId: categorias.id,
+      categoryName: categorias.name,
+      categoryIcon: categorias.icon,
+      total: sql<number>`coalesce(sum(${lancamentos.amount}), 0)`,
+      budgetAmount: orcamentos.amount,
+    })
+    .from(lancamentos)
+    .innerJoin(pagadores, eq(lancamentos.pagadorId, pagadores.id))
+    .innerJoin(categorias, eq(lancamentos.categoriaId, categorias.id))
+    .leftJoin(
+      orcamentos,
+      and(
+        eq(orcamentos.categoriaId, categorias.id),
+        eq(orcamentos.period, period),
+        eq(orcamentos.userId, userId)
+      )
+    )
+    .where(
+      and(
+        eq(lancamentos.userId, userId),
+        eq(lancamentos.period, period),
+        eq(lancamentos.transactionType, "Despesa"),
+        eq(pagadores.role, PAGADOR_ROLE_ADMIN),
+        eq(categorias.type, "despesa"),
+        or(
+          isNull(lancamentos.note),
+          sql`${lancamentos.note} NOT LIKE ${`${ACCOUNT_AUTO_INVOICE_NOTE_PREFIX}%`}`
+        )
+      )
+    )
+    .groupBy(categorias.id, categorias.name, categorias.icon, orcamentos.amount);
+
+  // Busca despesas do período anterior agrupadas por categoria
+  const previousPeriodRows = await db
+    .select({
+      categoryId: categorias.id,
+      total: sql<number>`coalesce(sum(${lancamentos.amount}), 0)`,
+    })
+    .from(lancamentos)
+    .innerJoin(pagadores, eq(lancamentos.pagadorId, pagadores.id))
+    .innerJoin(categorias, eq(lancamentos.categoriaId, categorias.id))
+    .where(
+      and(
+        eq(lancamentos.userId, userId),
+        eq(lancamentos.period, previousPeriod),
+        eq(lancamentos.transactionType, "Despesa"),
+        eq(pagadores.role, PAGADOR_ROLE_ADMIN),
+        eq(categorias.type, "despesa"),
+        or(
+          isNull(lancamentos.note),
+          sql`${lancamentos.note} NOT LIKE ${`${ACCOUNT_AUTO_INVOICE_NOTE_PREFIX}%`}`
+        )
+      )
+    )
+    .groupBy(categorias.id);
+
+  // Cria um mapa do período anterior para busca rápida
+  const previousMap = new Map<string, number>();
+  let previousTotal = 0;
+
+  for (const row of previousPeriodRows) {
+    const amount = Math.abs(toNumber(row.total));
+    previousMap.set(row.categoryId, amount);
+    previousTotal += amount;
+  }
+
+  // Calcula o total do período atual
+  let currentTotal = 0;
+  for (const row of currentPeriodRows) {
+    currentTotal += Math.abs(toNumber(row.total));
+  }
+
+  // Monta os dados de cada categoria
+  const categories: CategoryExpenseItem[] = currentPeriodRows.map((row) => {
+    const currentAmount = Math.abs(toNumber(row.total));
+    const previousAmount = previousMap.get(row.categoryId) ?? 0;
+    const percentageChange = calculatePercentageChange(
+      currentAmount,
+      previousAmount
+    );
+    const percentageOfTotal =
+      currentTotal > 0 ? (currentAmount / currentTotal) * 100 : 0;
+
+    const budgetAmount = row.budgetAmount ? toNumber(row.budgetAmount) : null;
+    const budgetUsedPercentage =
+      budgetAmount && budgetAmount > 0
+        ? (currentAmount / budgetAmount) * 100
+        : null;
+
+    return {
+      categoryId: row.categoryId,
+      categoryName: row.categoryName,
+      categoryIcon: row.categoryIcon,
+      currentAmount,
+      previousAmount,
+      percentageChange,
+      percentageOfTotal,
+      budgetAmount,
+      budgetUsedPercentage,
+    };
+  });
+
+  // Ordena por valor atual (maior para menor)
+  categories.sort((a, b) => b.currentAmount - a.currentAmount);
+
+  return {
+    categories,
+    currentTotal,
+    previousTotal,
+  };
+}
diff --git a/lib/dashboard/categories/income-by-category.ts b/lib/dashboard/categories/income-by-category.ts
new file mode 100644
index 0000000..8939a23
--- /dev/null
+++ b/lib/dashboard/categories/income-by-category.ts
@@ -0,0 +1,147 @@
+import { categorias, lancamentos, orcamentos, pagadores } from "@/db/schema";
+import { ACCOUNT_AUTO_INVOICE_NOTE_PREFIX } from "@/lib/accounts/constants";
+import { db } from "@/lib/db";
+import { PAGADOR_ROLE_ADMIN } from "@/lib/pagadores/constants";
+import { getPreviousPeriod } from "@/lib/utils/period";
+import { calculatePercentageChange } from "@/lib/utils/math";
+import { safeToNumber } from "@/lib/utils/number";
+import { and, eq, isNull, or, sql } from "drizzle-orm";
+
+export type CategoryIncomeItem = {
+  categoryId: string;
+  categoryName: string;
+  categoryIcon: string | null;
+  currentAmount: number;
+  previousAmount: number;
+  percentageChange: number | null;
+  percentageOfTotal: number;
+  budgetAmount: number | null;
+  budgetUsedPercentage: number | null;
+};
+
+export type IncomeByCategoryData = {
+  categories: CategoryIncomeItem[];
+  currentTotal: number;
+  previousTotal: number;
+};
+
+export async function fetchIncomeByCategory(
+  userId: string,
+  period: string
+): Promise<IncomeByCategoryData> {
+  const previousPeriod = getPreviousPeriod(period);
+
+  // Busca receitas do período atual agrupadas por categoria
+  const currentPeriodRows = await db
+    .select({
+      categoryId: categorias.id,
+      categoryName: categorias.name,
+      categoryIcon: categorias.icon,
+      total: sql<number>`coalesce(sum(${lancamentos.amount}), 0)`,
+      budgetAmount: orcamentos.amount,
+    })
+    .from(lancamentos)
+    .innerJoin(pagadores, eq(lancamentos.pagadorId, pagadores.id))
+    .innerJoin(categorias, eq(lancamentos.categoriaId, categorias.id))
+    .leftJoin(
+      orcamentos,
+      and(
+        eq(orcamentos.categoriaId, categorias.id),
+        eq(orcamentos.period, period),
+        eq(orcamentos.userId, userId)
+      )
+    )
+    .where(
+      and(
+        eq(lancamentos.userId, userId),
+        eq(lancamentos.period, period),
+        eq(lancamentos.transactionType, "Receita"),
+        eq(pagadores.role, PAGADOR_ROLE_ADMIN),
+        eq(categorias.type, "receita"),
+        or(
+          isNull(lancamentos.note),
+          sql`${lancamentos.note} NOT LIKE ${`${ACCOUNT_AUTO_INVOICE_NOTE_PREFIX}%`}`
+        )
+      )
+    )
+    .groupBy(categorias.id, categorias.name, categorias.icon, orcamentos.amount);
+
+  // Busca receitas do período anterior agrupadas por categoria
+  const previousPeriodRows = await db
+    .select({
+      categoryId: categorias.id,
+      total: sql<number>`coalesce(sum(${lancamentos.amount}), 0)`,
+    })
+    .from(lancamentos)
+    .innerJoin(pagadores, eq(lancamentos.pagadorId, pagadores.id))
+    .innerJoin(categorias, eq(lancamentos.categoriaId, categorias.id))
+    .where(
+      and(
+        eq(lancamentos.userId, userId),
+        eq(lancamentos.period, previousPeriod),
+        eq(lancamentos.transactionType, "Receita"),
+        eq(pagadores.role, PAGADOR_ROLE_ADMIN),
+        eq(categorias.type, "receita"),
+        or(
+          isNull(lancamentos.note),
+          sql`${lancamentos.note} NOT LIKE ${`${ACCOUNT_AUTO_INVOICE_NOTE_PREFIX}%`}`
+        )
+      )
+    )
+    .groupBy(categorias.id);
+
+  // Cria um mapa do período anterior para busca rápida
+  const previousMap = new Map<string, number>();
+  let previousTotal = 0;
+
+  for (const row of previousPeriodRows) {
+    const amount = Math.abs(safeToNumber(row.total));
+    previousMap.set(row.categoryId, amount);
+    previousTotal += amount;
+  }
+
+  // Calcula o total do período atual
+  let currentTotal = 0;
+  for (const row of currentPeriodRows) {
+    currentTotal += Math.abs(safeToNumber(row.total));
+  }
+
+  // Monta os dados de cada categoria
+  const categories: CategoryIncomeItem[] = currentPeriodRows.map((row) => {
+    const currentAmount = Math.abs(safeToNumber(row.total));
+    const previousAmount = previousMap.get(row.categoryId) ?? 0;
+    const percentageChange = calculatePercentageChange(
+      currentAmount,
+      previousAmount
+    );
+    const percentageOfTotal =
+      currentTotal > 0 ? (currentAmount / currentTotal) * 100 : 0;
+
+    const budgetAmount = row.budgetAmount ? safeToNumber(row.budgetAmount) : null;
+    const budgetUsedPercentage =
+      budgetAmount && budgetAmount > 0
+        ? (currentAmount / budgetAmount) * 100
+        : null;
+
+    return {
+      categoryId: row.categoryId,
+      categoryName: row.categoryName,
+      categoryIcon: row.categoryIcon,
+      currentAmount,
+      previousAmount,
+      percentageChange,
+      percentageOfTotal,
+      budgetAmount,
+      budgetUsedPercentage,
+    };
+  });
+
+  // Ordena por valor atual (maior para menor)
+  categories.sort((a, b) => b.currentAmount - a.currentAmount);
+
+  return {
+    categories,
+    currentTotal,
+    previousTotal,
+  };
+}
diff --git a/lib/dashboard/common.ts b/lib/dashboard/common.ts
new file mode 100644
index 0000000..2147fb5
--- /dev/null
+++ b/lib/dashboard/common.ts
@@ -0,0 +1,13 @@
+/**
+ * Common utilities and helpers for dashboard queries
+ */
+
+import { safeToNumber } from "@/lib/utils/number";
+import { calculatePercentageChange } from "@/lib/utils/math";
+
+export { safeToNumber, calculatePercentageChange };
+
+/**
+ * Alias for backward compatibility - dashboard uses "toNumber" naming
+ */
+export const toNumber = safeToNumber;
diff --git a/lib/dashboard/expenses/installment-expenses.ts b/lib/dashboard/expenses/installment-expenses.ts
new file mode 100644
index 0000000..5cc1c9c
--- /dev/null
+++ b/lib/dashboard/expenses/installment-expenses.ts
@@ -0,0 +1,96 @@
+import { lancamentos, pagadores } from "@/db/schema";
+import {
+  ACCOUNT_AUTO_INVOICE_NOTE_PREFIX,
+  INITIAL_BALANCE_NOTE,
+} from "@/lib/accounts/constants";
+import { PAGADOR_ROLE_ADMIN } from "@/lib/pagadores/constants";
+import { db } from "@/lib/db";
+import { toNumber } from "@/lib/dashboard/common";
+import { and, desc, eq, isNull, or, sql } from "drizzle-orm";
+
+export type InstallmentExpense = {
+  id: string;
+  name: string;
+  amount: number;
+  paymentMethod: string;
+  currentInstallment: number | null;
+  installmentCount: number | null;
+  dueDate: Date | null;
+  purchaseDate: Date;
+  period: string;
+};
+
+export type InstallmentExpensesData = {
+  expenses: InstallmentExpense[];
+};
+
+export async function fetchInstallmentExpenses(
+  userId: string,
+  period: string
+): Promise<InstallmentExpensesData> {
+  const rows = await db
+    .select({
+      id: lancamentos.id,
+      name: lancamentos.name,
+      amount: lancamentos.amount,
+      paymentMethod: lancamentos.paymentMethod,
+      currentInstallment: lancamentos.currentInstallment,
+      installmentCount: lancamentos.installmentCount,
+      dueDate: lancamentos.dueDate,
+      purchaseDate: lancamentos.purchaseDate,
+      period: lancamentos.period,
+    })
+    .from(lancamentos)
+    .innerJoin(pagadores, eq(lancamentos.pagadorId, pagadores.id))
+    .where(
+      and(
+        eq(lancamentos.userId, userId),
+        eq(lancamentos.period, period),
+        eq(lancamentos.transactionType, "Despesa"),
+        eq(lancamentos.condition, "Parcelado"),
+        eq(lancamentos.isAnticipated, false),
+        eq(pagadores.role, PAGADOR_ROLE_ADMIN),
+        or(
+          isNull(lancamentos.note),
+          and(
+            sql`${lancamentos.note} != ${INITIAL_BALANCE_NOTE}`,
+            sql`${lancamentos.note} NOT LIKE ${`${ACCOUNT_AUTO_INVOICE_NOTE_PREFIX}%`}`
+          )
+        )
+      )
+    )
+    .orderBy(desc(lancamentos.purchaseDate), desc(lancamentos.createdAt));
+
+  const expenses = rows
+    .map(
+      (row): InstallmentExpense => ({
+        id: row.id,
+        name: row.name,
+        amount: Math.abs(toNumber(row.amount)),
+        paymentMethod: row.paymentMethod,
+        currentInstallment: row.currentInstallment,
+        installmentCount: row.installmentCount,
+        dueDate: row.dueDate ?? null,
+        purchaseDate: row.purchaseDate,
+        period: row.period,
+      })
+    )
+    .sort((a, b) => {
+      // Calcula parcelas restantes para cada item
+      const remainingA =
+        a.installmentCount && a.currentInstallment
+          ? a.installmentCount - a.currentInstallment
+          : 0;
+      const remainingB =
+        b.installmentCount && b.currentInstallment
+          ? b.installmentCount - b.currentInstallment
+          : 0;
+
+      // Ordena do menor número de parcelas restantes para o maior
+      return remainingA - remainingB;
+    });
+
+  return {
+    expenses,
+  };
+}
diff --git a/lib/dashboard/expenses/recurring-expenses.ts b/lib/dashboard/expenses/recurring-expenses.ts
new file mode 100644
index 0000000..a56c265
--- /dev/null
+++ b/lib/dashboard/expenses/recurring-expenses.ts
@@ -0,0 +1,66 @@
+import { lancamentos, pagadores } from "@/db/schema";
+import {
+  ACCOUNT_AUTO_INVOICE_NOTE_PREFIX,
+  INITIAL_BALANCE_NOTE,
+} from "@/lib/accounts/constants";
+import { PAGADOR_ROLE_ADMIN } from "@/lib/pagadores/constants";
+import { db } from "@/lib/db";
+import { toNumber } from "@/lib/dashboard/common";
+import { and, desc, eq, isNull, or, sql } from "drizzle-orm";
+
+export type RecurringExpense = {
+  id: string;
+  name: string;
+  amount: number;
+  paymentMethod: string;
+  recurrenceCount: number | null;
+};
+
+export type RecurringExpensesData = {
+  expenses: RecurringExpense[];
+};
+
+export async function fetchRecurringExpenses(
+  userId: string,
+  period: string
+): Promise<RecurringExpensesData> {
+  const results = await db
+    .select({
+      id: lancamentos.id,
+      name: lancamentos.name,
+      amount: lancamentos.amount,
+      paymentMethod: lancamentos.paymentMethod,
+      recurrenceCount: lancamentos.recurrenceCount,
+    })
+    .from(lancamentos)
+    .innerJoin(pagadores, eq(lancamentos.pagadorId, pagadores.id))
+    .where(
+      and(
+        eq(lancamentos.userId, userId),
+        eq(lancamentos.period, period),
+        eq(lancamentos.transactionType, "Despesa"),
+        eq(lancamentos.condition, "Recorrente"),
+        eq(pagadores.role, PAGADOR_ROLE_ADMIN),
+        or(
+          isNull(lancamentos.note),
+          and(
+            sql`${lancamentos.note} != ${INITIAL_BALANCE_NOTE}`,
+            sql`${lancamentos.note} NOT LIKE ${`${ACCOUNT_AUTO_INVOICE_NOTE_PREFIX}%`}`
+          )
+        )
+      )
+    )
+    .orderBy(desc(lancamentos.purchaseDate), desc(lancamentos.createdAt));
+
+  const expenses = results.map((row): RecurringExpense => ({
+    id: row.id,
+    name: row.name,
+    amount: Math.abs(toNumber(row.amount)),
+    paymentMethod: row.paymentMethod,
+    recurrenceCount: row.recurrenceCount,
+  }));
+
+  return {
+    expenses,
+  };
+}
diff --git a/lib/dashboard/expenses/top-expenses.ts b/lib/dashboard/expenses/top-expenses.ts
new file mode 100644
index 0000000..88a5dcd
--- /dev/null
+++ b/lib/dashboard/expenses/top-expenses.ts
@@ -0,0 +1,84 @@
+import { cartoes, contas, lancamentos, pagadores } from "@/db/schema";
+import {
+  ACCOUNT_AUTO_INVOICE_NOTE_PREFIX,
+  INITIAL_BALANCE_NOTE,
+} from "@/lib/accounts/constants";
+import { db } from "@/lib/db";
+import { PAGADOR_ROLE_ADMIN } from "@/lib/pagadores/constants";
+import { and, asc, eq, isNull, or, sql } from "drizzle-orm";
+import { toNumber } from "@/lib/dashboard/common";
+
+export type TopExpense = {
+  id: string;
+  name: string;
+  amount: number;
+  purchaseDate: Date;
+  paymentMethod: string;
+  logo?: string | null;
+};
+
+export type TopExpensesData = {
+  expenses: TopExpense[];
+};
+
+export async function fetchTopExpenses(
+  userId: string,
+  period: string,
+  cardOnly: boolean = false
+): Promise<TopExpensesData> {
+  const conditions = [
+    eq(lancamentos.userId, userId),
+    eq(lancamentos.period, period),
+    eq(lancamentos.transactionType, "Despesa"),
+    eq(pagadores.role, PAGADOR_ROLE_ADMIN),
+    or(
+      isNull(lancamentos.note),
+      and(
+        sql`${lancamentos.note} != ${INITIAL_BALANCE_NOTE}`,
+        sql`${
+          lancamentos.note
+        } NOT LIKE ${`${ACCOUNT_AUTO_INVOICE_NOTE_PREFIX}%`}`
+      )
+    ),
+  ];
+
+  // Se cardOnly for true, filtra apenas pagamentos com cartão
+  if (cardOnly) {
+    conditions.push(eq(lancamentos.paymentMethod, "Cartão de Crédito"));
+  }
+
+  const results = await db
+    .select({
+      id: lancamentos.id,
+      name: lancamentos.name,
+      amount: lancamentos.amount,
+      purchaseDate: lancamentos.purchaseDate,
+      paymentMethod: lancamentos.paymentMethod,
+      cartaoId: lancamentos.cartaoId,
+      contaId: lancamentos.contaId,
+      cardLogo: cartoes.logo,
+      accountLogo: contas.logo,
+    })
+    .from(lancamentos)
+    .innerJoin(pagadores, eq(lancamentos.pagadorId, pagadores.id))
+    .leftJoin(cartoes, eq(lancamentos.cartaoId, cartoes.id))
+    .leftJoin(contas, eq(lancamentos.contaId, contas.id))
+    .where(and(...conditions))
+    .orderBy(asc(lancamentos.amount))
+    .limit(10);
+
+  const expenses = results.map(
+    (row): TopExpense => ({
+      id: row.id,
+      name: row.name,
+      amount: Math.abs(toNumber(row.amount)),
+      purchaseDate: row.purchaseDate,
+      paymentMethod: row.paymentMethod,
+      logo: row.cardLogo ?? row.accountLogo ?? null,
+    })
+  );
+
+  return {
+    expenses,
+  };
+}
diff --git a/lib/dashboard/fetch-dashboard-data.ts b/lib/dashboard/fetch-dashboard-data.ts
new file mode 100644
index 0000000..665bb71
--- /dev/null
+++ b/lib/dashboard/fetch-dashboard-data.ts
@@ -0,0 +1,82 @@
+import { fetchDashboardAccounts } from "./accounts";
+import { fetchDashboardBoletos } from "./boletos";
+import { fetchExpensesByCategory } from "./categories/expenses-by-category";
+import { fetchIncomeByCategory } from "./categories/income-by-category";
+import { fetchInstallmentExpenses } from "./expenses/installment-expenses";
+import { fetchRecurringExpenses } from "./expenses/recurring-expenses";
+import { fetchTopExpenses } from "./expenses/top-expenses";
+import { fetchIncomeExpenseBalance } from "./income-expense-balance";
+import { fetchDashboardInvoices } from "./invoices";
+import { fetchDashboardCardMetrics } from "./metrics";
+import { fetchDashboardNotifications } from "./notifications";
+import { fetchPaymentConditions } from "./payments/payment-conditions";
+import { fetchPaymentMethods } from "./payments/payment-methods";
+import { fetchPaymentStatus } from "./payments/payment-status";
+import { fetchPurchasesByCategory } from "./purchases-by-category";
+import { fetchRecentTransactions } from "./recent-transactions";
+import { fetchTopEstablishments } from "./top-establishments";
+
+export async function fetchDashboardData(userId: string, period: string) {
+  const [
+    metrics,
+    accountsSnapshot,
+    invoicesSnapshot,
+    boletosSnapshot,
+    notificationsSnapshot,
+    paymentStatusData,
+    incomeExpenseBalanceData,
+    recentTransactionsData,
+    paymentConditionsData,
+    paymentMethodsData,
+    recurringExpensesData,
+    installmentExpensesData,
+    topEstablishmentsData,
+    topExpensesAll,
+    topExpensesCardOnly,
+    purchasesByCategoryData,
+    incomeByCategoryData,
+    expensesByCategoryData,
+  ] = await Promise.all([
+    fetchDashboardCardMetrics(userId, period),
+    fetchDashboardAccounts(userId),
+    fetchDashboardInvoices(userId, period),
+    fetchDashboardBoletos(userId, period),
+    fetchDashboardNotifications(userId, period),
+    fetchPaymentStatus(userId, period),
+    fetchIncomeExpenseBalance(userId, period),
+    fetchRecentTransactions(userId, period),
+    fetchPaymentConditions(userId, period),
+    fetchPaymentMethods(userId, period),
+    fetchRecurringExpenses(userId, period),
+    fetchInstallmentExpenses(userId, period),
+    fetchTopEstablishments(userId, period),
+    fetchTopExpenses(userId, period, false),
+    fetchTopExpenses(userId, period, true),
+    fetchPurchasesByCategory(userId, period),
+    fetchIncomeByCategory(userId, period),
+    fetchExpensesByCategory(userId, period),
+  ]);
+
+  return {
+    metrics,
+    accountsSnapshot,
+    invoicesSnapshot,
+    boletosSnapshot,
+    notificationsSnapshot,
+    paymentStatusData,
+    incomeExpenseBalanceData,
+    recentTransactionsData,
+    paymentConditionsData,
+    paymentMethodsData,
+    recurringExpensesData,
+    installmentExpensesData,
+    topEstablishmentsData,
+    topExpensesAll,
+    topExpensesCardOnly,
+    purchasesByCategoryData,
+    incomeByCategoryData,
+    expensesByCategoryData,
+  };
+}
+
+export type DashboardData = Awaited<ReturnType<typeof fetchDashboardData>>;
diff --git a/lib/dashboard/income-expense-balance.ts b/lib/dashboard/income-expense-balance.ts
new file mode 100644
index 0000000..4c0a952
--- /dev/null
+++ b/lib/dashboard/income-expense-balance.ts
@@ -0,0 +1,138 @@
+import { lancamentos, pagadores } from "@/db/schema";
+import { ACCOUNT_AUTO_INVOICE_NOTE_PREFIX } from "@/lib/accounts/constants";
+import { db } from "@/lib/db";
+import { toNumber } from "@/lib/dashboard/common";
+import { and, eq, sql } from "drizzle-orm";
+
+export type MonthData = {
+  month: string;
+  monthLabel: string;
+  income: number;
+  expense: number;
+  balance: number;
+};
+
+export type IncomeExpenseBalanceData = {
+  months: MonthData[];
+};
+
+const MONTH_LABELS: Record<string, string> = {
+  "01": "jan",
+  "02": "fev",
+  "03": "mar",
+  "04": "abr",
+  "05": "mai",
+  "06": "jun",
+  "07": "jul",
+  "08": "ago",
+  "09": "set",
+  "10": "out",
+  "11": "nov",
+  "12": "dez",
+};
+
+const generateLast6Months = (currentPeriod: string): string[] => {
+  const [yearStr, monthStr] = currentPeriod.split("-");
+  let year = Number.parseInt(yearStr ?? "", 10);
+  let month = Number.parseInt(monthStr ?? "", 10);
+
+  if (Number.isNaN(year) || Number.isNaN(month)) {
+    const now = new Date();
+    year = now.getFullYear();
+    month = now.getMonth() + 1;
+  }
+
+  const periods: string[] = [];
+
+  for (let i = 5; i >= 0; i--) {
+    let targetMonth = month - i;
+    let targetYear = year;
+
+    while (targetMonth <= 0) {
+      targetMonth += 12;
+      targetYear -= 1;
+    }
+
+    periods.push(`${targetYear}-${String(targetMonth).padStart(2, "0")}`);
+  }
+
+  return periods;
+};
+
+export async function fetchIncomeExpenseBalance(
+  userId: string,
+  currentPeriod: string
+): Promise<IncomeExpenseBalanceData> {
+  const periods = generateLast6Months(currentPeriod);
+
+  const results = await Promise.all(
+    periods.map(async (period) => {
+      // Busca receitas do período
+      const [incomeRow] = await db
+        .select({
+          total: sql<number>`
+            coalesce(
+              sum(${lancamentos.amount}),
+              0
+            )
+          `,
+        })
+        .from(lancamentos)
+        .innerJoin(pagadores, eq(lancamentos.pagadorId, pagadores.id))
+        .where(
+          and(
+            eq(lancamentos.userId, userId),
+            eq(lancamentos.period, period),
+            eq(lancamentos.transactionType, "Receita"),
+            eq(pagadores.role, "admin"),
+            sql`(${lancamentos.note} IS NULL OR ${
+              lancamentos.note
+            } NOT LIKE ${`${ACCOUNT_AUTO_INVOICE_NOTE_PREFIX}%`})`
+          )
+        );
+
+      // Busca despesas do período
+      const [expenseRow] = await db
+        .select({
+          total: sql<number>`
+            coalesce(
+              sum(${lancamentos.amount}),
+              0
+            )
+          `,
+        })
+        .from(lancamentos)
+        .innerJoin(pagadores, eq(lancamentos.pagadorId, pagadores.id))
+        .where(
+          and(
+            eq(lancamentos.userId, userId),
+            eq(lancamentos.period, period),
+            eq(lancamentos.transactionType, "Despesa"),
+            eq(pagadores.role, "admin"),
+            sql`(${lancamentos.note} IS NULL OR ${
+              lancamentos.note
+            } NOT LIKE ${`${ACCOUNT_AUTO_INVOICE_NOTE_PREFIX}%`})`
+          )
+        );
+
+      const income = Math.abs(toNumber(incomeRow?.total));
+      const expense = Math.abs(toNumber(expenseRow?.total));
+      const balance = income - expense;
+
+      const [, monthPart] = period.split("-");
+      const monthLabel = MONTH_LABELS[monthPart ?? "01"] ?? monthPart;
+
+      return {
+        month: period,
+        monthLabel: monthLabel ?? "",
+        income,
+        expense,
+        balance,
+      };
+    })
+  );
+
+  return {
+    months: results,
+  };
+}
diff --git a/lib/dashboard/invoices.ts b/lib/dashboard/invoices.ts
new file mode 100644
index 0000000..b955c08
--- /dev/null
+++ b/lib/dashboard/invoices.ts
@@ -0,0 +1,279 @@
+import { cartoes, faturas, lancamentos, pagadores } from "@/db/schema";
+import { ACCOUNT_AUTO_INVOICE_NOTE_PREFIX } from "@/lib/accounts/constants";
+import { db } from "@/lib/db";
+import {
+  INVOICE_PAYMENT_STATUS,
+  INVOICE_STATUS_VALUES,
+  type InvoicePaymentStatus,
+} from "@/lib/faturas";
+import { toNumber } from "@/lib/dashboard/common";
+import { and, eq, ilike, isNotNull, sql } from "drizzle-orm";
+
+type RawDashboardInvoice = {
+  invoiceId: string | null;
+  cardId: string;
+  cardName: string;
+  cardBrand: string | null;
+  cardStatus: string | null;
+  logo: string | null;
+  dueDay: string;
+  period: string | null;
+  paymentStatus: string | null;
+  totalAmount: string | number | null;
+  transactionCount: string | number | null;
+  invoiceCreatedAt: Date | null;
+};
+
+export type InvoicePagadorBreakdown = {
+  pagadorId: string | null;
+  pagadorName: string;
+  pagadorAvatar: string | null;
+  amount: number;
+};
+
+export type DashboardInvoice = {
+  id: string;
+  cardId: string;
+  cardName: string;
+  cardBrand: string | null;
+  cardStatus: string | null;
+  logo: string | null;
+  dueDay: string;
+  period: string;
+  paymentStatus: InvoicePaymentStatus;
+  totalAmount: number;
+  paidAt: string | null;
+  pagadorBreakdown: InvoicePagadorBreakdown[];
+};
+
+export type DashboardInvoicesSnapshot = {
+  invoices: DashboardInvoice[];
+  totalPending: number;
+};
+
+const toISODate = (value: Date | string | null | undefined) => {
+  if (!value) {
+    return null;
+  }
+
+  if (value instanceof Date) {
+    return value.toISOString().slice(0, 10);
+  }
+
+  if (typeof value === "string") {
+    return value.slice(0, 10);
+  }
+
+  return null;
+};
+
+const isInvoiceStatus = (value: unknown): value is InvoicePaymentStatus =>
+  typeof value === "string" &&
+  (INVOICE_STATUS_VALUES as string[]).includes(value);
+
+const buildFallbackId = (cardId: string, period: string) =>
+  `${cardId}:${period}`;
+
+export async function fetchDashboardInvoices(
+  userId: string,
+  period: string
+): Promise<DashboardInvoicesSnapshot> {
+  const paymentRows = await db
+    .select({
+      note: lancamentos.note,
+      purchaseDate: lancamentos.purchaseDate,
+      createdAt: lancamentos.createdAt,
+    })
+    .from(lancamentos)
+    .where(
+      and(
+        eq(lancamentos.userId, userId),
+        ilike(lancamentos.note, `${ACCOUNT_AUTO_INVOICE_NOTE_PREFIX}%`)
+      )
+    );
+
+  const paymentMap = new Map<string, string>();
+  for (const row of paymentRows) {
+    const note = row.note;
+    if (!note || !note.startsWith(ACCOUNT_AUTO_INVOICE_NOTE_PREFIX)) {
+      continue;
+    }
+    const parts = note.split(":");
+    if (parts.length < 3) {
+      continue;
+    }
+    const cardIdPart = parts[1];
+    const periodPart = parts[2];
+    if (!cardIdPart || !periodPart) {
+      continue;
+    }
+    const key = `${cardIdPart}:${periodPart}`;
+    const resolvedDate =
+      row.purchaseDate instanceof Date && !Number.isNaN(row.purchaseDate.valueOf())
+        ? row.purchaseDate
+        : row.createdAt;
+    const isoDate = toISODate(resolvedDate);
+    if (!isoDate) {
+      continue;
+    }
+    const existing = paymentMap.get(key);
+    if (!existing || existing < isoDate) {
+      paymentMap.set(key, isoDate);
+    }
+  }
+
+  const [rows, breakdownRows] = await Promise.all([
+    db
+      .select({
+        invoiceId: faturas.id,
+        cardId: cartoes.id,
+        cardName: cartoes.name,
+        logo: cartoes.logo,
+        dueDay: cartoes.dueDay,
+        period: faturas.period,
+        paymentStatus: faturas.paymentStatus,
+        invoiceCreatedAt: faturas.createdAt,
+        totalAmount: sql<number | null>`
+        COALESCE(SUM(${lancamentos.amount}), 0)
+      `,
+        transactionCount: sql<number | null>`COUNT(${lancamentos.id})`,
+      })
+      .from(cartoes)
+      .leftJoin(
+        faturas,
+        and(
+          eq(faturas.cartaoId, cartoes.id),
+          eq(faturas.userId, userId),
+          eq(faturas.period, period)
+        )
+      )
+      .leftJoin(
+        lancamentos,
+        and(
+          eq(lancamentos.cartaoId, cartoes.id),
+          eq(lancamentos.userId, userId),
+          eq(lancamentos.period, period)
+        )
+      )
+      .where(eq(cartoes.userId, userId))
+      .groupBy(
+        faturas.id,
+        cartoes.id,
+        cartoes.name,
+        cartoes.brand,
+        cartoes.status,
+        cartoes.logo,
+        cartoes.dueDay,
+        faturas.period,
+        faturas.paymentStatus
+      ),
+    db
+      .select({
+        cardId: lancamentos.cartaoId,
+        period: lancamentos.period,
+        pagadorId: lancamentos.pagadorId,
+        pagadorName: pagadores.name,
+        pagadorAvatar: pagadores.avatarUrl,
+        amount: sql<number>`coalesce(sum(${lancamentos.amount}), 0)`,
+      })
+      .from(lancamentos)
+      .leftJoin(pagadores, eq(lancamentos.pagadorId, pagadores.id))
+      .where(
+        and(
+          eq(lancamentos.userId, userId),
+          eq(lancamentos.period, period),
+          isNotNull(lancamentos.cartaoId)
+        )
+      )
+      .groupBy(
+        lancamentos.cartaoId,
+        lancamentos.period,
+        lancamentos.pagadorId,
+        pagadores.name,
+        pagadores.avatarUrl
+      ),
+  ]);
+
+  const breakdownMap = new Map<string, InvoicePagadorBreakdown[]>();
+  for (const row of breakdownRows) {
+    if (!row.cardId) {
+      continue;
+    }
+    const resolvedPeriod = row.period ?? period;
+    const amount = Math.abs(toNumber(row.amount));
+    if (amount <= 0) {
+      continue;
+    }
+    const key = `${row.cardId}:${resolvedPeriod}`;
+    const current = breakdownMap.get(key) ?? [];
+    current.push({
+      pagadorId: row.pagadorId ?? null,
+      pagadorName: row.pagadorName?.trim() || "Sem pagador",
+      pagadorAvatar: row.pagadorAvatar ?? null,
+      amount,
+    });
+    breakdownMap.set(key, current);
+  }
+
+  const invoices = rows
+    .map((row: RawDashboardInvoice | null) => {
+      if (!row) return null;
+
+      const totalAmount = toNumber(row.totalAmount);
+      const transactionCount = toNumber(row.transactionCount);
+      const paymentStatus = isInvoiceStatus(row.paymentStatus)
+        ? row.paymentStatus
+        : INVOICE_PAYMENT_STATUS.PENDING;
+
+      const shouldInclude =
+        transactionCount > 0 ||
+        Math.abs(totalAmount) > 0 ||
+        row.invoiceId !== null;
+
+      if (!shouldInclude) {
+        return null;
+      }
+
+      const resolvedPeriod = row.period ?? period;
+      const paymentKey = `${row.cardId}:${resolvedPeriod}`;
+      const paidAt =
+        paymentStatus === INVOICE_PAYMENT_STATUS.PAID
+          ? paymentMap.get(paymentKey) ??
+            toISODate(row.invoiceCreatedAt)
+          : null;
+
+      return {
+        id: row.invoiceId ?? buildFallbackId(row.cardId, period),
+        cardId: row.cardId,
+        cardName: row.cardName,
+        cardBrand: row.cardBrand,
+        cardStatus: row.cardStatus,
+        logo: row.logo,
+        dueDay: row.dueDay,
+        period: resolvedPeriod,
+        paymentStatus,
+        totalAmount,
+        paidAt,
+        pagadorBreakdown: (
+          breakdownMap.get(`${row.cardId}:${resolvedPeriod}`) ?? []
+        ).sort((a, b) => b.amount - a.amount),
+      } satisfies DashboardInvoice;
+    })
+    .filter((invoice): invoice is DashboardInvoice => invoice !== null)
+    .sort((a, b) => {
+      // Ordena do maior valor para o menor
+      return Math.abs(b.totalAmount) - Math.abs(a.totalAmount);
+    });
+
+  const totalPending = invoices.reduce((total, invoice) => {
+    if (invoice.paymentStatus !== INVOICE_PAYMENT_STATUS.PENDING) {
+      return total;
+    }
+    return total + invoice.totalAmount;
+  }, 0);
+
+  return {
+    invoices,
+    totalPending,
+  };
+}
diff --git a/lib/dashboard/metrics.ts b/lib/dashboard/metrics.ts
new file mode 100644
index 0000000..4fb7a52
--- /dev/null
+++ b/lib/dashboard/metrics.ts
@@ -0,0 +1,155 @@
+import { lancamentos, pagadores } from "@/db/schema";
+import { ACCOUNT_AUTO_INVOICE_NOTE_PREFIX } from "@/lib/accounts/constants";
+import { db } from "@/lib/db";
+import { PAGADOR_ROLE_ADMIN } from "@/lib/pagadores/constants";
+import {
+  getPreviousPeriod,
+  buildPeriodRange,
+  comparePeriods,
+} from "@/lib/utils/period";
+import { safeToNumber } from "@/lib/utils/number";
+import { and, asc, eq, ilike, isNull, lte, not, or, sum, ne } from "drizzle-orm";
+
+const RECEITA = "Receita";
+const DESPESA = "Despesa";
+const TRANSFERENCIA = "Transferência";
+
+type MetricPair = {
+  current: number;
+  previous: number;
+};
+
+export type DashboardCardMetrics = {
+  period: string;
+  previousPeriod: string;
+  receitas: MetricPair;
+  despesas: MetricPair;
+  balanco: MetricPair;
+  previsto: MetricPair;
+};
+
+type PeriodTotals = {
+  receitas: number;
+  despesas: number;
+  balanco: number;
+};
+
+const createEmptyTotals = (): PeriodTotals => ({
+  receitas: 0,
+  despesas: 0,
+  balanco: 0,
+});
+
+const ensurePeriodTotals = (
+  store: Map<string, PeriodTotals>,
+  period: string
+): PeriodTotals => {
+  if (!store.has(period)) {
+    store.set(period, createEmptyTotals());
+  }
+  const totals = store.get(period);
+  // This should always exist since we just set it above
+  if (!totals) {
+    const emptyTotals = createEmptyTotals();
+    store.set(period, emptyTotals);
+    return emptyTotals;
+  }
+  return totals;
+};
+
+// Re-export for backward compatibility
+export { getPreviousPeriod };
+
+export async function fetchDashboardCardMetrics(
+  userId: string,
+  period: string
+): Promise<DashboardCardMetrics> {
+  const previousPeriod = getPreviousPeriod(period);
+
+  const rows = await db
+    .select({
+      period: lancamentos.period,
+      transactionType: lancamentos.transactionType,
+      totalAmount: sum(lancamentos.amount).as("total"),
+    })
+    .from(lancamentos)
+    .innerJoin(pagadores, eq(lancamentos.pagadorId, pagadores.id))
+    .where(
+      and(
+        eq(lancamentos.userId, userId),
+        lte(lancamentos.period, period),
+        eq(pagadores.role, PAGADOR_ROLE_ADMIN),
+        ne(lancamentos.transactionType, TRANSFERENCIA),
+        or(
+          isNull(lancamentos.note),
+          not(
+            ilike(
+              lancamentos.note,
+              `${ACCOUNT_AUTO_INVOICE_NOTE_PREFIX}%`
+            )
+          )
+        )
+      )
+    )
+    .groupBy(lancamentos.period, lancamentos.transactionType)
+    .orderBy(asc(lancamentos.period), asc(lancamentos.transactionType));
+
+  const periodTotals = new Map<string, PeriodTotals>();
+
+  for (const row of rows) {
+    if (!row.period) continue;
+    const totals = ensurePeriodTotals(periodTotals, row.period);
+    const total = safeToNumber(row.totalAmount);
+    if (row.transactionType === RECEITA) {
+      totals.receitas += total;
+    } else if (row.transactionType === DESPESA) {
+      totals.despesas += Math.abs(total);
+    }
+  }
+
+  ensurePeriodTotals(periodTotals, period);
+  ensurePeriodTotals(periodTotals, previousPeriod);
+
+  const earliestPeriod =
+    periodTotals.size > 0 ? Array.from(periodTotals.keys()).sort()[0] : period;
+
+  const startPeriod =
+    comparePeriods(earliestPeriod, previousPeriod) <= 0
+      ? earliestPeriod
+      : previousPeriod;
+
+  const periodRange = buildPeriodRange(startPeriod, period);
+  const forecastByPeriod = new Map<string, number>();
+  let runningForecast = 0;
+
+  for (const key of periodRange) {
+    const totals = ensurePeriodTotals(periodTotals, key);
+    totals.balanco = totals.receitas - totals.despesas;
+    runningForecast += totals.balanco;
+    forecastByPeriod.set(key, runningForecast);
+  }
+
+  const currentTotals = ensurePeriodTotals(periodTotals, period);
+  const previousTotals = ensurePeriodTotals(periodTotals, previousPeriod);
+
+  return {
+    period,
+    previousPeriod,
+    receitas: {
+      current: currentTotals.receitas,
+      previous: previousTotals.receitas,
+    },
+    despesas: {
+      current: currentTotals.despesas,
+      previous: previousTotals.despesas,
+    },
+    balanco: {
+      current: currentTotals.balanco,
+      previous: previousTotals.balanco,
+    },
+    previsto: {
+      current: forecastByPeriod.get(period) ?? runningForecast,
+      previous: forecastByPeriod.get(previousPeriod) ?? 0,
+    },
+  };
+}
diff --git a/lib/dashboard/notifications.ts b/lib/dashboard/notifications.ts
new file mode 100644
index 0000000..a894a24
--- /dev/null
+++ b/lib/dashboard/notifications.ts
@@ -0,0 +1,373 @@
+"use server";
+
+import { cartoes, faturas, lancamentos, pagadores } from "@/db/schema";
+import { db } from "@/lib/db";
+import { INVOICE_PAYMENT_STATUS } from "@/lib/faturas";
+import { and, eq, lt, sql } from "drizzle-orm";
+
+export type NotificationType = "overdue" | "due_soon";
+
+export type DashboardNotification = {
+  id: string;
+  type: "invoice" | "boleto";
+  name: string;
+  dueDate: string;
+  status: NotificationType;
+  amount: number;
+  period?: string;
+  showAmount: boolean; // Controla se o valor deve ser exibido no card
+};
+
+export type DashboardNotificationsSnapshot = {
+  notifications: DashboardNotification[];
+  totalCount: number;
+};
+
+const PAYMENT_METHOD_BOLETO = "Boleto";
+
+/**
+ * Calcula a data de vencimento de uma fatura baseado no período e dia de vencimento
+ * @param period Período no formato YYYY-MM
+ * @param dueDay Dia do vencimento (1-31)
+ * @returns Data de vencimento no formato YYYY-MM-DD
+ */
+function calculateDueDate(period: string, dueDay: string): string {
+  const [year, month] = period.split("-");
+  const yearNumber = Number(year);
+  const monthNumber = Number(month);
+  const hasValidMonth =
+    Number.isInteger(yearNumber) &&
+    Number.isInteger(monthNumber) &&
+    monthNumber >= 1 &&
+    monthNumber <= 12;
+
+  const daysInMonth = hasValidMonth
+    ? new Date(yearNumber, monthNumber, 0).getDate()
+    : null;
+
+  const dueDayNumber = Number(dueDay);
+  const hasValidDueDay = Number.isInteger(dueDayNumber) && dueDayNumber > 0;
+
+  const clampedDay =
+    hasValidMonth && hasValidDueDay && daysInMonth
+      ? Math.min(dueDayNumber, daysInMonth)
+      : hasValidDueDay
+      ? dueDayNumber
+      : null;
+
+  const day = clampedDay
+    ? String(clampedDay).padStart(2, "0")
+    : dueDay.padStart(2, "0");
+
+  const normalizedMonth =
+    hasValidMonth && month.length < 2 ? month.padStart(2, "0") : month;
+
+  return `${year}-${normalizedMonth}-${day}`;
+}
+
+/**
+ * Normaliza uma data para o início do dia em UTC (00:00:00)
+ */
+function normalizeDate(date: Date): Date {
+  return new Date(Date.UTC(
+    date.getUTCFullYear(),
+    date.getUTCMonth(),
+    date.getUTCDate(),
+    0, 0, 0, 0
+  ));
+}
+
+/**
+ * Converte string "YYYY-MM-DD" para Date em UTC (evita problemas de timezone)
+ */
+function parseUTCDate(dateString: string): Date {
+  const [year, month, day] = dateString.split("-").map(Number);
+  return new Date(Date.UTC(year, month - 1, day));
+}
+
+/**
+ * Verifica se uma data está atrasada (antes do dia atual, não incluindo hoje)
+ */
+function isOverdue(dueDate: string, today: Date): boolean {
+  const due = parseUTCDate(dueDate);
+  const dueNormalized = normalizeDate(due);
+
+  return dueNormalized < today;
+}
+
+/**
+ * Verifica se uma data vence nos próximos X dias (incluindo hoje)
+ * Exemplo: Se hoje é dia 4 e daysThreshold = 5, retorna true para datas de 4 a 8
+ */
+function isDueWithinDays(
+  dueDate: string,
+  today: Date,
+  daysThreshold: number
+): boolean {
+  const due = parseUTCDate(dueDate);
+  const dueNormalized = normalizeDate(due);
+
+  // Data limite: hoje + daysThreshold dias (em UTC)
+  const limitDate = new Date(today);
+  limitDate.setUTCDate(limitDate.getUTCDate() + daysThreshold);
+
+  // Vence se está entre hoje (inclusive) e a data limite (inclusive)
+  return dueNormalized >= today && dueNormalized <= limitDate;
+}
+
+/**
+ * Busca todas as notificações do dashboard
+ *
+ * Regras:
+ * - Períodos anteriores: TODOS os não pagos (sempre status "atrasado")
+ * - Período atual: Itens atrasados + os que vencem nos próximos dias (sem mostrar valor)
+ *
+ * Status:
+ * - "overdue": vencimento antes do dia atual (ou qualquer período anterior)
+ * - "due_soon": vencimento no dia atual ou nos próximos dias
+ */
+export async function fetchDashboardNotifications(
+  userId: string,
+  currentPeriod: string
+): Promise<DashboardNotificationsSnapshot> {
+  const today = normalizeDate(new Date());
+  const DAYS_THRESHOLD = 5;
+
+  // Buscar faturas pendentes de períodos anteriores
+  // Apenas faturas com registro na tabela (períodos antigos devem ter sido finalizados)
+  const overdueInvoices = await db
+    .select({
+      invoiceId: faturas.id,
+      cardId: cartoes.id,
+      cardName: cartoes.name,
+      dueDay: cartoes.dueDay,
+      period: faturas.period,
+      totalAmount: sql<number | null>`
+        COALESCE(
+          (SELECT SUM(${lancamentos.amount})
+           FROM ${lancamentos}
+           WHERE ${lancamentos.cartaoId} = ${cartoes.id}
+             AND ${lancamentos.period} = ${faturas.period}
+             AND ${lancamentos.userId} = ${faturas.userId}),
+          0
+        )
+      `,
+    })
+    .from(faturas)
+    .innerJoin(cartoes, eq(faturas.cartaoId, cartoes.id))
+    .where(
+      and(
+        eq(faturas.userId, userId),
+        eq(faturas.paymentStatus, INVOICE_PAYMENT_STATUS.PENDING),
+        lt(faturas.period, currentPeriod)
+      )
+    );
+
+  // Buscar faturas do período atual
+  // Usa LEFT JOIN para incluir cartões com lançamentos mesmo sem registro em faturas
+  const currentInvoices = await db
+    .select({
+      invoiceId: faturas.id,
+      cardId: cartoes.id,
+      cardName: cartoes.name,
+      dueDay: cartoes.dueDay,
+      period: sql<string>`COALESCE(${faturas.period}, ${currentPeriod})`,
+      paymentStatus: faturas.paymentStatus,
+      totalAmount: sql<number | null>`
+        COALESCE(SUM(${lancamentos.amount}), 0)
+      `,
+      transactionCount: sql<number | null>`COUNT(${lancamentos.id})`,
+    })
+    .from(cartoes)
+    .leftJoin(
+      faturas,
+      and(
+        eq(faturas.cartaoId, cartoes.id),
+        eq(faturas.userId, userId),
+        eq(faturas.period, currentPeriod)
+      )
+    )
+    .leftJoin(
+      lancamentos,
+      and(
+        eq(lancamentos.cartaoId, cartoes.id),
+        eq(lancamentos.userId, userId),
+        eq(lancamentos.period, currentPeriod)
+      )
+    )
+    .where(eq(cartoes.userId, userId))
+    .groupBy(
+      faturas.id,
+      cartoes.id,
+      cartoes.name,
+      cartoes.dueDay,
+      faturas.period,
+      faturas.paymentStatus
+    );
+
+  // Buscar boletos não pagos
+  const boletosRows = await db
+    .select({
+      id: lancamentos.id,
+      name: lancamentos.name,
+      amount: lancamentos.amount,
+      dueDate: lancamentos.dueDate,
+      period: lancamentos.period,
+    })
+    .from(lancamentos)
+    .innerJoin(pagadores, eq(lancamentos.pagadorId, pagadores.id))
+    .where(
+      and(
+        eq(lancamentos.userId, userId),
+        eq(lancamentos.paymentMethod, PAYMENT_METHOD_BOLETO),
+        eq(lancamentos.isSettled, false),
+        eq(pagadores.role, "admin")
+      )
+    );
+
+  const notifications: DashboardNotification[] = [];
+
+  // Processar faturas atrasadas (períodos anteriores)
+  for (const invoice of overdueInvoices) {
+    if (!invoice.period || !invoice.dueDay) continue;
+
+    const dueDate = calculateDueDate(invoice.period, invoice.dueDay);
+    const amount =
+      typeof invoice.totalAmount === "number"
+        ? invoice.totalAmount
+        : Number(invoice.totalAmount) || 0;
+
+    const notificationId = invoice.invoiceId
+      ? `invoice-${invoice.invoiceId}`
+      : `invoice-${invoice.cardId}-${invoice.period}`;
+
+    notifications.push({
+      id: notificationId,
+      type: "invoice",
+      name: invoice.cardName,
+      dueDate,
+      status: "overdue",
+      amount: Math.abs(amount),
+      period: invoice.period,
+      showAmount: true, // Mostrar valor para itens de períodos anteriores
+    });
+  }
+
+  // Processar faturas do período atual (atrasadas + vencimento iminente)
+  for (const invoice of currentInvoices) {
+    if (!invoice.period || !invoice.dueDay) continue;
+
+    const amount =
+      typeof invoice.totalAmount === "number"
+        ? invoice.totalAmount
+        : Number(invoice.totalAmount) || 0;
+
+    const transactionCount =
+      typeof invoice.transactionCount === "number"
+        ? invoice.transactionCount
+        : Number(invoice.transactionCount) || 0;
+
+    const paymentStatus = invoice.paymentStatus ?? INVOICE_PAYMENT_STATUS.PENDING;
+
+    // Ignora se não tem lançamentos e não tem registro de fatura
+    const shouldInclude =
+      transactionCount > 0 ||
+      Math.abs(amount) > 0 ||
+      invoice.invoiceId !== null;
+
+    if (!shouldInclude) continue;
+
+    // Ignora se já foi paga
+    if (paymentStatus === INVOICE_PAYMENT_STATUS.PAID) continue;
+
+    const dueDate = calculateDueDate(invoice.period, invoice.dueDay);
+
+    const invoiceIsOverdue = isOverdue(dueDate, today);
+    const invoiceIsDueSoon = isDueWithinDays(dueDate, today, DAYS_THRESHOLD);
+
+    if (!invoiceIsOverdue && !invoiceIsDueSoon) continue;
+
+    const notificationId = invoice.invoiceId
+      ? `invoice-${invoice.invoiceId}`
+      : `invoice-${invoice.cardId}-${invoice.period}`;
+
+    notifications.push({
+      id: notificationId,
+      type: "invoice",
+      name: invoice.cardName,
+      dueDate,
+      status: invoiceIsOverdue ? "overdue" : "due_soon",
+      amount: Math.abs(amount),
+      period: invoice.period,
+      showAmount: invoiceIsOverdue,
+    });
+  }
+
+  // Processar boletos
+  for (const boleto of boletosRows) {
+    if (!boleto.dueDate) continue;
+
+    // Converter para string no formato YYYY-MM-DD (UTC)
+    const dueDate =
+      boleto.dueDate instanceof Date
+        ? `${boleto.dueDate.getUTCFullYear()}-${String(boleto.dueDate.getUTCMonth() + 1).padStart(2, "0")}-${String(boleto.dueDate.getUTCDate()).padStart(2, "0")}`
+        : boleto.dueDate;
+
+    const boletoIsOverdue = isOverdue(dueDate, today);
+    const boletoIsDueSoon = isDueWithinDays(dueDate, today, DAYS_THRESHOLD);
+
+    const isOldPeriod = boleto.period < currentPeriod;
+    const isCurrentPeriod = boleto.period === currentPeriod;
+
+    // Período anterior: incluir todos (sempre atrasado)
+    if (isOldPeriod) {
+      const amount =
+        typeof boleto.amount === "number"
+          ? boleto.amount
+          : Number(boleto.amount) || 0;
+
+      notifications.push({
+        id: `boleto-${boleto.id}`,
+        type: "boleto",
+        name: boleto.name,
+        dueDate,
+        status: "overdue",
+        amount: Math.abs(amount),
+        period: boleto.period,
+        showAmount: true, // Mostrar valor para períodos anteriores
+      });
+    }
+
+    // Período atual: incluir atrasados e os que vencem em breve (sem valor)
+    else if (isCurrentPeriod && (boletoIsOverdue || boletoIsDueSoon)) {
+      const status: NotificationType = boletoIsOverdue ? "overdue" : "due_soon";
+      const amount =
+        typeof boleto.amount === "number"
+          ? boleto.amount
+          : Number(boleto.amount) || 0;
+
+      notifications.push({
+        id: `boleto-${boleto.id}`,
+        type: "boleto",
+        name: boleto.name,
+        dueDate,
+        status,
+        amount: Math.abs(amount),
+        period: boleto.period,
+        showAmount: boletoIsOverdue,
+      });
+    }
+  }
+
+  // Ordenar: atrasados primeiro, depois por data de vencimento
+  notifications.sort((a, b) => {
+    if (a.status === "overdue" && b.status !== "overdue") return -1;
+    if (a.status !== "overdue" && b.status === "overdue") return 1;
+    return a.dueDate.localeCompare(b.dueDate);
+  });
+
+  return {
+    notifications,
+    totalCount: notifications.length,
+  };
+}
diff --git a/lib/dashboard/payments/payment-conditions.ts b/lib/dashboard/payments/payment-conditions.ts
new file mode 100644
index 0000000..e50dc61
--- /dev/null
+++ b/lib/dashboard/payments/payment-conditions.ts
@@ -0,0 +1,79 @@
+import { lancamentos, pagadores } from "@/db/schema";
+import {
+  ACCOUNT_AUTO_INVOICE_NOTE_PREFIX,
+  INITIAL_BALANCE_NOTE,
+} from "@/lib/accounts/constants";
+import { PAGADOR_ROLE_ADMIN } from "@/lib/pagadores/constants";
+import { db } from "@/lib/db";
+import { toNumber } from "@/lib/dashboard/common";
+import { and, eq, isNull, or, sql } from "drizzle-orm";
+
+export type PaymentConditionSummary = {
+  condition: string;
+  amount: number;
+  percentage: number;
+  transactions: number;
+};
+
+export type PaymentConditionsData = {
+  conditions: PaymentConditionSummary[];
+};
+
+export async function fetchPaymentConditions(
+  userId: string,
+  period: string
+): Promise<PaymentConditionsData> {
+  const rows = await db
+    .select({
+      condition: lancamentos.condition,
+      totalAmount: sql<number>`coalesce(sum(${lancamentos.amount}), 0)`,
+      transactions: sql<number>`count(${lancamentos.id})`,
+    })
+    .from(lancamentos)
+    .innerJoin(pagadores, eq(lancamentos.pagadorId, pagadores.id))
+    .where(
+      and(
+        eq(lancamentos.userId, userId),
+        eq(lancamentos.period, period),
+        eq(lancamentos.transactionType, "Despesa"),
+        eq(pagadores.role, PAGADOR_ROLE_ADMIN),
+        or(
+          isNull(lancamentos.note),
+          and(
+            sql`${lancamentos.note} != ${INITIAL_BALANCE_NOTE}`,
+            sql`${lancamentos.note} NOT LIKE ${`${ACCOUNT_AUTO_INVOICE_NOTE_PREFIX}%`}`
+          )
+        )
+      )
+    )
+    .groupBy(lancamentos.condition);
+
+  const summaries = rows.map((row) => {
+    const totalAmount = Math.abs(toNumber(row.totalAmount));
+    const transactions = Number(row.transactions ?? 0);
+
+    return {
+      condition: row.condition,
+      amount: totalAmount,
+      transactions,
+    };
+  });
+
+  const overallTotal = summaries.reduce((acc, item) => acc + item.amount, 0);
+
+  const conditions = summaries
+    .map((item) => ({
+      condition: item.condition,
+      amount: item.amount,
+      transactions: item.transactions,
+      percentage:
+        overallTotal > 0
+          ? Number(((item.amount / overallTotal) * 100).toFixed(2))
+          : 0,
+    }))
+    .sort((a, b) => b.amount - a.amount);
+
+  return {
+    conditions,
+  };
+}
diff --git a/lib/dashboard/payments/payment-methods.ts b/lib/dashboard/payments/payment-methods.ts
new file mode 100644
index 0000000..e921574
--- /dev/null
+++ b/lib/dashboard/payments/payment-methods.ts
@@ -0,0 +1,79 @@
+import { lancamentos, pagadores } from "@/db/schema";
+import {
+  ACCOUNT_AUTO_INVOICE_NOTE_PREFIX,
+  INITIAL_BALANCE_NOTE,
+} from "@/lib/accounts/constants";
+import { PAGADOR_ROLE_ADMIN } from "@/lib/pagadores/constants";
+import { db } from "@/lib/db";
+import { toNumber } from "@/lib/dashboard/common";
+import { and, eq, isNull, or, sql } from "drizzle-orm";
+
+export type PaymentMethodSummary = {
+  paymentMethod: string;
+  amount: number;
+  percentage: number;
+  transactions: number;
+};
+
+export type PaymentMethodsData = {
+  methods: PaymentMethodSummary[];
+};
+
+export async function fetchPaymentMethods(
+  userId: string,
+  period: string
+): Promise<PaymentMethodsData> {
+  const rows = await db
+    .select({
+      paymentMethod: lancamentos.paymentMethod,
+      totalAmount: sql<number>`coalesce(sum(${lancamentos.amount}), 0)`,
+      transactions: sql<number>`count(${lancamentos.id})`,
+    })
+    .from(lancamentos)
+    .innerJoin(pagadores, eq(lancamentos.pagadorId, pagadores.id))
+    .where(
+      and(
+        eq(lancamentos.userId, userId),
+        eq(lancamentos.period, period),
+        eq(lancamentos.transactionType, "Despesa"),
+        eq(pagadores.role, PAGADOR_ROLE_ADMIN),
+        or(
+          isNull(lancamentos.note),
+          and(
+            sql`${lancamentos.note} != ${INITIAL_BALANCE_NOTE}`,
+            sql`${lancamentos.note} NOT LIKE ${`${ACCOUNT_AUTO_INVOICE_NOTE_PREFIX}%`}`
+          )
+        )
+      )
+    )
+    .groupBy(lancamentos.paymentMethod);
+
+  const summaries = rows.map((row) => {
+    const amount = Math.abs(toNumber(row.totalAmount));
+    const transactions = Number(row.transactions ?? 0);
+
+    return {
+      paymentMethod: row.paymentMethod,
+      amount,
+      transactions,
+    };
+  });
+
+  const overallTotal = summaries.reduce((acc, item) => acc + item.amount, 0);
+
+  const methods = summaries
+    .map((item) => ({
+      paymentMethod: item.paymentMethod,
+      amount: item.amount,
+      transactions: item.transactions,
+      percentage:
+        overallTotal > 0
+          ? Number(((item.amount / overallTotal) * 100).toFixed(2))
+          : 0,
+    }))
+    .sort((a, b) => b.amount - a.amount);
+
+  return {
+    methods,
+  };
+}
diff --git a/lib/dashboard/payments/payment-status.ts b/lib/dashboard/payments/payment-status.ts
new file mode 100644
index 0000000..1df4d70
--- /dev/null
+++ b/lib/dashboard/payments/payment-status.ts
@@ -0,0 +1,120 @@
+import { lancamentos, pagadores } from "@/db/schema";
+import { ACCOUNT_AUTO_INVOICE_NOTE_PREFIX } from "@/lib/accounts/constants";
+import { db } from "@/lib/db";
+import { toNumber } from "@/lib/dashboard/common";
+import { eq, and, sql } from "drizzle-orm";
+
+export type PaymentStatusCategory = {
+  total: number;
+  confirmed: number;
+  pending: number;
+};
+
+export type PaymentStatusData = {
+  income: PaymentStatusCategory;
+  expenses: PaymentStatusCategory;
+};
+
+export async function fetchPaymentStatus(
+  userId: string,
+  period: string
+): Promise<PaymentStatusData> {
+  // Busca receitas confirmadas e pendentes para o período do pagador admin
+  // Exclui lançamentos de pagamento de fatura (para evitar contagem duplicada)
+  const incomeResult = await db
+    .select({
+      confirmed: sql<number>`
+        coalesce(
+          sum(
+            case
+              when ${lancamentos.isSettled} = true then ${lancamentos.amount}
+              else 0
+            end
+          ),
+          0
+        )
+      `,
+      pending: sql<number>`
+        coalesce(
+          sum(
+            case
+              when ${lancamentos.isSettled} = false or ${lancamentos.isSettled} is null then ${lancamentos.amount}
+              else 0
+            end
+          ),
+          0
+        )
+      `,
+    })
+    .from(lancamentos)
+    .innerJoin(pagadores, eq(lancamentos.pagadorId, pagadores.id))
+    .where(
+      and(
+        eq(lancamentos.userId, userId),
+        eq(lancamentos.period, period),
+        eq(lancamentos.transactionType, "Receita"),
+        eq(pagadores.role, "admin"),
+        sql`(${lancamentos.note} IS NULL OR ${lancamentos.note} NOT LIKE ${`${ACCOUNT_AUTO_INVOICE_NOTE_PREFIX}%`})`
+      )
+    );
+
+  // Busca despesas confirmadas e pendentes para o período do pagador admin
+  // Exclui lançamentos de pagamento de fatura (para evitar contagem duplicada)
+  const expensesResult = await db
+    .select({
+      confirmed: sql<number>`
+        coalesce(
+          sum(
+            case
+              when ${lancamentos.isSettled} = true then ${lancamentos.amount}
+              else 0
+            end
+          ),
+          0
+        )
+      `,
+      pending: sql<number>`
+        coalesce(
+          sum(
+            case
+              when ${lancamentos.isSettled} = false or ${lancamentos.isSettled} is null then ${lancamentos.amount}
+              else 0
+            end
+          ),
+          0
+        )
+      `,
+    })
+    .from(lancamentos)
+    .innerJoin(pagadores, eq(lancamentos.pagadorId, pagadores.id))
+    .where(
+      and(
+        eq(lancamentos.userId, userId),
+        eq(lancamentos.period, period),
+        eq(lancamentos.transactionType, "Despesa"),
+        eq(pagadores.role, "admin"),
+        sql`(${lancamentos.note} IS NULL OR ${lancamentos.note} NOT LIKE ${`${ACCOUNT_AUTO_INVOICE_NOTE_PREFIX}%`})`
+      )
+    );
+
+  const incomeData = incomeResult[0] ?? { confirmed: 0, pending: 0 };
+  const confirmedIncome = toNumber(incomeData.confirmed);
+  const pendingIncome = toNumber(incomeData.pending);
+
+  const expensesData = expensesResult[0] ?? { confirmed: 0, pending: 0 };
+  const confirmedExpenses = toNumber(expensesData.confirmed);
+  const pendingExpenses = toNumber(expensesData.pending);
+
+  return {
+    income: {
+      total: confirmedIncome + pendingIncome,
+      confirmed: confirmedIncome,
+      pending: pendingIncome,
+    },
+    expenses: {
+      total: confirmedExpenses + pendingExpenses,
+      confirmed: confirmedExpenses,
+      pending: pendingExpenses,
+    },
+  };
+}
diff --git a/lib/dashboard/purchases-by-category.ts b/lib/dashboard/purchases-by-category.ts
new file mode 100644
index 0000000..a9a2b3f
--- /dev/null
+++ b/lib/dashboard/purchases-by-category.ts
@@ -0,0 +1,145 @@
+import {
+  cartoes,
+  categorias,
+  contas,
+  lancamentos,
+  pagadores,
+} from "@/db/schema";
+import {
+  ACCOUNT_AUTO_INVOICE_NOTE_PREFIX,
+  INITIAL_BALANCE_NOTE,
+} from "@/lib/accounts/constants";
+import { db } from "@/lib/db";
+import { PAGADOR_ROLE_ADMIN } from "@/lib/pagadores/constants";
+import { toNumber } from "@/lib/dashboard/common";
+import { and, desc, eq, inArray, isNull, or, sql } from "drizzle-orm";
+
+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[]>;
+};
+
+const shouldIncludeTransaction = (name: string) => {
+  const normalized = name.trim().toLowerCase();
+
+  if (normalized === "saldo inicial") {
+    return false;
+  }
+
+  if (normalized.includes("fatura")) {
+    return false;
+  }
+
+  return true;
+};
+
+export async function fetchPurchasesByCategory(
+  userId: string,
+  period: string
+): Promise<PurchasesByCategoryData> {
+  const transactionsRows = await db
+    .select({
+      id: lancamentos.id,
+      name: lancamentos.name,
+      amount: lancamentos.amount,
+      purchaseDate: lancamentos.purchaseDate,
+      categoryId: lancamentos.categoriaId,
+      categoryName: categorias.name,
+      categoryType: categorias.type,
+      cardLogo: cartoes.logo,
+      accountLogo: contas.logo,
+    })
+    .from(lancamentos)
+    .innerJoin(pagadores, eq(lancamentos.pagadorId, pagadores.id))
+    .innerJoin(categorias, eq(lancamentos.categoriaId, categorias.id))
+    .leftJoin(cartoes, eq(lancamentos.cartaoId, cartoes.id))
+    .leftJoin(contas, eq(lancamentos.contaId, contas.id))
+    .where(
+      and(
+        eq(lancamentos.userId, userId),
+        eq(lancamentos.period, period),
+        eq(pagadores.role, PAGADOR_ROLE_ADMIN),
+        inArray(categorias.type, ["despesa", "receita"]),
+        or(
+          isNull(lancamentos.note),
+          and(
+            sql`${lancamentos.note} != ${INITIAL_BALANCE_NOTE}`,
+            sql`${
+              lancamentos.note
+            } NOT LIKE ${`${ACCOUNT_AUTO_INVOICE_NOTE_PREFIX}%`}`
+          )
+        )
+      )
+    )
+    .orderBy(desc(lancamentos.purchaseDate));
+
+  const transactionsByCategory: Record<string, CategoryTransaction[]> = {};
+  const categoriesMap = new Map<string, CategoryOption>();
+
+  for (const row of transactionsRows) {
+    const categoryId = row.categoryId;
+
+    if (!categoryId) {
+      continue;
+    }
+
+    if (!shouldIncludeTransaction(row.name)) {
+      continue;
+    }
+
+    // Adiciona a categoria ao mapa se ainda não existir
+    if (!categoriesMap.has(categoryId)) {
+      categoriesMap.set(categoryId, {
+        id: categoryId,
+        name: row.categoryName,
+        type: row.categoryType,
+      });
+    }
+
+    const entry: CategoryTransaction = {
+      id: row.id,
+      name: row.name,
+      amount: Math.abs(toNumber(row.amount)),
+      purchaseDate: row.purchaseDate,
+      logo: row.cardLogo ?? row.accountLogo ?? null,
+    };
+
+    if (!transactionsByCategory[categoryId]) {
+      transactionsByCategory[categoryId] = [];
+    }
+
+    const categoryTransactions = transactionsByCategory[categoryId];
+    if (categoryTransactions && categoryTransactions.length < 10) {
+      categoryTransactions.push(entry);
+    }
+  }
+
+  // Ordena as categorias: receitas primeiro, depois despesas (alfabeticamente dentro de cada tipo)
+  const categories = Array.from(categoriesMap.values()).sort((a, b) => {
+    // Receita vem antes de despesa
+    if (a.type !== b.type) {
+      return a.type === "receita" ? -1 : 1;
+    }
+    // Dentro do mesmo tipo, ordena alfabeticamente
+    return a.name.localeCompare(b.name);
+  });
+
+  return {
+    categories,
+    transactionsByCategory,
+  };
+}
diff --git a/lib/dashboard/recent-transactions.ts b/lib/dashboard/recent-transactions.ts
new file mode 100644
index 0000000..e629b0d
--- /dev/null
+++ b/lib/dashboard/recent-transactions.ts
@@ -0,0 +1,71 @@
+import { lancamentos, pagadores, cartoes, contas } from "@/db/schema";
+import { ACCOUNT_AUTO_INVOICE_NOTE_PREFIX, INITIAL_BALANCE_NOTE } from "@/lib/accounts/constants";
+import { PAGADOR_ROLE_ADMIN } from "@/lib/pagadores/constants";
+import { db } from "@/lib/db";
+import { eq, and, sql, desc, or, isNull } from "drizzle-orm";
+import { toNumber } from "@/lib/dashboard/common";
+
+export type RecentTransaction = {
+  id: string;
+  name: string;
+  amount: number;
+  purchaseDate: Date;
+  cardLogo: string | null;
+  accountLogo: string | null;
+};
+
+export type RecentTransactionsData = {
+  transactions: RecentTransaction[];
+};
+
+export async function fetchRecentTransactions(
+  userId: string,
+  period: string
+): Promise<RecentTransactionsData> {
+  const results = await db
+    .select({
+      id: lancamentos.id,
+      name: lancamentos.name,
+      amount: lancamentos.amount,
+      purchaseDate: lancamentos.purchaseDate,
+      cardLogo: cartoes.logo,
+      accountLogo: contas.logo,
+      note: lancamentos.note,
+    })
+    .from(lancamentos)
+    .innerJoin(pagadores, eq(lancamentos.pagadorId, pagadores.id))
+    .leftJoin(cartoes, eq(lancamentos.cartaoId, cartoes.id))
+    .leftJoin(contas, eq(lancamentos.contaId, contas.id))
+    .where(
+      and(
+        eq(lancamentos.userId, userId),
+        eq(lancamentos.period, period),
+        eq(lancamentos.transactionType, "Despesa"),
+        eq(pagadores.role, PAGADOR_ROLE_ADMIN),
+        or(
+          isNull(lancamentos.note),
+          and(
+            sql`${lancamentos.note} != ${INITIAL_BALANCE_NOTE}`,
+            sql`${lancamentos.note} NOT LIKE ${`${ACCOUNT_AUTO_INVOICE_NOTE_PREFIX}%`}`
+          )
+        )
+      )
+    )
+    .orderBy(desc(lancamentos.purchaseDate), desc(lancamentos.createdAt))
+    .limit(5);
+
+  const transactions = results.map((row): RecentTransaction => {
+    return {
+      id: row.id,
+      name: row.name,
+      amount: Math.abs(toNumber(row.amount)),
+      purchaseDate: row.purchaseDate,
+      cardLogo: row.cardLogo,
+      accountLogo: row.accountLogo,
+    };
+  });
+
+  return {
+    transactions,
+  };
+}
diff --git a/lib/dashboard/top-establishments.ts b/lib/dashboard/top-establishments.ts
new file mode 100644
index 0000000..0943d98
--- /dev/null
+++ b/lib/dashboard/top-establishments.ts
@@ -0,0 +1,86 @@
+import { cartoes, contas, lancamentos, pagadores } from "@/db/schema";
+import {
+  ACCOUNT_AUTO_INVOICE_NOTE_PREFIX,
+  INITIAL_BALANCE_NOTE,
+} from "@/lib/accounts/constants";
+import { db } from "@/lib/db";
+import { PAGADOR_ROLE_ADMIN } from "@/lib/pagadores/constants";
+import { toNumber } from "@/lib/dashboard/common";
+import { and, eq, isNull, or, sql } from "drizzle-orm";
+
+export type TopEstablishment = {
+  id: string;
+  name: string;
+  amount: number;
+  occurrences: number;
+  logo: string | null;
+};
+
+export type TopEstablishmentsData = {
+  establishments: TopEstablishment[];
+};
+
+const shouldIncludeEstablishment = (name: string) => {
+  const normalized = name.trim().toLowerCase();
+
+  if (normalized === "saldo inicial") {
+    return false;
+  }
+
+  if (normalized.includes("fatura")) {
+    return false;
+  }
+
+  return true;
+};
+
+export async function fetchTopEstablishments(
+  userId: string,
+  period: string
+): Promise<TopEstablishmentsData> {
+  const rows = await db
+    .select({
+      name: lancamentos.name,
+      totalAmount: sql<number>`coalesce(sum(${lancamentos.amount}), 0)`,
+      occurrences: sql<number>`count(${lancamentos.id})`,
+      logo: sql<string | null>`max(coalesce(${cartoes.logo}, ${contas.logo}))`,
+    })
+    .from(lancamentos)
+    .innerJoin(pagadores, eq(lancamentos.pagadorId, pagadores.id))
+    .leftJoin(cartoes, eq(lancamentos.cartaoId, cartoes.id))
+    .leftJoin(contas, eq(lancamentos.contaId, contas.id))
+    .where(
+      and(
+        eq(lancamentos.userId, userId),
+        eq(lancamentos.period, period),
+        eq(lancamentos.transactionType, "Despesa"),
+        eq(pagadores.role, PAGADOR_ROLE_ADMIN),
+        or(
+          isNull(lancamentos.note),
+          and(
+            sql`${lancamentos.note} != ${INITIAL_BALANCE_NOTE}`,
+            sql`${lancamentos.note} NOT LIKE ${`${ACCOUNT_AUTO_INVOICE_NOTE_PREFIX}%`}`
+          )
+        )
+      )
+    )
+    .groupBy(lancamentos.name)
+    .orderBy(sql`ABS(sum(${lancamentos.amount})) DESC`)
+    .limit(10);
+
+  const establishments = rows
+    .filter((row) => shouldIncludeEstablishment(row.name))
+    .map(
+      (row): TopEstablishment => ({
+        id: row.name,
+        name: row.name,
+        amount: Math.abs(toNumber(row.totalAmount)),
+        occurrences: Number(row.occurrences ?? 0),
+        logo: row.logo ?? null,
+      })
+    );
+
+  return {
+    establishments,
+  };
+}
diff --git a/lib/dashboard/widgets/widgets-config.tsx b/lib/dashboard/widgets/widgets-config.tsx
new file mode 100644
index 0000000..d433123
--- /dev/null
+++ b/lib/dashboard/widgets/widgets-config.tsx
@@ -0,0 +1,192 @@
+import { BoletosWidget } from "@/components/dashboard/boletos-widget";
+import { ExpensesByCategoryWidget } from "@/components/dashboard/expenses-by-category-widget";
+import { IncomeByCategoryWidget } from "@/components/dashboard/income-by-category-widget";
+import { IncomeExpenseBalanceWidget } from "@/components/dashboard/income-expense-balance-widget";
+import { InstallmentExpensesWidget } from "@/components/dashboard/installment-expenses-widget";
+import { InvoicesWidget } from "@/components/dashboard/invoices-widget";
+import { MyAccountsWidget } from "@/components/dashboard/my-accounts-widget";
+import { PaymentConditionsWidget } from "@/components/dashboard/payment-conditions-widget";
+import { PaymentMethodsWidget } from "@/components/dashboard/payment-methods-widget";
+import { PaymentStatusWidget } from "@/components/dashboard/payment-status-widget";
+import { PurchasesByCategoryWidget } from "@/components/dashboard/purchases-by-category-widget";
+import { RecentTransactionsWidget } from "@/components/dashboard/recent-transactions-widget";
+import { RecurringExpensesWidget } from "@/components/dashboard/recurring-expenses-widget";
+import { TopEstablishmentsWidget } from "@/components/dashboard/top-establishments-widget";
+import { TopExpensesWidget } from "@/components/dashboard/top-expenses-widget";
+import {
+  RiArrowUpDoubleLine,
+  RiBarChartBoxLine,
+  RiBarcodeLine,
+  RiBillLine,
+  RiExchangeLine,
+  RiLineChartLine,
+  RiMoneyDollarCircleLine,
+  RiNumbersLine,
+  RiPieChartLine,
+  RiRefreshLine,
+  RiSlideshowLine,
+  RiStore2Line,
+  RiStore3Line,
+  RiWallet3Line,
+} from "@remixicon/react";
+import type { ReactNode } from "react";
+import type { DashboardData } from "./fetch-dashboard-data";
+
+export type WidgetConfig = {
+  id: string;
+  title: string;
+  subtitle: string;
+  icon: ReactNode;
+  component: (props: { data: DashboardData; period: string }) => ReactNode;
+};
+
+export const widgetsConfig: WidgetConfig[] = [
+  {
+    id: "my-accounts",
+    title: "Minhas Contas",
+    subtitle: "Saldo consolidado disponível",
+    icon: <RiBarChartBoxLine className="size-4" />,
+    component: ({ data, period }) => (
+      <MyAccountsWidget
+        accounts={data.accountsSnapshot.accounts}
+        totalBalance={data.accountsSnapshot.totalBalance}
+        period={period}
+      />
+    ),
+  },
+  {
+    id: "invoices",
+    title: "Faturas",
+    subtitle: "Resumo das faturas do período",
+    icon: <RiBillLine className="size-4" />,
+    component: ({ data }) => (
+      <InvoicesWidget invoices={data.invoicesSnapshot.invoices} />
+    ),
+  },
+  {
+    id: "boletos",
+    title: "Boletos",
+    subtitle: "Controle de boletos do período",
+    icon: <RiBarcodeLine className="size-4" />,
+    component: ({ data }) => (
+      <BoletosWidget boletos={data.boletosSnapshot.boletos} />
+    ),
+  },
+  {
+    id: "payment-status",
+    title: "Status de Pagamento",
+    subtitle: "Valores Confirmados E Pendentes",
+    icon: <RiWallet3Line className="size-4" />,
+    component: ({ data }) => (
+      <PaymentStatusWidget data={data.paymentStatusData} />
+    ),
+  },
+  {
+    id: "income-expense-balance",
+    title: "Receita, Despesa e Balanço",
+    subtitle: "Últimos 6 Meses",
+    icon: <RiLineChartLine className="size-4" />,
+    component: ({ data }) => (
+      <IncomeExpenseBalanceWidget data={data.incomeExpenseBalanceData} />
+    ),
+  },
+  {
+    id: "recent-transactions",
+    title: "Lançamentos Recentes",
+    subtitle: "Últimas 5 despesas registradas",
+    icon: <RiExchangeLine className="size-4" />,
+    component: ({ data }) => (
+      <RecentTransactionsWidget data={data.recentTransactionsData} />
+    ),
+  },
+  {
+    id: "payment-conditions",
+    title: "Condições de Pagamentos",
+    subtitle: "Análise das condições",
+    icon: <RiSlideshowLine className="size-4" />,
+    component: ({ data }) => (
+      <PaymentConditionsWidget data={data.paymentConditionsData} />
+    ),
+  },
+  {
+    id: "payment-methods",
+    title: "Formas de Pagamento",
+    subtitle: "Distribuição das despesas",
+    icon: <RiMoneyDollarCircleLine className="size-4" />,
+    component: ({ data }) => (
+      <PaymentMethodsWidget data={data.paymentMethodsData} />
+    ),
+  },
+  {
+    id: "recurring-expenses",
+    title: "Lançamentos Recorrentes",
+    subtitle: "Despesas recorrentes do período",
+    icon: <RiRefreshLine className="size-4" />,
+    component: ({ data }) => (
+      <RecurringExpensesWidget data={data.recurringExpensesData} />
+    ),
+  },
+  {
+    id: "installment-expenses",
+    title: "Lançamentos Parcelados",
+    subtitle: "Acompanhe as parcelas abertas",
+    icon: <RiNumbersLine className="size-4" />,
+    component: ({ data }) => (
+      <InstallmentExpensesWidget data={data.installmentExpensesData} />
+    ),
+  },
+  {
+    id: "top-expenses",
+    title: "Maiores Gastos do Mês",
+    subtitle: "Top 10 Despesas",
+    icon: <RiArrowUpDoubleLine className="size-4" />,
+    component: ({ data }) => (
+      <TopExpensesWidget
+        allExpenses={data.topExpensesAll}
+        cardOnlyExpenses={data.topExpensesCardOnly}
+      />
+    ),
+  },
+  {
+    id: "top-establishments",
+    title: "Top Estabelecimentos",
+    subtitle: "Frequência de gastos no período",
+    icon: <RiStore2Line className="size-4" />,
+    component: ({ data }) => (
+      <TopEstablishmentsWidget data={data.topEstablishmentsData} />
+    ),
+  },
+  {
+    id: "purchases-by-category",
+    title: "Lançamentos por Categorias",
+    subtitle: "Distribuição de lançamentos por categoria",
+    icon: <RiStore3Line className="size-4" />,
+    component: ({ data }) => (
+      <PurchasesByCategoryWidget data={data.purchasesByCategoryData} />
+    ),
+  },
+  {
+    id: "income-by-category",
+    title: "Categorias por Receitas",
+    subtitle: "Distribuição de receitas por categoria",
+    icon: <RiPieChartLine className="size-4" />,
+    component: ({ data, period }) => (
+      <IncomeByCategoryWidget
+        data={data.incomeByCategoryData}
+        period={period}
+      />
+    ),
+  },
+  {
+    id: "expenses-by-category",
+    title: "Categorias por Despesas",
+    subtitle: "Distribuição de despesas por categoria",
+    icon: <RiPieChartLine className="size-4" />,
+    component: ({ data, period }) => (
+      <ExpensesByCategoryWidget
+        data={data.expensesByCategoryData}
+        period={period}
+      />
+    ),
+  },
+];
diff --git a/lib/db.ts b/lib/db.ts
new file mode 100644
index 0000000..5a12862
--- /dev/null
+++ b/lib/db.ts
@@ -0,0 +1,39 @@
+import * as schema from "@/db/schema";
+import { drizzle, type PgDatabase } from "drizzle-orm/node-postgres";
+import { Pool } from "pg";
+
+const globalForDb = globalThis as unknown as {
+  db?: PgDatabase<typeof schema>;
+  pool?: Pool;
+};
+
+let _db: PgDatabase<typeof schema> | undefined;
+let _pool: Pool | undefined;
+
+function getDb() {
+  if (_db) return _db;
+
+  const { DATABASE_URL } = process.env;
+
+  if (!DATABASE_URL) {
+    throw new Error("DATABASE_URL env variable is not set");
+  }
+
+  _pool = globalForDb.pool ?? new Pool({ connectionString: DATABASE_URL });
+  _db = globalForDb.db ?? drizzle(_pool, { schema });
+
+  if (process.env.NODE_ENV !== "production") {
+    globalForDb.pool = _pool;
+    globalForDb.db = _db;
+  }
+
+  return _db;
+}
+
+export const db = new Proxy({} as PgDatabase<typeof schema>, {
+  get(_, prop) {
+    return Reflect.get(getDb(), prop);
+  },
+});
+
+export { schema };
diff --git a/lib/faturas.ts b/lib/faturas.ts
new file mode 100644
index 0000000..8d3c701
--- /dev/null
+++ b/lib/faturas.ts
@@ -0,0 +1,32 @@
+export const INVOICE_PAYMENT_STATUS = {
+  PENDING: "pendente",
+  PAID: "pago",
+} as const;
+
+export const INVOICE_STATUS_VALUES = Object.values(INVOICE_PAYMENT_STATUS);
+
+export type InvoicePaymentStatus =
+  (typeof INVOICE_PAYMENT_STATUS)[keyof typeof INVOICE_PAYMENT_STATUS];
+
+export const INVOICE_STATUS_LABEL: Record<InvoicePaymentStatus, string> = {
+  [INVOICE_PAYMENT_STATUS.PENDING]: "Em aberto",
+  [INVOICE_PAYMENT_STATUS.PAID]: "Pago",
+};
+
+export const INVOICE_STATUS_BADGE_VARIANT: Record<
+  InvoicePaymentStatus,
+  "default" | "secondary" | "success" | "info"
+> = {
+  [INVOICE_PAYMENT_STATUS.PENDING]: "info",
+  [INVOICE_PAYMENT_STATUS.PAID]: "success",
+};
+
+export const INVOICE_STATUS_DESCRIPTION: Record<InvoicePaymentStatus, string> =
+  {
+    [INVOICE_PAYMENT_STATUS.PENDING]:
+      "Esta fatura ainda não foi quitada. Você pode realizar o pagamento assim que revisar os lançamentos.",
+    [INVOICE_PAYMENT_STATUS.PAID]:
+      "Esta fatura está quitada. Caso tenha sido um engano, é possível desfazer o pagamento.",
+  };
+
+export const PERIOD_FORMAT_REGEX = /^\d{4}-\d{2}$/;
diff --git a/lib/installments/anticipation-helpers.ts b/lib/installments/anticipation-helpers.ts
new file mode 100644
index 0000000..030c6f7
--- /dev/null
+++ b/lib/installments/anticipation-helpers.ts
@@ -0,0 +1,143 @@
+import type { Lancamento } from "@/db/schema";
+import type { EligibleInstallment } from "./anticipation-types";
+
+/**
+ * Calcula o valor total de antecipação baseado nas parcelas selecionadas
+ */
+export function calculateTotalAnticipationAmount(
+  installments: EligibleInstallment[]
+): number {
+  return installments.reduce((sum, inst) => sum + Number(inst.amount), 0);
+}
+
+/**
+ * Valida se o período de antecipação é válido
+ * O período não pode ser anterior ao período da primeira parcela selecionada
+ */
+export function validateAnticipationPeriod(
+  period: string,
+  installments: EligibleInstallment[]
+): boolean {
+  if (installments.length === 0) return false;
+
+  const earliestPeriod = installments.reduce((earliest, inst) => {
+    return inst.period < earliest ? inst.period : earliest;
+  }, installments[0].period);
+
+  return period >= earliestPeriod;
+}
+
+/**
+ * Formata os números das parcelas antecipadas em uma string legível
+ * Exemplo: "1, 2, 3" ou "5, 6, 7, 8"
+ */
+export function getAnticipatedInstallmentNumbers(
+  installments: EligibleInstallment[]
+): string {
+  const numbers = installments
+    .map((inst) => inst.currentInstallment)
+    .filter((num): num is number => num !== null)
+    .sort((a, b) => a - b)
+    .join(", ");
+  return numbers;
+}
+
+/**
+ * Formata o resumo de parcelas antecipadas
+ * Exemplo: "Parcelas 1-3 de 12" ou "Parcela 5 de 12"
+ */
+export function formatAnticipatedInstallmentsRange(
+  installments: EligibleInstallment[]
+): string {
+  const numbers = installments
+    .map((inst) => inst.currentInstallment)
+    .filter((num): num is number => num !== null)
+    .sort((a, b) => a - b);
+
+  if (numbers.length === 0) return "";
+  if (numbers.length === 1) {
+    const total = installments[0]?.installmentCount ?? 0;
+    return `Parcela ${numbers[0]} de ${total}`;
+  }
+
+  const first = numbers[0];
+  const last = numbers[numbers.length - 1];
+  const total = installments[0]?.installmentCount ?? 0;
+
+  // Se as parcelas são consecutivas
+  const isConsecutive = numbers.every((num, i) => {
+    if (i === 0) return true;
+    return num === numbers[i - 1]! + 1;
+  });
+
+  if (isConsecutive) {
+    return `Parcelas ${first}-${last} de ${total}`;
+  } else {
+    return `${numbers.length} parcelas de ${total}`;
+  }
+}
+
+/**
+ * Verifica se uma antecipação pode ser cancelada
+ * Só pode cancelar se o lançamento de antecipação não foi pago
+ */
+export function canCancelAnticipation(lancamento: Lancamento): boolean {
+  return lancamento.isSettled !== true;
+}
+
+/**
+ * Ordena parcelas por número da parcela atual
+ */
+export function sortInstallmentsByNumber(
+  installments: EligibleInstallment[]
+): EligibleInstallment[] {
+  return [...installments].sort((a, b) => {
+    const aNum = a.currentInstallment ?? 0;
+    const bNum = b.currentInstallment ?? 0;
+    return aNum - bNum;
+  });
+}
+
+/**
+ * Calcula quantas parcelas restam após uma antecipação
+ */
+export function calculateRemainingInstallments(
+  totalInstallments: number,
+  anticipatedCount: number
+): number {
+  return Math.max(0, totalInstallments - anticipatedCount);
+}
+
+/**
+ * Valida se as parcelas selecionadas pertencem à mesma série
+ */
+export function validateInstallmentsSameSeries(
+  installments: EligibleInstallment[],
+  seriesId: string
+): boolean {
+  // Esta validação será feita no servidor com os dados completos
+  // Aqui apenas retorna true como placeholder
+  return installments.length > 0;
+}
+
+/**
+ * Gera descrição automática para o lançamento de antecipação
+ */
+export function generateAnticipationDescription(
+  lancamentoName: string,
+  installmentCount: number
+): string {
+  return `Antecipação de ${installmentCount} ${
+    installmentCount === 1 ? "parcela" : "parcelas"
+  } - ${lancamentoName}`;
+}
+
+/**
+ * Formata nota automática para antecipação
+ */
+export function generateAnticipationNote(
+  installments: EligibleInstallment[]
+): string {
+  const range = formatAnticipatedInstallmentsRange(installments);
+  return `Antecipação: ${range}`;
+}
diff --git a/lib/installments/anticipation-types.ts b/lib/installments/anticipation-types.ts
new file mode 100644
index 0000000..546330e
--- /dev/null
+++ b/lib/installments/anticipation-types.ts
@@ -0,0 +1,66 @@
+import type {
+  Categoria,
+  InstallmentAnticipation,
+  Lancamento,
+  Pagador,
+} from "@/db/schema";
+
+/**
+ * Parcela elegível para antecipação
+ */
+export type EligibleInstallment = {
+  id: string;
+  name: string;
+  amount: string;
+  period: string;
+  purchaseDate: Date;
+  dueDate: Date | null;
+  currentInstallment: number | null;
+  installmentCount: number | null;
+  paymentMethod: string;
+  categoriaId: string | null;
+  pagadorId: string | null;
+};
+
+/**
+ * Antecipação com dados completos
+ */
+export type InstallmentAnticipationWithRelations = InstallmentAnticipation & {
+  lancamento: Lancamento;
+  pagador: Pagador | null;
+  categoria: Categoria | null;
+};
+
+/**
+ * Input para criar antecipação
+ */
+export type CreateAnticipationInput = {
+  seriesId: string;
+  installmentIds: string[];
+  anticipationPeriod: string;
+  pagadorId?: string;
+  categoriaId?: string;
+  note?: string;
+};
+
+/**
+ * Input para cancelar antecipação
+ */
+export type CancelAnticipationInput = {
+  anticipationId: string;
+};
+
+/**
+ * Resumo de antecipação para exibição
+ */
+export type AnticipationSummary = {
+  id: string;
+  totalAmount: string;
+  installmentCount: number;
+  anticipationPeriod: string;
+  anticipationDate: Date;
+  note: string | null;
+  isSettled: boolean;
+  lancamentoId: string;
+  anticipatedInstallments: string[];
+};
diff --git a/lib/installments/utils.ts b/lib/installments/utils.ts
new file mode 100644
index 0000000..79431db
--- /dev/null
+++ b/lib/installments/utils.ts
@@ -0,0 +1,79 @@
+/**
+ * Calcula a data da última parcela baseado no período da parcela atual
+ * @param currentPeriod - Período da parcela atual no formato YYYY-MM (ex: "2025-11")
+ * @param currentInstallment - Número da parcela atual
+ * @param totalInstallments - Quantidade total de parcelas
+ * @returns Data da última parcela
+ */
+export function calculateLastInstallmentDate(
+  currentPeriod: string,
+  currentInstallment: number,
+  totalInstallments: number
+): Date {
+  // Parse do período atual (formato: "YYYY-MM")
+  const [yearStr, monthStr] = currentPeriod.split("-");
+  const year = Number.parseInt(yearStr ?? "", 10);
+  const monthIndex = Number.parseInt(monthStr ?? "", 10) - 1; // 0-indexed
+
+  if (Number.isNaN(year) || Number.isNaN(monthIndex)) {
+    return new Date();
+  }
+
+  // Cria data do período atual (parcela atual)
+  const currentDate = new Date(year, monthIndex, 1);
+
+  // Calcula quantas parcelas faltam (incluindo a atual)
+  // Ex: parcela 2 de 6 -> restam 5 parcelas (2, 3, 4, 5, 6)
+  const remainingInstallments = totalInstallments - currentInstallment + 1;
+
+  // Calcula quantos meses adicionar para chegar na última parcela
+  // Ex: restam 5 parcelas -> adicionar 4 meses (parcela atual + 4 = 5 parcelas)
+  const monthsToAdd = remainingInstallments - 1;
+
+  // Simplificando: monthsToAdd = totalInstallments - currentInstallment
+  currentDate.setMonth(currentDate.getMonth() + monthsToAdd);
+
+  return currentDate;
+}
+
+/**
+ * Formata a data da última parcela no formato "Mês de Ano"
+ * Exemplo: "Março de 2026"
+ */
+export function formatLastInstallmentDate(date: Date): string {
+  const formatter = new Intl.DateTimeFormat("pt-BR", {
+    month: "long",
+    year: "numeric",
+    timeZone: "UTC",
+  });
+
+  const formatted = formatter.format(date);
+  // Capitaliza a primeira letra
+  return formatted.charAt(0).toUpperCase() + formatted.slice(1);
+}
+
+/**
+ * Formata a data de compra no formato "dia, dd mmm"
+ * Exemplo: "qua, 24 set"
+ */
+export function formatPurchaseDate(date: Date): string {
+  const formatter = new Intl.DateTimeFormat("pt-BR", {
+    weekday: "short",
+    day: "2-digit",
+    month: "short",
+    timeZone: "UTC",
+  });
+
+  return formatter.format(date);
+}
+
+/**
+ * Formata o texto da parcela atual
+ * Exemplo: "1 de 6"
+ */
+export function formatCurrentInstallment(
+  current: number,
+  total: number
+): string {
+  return `${current} de ${total}`;
+}
diff --git a/lib/lancamentos/categoria-helpers.ts b/lib/lancamentos/categoria-helpers.ts
new file mode 100644
index 0000000..6c5bf07
--- /dev/null
+++ b/lib/lancamentos/categoria-helpers.ts
@@ -0,0 +1,83 @@
+/**
+ * Categoria grouping and sorting helpers for lancamentos
+ */
+
+import type { SelectOption } from "@/components/lancamentos/types";
+
+/**
+ * Capitalizes the first letter of a string
+ */
+function capitalize(value: string): string {
+  return value.length > 0 ? value[0]?.toUpperCase().concat(value.slice(1)) : value;
+}
+
+/**
+ * Group label for categorias
+ */
+type CategoriaGroup = {
+  label: string;
+  options: SelectOption[];
+};
+
+/**
+ * Normalizes category group labels (Despesa -> Despesas, Receita -> Receitas)
+ */
+function normalizeCategoryGroupLabel(value: string): string {
+  const lower = value.toLowerCase();
+  if (lower === "despesa") {
+    return "Despesas";
+  }
+  if (lower === "receita") {
+    return "Receitas";
+  }
+  return capitalize(value);
+}
+
+/**
+ * Groups and sorts categoria options by their group property
+ * @param categoriaOptions - Array of categoria select options
+ * @returns Array of grouped and sorted categoria options
+ */
+export function groupAndSortCategorias(
+  categoriaOptions: SelectOption[]
+): CategoriaGroup[] {
+  // Group categorias by their group property
+  const groups = categoriaOptions.reduce<Record<string, SelectOption[]>>(
+    (acc, option) => {
+      const key = option.group ?? "Outros";
+      if (!acc[key]) {
+        acc[key] = [];
+      }
+      acc[key].push(option);
+      return acc;
+    },
+    {}
+  );
+
+  // Define preferred order (Despesa first, then Receita, then others)
+  const preferredOrder = ["Despesa", "Receita"];
+  const orderedKeys = [
+    ...preferredOrder.filter((key) => groups[key]?.length),
+    ...Object.keys(groups).filter((key) => !preferredOrder.includes(key)),
+  ];
+
+  // Map to final structure with normalized labels and sorted options
+  return orderedKeys.map((key) => ({
+    label: normalizeCategoryGroupLabel(key),
+    options: groups[key]
+      .slice()
+      .sort((a, b) =>
+        a.label.localeCompare(b.label, "pt-BR", { sensitivity: "base" })
+      ),
+  }));
+}
+
+/**
+ * Filters secondary pagador options to exclude the primary pagador
+ */
+export function filterSecondaryPagadorOptions(
+  allOptions: SelectOption[],
+  primaryPagadorId?: string
+): SelectOption[] {
+  return allOptions.filter((option) => option.value !== primaryPagadorId);
+}
diff --git a/lib/lancamentos/constants.ts b/lib/lancamentos/constants.ts
new file mode 100644
index 0000000..1bf9841
--- /dev/null
+++ b/lib/lancamentos/constants.ts
@@ -0,0 +1,15 @@
+export const LANCAMENTO_TRANSACTION_TYPES = ["Despesa", "Receita", "Transferência"] as const;
+
+export const LANCAMENTO_CONDITIONS = [
+  "À vista",
+  "Parcelado",
+  "Recorrente",
+] as const;
+
+export const LANCAMENTO_PAYMENT_METHODS = [
+  "Cartão de crédito",
+  "Cartão de débito",
+  "Pix",
+  "Dinheiro",
+  "Boleto",
+] as const;
diff --git a/lib/lancamentos/form-helpers.ts b/lib/lancamentos/form-helpers.ts
new file mode 100644
index 0000000..1de452b
--- /dev/null
+++ b/lib/lancamentos/form-helpers.ts
@@ -0,0 +1,192 @@
+/**
+ * Form state management helpers for lancamentos
+ */
+
+import type { LancamentoItem } from "@/components/lancamentos/types";
+import { LANCAMENTO_CONDITIONS, LANCAMENTO_PAYMENT_METHODS, LANCAMENTO_TRANSACTION_TYPES } from "./constants";
+import { derivePeriodFromDate } from "@/lib/utils/period";
+import { getTodayDateString } from "@/lib/utils/date";
+
+/**
+ * Form state type for lancamento dialog
+ */
+export type LancamentoFormState = {
+  purchaseDate: string;
+  period: string;
+  name: string;
+  transactionType: string;
+  amount: string;
+  condition: string;
+  paymentMethod: string;
+  pagadorId: string | undefined;
+  secondaryPagadorId: string | undefined;
+  isSplit: boolean;
+  contaId: string | undefined;
+  cartaoId: string | undefined;
+  categoriaId: string | undefined;
+  installmentCount: string;
+  recurrenceCount: string;
+  dueDate: string;
+  boletoPaymentDate: string;
+  note: string;
+  isSettled: boolean | null;
+};
+
+/**
+ * Initial state overrides for lancamento form
+ */
+export type LancamentoFormOverrides = {
+  defaultCartaoId?: string | null;
+  defaultPaymentMethod?: string | null;
+  defaultPurchaseDate?: string | null;
+};
+
+/**
+ * Builds initial form state from lancamento data and defaults
+ */
+export function buildLancamentoInitialState(
+  lancamento?: LancamentoItem,
+  defaultPagadorId?: string | null,
+  preferredPeriod?: string,
+  overrides?: LancamentoFormOverrides
+): LancamentoFormState {
+  const purchaseDate = lancamento?.purchaseDate
+    ? lancamento.purchaseDate.slice(0, 10)
+    : overrides?.defaultPurchaseDate ?? "";
+
+  const paymentMethod =
+    lancamento?.paymentMethod ??
+    overrides?.defaultPaymentMethod ??
+    LANCAMENTO_PAYMENT_METHODS[0];
+
+  const derivedPeriod = derivePeriodFromDate(purchaseDate);
+  const fallbackPeriod =
+    preferredPeriod && /^\d{4}-\d{2}$/.test(preferredPeriod)
+      ? preferredPeriod
+      : derivedPeriod;
+  const fallbackPagadorId = lancamento?.pagadorId ?? defaultPagadorId ?? null;
+  const boletoPaymentDate =
+    lancamento?.boletoPaymentDate ??
+    (paymentMethod === "Boleto" && (lancamento?.isSettled ?? false)
+      ? getTodayDateString()
+      : "");
+
+  return {
+    purchaseDate,
+    period:
+      lancamento?.period && /^\d{4}-\d{2}$/.test(lancamento.period)
+        ? lancamento.period
+        : fallbackPeriod,
+    name: lancamento?.name ?? "",
+    transactionType:
+      lancamento?.transactionType ?? LANCAMENTO_TRANSACTION_TYPES[0],
+    amount:
+      typeof lancamento?.amount === "number"
+        ? (Math.round(Math.abs(lancamento.amount) * 100) / 100).toFixed(2)
+        : "",
+    condition: lancamento?.condition ?? LANCAMENTO_CONDITIONS[0],
+    paymentMethod,
+    pagadorId: fallbackPagadorId ?? undefined,
+    secondaryPagadorId: undefined,
+    isSplit: false,
+    contaId:
+      paymentMethod === "Cartão de crédito"
+        ? undefined
+        : lancamento?.contaId ?? undefined,
+    cartaoId:
+      paymentMethod === "Cartão de crédito"
+        ? lancamento?.cartaoId ?? overrides?.defaultCartaoId ?? undefined
+        : undefined,
+    categoriaId: lancamento?.categoriaId ?? undefined,
+    installmentCount: lancamento?.installmentCount
+      ? String(lancamento.installmentCount)
+      : "",
+    recurrenceCount: lancamento?.recurrenceCount
+      ? String(lancamento.recurrenceCount)
+      : "",
+    dueDate: lancamento?.dueDate ?? "",
+    boletoPaymentDate,
+    note: lancamento?.note ?? "",
+    isSettled:
+      paymentMethod === "Cartão de crédito"
+        ? null
+        : lancamento?.isSettled ?? false,
+  };
+}
+
+/**
+ * Applies field dependencies when form state changes
+ * This function encapsulates the business logic for field interdependencies
+ */
+export function applyFieldDependencies(
+  key: keyof LancamentoFormState,
+  value: LancamentoFormState[keyof LancamentoFormState],
+  currentState: LancamentoFormState,
+  _periodDirty: boolean
+): Partial<LancamentoFormState> {
+  const updates: Partial<LancamentoFormState> = {};
+
+  // Removed automatic period update when purchase date changes
+  // if (key === "purchaseDate" && typeof value === "string") {
+  //   if (!periodDirty) {
+  //     updates.period = derivePeriodFromDate(value);
+  //   }
+  // }
+
+  // When condition changes, clear irrelevant fields
+  if (key === "condition" && typeof value === "string") {
+    if (value !== "Parcelado") {
+      updates.installmentCount = "";
+    }
+    if (value !== "Recorrente") {
+      updates.recurrenceCount = "";
+    }
+  }
+
+  // When payment method changes, adjust related fields
+  if (key === "paymentMethod" && typeof value === "string") {
+    if (value === "Cartão de crédito") {
+      updates.contaId = undefined;
+      updates.isSettled = null;
+    } else {
+      updates.cartaoId = undefined;
+      updates.isSettled = currentState.isSettled ?? false;
+    }
+
+    // Clear boleto-specific fields if not boleto
+    if (value !== "Boleto") {
+      updates.dueDate = "";
+      updates.boletoPaymentDate = "";
+    } else if (currentState.isSettled || (updates.isSettled !== null && updates.isSettled !== undefined)) {
+      // Set today's date for boleto payment if settled
+      const settled = updates.isSettled ?? currentState.isSettled;
+      if (settled) {
+        updates.boletoPaymentDate = currentState.boletoPaymentDate || getTodayDateString();
+      }
+    }
+  }
+
+  // When split is disabled, clear secondary pagador
+  if (key === "isSplit" && value === false) {
+    updates.secondaryPagadorId = undefined;
+  }
+
+  // When primary pagador changes, clear secondary if it matches
+  if (key === "pagadorId" && typeof value === "string") {
+    const secondaryValue = currentState.secondaryPagadorId;
+    if (secondaryValue && secondaryValue === value) {
+      updates.secondaryPagadorId = undefined;
+    }
+  }
+
+  // When isSettled changes and payment method is Boleto
+  if (key === "isSettled" && currentState.paymentMethod === "Boleto") {
+    if (value === true) {
+      updates.boletoPaymentDate = currentState.boletoPaymentDate || getTodayDateString();
+    } else if (value === false) {
+      updates.boletoPaymentDate = "";
+    }
+  }
+
+  return updates;
+}
diff --git a/lib/lancamentos/formatting-helpers.ts b/lib/lancamentos/formatting-helpers.ts
new file mode 100644
index 0000000..d2c3b3a
--- /dev/null
+++ b/lib/lancamentos/formatting-helpers.ts
@@ -0,0 +1,94 @@
+/**
+ * Formatting helpers for displaying lancamento data
+ */
+
+/**
+ * Capitalizes the first letter of a string
+ */
+function capitalize(value: string): string {
+  return value.length > 0 ? value[0]?.toUpperCase().concat(value.slice(1)) : value;
+}
+
+/**
+ * Currency formatter for pt-BR locale (BRL)
+ */
+export const currencyFormatter = new Intl.NumberFormat("pt-BR", {
+  style: "currency",
+  currency: "BRL",
+});
+
+/**
+ * Date formatter for pt-BR locale (dd/mm/yyyy)
+ */
+export const dateFormatter = new Intl.DateTimeFormat("pt-BR", {
+  day: "2-digit",
+  month: "2-digit",
+  year: "numeric",
+});
+
+/**
+ * Month formatter for pt-BR locale (Month Year)
+ */
+export const monthFormatter = new Intl.DateTimeFormat("pt-BR", {
+  month: "long",
+  year: "numeric",
+});
+
+/**
+ * Formats a date string to localized format
+ * @param value - ISO date string or null
+ * @returns Formatted date string or "—"
+ * @example formatDate("2024-01-15") => "15/01/2024"
+ */
+export function formatDate(value?: string | null): string {
+  if (!value) return "—";
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return "—";
+  return dateFormatter.format(date);
+}
+
+/**
+ * Formats a period (YYYY-MM) to localized month label
+ * @param value - Period string (YYYY-MM) or null
+ * @returns Formatted period string or "—"
+ * @example formatPeriod("2024-01") => "Janeiro 2024"
+ */
+export function formatPeriod(value?: string | null): string {
+  if (!value) return "—";
+  const [year, month] = value.split("-").map(Number);
+  if (!year || !month) return value;
+  const date = new Date(year, month - 1, 1);
+  return capitalize(monthFormatter.format(date));
+}
+
+/**
+ * Formats a condition string with proper capitalization
+ * @param value - Condition string or null
+ * @returns Formatted condition string or "—"
+ * @example formatCondition("vista") => "À vista"
+ */
+export function formatCondition(value?: string | null): string {
+  if (!value) return "—";
+  if (value.toLowerCase() === "vista") return "À vista";
+  return capitalize(value);
+}
+
+/**
+ * Gets the badge variant for a transaction type
+ * @param type - Transaction type (Receita/Despesa)
+ * @returns Badge variant
+ */
+export function getTransactionBadgeVariant(type?: string | null): "default" | "destructive" | "secondary" {
+  if (!type) return "secondary";
+  return type.toLowerCase() === "receita" ? "default" : "destructive";
+}
+
+/**
+ * Formats currency value
+ * @param value - Numeric value
+ * @returns Formatted currency string
+ * @example formatCurrency(1234.56) => "R$ 1.234,56"
+ */
+export function formatCurrency(value: number): string {
+  return currencyFormatter.format(value);
+}
diff --git a/lib/lancamentos/page-helpers.ts b/lib/lancamentos/page-helpers.ts
new file mode 100644
index 0000000..d9d2c13
--- /dev/null
+++ b/lib/lancamentos/page-helpers.ts
@@ -0,0 +1,521 @@
+import type { SelectOption } from "@/components/lancamentos/types";
+import {
+  cartoes,
+  categorias,
+  contas,
+  lancamentos,
+  pagadores,
+} from "@/db/schema";
+import { ACCOUNT_AUTO_INVOICE_NOTE_PREFIX } from "@/lib/accounts/constants";
+import { db } from "@/lib/db";
+import {
+  LANCAMENTO_CONDITIONS,
+  LANCAMENTO_PAYMENT_METHODS,
+  LANCAMENTO_TRANSACTION_TYPES,
+} from "@/lib/lancamentos/constants";
+import { PAGADOR_ROLE_ADMIN, PAGADOR_ROLE_TERCEIRO } from "@/lib/pagadores/constants";
+import type { SQL } from "drizzle-orm";
+import { eq, ilike, or } from "drizzle-orm";
+
+type PagadorRow = typeof pagadores.$inferSelect;
+type ContaRow = typeof contas.$inferSelect;
+type CartaoRow = typeof cartoes.$inferSelect;
+type CategoriaRow = typeof categorias.$inferSelect;
+
+export type ResolvedSearchParams =
+  | Record<string, string | string[] | undefined>
+  | undefined;
+
+export type LancamentoSearchFilters = {
+  transactionFilter: string | null;
+  conditionFilter: string | null;
+  paymentFilter: string | null;
+  pagadorFilter: string | null;
+  categoriaFilter: string | null;
+  contaCartaoFilter: string | null;
+  searchFilter: string | null;
+};
+
+type BaseSluggedOption = {
+  id: string;
+  label: string;
+  slug: string;
+};
+
+type PagadorSluggedOption = BaseSluggedOption & {
+  role: string | null;
+  avatarUrl: string | null;
+};
+
+type CategoriaSluggedOption = BaseSluggedOption & {
+  type: string | null;
+  icon: string | null;
+};
+
+type ContaSluggedOption = BaseSluggedOption & {
+  kind: "conta";
+  logo: string | null;
+};
+
+type CartaoSluggedOption = BaseSluggedOption & {
+  kind: "cartao";
+  logo: string | null;
+};
+
+export type SluggedFilters = {
+  pagadorFiltersRaw: PagadorSluggedOption[];
+  categoriaFiltersRaw: CategoriaSluggedOption[];
+  contaFiltersRaw: ContaSluggedOption[];
+  cartaoFiltersRaw: CartaoSluggedOption[];
+};
+
+export type SlugMaps = {
+  pagador: Map<string, string>;
+  categoria: Map<string, string>;
+  conta: Map<string, string>;
+  cartao: Map<string, string>;
+};
+
+export type FilterOption = {
+  slug: string;
+  label: string;
+};
+
+export type ContaCartaoFilterOption = FilterOption & {
+  kind: "conta" | "cartao";
+};
+
+export type LancamentoOptionSets = {
+  pagadorOptions: SelectOption[];
+  splitPagadorOptions: SelectOption[];
+  defaultPagadorId: string | null;
+  contaOptions: SelectOption[];
+  cartaoOptions: SelectOption[];
+  categoriaOptions: SelectOption[];
+  pagadorFilterOptions: FilterOption[];
+  categoriaFilterOptions: FilterOption[];
+  contaCartaoFilterOptions: ContaCartaoFilterOption[];
+};
+
+export const getSingleParam = (
+  params: ResolvedSearchParams,
+  key: string
+): string | null => {
+  const value = params?.[key];
+  if (!value) {
+    return null;
+  }
+  return Array.isArray(value) ? value[0] ?? null : value;
+};
+
+export const extractLancamentoSearchFilters = (
+  params: ResolvedSearchParams
+): LancamentoSearchFilters => ({
+  transactionFilter: getSingleParam(params, "transacao"),
+  conditionFilter: getSingleParam(params, "condicao"),
+  paymentFilter: getSingleParam(params, "pagamento"),
+  pagadorFilter: getSingleParam(params, "pagador"),
+  categoriaFilter: getSingleParam(params, "categoria"),
+  contaCartaoFilter: getSingleParam(params, "contaCartao"),
+  searchFilter: getSingleParam(params, "q"),
+});
+
+const normalizeLabel = (value: string | null | undefined) =>
+  value?.trim().length ? value.trim() : "Sem descrição";
+
+const slugify = (value: string) => {
+  const base = value
+    .normalize("NFD")
+    .replace(/[\u0300-\u036f]/g, "")
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "");
+  return base || "item";
+};
+
+const createSlugGenerator = () => {
+  const seen = new Map<string, number>();
+  return (label: string) => {
+    const base = slugify(label);
+    const count = seen.get(base) ?? 0;
+    seen.set(base, count + 1);
+    if (count === 0) {
+      return base;
+    }
+    return `${base}-${count + 1}`;
+  };
+};
+
+export const toOption = (
+  value: string,
+  label: string | null | undefined,
+  role?: string | null,
+  group?: string | null,
+  slug?: string | null,
+  avatarUrl?: string | null,
+  logo?: string | null,
+  icon?: string | null
+): SelectOption => ({
+  value,
+  label: normalizeLabel(label),
+  role: role ?? null,
+  group: group ?? null,
+  slug: slug ?? null,
+  avatarUrl: avatarUrl ?? null,
+  logo: logo ?? null,
+  icon: icon ?? null,
+});
+
+export const fetchLancamentoFilterSources = async (userId: string) => {
+  const [pagadorRows, contaRows, cartaoRows, categoriaRows] = await Promise.all(
+    [
+      db.query.pagadores.findMany({
+        where: eq(pagadores.userId, userId),
+      }),
+      db.query.contas.findMany({
+        where: (contas, { eq, and }) =>
+          and(eq(contas.userId, userId), eq(contas.status, "Ativa")),
+      }),
+      db.query.cartoes.findMany({
+        where: (cartoes, { eq, and }) =>
+          and(eq(cartoes.userId, userId), eq(cartoes.status, "Ativo")),
+      }),
+      db.query.categorias.findMany({
+        where: eq(categorias.userId, userId),
+      }),
+    ]
+  );
+
+  return { pagadorRows, contaRows, cartaoRows, categoriaRows };
+};
+
+export const buildSluggedFilters = ({
+  pagadorRows,
+  categoriaRows,
+  contaRows,
+  cartaoRows,
+}: {
+  pagadorRows: PagadorRow[];
+  categoriaRows: CategoriaRow[];
+  contaRows: ContaRow[];
+  cartaoRows: CartaoRow[];
+}): SluggedFilters => {
+  const pagadorSlugger = createSlugGenerator();
+  const categoriaSlugger = createSlugGenerator();
+  const contaCartaoSlugger = createSlugGenerator();
+
+  const pagadorFiltersRaw = pagadorRows.map((pagador) => {
+    const label = normalizeLabel(pagador.name);
+    return {
+      id: pagador.id,
+      label,
+      slug: pagadorSlugger(label),
+      role: pagador.role ?? null,
+      avatarUrl: pagador.avatarUrl ?? null,
+    };
+  });
+
+  const categoriaFiltersRaw = categoriaRows.map((categoria) => {
+    const label = normalizeLabel(categoria.name);
+    return {
+      id: categoria.id,
+      label,
+      slug: categoriaSlugger(label),
+      type: categoria.type ?? null,
+      icon: categoria.icon ?? null,
+    };
+  });
+
+  const contaFiltersRaw = contaRows.map((conta) => {
+    const label = normalizeLabel(conta.name);
+    return {
+      id: conta.id,
+      label,
+      slug: contaCartaoSlugger(label),
+      kind: "conta" as const,
+      logo: conta.logo ?? null,
+    };
+  });
+
+  const cartaoFiltersRaw = cartaoRows.map((cartao) => {
+    const label = normalizeLabel(cartao.name);
+    return {
+      id: cartao.id,
+      label,
+      slug: contaCartaoSlugger(label),
+      kind: "cartao" as const,
+      logo: cartao.logo ?? null,
+    };
+  });
+
+  return {
+    pagadorFiltersRaw,
+    categoriaFiltersRaw,
+    contaFiltersRaw,
+    cartaoFiltersRaw,
+  };
+};
+
+export const buildSlugMaps = ({
+  pagadorFiltersRaw,
+  categoriaFiltersRaw,
+  contaFiltersRaw,
+  cartaoFiltersRaw,
+}: SluggedFilters): SlugMaps => ({
+  pagador: new Map(pagadorFiltersRaw.map(({ slug, id }) => [slug, id])),
+  categoria: new Map(categoriaFiltersRaw.map(({ slug, id }) => [slug, id])),
+  conta: new Map(contaFiltersRaw.map(({ slug, id }) => [slug, id])),
+  cartao: new Map(cartaoFiltersRaw.map(({ slug, id }) => [slug, id])),
+});
+
+const isValidTransaction = (
+  value: string | null
+): value is (typeof LANCAMENTO_TRANSACTION_TYPES)[number] =>
+  !!value &&
+  (LANCAMENTO_TRANSACTION_TYPES as readonly string[]).includes(value ?? "");
+
+const isValidCondition = (
+  value: string | null
+): value is (typeof LANCAMENTO_CONDITIONS)[number] =>
+  !!value && (LANCAMENTO_CONDITIONS as readonly string[]).includes(value ?? "");
+
+const isValidPaymentMethod = (
+  value: string | null
+): value is (typeof LANCAMENTO_PAYMENT_METHODS)[number] =>
+  !!value &&
+  (LANCAMENTO_PAYMENT_METHODS as readonly string[]).includes(value ?? "");
+
+const buildSearchPattern = (value: string | null) =>
+  value ? `%${value.trim().replace(/\s+/g, "%")}%` : null;
+
+export const buildLancamentoWhere = ({
+  userId,
+  period,
+  filters,
+  slugMaps,
+  cardId,
+  accountId,
+  pagadorId,
+}: {
+  userId: string;
+  period: string;
+  filters: LancamentoSearchFilters;
+  slugMaps: SlugMaps;
+  cardId?: string;
+  accountId?: string;
+  pagadorId?: string;
+}): SQL[] => {
+  const where: SQL[] = [
+    eq(lancamentos.userId, userId),
+    eq(lancamentos.period, period),
+  ];
+
+  if (pagadorId) {
+    where.push(eq(lancamentos.pagadorId, pagadorId));
+  }
+
+  if (cardId) {
+    where.push(eq(lancamentos.cartaoId, cardId));
+  }
+
+  if (accountId) {
+    where.push(eq(lancamentos.contaId, accountId));
+  }
+
+  if (isValidTransaction(filters.transactionFilter)) {
+    where.push(eq(lancamentos.transactionType, filters.transactionFilter));
+  }
+
+  if (isValidCondition(filters.conditionFilter)) {
+    where.push(eq(lancamentos.condition, filters.conditionFilter));
+  }
+
+  if (isValidPaymentMethod(filters.paymentFilter)) {
+    where.push(eq(lancamentos.paymentMethod, filters.paymentFilter));
+  }
+
+  if (!pagadorId && filters.pagadorFilter) {
+    const id = slugMaps.pagador.get(filters.pagadorFilter);
+    if (id) {
+      where.push(eq(lancamentos.pagadorId, id));
+    }
+  }
+
+  if (filters.categoriaFilter) {
+    const id = slugMaps.categoria.get(filters.categoriaFilter);
+    if (id) {
+      where.push(eq(lancamentos.categoriaId, id));
+    }
+  }
+
+  if (filters.contaCartaoFilter) {
+    const contaId = slugMaps.conta.get(filters.contaCartaoFilter);
+    const relatedCartaoId = contaId
+      ? null
+      : slugMaps.cartao.get(filters.contaCartaoFilter);
+    if (contaId) {
+      where.push(eq(lancamentos.contaId, contaId));
+    }
+    if (!contaId && relatedCartaoId) {
+      where.push(eq(lancamentos.cartaoId, relatedCartaoId));
+    }
+  }
+
+  const searchPattern = buildSearchPattern(filters.searchFilter);
+  if (searchPattern) {
+    where.push(
+      or(
+        ilike(lancamentos.name, searchPattern),
+        ilike(lancamentos.note, searchPattern)
+      )
+    );
+  }
+
+  return where;
+};
+
+type LancamentoRowWithRelations = typeof lancamentos.$inferSelect & {
+  pagador?: PagadorRow | null;
+  conta?: ContaRow | null;
+  cartao?: CartaoRow | null;
+  categoria?: CategoriaRow | null;
+};
+
+export const mapLancamentosData = (rows: LancamentoRowWithRelations[]) =>
+  rows.map((item) => ({
+    id: item.id,
+    name: item.name,
+    purchaseDate: item.purchaseDate?.toISOString() ?? new Date().toISOString(),
+    period: item.period ?? "",
+    transactionType: item.transactionType,
+    amount: Number(item.amount ?? 0),
+    condition: item.condition,
+    paymentMethod: item.paymentMethod,
+    pagadorId: item.pagadorId ?? null,
+    pagadorName: item.pagador?.name ?? null,
+    pagadorAvatar: item.pagador?.avatarUrl ?? null,
+    pagadorRole: item.pagador?.role ?? null,
+    contaId: item.contaId ?? null,
+    contaName: item.conta?.name ?? null,
+    contaLogo: item.conta?.logo ?? null,
+    cartaoId: item.cartaoId ?? null,
+    cartaoName: item.cartao?.name ?? null,
+    cartaoLogo: item.cartao?.logo ?? null,
+    categoriaId: item.categoriaId ?? null,
+    categoriaName: item.categoria?.name ?? null,
+    categoriaType: item.categoria?.type ?? null,
+    installmentCount: item.installmentCount ?? null,
+    recurrenceCount: item.recurrenceCount ?? null,
+    currentInstallment: item.currentInstallment ?? null,
+    dueDate: item.dueDate ? item.dueDate.toISOString().slice(0, 10) : null,
+    boletoPaymentDate: item.boletoPaymentDate
+      ? item.boletoPaymentDate.toISOString().slice(0, 10)
+      : null,
+    note: item.note ?? null,
+    isSettled: item.isSettled ?? null,
+    isDivided: item.isDivided ?? false,
+    isAnticipated: item.isAnticipated ?? false,
+    anticipationId: item.anticipationId ?? null,
+    seriesId: item.seriesId ?? null,
+    readonly:
+      Boolean(item.note?.startsWith(ACCOUNT_AUTO_INVOICE_NOTE_PREFIX)) ||
+      item.categoria?.name === "Saldo inicial" ||
+      item.categoria?.name === "Pagamentos",
+  }));
+
+const sortByLabel = <T extends { label: string }>(items: T[]) =>
+  items.sort((a, b) =>
+    a.label.localeCompare(b.label, "pt-BR", { sensitivity: "base" })
+  );
+
+export const buildOptionSets = ({
+  pagadorFiltersRaw,
+  categoriaFiltersRaw,
+  contaFiltersRaw,
+  cartaoFiltersRaw,
+  pagadorRows,
+  limitCartaoId,
+  limitContaId,
+}: SluggedFilters & {
+  pagadorRows: PagadorRow[];
+  limitCartaoId?: string;
+  limitContaId?: string;
+}): LancamentoOptionSets => {
+  const pagadorOptions = sortByLabel(
+    pagadorFiltersRaw.map(({ id, label, role, slug, avatarUrl }) =>
+      toOption(id, label, role, undefined, slug, avatarUrl)
+    )
+  );
+
+  const pagadorFilterOptions = sortByLabel(
+    pagadorFiltersRaw.map(({ slug, label, avatarUrl }) => ({
+      slug,
+      label,
+      avatarUrl,
+    }))
+  );
+
+  const defaultPagadorId =
+    pagadorRows.find((pagador) => pagador.role === PAGADOR_ROLE_ADMIN)?.id ??
+    null;
+
+  const splitPagadorOptions = pagadorOptions.filter(
+    (option) => option.role === PAGADOR_ROLE_TERCEIRO
+  );
+
+  const contaOptionsSource = limitContaId
+    ? contaFiltersRaw.filter((conta) => conta.id === limitContaId)
+    : contaFiltersRaw;
+
+  const contaOptions = sortByLabel(
+    contaOptionsSource.map(({ id, label, slug, logo }) =>
+      toOption(id, label, undefined, undefined, slug, undefined, logo)
+    )
+  );
+
+  const cartaoOptionsSource = limitCartaoId
+    ? cartaoFiltersRaw.filter((cartao) => cartao.id === limitCartaoId)
+    : cartaoFiltersRaw;
+
+  const cartaoOptions = sortByLabel(
+    cartaoOptionsSource.map(({ id, label, slug, logo }) =>
+      toOption(id, label, undefined, undefined, slug, undefined, logo)
+    )
+  );
+
+  const categoriaOptions = sortByLabel(
+    categoriaFiltersRaw.map(({ id, label, type, slug, icon }) =>
+      toOption(id, label, undefined, type, slug, undefined, undefined, icon)
+    )
+  );
+
+  const categoriaFilterOptions = sortByLabel(
+    categoriaFiltersRaw.map(({ slug, label, icon }) => ({ slug, label, icon }))
+  );
+
+  const contaCartaoFilterOptions = sortByLabel(
+    [...contaFiltersRaw, ...cartaoFiltersRaw]
+      .filter(
+        (option) =>
+          (limitCartaoId && option.kind === "cartao"
+            ? option.id === limitCartaoId
+            : true) &&
+          (limitContaId && option.kind === "conta"
+            ? option.id === limitContaId
+            : true)
+      )
+      .map(({ slug, label, kind, logo }) => ({ slug, label, kind, logo }))
+  );
+
+  return {
+    pagadorOptions,
+    splitPagadorOptions,
+    defaultPagadorId,
+    contaOptions,
+    cartaoOptions,
+    categoriaOptions,
+    pagadorFilterOptions,
+    categoriaFilterOptions,
+    contaCartaoFilterOptions,
+  };
+};
diff --git a/lib/logo/index.ts b/lib/logo/index.ts
new file mode 100644
index 0000000..b7e6c88
--- /dev/null
+++ b/lib/logo/index.ts
@@ -0,0 +1,40 @@
+/**
+ * Logo utilities
+ *
+ * Consolidated from:
+ * - /lib/logo.ts (utility functions)
+ */
+
+/**
+ * Normalizes logo path to get just the filename
+ * @param logo - Logo path or URL
+ * @returns Filename only
+ */
+export const normalizeLogo = (logo?: string | null) =>
+  logo?.split("/").filter(Boolean).pop() ?? "";
+
+/**
+ * Derives a display name from a logo filename
+ * @param logo - Logo path or filename
+ * @returns Formatted display name
+ * @example
+ * deriveNameFromLogo("my-company-logo.png") // "My Company Logo"
+ */
+export const deriveNameFromLogo = (logo?: string | null) => {
+  if (!logo) {
+    return "";
+  }
+
+  const fileName = normalizeLogo(logo);
+
+  if (!fileName) {
+    return "";
+  }
+
+  const withoutExtension = fileName.replace(/\.[^/.]+$/, "");
+  return withoutExtension
+    .split(/[-_.\s]+/)
+    .filter(Boolean)
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1).toLowerCase())
+    .join(" ");
+};
diff --git a/lib/logo/options.ts b/lib/logo/options.ts
new file mode 100644
index 0000000..b141665
--- /dev/null
+++ b/lib/logo/options.ts
@@ -0,0 +1,30 @@
+/**
+ * Logo options loader
+ *
+ * Consolidated from:
+ * - /lib/logo-options.ts (async logo loading)
+ */
+
+import { readdir } from "node:fs/promises";
+import path from "node:path";
+
+const LOGOS_DIRECTORY = path.join(process.cwd(), "public", "logos");
+const LOGO_EXTENSIONS = new Set([".png", ".jpg", ".jpeg", ".svg", ".webp"]);
+
+/**
+ * Loads available logo files from the public/logos directory
+ * @returns Array of logo filenames sorted alphabetically
+ */
+export async function loadLogoOptions() {
+  try {
+    const files = await readdir(LOGOS_DIRECTORY, { withFileTypes: true });
+
+    return files
+      .filter((file) => file.isFile())
+      .map((file) => file.name)
+      .filter((file) => LOGO_EXTENSIONS.has(path.extname(file).toLowerCase()))
+      .sort((a, b) => a.localeCompare(b, "pt-BR", { sensitivity: "base" }));
+  } catch {
+    return [];
+  }
+}
diff --git a/lib/pagadores/access.ts b/lib/pagadores/access.ts
new file mode 100644
index 0000000..e03548e
--- /dev/null
+++ b/lib/pagadores/access.ts
@@ -0,0 +1,114 @@
+import {
+  pagadores,
+  pagadorShares,
+  user as usersTable,
+} from "@/db/schema";
+import { db } from "@/lib/db";
+import { and, eq } from "drizzle-orm";
+
+export type PagadorWithAccess = typeof pagadores.$inferSelect & {
+  canEdit: boolean;
+  sharedByName: string | null;
+  sharedByEmail: string | null;
+  shareId: string | null;
+};
+
+export async function fetchPagadoresWithAccess(
+  userId: string
+): Promise<PagadorWithAccess[]> {
+  const [owned, shared] = await Promise.all([
+    db.query.pagadores.findMany({
+      where: eq(pagadores.userId, userId),
+    }),
+    db
+      .select({
+        shareId: pagadorShares.id,
+        pagador: pagadores,
+        ownerName: usersTable.name,
+        ownerEmail: usersTable.email,
+      })
+      .from(pagadorShares)
+      .innerJoin(
+        pagadores,
+        eq(pagadorShares.pagadorId, pagadores.id)
+      )
+      .leftJoin(
+        usersTable,
+        eq(pagadores.userId, usersTable.id)
+      )
+      .where(eq(pagadorShares.sharedWithUserId, userId)),
+  ]);
+
+  const ownedMapped: PagadorWithAccess[] = owned.map((item) => ({
+    ...item,
+    canEdit: true,
+    sharedByName: null,
+    sharedByEmail: null,
+    shareId: null,
+  }));
+
+  const sharedMapped: PagadorWithAccess[] = shared.map((item) => ({
+    ...item.pagador,
+    shareCode: null,
+    canEdit: false,
+    sharedByName: item.ownerName ?? null,
+    sharedByEmail: item.ownerEmail ?? null,
+    shareId: item.shareId,
+  }));
+
+  return [...ownedMapped, ...sharedMapped];
+}
+
+export async function getPagadorAccess(
+  userId: string,
+  pagadorId: string
+) {
+  const pagador = await db.query.pagadores.findFirst({
+    where: and(eq(pagadores.id, pagadorId)),
+  });
+
+  if (!pagador) {
+    return null;
+  }
+
+  if (pagador.userId === userId) {
+    return {
+      pagador,
+      canEdit: true,
+      share: null as typeof pagadorShares.$inferSelect | null,
+    };
+  }
+
+  const share = await db.query.pagadorShares.findFirst({
+    where: and(
+      eq(pagadorShares.pagadorId, pagadorId),
+      eq(pagadorShares.sharedWithUserId, userId)
+    ),
+  });
+
+  if (!share) {
+    return null;
+  }
+
+  return { pagador, canEdit: false, share };
+}
+
+export async function userCanEditPagador(
+  userId: string,
+  pagadorId: string
+) {
+  const pagadorRow = await db.query.pagadores.findFirst({
+    columns: { id: true },
+    where: and(eq(pagadores.id, pagadorId), eq(pagadores.userId, userId)),
+  });
+
+  return Boolean(pagadorRow);
+}
+
+export async function userHasPagadorAccess(
+  userId: string,
+  pagadorId: string
+) {
+  const access = await getPagadorAccess(userId, pagadorId);
+  return Boolean(access);
+}
diff --git a/lib/pagadores/constants.ts b/lib/pagadores/constants.ts
new file mode 100644
index 0000000..4febe04
--- /dev/null
+++ b/lib/pagadores/constants.ts
@@ -0,0 +1,13 @@
+/**
+ * Pagador constants
+ *
+ * Extracted from /lib/pagadores.ts
+ */
+
+export const PAGADOR_STATUS_OPTIONS = ["Ativo", "Inativo"] as const;
+
+export type PagadorStatus = (typeof PAGADOR_STATUS_OPTIONS)[number];
+
+export const PAGADOR_ROLE_ADMIN = "admin";
+export const PAGADOR_ROLE_TERCEIRO = "terceiro";
+export const DEFAULT_PAGADOR_AVATAR = "avatar_010.svg";
diff --git a/lib/pagadores/defaults.ts b/lib/pagadores/defaults.ts
new file mode 100644
index 0000000..7f83d80
--- /dev/null
+++ b/lib/pagadores/defaults.ts
@@ -0,0 +1,60 @@
+/**
+ * Pagador defaults - User seeding logic
+ *
+ * Moved from /lib/pagador-defaults.ts to /lib/pagadores/defaults.ts
+ */
+
+import { pagadores } from "@/db/schema";
+import { db } from "@/lib/db";
+import {
+  DEFAULT_PAGADOR_AVATAR,
+  PAGADOR_ROLE_ADMIN,
+  PAGADOR_STATUS_OPTIONS,
+} from "./constants";
+import { normalizeNameFromEmail } from "./utils";
+import { eq } from "drizzle-orm";
+
+const DEFAULT_STATUS = PAGADOR_STATUS_OPTIONS[0];
+
+interface SeedUserLike {
+  id?: string;
+  name?: string | null;
+  email?: string | null;
+  image?: string | null;
+}
+
+export async function ensureDefaultPagadorForUser(user: SeedUserLike) {
+  const userId = user.id;
+
+  if (!userId) {
+    return;
+  }
+
+  const hasAnyPagador = await db.query.pagadores.findFirst({
+    columns: { id: true, role: true },
+    where: eq(pagadores.userId, userId),
+  });
+
+  if (hasAnyPagador) {
+    return;
+  }
+
+  const name =
+    (user.name && user.name.trim().length > 0
+      ? user.name.trim()
+      : normalizeNameFromEmail(user.email)) || "Pagador principal";
+
+  // Usa a imagem do Google se disponível, senão usa o avatar padrão
+  const avatarUrl = user.image ?? DEFAULT_PAGADOR_AVATAR;
+
+  await db.insert(pagadores).values({
+    name,
+    email: user.email ?? null,
+    status: DEFAULT_STATUS,
+    role: PAGADOR_ROLE_ADMIN,
+    avatarUrl,
+    note: null,
+    isAutoSend: false,
+    userId,
+  });
+}
diff --git a/lib/pagadores/details.ts b/lib/pagadores/details.ts
new file mode 100644
index 0000000..c0772b6
--- /dev/null
+++ b/lib/pagadores/details.ts
@@ -0,0 +1,325 @@
+import { cartoes, lancamentos } from "@/db/schema";
+import { ACCOUNT_AUTO_INVOICE_NOTE_PREFIX } from "@/lib/accounts/constants";
+import { db } from "@/lib/db";
+import {
+  and,
+  eq,
+  gte,
+  ilike,
+  isNull,
+  lte,
+  not,
+  or,
+  sum,
+} from "drizzle-orm";
+import { sql } from "drizzle-orm";
+
+const RECEITA = "Receita";
+const DESPESA = "Despesa";
+const PAYMENT_METHOD_CARD = "Cartão de crédito";
+const PAYMENT_METHOD_BOLETO = "Boleto";
+
+export type PagadorMonthlyBreakdown = {
+  totalExpenses: number;
+  totalIncomes: number;
+  paymentSplits: Record<"card" | "boleto" | "instant", number>;
+};
+
+export type PagadorHistoryPoint = {
+  period: string;
+  label: string;
+  receitas: number;
+  despesas: number;
+};
+
+export type PagadorCardUsageItem = {
+  id: string;
+  name: string;
+  logo: string | null;
+  amount: number;
+};
+
+export type PagadorBoletoStats = {
+  totalAmount: number;
+  paidAmount: number;
+  pendingAmount: number;
+  paidCount: number;
+  pendingCount: number;
+};
+
+const toNumber = (value: string | number | bigint | null) => {
+  if (typeof value === "number") {
+    return value;
+  }
+  if (typeof value === "bigint") {
+    return Number(value);
+  }
+  if (!value) {
+    return 0;
+  }
+  const parsed = Number(value);
+  return Number.isNaN(parsed) ? 0 : parsed;
+};
+
+const formatPeriod = (year: number, month: number) =>
+  `${year}-${String(month).padStart(2, "0")}`;
+
+const normalizePeriod = (period: string) => {
+  const [yearStr, monthStr] = period.split("-");
+  const year = Number.parseInt(yearStr ?? "", 10);
+  const month = Number.parseInt(monthStr ?? "", 10);
+  if (Number.isNaN(year) || Number.isNaN(month)) {
+    throw new Error(`Período inválido: ${period}`);
+  }
+  return { year, month };
+};
+
+const buildPeriodWindow = (period: string, months: number) => {
+  const { year, month } = normalizePeriod(period);
+  const items: string[] = [];
+  let currentYear = year;
+  let currentMonth = month;
+
+  for (let i = 0; i < months; i += 1) {
+    items.unshift(formatPeriod(currentYear, currentMonth));
+    currentMonth -= 1;
+    if (currentMonth < 1) {
+      currentMonth = 12;
+      currentYear -= 1;
+    }
+  }
+
+  return items;
+};
+
+const formatPeriodLabel = (period: string) => {
+  try {
+    const { year, month } = normalizePeriod(period);
+    const formatter = new Intl.DateTimeFormat("pt-BR", {
+      month: "short",
+    });
+    const date = new Date(year, month - 1, 1);
+    const rawLabel = formatter.format(date).replace(".", "");
+    const label =
+      rawLabel.length > 0
+        ? rawLabel.charAt(0).toUpperCase().concat(rawLabel.slice(1))
+        : rawLabel;
+    const suffix = String(year).slice(-2);
+    return `${label}/${suffix}`;
+  } catch {
+    return period;
+  }
+};
+
+const excludeAutoInvoiceEntries = () =>
+  or(
+    isNull(lancamentos.note),
+    not(ilike(lancamentos.note, `${ACCOUNT_AUTO_INVOICE_NOTE_PREFIX}%`))
+  );
+
+type BaseFilters = {
+  userId: string;
+  pagadorId: string;
+  period: string;
+};
+
+export async function fetchPagadorMonthlyBreakdown({
+  userId,
+  pagadorId,
+  period,
+}: BaseFilters): Promise<PagadorMonthlyBreakdown> {
+  const rows = await db
+    .select({
+      paymentMethod: lancamentos.paymentMethod,
+      transactionType: lancamentos.transactionType,
+      totalAmount: sum(lancamentos.amount).as("total"),
+    })
+    .from(lancamentos)
+    .where(
+      and(
+        eq(lancamentos.userId, userId),
+        eq(lancamentos.pagadorId, pagadorId),
+        eq(lancamentos.period, period),
+        excludeAutoInvoiceEntries()
+      )
+    )
+    .groupBy(lancamentos.paymentMethod, lancamentos.transactionType);
+
+  const paymentSplits: PagadorMonthlyBreakdown["paymentSplits"] = {
+    card: 0,
+    boleto: 0,
+    instant: 0,
+  };
+  let totalExpenses = 0;
+  let totalIncomes = 0;
+
+  for (const row of rows) {
+    const total = Math.abs(toNumber(row.totalAmount));
+    if (row.transactionType === DESPESA) {
+      totalExpenses += total;
+      if (row.paymentMethod === PAYMENT_METHOD_CARD) {
+        paymentSplits.card += total;
+      } else if (row.paymentMethod === PAYMENT_METHOD_BOLETO) {
+        paymentSplits.boleto += total;
+      } else {
+        paymentSplits.instant += total;
+      }
+    } else if (row.transactionType === RECEITA) {
+      totalIncomes += total;
+    }
+  }
+
+  return {
+    totalExpenses,
+    totalIncomes,
+    paymentSplits,
+  };
+}
+
+export async function fetchPagadorHistory({
+  userId,
+  pagadorId,
+  period,
+  months = 6,
+}: BaseFilters & { months?: number }): Promise<PagadorHistoryPoint[]> {
+  const window = buildPeriodWindow(period, months);
+  const start = window[0];
+  const end = window[window.length - 1];
+
+  const rows = await db
+    .select({
+      period: lancamentos.period,
+      transactionType: lancamentos.transactionType,
+      totalAmount: sum(lancamentos.amount).as("total"),
+    })
+    .from(lancamentos)
+    .where(
+      and(
+        eq(lancamentos.userId, userId),
+        eq(lancamentos.pagadorId, pagadorId),
+        gte(lancamentos.period, start),
+        lte(lancamentos.period, end),
+        excludeAutoInvoiceEntries()
+      )
+    )
+    .groupBy(lancamentos.period, lancamentos.transactionType);
+
+  const totalsByPeriod = new Map<
+    string,
+    { receitas: number; despesas: number }
+  >();
+
+  for (const key of window) {
+    totalsByPeriod.set(key, { receitas: 0, despesas: 0 });
+  }
+
+  for (const row of rows) {
+    const key = row.period ?? undefined;
+    if (!key || !totalsByPeriod.has(key)) continue;
+    const bucket = totalsByPeriod.get(key);
+    if (!bucket) continue;
+    const total = Math.abs(toNumber(row.totalAmount));
+    if (row.transactionType === DESPESA) {
+      bucket.despesas += total;
+    } else if (row.transactionType === RECEITA) {
+      bucket.receitas += total;
+    }
+  }
+
+  return window.map((key) => ({
+    period: key,
+    label: formatPeriodLabel(key),
+    receitas: totalsByPeriod.get(key)?.receitas ?? 0,
+    despesas: totalsByPeriod.get(key)?.despesas ?? 0,
+  }));
+}
+
+export async function fetchPagadorCardUsage({
+  userId,
+  pagadorId,
+  period,
+}: BaseFilters): Promise<PagadorCardUsageItem[]> {
+  const rows = await db
+    .select({
+      cartaoId: lancamentos.cartaoId,
+      cardName: cartoes.name,
+      cardLogo: cartoes.logo,
+      totalAmount: sum(lancamentos.amount).as("total"),
+    })
+    .from(lancamentos)
+    .innerJoin(cartoes, eq(lancamentos.cartaoId, cartoes.id))
+    .where(
+      and(
+        eq(lancamentos.userId, userId),
+        eq(lancamentos.pagadorId, pagadorId),
+        eq(lancamentos.period, period),
+        eq(lancamentos.paymentMethod, PAYMENT_METHOD_CARD),
+        excludeAutoInvoiceEntries()
+      )
+    )
+    .groupBy(lancamentos.cartaoId, cartoes.name, cartoes.logo);
+
+  return rows
+    .filter((row) => Boolean(row.cartaoId))
+    .map((row) => {
+      if (!row.cartaoId) {
+        throw new Error("cartaoId should not be null after filter");
+      }
+      return {
+        id: row.cartaoId,
+        name: row.cardName ?? "Cartão",
+        logo: row.cardLogo ?? null,
+        amount: Math.abs(toNumber(row.totalAmount)),
+      };
+    })
+    .sort((a, b) => b.amount - a.amount);
+}
+
+export async function fetchPagadorBoletoStats({
+  userId,
+  pagadorId,
+  period,
+}: BaseFilters): Promise<PagadorBoletoStats> {
+  const rows = await db
+    .select({
+      isSettled: lancamentos.isSettled,
+      totalAmount: sum(lancamentos.amount).as("total"),
+      totalCount: sql<number>`count(${lancamentos.id})`.as("count"),
+    })
+    .from(lancamentos)
+    .where(
+      and(
+        eq(lancamentos.userId, userId),
+        eq(lancamentos.pagadorId, pagadorId),
+        eq(lancamentos.period, period),
+        eq(lancamentos.paymentMethod, PAYMENT_METHOD_BOLETO),
+        excludeAutoInvoiceEntries()
+      )
+    )
+    .groupBy(lancamentos.isSettled);
+
+  let paidAmount = 0;
+  let pendingAmount = 0;
+  let paidCount = 0;
+  let pendingCount = 0;
+
+  for (const row of rows) {
+    const total = Math.abs(toNumber(row.totalAmount));
+    const count = toNumber(row.totalCount);
+    if (row.isSettled) {
+      paidAmount += total;
+      paidCount += count;
+    } else {
+      pendingAmount += total;
+      pendingCount += count;
+    }
+  }
+
+  return {
+    totalAmount: paidAmount + pendingAmount,
+    paidAmount,
+    pendingAmount,
+    paidCount,
+    pendingCount,
+  };
+}
diff --git a/lib/pagadores/notifications.ts b/lib/pagadores/notifications.ts
new file mode 100644
index 0000000..aa936fd
--- /dev/null
+++ b/lib/pagadores/notifications.ts
@@ -0,0 +1,237 @@
+import { pagadores } from "@/db/schema";
+import { db } from "@/lib/db";
+import { inArray } from "drizzle-orm";
+import { Resend } from "resend";
+
+type ActionType = "created" | "deleted";
+
+export type NotificationEntry = {
+  pagadorId: string;
+  name: string | null;
+  amount: number;
+  transactionType: string | null;
+  paymentMethod: string | null;
+  condition: string | null;
+  purchaseDate: Date | null;
+  period: string | null;
+  note: string | null;
+};
+
+export type PagadorNotificationRequest = {
+  userLabel: string;
+  action: ActionType;
+  entriesByPagador: Map<string, NotificationEntry[]>;
+};
+
+const formatCurrency = (value: number) =>
+  value.toLocaleString("pt-BR", {
+    style: "currency",
+    currency: "BRL",
+    maximumFractionDigits: 2,
+  });
+
+const formatDate = (value: Date | null) => {
+  if (!value) return "—";
+  return value.toLocaleDateString("pt-BR", {
+    day: "2-digit",
+    month: "short",
+    year: "numeric",
+  });
+};
+
+const buildHtmlBody = ({
+  userLabel,
+  action,
+  entries,
+}: {
+  userLabel: string;
+  action: ActionType;
+  entries: NotificationEntry[];
+}) => {
+  const actionLabel =
+    action === "created" ? "Novo lançamento registrado" : "Lançamento removido";
+  const actionDescription =
+    action === "created"
+      ? "Um novo lançamento foi registrado em seu nome."
+      : "Um lançamento anteriormente registrado em seu nome foi removido.";
+
+  const rows = entries
+    .map((entry) => {
+      const label =
+        entry.transactionType === "Despesa"
+          ? formatCurrency(Math.abs(entry.amount)) + " (Despesa)"
+          : formatCurrency(Math.abs(entry.amount)) + " (Receita)";
+      return `<tr>
+        <td style="padding:8px;border-bottom:1px solid #e2e8f0;">${formatDate(
+          entry.purchaseDate
+        )}</td>
+        <td style="padding:8px;border-bottom:1px solid #e2e8f0;">${
+          entry.name ?? "Sem descrição"
+        }</td>
+        <td style="padding:8px;border-bottom:1px solid #e2e8f0;">${
+          entry.paymentMethod ?? "—"
+        }</td>
+        <td style="padding:8px;border-bottom:1px solid #e2e8f0;">${
+          entry.condition ?? "—"
+        }</td>
+        <td style="padding:8px;border-bottom:1px solid #e2e8f0;text-align:right;">${label}</td>
+      </tr>`;
+    })
+    .join("");
+
+  return `
+    <div style="font-family:'Inter',Arial,sans-serif;color:#0f172a;line-height:1.5;">
+      <h2 style="margin:0 0 8px 0;font-size:20px;">${actionLabel}</h2>
+      <p style="margin:0 0 16px 0;color:#475569;">${actionDescription}</p>
+
+      <table style="width:100%;border-collapse:collapse;font-size:13px;margin-bottom:16px;">
+        <thead>
+          <tr style="background:#f8fafc;">
+            <th style="text-align:left;padding:8px;border-bottom:1px solid #e2e8f0;">Data</th>
+            <th style="text-align:left;padding:8px;border-bottom:1px solid #e2e8f0;">Descrição</th>
+            <th style="text-align:left;padding:8px;border-bottom:1px solid #e2e8f0;">Pagamento</th>
+            <th style="text-align:left;padding:8px;border-bottom:1px solid #e2e8f0;">Condição</th>
+            <th style="text-align:right;padding:8px;border-bottom:1px solid #e2e8f0;">Valor</th>
+          </tr>
+        </thead>
+        <tbody>
+          ${rows}
+        </tbody>
+      </table>
+
+      <p style="margin:0;font-size:12px;color:#94a3b8;">
+        Enviado automaticamente por ${userLabel} via OpenSheets.
+      </p>
+    </div>
+  `;
+};
+
+export async function sendPagadorAutoEmails({
+  userLabel,
+  action,
+  entriesByPagador,
+}: PagadorNotificationRequest) {
+  "use server";
+
+  if (entriesByPagador.size === 0) {
+    return;
+  }
+
+  const resendApiKey = process.env.RESEND_API_KEY;
+  const resendFrom =
+    process.env.RESEND_FROM_EMAIL ?? "OpenSheets <onboarding@resend.dev>";
+
+  if (!resendApiKey) {
+    console.warn(
+      "RESEND_API_KEY não configurada. Envio automático de lançamentos ignorado."
+    );
+    return;
+  }
+
+  const pagadorIds = Array.from(entriesByPagador.keys());
+  if (pagadorIds.length === 0) {
+    return;
+  }
+
+  const pagadorRows = await db.query.pagadores.findMany({
+    where: inArray(pagadores.id, pagadorIds),
+  });
+
+  if (pagadorRows.length === 0) {
+    return;
+  }
+
+  const resend = new Resend(resendApiKey);
+  const subjectPrefix =
+    action === "created" ? "Novo lançamento" : "Lançamento removido";
+
+  const results = await Promise.allSettled(
+    pagadorRows.map(async (pagador) => {
+      if (!pagador.email || !pagador.isAutoSend) {
+        return;
+      }
+
+      const entries = entriesByPagador.get(pagador.id);
+      if (!entries || entries.length === 0) {
+        return;
+      }
+
+      const html = buildHtmlBody({
+        userLabel,
+        action,
+        entries,
+      });
+
+      await resend.emails.send({
+        from: resendFrom,
+        to: pagador.email,
+        subject: `${subjectPrefix} • ${pagador.name}`,
+        html,
+      });
+    })
+  );
+
+  // Log any failed email sends
+  results.forEach((result, index) => {
+    if (result.status === "rejected") {
+      const pagador = pagadorRows[index];
+      console.error(
+        `Failed to send email notification to ${pagador?.name} (${pagador?.email}):`,
+        result.reason
+      );
+    }
+  });
+}
+
+export type RawNotificationRecord = {
+  pagadorId: string | null;
+  name: string | null;
+  amount: string | number | null;
+  transactionType: string | null;
+  paymentMethod: string | null;
+  condition: string | null;
+  purchaseDate: Date | string | null;
+  period: string | null;
+  note: string | null;
+};
+
+export const buildEntriesByPagador = (
+  records: RawNotificationRecord[]
+): Map<string, NotificationEntry[]> => {
+  const map = new Map<string, NotificationEntry[]>();
+
+  records.forEach((record) => {
+    if (!record.pagadorId) {
+      return;
+    }
+
+    const amount =
+      typeof record.amount === "number"
+        ? record.amount
+        : Number(record.amount ?? 0);
+    const purchaseDate =
+      record.purchaseDate instanceof Date
+        ? record.purchaseDate
+        : record.purchaseDate
+        ? new Date(record.purchaseDate)
+        : null;
+
+    const entry: NotificationEntry = {
+      pagadorId: record.pagadorId,
+      name: record.name ?? null,
+      amount,
+      transactionType: record.transactionType ?? null,
+      paymentMethod: record.paymentMethod ?? null,
+      condition: record.condition ?? null,
+      purchaseDate,
+      period: record.period ?? null,
+      note: record.note ?? null,
+    };
+
+    const list = map.get(record.pagadorId) ?? [];
+    list.push(entry);
+    map.set(record.pagadorId, list);
+  });
+
+  return map;
+};
diff --git a/lib/pagadores/utils.ts b/lib/pagadores/utils.ts
new file mode 100644
index 0000000..c0a1293
--- /dev/null
+++ b/lib/pagadores/utils.ts
@@ -0,0 +1,65 @@
+/**
+ * Pagador utility functions
+ *
+ * Extracted from /lib/pagadores.ts
+ */
+
+import { DEFAULT_PAGADOR_AVATAR } from "./constants";
+
+/**
+ * Normaliza o caminho do avatar extraindo apenas o nome do arquivo.
+ * Remove qualquer caminho anterior e retorna null se não houver avatar.
+ */
+export const normalizeAvatarPath = (
+  avatar: string | null | undefined
+): string | null => {
+  if (!avatar) return null;
+  const file = avatar.split("/").filter(Boolean).pop();
+  return file ?? avatar;
+};
+
+/**
+ * Retorna o caminho completo para o avatar, com fallback para o avatar padrão.
+ * Se o avatar for uma URL completa (http/https/data), retorna diretamente.
+ */
+export const getAvatarSrc = (avatar: string | null | undefined): string => {
+  if (!avatar) {
+    return `/avatares/${DEFAULT_PAGADOR_AVATAR}`;
+  }
+
+  // Se for uma URL completa (Google, etc), retorna diretamente
+  if (
+    avatar.startsWith("http://") ||
+    avatar.startsWith("https://") ||
+    avatar.startsWith("data:")
+  ) {
+    return avatar;
+  }
+
+  // Se for um caminho local, normaliza e adiciona o prefixo
+  const normalized = normalizeAvatarPath(avatar);
+  return `/avatares/${normalized ?? DEFAULT_PAGADOR_AVATAR}`;
+};
+
+/**
+ * Normaliza nome a partir de email
+ */
+export const normalizeNameFromEmail = (
+  email: string | null | undefined
+): string => {
+  if (!email) {
+    return "Novo pagador";
+  }
+  const [local] = email.split("@");
+  if (!local) {
+    return "Novo pagador";
+  }
+  return local
+    .split(".")
+    .map((segment) =>
+      segment.length > 0
+        ? segment[0]?.toUpperCase().concat(segment.slice(1))
+        : segment
+    )
+    .join(" ");
+};
diff --git a/lib/schemas/common.ts b/lib/schemas/common.ts
new file mode 100644
index 0000000..042dc9a
--- /dev/null
+++ b/lib/schemas/common.ts
@@ -0,0 +1,134 @@
+import { z } from "zod";
+
+/**
+ * Common Zod schemas for reuse across the application
+ */
+
+/**
+ * UUID schema with custom error message
+ */
+export const uuidSchema = (entityName: string = "ID") =>
+  z.string({ message: `${entityName} inválido.` }).uuid(`${entityName} inválido.`);
+
+/**
+ * Decimal string schema - parses string with comma/period to number
+ */
+export const decimalSchema = z
+  .string()
+  .trim()
+  .transform((value) => value.replace(/\s/g, "").replace(",", "."))
+  .refine(
+    (value) => !Number.isNaN(Number.parseFloat(value)),
+    "Informe um valor numérico válido."
+  )
+  .transform((value) => Number.parseFloat(value));
+
+/**
+ * Optional/nullable decimal string schema
+ */
+export const optionalDecimalSchema = z
+  .string()
+  .trim()
+  .optional()
+  .transform((value) =>
+    value && value.length > 0 ? value.replace(",", ".") : null
+  )
+  .refine(
+    (value) => value === null || !Number.isNaN(Number.parseFloat(value)),
+    "Informe um valor numérico válido."
+  )
+  .transform((value) => (value === null ? null : Number.parseFloat(value)));
+
+/**
+ * Day of month schema (1-31)
+ */
+export const dayOfMonthSchema = z
+  .string({ message: "Informe o dia." })
+  .trim()
+  .min(1, "Informe o dia.")
+  .refine((value) => {
+    const parsed = Number.parseInt(value, 10);
+    return !Number.isNaN(parsed) && parsed >= 1 && parsed <= 31;
+  }, "Informe um dia entre 1 e 31.");
+
+/**
+ * Period schema (YYYY-MM format)
+ */
+export const periodSchema = z
+  .string({ message: "Informe o período." })
+  .trim()
+  .regex(/^\d{4}-(0[1-9]|1[0-2])$/, "Período inválido.");
+
+/**
+ * Optional period schema
+ */
+export const optionalPeriodSchema = z
+  .string()
+  .trim()
+  .regex(/^(\d{4})-(\d{2})$/, {
+    message: "Selecione um período válido.",
+  })
+  .optional();
+
+/**
+ * Date string schema
+ */
+export const dateStringSchema = z
+  .string({ message: "Informe a data." })
+  .trim()
+  .refine((value) => !Number.isNaN(new Date(value).getTime()), {
+    message: "Data inválida.",
+  });
+
+/**
+ * Optional date string schema
+ */
+export const optionalDateStringSchema = z
+  .string()
+  .trim()
+  .refine((value) => !value || !Number.isNaN(new Date(value).getTime()), {
+    message: "Informe uma data válida.",
+  })
+  .optional();
+
+/**
+ * Note/observation schema (max 500 chars, trimmed, nullable)
+ */
+export const noteSchema = z
+  .string()
+  .trim()
+  .max(500, "A anotação deve ter no máximo 500 caracteres.")
+  .optional()
+  .transform((value) => (value && value.length > 0 ? value : null));
+
+/**
+ * Optional string that becomes null if empty
+ */
+export const optionalStringToNull = z
+  .string()
+  .trim()
+  .optional()
+  .transform((value) => (value && value.length > 0 ? value : null));
+
+/**
+ * Required non-empty string schema
+ */
+export const requiredStringSchema = (fieldName: string) =>
+  z
+    .string({ message: `Informe ${fieldName}.` })
+    .trim()
+    .min(1, `Informe ${fieldName}.`);
+
+/**
+ * Amount schema with minimum value validation
+ */
+export const amountSchema = z.coerce
+  .number({ message: "Informe o valor." })
+  .min(0, "Informe um valor maior ou igual a zero.");
+
+/**
+ * Positive amount schema
+ */
+export const positiveAmountSchema = z.coerce
+  .number({ message: "Informe o valor." })
+  .positive("Informe um valor maior que zero.");
diff --git a/lib/schemas/insights.ts b/lib/schemas/insights.ts
new file mode 100644
index 0000000..accda1b
--- /dev/null
+++ b/lib/schemas/insights.ts
@@ -0,0 +1,69 @@
+import { z } from "zod";
+
+/**
+ * Categorias de insights
+ */
+export const INSIGHT_CATEGORIES = {
+  behaviors: {
+    id: "behaviors",
+    title: "Comportamentos Observados",
+    icon: "RiEyeLine",
+    color: "blue",
+  },
+  triggers: {
+    id: "triggers",
+    title: "Gatilhos de Consumo",
+    icon: "RiFlashlightLine",
+    color: "amber",
+  },
+  recommendations: {
+    id: "recommendations",
+    title: "Recomendações Práticas",
+    icon: "RiLightbulbLine",
+    color: "green",
+  },
+  improvements: {
+    id: "improvements",
+    title: "Melhorias Sugeridas",
+    icon: "RiRocketLine",
+    color: "purple",
+  },
+} as const;
+
+export type InsightCategoryId = keyof typeof INSIGHT_CATEGORIES;
+
+/**
+ * Schema para item individual de insight
+ */
+export const InsightItemSchema = z.object({
+  text: z.string().min(1),
+});
+
+/**
+ * Schema para categoria de insights
+ */
+export const InsightCategorySchema = z.object({
+  category: z.enum([
+    "behaviors",
+    "triggers",
+    "recommendations",
+    "improvements",
+  ]),
+  items: z.array(InsightItemSchema).min(1).max(6),
+});
+
+/**
+ * Schema for complete insights response from AI
+ */
+export const InsightsResponseSchema = z.object({
+  month: z.string().regex(/^\d{4}-\d{2}$/), // YYYY-MM
+  generatedAt: z.string(), // ISO datetime
+  categories: z.array(InsightCategorySchema).length(4),
+});
+
+/**
+ * TypeScript types derived from schemas
+ */
+export type InsightItem = z.infer<typeof InsightItemSchema>;
+export type InsightCategory = z.infer<typeof InsightCategorySchema>;
+export type InsightsResponse = z.infer<typeof InsightsResponseSchema>;
diff --git a/lib/transferencias/constants.ts b/lib/transferencias/constants.ts
new file mode 100644
index 0000000..af25310
--- /dev/null
+++ b/lib/transferencias/constants.ts
@@ -0,0 +1,5 @@
+export const TRANSFER_CATEGORY_NAME = "Transferência interna";
+export const TRANSFER_ESTABLISHMENT = "Transf. entre contas";
+export const TRANSFER_PAGADOR = "Admin";
+export const TRANSFER_PAYMENT_METHOD = "Pix";
+export const TRANSFER_CONDITION = "À vista";
diff --git a/lib/utils/calculator.ts b/lib/utils/calculator.ts
new file mode 100644
index 0000000..758a752
--- /dev/null
+++ b/lib/utils/calculator.ts
@@ -0,0 +1,168 @@
+export type Operator = "add" | "subtract" | "multiply" | "divide";
+
+export const OPERATOR_SYMBOLS: Record<Operator, string> = {
+  add: "+",
+  subtract: "-",
+  multiply: "×",
+  divide: "÷",
+};
+
+export function formatNumber(value: number): string {
+  if (!Number.isFinite(value)) {
+    return "Erro";
+  }
+
+  const rounded = Number(Math.round(value * 1e10) / 1e10);
+  return rounded.toString();
+}
+
+export function formatLocaleValue(rawValue: string): string {
+  if (rawValue === "Erro") {
+    return rawValue;
+  }
+
+  const isNegative = rawValue.startsWith("-");
+  const unsignedValue = isNegative ? rawValue.slice(1) : rawValue;
+
+  if (unsignedValue === "") {
+    return isNegative ? "-0" : "0";
+  }
+
+  const hasDecimalSeparator = unsignedValue.includes(".");
+  const [integerPartRaw, decimalPartRaw] = unsignedValue.split(".");
+
+  const integerPart = integerPartRaw || "0";
+  const decimalPart = hasDecimalSeparator ? (decimalPartRaw ?? "") : undefined;
+
+  const numericInteger = Number(integerPart);
+  const formattedInteger = Number.isFinite(numericInteger)
+    ? numericInteger.toLocaleString("pt-BR")
+    : integerPart;
+
+  if (decimalPart === undefined) {
+    return `${isNegative ? "-" : ""}${formattedInteger}`;
+  }
+
+  return `${isNegative ? "-" : ""}${formattedInteger},${decimalPart}`;
+}
+
+export function performOperation(
+  a: number,
+  b: number,
+  operator: Operator,
+): number {
+  switch (operator) {
+    case "add":
+      return a + b;
+    case "subtract":
+      return a - b;
+    case "multiply":
+      return a * b;
+    case "divide":
+      return b === 0 ? Infinity : a / b;
+    default:
+      return b;
+  }
+}
+
+// Trata colagem de valores com formatação brasileira (ponto para milhar, vírgula para decimal)
+// e variações simples em formato internacional.
+export function normalizeClipboardNumber(rawValue: string): string | null {
+  const trimmed = rawValue.trim();
+  if (!trimmed) {
+    return null;
+  }
+
+  const match = trimmed.match(/-?[\d.,\s]+/);
+  if (!match) {
+    return null;
+  }
+
+  let extracted = match[0].replace(/\s+/g, "");
+  if (!extracted) {
+    return null;
+  }
+
+  const isNegative = extracted.startsWith("-");
+  if (isNegative) {
+    extracted = extracted.slice(1);
+  }
+
+  extracted = extracted.replace(/[^\d.,]/g, "");
+  if (!extracted) {
+    return null;
+  }
+
+  const countOccurrences = (char: string) =>
+    (extracted.match(new RegExp(`\\${char}`, "g")) ?? []).length;
+
+  const hasComma = extracted.includes(",");
+  const hasDot = extracted.includes(".");
+
+  let decimalSeparator: "," | "." | null = null;
+
+  if (hasComma && hasDot) {
+    decimalSeparator =
+      extracted.lastIndexOf(",") > extracted.lastIndexOf(".") ? "," : ".";
+  } else if (hasComma) {
+    const commaCount = countOccurrences(",");
+    if (commaCount > 1) {
+      decimalSeparator = null;
+    } else {
+      const digitsAfterComma =
+        extracted.length - extracted.lastIndexOf(",") - 1;
+      decimalSeparator =
+        digitsAfterComma > 0 && digitsAfterComma <= 2 ? "," : null;
+    }
+  } else if (hasDot) {
+    const dotCount = countOccurrences(".");
+    if (dotCount > 1) {
+      decimalSeparator = null;
+    } else {
+      const digitsAfterDot = extracted.length - extracted.lastIndexOf(".") - 1;
+      const decimalCandidate = extracted.slice(extracted.lastIndexOf(".") + 1);
+      const allZeros = /^0+$/.test(decimalCandidate);
+      const shouldTreatAsDecimal =
+        digitsAfterDot > 0 &&
+        digitsAfterDot <= 3 &&
+        !(digitsAfterDot === 3 && allZeros);
+      decimalSeparator = shouldTreatAsDecimal ? "." : null;
+    }
+  }
+
+  let integerPart = extracted;
+  let decimalPart = "";
+
+  if (decimalSeparator) {
+    const decimalIndex = extracted.lastIndexOf(decimalSeparator);
+    integerPart = extracted.slice(0, decimalIndex);
+    decimalPart = extracted.slice(decimalIndex + 1);
+  }
+
+  integerPart = integerPart.replace(/[^\d]/g, "");
+  decimalPart = decimalPart.replace(/[^\d]/g, "");
+
+  if (!integerPart) {
+    integerPart = "0";
+  }
+
+  let normalized = integerPart;
+  if (decimalPart) {
+    normalized = `${integerPart}.${decimalPart}`;
+  }
+
+  if (isNegative && Number(normalized) !== 0) {
+    normalized = `-${normalized}`;
+  }
+
+  if (!/^(-?\d+(\.\d+)?)$/.test(normalized)) {
+    return null;
+  }
+
+  const numericValue = Number(normalized);
+  if (!Number.isFinite(numericValue)) {
+    return null;
+  }
+
+  return normalized;
+}
diff --git a/lib/utils/currency.ts b/lib/utils/currency.ts
new file mode 100644
index 0000000..a6bc849
--- /dev/null
+++ b/lib/utils/currency.ts
@@ -0,0 +1,60 @@
+/**
+ * Utility functions for currency/decimal formatting and parsing
+ */
+
+/**
+ * Formats a decimal number for database storage (2 decimal places)
+ * @param value - The number to format
+ * @returns Formatted string with 2 decimal places, or null if input is null
+ */
+export function formatDecimalForDb(value: number | null): string | null {
+  if (value === null) {
+    return null;
+  }
+
+  return (Math.round(value * 100) / 100).toFixed(2);
+}
+
+/**
+ * Formats a decimal number for database storage (non-nullable version)
+ * @param value - The number to format
+ * @returns Formatted string with 2 decimal places
+ */
+export function formatDecimalForDbRequired(value: number): string {
+  return (Math.round(value * 100) / 100).toFixed(2);
+}
+
+/**
+ * Normalizes decimal input by replacing comma with period
+ * @param value - Input string
+ * @returns Normalized string with period as decimal separator
+ */
+export function normalizeDecimalInput(value: string): string {
+  return value.replace(/\s/g, "").replace(",", ".");
+}
+
+/**
+ * Formats a limit/balance input for display
+ * @param value - The number to format
+ * @returns Formatted string or empty string
+ */
+export function formatLimitInput(value?: number | null): string {
+  if (value === null || value === undefined || Number.isNaN(value)) {
+    return "";
+  }
+
+  return (Math.round(value * 100) / 100).toFixed(2);
+}
+
+/**
+ * Formats an initial balance input for display (defaults to "0.00")
+ * @param value - The number to format
+ * @returns Formatted string with default "0.00"
+ */
+export function formatInitialBalanceInput(value?: number | null): string {
+  if (value === null || value === undefined || Number.isNaN(value)) {
+    return "0.00";
+  }
+
+  return (Math.round(value * 100) / 100).toFixed(2);
+}
diff --git a/lib/utils/date.ts b/lib/utils/date.ts
new file mode 100644
index 0000000..bb8a937
--- /dev/null
+++ b/lib/utils/date.ts
@@ -0,0 +1,235 @@
+/**
+ * Date utilities - Functions for date manipulation and formatting
+ *
+ * This module consolidates date-related utilities from:
+ * - /lib/utils/date.ts (basic date manipulation)
+ * - /lib/date/index.ts (formatting and display)
+ *
+ * Note: Period-related functions (YYYY-MM) are in /lib/utils/period
+ */
+
+// ============================================================================
+// CONSTANTS
+// ============================================================================
+
+const WEEKDAY_NAMES = [
+  "Domingo",
+  "Segunda",
+  "Terça",
+  "Quarta",
+  "Quinta",
+  "Sexta",
+  "Sábado",
+] as const;
+
+const MONTH_NAMES = [
+  "janeiro",
+  "fevereiro",
+  "março",
+  "abril",
+  "maio",
+  "junho",
+  "julho",
+  "agosto",
+  "setembro",
+  "outubro",
+  "novembro",
+  "dezembro",
+] as const;
+
+// ============================================================================
+// DATE CREATION & MANIPULATION
+// ============================================================================
+
+/**
+ * Gets today's date in UTC
+ * @returns Date object set to today at midnight UTC
+ */
+export function getTodayUTC(): Date {
+  const now = new Date();
+  const year = now.getUTCFullYear();
+  const month = now.getUTCMonth();
+  const day = now.getUTCDate();
+
+  return new Date(Date.UTC(year, month, day));
+}
+
+/**
+ * Gets today's date in local timezone
+ * @returns Date object set to today at midnight local time
+ */
+export function getTodayLocal(): Date {
+  const now = new Date();
+  const year = now.getFullYear();
+  const month = now.getMonth();
+  const day = now.getDate();
+
+  return new Date(year, month, day);
+}
+
+/**
+ * Gets today's period in YYYY-MM format (UTC)
+ * @returns Period string
+ */
+export function getTodayPeriodUTC(): string {
+  const now = new Date();
+  const year = now.getUTCFullYear();
+  const month = now.getUTCMonth();
+
+  return `${year}-${String(month + 1).padStart(2, "0")}`;
+}
+
+/**
+ * Formats date as YYYY-MM-DD string
+ * @param date - Date to format
+ * @returns Formatted date string
+ */
+export function formatDateForDb(date: Date): string {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+
+  return `${year}-${month}-${day}`;
+}
+
+/**
+ * Gets today's date as YYYY-MM-DD string
+ * @returns Formatted date string
+ */
+export function getTodayDateString(): string {
+  const now = new Date();
+  const year = now.getFullYear();
+  const month = String(now.getMonth() + 1).padStart(2, "0");
+  const day = String(now.getDate()).padStart(2, "0");
+
+  return `${year}-${month}-${day}`;
+}
+
+/**
+ * Gets today's date as Date object
+ * @returns Date object for today
+ */
+export function getTodayDate(): Date {
+  return new Date(getTodayDateString());
+}
+
+/**
+ * Gets today's info (date and period)
+ * @returns Object with date and period
+ */
+export function getTodayInfo(): { date: Date; period: string } {
+  const now = new Date();
+  const year = now.getUTCFullYear();
+  const month = now.getUTCMonth();
+  const day = now.getUTCDate();
+
+  return {
+    date: new Date(Date.UTC(year, month, day)),
+    period: `${year}-${String(month + 1).padStart(2, "0")}`,
+  };
+}
+
+/**
+ * Adds months to a date
+ * @param value - Date to add months to
+ * @param offset - Number of months to add (can be negative)
+ * @returns New date with months added
+ */
+export function addMonthsToDate(value: Date, offset: number): Date {
+  const result = new Date(value);
+  const originalDay = result.getDate();
+
+  result.setDate(1);
+  result.setMonth(result.getMonth() + offset);
+
+  const lastDay = new Date(
+    result.getFullYear(),
+    result.getMonth() + 1,
+    0
+  ).getDate();
+
+  result.setDate(Math.min(originalDay, lastDay));
+  return result;
+}
+
+// ============================================================================
+// DATE FORMATTING
+// ============================================================================
+
+/**
+ * Formats a date string (YYYY-MM-DD) to short display format
+ * @example
+ * formatDate("2024-11-14") // "qui 14 nov"
+ */
+export function formatDate(value: string): string {
+  const [year, month, day] = value.split("-");
+  const parsed = new Date(
+    Number.parseInt(year ?? "0", 10),
+    Number.parseInt(month ?? "1", 10) - 1,
+    Number.parseInt(day ?? "1", 10)
+  );
+
+  return new Intl.DateTimeFormat("pt-BR", {
+    weekday: "short",
+    day: "2-digit",
+    month: "short",
+  })
+    .format(parsed)
+    .replace(".", "")
+    .replace(" de", "");
+}
+
+/**
+ * Formats a date to friendly long format
+ * @example
+ * friendlyDate(new Date()) // "Segunda, 14 de novembro de 2025"
+ */
+export function friendlyDate(date: Date): string {
+  const weekday = WEEKDAY_NAMES[date.getDay()];
+  const day = date.getDate();
+  const month = MONTH_NAMES[date.getMonth()];
+  const year = date.getFullYear();
+
+  return `${weekday}, ${day} de ${month} de ${year}`;
+}
+
+// ============================================================================
+// TIME-BASED UTILITIES
+// ============================================================================
+
+/**
+ * Gets appropriate greeting based on time of day
+ * @param date - Date to get greeting for (defaults to now)
+ * @returns "Bom dia", "Boa tarde", or "Boa noite"
+ */
+export function getGreeting(date: Date = new Date()): string {
+  const hour = date.getHours();
+  if (hour >= 5 && hour < 12) return "Bom dia";
+  if (hour >= 12 && hour < 18) return "Boa tarde";
+  return "Boa noite";
+}
+
+// ============================================================================
+// DATE INFORMATION
+// ============================================================================
+
+/**
+ * Gets information about a date
+ * @param date - Date to analyze (defaults to now)
+ * @returns Object with date information
+ */
+export function getDateInfo(date: Date = new Date()) {
+  return {
+    date,
+    year: date.getFullYear(),
+    month: date.getMonth() + 1,
+    monthName: MONTH_NAMES[date.getMonth()],
+    day: date.getDate(),
+    weekday: WEEKDAY_NAMES[date.getDay()],
+    friendlyDisplay: friendlyDate(date),
+    greeting: getGreeting(date),
+  };
+}
+
+// Re-export MONTH_NAMES for convenience
+export { MONTH_NAMES };
diff --git a/lib/utils/icons.tsx b/lib/utils/icons.tsx
new file mode 100644
index 0000000..48a55d4
--- /dev/null
+++ b/lib/utils/icons.tsx
@@ -0,0 +1,61 @@
+import * as RemixIcons from "@remixicon/react";
+import type { ComponentType, ReactNode } from "react";
+
+const ICON_CLASS = "h-4 w-4";
+
+const normalizeKey = (value: string) =>
+  value
+    .normalize("NFD")
+    .replace(/\p{Diacritic}/gu, "")
+    .toLowerCase()
+    .replace(/[^a-z0-9]/g, "");
+
+export const getIconComponent = (
+  iconName: string
+): ComponentType<{ className?: string }> | null => {
+  // Busca o ícone no objeto de ícones do Remix Icon
+  const icon = (RemixIcons as Record<string, unknown>)[iconName];
+
+  if (icon && typeof icon === "function") {
+    return icon as ComponentType<{ className?: string }>;
+  }
+
+  return null;
+};
+
+export const getConditionIcon = (condition: string): ReactNode => {
+  const key = normalizeKey(condition);
+
+  const registry: Record<string, ReactNode> = {
+    parcelado: <RemixIcons.RiLoader2Fill className={ICON_CLASS} aria-hidden />,
+    recorrente: <RemixIcons.RiRefreshLine className={ICON_CLASS} aria-hidden />,
+    avista: <RemixIcons.RiCheckLine className={ICON_CLASS} aria-hidden />,
+    vista: <RemixIcons.RiCheckLine className={ICON_CLASS} aria-hidden />,
+  };
+
+  return registry[key] ?? null;
+};
+
+export const getPaymentMethodIcon = (paymentMethod: string): ReactNode => {
+  const key = normalizeKey(paymentMethod);
+
+  const registry: Record<string, ReactNode> = {
+    dinheiro: (
+      <RemixIcons.RiMoneyDollarCircleLine className={ICON_CLASS} aria-hidden />
+    ),
+    pix: <RemixIcons.RiPixLine className={ICON_CLASS} aria-hidden />,
+    boleto: <RemixIcons.RiBarcodeLine className={ICON_CLASS} aria-hidden />,
+    credito: (
+      <RemixIcons.RiMoneyDollarCircleLine className={ICON_CLASS} aria-hidden />
+    ),
+    cartaodecredito: (
+      <RemixIcons.RiBankCardLine className={ICON_CLASS} aria-hidden />
+    ),
+    cartaodedebito: (
+      <RemixIcons.RiBankCardLine className={ICON_CLASS} aria-hidden />
+    ),
+    debito: <RemixIcons.RiBankCardLine className={ICON_CLASS} aria-hidden />,
+  };
+
+  return registry[key] ?? null;
+};
diff --git a/lib/utils/math.ts b/lib/utils/math.ts
new file mode 100644
index 0000000..85c8335
--- /dev/null
+++ b/lib/utils/math.ts
@@ -0,0 +1,51 @@
+/**
+ * Utility functions for mathematical calculations
+ */
+
+/**
+ * Calculates percentage change between two values
+ * @param current - Current value
+ * @param previous - Previous value
+ * @returns Percentage change or null if previous is 0 and current is also 0
+ */
+export function calculatePercentageChange(
+  current: number,
+  previous: number
+): number | null {
+  const EPSILON = 0.01; // Considera valores menores que 1 centavo como zero
+
+  if (Math.abs(previous) < EPSILON) {
+    if (Math.abs(current) < EPSILON) return null;
+    return current > 0 ? 100 : -100;
+  }
+
+  const change = ((current - previous) / Math.abs(previous)) * 100;
+
+  // Protege contra valores absurdos (retorna null se > 1 milhão %)
+  return Number.isFinite(change) && Math.abs(change) < 1000000 ? change : null;
+}
+
+/**
+ * Calculates percentage of part relative to total
+ * @param part - Part value
+ * @param total - Total value
+ * @returns Percentage (0-100)
+ */
+export function calculatePercentage(part: number, total: number): number {
+  if (total === 0) {
+    return 0;
+  }
+
+  return (part / total) * 100;
+}
+
+/**
+ * Rounds number to specified decimal places
+ * @param value - Value to round
+ * @param decimals - Number of decimal places (default 2)
+ * @returns Rounded number
+ */
+export function roundToDecimals(value: number, decimals: number = 2): number {
+  const multiplier = 10 ** decimals;
+  return Math.round(value * multiplier) / multiplier;
+}
diff --git a/lib/utils/number.ts b/lib/utils/number.ts
new file mode 100644
index 0000000..63d2d4c
--- /dev/null
+++ b/lib/utils/number.ts
@@ -0,0 +1,74 @@
+/**
+ * Utility functions for safe number conversions
+ */
+
+/**
+ * Safely converts unknown value to number
+ * @param value - Value to convert
+ * @param defaultValue - Default value if conversion fails
+ * @returns Converted number or default value
+ */
+export function safeToNumber(
+  value: unknown,
+  defaultValue: number = 0
+): number {
+  if (typeof value === "number") {
+    return value;
+  }
+
+  if (typeof value === "string") {
+    const parsed = Number(value);
+    return Number.isNaN(parsed) ? defaultValue : parsed;
+  }
+
+  if (value === null || value === undefined) {
+    return defaultValue;
+  }
+
+  const parsed = Number(value);
+  return Number.isNaN(parsed) ? defaultValue : parsed;
+}
+
+/**
+ * Safely parses integer from unknown value
+ * @param value - Value to parse
+ * @param defaultValue - Default value if parsing fails
+ * @returns Parsed integer or default value
+ */
+export function safeParseInt(
+  value: unknown,
+  defaultValue: number = 0
+): number {
+  if (typeof value === "number") {
+    return Math.trunc(value);
+  }
+
+  if (typeof value === "string") {
+    const parsed = Number.parseInt(value, 10);
+    return Number.isNaN(parsed) ? defaultValue : parsed;
+  }
+
+  return defaultValue;
+}
+
+/**
+ * Safely parses float from unknown value
+ * @param value - Value to parse
+ * @param defaultValue - Default value if parsing fails
+ * @returns Parsed float or default value
+ */
+export function safeParseFloat(
+  value: unknown,
+  defaultValue: number = 0
+): number {
+  if (typeof value === "number") {
+    return value;
+  }
+
+  if (typeof value === "string") {
+    const parsed = Number.parseFloat(value);
+    return Number.isNaN(parsed) ? defaultValue : parsed;
+  }
+
+  return defaultValue;
+}
diff --git a/lib/utils/period/index.ts b/lib/utils/period/index.ts
new file mode 100644
index 0000000..4cf9782
--- /dev/null
+++ b/lib/utils/period/index.ts
@@ -0,0 +1,381 @@
+/**
+ * Period utilities - Consolidated module for period (YYYY-MM) manipulation
+ *
+ * This module consolidates period-related functionality from:
+ * - /lib/month-period.ts (URL param handling)
+ * - /lib/period/index.ts (YYYY-MM operations)
+ * - /hooks/use-dates.ts (month navigation)
+ * - /lib/lancamentos/period-helpers.ts (formatting)
+ *
+ * Moved from /lib/period to /lib/utils/period for better organization
+ */
+
+// ============================================================================
+// CONSTANTS
+// ============================================================================
+
+export const MONTH_NAMES = [
+  "janeiro",
+  "fevereiro",
+  "março",
+  "abril",
+  "maio",
+  "junho",
+  "julho",
+  "agosto",
+  "setembro",
+  "outubro",
+  "novembro",
+  "dezembro",
+] as const;
+
+export type MonthName = (typeof MONTH_NAMES)[number];
+
+// ============================================================================
+// CORE PARSING & FORMATTING (YYYY-MM format)
+// ============================================================================
+
+/**
+ * Parses period string into year and month
+ * @param period - Period string in YYYY-MM format
+ * @returns Object with year and month numbers
+ * @throws Error if period format is invalid
+ */
+export function parsePeriod(period: string): { year: number; month: number } {
+  const [yearStr, monthStr] = period.split("-");
+  const year = Number.parseInt(yearStr ?? "", 10);
+  const month = Number.parseInt(monthStr ?? "", 10);
+
+  if (Number.isNaN(year) || Number.isNaN(month) || month < 1 || month > 12) {
+    throw new Error(`Período inválido: ${period}`);
+  }
+
+  return { year, month };
+}
+
+/**
+ * Formats year and month into period string
+ * @param year - Year number
+ * @param month - Month number (1-12)
+ * @returns Period string in YYYY-MM format
+ */
+export function formatPeriod(year: number, month: number): string {
+  return `${year}-${String(month).padStart(2, "0")}`;
+}
+
+/**
+ * Validates if period string is valid
+ * @param period - Period string to validate
+ * @returns True if valid, false otherwise
+ */
+export function isPeriodValid(period: string): boolean {
+  try {
+    parsePeriod(period);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+// ============================================================================
+// PERIOD NAVIGATION
+// ============================================================================
+
+/**
+ * Returns the current period in YYYY-MM format
+ * @example
+ * getCurrentPeriod() // "2025-11"
+ */
+export function getCurrentPeriod(): string {
+  const now = new Date();
+  return formatPeriod(now.getFullYear(), now.getMonth() + 1);
+}
+
+/**
+ * Gets the previous period
+ * @param period - Current period in YYYY-MM format
+ * @returns Previous period string
+ */
+export function getPreviousPeriod(period: string): string {
+  const { year, month } = parsePeriod(period);
+
+  if (month === 1) {
+    return formatPeriod(year - 1, 12);
+  }
+
+  return formatPeriod(year, month - 1);
+}
+
+/**
+ * Gets the next period
+ * @param period - Current period in YYYY-MM format
+ * @returns Next period string
+ */
+export function getNextPeriod(period: string): string {
+  const { year, month } = parsePeriod(period);
+
+  if (month === 12) {
+    return formatPeriod(year + 1, 1);
+  }
+
+  return formatPeriod(year, month + 1);
+}
+
+/**
+ * Adds months to a period
+ * @param period - Period string in YYYY-MM format
+ * @param offset - Number of months to add (can be negative)
+ * @returns New period string
+ */
+export function addMonthsToPeriod(period: string, offset: number): string {
+  const { year: baseYear, month: baseMonth } = parsePeriod(period);
+
+  const date = new Date(baseYear, baseMonth - 1, 1);
+  date.setMonth(date.getMonth() + offset);
+
+  const nextYear = date.getFullYear();
+  const nextMonth = date.getMonth() + 1;
+
+  return formatPeriod(nextYear, nextMonth);
+}
+
+/**
+ * Gets the last N periods including the current one
+ * @param current - Current period in YYYY-MM format
+ * @param length - Number of periods to return
+ * @returns Array of period strings
+ */
+export function getLastPeriods(current: string, length: number): string[] {
+  const periods: string[] = [];
+
+  for (let offset = length - 1; offset >= 0; offset -= 1) {
+    periods.push(addMonthsToPeriod(current, -offset));
+  }
+
+  return periods;
+}
+
+// ============================================================================
+// PERIOD COMPARISON & RANGES
+// ============================================================================
+
+/**
+ * Compares two periods
+ * @param a - First period
+ * @param b - Second period
+ * @returns -1 if a < b, 0 if equal, 1 if a > b
+ */
+export function comparePeriods(a: string, b: string): number {
+  if (a === b) return 0;
+  return a < b ? -1 : 1;
+}
+
+/**
+ * Builds a range of periods between start and end (inclusive)
+ * @param start - Start period
+ * @param end - End period
+ * @returns Array of period strings
+ */
+export function buildPeriodRange(start: string, end: string): string[] {
+  const [startKey, endKey] =
+    comparePeriods(start, end) <= 0 ? [start, end] : [end, start];
+
+  const startParts = parsePeriod(startKey);
+  const endParts = parsePeriod(endKey);
+
+  const items: string[] = [];
+  let currentYear = startParts.year;
+  let currentMonth = startParts.month;
+
+  while (
+    currentYear < endParts.year ||
+    (currentYear === endParts.year && currentMonth <= endParts.month)
+  ) {
+    items.push(formatPeriod(currentYear, currentMonth));
+
+    if (currentYear === endParts.year && currentMonth === endParts.month) {
+      break;
+    }
+
+    currentMonth += 1;
+    if (currentMonth > 12) {
+      currentMonth = 1;
+      currentYear += 1;
+    }
+  }
+
+  return items;
+}
+
+// ============================================================================
+// URL PARAM HANDLING (mes-ano format for Portuguese URLs)
+// ============================================================================
+
+const MONTH_MAP = new Map(MONTH_NAMES.map((name, index) => [name, index]));
+
+const normalize = (value: string | null | undefined) =>
+  (value ?? "").trim().toLowerCase();
+
+export type ParsedPeriod = {
+  period: string;
+  monthName: string;
+  year: number;
+};
+
+/**
+ * Parses URL param in "mes-ano" format (e.g., "novembro-2025")
+ * @param periodParam - URL parameter string
+ * @param referenceDate - Fallback date if param is invalid
+ * @returns Parsed period object
+ */
+export function parsePeriodParam(
+  periodParam: string | null | undefined,
+  referenceDate = new Date()
+): ParsedPeriod {
+  const fallbackMonthIndex = referenceDate.getMonth();
+  const fallbackYear = referenceDate.getFullYear();
+  const fallbackPeriod = formatPeriod(fallbackYear, fallbackMonthIndex + 1);
+
+  if (!periodParam) {
+    const monthName = MONTH_NAMES[fallbackMonthIndex];
+    return { period: fallbackPeriod, monthName, year: fallbackYear };
+  }
+
+  const [rawMonth, rawYear] = periodParam.split("-");
+  const normalizedMonth = normalize(rawMonth);
+  const monthIndex = MONTH_MAP.get(normalizedMonth);
+  const parsedYear = Number.parseInt(rawYear ?? "", 10);
+
+  if (monthIndex === undefined || Number.isNaN(parsedYear)) {
+    const monthName = MONTH_NAMES[fallbackMonthIndex];
+    return { period: fallbackPeriod, monthName, year: fallbackYear };
+  }
+
+  const monthName = MONTH_NAMES[monthIndex];
+  return {
+    period: formatPeriod(parsedYear, monthIndex + 1),
+    monthName,
+    year: parsedYear,
+  };
+}
+
+/**
+ * Formats month name and year to URL param format
+ * @param monthName - Month name in Portuguese
+ * @param year - Year number
+ * @returns URL param string in "mes-ano" format
+ */
+export function formatPeriodParam(monthName: string, year: number): string {
+  return `${normalize(monthName)}-${year}`;
+}
+
+/**
+ * Converts period from YYYY-MM format to URL param format
+ * @example
+ * formatPeriodForUrl("2025-11") // "novembro-2025"
+ * formatPeriodForUrl("2025-01") // "janeiro-2025"
+ */
+export function formatPeriodForUrl(period: string): string {
+  const [yearStr, monthStr] = period.split("-");
+  const year = Number.parseInt(yearStr ?? "", 10);
+  const monthIndex = Number.parseInt(monthStr ?? "", 10) - 1;
+
+  if (
+    Number.isNaN(year) ||
+    Number.isNaN(monthIndex) ||
+    monthIndex < 0 ||
+    monthIndex > 11
+  ) {
+    return period;
+  }
+
+  const monthName = MONTH_NAMES[monthIndex] ?? "";
+  return formatPeriodParam(monthName, year);
+}
+
+// ============================================================================
+// DISPLAY FORMATTING
+// ============================================================================
+
+function capitalize(value: string): string {
+  return value.length > 0
+    ? value[0]?.toUpperCase().concat(value.slice(1))
+    : value;
+}
+
+/**
+ * Formats period for display in Portuguese
+ * @example
+ * displayPeriod("2025-11") // "Novembro de 2025"
+ */
+export function displayPeriod(period: string): string {
+  const { year, month } = parsePeriod(period);
+  const monthName = MONTH_NAMES[month - 1] ?? "";
+  return `${capitalize(monthName)} de ${year}`;
+}
+
+/**
+ * Alias for displayPeriod - formats period for display
+ * @example
+ * formatMonthLabel("2024-01") // "Janeiro de 2024"
+ */
+export function formatMonthLabel(period: string): string {
+  return displayPeriod(period);
+}
+
+// ============================================================================
+// DATE DERIVATION
+// ============================================================================
+
+/**
+ * Derives a period (YYYY-MM) from a date string or current date
+ * @example
+ * derivePeriodFromDate("2024-01-15") // "2024-01"
+ * derivePeriodFromDate() // current period
+ */
+export function derivePeriodFromDate(value?: string | null): string {
+  const date = value ? new Date(value) : new Date();
+  if (Number.isNaN(date.getTime())) {
+    return getCurrentPeriod();
+  }
+  return formatPeriod(date.getFullYear(), date.getMonth() + 1);
+}
+
+// ============================================================================
+// SELECT OPTIONS GENERATION
+// ============================================================================
+
+export type SelectOption = {
+  value: string;
+  label: string;
+};
+
+/**
+ * Creates month options for a select dropdown, centered around current month
+ * @param currentValue - Current period value to ensure it's included in options
+ * @param offsetRange - Number of months before/after current month (default: 3)
+ * @returns Array of select options with formatted labels
+ */
+export function createMonthOptions(
+  currentValue?: string,
+  offsetRange: number = 3
+): SelectOption[] {
+  const now = new Date();
+  const options: SelectOption[] = [];
+
+  for (let offset = -offsetRange; offset <= offsetRange; offset += 1) {
+    const date = new Date(now.getFullYear(), now.getMonth() + offset, 1);
+    const value = formatPeriod(date.getFullYear(), date.getMonth() + 1);
+    options.push({ value, label: displayPeriod(value) });
+  }
+
+  // Include current value if not already in options
+  if (currentValue && !options.some((option) => option.value === currentValue)) {
+    options.push({
+      value: currentValue,
+      label: displayPeriod(currentValue),
+    });
+  }
+
+  return options.sort((a, b) => a.value.localeCompare(b.value));
+}
diff --git a/lib/utils/string.ts b/lib/utils/string.ts
new file mode 100644
index 0000000..cd9578d
--- /dev/null
+++ b/lib/utils/string.ts
@@ -0,0 +1,43 @@
+/**
+ * Utility functions for string normalization and manipulation
+ */
+
+/**
+ * Normalizes optional string - trims and returns null if empty
+ * @param value - String to normalize
+ * @returns Trimmed string or null if empty
+ */
+export function normalizeOptionalString(
+  value: string | null | undefined
+): string | null {
+  const trimmed = value?.trim() ?? "";
+  return trimmed.length > 0 ? trimmed : null;
+}
+
+/**
+ * Normalizes file path by extracting filename
+ * @param path - File path to normalize
+ * @returns Filename without path
+ */
+export function normalizeFilePath(path: string | null | undefined): string {
+  return path?.split("/").filter(Boolean).pop() ?? "";
+}
+
+/**
+ * Normalizes whitespace in string (replaces multiple spaces with single space)
+ * @param value - String to normalize
+ * @returns String with normalized whitespace
+ */
+export function normalizeWhitespace(value: string): string {
+  return value.replace(/\s+/g, " ").trim();
+}
+
+/**
+ * Normalizes icon input - trims and returns null if empty
+ * @param icon - Icon string to normalize
+ * @returns Trimmed icon string or null
+ */
+export function normalizeIconInput(icon?: string | null): string | null {
+  const trimmed = icon?.trim() ?? "";
+  return trimmed.length > 0 ? trimmed : null;
+}
diff --git a/lib/utils/ui.ts b/lib/utils/ui.ts
new file mode 100644
index 0000000..a79194f
--- /dev/null
+++ b/lib/utils/ui.ts
@@ -0,0 +1,17 @@
+/**
+ * UI utilities - Functions for UI manipulation and styling
+ *
+ * This module contains UI-related utilities, primarily for className manipulation.
+ */
+
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+/**
+ * Merges Tailwind CSS classes with proper override handling
+ * @param inputs - Class values to merge
+ * @returns Merged className string
+ */
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
diff --git a/next.config.ts b/next.config.ts
new file mode 100644
index 0000000..f1b384a
--- /dev/null
+++ b/next.config.ts
@@ -0,0 +1,21 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  // Output standalone para Docker (gera build otimizado com apenas deps necessárias)
+  output: "standalone",
+  experimental: {
+    turbopackFileSystemCacheForDev: true,
+  },
+  reactCompiler: true,
+  typescript: {
+    ignoreBuildErrors: true,
+  },
+  images: {
+    remotePatterns: [new URL("https://lh3.googleusercontent.com/**")],
+  },
+  devIndicators: {
+    position: "bottom-right",
+  },
+};
+
+export default nextConfig;
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..45e5b33
--- /dev/null
+++ b/package.json
@@ -0,0 +1,89 @@
+{
+  "name": "opensheets",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev --turbopack",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "env:setup": "bash scripts/setup-env.sh",
+    "db:generate": "drizzle-kit generate",
+    "db:migrate": "drizzle-kit migrate",
+    "db:push": "drizzle-kit push",
+    "db:studio": "drizzle-kit studio",
+    "docker:up": "docker compose up --build",
+    "docker:up:detached": "docker compose up --build -d",
+    "docker:down": "docker compose down",
+    "docker:down:volumes": "docker compose down -v",
+    "docker:logs": "docker compose logs -f",
+    "docker:logs:app": "docker compose logs -f app",
+    "docker:logs:db": "docker compose logs -f db",
+    "docker:restart": "docker compose restart",
+    "docker:rebuild": "docker compose up --build --force-recreate"
+  },
+  "dependencies": {
+    "@ai-sdk/anthropic": "^2.0.44",
+    "@ai-sdk/google": "^2.0.31",
+    "@ai-sdk/openai": "^2.0.66",
+    "@dnd-kit/core": "6.3.1",
+    "@dnd-kit/modifiers": "9.0.0",
+    "@dnd-kit/sortable": "10.0.0",
+    "@dnd-kit/utilities": "3.2.2",
+    "@openrouter/ai-sdk-provider": "^1.2.2",
+    "@radix-ui/react-alert-dialog": "1.1.15",
+    "@radix-ui/react-avatar": "1.1.11",
+    "@radix-ui/react-checkbox": "1.3.3",
+    "@radix-ui/react-collapsible": "1.1.12",
+    "@radix-ui/react-dialog": "1.1.15",
+    "@radix-ui/react-dropdown-menu": "2.1.16",
+    "@radix-ui/react-hover-card": "^1.1.15",
+    "@radix-ui/react-label": "2.1.8",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-progress": "1.1.8",
+    "@radix-ui/react-radio-group": "^1.3.8",
+    "@radix-ui/react-select": "2.2.6",
+    "@radix-ui/react-separator": "1.1.8",
+    "@radix-ui/react-slot": "1.2.4",
+    "@radix-ui/react-switch": "1.2.6",
+    "@radix-ui/react-tabs": "1.1.13",
+    "@radix-ui/react-toggle": "1.1.10",
+    "@radix-ui/react-toggle-group": "1.1.11",
+    "@radix-ui/react-tooltip": "1.2.8",
+    "@remixicon/react": "4.7.0",
+    "@tanstack/react-table": "8.21.3",
+    "ai": "^5.0.93",
+    "better-auth": "1.3.34",
+    "class-variance-authority": "0.7.1",
+    "clsx": "2.1.1",
+    "cmdk": "^1.1.1",
+    "date-fns": "^4.1.0",
+    "drizzle-orm": "0.44.7",
+    "lucide-react": "0.553.0",
+    "motion": "^12.23.24",
+    "next": "16.0.3",
+    "next-themes": "0.4.6",
+    "pg": "8.16.3",
+    "react": "19.2.0",
+    "react-day-picker": "^9.11.1",
+    "react-dom": "19.2.0",
+    "recharts": "3.4.1",
+    "resend": "^6.4.2",
+    "sonner": "2.0.7",
+    "tailwind-merge": "3.4.0",
+    "vaul": "1.1.2",
+    "zod": "4.1.12"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "4.1.17",
+    "@types/node": "24.10.1",
+    "@types/react": "19.2.4",
+    "@types/react-dom": "19.2.3",
+    "drizzle-kit": "0.31.7",
+    "eslint": "9.39.1",
+    "eslint-config-next": "16.0.3",
+    "tailwindcss": "4.1.17",
+    "tsx": "4.20.6",
+    "typescript": "5.9.3"
+  }
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
new file mode 100644
index 0000000..25642ef
--- /dev/null
+++ b/pnpm-lock.yaml
@@ -0,0 +1,7628 @@
+lockfileVersion: '9.0'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
+importers:
+
+  .:
+    dependencies:
+      '@ai-sdk/anthropic':
+        specifier: ^2.0.44
+        version: 2.0.44(zod@4.1.12)
+      '@ai-sdk/google':
+        specifier: ^2.0.31
+        version: 2.0.31(zod@4.1.12)
+      '@ai-sdk/openai':
+        specifier: ^2.0.66
+        version: 2.0.66(zod@4.1.12)
+      '@dnd-kit/core':
+        specifier: 6.3.1
+        version: 6.3.1(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@dnd-kit/modifiers':
+        specifier: 9.0.0
+        version: 9.0.0(@dnd-kit/core@6.3.1(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(react@19.2.0)
+      '@dnd-kit/sortable':
+        specifier: 10.0.0
+        version: 10.0.0(@dnd-kit/core@6.3.1(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(react@19.2.0)
+      '@dnd-kit/utilities':
+        specifier: 3.2.2
+        version: 3.2.2(react@19.2.0)
+      '@openrouter/ai-sdk-provider':
+        specifier: ^1.2.2
+        version: 1.2.2(ai@5.0.93(zod@4.1.12))(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(zod@4.1.12)
+      '@radix-ui/react-alert-dialog':
+        specifier: 1.1.15
+        version: 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-avatar':
+        specifier: 1.1.11
+        version: 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-checkbox':
+        specifier: 1.3.3
+        version: 1.3.3(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-collapsible':
+        specifier: 1.1.12
+        version: 1.1.12(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-dialog':
+        specifier: 1.1.15
+        version: 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-dropdown-menu':
+        specifier: 2.1.16
+        version: 2.1.16(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-hover-card':
+        specifier: ^1.1.15
+        version: 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-label':
+        specifier: 2.1.8
+        version: 2.1.8(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-popover':
+        specifier: ^1.1.15
+        version: 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-progress':
+        specifier: 1.1.8
+        version: 1.1.8(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-radio-group':
+        specifier: ^1.3.8
+        version: 1.3.8(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-select':
+        specifier: 2.2.6
+        version: 2.2.6(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-separator':
+        specifier: 1.1.8
+        version: 1.1.8(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-slot':
+        specifier: 1.2.4
+        version: 1.2.4(@types/react@19.2.4)(react@19.2.0)
+      '@radix-ui/react-switch':
+        specifier: 1.2.6
+        version: 1.2.6(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-tabs':
+        specifier: 1.1.13
+        version: 1.1.13(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-toggle':
+        specifier: 1.1.10
+        version: 1.1.10(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-toggle-group':
+        specifier: 1.1.11
+        version: 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-tooltip':
+        specifier: 1.2.8
+        version: 1.2.8(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@remixicon/react':
+        specifier: 4.7.0
+        version: 4.7.0(react@19.2.0)
+      '@tanstack/react-table':
+        specifier: 8.21.3
+        version: 8.21.3(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      ai:
+        specifier: ^5.0.93
+        version: 5.0.93(zod@4.1.12)
+      better-auth:
+        specifier: 1.3.34
+        version: 1.3.34(next@16.0.3(@babel/core@7.28.5)(@opentelemetry/api@1.9.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      class-variance-authority:
+        specifier: 0.7.1
+        version: 0.7.1
+      clsx:
+        specifier: 2.1.1
+        version: 2.1.1
+      cmdk:
+        specifier: ^1.1.1
+        version: 1.1.1(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      date-fns:
+        specifier: ^4.1.0
+        version: 4.1.0
+      drizzle-orm:
+        specifier: 0.44.7
+        version: 0.44.7(@opentelemetry/api@1.9.0)(better-sqlite3@12.4.1)(kysely@0.28.8)(pg@8.16.3)
+      lucide-react:
+        specifier: 0.553.0
+        version: 0.553.0(react@19.2.0)
+      motion:
+        specifier: ^12.23.24
+        version: 12.23.24(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      next:
+        specifier: 16.0.3
+        version: 16.0.3(@babel/core@7.28.5)(@opentelemetry/api@1.9.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      next-themes:
+        specifier: 0.4.6
+        version: 0.4.6(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      pg:
+        specifier: 8.16.3
+        version: 8.16.3
+      react:
+        specifier: 19.2.0
+        version: 19.2.0
+      react-day-picker:
+        specifier: ^9.11.1
+        version: 9.11.1(react@19.2.0)
+      react-dom:
+        specifier: 19.2.0
+        version: 19.2.0(react@19.2.0)
+      recharts:
+        specifier: 3.4.1
+        version: 3.4.1(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react-is@18.3.1)(react@19.2.0)(redux@5.0.1)
+      resend:
+        specifier: ^6.4.2
+        version: 6.4.2
+      sonner:
+        specifier: 2.0.7
+        version: 2.0.7(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      tailwind-merge:
+        specifier: 3.4.0
+        version: 3.4.0
+      vaul:
+        specifier: 1.1.2
+        version: 1.1.2(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      zod:
+        specifier: 4.1.12
+        version: 4.1.12
+    devDependencies:
+      '@tailwindcss/postcss':
+        specifier: 4.1.17
+        version: 4.1.17
+      '@types/node':
+        specifier: 24.10.1
+        version: 24.10.1
+      '@types/react':
+        specifier: 19.2.4
+        version: 19.2.4
+      '@types/react-dom':
+        specifier: 19.2.3
+        version: 19.2.3(@types/react@19.2.4)
+      drizzle-kit:
+        specifier: 0.31.7
+        version: 0.31.7
+      eslint:
+        specifier: 9.39.1
+        version: 9.39.1(jiti@2.6.1)
+      eslint-config-next:
+        specifier: 16.0.3
+        version: 16.0.3(@typescript-eslint/parser@8.46.3(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)
+      tailwindcss:
+        specifier: 4.1.17
+        version: 4.1.17
+      tsx:
+        specifier: 4.20.6
+        version: 4.20.6
+      typescript:
+        specifier: 5.9.3
+        version: 5.9.3
+
+packages:
+
+  '@ai-sdk/anthropic@2.0.44':
+    resolution: {integrity: sha512-o8TfNXRzO/KZkBrcx+CL9LQsPhx7PHyqzUGjza3TJaF9WxfH1S5UQLAmEw8F7lQoHNLU0IX03WT8o8R/4JbUxQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      zod: ^3.25.76 || ^4.1.8
+
+  '@ai-sdk/gateway@2.0.9':
+    resolution: {integrity: sha512-E6x4h5CPPPJ0za1r5HsLtHbeI+Tp3H+YFtcH8G3dSSPFE6w+PZINzB4NxLZmg1QqSeA5HTP3ZEzzsohp0o2GEw==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      zod: ^3.25.76 || ^4.1.8
+
+  '@ai-sdk/google@2.0.31':
+    resolution: {integrity: sha512-wOlUkrXHuL73sXPZd251+30BQ378zn2Zo8pW+Hq+8d9FmSJpZXOSK8cmYle1SE5ZWe/TS+eSj3eBCZ6AW+q2EA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      zod: ^3.25.76 || ^4.1.8
+
+  '@ai-sdk/openai@2.0.66':
+    resolution: {integrity: sha512-gDtkaawt1INhjQCcqK2mFaCS3e5wQvutni6+0+wkwzyoIyznSzehb7f0jQh8JcDbeO1yNCxnzPcI6BVPWkiR5Q==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      zod: ^3.25.76 || ^4.1.8
+
+  '@ai-sdk/provider-utils@3.0.17':
+    resolution: {integrity: sha512-TR3Gs4I3Tym4Ll+EPdzRdvo/rc8Js6c4nVhFLuvGLX/Y4V9ZcQMa/HTiYsHEgmYrf1zVi6Q145UEZUfleOwOjw==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      zod: ^3.25.76 || ^4.1.8
+
+  '@ai-sdk/provider@2.0.0':
+    resolution: {integrity: sha512-6o7Y2SeO9vFKB8lArHXehNuusnpddKPk7xqL7T2/b+OvXMRIXUO1rR4wcv1hAFUAT9avGZshty3Wlua/XA7TvA==}
+    engines: {node: '>=18'}
+
+  '@alloc/quick-lru@5.2.0':
+    resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
+    engines: {node: '>=10'}
+
+  '@babel/code-frame@7.27.1':
+    resolution: {integrity: sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/compat-data@7.28.5':
+    resolution: {integrity: sha512-6uFXyCayocRbqhZOB+6XcuZbkMNimwfVGFji8CTZnCzOHVGvDqzvitu1re2AU5LROliz7eQPhB8CpAMvnx9EjA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/core@7.28.5':
+    resolution: {integrity: sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/generator@7.28.5':
+    resolution: {integrity: sha512-3EwLFhZ38J4VyIP6WNtt2kUdW9dokXA9Cr4IVIFHuCpZ3H8/YFOl5JjZHisrn1fATPBmKKqXzDFvh9fUwHz6CQ==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-compilation-targets@7.27.2':
+    resolution: {integrity: sha512-2+1thGUUWWjLTYTHZWK1n8Yga0ijBz1XAhUXcKy81rd5g6yh7hGqMp45v7cadSbEHc9G3OTv45SyneRN3ps4DQ==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-globals@7.28.0':
+    resolution: {integrity: sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-module-imports@7.27.1':
+    resolution: {integrity: sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-module-transforms@7.28.3':
+    resolution: {integrity: sha512-gytXUbs8k2sXS9PnQptz5o0QnpLL51SwASIORY6XaBKF88nsOT0Zw9szLqlSGQDP/4TljBAD5y98p2U1fqkdsw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  '@babel/helper-string-parser@7.27.1':
+    resolution: {integrity: sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-validator-identifier@7.28.5':
+    resolution: {integrity: sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-validator-option@7.27.1':
+    resolution: {integrity: sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helpers@7.28.4':
+    resolution: {integrity: sha512-HFN59MmQXGHVyYadKLVumYsA9dBFun/ldYxipEjzA4196jpLZd8UjEEBLkbEkvfYreDqJhZxYAWFPtrfhNpj4w==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/parser@7.28.5':
+    resolution: {integrity: sha512-KKBU1VGYR7ORr3At5HAtUQ+TV3SzRCXmA/8OdDZiLDBIZxVyzXuztPjfLd3BV1PRAQGCMWWSHYhL0F8d5uHBDQ==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+
+  '@babel/template@7.27.2':
+    resolution: {integrity: sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/traverse@7.28.5':
+    resolution: {integrity: sha512-TCCj4t55U90khlYkVV/0TfkJkAkUg3jZFA3Neb7unZT8CPok7iiRfaX0F+WnqWqt7OxhOn0uBKXCw4lbL8W0aQ==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/types@7.28.5':
+    resolution: {integrity: sha512-qQ5m48eI/MFLQ5PxQj4PFaprjyCTLI37ElWMmNs0K8Lk3dVeOdNpB3ks8jc7yM5CDmVC73eMVk/trk3fgmrUpA==}
+    engines: {node: '>=6.9.0'}
+
+  '@better-auth/core@1.3.34':
+    resolution: {integrity: sha512-rt/Bgl0Xa8OQ2DUMKCZEJ8vL9kUw4NCJsBP9Sj9uRhbsK8NEMPiznUOFMkUY2FvrslvfKN7H/fivwyHz9c7HzQ==}
+    peerDependencies:
+      '@better-auth/utils': 0.3.0
+      '@better-fetch/fetch': 1.1.18
+      better-call: 1.0.19
+      jose: ^6.1.0
+      kysely: ^0.28.5
+      nanostores: ^1.0.1
+
+  '@better-auth/telemetry@1.3.34':
+    resolution: {integrity: sha512-aQZ3wN90YMqV49diWxAMe1k7s2qb55KCsedCZne5PlgCjU4s3YtnqyjC5FEpzw2KY8l8rvR7DMAsDl13NjObKA==}
+
+  '@better-auth/utils@0.3.0':
+    resolution: {integrity: sha512-W+Adw6ZA6mgvnSnhOki270rwJ42t4XzSK6YWGF//BbVXL6SwCLWfyzBc1lN2m/4RM28KubdBKQ4X5VMoLRNPQw==}
+
+  '@better-fetch/fetch@1.1.18':
+    resolution: {integrity: sha512-rEFOE1MYIsBmoMJtQbl32PGHHXuG2hDxvEd7rUHE0vCBoFQVSDqaVs9hkZEtHCxRoY+CljXKFCOuJ8uxqw1LcA==}
+
+  '@date-fns/tz@1.4.1':
+    resolution: {integrity: sha512-P5LUNhtbj6YfI3iJjw5EL9eUAG6OitD0W3fWQcpQjDRc/QIsL0tRNuO1PcDvPccWL1fSTXXdE1ds+l95DV/OFA==}
+
+  '@dnd-kit/accessibility@3.1.1':
+    resolution: {integrity: sha512-2P+YgaXF+gRsIihwwY1gCsQSYnu9Zyj2py8kY5fFvUM1qm2WA2u639R6YNVfU4GWr+ZM5mqEsfHZZLoRONbemw==}
+    peerDependencies:
+      react: '>=16.8.0'
+
+  '@dnd-kit/core@6.3.1':
+    resolution: {integrity: sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+
+  '@dnd-kit/modifiers@9.0.0':
+    resolution: {integrity: sha512-ybiLc66qRGuZoC20wdSSG6pDXFikui/dCNGthxv4Ndy8ylErY0N3KVxY2bgo7AWwIbxDmXDg3ylAFmnrjcbVvw==}
+    peerDependencies:
+      '@dnd-kit/core': ^6.3.0
+      react: '>=16.8.0'
+
+  '@dnd-kit/sortable@10.0.0':
+    resolution: {integrity: sha512-+xqhmIIzvAYMGfBYYnbKuNicfSsk4RksY2XdmJhT+HAC01nix6fHCztU68jooFiMUB01Ky3F0FyOvhG/BZrWkg==}
+    peerDependencies:
+      '@dnd-kit/core': ^6.3.0
+      react: '>=16.8.0'
+
+  '@dnd-kit/utilities@3.2.2':
+    resolution: {integrity: sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg==}
+    peerDependencies:
+      react: '>=16.8.0'
+
+  '@drizzle-team/brocli@0.10.2':
+    resolution: {integrity: sha512-z33Il7l5dKjUgGULTqBsQBQwckHh5AbIuxhdsIxDDiZAzBOrZO6q9ogcWC65kU382AfynTfgNumVcNIjuIua6w==}
+
+  '@emnapi/core@1.5.0':
+    resolution: {integrity: sha512-sbP8GzB1WDzacS8fgNPpHlp6C9VZe+SJP3F90W9rLemaQj2PzIuTEl1qDOYQf58YIpyjViI24y9aPWCjEzY2cg==}
+
+  '@emnapi/runtime@1.5.0':
+    resolution: {integrity: sha512-97/BJ3iXHww3djw6hYIfErCZFee7qCtrneuLa20UXFCOTCfBM2cvQHjWJ2EG0s0MtdNwInarqCTz35i4wWXHsQ==}
+
+  '@emnapi/wasi-threads@1.1.0':
+    resolution: {integrity: sha512-WI0DdZ8xFSbgMjR1sFsKABJ/C5OnRrjT06JXbZKexJGrDuPTzZdDYfFlsgcCXCyf+suG5QU2e/y1Wo2V/OapLQ==}
+
+  '@esbuild-kit/core-utils@3.3.2':
+    resolution: {integrity: sha512-sPRAnw9CdSsRmEtnsl2WXWdyquogVpB3yZ3dgwJfe8zrOzTsV7cJvmwrKVa+0ma5BoiGJ+BoqkMvawbayKUsqQ==}
+    deprecated: 'Merged into tsx: https://tsx.is'
+
+  '@esbuild-kit/esm-loader@2.6.5':
+    resolution: {integrity: sha512-FxEMIkJKnodyA1OaCUoEvbYRkoZlLZ4d/eXFu9Fh8CbBBgP5EmZxrfTRyN0qpXZ4vOvqnE5YdRdcrmUUXuU+dA==}
+    deprecated: 'Merged into tsx: https://tsx.is'
+
+  '@esbuild/aix-ppc64@0.25.10':
+    resolution: {integrity: sha512-0NFWnA+7l41irNuaSVlLfgNT12caWJVLzp5eAVhZ0z1qpxbockccEt3s+149rE64VUI3Ml2zt8Nv5JVc4QXTsw==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [aix]
+
+  '@esbuild/android-arm64@0.18.20':
+    resolution: {integrity: sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [android]
+
+  '@esbuild/android-arm64@0.25.10':
+    resolution: {integrity: sha512-LSQa7eDahypv/VO6WKohZGPSJDq5OVOo3UoFR1E4t4Gj1W7zEQMUhI+lo81H+DtB+kP+tDgBp+M4oNCwp6kffg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [android]
+
+  '@esbuild/android-arm@0.18.20':
+    resolution: {integrity: sha512-fyi7TDI/ijKKNZTUJAQqiG5T7YjJXgnzkURqmGj13C6dCqckZBLdl4h7bkhHt/t0WP+zO9/zwroDvANaOqO5Sw==}
+    engines: {node: '>=12'}
+    cpu: [arm]
+    os: [android]
+
+  '@esbuild/android-arm@0.25.10':
+    resolution: {integrity: sha512-dQAxF1dW1C3zpeCDc5KqIYuZ1tgAdRXNoZP7vkBIRtKZPYe2xVr/d3SkirklCHudW1B45tGiUlz2pUWDfbDD4w==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [android]
+
+  '@esbuild/android-x64@0.18.20':
+    resolution: {integrity: sha512-8GDdlePJA8D6zlZYJV/jnrRAi6rOiNaCC/JclcXpB+KIuvfBN4owLtgzY2bsxnx666XjJx2kDPUmnTtR8qKQUg==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [android]
+
+  '@esbuild/android-x64@0.25.10':
+    resolution: {integrity: sha512-MiC9CWdPrfhibcXwr39p9ha1x0lZJ9KaVfvzA0Wxwz9ETX4v5CHfF09bx935nHlhi+MxhA63dKRRQLiVgSUtEg==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [android]
+
+  '@esbuild/darwin-arm64@0.18.20':
+    resolution: {integrity: sha512-bxRHW5kHU38zS2lPTPOyuyTm+S+eobPUnTNkdJEfAddYgEcll4xkT8DB9d2008DtTbl7uJag2HuE5NZAZgnNEA==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@esbuild/darwin-arm64@0.25.10':
+    resolution: {integrity: sha512-JC74bdXcQEpW9KkV326WpZZjLguSZ3DfS8wrrvPMHgQOIEIG/sPXEN/V8IssoJhbefLRcRqw6RQH2NnpdprtMA==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@esbuild/darwin-x64@0.18.20':
+    resolution: {integrity: sha512-pc5gxlMDxzm513qPGbCbDukOdsGtKhfxD1zJKXjCCcU7ju50O7MeAZ8c4krSJcOIJGFR+qx21yMMVYwiQvyTyQ==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@esbuild/darwin-x64@0.25.10':
+    resolution: {integrity: sha512-tguWg1olF6DGqzws97pKZ8G2L7Ig1vjDmGTwcTuYHbuU6TTjJe5FXbgs5C1BBzHbJ2bo1m3WkQDbWO2PvamRcg==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@esbuild/freebsd-arm64@0.18.20':
+    resolution: {integrity: sha512-yqDQHy4QHevpMAaxhhIwYPMv1NECwOvIpGCZkECn8w2WFHXjEwrBn3CeNIYsibZ/iZEUemj++M26W3cNR5h+Tw==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [freebsd]
+
+  '@esbuild/freebsd-arm64@0.25.10':
+    resolution: {integrity: sha512-3ZioSQSg1HT2N05YxeJWYR+Libe3bREVSdWhEEgExWaDtyFbbXWb49QgPvFH8u03vUPX10JhJPcz7s9t9+boWg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [freebsd]
+
+  '@esbuild/freebsd-x64@0.18.20':
+    resolution: {integrity: sha512-tgWRPPuQsd3RmBZwarGVHZQvtzfEBOreNuxEMKFcd5DaDn2PbBxfwLcj4+aenoh7ctXcbXmOQIn8HI6mCSw5MQ==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@esbuild/freebsd-x64@0.25.10':
+    resolution: {integrity: sha512-LLgJfHJk014Aa4anGDbh8bmI5Lk+QidDmGzuC2D+vP7mv/GeSN+H39zOf7pN5N8p059FcOfs2bVlrRr4SK9WxA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@esbuild/linux-arm64@0.18.20':
+    resolution: {integrity: sha512-2YbscF+UL7SQAVIpnWvYwM+3LskyDmPhe31pE7/aoTMFKKzIc9lLbyGUpmmb8a8AixOL61sQ/mFh3jEjHYFvdA==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@esbuild/linux-arm64@0.25.10':
+    resolution: {integrity: sha512-5luJWN6YKBsawd5f9i4+c+geYiVEw20FVW5x0v1kEMWNq8UctFjDiMATBxLvmmHA4bf7F6hTRaJgtghFr9iziQ==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@esbuild/linux-arm@0.18.20':
+    resolution: {integrity: sha512-/5bHkMWnq1EgKr1V+Ybz3s1hWXok7mDFUMQ4cG10AfW3wL02PSZi5kFpYKrptDsgb2WAJIvRcDm+qIvXf/apvg==}
+    engines: {node: '>=12'}
+    cpu: [arm]
+    os: [linux]
+
+  '@esbuild/linux-arm@0.25.10':
+    resolution: {integrity: sha512-oR31GtBTFYCqEBALI9r6WxoU/ZofZl962pouZRTEYECvNF/dtXKku8YXcJkhgK/beU+zedXfIzHijSRapJY3vg==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [linux]
+
+  '@esbuild/linux-ia32@0.18.20':
+    resolution: {integrity: sha512-P4etWwq6IsReT0E1KHU40bOnzMHoH73aXp96Fs8TIT6z9Hu8G6+0SHSw9i2isWrD2nbx2qo5yUqACgdfVGx7TA==}
+    engines: {node: '>=12'}
+    cpu: [ia32]
+    os: [linux]
+
+  '@esbuild/linux-ia32@0.25.10':
+    resolution: {integrity: sha512-NrSCx2Kim3EnnWgS4Txn0QGt0Xipoumb6z6sUtl5bOEZIVKhzfyp/Lyw4C1DIYvzeW/5mWYPBFJU3a/8Yr75DQ==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [linux]
+
+  '@esbuild/linux-loong64@0.18.20':
+    resolution: {integrity: sha512-nXW8nqBTrOpDLPgPY9uV+/1DjxoQ7DoB2N8eocyq8I9XuqJ7BiAMDMf9n1xZM9TgW0J8zrquIb/A7s3BJv7rjg==}
+    engines: {node: '>=12'}
+    cpu: [loong64]
+    os: [linux]
+
+  '@esbuild/linux-loong64@0.25.10':
+    resolution: {integrity: sha512-xoSphrd4AZda8+rUDDfD9J6FUMjrkTz8itpTITM4/xgerAZZcFW7Dv+sun7333IfKxGG8gAq+3NbfEMJfiY+Eg==}
+    engines: {node: '>=18'}
+    cpu: [loong64]
+    os: [linux]
+
+  '@esbuild/linux-mips64el@0.18.20':
+    resolution: {integrity: sha512-d5NeaXZcHp8PzYy5VnXV3VSd2D328Zb+9dEq5HE6bw6+N86JVPExrA6O68OPwobntbNJ0pzCpUFZTo3w0GyetQ==}
+    engines: {node: '>=12'}
+    cpu: [mips64el]
+    os: [linux]
+
+  '@esbuild/linux-mips64el@0.25.10':
+    resolution: {integrity: sha512-ab6eiuCwoMmYDyTnyptoKkVS3k8fy/1Uvq7Dj5czXI6DF2GqD2ToInBI0SHOp5/X1BdZ26RKc5+qjQNGRBelRA==}
+    engines: {node: '>=18'}
+    cpu: [mips64el]
+    os: [linux]
+
+  '@esbuild/linux-ppc64@0.18.20':
+    resolution: {integrity: sha512-WHPyeScRNcmANnLQkq6AfyXRFr5D6N2sKgkFo2FqguP44Nw2eyDlbTdZwd9GYk98DZG9QItIiTlFLHJHjxP3FA==}
+    engines: {node: '>=12'}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@esbuild/linux-ppc64@0.25.10':
+    resolution: {integrity: sha512-NLinzzOgZQsGpsTkEbdJTCanwA5/wozN9dSgEl12haXJBzMTpssebuXR42bthOF3z7zXFWH1AmvWunUCkBE4EA==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@esbuild/linux-riscv64@0.18.20':
+    resolution: {integrity: sha512-WSxo6h5ecI5XH34KC7w5veNnKkju3zBRLEQNY7mv5mtBmrP/MjNBCAlsM2u5hDBlS3NGcTQpoBvRzqBcRtpq1A==}
+    engines: {node: '>=12'}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@esbuild/linux-riscv64@0.25.10':
+    resolution: {integrity: sha512-FE557XdZDrtX8NMIeA8LBJX3dC2M8VGXwfrQWU7LB5SLOajfJIxmSdyL/gU1m64Zs9CBKvm4UAuBp5aJ8OgnrA==}
+    engines: {node: '>=18'}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@esbuild/linux-s390x@0.18.20':
+    resolution: {integrity: sha512-+8231GMs3mAEth6Ja1iK0a1sQ3ohfcpzpRLH8uuc5/KVDFneH6jtAJLFGafpzpMRO6DzJ6AvXKze9LfFMrIHVQ==}
+    engines: {node: '>=12'}
+    cpu: [s390x]
+    os: [linux]
+
+  '@esbuild/linux-s390x@0.25.10':
+    resolution: {integrity: sha512-3BBSbgzuB9ajLoVZk0mGu+EHlBwkusRmeNYdqmznmMc9zGASFjSsxgkNsqmXugpPk00gJ0JNKh/97nxmjctdew==}
+    engines: {node: '>=18'}
+    cpu: [s390x]
+    os: [linux]
+
+  '@esbuild/linux-x64@0.18.20':
+    resolution: {integrity: sha512-UYqiqemphJcNsFEskc73jQ7B9jgwjWrSayxawS6UVFZGWrAAtkzjxSqnoclCXxWtfwLdzU+vTpcNYhpn43uP1w==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [linux]
+
+  '@esbuild/linux-x64@0.25.10':
+    resolution: {integrity: sha512-QSX81KhFoZGwenVyPoberggdW1nrQZSvfVDAIUXr3WqLRZGZqWk/P4T8p2SP+de2Sr5HPcvjhcJzEiulKgnxtA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [linux]
+
+  '@esbuild/netbsd-arm64@0.25.10':
+    resolution: {integrity: sha512-AKQM3gfYfSW8XRk8DdMCzaLUFB15dTrZfnX8WXQoOUpUBQ+NaAFCP1kPS/ykbbGYz7rxn0WS48/81l9hFl3u4A==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [netbsd]
+
+  '@esbuild/netbsd-x64@0.18.20':
+    resolution: {integrity: sha512-iO1c++VP6xUBUmltHZoMtCUdPlnPGdBom6IrO4gyKPFFVBKioIImVooR5I83nTew5UOYrk3gIJhbZh8X44y06A==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [netbsd]
+
+  '@esbuild/netbsd-x64@0.25.10':
+    resolution: {integrity: sha512-7RTytDPGU6fek/hWuN9qQpeGPBZFfB4zZgcz2VK2Z5VpdUxEI8JKYsg3JfO0n/Z1E/6l05n0unDCNc4HnhQGig==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [netbsd]
+
+  '@esbuild/openbsd-arm64@0.25.10':
+    resolution: {integrity: sha512-5Se0VM9Wtq797YFn+dLimf2Zx6McttsH2olUBsDml+lm0GOCRVebRWUvDtkY4BWYv/3NgzS8b/UM3jQNh5hYyw==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openbsd]
+
+  '@esbuild/openbsd-x64@0.18.20':
+    resolution: {integrity: sha512-e5e4YSsuQfX4cxcygw/UCPIEP6wbIL+se3sxPdCiMbFLBWu0eiZOJ7WoD+ptCLrmjZBK1Wk7I6D/I3NglUGOxg==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [openbsd]
+
+  '@esbuild/openbsd-x64@0.25.10':
+    resolution: {integrity: sha512-XkA4frq1TLj4bEMB+2HnI0+4RnjbuGZfet2gs/LNs5Hc7D89ZQBHQ0gL2ND6Lzu1+QVkjp3x1gIcPKzRNP8bXw==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [openbsd]
+
+  '@esbuild/openharmony-arm64@0.25.10':
+    resolution: {integrity: sha512-AVTSBhTX8Y/Fz6OmIVBip9tJzZEUcY8WLh7I59+upa5/GPhh2/aM6bvOMQySspnCCHvFi79kMtdJS1w0DXAeag==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@esbuild/sunos-x64@0.18.20':
+    resolution: {integrity: sha512-kDbFRFp0YpTQVVrqUd5FTYmWo45zGaXe0X8E1G/LKFC0v8x0vWrhOWSLITcCn63lmZIxfOMXtCfti/RxN/0wnQ==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [sunos]
+
+  '@esbuild/sunos-x64@0.25.10':
+    resolution: {integrity: sha512-fswk3XT0Uf2pGJmOpDB7yknqhVkJQkAQOcW/ccVOtfx05LkbWOaRAtn5SaqXypeKQra1QaEa841PgrSL9ubSPQ==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [sunos]
+
+  '@esbuild/win32-arm64@0.18.20':
+    resolution: {integrity: sha512-ddYFR6ItYgoaq4v4JmQQaAI5s7npztfV4Ag6NrhiaW0RrnOXqBkgwZLofVTlq1daVTQNhtI5oieTvkRPfZrePg==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@esbuild/win32-arm64@0.25.10':
+    resolution: {integrity: sha512-ah+9b59KDTSfpaCg6VdJoOQvKjI33nTaQr4UluQwW7aEwZQsbMCfTmfEO4VyewOxx4RaDT/xCy9ra2GPWmO7Kw==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@esbuild/win32-ia32@0.18.20':
+    resolution: {integrity: sha512-Wv7QBi3ID/rROT08SABTS7eV4hX26sVduqDOTe1MvGMjNd3EjOz4b7zeexIR62GTIEKrfJXKL9LFxTYgkyeu7g==}
+    engines: {node: '>=12'}
+    cpu: [ia32]
+    os: [win32]
+
+  '@esbuild/win32-ia32@0.25.10':
+    resolution: {integrity: sha512-QHPDbKkrGO8/cz9LKVnJU22HOi4pxZnZhhA2HYHez5Pz4JeffhDjf85E57Oyco163GnzNCVkZK0b/n4Y0UHcSw==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [win32]
+
+  '@esbuild/win32-x64@0.18.20':
+    resolution: {integrity: sha512-kTdfRcSiDfQca/y9QIkng02avJ+NCaQvrMejlsB3RRv5sE9rRoeBPISaZpKxHELzRxZyLvNts1P27W3wV+8geQ==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [win32]
+
+  '@esbuild/win32-x64@0.25.10':
+    resolution: {integrity: sha512-9KpxSVFCu0iK1owoez6aC/s/EdUQLDN3adTxGCqxMVhrPDj6bt5dbrHDXUuq+Bs2vATFBBrQS5vdQ/Ed2P+nbw==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [win32]
+
+  '@eslint-community/eslint-utils@4.9.0':
+    resolution: {integrity: sha512-ayVFHdtZ+hsq1t2Dy24wCmGXGe4q9Gu3smhLYALJrr473ZH27MsnSL+LKUlimp4BWJqMDMLmPpx/Q9R3OAlL4g==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
+
+  '@eslint-community/regexpp@4.12.1':
+    resolution: {integrity: sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==}
+    engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
+
+  '@eslint/config-array@0.21.1':
+    resolution: {integrity: sha512-aw1gNayWpdI/jSYVgzN5pL0cfzU02GT3NBpeT/DXbx1/1x7ZKxFPd9bwrzygx/qiwIQiJ1sw/zD8qY/kRvlGHA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/config-helpers@0.4.2':
+    resolution: {integrity: sha512-gBrxN88gOIf3R7ja5K9slwNayVcZgK6SOUORm2uBzTeIEfeVaIhOpCtTox3P6R7o2jLFwLFTLnC7kU/RGcYEgw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/core@0.17.0':
+    resolution: {integrity: sha512-yL/sLrpmtDaFEiUj1osRP4TI2MDz1AddJL+jZ7KSqvBuliN4xqYY54IfdN8qD8Toa6g1iloph1fxQNkjOxrrpQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/eslintrc@3.3.1':
+    resolution: {integrity: sha512-gtF186CXhIl1p4pJNGZw8Yc6RlshoePRvE0X91oPGb3vZ8pM3qOS9W9NGPat9LziaBV7XrJWGylNQXkGcnM3IQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/js@9.39.1':
+    resolution: {integrity: sha512-S26Stp4zCy88tH94QbBv3XCuzRQiZ9yXofEILmglYTh/Ug/a9/umqvgFtYBAo3Lp0nsI/5/qH1CCrbdK3AP1Tw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/object-schema@2.1.7':
+    resolution: {integrity: sha512-VtAOaymWVfZcmZbp6E2mympDIHvyjXs/12LqWYjVw6qjrfF+VK+fyG33kChz3nnK+SU5/NeHOqrTEHS8sXO3OA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/plugin-kit@0.4.1':
+    resolution: {integrity: sha512-43/qtrDUokr7LJqoF2c3+RInu/t4zfrpYdoSDfYyhg52rwLV6TnOvdG4fXm7IkSB3wErkcmJS9iEhjVtOSEjjA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@floating-ui/core@1.7.3':
+    resolution: {integrity: sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==}
+
+  '@floating-ui/dom@1.7.4':
+    resolution: {integrity: sha512-OOchDgh4F2CchOX94cRVqhvy7b3AFb+/rQXyswmzmGakRfkMgoWVjfnLWkRirfLEfuD4ysVW16eXzwt3jHIzKA==}
+
+  '@floating-ui/react-dom@2.1.6':
+    resolution: {integrity: sha512-4JX6rEatQEvlmgU80wZyq9RT96HZJa88q8hp0pBd+LrczeDI4o6uA2M+uvxngVHo4Ihr8uibXxH6+70zhAFrVw==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+
+  '@floating-ui/utils@0.2.10':
+    resolution: {integrity: sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==}
+
+  '@hexagon/base64@1.1.28':
+    resolution: {integrity: sha512-lhqDEAvWixy3bZ+UOYbPwUbBkwBq5C1LAJ/xPC8Oi+lL54oyakv/npbA0aU2hgCsx/1NUd4IBvV03+aUBWxerw==}
+
+  '@humanfs/core@0.19.1':
+    resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
+    engines: {node: '>=18.18.0'}
+
+  '@humanfs/node@0.16.7':
+    resolution: {integrity: sha512-/zUx+yOsIrG4Y43Eh2peDeKCxlRt/gET6aHfaKpuq267qXdYDFViVHfMaLyygZOnl0kGWxFIgsBy8QFuTLUXEQ==}
+    engines: {node: '>=18.18.0'}
+
+  '@humanwhocodes/module-importer@1.0.1':
+    resolution: {integrity: sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==}
+    engines: {node: '>=12.22'}
+
+  '@humanwhocodes/retry@0.4.3':
+    resolution: {integrity: sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==}
+    engines: {node: '>=18.18'}
+
+  '@img/colour@1.0.0':
+    resolution: {integrity: sha512-A5P/LfWGFSl6nsckYtjw9da+19jB8hkJ6ACTGcDfEJ0aE+l2n2El7dsVM7UVHZQ9s2lmYMWlrS21YLy2IR1LUw==}
+    engines: {node: '>=18'}
+
+  '@img/sharp-darwin-arm64@0.34.4':
+    resolution: {integrity: sha512-sitdlPzDVyvmINUdJle3TNHl+AG9QcwiAMsXmccqsCOMZNIdW2/7S26w0LyU8euiLVzFBL3dXPwVCq/ODnf2vA==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@img/sharp-darwin-x64@0.34.4':
+    resolution: {integrity: sha512-rZheupWIoa3+SOdF/IcUe1ah4ZDpKBGWcsPX6MT0lYniH9micvIU7HQkYTfrx5Xi8u+YqwLtxC/3vl8TQN6rMg==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [x64]
+    os: [darwin]
+
+  '@img/sharp-libvips-darwin-arm64@1.2.3':
+    resolution: {integrity: sha512-QzWAKo7kpHxbuHqUC28DZ9pIKpSi2ts2OJnoIGI26+HMgq92ZZ4vk8iJd4XsxN+tYfNJxzH6W62X5eTcsBymHw==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@img/sharp-libvips-darwin-x64@1.2.3':
+    resolution: {integrity: sha512-Ju+g2xn1E2AKO6YBhxjj+ACcsPQRHT0bhpglxcEf+3uyPY+/gL8veniKoo96335ZaPo03bdDXMv0t+BBFAbmRA==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@img/sharp-libvips-linux-arm64@1.2.3':
+    resolution: {integrity: sha512-I4RxkXU90cpufazhGPyVujYwfIm9Nk1QDEmiIsaPwdnm013F7RIceaCc87kAH+oUB1ezqEvC6ga4m7MSlqsJvQ==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@img/sharp-libvips-linux-arm@1.2.3':
+    resolution: {integrity: sha512-x1uE93lyP6wEwGvgAIV0gP6zmaL/a0tGzJs/BIDDG0zeBhMnuUPm7ptxGhUbcGs4okDJrk4nxgrmxpib9g6HpA==}
+    cpu: [arm]
+    os: [linux]
+
+  '@img/sharp-libvips-linux-ppc64@1.2.3':
+    resolution: {integrity: sha512-Y2T7IsQvJLMCBM+pmPbM3bKT/yYJvVtLJGfCs4Sp95SjvnFIjynbjzsa7dY1fRJX45FTSfDksbTp6AGWudiyCg==}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@img/sharp-libvips-linux-s390x@1.2.3':
+    resolution: {integrity: sha512-RgWrs/gVU7f+K7P+KeHFaBAJlNkD1nIZuVXdQv6S+fNA6syCcoboNjsV2Pou7zNlVdNQoQUpQTk8SWDHUA3y/w==}
+    cpu: [s390x]
+    os: [linux]
+
+  '@img/sharp-libvips-linux-x64@1.2.3':
+    resolution: {integrity: sha512-3JU7LmR85K6bBiRzSUc/Ff9JBVIFVvq6bomKE0e63UXGeRw2HPVEjoJke1Yx+iU4rL7/7kUjES4dZ/81Qjhyxg==}
+    cpu: [x64]
+    os: [linux]
+
+  '@img/sharp-libvips-linuxmusl-arm64@1.2.3':
+    resolution: {integrity: sha512-F9q83RZ8yaCwENw1GieztSfj5msz7GGykG/BA+MOUefvER69K/ubgFHNeSyUu64amHIYKGDs4sRCMzXVj8sEyw==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@img/sharp-libvips-linuxmusl-x64@1.2.3':
+    resolution: {integrity: sha512-U5PUY5jbc45ANM6tSJpsgqmBF/VsL6LnxJmIf11kB7J5DctHgqm0SkuXzVWtIY90GnJxKnC/JT251TDnk1fu/g==}
+    cpu: [x64]
+    os: [linux]
+
+  '@img/sharp-linux-arm64@0.34.4':
+    resolution: {integrity: sha512-YXU1F/mN/Wu786tl72CyJjP/Ngl8mGHN1hST4BGl+hiW5jhCnV2uRVTNOcaYPs73NeT/H8Upm3y9582JVuZHrQ==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm64]
+    os: [linux]
+
+  '@img/sharp-linux-arm@0.34.4':
+    resolution: {integrity: sha512-Xyam4mlqM0KkTHYVSuc6wXRmM7LGN0P12li03jAnZ3EJWZqj83+hi8Y9UxZUbxsgsK1qOEwg7O0Bc0LjqQVtxA==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@img/sharp-linux-ppc64@0.34.4':
+    resolution: {integrity: sha512-F4PDtF4Cy8L8hXA2p3TO6s4aDt93v+LKmpcYFLAVdkkD3hSxZzee0rh6/+94FpAynsuMpLX5h+LRsSG3rIciUQ==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@img/sharp-linux-s390x@0.34.4':
+    resolution: {integrity: sha512-qVrZKE9Bsnzy+myf7lFKvng6bQzhNUAYcVORq2P7bDlvmF6u2sCmK2KyEQEBdYk+u3T01pVsPrkj943T1aJAsw==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [s390x]
+    os: [linux]
+
+  '@img/sharp-linux-x64@0.34.4':
+    resolution: {integrity: sha512-ZfGtcp2xS51iG79c6Vhw9CWqQC8l2Ot8dygxoDoIQPTat/Ov3qAa8qpxSrtAEAJW+UjTXc4yxCjNfxm4h6Xm2A==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [x64]
+    os: [linux]
+
+  '@img/sharp-linuxmusl-arm64@0.34.4':
+    resolution: {integrity: sha512-8hDVvW9eu4yHWnjaOOR8kHVrew1iIX+MUgwxSuH2XyYeNRtLUe4VNioSqbNkB7ZYQJj9rUTT4PyRscyk2PXFKA==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm64]
+    os: [linux]
+
+  '@img/sharp-linuxmusl-x64@0.34.4':
+    resolution: {integrity: sha512-lU0aA5L8QTlfKjpDCEFOZsTYGn3AEiO6db8W5aQDxj0nQkVrZWmN3ZP9sYKWJdtq3PWPhUNlqehWyXpYDcI9Sg==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [x64]
+    os: [linux]
+
+  '@img/sharp-wasm32@0.34.4':
+    resolution: {integrity: sha512-33QL6ZO/qpRyG7woB/HUALz28WnTMI2W1jgX3Nu2bypqLIKx/QKMILLJzJjI+SIbvXdG9fUnmrxR7vbi1sTBeA==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [wasm32]
+
+  '@img/sharp-win32-arm64@0.34.4':
+    resolution: {integrity: sha512-2Q250do/5WXTwxW3zjsEuMSv5sUU4Tq9VThWKlU2EYLm4MB7ZeMwF+SFJutldYODXF6jzc6YEOC+VfX0SZQPqA==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm64]
+    os: [win32]
+
+  '@img/sharp-win32-ia32@0.34.4':
+    resolution: {integrity: sha512-3ZeLue5V82dT92CNL6rsal6I2weKw1cYu+rGKm8fOCCtJTR2gYeUfY3FqUnIJsMUPIH68oS5jmZ0NiJ508YpEw==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [ia32]
+    os: [win32]
+
+  '@img/sharp-win32-x64@0.34.4':
+    resolution: {integrity: sha512-xIyj4wpYs8J18sVN3mSQjwrw7fKUqRw+Z5rnHNCy5fYTxigBz81u5mOMPmFumwjcn8+ld1ppptMBCLic1nz6ig==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [x64]
+    os: [win32]
+
+  '@jridgewell/gen-mapping@0.3.13':
+    resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
+
+  '@jridgewell/remapping@2.3.5':
+    resolution: {integrity: sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==}
+
+  '@jridgewell/resolve-uri@3.1.2':
+    resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
+    engines: {node: '>=6.0.0'}
+
+  '@jridgewell/sourcemap-codec@1.5.5':
+    resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==}
+
+  '@jridgewell/trace-mapping@0.3.31':
+    resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
+
+  '@levischuck/tiny-cbor@0.2.11':
+    resolution: {integrity: sha512-llBRm4dT4Z89aRsm6u2oEZ8tfwL/2l6BwpZ7JcyieouniDECM5AqNgr/y08zalEIvW3RSK4upYyybDcmjXqAow==}
+
+  '@napi-rs/wasm-runtime@0.2.12':
+    resolution: {integrity: sha512-ZVWUcfwY4E/yPitQJl481FjFo3K22D6qF0DuFH6Y/nbnE11GY5uguDxZMGXPQ8WQ0128MXQD7TnfHyK4oWoIJQ==}
+
+  '@next/env@16.0.3':
+    resolution: {integrity: sha512-IqgtY5Vwsm14mm/nmQaRMmywCU+yyMIYfk3/MHZ2ZTJvwVbBn3usZnjMi1GacrMVzVcAxJShTCpZlPs26EdEjQ==}
+
+  '@next/eslint-plugin-next@16.0.3':
+    resolution: {integrity: sha512-6sPWmZetzFWMsz7Dhuxsdmbu3fK+/AxKRtj7OB0/3OZAI2MHB/v2FeYh271LZ9abvnM1WIwWc/5umYjx0jo5sQ==}
+
+  '@next/swc-darwin-arm64@16.0.3':
+    resolution: {integrity: sha512-MOnbd92+OByu0p6QBAzq1ahVWzF6nyfiH07dQDez4/Nku7G249NjxDVyEfVhz8WkLiOEU+KFVnqtgcsfP2nLXg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@next/swc-darwin-x64@16.0.3':
+    resolution: {integrity: sha512-i70C4O1VmbTivYdRlk+5lj9xRc2BlK3oUikt3yJeHT1unL4LsNtN7UiOhVanFdc7vDAgZn1tV/9mQwMkWOJvHg==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@next/swc-linux-arm64-gnu@16.0.3':
+    resolution: {integrity: sha512-O88gCZ95sScwD00mn/AtalyCoykhhlokxH/wi1huFK+rmiP5LAYVs/i2ruk7xST6SuXN4NI5y4Xf5vepb2jf6A==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@next/swc-linux-arm64-musl@16.0.3':
+    resolution: {integrity: sha512-CEErFt78S/zYXzFIiv18iQCbRbLgBluS8z1TNDQoyPi8/Jr5qhR3e8XHAIxVxPBjDbEMITprqELVc5KTfFj0gg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@next/swc-linux-x64-gnu@16.0.3':
+    resolution: {integrity: sha512-Tc3i+nwt6mQ+Dwzcri/WNDj56iWdycGVh5YwwklleClzPzz7UpfaMw1ci7bLl6GRYMXhWDBfe707EXNjKtiswQ==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@next/swc-linux-x64-musl@16.0.3':
+    resolution: {integrity: sha512-zTh03Z/5PBBPdTurgEtr6nY0vI9KR9Ifp/jZCcHlODzwVOEKcKRBtQIGrkc7izFgOMuXDEJBmirwpGqdM/ZixA==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@next/swc-win32-arm64-msvc@16.0.3':
+    resolution: {integrity: sha512-Jc1EHxtZovcJcg5zU43X3tuqzl/sS+CmLgjRP28ZT4vk869Ncm2NoF8qSTaL99gh6uOzgM99Shct06pSO6kA6g==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@next/swc-win32-x64-msvc@16.0.3':
+    resolution: {integrity: sha512-N7EJ6zbxgIYpI/sWNzpVKRMbfEGgsWuOIvzkML7wxAAZhPk1Msxuo/JDu1PKjWGrAoOLaZcIX5s+/pF5LIbBBg==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [win32]
+
+  '@noble/ciphers@2.0.1':
+    resolution: {integrity: sha512-xHK3XHPUW8DTAobU+G0XT+/w+JLM7/8k1UFdB5xg/zTFPnFCobhftzw8wl4Lw2aq/Rvir5pxfZV5fEazmeCJ2g==}
+    engines: {node: '>= 20.19.0'}
+
+  '@noble/hashes@2.0.1':
+    resolution: {integrity: sha512-XlOlEbQcE9fmuXxrVTXCTlG2nlRXa9Rj3rr5Ue/+tX+nmkgbX720YHh0VR3hBF9xDvwnb8D2shVGOwNx+ulArw==}
+    engines: {node: '>= 20.19.0'}
+
+  '@nodelib/fs.scandir@2.1.5':
+    resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
+    engines: {node: '>= 8'}
+
+  '@nodelib/fs.stat@2.0.5':
+    resolution: {integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==}
+    engines: {node: '>= 8'}
+
+  '@nodelib/fs.walk@1.2.8':
+    resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
+    engines: {node: '>= 8'}
+
+  '@nolyfill/is-core-module@1.0.39':
+    resolution: {integrity: sha512-nn5ozdjYQpUCZlWGuxcJY/KpxkWQs4DcbMCmKojjyrYDEAGy4Ce19NN4v5MduafTwJlbKc99UA8YhSVqq9yPZA==}
+    engines: {node: '>=12.4.0'}
+
+  '@openrouter/ai-sdk-provider@1.2.2':
+    resolution: {integrity: sha512-7D4ki80mX/UUAmuVmg5rFQQreUEDvDs4THide/Z4WPaKUdVs11MpKgQK2ReE0zP3fUcwL5g7DpSsbOUaVcSW7g==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      ai: ^5.0.0
+      zod: ^3.24.1 || ^v4
+
+  '@openrouter/sdk@0.1.11':
+    resolution: {integrity: sha512-OuPc8qqidL/PUM8+9WgrOfSR9+b6rKIWiezGcUJ54iPTdh+Gye5Qjut6hrLWlOCMZE7Z853gN90r1ft4iChj7Q==}
+    peerDependencies:
+      '@tanstack/react-query': ^5
+      react: ^18 || ^19
+      react-dom: ^18 || ^19
+    peerDependenciesMeta:
+      '@tanstack/react-query':
+        optional: true
+      react:
+        optional: true
+      react-dom:
+        optional: true
+
+  '@opentelemetry/api@1.9.0':
+    resolution: {integrity: sha512-3giAOQvZiH5F9bMlMiv8+GSPMeqg0dbaeo58/0SlA9sxSqZhnUtxzX9/2FzyhS9sWQf5S0GJE0AKBrFqjpeYcg==}
+    engines: {node: '>=8.0.0'}
+
+  '@peculiar/asn1-android@2.5.0':
+    resolution: {integrity: sha512-t8A83hgghWQkcneRsgGs2ebAlRe54ns88p7ouv8PW2tzF1nAW4yHcL4uZKrFpIU+uszIRzTkcCuie37gpkId0A==}
+
+  '@peculiar/asn1-cms@2.5.0':
+    resolution: {integrity: sha512-p0SjJ3TuuleIvjPM4aYfvYw8Fk1Hn/zAVyPJZTtZ2eE9/MIer6/18ROxX6N/e6edVSfvuZBqhxAj3YgsmSjQ/A==}
+
+  '@peculiar/asn1-csr@2.5.0':
+    resolution: {integrity: sha512-ioigvA6WSYN9h/YssMmmoIwgl3RvZlAYx4A/9jD2qaqXZwGcNlAxaw54eSx2QG1Yu7YyBC5Rku3nNoHrQ16YsQ==}
+
+  '@peculiar/asn1-ecc@2.5.0':
+    resolution: {integrity: sha512-t4eYGNhXtLRxaP50h3sfO6aJebUCDGQACoeexcelL4roMFRRVgB20yBIu2LxsPh/tdW9I282gNgMOyg3ywg/mg==}
+
+  '@peculiar/asn1-pfx@2.5.0':
+    resolution: {integrity: sha512-Vj0d0wxJZA+Ztqfb7W+/iu8Uasw6hhKtCdLKXLG/P3kEPIQpqGI4P4YXlROfl7gOCqFIbgsj1HzFIFwQ5s20ug==}
+
+  '@peculiar/asn1-pkcs8@2.5.0':
+    resolution: {integrity: sha512-L7599HTI2SLlitlpEP8oAPaJgYssByI4eCwQq2C9eC90otFpm8MRn66PpbKviweAlhinWQ3ZjDD2KIVtx7PaVw==}
+
+  '@peculiar/asn1-pkcs9@2.5.0':
+    resolution: {integrity: sha512-UgqSMBLNLR5TzEZ5ZzxR45Nk6VJrammxd60WMSkofyNzd3DQLSNycGWSK5Xg3UTYbXcDFyG8pA/7/y/ztVCa6A==}
+
+  '@peculiar/asn1-rsa@2.5.0':
+    resolution: {integrity: sha512-qMZ/vweiTHy9syrkkqWFvbT3eLoedvamcUdnnvwyyUNv5FgFXA3KP8td+ATibnlZ0EANW5PYRm8E6MJzEB/72Q==}
+
+  '@peculiar/asn1-schema@2.5.0':
+    resolution: {integrity: sha512-YM/nFfskFJSlHqv59ed6dZlLZqtZQwjRVJ4bBAiWV08Oc+1rSd5lDZcBEx0lGDHfSoH3UziI2pXt2UM33KerPQ==}
+
+  '@peculiar/asn1-x509-attr@2.5.0':
+    resolution: {integrity: sha512-9f0hPOxiJDoG/bfNLAFven+Bd4gwz/VzrCIIWc1025LEI4BXO0U5fOCTNDPbbp2ll+UzqKsZ3g61mpBp74gk9A==}
+
+  '@peculiar/asn1-x509@2.5.0':
+    resolution: {integrity: sha512-CpwtMCTJvfvYTFMuiME5IH+8qmDe3yEWzKHe7OOADbGfq7ohxeLaXwQo0q4du3qs0AII3UbLCvb9NF/6q0oTKQ==}
+
+  '@peculiar/x509@1.14.0':
+    resolution: {integrity: sha512-Yc4PDxN3OrxUPiXgU63c+ZRXKGE8YKF2McTciYhUHFtHVB0KMnjeFSU0qpztGhsp4P0uKix4+J2xEpIEDu8oXg==}
+
+  '@radix-ui/number@1.1.1':
+    resolution: {integrity: sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g==}
+
+  '@radix-ui/primitive@1.1.3':
+    resolution: {integrity: sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==}
+
+  '@radix-ui/react-alert-dialog@1.1.15':
+    resolution: {integrity: sha512-oTVLkEw5GpdRe29BqJ0LSDFWI3qu0vR1M0mUkOQWDIUnY/QIkLpgDMWuKxP94c2NAC2LGcgVhG1ImF3jkZ5wXw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-arrow@1.1.7':
+    resolution: {integrity: sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-avatar@1.1.11':
+    resolution: {integrity: sha512-0Qk603AHGV28BOBO34p7IgD5m+V5Sg/YovfayABkoDDBM5d3NCx0Mp4gGrjzLGes1jV5eNOE1r3itqOR33VC6Q==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-checkbox@1.3.3':
+    resolution: {integrity: sha512-wBbpv+NQftHDdG86Qc0pIyXk5IR3tM8Vd0nWLKDcX8nNn4nXFOFwsKuqw2okA/1D/mpaAkmuyndrPJTYDNZtFw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-collapsible@1.1.12':
+    resolution: {integrity: sha512-Uu+mSh4agx2ib1uIGPP4/CKNULyajb3p92LsVXmH2EHVMTfZWpll88XJ0j4W0z3f8NK1eYl1+Mf/szHPmcHzyA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-collection@1.1.7':
+    resolution: {integrity: sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-compose-refs@1.1.2':
+    resolution: {integrity: sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-context@1.1.2':
+    resolution: {integrity: sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-context@1.1.3':
+    resolution: {integrity: sha512-ieIFACdMpYfMEjF0rEf5KLvfVyIkOz6PDGyNnP+u+4xQ6jny3VCgA4OgXOwNx2aUkxn8zx9fiVcM8CfFYv9Lxw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-dialog@1.1.15':
+    resolution: {integrity: sha512-TCglVRtzlffRNxRMEyR36DGBLJpeusFcgMVD9PZEzAKnUs1lKCgX5u9BmC2Yg+LL9MgZDugFFs1Vl+Jp4t/PGw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-direction@1.1.1':
+    resolution: {integrity: sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-dismissable-layer@1.1.11':
+    resolution: {integrity: sha512-Nqcp+t5cTB8BinFkZgXiMJniQH0PsUt2k51FUhbdfeKvc4ACcG2uQniY/8+h1Yv6Kza4Q7lD7PQV0z0oicE0Mg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-dropdown-menu@2.1.16':
+    resolution: {integrity: sha512-1PLGQEynI/3OX/ftV54COn+3Sud/Mn8vALg2rWnBLnRaGtJDduNW/22XjlGgPdpcIbiQxjKtb7BkcjP00nqfJw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-focus-guards@1.1.3':
+    resolution: {integrity: sha512-0rFg/Rj2Q62NCm62jZw0QX7a3sz6QCQU0LpZdNrJX8byRGaGVTqbrW9jAoIAHyMQqsNpeZ81YgSizOt5WXq0Pw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-focus-scope@1.1.7':
+    resolution: {integrity: sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-hover-card@1.1.15':
+    resolution: {integrity: sha512-qgTkjNT1CfKMoP0rcasmlH2r1DAiYicWsDsufxl940sT2wHNEWWv6FMWIQXWhVdmC1d/HYfbhQx60KYyAtKxjg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-id@1.1.1':
+    resolution: {integrity: sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-label@2.1.8':
+    resolution: {integrity: sha512-FmXs37I6hSBVDlO4y764TNz1rLgKwjJMQ0EGte6F3Cb3f4bIuHB/iLa/8I9VKkmOy+gNHq8rql3j686ACVV21A==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-menu@2.1.16':
+    resolution: {integrity: sha512-72F2T+PLlphrqLcAotYPp0uJMr5SjP5SL01wfEspJbru5Zs5vQaSHb4VB3ZMJPimgHHCHG7gMOeOB9H3Hdmtxg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-popover@1.1.15':
+    resolution: {integrity: sha512-kr0X2+6Yy/vJzLYJUPCZEc8SfQcf+1COFoAqauJm74umQhta9M7lNJHP7QQS3vkvcGLQUbWpMzwrXYwrYztHKA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-popper@1.2.8':
+    resolution: {integrity: sha512-0NJQ4LFFUuWkE7Oxf0htBKS6zLkkjBH+hM1uk7Ng705ReR8m/uelduy1DBo0PyBXPKVnBA6YBlU94MBGXrSBCw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-portal@1.1.9':
+    resolution: {integrity: sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-presence@1.1.5':
+    resolution: {integrity: sha512-/jfEwNDdQVBCNvjkGit4h6pMOzq8bHkopq458dPt2lMjx+eBQUohZNG9A7DtO/O5ukSbxuaNGXMjHicgwy6rQQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-primitive@2.1.3':
+    resolution: {integrity: sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-primitive@2.1.4':
+    resolution: {integrity: sha512-9hQc4+GNVtJAIEPEqlYqW5RiYdrr8ea5XQ0ZOnD6fgru+83kqT15mq2OCcbe8KnjRZl5vF3ks69AKz3kh1jrhg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-progress@1.1.8':
+    resolution: {integrity: sha512-+gISHcSPUJ7ktBy9RnTqbdKW78bcGke3t6taawyZ71pio1JewwGSJizycs7rLhGTvMJYCQB1DBK4KQsxs7U8dA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-radio-group@1.3.8':
+    resolution: {integrity: sha512-VBKYIYImA5zsxACdisNQ3BjCBfmbGH3kQlnFVqlWU4tXwjy7cGX8ta80BcrO+WJXIn5iBylEH3K6ZTlee//lgQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-roving-focus@1.1.11':
+    resolution: {integrity: sha512-7A6S9jSgm/S+7MdtNDSb+IU859vQqJ/QAtcYQcfFC6W8RS4IxIZDldLR0xqCFZ6DCyrQLjLPsxtTNch5jVA4lA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-select@2.2.6':
+    resolution: {integrity: sha512-I30RydO+bnn2PQztvo25tswPH+wFBjehVGtmagkU78yMdwTwVf12wnAOF+AeP8S2N8xD+5UPbGhkUfPyvT+mwQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-separator@1.1.8':
+    resolution: {integrity: sha512-sDvqVY4itsKwwSMEe0jtKgfTh+72Sy3gPmQpjqcQneqQ4PFmr/1I0YA+2/puilhggCe2gJcx5EBAYFkWkdpa5g==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-slot@1.2.3':
+    resolution: {integrity: sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-slot@1.2.4':
+    resolution: {integrity: sha512-Jl+bCv8HxKnlTLVrcDE8zTMJ09R9/ukw4qBs/oZClOfoQk/cOTbDn+NceXfV7j09YPVQUryJPHurafcSg6EVKA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-switch@1.2.6':
+    resolution: {integrity: sha512-bByzr1+ep1zk4VubeEVViV592vu2lHE2BZY5OnzehZqOOgogN80+mNtCqPkhn2gklJqOpxWgPoYTSnhBCqpOXQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-tabs@1.1.13':
+    resolution: {integrity: sha512-7xdcatg7/U+7+Udyoj2zodtI9H/IIopqo+YOIcZOq1nJwXWBZ9p8xiu5llXlekDbZkca79a/fozEYQXIA4sW6A==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-toggle-group@1.1.11':
+    resolution: {integrity: sha512-5umnS0T8JQzQT6HbPyO7Hh9dgd82NmS36DQr+X/YJ9ctFNCiiQd6IJAYYZ33LUwm8M+taCz5t2ui29fHZc4Y6Q==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-toggle@1.1.10':
+    resolution: {integrity: sha512-lS1odchhFTeZv3xwHH31YPObmJn8gOg7Lq12inrr0+BH/l3Tsq32VfjqH1oh80ARM3mlkfMic15n0kg4sD1poQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-tooltip@1.2.8':
+    resolution: {integrity: sha512-tY7sVt1yL9ozIxvmbtN5qtmH2krXcBCfjEiCgKGLqunJHvgvZG2Pcl2oQ3kbcZARb1BGEHdkLzcYGO8ynVlieg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-use-callback-ref@1.1.1':
+    resolution: {integrity: sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-controllable-state@1.2.2':
+    resolution: {integrity: sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-effect-event@0.0.2':
+    resolution: {integrity: sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-escape-keydown@1.1.1':
+    resolution: {integrity: sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-is-hydrated@0.1.0':
+    resolution: {integrity: sha512-U+UORVEq+cTnRIaostJv9AGdV3G6Y+zbVd+12e18jQ5A3c0xL03IhnHuiU4UV69wolOQp5GfR58NW/EgdQhwOA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-layout-effect@1.1.1':
+    resolution: {integrity: sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-previous@1.1.1':
+    resolution: {integrity: sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-rect@1.1.1':
+    resolution: {integrity: sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-size@1.1.1':
+    resolution: {integrity: sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-visually-hidden@1.2.3':
+    resolution: {integrity: sha512-pzJq12tEaaIhqjbzpCuv/OypJY/BPavOofm+dbab+MHLajy277+1lLm6JFcGgF5eskJ6mquGirhXY2GD/8u8Ug==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/rect@1.1.1':
+    resolution: {integrity: sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==}
+
+  '@reduxjs/toolkit@2.9.1':
+    resolution: {integrity: sha512-sETJ3qO72y7L7WiR5K54UFLT3jRzAtqeBPVO15xC3bGA6kDqCH8m/v7BKCPH4czydXzz/1lPEGLvew7GjOO3Qw==}
+    peerDependencies:
+      react: ^16.9.0 || ^17.0.0 || ^18 || ^19
+      react-redux: ^7.2.1 || ^8.1.3 || ^9.0.0
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-redux:
+        optional: true
+
+  '@remixicon/react@4.7.0':
+    resolution: {integrity: sha512-ODBQjdbOjnFguCqctYkpDjERXOInNaBnRPDKfZOBvbzExBAwr2BaH/6AHFTg/UAFzBDkwtylfMT8iKPAkLwPLQ==}
+    peerDependencies:
+      react: '>=18.2.0'
+
+  '@rtsao/scc@1.1.0':
+    resolution: {integrity: sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==}
+
+  '@simplewebauthn/browser@13.2.2':
+    resolution: {integrity: sha512-FNW1oLQpTJyqG5kkDg5ZsotvWgmBaC6jCHR7Ej0qUNep36Wl9tj2eZu7J5rP+uhXgHaLk+QQ3lqcw2vS5MX1IA==}
+
+  '@simplewebauthn/server@13.2.2':
+    resolution: {integrity: sha512-HcWLW28yTMGXpwE9VLx9J+N2KEUaELadLrkPEEI9tpI5la70xNEVEsu/C+m3u7uoq4FulLqZQhgBCzR9IZhFpA==}
+    engines: {node: '>=20.0.0'}
+
+  '@stablelib/base64@1.0.1':
+    resolution: {integrity: sha512-1bnPQqSxSuc3Ii6MhBysoWCg58j97aUjuCSZrGSmDxNqtytIi0k8utUenAwTZN4V5mXXYGsVUI9zeBqy+jBOSQ==}
+
+  '@standard-schema/spec@1.0.0':
+    resolution: {integrity: sha512-m2bOd0f2RT9k8QJx1JN85cZYyH1RqFBdlwtkSlf4tBDYLCiiZnv1fIIwacK6cqwXavOydf0NPToMQgpKq+dVlA==}
+
+  '@standard-schema/utils@0.3.0':
+    resolution: {integrity: sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==}
+
+  '@swc/helpers@0.5.15':
+    resolution: {integrity: sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==}
+
+  '@tailwindcss/node@4.1.17':
+    resolution: {integrity: sha512-csIkHIgLb3JisEFQ0vxr2Y57GUNYh447C8xzwj89U/8fdW8LhProdxvnVH6U8M2Y73QKiTIH+LWbK3V2BBZsAg==}
+
+  '@tailwindcss/oxide-android-arm64@4.1.17':
+    resolution: {integrity: sha512-BMqpkJHgOZ5z78qqiGE6ZIRExyaHyuxjgrJ6eBO5+hfrfGkuya0lYfw8fRHG77gdTjWkNWEEm+qeG2cDMxArLQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [android]
+
+  '@tailwindcss/oxide-darwin-arm64@4.1.17':
+    resolution: {integrity: sha512-EquyumkQweUBNk1zGEU/wfZo2qkp/nQKRZM8bUYO0J+Lums5+wl2CcG1f9BgAjn/u9pJzdYddHWBiFXJTcxmOg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-darwin-x64@4.1.17':
+    resolution: {integrity: sha512-gdhEPLzke2Pog8s12oADwYu0IAw04Y2tlmgVzIN0+046ytcgx8uZmCzEg4VcQh+AHKiS7xaL8kGo/QTiNEGRog==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-freebsd-x64@4.1.17':
+    resolution: {integrity: sha512-hxGS81KskMxML9DXsaXT1H0DyA+ZBIbyG/sSAjWNe2EDl7TkPOBI42GBV3u38itzGUOmFfCzk1iAjDXds8Oh0g==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.17':
+    resolution: {integrity: sha512-k7jWk5E3ldAdw0cNglhjSgv501u7yrMf8oeZ0cElhxU6Y2o7f8yqelOp3fhf7evjIS6ujTI3U8pKUXV2I4iXHQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.1.17':
+    resolution: {integrity: sha512-HVDOm/mxK6+TbARwdW17WrgDYEGzmoYayrCgmLEw7FxTPLcp/glBisuyWkFz/jb7ZfiAXAXUACfyItn+nTgsdQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.1.17':
+    resolution: {integrity: sha512-HvZLfGr42i5anKtIeQzxdkw/wPqIbpeZqe7vd3V9vI3RQxe3xU1fLjss0TjyhxWcBaipk7NYwSrwTwK1hJARMg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.1.17':
+    resolution: {integrity: sha512-M3XZuORCGB7VPOEDH+nzpJ21XPvK5PyjlkSFkFziNHGLc5d6g3di2McAAblmaSUNl8IOmzYwLx9NsE7bplNkwQ==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-x64-musl@4.1.17':
+    resolution: {integrity: sha512-k7f+pf9eXLEey4pBlw+8dgfJHY4PZ5qOUFDyNf7SI6lHjQ9Zt7+NcscjpwdCEbYi6FI5c2KDTDWyf2iHcCSyyQ==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@tailwindcss/oxide-wasm32-wasi@4.1.17':
+    resolution: {integrity: sha512-cEytGqSSoy7zK4JRWiTCx43FsKP/zGr0CsuMawhH67ONlH+T79VteQeJQRO/X7L0juEUA8ZyuYikcRBf0vsxhg==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+    bundledDependencies:
+      - '@napi-rs/wasm-runtime'
+      - '@emnapi/core'
+      - '@emnapi/runtime'
+      - '@tybys/wasm-util'
+      - '@emnapi/wasi-threads'
+      - tslib
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.1.17':
+    resolution: {integrity: sha512-JU5AHr7gKbZlOGvMdb4722/0aYbU+tN6lv1kONx0JK2cGsh7g148zVWLM0IKR3NeKLv+L90chBVYcJ8uJWbC9A==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.1.17':
+    resolution: {integrity: sha512-SKWM4waLuqx0IH+FMDUw6R66Hu4OuTALFgnleKbqhgGU30DY20NORZMZUKgLRjQXNN2TLzKvh48QXTig4h4bGw==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [win32]
+
+  '@tailwindcss/oxide@4.1.17':
+    resolution: {integrity: sha512-F0F7d01fmkQhsTjXezGBLdrl1KresJTcI3DB8EkScCldyKp3Msz4hub4uyYaVnk88BAS1g5DQjjF6F5qczheLA==}
+    engines: {node: '>= 10'}
+
+  '@tailwindcss/postcss@4.1.17':
+    resolution: {integrity: sha512-+nKl9N9mN5uJ+M7dBOOCzINw94MPstNR/GtIhz1fpZysxL/4a+No64jCBD6CPN+bIHWFx3KWuu8XJRrj/572Dw==}
+
+  '@tanstack/react-table@8.21.3':
+    resolution: {integrity: sha512-5nNMTSETP4ykGegmVkhjcS8tTLW6Vl4axfEGQN3v0zdHYbK4UfoqfPChclTrJ4EoK9QynqAu9oUf8VEmrpZ5Ww==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      react: '>=16.8'
+      react-dom: '>=16.8'
+
+  '@tanstack/table-core@8.21.3':
+    resolution: {integrity: sha512-ldZXEhOBb8Is7xLs01fR3YEc3DERiz5silj8tnGkFZytt1abEvl/GhUmCE0PMLaMPTa3Jk4HbKmRlHmu+gCftg==}
+    engines: {node: '>=12'}
+
+  '@tybys/wasm-util@0.10.1':
+    resolution: {integrity: sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==}
+
+  '@types/d3-array@3.2.2':
+    resolution: {integrity: sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==}
+
+  '@types/d3-color@3.1.3':
+    resolution: {integrity: sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==}
+
+  '@types/d3-ease@3.0.2':
+    resolution: {integrity: sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==}
+
+  '@types/d3-interpolate@3.0.4':
+    resolution: {integrity: sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==}
+
+  '@types/d3-path@3.1.1':
+    resolution: {integrity: sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==}
+
+  '@types/d3-scale@4.0.9':
+    resolution: {integrity: sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==}
+
+  '@types/d3-shape@3.1.7':
+    resolution: {integrity: sha512-VLvUQ33C+3J+8p+Daf+nYSOsjB4GXp19/S/aGo60m9h1v6XaxjiT82lKVWJCfzhtuZ3yD7i/TPeC/fuKLLOSmg==}
+
+  '@types/d3-time@3.0.4':
+    resolution: {integrity: sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==}
+
+  '@types/d3-timer@3.0.2':
+    resolution: {integrity: sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==}
+
+  '@types/estree@1.0.8':
+    resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
+
+  '@types/json-schema@7.0.15':
+    resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
+
+  '@types/json5@0.0.29':
+    resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}
+
+  '@types/node@22.18.12':
+    resolution: {integrity: sha512-BICHQ67iqxQGFSzfCFTT7MRQ5XcBjG5aeKh5Ok38UBbPe5fxTyE+aHFxwVrGyr8GNlqFMLKD1D3P2K/1ks8tog==}
+
+  '@types/node@24.10.1':
+    resolution: {integrity: sha512-GNWcUTRBgIRJD5zj+Tq0fKOJ5XZajIiBroOF0yvj2bSU1WvNdYS/dn9UxwsujGW4JX06dnHyjV2y9rRaybH0iQ==}
+
+  '@types/react-dom@19.2.3':
+    resolution: {integrity: sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==}
+    peerDependencies:
+      '@types/react': ^19.2.0
+
+  '@types/react@19.2.4':
+    resolution: {integrity: sha512-tBFxBp9Nfyy5rsmefN+WXc1JeW/j2BpBHFdLZbEVfs9wn3E3NRFxwV0pJg8M1qQAexFpvz73hJXFofV0ZAu92A==}
+
+  '@types/use-sync-external-store@0.0.6':
+    resolution: {integrity: sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==}
+
+  '@typescript-eslint/eslint-plugin@8.46.3':
+    resolution: {integrity: sha512-sbaQ27XBUopBkRiuY/P9sWGOWUW4rl8fDoHIUmLpZd8uldsTyB4/Zg6bWTegPoTLnKj9Hqgn3QD6cjPNB32Odw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      '@typescript-eslint/parser': ^8.46.3
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <6.0.0'
+
+  '@typescript-eslint/parser@8.46.3':
+    resolution: {integrity: sha512-6m1I5RmHBGTnUGS113G04DMu3CpSdxCAU/UvtjNWL4Nuf3MW9tQhiJqRlHzChIkhy6kZSAQmc+I1bcGjE3yNKg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <6.0.0'
+
+  '@typescript-eslint/project-service@8.46.3':
+    resolution: {integrity: sha512-Fz8yFXsp2wDFeUElO88S9n4w1I4CWDTXDqDr9gYvZgUpwXQqmZBr9+NTTql5R3J7+hrJZPdpiWaB9VNhAKYLuQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '>=4.8.4 <6.0.0'
+
+  '@typescript-eslint/scope-manager@8.46.3':
+    resolution: {integrity: sha512-FCi7Y1zgrmxp3DfWfr+3m9ansUUFoy8dkEdeQSgA9gbm8DaHYvZCdkFRQrtKiedFf3Ha6VmoqoAaP68+i+22kg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@typescript-eslint/tsconfig-utils@8.46.3':
+    resolution: {integrity: sha512-GLupljMniHNIROP0zE7nCcybptolcH8QZfXOpCfhQDAdwJ/ZTlcaBOYebSOZotpti/3HrHSw7D3PZm75gYFsOA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '>=4.8.4 <6.0.0'
+
+  '@typescript-eslint/type-utils@8.46.3':
+    resolution: {integrity: sha512-ZPCADbr+qfz3aiTTYNNkCbUt+cjNwI/5McyANNrFBpVxPt7GqpEYz5ZfdwuFyGUnJ9FdDXbGODUu6iRCI6XRXw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <6.0.0'
+
+  '@typescript-eslint/types@8.46.3':
+    resolution: {integrity: sha512-G7Ok9WN/ggW7e/tOf8TQYMaxgID3Iujn231hfi0Pc7ZheztIJVpO44ekY00b7akqc6nZcvregk0Jpah3kep6hA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@typescript-eslint/typescript-estree@8.46.3':
+    resolution: {integrity: sha512-f/NvtRjOm80BtNM5OQtlaBdM5BRFUv7gf381j9wygDNL+qOYSNOgtQ/DCndiYi80iIOv76QqaTmp4fa9hwI0OA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '>=4.8.4 <6.0.0'
+
+  '@typescript-eslint/utils@8.46.3':
+    resolution: {integrity: sha512-VXw7qmdkucEx9WkmR3ld/u6VhRyKeiF1uxWwCy/iuNfokjJ7VhsgLSOTjsol8BunSw190zABzpwdNsze2Kpo4g==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <6.0.0'
+
+  '@typescript-eslint/visitor-keys@8.46.3':
+    resolution: {integrity: sha512-uk574k8IU0rOF/AjniX8qbLSGURJVUCeM5e4MIMKBFFi8weeiLrG1fyQejyLXQpRZbU/1BuQasleV/RfHC3hHg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@unrs/resolver-binding-android-arm-eabi@1.11.1':
+    resolution: {integrity: sha512-ppLRUgHVaGRWUx0R0Ut06Mjo9gBaBkg3v/8AxusGLhsIotbBLuRk51rAzqLC8gq6NyyAojEXglNjzf6R948DNw==}
+    cpu: [arm]
+    os: [android]
+
+  '@unrs/resolver-binding-android-arm64@1.11.1':
+    resolution: {integrity: sha512-lCxkVtb4wp1v+EoN+HjIG9cIIzPkX5OtM03pQYkG+U5O/wL53LC4QbIeazgiKqluGeVEeBlZahHalCaBvU1a2g==}
+    cpu: [arm64]
+    os: [android]
+
+  '@unrs/resolver-binding-darwin-arm64@1.11.1':
+    resolution: {integrity: sha512-gPVA1UjRu1Y/IsB/dQEsp2V1pm44Of6+LWvbLc9SDk1c2KhhDRDBUkQCYVWe6f26uJb3fOK8saWMgtX8IrMk3g==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@unrs/resolver-binding-darwin-x64@1.11.1':
+    resolution: {integrity: sha512-cFzP7rWKd3lZaCsDze07QX1SC24lO8mPty9vdP+YVa3MGdVgPmFc59317b2ioXtgCMKGiCLxJ4HQs62oz6GfRQ==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@unrs/resolver-binding-freebsd-x64@1.11.1':
+    resolution: {integrity: sha512-fqtGgak3zX4DCB6PFpsH5+Kmt/8CIi4Bry4rb1ho6Av2QHTREM+47y282Uqiu3ZRF5IQioJQ5qWRV6jduA+iGw==}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@unrs/resolver-binding-linux-arm-gnueabihf@1.11.1':
+    resolution: {integrity: sha512-u92mvlcYtp9MRKmP+ZvMmtPN34+/3lMHlyMj7wXJDeXxuM0Vgzz0+PPJNsro1m3IZPYChIkn944wW8TYgGKFHw==}
+    cpu: [arm]
+    os: [linux]
+
+  '@unrs/resolver-binding-linux-arm-musleabihf@1.11.1':
+    resolution: {integrity: sha512-cINaoY2z7LVCrfHkIcmvj7osTOtm6VVT16b5oQdS4beibX2SYBwgYLmqhBjA1t51CarSaBuX5YNsWLjsqfW5Cw==}
+    cpu: [arm]
+    os: [linux]
+
+  '@unrs/resolver-binding-linux-arm64-gnu@1.11.1':
+    resolution: {integrity: sha512-34gw7PjDGB9JgePJEmhEqBhWvCiiWCuXsL9hYphDF7crW7UgI05gyBAi6MF58uGcMOiOqSJ2ybEeCvHcq0BCmQ==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@unrs/resolver-binding-linux-arm64-musl@1.11.1':
+    resolution: {integrity: sha512-RyMIx6Uf53hhOtJDIamSbTskA99sPHS96wxVE/bJtePJJtpdKGXO1wY90oRdXuYOGOTuqjT8ACccMc4K6QmT3w==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@unrs/resolver-binding-linux-ppc64-gnu@1.11.1':
+    resolution: {integrity: sha512-D8Vae74A4/a+mZH0FbOkFJL9DSK2R6TFPC9M+jCWYia/q2einCubX10pecpDiTmkJVUH+y8K3BZClycD8nCShA==}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@unrs/resolver-binding-linux-riscv64-gnu@1.11.1':
+    resolution: {integrity: sha512-frxL4OrzOWVVsOc96+V3aqTIQl1O2TjgExV4EKgRY09AJ9leZpEg8Ak9phadbuX0BA4k8U5qtvMSQQGGmaJqcQ==}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@unrs/resolver-binding-linux-riscv64-musl@1.11.1':
+    resolution: {integrity: sha512-mJ5vuDaIZ+l/acv01sHoXfpnyrNKOk/3aDoEdLO/Xtn9HuZlDD6jKxHlkN8ZhWyLJsRBxfv9GYM2utQ1SChKew==}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@unrs/resolver-binding-linux-s390x-gnu@1.11.1':
+    resolution: {integrity: sha512-kELo8ebBVtb9sA7rMe1Cph4QHreByhaZ2QEADd9NzIQsYNQpt9UkM9iqr2lhGr5afh885d/cB5QeTXSbZHTYPg==}
+    cpu: [s390x]
+    os: [linux]
+
+  '@unrs/resolver-binding-linux-x64-gnu@1.11.1':
+    resolution: {integrity: sha512-C3ZAHugKgovV5YvAMsxhq0gtXuwESUKc5MhEtjBpLoHPLYM+iuwSj3lflFwK3DPm68660rZ7G8BMcwSro7hD5w==}
+    cpu: [x64]
+    os: [linux]
+
+  '@unrs/resolver-binding-linux-x64-musl@1.11.1':
+    resolution: {integrity: sha512-rV0YSoyhK2nZ4vEswT/QwqzqQXw5I6CjoaYMOX0TqBlWhojUf8P94mvI7nuJTeaCkkds3QE4+zS8Ko+GdXuZtA==}
+    cpu: [x64]
+    os: [linux]
+
+  '@unrs/resolver-binding-wasm32-wasi@1.11.1':
+    resolution: {integrity: sha512-5u4RkfxJm+Ng7IWgkzi3qrFOvLvQYnPBmjmZQ8+szTK/b31fQCnleNl1GgEt7nIsZRIf5PLhPwT0WM+q45x/UQ==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+
+  '@unrs/resolver-binding-win32-arm64-msvc@1.11.1':
+    resolution: {integrity: sha512-nRcz5Il4ln0kMhfL8S3hLkxI85BXs3o8EYoattsJNdsX4YUU89iOkVn7g0VHSRxFuVMdM4Q1jEpIId1Ihim/Uw==}
+    cpu: [arm64]
+    os: [win32]
+
+  '@unrs/resolver-binding-win32-ia32-msvc@1.11.1':
+    resolution: {integrity: sha512-DCEI6t5i1NmAZp6pFonpD5m7i6aFrpofcp4LA2i8IIq60Jyo28hamKBxNrZcyOwVOZkgsRp9O2sXWBWP8MnvIQ==}
+    cpu: [ia32]
+    os: [win32]
+
+  '@unrs/resolver-binding-win32-x64-msvc@1.11.1':
+    resolution: {integrity: sha512-lrW200hZdbfRtztbygyaq/6jP6AKE8qQN2KvPcJ+x7wiD038YtnYtZ82IMNJ69GJibV7bwL3y9FgK+5w/pYt6g==}
+    cpu: [x64]
+    os: [win32]
+
+  '@vercel/oidc@3.0.3':
+    resolution: {integrity: sha512-yNEQvPcVrK9sIe637+I0jD6leluPxzwJKx/Haw6F4H77CdDsszUn5V3o96LPziXkSNE2B83+Z3mjqGKBK/R6Gg==}
+    engines: {node: '>= 20'}
+
+  acorn-jsx@5.3.2:
+    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
+    peerDependencies:
+      acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
+
+  acorn@8.15.0:
+    resolution: {integrity: sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==}
+    engines: {node: '>=0.4.0'}
+    hasBin: true
+
+  ai@5.0.93:
+    resolution: {integrity: sha512-9eGcu+1PJgPg4pRNV4L7tLjRR3wdJC9CXQoNMvtqvYNOLZHFCzjHtVIOr2SIkoJJeu2+sOy3hyiSuTmy2MA40g==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      zod: ^3.25.76 || ^4.1.8
+
+  ajv@6.12.6:
+    resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
+
+  ansi-styles@4.3.0:
+    resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
+    engines: {node: '>=8'}
+
+  argparse@2.0.1:
+    resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
+
+  aria-hidden@1.2.6:
+    resolution: {integrity: sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==}
+    engines: {node: '>=10'}
+
+  aria-query@5.3.2:
+    resolution: {integrity: sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==}
+    engines: {node: '>= 0.4'}
+
+  array-buffer-byte-length@1.0.2:
+    resolution: {integrity: sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw==}
+    engines: {node: '>= 0.4'}
+
+  array-includes@3.1.9:
+    resolution: {integrity: sha512-FmeCCAenzH0KH381SPT5FZmiA/TmpndpcaShhfgEN9eCVjnFBqq3l1xrI42y8+PPLI6hypzou4GXw00WHmPBLQ==}
+    engines: {node: '>= 0.4'}
+
+  array.prototype.findlast@1.2.5:
+    resolution: {integrity: sha512-CVvd6FHg1Z3POpBLxO6E6zr+rSKEQ9L6rZHAaY7lLfhKsWYUBBOuMs0e9o24oopj6H+geRCX0YJ+TJLBK2eHyQ==}
+    engines: {node: '>= 0.4'}
+
+  array.prototype.findlastindex@1.2.6:
+    resolution: {integrity: sha512-F/TKATkzseUExPlfvmwQKGITM3DGTK+vkAsCZoDc5daVygbJBnjEUCbgkAvVFsgfXfX4YIqZ/27G3k3tdXrTxQ==}
+    engines: {node: '>= 0.4'}
+
+  array.prototype.flat@1.3.3:
+    resolution: {integrity: sha512-rwG/ja1neyLqCuGZ5YYrznA62D4mZXg0i1cIskIUKSiqF3Cje9/wXAls9B9s1Wa2fomMsIv8czB8jZcPmxCXFg==}
+    engines: {node: '>= 0.4'}
+
+  array.prototype.flatmap@1.3.3:
+    resolution: {integrity: sha512-Y7Wt51eKJSyi80hFrJCePGGNo5ktJCslFuboqJsbf57CCPcm5zztluPlc4/aD8sWsKvlwatezpV4U1efk8kpjg==}
+    engines: {node: '>= 0.4'}
+
+  array.prototype.tosorted@1.1.4:
+    resolution: {integrity: sha512-p6Fx8B7b7ZhL/gmUsAy0D15WhvDccw3mnGNbZpi3pmeJdxtWsj2jEaI4Y6oo3XiHfzuSgPwKc04MYt6KgvC/wA==}
+    engines: {node: '>= 0.4'}
+
+  arraybuffer.prototype.slice@1.0.4:
+    resolution: {integrity: sha512-BNoCY6SXXPQ7gF2opIP4GBE+Xw7U+pHMYKuzjgCN3GwiaIR09UUeKfheyIry77QtrCBlC0KK0q5/TER/tYh3PQ==}
+    engines: {node: '>= 0.4'}
+
+  asn1js@3.0.6:
+    resolution: {integrity: sha512-UOCGPYbl0tv8+006qks/dTgV9ajs97X2p0FAbyS2iyCRrmLSRolDaHdp+v/CLgnzHc3fVB+CwYiUmei7ndFcgA==}
+    engines: {node: '>=12.0.0'}
+
+  ast-types-flow@0.0.8:
+    resolution: {integrity: sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==}
+
+  async-function@1.0.0:
+    resolution: {integrity: sha512-hsU18Ae8CDTR6Kgu9DYf0EbCr/a5iGL0rytQDobUcdpYOKokk8LEjVphnXkDkgpi0wYVsqrXuP0bZxJaTqdgoA==}
+    engines: {node: '>= 0.4'}
+
+  available-typed-arrays@1.0.7:
+    resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==}
+    engines: {node: '>= 0.4'}
+
+  axe-core@4.11.0:
+    resolution: {integrity: sha512-ilYanEU8vxxBexpJd8cWM4ElSQq4QctCLKih0TSfjIfCQTeyH/6zVrmIJfLPrKTKJRbiG+cfnZbQIjAlJmF1jQ==}
+    engines: {node: '>=4'}
+
+  axobject-query@4.1.0:
+    resolution: {integrity: sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==}
+    engines: {node: '>= 0.4'}
+
+  babel-plugin-react-compiler@1.0.0:
+    resolution: {integrity: sha512-Ixm8tFfoKKIPYdCCKYTsqv+Fd4IJ0DQqMyEimo+pxUOMUR9cVPlwTrFt9Avu+3cb6Zp3mAzl+t1MrG2fxxKsxw==}
+
+  balanced-match@1.0.2:
+    resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
+
+  base64-js@1.5.1:
+    resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
+
+  baseline-browser-mapping@2.8.25:
+    resolution: {integrity: sha512-2NovHVesVF5TXefsGX1yzx1xgr7+m9JQenvz6FQY3qd+YXkKkYiv+vTCc7OriP9mcDZpTC5mAOYN4ocd29+erA==}
+    hasBin: true
+
+  better-auth@1.3.34:
+    resolution: {integrity: sha512-LWA52SlvnUBJRbN8VLSTLILPomZY3zZAiLxVJCeSQ5uVmaIKkMBhERitkfJcXB9RJcfl4uP+3EqKkb6hX1/uiw==}
+    peerDependencies:
+      '@lynx-js/react': '*'
+      '@sveltejs/kit': '*'
+      next: '*'
+      react: '*'
+      react-dom: '*'
+      solid-js: '*'
+      svelte: '*'
+      vue: '*'
+    peerDependenciesMeta:
+      '@lynx-js/react':
+        optional: true
+      '@sveltejs/kit':
+        optional: true
+      next:
+        optional: true
+      react:
+        optional: true
+      react-dom:
+        optional: true
+      solid-js:
+        optional: true
+      svelte:
+        optional: true
+      vue:
+        optional: true
+
+  better-call@1.0.19:
+    resolution: {integrity: sha512-sI3GcA1SCVa3H+CDHl8W8qzhlrckwXOTKhqq3OOPXjgn5aTOMIqGY34zLY/pHA6tRRMjTUC3lz5Mi7EbDA24Kw==}
+
+  better-sqlite3@12.4.1:
+    resolution: {integrity: sha512-3yVdyZhklTiNrtg+4WqHpJpFDd+WHTg2oM7UcR80GqL05AOV0xEJzc6qNvFYoEtE+hRp1n9MpN6/+4yhlGkDXQ==}
+    engines: {node: 20.x || 22.x || 23.x || 24.x}
+
+  bindings@1.5.0:
+    resolution: {integrity: sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==}
+
+  bl@4.1.0:
+    resolution: {integrity: sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==}
+
+  brace-expansion@1.1.12:
+    resolution: {integrity: sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==}
+
+  brace-expansion@2.0.2:
+    resolution: {integrity: sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==}
+
+  braces@3.0.3:
+    resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
+    engines: {node: '>=8'}
+
+  browserslist@4.27.0:
+    resolution: {integrity: sha512-AXVQwdhot1eqLihwasPElhX2tAZiBjWdJ9i/Zcj2S6QYIjkx62OKSfnobkriB81C3l4w0rVy3Nt4jaTBltYEpw==}
+    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
+    hasBin: true
+
+  buffer-from@1.1.2:
+    resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==}
+
+  buffer@5.7.1:
+    resolution: {integrity: sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==}
+
+  call-bind-apply-helpers@1.0.2:
+    resolution: {integrity: sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==}
+    engines: {node: '>= 0.4'}
+
+  call-bind@1.0.8:
+    resolution: {integrity: sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==}
+    engines: {node: '>= 0.4'}
+
+  call-bound@1.0.4:
+    resolution: {integrity: sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==}
+    engines: {node: '>= 0.4'}
+
+  callsites@3.1.0:
+    resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
+    engines: {node: '>=6'}
+
+  caniuse-lite@1.0.30001754:
+    resolution: {integrity: sha512-x6OeBXueoAceOmotzx3PO4Zpt4rzpeIFsSr6AAePTZxSkXiYDUmpypEl7e2+8NCd9bD7bXjqyef8CJYPC1jfxg==}
+
+  chalk@4.1.2:
+    resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
+    engines: {node: '>=10'}
+
+  chownr@1.1.4:
+    resolution: {integrity: sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==}
+
+  class-variance-authority@0.7.1:
+    resolution: {integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==}
+
+  client-only@0.0.1:
+    resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==}
+
+  clsx@2.1.1:
+    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
+    engines: {node: '>=6'}
+
+  cmdk@1.1.1:
+    resolution: {integrity: sha512-Vsv7kFaXm+ptHDMZ7izaRsP70GgrW9NBNGswt9OZaVBLlE0SNpDq8eu/VGXyF9r7M0azK3Wy7OlYXsuyYLFzHg==}
+    peerDependencies:
+      react: ^18 || ^19 || ^19.0.0-rc
+      react-dom: ^18 || ^19 || ^19.0.0-rc
+
+  color-convert@2.0.1:
+    resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
+    engines: {node: '>=7.0.0'}
+
+  color-name@1.1.4:
+    resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
+
+  concat-map@0.0.1:
+    resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
+
+  convert-source-map@2.0.0:
+    resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
+
+  cross-spawn@7.0.6:
+    resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
+    engines: {node: '>= 8'}
+
+  csstype@3.1.3:
+    resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
+
+  d3-array@3.2.4:
+    resolution: {integrity: sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==}
+    engines: {node: '>=12'}
+
+  d3-color@3.1.0:
+    resolution: {integrity: sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==}
+    engines: {node: '>=12'}
+
+  d3-ease@3.0.1:
+    resolution: {integrity: sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==}
+    engines: {node: '>=12'}
+
+  d3-format@3.1.0:
+    resolution: {integrity: sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==}
+    engines: {node: '>=12'}
+
+  d3-interpolate@3.0.1:
+    resolution: {integrity: sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==}
+    engines: {node: '>=12'}
+
+  d3-path@3.1.0:
+    resolution: {integrity: sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==}
+    engines: {node: '>=12'}
+
+  d3-scale@4.0.2:
+    resolution: {integrity: sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==}
+    engines: {node: '>=12'}
+
+  d3-shape@3.2.0:
+    resolution: {integrity: sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==}
+    engines: {node: '>=12'}
+
+  d3-time-format@4.1.0:
+    resolution: {integrity: sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==}
+    engines: {node: '>=12'}
+
+  d3-time@3.1.0:
+    resolution: {integrity: sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==}
+    engines: {node: '>=12'}
+
+  d3-timer@3.0.1:
+    resolution: {integrity: sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==}
+    engines: {node: '>=12'}
+
+  damerau-levenshtein@1.0.8:
+    resolution: {integrity: sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==}
+
+  data-view-buffer@1.0.2:
+    resolution: {integrity: sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ==}
+    engines: {node: '>= 0.4'}
+
+  data-view-byte-length@1.0.2:
+    resolution: {integrity: sha512-tuhGbE6CfTM9+5ANGf+oQb72Ky/0+s3xKUpHvShfiz2RxMFgFPjsXuRLBVMtvMs15awe45SRb83D6wH4ew6wlQ==}
+    engines: {node: '>= 0.4'}
+
+  data-view-byte-offset@1.0.1:
+    resolution: {integrity: sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==}
+    engines: {node: '>= 0.4'}
+
+  date-fns-jalali@4.1.0-0:
+    resolution: {integrity: sha512-hTIP/z+t+qKwBDcmmsnmjWTduxCg+5KfdqWQvb2X/8C9+knYY6epN/pfxdDuyVlSVeFz0sM5eEfwIUQ70U4ckg==}
+
+  date-fns@4.1.0:
+    resolution: {integrity: sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==}
+
+  debug@3.2.7:
+    resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+
+  debug@4.4.3:
+    resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==}
+    engines: {node: '>=6.0'}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+
+  decimal.js-light@2.5.1:
+    resolution: {integrity: sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==}
+
+  decompress-response@6.0.0:
+    resolution: {integrity: sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==}
+    engines: {node: '>=10'}
+
+  deep-extend@0.6.0:
+    resolution: {integrity: sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==}
+    engines: {node: '>=4.0.0'}
+
+  deep-is@0.1.4:
+    resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
+
+  define-data-property@1.1.4:
+    resolution: {integrity: sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==}
+    engines: {node: '>= 0.4'}
+
+  define-properties@1.2.1:
+    resolution: {integrity: sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==}
+    engines: {node: '>= 0.4'}
+
+  defu@6.1.4:
+    resolution: {integrity: sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==}
+
+  detect-libc@2.1.2:
+    resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
+    engines: {node: '>=8'}
+
+  detect-node-es@1.1.0:
+    resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}
+
+  doctrine@2.1.0:
+    resolution: {integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==}
+    engines: {node: '>=0.10.0'}
+
+  drizzle-kit@0.31.7:
+    resolution: {integrity: sha512-hOzRGSdyKIU4FcTSFYGKdXEjFsncVwHZ43gY3WU5Bz9j5Iadp6Rh6hxLSQ1IWXpKLBKt/d5y1cpSPcV+FcoQ1A==}
+    hasBin: true
+
+  drizzle-orm@0.44.7:
+    resolution: {integrity: sha512-quIpnYznjU9lHshEOAYLoZ9s3jweleHlZIAWR/jX9gAWNg/JhQ1wj0KGRf7/Zm+obRrYd9GjPVJg790QY9N5AQ==}
+    peerDependencies:
+      '@aws-sdk/client-rds-data': '>=3'
+      '@cloudflare/workers-types': '>=4'
+      '@electric-sql/pglite': '>=0.2.0'
+      '@libsql/client': '>=0.10.0'
+      '@libsql/client-wasm': '>=0.10.0'
+      '@neondatabase/serverless': '>=0.10.0'
+      '@op-engineering/op-sqlite': '>=2'
+      '@opentelemetry/api': ^1.4.1
+      '@planetscale/database': '>=1.13'
+      '@prisma/client': '*'
+      '@tidbcloud/serverless': '*'
+      '@types/better-sqlite3': '*'
+      '@types/pg': '*'
+      '@types/sql.js': '*'
+      '@upstash/redis': '>=1.34.7'
+      '@vercel/postgres': '>=0.8.0'
+      '@xata.io/client': '*'
+      better-sqlite3: '>=7'
+      bun-types: '*'
+      expo-sqlite: '>=14.0.0'
+      gel: '>=2'
+      knex: '*'
+      kysely: '*'
+      mysql2: '>=2'
+      pg: '>=8'
+      postgres: '>=3'
+      prisma: '*'
+      sql.js: '>=1'
+      sqlite3: '>=5'
+    peerDependenciesMeta:
+      '@aws-sdk/client-rds-data':
+        optional: true
+      '@cloudflare/workers-types':
+        optional: true
+      '@electric-sql/pglite':
+        optional: true
+      '@libsql/client':
+        optional: true
+      '@libsql/client-wasm':
+        optional: true
+      '@neondatabase/serverless':
+        optional: true
+      '@op-engineering/op-sqlite':
+        optional: true
+      '@opentelemetry/api':
+        optional: true
+      '@planetscale/database':
+        optional: true
+      '@prisma/client':
+        optional: true
+      '@tidbcloud/serverless':
+        optional: true
+      '@types/better-sqlite3':
+        optional: true
+      '@types/pg':
+        optional: true
+      '@types/sql.js':
+        optional: true
+      '@upstash/redis':
+        optional: true
+      '@vercel/postgres':
+        optional: true
+      '@xata.io/client':
+        optional: true
+      better-sqlite3:
+        optional: true
+      bun-types:
+        optional: true
+      expo-sqlite:
+        optional: true
+      gel:
+        optional: true
+      knex:
+        optional: true
+      kysely:
+        optional: true
+      mysql2:
+        optional: true
+      pg:
+        optional: true
+      postgres:
+        optional: true
+      prisma:
+        optional: true
+      sql.js:
+        optional: true
+      sqlite3:
+        optional: true
+
+  dunder-proto@1.0.1:
+    resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
+    engines: {node: '>= 0.4'}
+
+  electron-to-chromium@1.5.249:
+    resolution: {integrity: sha512-5vcfL3BBe++qZ5kuFhD/p8WOM1N9m3nwvJPULJx+4xf2usSlZFJ0qoNYO2fOX4hi3ocuDcmDobtA+5SFr4OmBg==}
+
+  emoji-regex@9.2.2:
+    resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
+
+  end-of-stream@1.4.5:
+    resolution: {integrity: sha512-ooEGc6HP26xXq/N+GCGOT0JKCLDGrq2bQUZrQ7gyrJiZANJ/8YDTxTpQBXGMn+WbIQXNVpyWymm7KYVICQnyOg==}
+
+  enhanced-resolve@5.18.3:
+    resolution: {integrity: sha512-d4lC8xfavMeBjzGr2vECC3fsGXziXZQyJxD868h2M/mBI3PwAuODxAkLkq5HYuvrPYcUtiLzsTo8U3PgX3Ocww==}
+    engines: {node: '>=10.13.0'}
+
+  es-abstract@1.24.0:
+    resolution: {integrity: sha512-WSzPgsdLtTcQwm4CROfS5ju2Wa1QQcVeT37jFjYzdFz1r9ahadC8B8/a4qxJxM+09F18iumCdRmlr96ZYkQvEg==}
+    engines: {node: '>= 0.4'}
+
+  es-define-property@1.0.1:
+    resolution: {integrity: sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==}
+    engines: {node: '>= 0.4'}
+
+  es-errors@1.3.0:
+    resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==}
+    engines: {node: '>= 0.4'}
+
+  es-iterator-helpers@1.2.1:
+    resolution: {integrity: sha512-uDn+FE1yrDzyC0pCo961B2IHbdM8y/ACZsKD4dG6WqrjV53BADjwa7D+1aom2rsNVfLyDgU/eigvlJGJ08OQ4w==}
+    engines: {node: '>= 0.4'}
+
+  es-object-atoms@1.1.1:
+    resolution: {integrity: sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==}
+    engines: {node: '>= 0.4'}
+
+  es-set-tostringtag@2.1.0:
+    resolution: {integrity: sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==}
+    engines: {node: '>= 0.4'}
+
+  es-shim-unscopables@1.1.0:
+    resolution: {integrity: sha512-d9T8ucsEhh8Bi1woXCf+TIKDIROLG5WCkxg8geBCbvk22kzwC5G2OnXVMO6FUsvQlgUUXQ2itephWDLqDzbeCw==}
+    engines: {node: '>= 0.4'}
+
+  es-to-primitive@1.3.0:
+    resolution: {integrity: sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==}
+    engines: {node: '>= 0.4'}
+
+  es-toolkit@1.40.0:
+    resolution: {integrity: sha512-8o6w0KFmU0CiIl0/Q/BCEOabF2IJaELM1T2PWj6e8KqzHv1gdx+7JtFnDwOx1kJH/isJ5NwlDG1nCr1HrRF94Q==}
+
+  es6-promise@4.2.8:
+    resolution: {integrity: sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w==}
+
+  esbuild-register@3.6.0:
+    resolution: {integrity: sha512-H2/S7Pm8a9CL1uhp9OvjwrBh5Pvx0H8qVOxNu8Wed9Y7qv56MPtq+GGM8RJpq6glYJn9Wspr8uw7l55uyinNeg==}
+    peerDependencies:
+      esbuild: '>=0.12 <1'
+
+  esbuild@0.18.20:
+    resolution: {integrity: sha512-ceqxoedUrcayh7Y7ZX6NdbbDzGROiyVBgC4PriJThBKSVPWnnFHZAkfI1lJT8QFkOwH4qOS2SJkS4wvpGl8BpA==}
+    engines: {node: '>=12'}
+    hasBin: true
+
+  esbuild@0.25.10:
+    resolution: {integrity: sha512-9RiGKvCwaqxO2owP61uQ4BgNborAQskMR6QusfWzQqv7AZOg5oGehdY2pRJMTKuwxd1IDBP4rSbI5lHzU7SMsQ==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  escalade@3.2.0:
+    resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
+    engines: {node: '>=6'}
+
+  escape-string-regexp@4.0.0:
+    resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
+    engines: {node: '>=10'}
+
+  eslint-config-next@16.0.3:
+    resolution: {integrity: sha512-5F6qDjcZldf0Y0ZbqvWvap9xzYUxyDf7/of37aeyhvkrQokj/4bT1JYWZdlWUr283aeVa+s52mPq9ogmGg+5dw==}
+    peerDependencies:
+      eslint: '>=9.0.0'
+      typescript: '>=3.3.1'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  eslint-import-resolver-node@0.3.9:
+    resolution: {integrity: sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==}
+
+  eslint-import-resolver-typescript@3.10.1:
+    resolution: {integrity: sha512-A1rHYb06zjMGAxdLSkN2fXPBwuSaQ0iO5M/hdyS0Ajj1VBaRp0sPD3dn1FhME3c/JluGFbwSxyCfqdSbtQLAHQ==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    peerDependencies:
+      eslint: '*'
+      eslint-plugin-import: '*'
+      eslint-plugin-import-x: '*'
+    peerDependenciesMeta:
+      eslint-plugin-import:
+        optional: true
+      eslint-plugin-import-x:
+        optional: true
+
+  eslint-module-utils@2.12.1:
+    resolution: {integrity: sha512-L8jSWTze7K2mTg0vos/RuLRS5soomksDPoJLXIslC7c8Wmut3bx7CPpJijDcBZtxQ5lrbUdM+s0OlNbz0DCDNw==}
+    engines: {node: '>=4'}
+    peerDependencies:
+      '@typescript-eslint/parser': '*'
+      eslint: '*'
+      eslint-import-resolver-node: '*'
+      eslint-import-resolver-typescript: '*'
+      eslint-import-resolver-webpack: '*'
+    peerDependenciesMeta:
+      '@typescript-eslint/parser':
+        optional: true
+      eslint:
+        optional: true
+      eslint-import-resolver-node:
+        optional: true
+      eslint-import-resolver-typescript:
+        optional: true
+      eslint-import-resolver-webpack:
+        optional: true
+
+  eslint-plugin-import@2.32.0:
+    resolution: {integrity: sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==}
+    engines: {node: '>=4'}
+    peerDependencies:
+      '@typescript-eslint/parser': '*'
+      eslint: ^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8 || ^9
+    peerDependenciesMeta:
+      '@typescript-eslint/parser':
+        optional: true
+
+  eslint-plugin-jsx-a11y@6.10.2:
+    resolution: {integrity: sha512-scB3nz4WmG75pV8+3eRUQOHZlNSUhFNq37xnpgRkCCELU3XMvXAxLk1eqWWyE22Ki4Q01Fnsw9BA3cJHDPgn2Q==}
+    engines: {node: '>=4.0'}
+    peerDependencies:
+      eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9
+
+  eslint-plugin-react-hooks@7.0.1:
+    resolution: {integrity: sha512-O0d0m04evaNzEPoSW+59Mezf8Qt0InfgGIBJnpC0h3NH/WjUAR7BIKUfysC6todmtiZ/A0oUVS8Gce0WhBrHsA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0
+
+  eslint-plugin-react@7.37.5:
+    resolution: {integrity: sha512-Qteup0SqU15kdocexFNAJMvCJEfa2xUKNV4CC1xsVMrIIqEy3SQ/rqyxCWNzfrd3/ldy6HMlD2e0JDVpDg2qIA==}
+    engines: {node: '>=4'}
+    peerDependencies:
+      eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7
+
+  eslint-scope@8.4.0:
+    resolution: {integrity: sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  eslint-visitor-keys@3.4.3:
+    resolution: {integrity: sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+
+  eslint-visitor-keys@4.2.1:
+    resolution: {integrity: sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  eslint@9.39.1:
+    resolution: {integrity: sha512-BhHmn2yNOFA9H9JmmIVKJmd288g9hrVRDkdoIgRCRuSySRUHH7r/DI6aAXW9T1WwUuY3DFgrcaqB+deURBLR5g==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    hasBin: true
+    peerDependencies:
+      jiti: '*'
+    peerDependenciesMeta:
+      jiti:
+        optional: true
+
+  espree@10.4.0:
+    resolution: {integrity: sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  esquery@1.6.0:
+    resolution: {integrity: sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==}
+    engines: {node: '>=0.10'}
+
+  esrecurse@4.3.0:
+    resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==}
+    engines: {node: '>=4.0'}
+
+  estraverse@5.3.0:
+    resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==}
+    engines: {node: '>=4.0'}
+
+  esutils@2.0.3:
+    resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
+    engines: {node: '>=0.10.0'}
+
+  eventemitter3@5.0.1:
+    resolution: {integrity: sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==}
+
+  eventsource-parser@3.0.6:
+    resolution: {integrity: sha512-Vo1ab+QXPzZ4tCa8SwIHJFaSzy4R6SHf7BY79rFBDf0idraZWAkYrDjDj8uWaSm3S2TK+hJ7/t1CEmZ7jXw+pg==}
+    engines: {node: '>=18.0.0'}
+
+  expand-template@2.0.3:
+    resolution: {integrity: sha512-XYfuKMvj4O35f/pOXLObndIRvyQ+/+6AhODh+OKWj9S9498pHHn/IMszH+gt0fBCRWMNfk1ZSp5x3AifmnI2vg==}
+    engines: {node: '>=6'}
+
+  fast-deep-equal@3.1.3:
+    resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
+
+  fast-glob@3.3.1:
+    resolution: {integrity: sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==}
+    engines: {node: '>=8.6.0'}
+
+  fast-glob@3.3.3:
+    resolution: {integrity: sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==}
+    engines: {node: '>=8.6.0'}
+
+  fast-json-stable-stringify@2.1.0:
+    resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
+
+  fast-levenshtein@2.0.6:
+    resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
+
+  fast-sha256@1.3.0:
+    resolution: {integrity: sha512-n11RGP/lrWEFI/bWdygLxhI+pVeo1ZYIVwvvPkW7azl/rOy+F3HYRZ2K5zeE9mmkhQppyv9sQFx0JM9UabnpPQ==}
+
+  fastq@1.19.1:
+    resolution: {integrity: sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==}
+
+  fdir@6.5.0:
+    resolution: {integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      picomatch: ^3 || ^4
+    peerDependenciesMeta:
+      picomatch:
+        optional: true
+
+  file-entry-cache@8.0.0:
+    resolution: {integrity: sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==}
+    engines: {node: '>=16.0.0'}
+
+  file-uri-to-path@1.0.0:
+    resolution: {integrity: sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==}
+
+  fill-range@7.1.1:
+    resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
+    engines: {node: '>=8'}
+
+  find-up@5.0.0:
+    resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
+    engines: {node: '>=10'}
+
+  flat-cache@4.0.1:
+    resolution: {integrity: sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==}
+    engines: {node: '>=16'}
+
+  flatted@3.3.3:
+    resolution: {integrity: sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==}
+
+  for-each@0.3.5:
+    resolution: {integrity: sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==}
+    engines: {node: '>= 0.4'}
+
+  framer-motion@12.23.24:
+    resolution: {integrity: sha512-HMi5HRoRCTou+3fb3h9oTLyJGBxHfW+HnNE25tAXOvVx/IvwMHK0cx7IR4a2ZU6sh3IX1Z+4ts32PcYBOqka8w==}
+    peerDependencies:
+      '@emotion/is-prop-valid': '*'
+      react: ^18.0.0 || ^19.0.0
+      react-dom: ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@emotion/is-prop-valid':
+        optional: true
+      react:
+        optional: true
+      react-dom:
+        optional: true
+
+  fs-constants@1.0.0:
+    resolution: {integrity: sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==}
+
+  fsevents@2.3.3:
+    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+
+  function-bind@1.1.2:
+    resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
+
+  function.prototype.name@1.1.8:
+    resolution: {integrity: sha512-e5iwyodOHhbMr/yNrc7fDYG4qlbIvI5gajyzPnb5TCwyhjApznQh1BMFou9b30SevY43gCJKXycoCBjMbsuW0Q==}
+    engines: {node: '>= 0.4'}
+
+  functions-have-names@1.2.3:
+    resolution: {integrity: sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==}
+
+  generator-function@2.0.1:
+    resolution: {integrity: sha512-SFdFmIJi+ybC0vjlHN0ZGVGHc3lgE0DxPAT0djjVg+kjOnSqclqmj0KQ7ykTOLP6YxoqOvuAODGdcHJn+43q3g==}
+    engines: {node: '>= 0.4'}
+
+  gensync@1.0.0-beta.2:
+    resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
+    engines: {node: '>=6.9.0'}
+
+  get-intrinsic@1.3.0:
+    resolution: {integrity: sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==}
+    engines: {node: '>= 0.4'}
+
+  get-nonce@1.0.1:
+    resolution: {integrity: sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==}
+    engines: {node: '>=6'}
+
+  get-proto@1.0.1:
+    resolution: {integrity: sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==}
+    engines: {node: '>= 0.4'}
+
+  get-symbol-description@1.1.0:
+    resolution: {integrity: sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg==}
+    engines: {node: '>= 0.4'}
+
+  get-tsconfig@4.12.0:
+    resolution: {integrity: sha512-LScr2aNr2FbjAjZh2C6X6BxRx1/x+aTDExct/xyq2XKbYOiG5c0aK7pMsSuyc0brz3ibr/lbQiHD9jzt4lccJw==}
+
+  github-from-package@0.0.0:
+    resolution: {integrity: sha512-SyHy3T1v2NUXn29OsWdxmK6RwHD+vkj3v8en8AOBZ1wBQ/hCAQ5bAQTD02kW4W9tUp/3Qh6J8r9EvntiyCmOOw==}
+
+  glob-parent@5.1.2:
+    resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
+    engines: {node: '>= 6'}
+
+  glob-parent@6.0.2:
+    resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
+    engines: {node: '>=10.13.0'}
+
+  globals@14.0.0:
+    resolution: {integrity: sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==}
+    engines: {node: '>=18'}
+
+  globals@16.4.0:
+    resolution: {integrity: sha512-ob/2LcVVaVGCYN+r14cnwnoDPUufjiYgSqRhiFD0Q1iI4Odora5RE8Iv1D24hAz5oMophRGkGz+yuvQmmUMnMw==}
+    engines: {node: '>=18'}
+
+  globalthis@1.0.4:
+    resolution: {integrity: sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==}
+    engines: {node: '>= 0.4'}
+
+  gopd@1.2.0:
+    resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==}
+    engines: {node: '>= 0.4'}
+
+  graceful-fs@4.2.11:
+    resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
+
+  graphemer@1.4.0:
+    resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
+
+  has-bigints@1.1.0:
+    resolution: {integrity: sha512-R3pbpkcIqv2Pm3dUwgjclDRVmWpTJW2DcMzcIhEXEx1oh/CEMObMm3KLmRJOdvhM7o4uQBnwr8pzRK2sJWIqfg==}
+    engines: {node: '>= 0.4'}
+
+  has-flag@4.0.0:
+    resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
+    engines: {node: '>=8'}
+
+  has-property-descriptors@1.0.2:
+    resolution: {integrity: sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==}
+
+  has-proto@1.2.0:
+    resolution: {integrity: sha512-KIL7eQPfHQRC8+XluaIw7BHUwwqL19bQn4hzNgdr+1wXoU0KKj6rufu47lhY7KbJR2C6T6+PfyN0Ea7wkSS+qQ==}
+    engines: {node: '>= 0.4'}
+
+  has-symbols@1.1.0:
+    resolution: {integrity: sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==}
+    engines: {node: '>= 0.4'}
+
+  has-tostringtag@1.0.2:
+    resolution: {integrity: sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==}
+    engines: {node: '>= 0.4'}
+
+  hasown@2.0.2:
+    resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
+    engines: {node: '>= 0.4'}
+
+  hermes-estree@0.25.1:
+    resolution: {integrity: sha512-0wUoCcLp+5Ev5pDW2OriHC2MJCbwLwuRx+gAqMTOkGKJJiBCLjtrvy4PWUGn6MIVefecRpzoOZ/UV6iGdOr+Cw==}
+
+  hermes-parser@0.25.1:
+    resolution: {integrity: sha512-6pEjquH3rqaI6cYAXYPcz9MS4rY6R4ngRgrgfDshRptUZIc3lw0MCIJIGDj9++mfySOuPTHB4nrSW99BCvOPIA==}
+
+  ieee754@1.2.1:
+    resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
+
+  ignore@5.3.2:
+    resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
+    engines: {node: '>= 4'}
+
+  ignore@7.0.5:
+    resolution: {integrity: sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==}
+    engines: {node: '>= 4'}
+
+  immer@10.1.3:
+    resolution: {integrity: sha512-tmjF/k8QDKydUlm3mZU+tjM6zeq9/fFpPqH9SzWmBnVVKsPBg/V66qsMwb3/Bo90cgUN+ghdVBess+hPsxUyRw==}
+
+  import-fresh@3.3.1:
+    resolution: {integrity: sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==}
+    engines: {node: '>=6'}
+
+  imurmurhash@0.1.4:
+    resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
+    engines: {node: '>=0.8.19'}
+
+  inherits@2.0.4:
+    resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
+
+  ini@1.3.8:
+    resolution: {integrity: sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==}
+
+  internal-slot@1.1.0:
+    resolution: {integrity: sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==}
+    engines: {node: '>= 0.4'}
+
+  internmap@2.0.3:
+    resolution: {integrity: sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==}
+    engines: {node: '>=12'}
+
+  is-array-buffer@3.0.5:
+    resolution: {integrity: sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==}
+    engines: {node: '>= 0.4'}
+
+  is-async-function@2.1.1:
+    resolution: {integrity: sha512-9dgM/cZBnNvjzaMYHVoxxfPj2QXt22Ev7SuuPrs+xav0ukGB0S6d4ydZdEiM48kLx5kDV+QBPrpVnFyefL8kkQ==}
+    engines: {node: '>= 0.4'}
+
+  is-bigint@1.1.0:
+    resolution: {integrity: sha512-n4ZT37wG78iz03xPRKJrHTdZbe3IicyucEtdRsV5yglwc3GyUfbAfpSeD0FJ41NbUNSt5wbhqfp1fS+BgnvDFQ==}
+    engines: {node: '>= 0.4'}
+
+  is-boolean-object@1.2.2:
+    resolution: {integrity: sha512-wa56o2/ElJMYqjCjGkXri7it5FbebW5usLw/nPmCMs5DeZ7eziSYZhSmPRn0txqeW4LnAmQQU7FgqLpsEFKM4A==}
+    engines: {node: '>= 0.4'}
+
+  is-bun-module@2.0.0:
+    resolution: {integrity: sha512-gNCGbnnnnFAUGKeZ9PdbyeGYJqewpmc2aKHUEMO5nQPWU9lOmv7jcmQIv+qHD8fXW6W7qfuCwX4rY9LNRjXrkQ==}
+
+  is-callable@1.2.7:
+    resolution: {integrity: sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==}
+    engines: {node: '>= 0.4'}
+
+  is-core-module@2.16.1:
+    resolution: {integrity: sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==}
+    engines: {node: '>= 0.4'}
+
+  is-data-view@1.0.2:
+    resolution: {integrity: sha512-RKtWF8pGmS87i2D6gqQu/l7EYRlVdfzemCJN/P3UOs//x1QE7mfhvzHIApBTRf7axvT6DMGwSwBXYCT0nfB9xw==}
+    engines: {node: '>= 0.4'}
+
+  is-date-object@1.1.0:
+    resolution: {integrity: sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==}
+    engines: {node: '>= 0.4'}
+
+  is-extglob@2.1.1:
+    resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
+    engines: {node: '>=0.10.0'}
+
+  is-finalizationregistry@1.1.1:
+    resolution: {integrity: sha512-1pC6N8qWJbWoPtEjgcL2xyhQOP491EQjeUo3qTKcmV8YSDDJrOepfG8pcC7h/QgnQHYSv0mJ3Z/ZWxmatVrysg==}
+    engines: {node: '>= 0.4'}
+
+  is-generator-function@1.1.2:
+    resolution: {integrity: sha512-upqt1SkGkODW9tsGNG5mtXTXtECizwtS2kA161M+gJPc1xdb/Ax629af6YrTwcOeQHbewrPNlE5Dx7kzvXTizA==}
+    engines: {node: '>= 0.4'}
+
+  is-glob@4.0.3:
+    resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
+    engines: {node: '>=0.10.0'}
+
+  is-map@2.0.3:
+    resolution: {integrity: sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==}
+    engines: {node: '>= 0.4'}
+
+  is-negative-zero@2.0.3:
+    resolution: {integrity: sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==}
+    engines: {node: '>= 0.4'}
+
+  is-number-object@1.1.1:
+    resolution: {integrity: sha512-lZhclumE1G6VYD8VHe35wFaIif+CTy5SJIi5+3y4psDgWu4wPDoBhF8NxUOinEc7pHgiTsT6MaBb92rKhhD+Xw==}
+    engines: {node: '>= 0.4'}
+
+  is-number@7.0.0:
+    resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
+    engines: {node: '>=0.12.0'}
+
+  is-regex@1.2.1:
+    resolution: {integrity: sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==}
+    engines: {node: '>= 0.4'}
+
+  is-set@2.0.3:
+    resolution: {integrity: sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==}
+    engines: {node: '>= 0.4'}
+
+  is-shared-array-buffer@1.0.4:
+    resolution: {integrity: sha512-ISWac8drv4ZGfwKl5slpHG9OwPNty4jOWPRIhBpxOoD+hqITiwuipOQ2bNthAzwA3B4fIjO4Nln74N0S9byq8A==}
+    engines: {node: '>= 0.4'}
+
+  is-string@1.1.1:
+    resolution: {integrity: sha512-BtEeSsoaQjlSPBemMQIrY1MY0uM6vnS1g5fmufYOtnxLGUZM2178PKbhsk7Ffv58IX+ZtcvoGwccYsh0PglkAA==}
+    engines: {node: '>= 0.4'}
+
+  is-symbol@1.1.1:
+    resolution: {integrity: sha512-9gGx6GTtCQM73BgmHQXfDmLtfjjTUDSyoxTCbp5WtoixAhfgsDirWIcVQ/IHpvI5Vgd5i/J5F7B9cN/WlVbC/w==}
+    engines: {node: '>= 0.4'}
+
+  is-typed-array@1.1.15:
+    resolution: {integrity: sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==}
+    engines: {node: '>= 0.4'}
+
+  is-weakmap@2.0.2:
+    resolution: {integrity: sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==}
+    engines: {node: '>= 0.4'}
+
+  is-weakref@1.1.1:
+    resolution: {integrity: sha512-6i9mGWSlqzNMEqpCp93KwRS1uUOodk2OJ6b+sq7ZPDSy2WuI5NFIxp/254TytR8ftefexkWn5xNiHUNpPOfSew==}
+    engines: {node: '>= 0.4'}
+
+  is-weakset@2.0.4:
+    resolution: {integrity: sha512-mfcwb6IzQyOKTs84CQMrOwW4gQcaTOAWJ0zzJCl2WSPDrWk/OzDaImWFH3djXhb24g4eudZfLRozAvPGw4d9hQ==}
+    engines: {node: '>= 0.4'}
+
+  isarray@2.0.5:
+    resolution: {integrity: sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==}
+
+  isexe@2.0.0:
+    resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
+
+  iterator.prototype@1.1.5:
+    resolution: {integrity: sha512-H0dkQoCa3b2VEeKQBOxFph+JAbcrQdE7KC0UkqwpLmv2EC4P41QXP+rqo9wYodACiG5/WM5s9oDApTU8utwj9g==}
+    engines: {node: '>= 0.4'}
+
+  jiti@2.6.1:
+    resolution: {integrity: sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==}
+    hasBin: true
+
+  jose@6.1.0:
+    resolution: {integrity: sha512-TTQJyoEoKcC1lscpVDCSsVgYzUDg/0Bt3WE//WiTPK6uOCQC2KZS4MpugbMWt/zyjkopgZoXhZuCi00gLudfUA==}
+
+  js-tokens@4.0.0:
+    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
+
+  js-yaml@4.1.0:
+    resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
+    hasBin: true
+
+  jsesc@3.1.0:
+    resolution: {integrity: sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==}
+    engines: {node: '>=6'}
+    hasBin: true
+
+  json-buffer@3.0.1:
+    resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
+
+  json-schema-traverse@0.4.1:
+    resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
+
+  json-schema@0.4.0:
+    resolution: {integrity: sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA==}
+
+  json-stable-stringify-without-jsonify@1.0.1:
+    resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
+
+  json5@1.0.2:
+    resolution: {integrity: sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==}
+    hasBin: true
+
+  json5@2.2.3:
+    resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==}
+    engines: {node: '>=6'}
+    hasBin: true
+
+  jsx-ast-utils@3.3.5:
+    resolution: {integrity: sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==}
+    engines: {node: '>=4.0'}
+
+  keyv@4.5.4:
+    resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
+
+  kysely@0.28.8:
+    resolution: {integrity: sha512-QUOgl5ZrS9IRuhq5FvOKFSsD/3+IA6MLE81/bOOTRA/YQpKDza2sFdN5g6JCB9BOpqMJDGefLCQ9F12hRS13TA==}
+    engines: {node: '>=20.0.0'}
+
+  language-subtag-registry@0.3.23:
+    resolution: {integrity: sha512-0K65Lea881pHotoGEa5gDlMxt3pctLi2RplBb7Ezh4rRdLEOtgi7n4EwK9lamnUCkKBqaeKRVebTq6BAxSkpXQ==}
+
+  language-tags@1.0.9:
+    resolution: {integrity: sha512-MbjN408fEndfiQXbFQ1vnd+1NoLDsnQW41410oQBXiyXDMYH5z505juWa4KUE1LqxRC7DgOgZDbKLxHIwm27hA==}
+    engines: {node: '>=0.10'}
+
+  levn@0.4.1:
+    resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
+    engines: {node: '>= 0.8.0'}
+
+  lightningcss-android-arm64@1.30.2:
+    resolution: {integrity: sha512-BH9sEdOCahSgmkVhBLeU7Hc9DWeZ1Eb6wNS6Da8igvUwAe0sqROHddIlvU06q3WyXVEOYDZ6ykBZQnjTbmo4+A==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [android]
+
+  lightningcss-darwin-arm64@1.30.2:
+    resolution: {integrity: sha512-ylTcDJBN3Hp21TdhRT5zBOIi73P6/W0qwvlFEk22fkdXchtNTOU4Qc37SkzV+EKYxLouZ6M4LG9NfZ1qkhhBWA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+
+  lightningcss-darwin-x64@1.30.2:
+    resolution: {integrity: sha512-oBZgKchomuDYxr7ilwLcyms6BCyLn0z8J0+ZZmfpjwg9fRVZIR5/GMXd7r9RH94iDhld3UmSjBM6nXWM2TfZTQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [darwin]
+
+  lightningcss-freebsd-x64@1.30.2:
+    resolution: {integrity: sha512-c2bH6xTrf4BDpK8MoGG4Bd6zAMZDAXS569UxCAGcA7IKbHNMlhGQ89eRmvpIUGfKWNVdbhSbkQaWhEoMGmGslA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+
+  lightningcss-linux-arm-gnueabihf@1.30.2:
+    resolution: {integrity: sha512-eVdpxh4wYcm0PofJIZVuYuLiqBIakQ9uFZmipf6LF/HRj5Bgm0eb3qL/mr1smyXIS1twwOxNWndd8z0E374hiA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm]
+    os: [linux]
+
+  lightningcss-linux-arm64-gnu@1.30.2:
+    resolution: {integrity: sha512-UK65WJAbwIJbiBFXpxrbTNArtfuznvxAJw4Q2ZGlU8kPeDIWEX1dg3rn2veBVUylA2Ezg89ktszWbaQnxD/e3A==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  lightningcss-linux-arm64-musl@1.30.2:
+    resolution: {integrity: sha512-5Vh9dGeblpTxWHpOx8iauV02popZDsCYMPIgiuw97OJ5uaDsL86cnqSFs5LZkG3ghHoX5isLgWzMs+eD1YzrnA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  lightningcss-linux-x64-gnu@1.30.2:
+    resolution: {integrity: sha512-Cfd46gdmj1vQ+lR6VRTTadNHu6ALuw2pKR9lYq4FnhvgBc4zWY1EtZcAc6EffShbb1MFrIPfLDXD6Xprbnni4w==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  lightningcss-linux-x64-musl@1.30.2:
+    resolution: {integrity: sha512-XJaLUUFXb6/QG2lGIW6aIk6jKdtjtcffUT0NKvIqhSBY3hh9Ch+1LCeH80dR9q9LBjG3ewbDjnumefsLsP6aiA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  lightningcss-win32-arm64-msvc@1.30.2:
+    resolution: {integrity: sha512-FZn+vaj7zLv//D/192WFFVA0RgHawIcHqLX9xuWiQt7P0PtdFEVaxgF9rjM/IRYHQXNnk61/H/gb2Ei+kUQ4xQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [win32]
+
+  lightningcss-win32-x64-msvc@1.30.2:
+    resolution: {integrity: sha512-5g1yc73p+iAkid5phb4oVFMB45417DkRevRbt/El/gKXJk4jid+vPFF/AXbxn05Aky8PapwzZrdJShv5C0avjw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [win32]
+
+  lightningcss@1.30.2:
+    resolution: {integrity: sha512-utfs7Pr5uJyyvDETitgsaqSyjCb2qNRAtuqUeWIAKztsOYdcACf2KtARYXg2pSvhkt+9NfoaNY7fxjl6nuMjIQ==}
+    engines: {node: '>= 12.0.0'}
+
+  locate-path@6.0.0:
+    resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
+    engines: {node: '>=10'}
+
+  lodash.merge@4.6.2:
+    resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
+
+  loose-envify@1.4.0:
+    resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
+    hasBin: true
+
+  lru-cache@5.1.1:
+    resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
+
+  lucide-react@0.553.0:
+    resolution: {integrity: sha512-BRgX5zrWmNy/lkVAe0dXBgd7XQdZ3HTf+Hwe3c9WK6dqgnj9h+hxV+MDncM88xDWlCq27+TKvHGE70ViODNILw==}
+    peerDependencies:
+      react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
+  magic-string@0.30.21:
+    resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
+
+  math-intrinsics@1.1.0:
+    resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
+    engines: {node: '>= 0.4'}
+
+  merge2@1.4.1:
+    resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
+    engines: {node: '>= 8'}
+
+  micromatch@4.0.8:
+    resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
+    engines: {node: '>=8.6'}
+
+  mimic-response@3.1.0:
+    resolution: {integrity: sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==}
+    engines: {node: '>=10'}
+
+  minimatch@3.1.2:
+    resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
+
+  minimatch@9.0.5:
+    resolution: {integrity: sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==}
+    engines: {node: '>=16 || 14 >=14.17'}
+
+  minimist@1.2.8:
+    resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
+
+  mkdirp-classic@0.5.3:
+    resolution: {integrity: sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==}
+
+  motion-dom@12.23.23:
+    resolution: {integrity: sha512-n5yolOs0TQQBRUFImrRfs/+6X4p3Q4n1dUEqt/H58Vx7OW6RF+foWEgmTVDhIWJIMXOuNNL0apKH2S16en9eiA==}
+
+  motion-utils@12.23.6:
+    resolution: {integrity: sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ==}
+
+  motion@12.23.24:
+    resolution: {integrity: sha512-Rc5E7oe2YZ72N//S3QXGzbnXgqNrTESv8KKxABR20q2FLch9gHLo0JLyYo2hZ238bZ9Gx6cWhj9VO0IgwbMjCw==}
+    peerDependencies:
+      '@emotion/is-prop-valid': '*'
+      react: ^18.0.0 || ^19.0.0
+      react-dom: ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@emotion/is-prop-valid':
+        optional: true
+      react:
+        optional: true
+      react-dom:
+        optional: true
+
+  ms@2.1.3:
+    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
+
+  nanoid@3.3.11:
+    resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+
+  nanostores@1.0.1:
+    resolution: {integrity: sha512-kNZ9xnoJYKg/AfxjrVL4SS0fKX++4awQReGqWnwTRHxeHGZ1FJFVgTqr/eMrNQdp0Tz7M7tG/TDaX8QfHDwVCw==}
+    engines: {node: ^20.0.0 || >=22.0.0}
+
+  napi-build-utils@2.0.0:
+    resolution: {integrity: sha512-GEbrYkbfF7MoNaoh2iGG84Mnf/WZfB0GdGEsM8wz7Expx/LlWf5U8t9nvJKXSp3qr5IsEbK04cBGhol/KwOsWA==}
+
+  napi-postinstall@0.3.4:
+    resolution: {integrity: sha512-PHI5f1O0EP5xJ9gQmFGMS6IZcrVvTjpXjz7Na41gTE7eE2hK11lg04CECCYEEjdc17EV4DO+fkGEtt7TpTaTiQ==}
+    engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
+    hasBin: true
+
+  natural-compare@1.4.0:
+    resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
+
+  next-themes@0.4.6:
+    resolution: {integrity: sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==}
+    peerDependencies:
+      react: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
+
+  next@16.0.3:
+    resolution: {integrity: sha512-Ka0/iNBblPFcIubTA1Jjh6gvwqfjrGq1Y2MTI5lbjeLIAfmC+p5bQmojpRZqgHHVu5cG4+qdIiwXiBSm/8lZ3w==}
+    engines: {node: '>=20.9.0'}
+    hasBin: true
+    peerDependencies:
+      '@opentelemetry/api': ^1.1.0
+      '@playwright/test': ^1.51.1
+      babel-plugin-react-compiler: '*'
+      react: ^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0
+      react-dom: ^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0
+      sass: ^1.3.0
+    peerDependenciesMeta:
+      '@opentelemetry/api':
+        optional: true
+      '@playwright/test':
+        optional: true
+      babel-plugin-react-compiler:
+        optional: true
+      sass:
+        optional: true
+
+  node-abi@3.78.0:
+    resolution: {integrity: sha512-E2wEyrgX/CqvicaQYU3Ze1PFGjc4QYPGsjUrlYkqAE0WjHEZwgOsGMPMzkMse4LjJbDmaEuDX3CM036j5K2DSQ==}
+    engines: {node: '>=10'}
+
+  node-releases@2.0.27:
+    resolution: {integrity: sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==}
+
+  object-assign@4.1.1:
+    resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
+    engines: {node: '>=0.10.0'}
+
+  object-inspect@1.13.4:
+    resolution: {integrity: sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==}
+    engines: {node: '>= 0.4'}
+
+  object-keys@1.1.1:
+    resolution: {integrity: sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==}
+    engines: {node: '>= 0.4'}
+
+  object.assign@4.1.7:
+    resolution: {integrity: sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==}
+    engines: {node: '>= 0.4'}
+
+  object.entries@1.1.9:
+    resolution: {integrity: sha512-8u/hfXFRBD1O0hPUjioLhoWFHRmt6tKA4/vZPyckBr18l1KE9uHrFaFaUi8MDRTpi4uak2goyPTSNJLXX2k2Hw==}
+    engines: {node: '>= 0.4'}
+
+  object.fromentries@2.0.8:
+    resolution: {integrity: sha512-k6E21FzySsSK5a21KRADBd/NGneRegFO5pLHfdQLpRDETUNJueLXs3WCzyQ3tFRDYgbq3KHGXfTbi2bs8WQ6rQ==}
+    engines: {node: '>= 0.4'}
+
+  object.groupby@1.0.3:
+    resolution: {integrity: sha512-+Lhy3TQTuzXI5hevh8sBGqbmurHbbIjAi0Z4S63nthVLmLxfbj4T54a4CfZrXIrt9iP4mVAPYMo/v99taj3wjQ==}
+    engines: {node: '>= 0.4'}
+
+  object.values@1.2.1:
+    resolution: {integrity: sha512-gXah6aZrcUxjWg2zR2MwouP2eHlCBzdV4pygudehaKXSGW4v2AsRQUK+lwwXhii6KFZcunEnmSUoYp5CXibxtA==}
+    engines: {node: '>= 0.4'}
+
+  once@1.4.0:
+    resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
+
+  optionator@0.9.4:
+    resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
+    engines: {node: '>= 0.8.0'}
+
+  own-keys@1.0.1:
+    resolution: {integrity: sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==}
+    engines: {node: '>= 0.4'}
+
+  p-limit@3.1.0:
+    resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
+    engines: {node: '>=10'}
+
+  p-locate@5.0.0:
+    resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
+    engines: {node: '>=10'}
+
+  parent-module@1.0.1:
+    resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
+    engines: {node: '>=6'}
+
+  path-exists@4.0.0:
+    resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
+    engines: {node: '>=8'}
+
+  path-key@3.1.1:
+    resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
+    engines: {node: '>=8'}
+
+  path-parse@1.0.7:
+    resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
+
+  pg-cloudflare@1.2.7:
+    resolution: {integrity: sha512-YgCtzMH0ptvZJslLM1ffsY4EuGaU0cx4XSdXLRFae8bPP4dS5xL1tNB3k2o/N64cHJpwU7dxKli/nZ2lUa5fLg==}
+
+  pg-connection-string@2.9.1:
+    resolution: {integrity: sha512-nkc6NpDcvPVpZXxrreI/FOtX3XemeLl8E0qFr6F2Lrm/I8WOnaWNhIPK2Z7OHpw7gh5XJThi6j6ppgNoaT1w4w==}
+
+  pg-int8@1.0.1:
+    resolution: {integrity: sha512-WCtabS6t3c8SkpDBUlb1kjOs7l66xsGdKpIPZsg4wR+B3+u9UAum2odSsF9tnvxg80h4ZxLWMy4pRjOsFIqQpw==}
+    engines: {node: '>=4.0.0'}
+
+  pg-pool@3.10.1:
+    resolution: {integrity: sha512-Tu8jMlcX+9d8+QVzKIvM/uJtp07PKr82IUOYEphaWcoBhIYkoHpLXN3qO59nAI11ripznDsEzEv8nUxBVWajGg==}
+    peerDependencies:
+      pg: '>=8.0'
+
+  pg-protocol@1.10.3:
+    resolution: {integrity: sha512-6DIBgBQaTKDJyxnXaLiLR8wBpQQcGWuAESkRBX/t6OwA8YsqP+iVSiond2EDy6Y/dsGk8rh/jtax3js5NeV7JQ==}
+
+  pg-types@2.2.0:
+    resolution: {integrity: sha512-qTAAlrEsl8s4OiEQY69wDvcMIdQN6wdz5ojQiOy6YRMuynxenON0O5oCpJI6lshc6scgAY8qvJ2On/p+CXY0GA==}
+    engines: {node: '>=4'}
+
+  pg@8.16.3:
+    resolution: {integrity: sha512-enxc1h0jA/aq5oSDMvqyW3q89ra6XIIDZgCX9vkMrnz5DFTw/Ny3Li2lFQ+pt3L6MCgm/5o2o8HW9hiJji+xvw==}
+    engines: {node: '>= 16.0.0'}
+    peerDependencies:
+      pg-native: '>=3.0.1'
+    peerDependenciesMeta:
+      pg-native:
+        optional: true
+
+  pgpass@1.0.5:
+    resolution: {integrity: sha512-FdW9r/jQZhSeohs1Z3sI1yxFQNFvMcnmfuj4WBMUTxOrAyLMaTcE1aAMBiTlbMNaXvBCQuVi0R7hd8udDSP7ug==}
+
+  picocolors@1.1.1:
+    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
+
+  picomatch@2.3.1:
+    resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
+    engines: {node: '>=8.6'}
+
+  picomatch@4.0.3:
+    resolution: {integrity: sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==}
+    engines: {node: '>=12'}
+
+  possible-typed-array-names@1.1.0:
+    resolution: {integrity: sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==}
+    engines: {node: '>= 0.4'}
+
+  postcss@8.4.31:
+    resolution: {integrity: sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==}
+    engines: {node: ^10 || ^12 || >=14}
+
+  postcss@8.5.6:
+    resolution: {integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==}
+    engines: {node: ^10 || ^12 || >=14}
+
+  postgres-array@2.0.0:
+    resolution: {integrity: sha512-VpZrUqU5A69eQyW2c5CA1jtLecCsN2U/bD6VilrFDWq5+5UIEVO7nazS3TEcHf1zuPYO/sqGvUvW62g86RXZuA==}
+    engines: {node: '>=4'}
+
+  postgres-bytea@1.0.0:
+    resolution: {integrity: sha512-xy3pmLuQqRBZBXDULy7KbaitYqLcmxigw14Q5sj8QBVLqEwXfeybIKVWiqAXTlcvdvb0+xkOtDbfQMOf4lST1w==}
+    engines: {node: '>=0.10.0'}
+
+  postgres-date@1.0.7:
+    resolution: {integrity: sha512-suDmjLVQg78nMK2UZ454hAG+OAW+HQPZ6n++TNDUX+L0+uUlLywnoxJKDou51Zm+zTCjrCl0Nq6J9C5hP9vK/Q==}
+    engines: {node: '>=0.10.0'}
+
+  postgres-interval@1.2.0:
+    resolution: {integrity: sha512-9ZhXKM/rw350N1ovuWHbGxnGh/SNJ4cnxHiM0rxE4VN41wsg8P8zWn9hv/buK00RP4WvlOyr/RBDiptyxVbkZQ==}
+    engines: {node: '>=0.10.0'}
+
+  prebuild-install@7.1.3:
+    resolution: {integrity: sha512-8Mf2cbV7x1cXPUILADGI3wuhfqWvtiLA1iclTDbFRZkgRQS0NqsPZphna9V+HyTEadheuPmjaJMsbzKQFOzLug==}
+    engines: {node: '>=10'}
+    hasBin: true
+
+  prelude-ls@1.2.1:
+    resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
+    engines: {node: '>= 0.8.0'}
+
+  prop-types@15.8.1:
+    resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
+
+  pump@3.0.3:
+    resolution: {integrity: sha512-todwxLMY7/heScKmntwQG8CXVkWUOdYxIvY2s0VWAAMh/nd8SoYiRaKjlr7+iCs984f2P8zvrfWcDDYVb73NfA==}
+
+  punycode@2.3.1:
+    resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
+    engines: {node: '>=6'}
+
+  pvtsutils@1.3.6:
+    resolution: {integrity: sha512-PLgQXQ6H2FWCaeRak8vvk1GW462lMxB5s3Jm673N82zI4vqtVUPuZdffdZbPDFRoU8kAhItWFtPCWiPpp4/EDg==}
+
+  pvutils@1.1.3:
+    resolution: {integrity: sha512-pMpnA0qRdFp32b1sJl1wOJNxZLQ2cbQx+k6tjNtZ8CpvVhNqEPRgivZ2WOUev2YMajecdH7ctUPDvEe87nariQ==}
+    engines: {node: '>=6.0.0'}
+
+  querystringify@2.2.0:
+    resolution: {integrity: sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==}
+
+  queue-microtask@1.2.3:
+    resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
+
+  rc@1.2.8:
+    resolution: {integrity: sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==}
+    hasBin: true
+
+  react-day-picker@9.11.1:
+    resolution: {integrity: sha512-l3ub6o8NlchqIjPKrRFUCkTUEq6KwemQlfv3XZzzwpUeGwmDJ+0u0Upmt38hJyd7D/vn2dQoOoLV/qAp0o3uUw==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      react: '>=16.8.0'
+
+  react-dom@19.2.0:
+    resolution: {integrity: sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==}
+    peerDependencies:
+      react: ^19.2.0
+
+  react-is@16.13.1:
+    resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
+
+  react-is@18.3.1:
+    resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
+
+  react-redux@9.2.0:
+    resolution: {integrity: sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==}
+    peerDependencies:
+      '@types/react': ^18.2.25 || ^19
+      react: ^18.0 || ^19
+      redux: ^5.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      redux:
+        optional: true
+
+  react-remove-scroll-bar@2.3.8:
+    resolution: {integrity: sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  react-remove-scroll@2.7.1:
+    resolution: {integrity: sha512-HpMh8+oahmIdOuS5aFKKY6Pyog+FNaZV/XyJOq7b4YFwsFHe5yYfdbIalI4k3vU2nSDql7YskmUseHsRrJqIPA==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  react-style-singleton@2.2.3:
+    resolution: {integrity: sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  react@19.2.0:
+    resolution: {integrity: sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==}
+    engines: {node: '>=0.10.0'}
+
+  readable-stream@3.6.2:
+    resolution: {integrity: sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==}
+    engines: {node: '>= 6'}
+
+  recharts@3.4.1:
+    resolution: {integrity: sha512-35kYg6JoOgwq8sE4rhYkVWwa6aAIgOtT+Ob0gitnShjwUwZmhrmy7Jco/5kJNF4PnLXgt9Hwq+geEMS+WrjU1g==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-is: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
+  redux-thunk@3.1.0:
+    resolution: {integrity: sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==}
+    peerDependencies:
+      redux: ^5.0.0
+
+  redux@5.0.1:
+    resolution: {integrity: sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==}
+
+  reflect-metadata@0.2.2:
+    resolution: {integrity: sha512-urBwgfrvVP/eAyXx4hluJivBKzuEbSQs9rKWCrCkbSxNv8mxPcUZKeuoF3Uy4mJl3Lwprp6yy5/39VWigZ4K6Q==}
+
+  reflect.getprototypeof@1.0.10:
+    resolution: {integrity: sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==}
+    engines: {node: '>= 0.4'}
+
+  regexp.prototype.flags@1.5.4:
+    resolution: {integrity: sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==}
+    engines: {node: '>= 0.4'}
+
+  requires-port@1.0.0:
+    resolution: {integrity: sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==}
+
+  reselect@5.1.1:
+    resolution: {integrity: sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==}
+
+  resend@6.4.2:
+    resolution: {integrity: sha512-YnxmwneltZtjc7Xff+8ZjG1/xPLdstCiqsedgO/JxWTf7vKRAPCx6CkhQ3ZXskG0mrmf8+I5wr/wNRd8PQMUfw==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@react-email/render': '*'
+    peerDependenciesMeta:
+      '@react-email/render':
+        optional: true
+
+  resolve-from@4.0.0:
+    resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
+    engines: {node: '>=4'}
+
+  resolve-pkg-maps@1.0.0:
+    resolution: {integrity: sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==}
+
+  resolve@1.22.10:
+    resolution: {integrity: sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==}
+    engines: {node: '>= 0.4'}
+    hasBin: true
+
+  resolve@2.0.0-next.5:
+    resolution: {integrity: sha512-U7WjGVG9sH8tvjW5SmGbQuui75FiyjAX72HX15DwBBwF9dNiQZRQAg9nnPhYy+TUnE0+VcrttuvNI8oSxZcocA==}
+    hasBin: true
+
+  reusify@1.1.0:
+    resolution: {integrity: sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==}
+    engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
+
+  rou3@0.5.1:
+    resolution: {integrity: sha512-OXMmJ3zRk2xeXFGfA3K+EOPHC5u7RDFG7lIOx0X1pdnhUkI8MdVrbV+sNsD80ElpUZ+MRHdyxPnFthq9VHs8uQ==}
+
+  run-parallel@1.2.0:
+    resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
+
+  safe-array-concat@1.1.3:
+    resolution: {integrity: sha512-AURm5f0jYEOydBj7VQlVvDrjeFgthDdEF5H1dP+6mNpoXOMo1quQqJ4wvJDyRZ9+pO3kGWoOdmV08cSv2aJV6Q==}
+    engines: {node: '>=0.4'}
+
+  safe-buffer@5.2.1:
+    resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
+
+  safe-push-apply@1.0.0:
+    resolution: {integrity: sha512-iKE9w/Z7xCzUMIZqdBsp6pEQvwuEebH4vdpjcDWnyzaI6yl6O9FHvVpmGelvEHNsoY6wGblkxR6Zty/h00WiSA==}
+    engines: {node: '>= 0.4'}
+
+  safe-regex-test@1.1.0:
+    resolution: {integrity: sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==}
+    engines: {node: '>= 0.4'}
+
+  scheduler@0.27.0:
+    resolution: {integrity: sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==}
+
+  semver@6.3.1:
+    resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
+    hasBin: true
+
+  semver@7.7.3:
+    resolution: {integrity: sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==}
+    engines: {node: '>=10'}
+    hasBin: true
+
+  set-cookie-parser@2.7.1:
+    resolution: {integrity: sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==}
+
+  set-function-length@1.2.2:
+    resolution: {integrity: sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==}
+    engines: {node: '>= 0.4'}
+
+  set-function-name@2.0.2:
+    resolution: {integrity: sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==}
+    engines: {node: '>= 0.4'}
+
+  set-proto@1.0.0:
+    resolution: {integrity: sha512-RJRdvCo6IAnPdsvP/7m6bsQqNnn1FCBX5ZNtFL98MmFF/4xAIJTIg1YbHW5DC2W5SKZanrC6i4HsJqlajw/dZw==}
+    engines: {node: '>= 0.4'}
+
+  sharp@0.34.4:
+    resolution: {integrity: sha512-FUH39xp3SBPnxWvd5iib1X8XY7J0K0X7d93sie9CJg2PO8/7gmg89Nve6OjItK53/MlAushNNxteBYfM6DEuoA==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+
+  shebang-command@2.0.0:
+    resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
+    engines: {node: '>=8'}
+
+  shebang-regex@3.0.0:
+    resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
+    engines: {node: '>=8'}
+
+  side-channel-list@1.0.0:
+    resolution: {integrity: sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==}
+    engines: {node: '>= 0.4'}
+
+  side-channel-map@1.0.1:
+    resolution: {integrity: sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==}
+    engines: {node: '>= 0.4'}
+
+  side-channel-weakmap@1.0.2:
+    resolution: {integrity: sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==}
+    engines: {node: '>= 0.4'}
+
+  side-channel@1.1.0:
+    resolution: {integrity: sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==}
+    engines: {node: '>= 0.4'}
+
+  simple-concat@1.0.1:
+    resolution: {integrity: sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==}
+
+  simple-get@4.0.1:
+    resolution: {integrity: sha512-brv7p5WgH0jmQJr1ZDDfKDOSeWWg+OVypG99A/5vYGPqJ6pxiaHLy8nxtFjBA7oMa01ebA9gfh1uMCFqOuXxvA==}
+
+  sonner@2.0.7:
+    resolution: {integrity: sha512-W6ZN4p58k8aDKA4XPcx2hpIQXBRAgyiWVkYhT7CvK6D3iAu7xjvVyhQHg2/iaKJZ1XVJ4r7XuwGL+WGEK37i9w==}
+    peerDependencies:
+      react: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+      react-dom: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+
+  source-map-js@1.2.1:
+    resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
+    engines: {node: '>=0.10.0'}
+
+  source-map-support@0.5.21:
+    resolution: {integrity: sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==}
+
+  source-map@0.6.1:
+    resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
+    engines: {node: '>=0.10.0'}
+
+  split2@4.2.0:
+    resolution: {integrity: sha512-UcjcJOWknrNkF6PLX83qcHM6KHgVKNkV62Y8a5uYDVv9ydGQVwAHMKqHdJje1VTWpljG0WYpCDhrCdAOYH4TWg==}
+    engines: {node: '>= 10.x'}
+
+  stable-hash@0.0.5:
+    resolution: {integrity: sha512-+L3ccpzibovGXFK+Ap/f8LOS0ahMrHTf3xu7mMLSpEGU0EO9ucaysSylKo9eRDFNhWve/y275iPmIZ4z39a9iA==}
+
+  stop-iteration-iterator@1.1.0:
+    resolution: {integrity: sha512-eLoXW/DHyl62zxY4SCaIgnRhuMr6ri4juEYARS8E6sCEqzKpOiE521Ucofdx+KnDZl5xmvGYaaKCk5FEOxJCoQ==}
+    engines: {node: '>= 0.4'}
+
+  string.prototype.includes@2.0.1:
+    resolution: {integrity: sha512-o7+c9bW6zpAdJHTtujeePODAhkuicdAryFsfVKwA+wGw89wJ4GTY484WTucM9hLtDEOpOvI+aHnzqnC5lHp4Rg==}
+    engines: {node: '>= 0.4'}
+
+  string.prototype.matchall@4.0.12:
+    resolution: {integrity: sha512-6CC9uyBL+/48dYizRf7H7VAYCMCNTBeM78x/VTUe9bFEaxBepPJDa1Ow99LqI/1yF7kuy7Q3cQsYMrcjGUcskA==}
+    engines: {node: '>= 0.4'}
+
+  string.prototype.repeat@1.0.0:
+    resolution: {integrity: sha512-0u/TldDbKD8bFCQ/4f5+mNRrXwZ8hg2w7ZR8wa16e8z9XpePWl3eGEcUD0OXpEH/VJH/2G3gjUtR3ZOiBe2S/w==}
+
+  string.prototype.trim@1.2.10:
+    resolution: {integrity: sha512-Rs66F0P/1kedk5lyYyH9uBzuiI/kNRmwJAR9quK6VOtIpZ2G+hMZd+HQbbv25MgCA6gEffoMZYxlTod4WcdrKA==}
+    engines: {node: '>= 0.4'}
+
+  string.prototype.trimend@1.0.9:
+    resolution: {integrity: sha512-G7Ok5C6E/j4SGfyLCloXTrngQIQU3PWtXGst3yM7Bea9FRURf1S42ZHlZZtsNque2FN2PoUhfZXYLNWwEr4dLQ==}
+    engines: {node: '>= 0.4'}
+
+  string.prototype.trimstart@1.0.8:
+    resolution: {integrity: sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==}
+    engines: {node: '>= 0.4'}
+
+  string_decoder@1.3.0:
+    resolution: {integrity: sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==}
+
+  strip-bom@3.0.0:
+    resolution: {integrity: sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==}
+    engines: {node: '>=4'}
+
+  strip-json-comments@2.0.1:
+    resolution: {integrity: sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==}
+    engines: {node: '>=0.10.0'}
+
+  strip-json-comments@3.1.1:
+    resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
+    engines: {node: '>=8'}
+
+  styled-jsx@5.1.6:
+    resolution: {integrity: sha512-qSVyDTeMotdvQYoHWLNGwRFJHC+i+ZvdBRYosOFgC+Wg1vx4frN2/RG/NA7SYqqvKNLf39P2LSRA2pu6n0XYZA==}
+    engines: {node: '>= 12.0.0'}
+    peerDependencies:
+      '@babel/core': '*'
+      babel-plugin-macros: '*'
+      react: '>= 16.8.0 || 17.x.x || ^18.0.0-0 || ^19.0.0-0'
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+      babel-plugin-macros:
+        optional: true
+
+  supports-color@7.2.0:
+    resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
+    engines: {node: '>=8'}
+
+  supports-preserve-symlinks-flag@1.0.0:
+    resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
+    engines: {node: '>= 0.4'}
+
+  svix@1.76.1:
+    resolution: {integrity: sha512-CRuDWBTgYfDnBLRaZdKp9VuoPcNUq9An14c/k+4YJ15Qc5Grvf66vp0jvTltd4t7OIRj+8lM1DAgvSgvf7hdLw==}
+
+  tailwind-merge@3.4.0:
+    resolution: {integrity: sha512-uSaO4gnW+b3Y2aWoWfFpX62vn2sR3skfhbjsEnaBI81WD1wBLlHZe5sWf0AqjksNdYTbGBEd0UasQMT3SNV15g==}
+
+  tailwindcss@4.1.17:
+    resolution: {integrity: sha512-j9Ee2YjuQqYT9bbRTfTZht9W/ytp5H+jJpZKiYdP/bpnXARAuELt9ofP0lPnmHjbga7SNQIxdTAXCmtKVYjN+Q==}
+
+  tapable@2.3.0:
+    resolution: {integrity: sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==}
+    engines: {node: '>=6'}
+
+  tar-fs@2.1.4:
+    resolution: {integrity: sha512-mDAjwmZdh7LTT6pNleZ05Yt65HC3E+NiQzl672vQG38jIrehtJk/J3mNwIg+vShQPcLF/LV7CMnDW6vjj6sfYQ==}
+
+  tar-stream@2.2.0:
+    resolution: {integrity: sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==}
+    engines: {node: '>=6'}
+
+  tiny-invariant@1.3.3:
+    resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==}
+
+  tinyglobby@0.2.15:
+    resolution: {integrity: sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==}
+    engines: {node: '>=12.0.0'}
+
+  to-regex-range@5.0.1:
+    resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
+    engines: {node: '>=8.0'}
+
+  ts-api-utils@2.1.0:
+    resolution: {integrity: sha512-CUgTZL1irw8u29bzrOD/nH85jqyc74D6SshFgujOIA7osm2Rz7dYH77agkx7H4FBNxDq7Cjf+IjaX/8zwFW+ZQ==}
+    engines: {node: '>=18.12'}
+    peerDependencies:
+      typescript: '>=4.8.4'
+
+  tsconfig-paths@3.15.0:
+    resolution: {integrity: sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==}
+
+  tslib@1.14.1:
+    resolution: {integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==}
+
+  tslib@2.8.1:
+    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
+
+  tsx@4.20.6:
+    resolution: {integrity: sha512-ytQKuwgmrrkDTFP4LjR0ToE2nqgy886GpvRSpU0JAnrdBYppuY5rLkRUYPU1yCryb24SsKBTL/hlDQAEFVwtZg==}
+    engines: {node: '>=18.0.0'}
+    hasBin: true
+
+  tsyringe@4.10.0:
+    resolution: {integrity: sha512-axr3IdNuVIxnaK5XGEUFTu3YmAQ6lllgrvqfEoR16g/HGnYY/6We4oWENtAnzK6/LpJ2ur9PAb80RBt7/U4ugw==}
+    engines: {node: '>= 6.0.0'}
+
+  tunnel-agent@0.6.0:
+    resolution: {integrity: sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==}
+
+  type-check@0.4.0:
+    resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
+    engines: {node: '>= 0.8.0'}
+
+  typed-array-buffer@1.0.3:
+    resolution: {integrity: sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==}
+    engines: {node: '>= 0.4'}
+
+  typed-array-byte-length@1.0.3:
+    resolution: {integrity: sha512-BaXgOuIxz8n8pIq3e7Atg/7s+DpiYrxn4vdot3w9KbnBhcRQq6o3xemQdIfynqSeXeDrF32x+WvfzmOjPiY9lg==}
+    engines: {node: '>= 0.4'}
+
+  typed-array-byte-offset@1.0.4:
+    resolution: {integrity: sha512-bTlAFB/FBYMcuX81gbL4OcpH5PmlFHqlCCpAl8AlEzMz5k53oNDvN8p1PNOWLEmI2x4orp3raOFB51tv9X+MFQ==}
+    engines: {node: '>= 0.4'}
+
+  typed-array-length@1.0.7:
+    resolution: {integrity: sha512-3KS2b+kL7fsuk/eJZ7EQdnEmQoaho/r6KUef7hxvltNA5DR8NAUM+8wJMbJyZ4G9/7i3v5zPBIMN5aybAh2/Jg==}
+    engines: {node: '>= 0.4'}
+
+  typescript-eslint@8.46.3:
+    resolution: {integrity: sha512-bAfgMavTuGo+8n6/QQDVQz4tZ4f7Soqg53RbrlZQEoAltYop/XR4RAts/I0BrO3TTClTSTFJ0wYbla+P8cEWJA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <6.0.0'
+
+  typescript@5.9.3:
+    resolution: {integrity: sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==}
+    engines: {node: '>=14.17'}
+    hasBin: true
+
+  unbox-primitive@1.1.0:
+    resolution: {integrity: sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==}
+    engines: {node: '>= 0.4'}
+
+  uncrypto@0.1.3:
+    resolution: {integrity: sha512-Ql87qFHB3s/De2ClA9e0gsnS6zXG27SkTiSJwjCc9MebbfapQfuPzumMIUMi38ezPZVNFcHI9sUIepeQfw8J8Q==}
+
+  undici-types@6.21.0:
+    resolution: {integrity: sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==}
+
+  undici-types@7.16.0:
+    resolution: {integrity: sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==}
+
+  unrs-resolver@1.11.1:
+    resolution: {integrity: sha512-bSjt9pjaEBnNiGgc9rUiHGKv5l4/TGzDmYw3RhnkJGtLhbnnA/5qJj7x3dNDCRx/PJxu774LlH8lCOlB4hEfKg==}
+
+  update-browserslist-db@1.1.4:
+    resolution: {integrity: sha512-q0SPT4xyU84saUX+tomz1WLkxUbuaJnR1xWt17M7fJtEJigJeWUNGUqrauFXsHnqev9y9JTRGwk13tFBuKby4A==}
+    hasBin: true
+    peerDependencies:
+      browserslist: '>= 4.21.0'
+
+  uri-js@4.4.1:
+    resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
+
+  url-parse@1.5.10:
+    resolution: {integrity: sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==}
+
+  use-callback-ref@1.3.3:
+    resolution: {integrity: sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  use-sidecar@1.1.3:
+    resolution: {integrity: sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  use-sync-external-store@1.6.0:
+    resolution: {integrity: sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
+  util-deprecate@1.0.2:
+    resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
+
+  uuid@10.0.0:
+    resolution: {integrity: sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==}
+    hasBin: true
+
+  vaul@1.1.2:
+    resolution: {integrity: sha512-ZFkClGpWyI2WUQjdLJ/BaGuV6AVQiJ3uELGk3OYtP+B6yCO7Cmn9vPFXVJkRaGkOJu3m8bQMgtyzNHixULceQA==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc
+
+  victory-vendor@37.3.6:
+    resolution: {integrity: sha512-SbPDPdDBYp+5MJHhBCAyI7wKM3d5ivekigc2Dk2s7pgbZ9wIgIBYGVw4zGHBml/qTFbexrofXW6Gu4noGxrOwQ==}
+
+  which-boxed-primitive@1.1.1:
+    resolution: {integrity: sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==}
+    engines: {node: '>= 0.4'}
+
+  which-builtin-type@1.2.1:
+    resolution: {integrity: sha512-6iBczoX+kDQ7a3+YJBnh3T+KZRxM/iYNPXicqk66/Qfm1b93iu+yOImkg0zHbj5LNOcNv1TEADiZ0xa34B4q6Q==}
+    engines: {node: '>= 0.4'}
+
+  which-collection@1.0.2:
+    resolution: {integrity: sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==}
+    engines: {node: '>= 0.4'}
+
+  which-typed-array@1.1.19:
+    resolution: {integrity: sha512-rEvr90Bck4WZt9HHFC4DJMsjvu7x+r6bImz0/BrbWb7A2djJ8hnZMrWnHo9F8ssv0OMErasDhftrfROTyqSDrw==}
+    engines: {node: '>= 0.4'}
+
+  which@2.0.2:
+    resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
+    engines: {node: '>= 8'}
+    hasBin: true
+
+  word-wrap@1.2.5:
+    resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==}
+    engines: {node: '>=0.10.0'}
+
+  wrappy@1.0.2:
+    resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
+
+  xtend@4.0.2:
+    resolution: {integrity: sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==}
+    engines: {node: '>=0.4'}
+
+  yallist@3.1.1:
+    resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
+
+  yocto-queue@0.1.0:
+    resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
+    engines: {node: '>=10'}
+
+  zod-validation-error@4.0.2:
+    resolution: {integrity: sha512-Q6/nZLe6jxuU80qb/4uJ4t5v2VEZ44lzQjPDhYJNztRQ4wyWc6VF3D3Kb/fAuPetZQnhS3hnajCf9CsWesghLQ==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      zod: ^3.25.0 || ^4.0.0
+
+  zod@4.1.12:
+    resolution: {integrity: sha512-JInaHOamG8pt5+Ey8kGmdcAcg3OL9reK8ltczgHTAwNhMys/6ThXHityHxVV2p3fkw/c+MAvBHFVYHFZDmjMCQ==}
+
+snapshots:
+
+  '@ai-sdk/anthropic@2.0.44(zod@4.1.12)':
+    dependencies:
+      '@ai-sdk/provider': 2.0.0
+      '@ai-sdk/provider-utils': 3.0.17(zod@4.1.12)
+      zod: 4.1.12
+
+  '@ai-sdk/gateway@2.0.9(zod@4.1.12)':
+    dependencies:
+      '@ai-sdk/provider': 2.0.0
+      '@ai-sdk/provider-utils': 3.0.17(zod@4.1.12)
+      '@vercel/oidc': 3.0.3
+      zod: 4.1.12
+
+  '@ai-sdk/google@2.0.31(zod@4.1.12)':
+    dependencies:
+      '@ai-sdk/provider': 2.0.0
+      '@ai-sdk/provider-utils': 3.0.17(zod@4.1.12)
+      zod: 4.1.12
+
+  '@ai-sdk/openai@2.0.66(zod@4.1.12)':
+    dependencies:
+      '@ai-sdk/provider': 2.0.0
+      '@ai-sdk/provider-utils': 3.0.17(zod@4.1.12)
+      zod: 4.1.12
+
+  '@ai-sdk/provider-utils@3.0.17(zod@4.1.12)':
+    dependencies:
+      '@ai-sdk/provider': 2.0.0
+      '@standard-schema/spec': 1.0.0
+      eventsource-parser: 3.0.6
+      zod: 4.1.12
+
+  '@ai-sdk/provider@2.0.0':
+    dependencies:
+      json-schema: 0.4.0
+
+  '@alloc/quick-lru@5.2.0': {}
+
+  '@babel/code-frame@7.27.1':
+    dependencies:
+      '@babel/helper-validator-identifier': 7.28.5
+      js-tokens: 4.0.0
+      picocolors: 1.1.1
+
+  '@babel/compat-data@7.28.5': {}
+
+  '@babel/core@7.28.5':
+    dependencies:
+      '@babel/code-frame': 7.27.1
+      '@babel/generator': 7.28.5
+      '@babel/helper-compilation-targets': 7.27.2
+      '@babel/helper-module-transforms': 7.28.3(@babel/core@7.28.5)
+      '@babel/helpers': 7.28.4
+      '@babel/parser': 7.28.5
+      '@babel/template': 7.27.2
+      '@babel/traverse': 7.28.5
+      '@babel/types': 7.28.5
+      '@jridgewell/remapping': 2.3.5
+      convert-source-map: 2.0.0
+      debug: 4.4.3
+      gensync: 1.0.0-beta.2
+      json5: 2.2.3
+      semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/generator@7.28.5':
+    dependencies:
+      '@babel/parser': 7.28.5
+      '@babel/types': 7.28.5
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
+      jsesc: 3.1.0
+
+  '@babel/helper-compilation-targets@7.27.2':
+    dependencies:
+      '@babel/compat-data': 7.28.5
+      '@babel/helper-validator-option': 7.27.1
+      browserslist: 4.27.0
+      lru-cache: 5.1.1
+      semver: 6.3.1
+
+  '@babel/helper-globals@7.28.0': {}
+
+  '@babel/helper-module-imports@7.27.1':
+    dependencies:
+      '@babel/traverse': 7.28.5
+      '@babel/types': 7.28.5
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-module-transforms@7.28.3(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-module-imports': 7.27.1
+      '@babel/helper-validator-identifier': 7.28.5
+      '@babel/traverse': 7.28.5
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-string-parser@7.27.1': {}
+
+  '@babel/helper-validator-identifier@7.28.5': {}
+
+  '@babel/helper-validator-option@7.27.1': {}
+
+  '@babel/helpers@7.28.4':
+    dependencies:
+      '@babel/template': 7.27.2
+      '@babel/types': 7.28.5
+
+  '@babel/parser@7.28.5':
+    dependencies:
+      '@babel/types': 7.28.5
+
+  '@babel/template@7.27.2':
+    dependencies:
+      '@babel/code-frame': 7.27.1
+      '@babel/parser': 7.28.5
+      '@babel/types': 7.28.5
+
+  '@babel/traverse@7.28.5':
+    dependencies:
+      '@babel/code-frame': 7.27.1
+      '@babel/generator': 7.28.5
+      '@babel/helper-globals': 7.28.0
+      '@babel/parser': 7.28.5
+      '@babel/template': 7.27.2
+      '@babel/types': 7.28.5
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/types@7.28.5':
+    dependencies:
+      '@babel/helper-string-parser': 7.27.1
+      '@babel/helper-validator-identifier': 7.28.5
+
+  '@better-auth/core@1.3.34(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.18)(better-call@1.0.19)(jose@6.1.0)(kysely@0.28.8)(nanostores@1.0.1)':
+    dependencies:
+      '@better-auth/utils': 0.3.0
+      '@better-fetch/fetch': 1.1.18
+      better-call: 1.0.19
+      jose: 6.1.0
+      kysely: 0.28.8
+      nanostores: 1.0.1
+      zod: 4.1.12
+
+  '@better-auth/telemetry@1.3.34(better-call@1.0.19)(jose@6.1.0)(kysely@0.28.8)(nanostores@1.0.1)':
+    dependencies:
+      '@better-auth/core': 1.3.34(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.18)(better-call@1.0.19)(jose@6.1.0)(kysely@0.28.8)(nanostores@1.0.1)
+      '@better-auth/utils': 0.3.0
+      '@better-fetch/fetch': 1.1.18
+    transitivePeerDependencies:
+      - better-call
+      - jose
+      - kysely
+      - nanostores
+
+  '@better-auth/utils@0.3.0': {}
+
+  '@better-fetch/fetch@1.1.18': {}
+
+  '@date-fns/tz@1.4.1': {}
+
+  '@dnd-kit/accessibility@3.1.1(react@19.2.0)':
+    dependencies:
+      react: 19.2.0
+      tslib: 2.8.1
+
+  '@dnd-kit/core@6.3.1(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@dnd-kit/accessibility': 3.1.1(react@19.2.0)
+      '@dnd-kit/utilities': 3.2.2(react@19.2.0)
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+      tslib: 2.8.1
+
+  '@dnd-kit/modifiers@9.0.0(@dnd-kit/core@6.3.1(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@dnd-kit/core': 6.3.1(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@dnd-kit/utilities': 3.2.2(react@19.2.0)
+      react: 19.2.0
+      tslib: 2.8.1
+
+  '@dnd-kit/sortable@10.0.0(@dnd-kit/core@6.3.1(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@dnd-kit/core': 6.3.1(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@dnd-kit/utilities': 3.2.2(react@19.2.0)
+      react: 19.2.0
+      tslib: 2.8.1
+
+  '@dnd-kit/utilities@3.2.2(react@19.2.0)':
+    dependencies:
+      react: 19.2.0
+      tslib: 2.8.1
+
+  '@drizzle-team/brocli@0.10.2': {}
+
+  '@emnapi/core@1.5.0':
+    dependencies:
+      '@emnapi/wasi-threads': 1.1.0
+      tslib: 2.8.1
+    optional: true
+
+  '@emnapi/runtime@1.5.0':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
+  '@emnapi/wasi-threads@1.1.0':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
+  '@esbuild-kit/core-utils@3.3.2':
+    dependencies:
+      esbuild: 0.18.20
+      source-map-support: 0.5.21
+
+  '@esbuild-kit/esm-loader@2.6.5':
+    dependencies:
+      '@esbuild-kit/core-utils': 3.3.2
+      get-tsconfig: 4.12.0
+
+  '@esbuild/aix-ppc64@0.25.10':
+    optional: true
+
+  '@esbuild/android-arm64@0.18.20':
+    optional: true
+
+  '@esbuild/android-arm64@0.25.10':
+    optional: true
+
+  '@esbuild/android-arm@0.18.20':
+    optional: true
+
+  '@esbuild/android-arm@0.25.10':
+    optional: true
+
+  '@esbuild/android-x64@0.18.20':
+    optional: true
+
+  '@esbuild/android-x64@0.25.10':
+    optional: true
+
+  '@esbuild/darwin-arm64@0.18.20':
+    optional: true
+
+  '@esbuild/darwin-arm64@0.25.10':
+    optional: true
+
+  '@esbuild/darwin-x64@0.18.20':
+    optional: true
+
+  '@esbuild/darwin-x64@0.25.10':
+    optional: true
+
+  '@esbuild/freebsd-arm64@0.18.20':
+    optional: true
+
+  '@esbuild/freebsd-arm64@0.25.10':
+    optional: true
+
+  '@esbuild/freebsd-x64@0.18.20':
+    optional: true
+
+  '@esbuild/freebsd-x64@0.25.10':
+    optional: true
+
+  '@esbuild/linux-arm64@0.18.20':
+    optional: true
+
+  '@esbuild/linux-arm64@0.25.10':
+    optional: true
+
+  '@esbuild/linux-arm@0.18.20':
+    optional: true
+
+  '@esbuild/linux-arm@0.25.10':
+    optional: true
+
+  '@esbuild/linux-ia32@0.18.20':
+    optional: true
+
+  '@esbuild/linux-ia32@0.25.10':
+    optional: true
+
+  '@esbuild/linux-loong64@0.18.20':
+    optional: true
+
+  '@esbuild/linux-loong64@0.25.10':
+    optional: true
+
+  '@esbuild/linux-mips64el@0.18.20':
+    optional: true
+
+  '@esbuild/linux-mips64el@0.25.10':
+    optional: true
+
+  '@esbuild/linux-ppc64@0.18.20':
+    optional: true
+
+  '@esbuild/linux-ppc64@0.25.10':
+    optional: true
+
+  '@esbuild/linux-riscv64@0.18.20':
+    optional: true
+
+  '@esbuild/linux-riscv64@0.25.10':
+    optional: true
+
+  '@esbuild/linux-s390x@0.18.20':
+    optional: true
+
+  '@esbuild/linux-s390x@0.25.10':
+    optional: true
+
+  '@esbuild/linux-x64@0.18.20':
+    optional: true
+
+  '@esbuild/linux-x64@0.25.10':
+    optional: true
+
+  '@esbuild/netbsd-arm64@0.25.10':
+    optional: true
+
+  '@esbuild/netbsd-x64@0.18.20':
+    optional: true
+
+  '@esbuild/netbsd-x64@0.25.10':
+    optional: true
+
+  '@esbuild/openbsd-arm64@0.25.10':
+    optional: true
+
+  '@esbuild/openbsd-x64@0.18.20':
+    optional: true
+
+  '@esbuild/openbsd-x64@0.25.10':
+    optional: true
+
+  '@esbuild/openharmony-arm64@0.25.10':
+    optional: true
+
+  '@esbuild/sunos-x64@0.18.20':
+    optional: true
+
+  '@esbuild/sunos-x64@0.25.10':
+    optional: true
+
+  '@esbuild/win32-arm64@0.18.20':
+    optional: true
+
+  '@esbuild/win32-arm64@0.25.10':
+    optional: true
+
+  '@esbuild/win32-ia32@0.18.20':
+    optional: true
+
+  '@esbuild/win32-ia32@0.25.10':
+    optional: true
+
+  '@esbuild/win32-x64@0.18.20':
+    optional: true
+
+  '@esbuild/win32-x64@0.25.10':
+    optional: true
+
+  '@eslint-community/eslint-utils@4.9.0(eslint@9.39.1(jiti@2.6.1))':
+    dependencies:
+      eslint: 9.39.1(jiti@2.6.1)
+      eslint-visitor-keys: 3.4.3
+
+  '@eslint-community/regexpp@4.12.1': {}
+
+  '@eslint/config-array@0.21.1':
+    dependencies:
+      '@eslint/object-schema': 2.1.7
+      debug: 4.4.3
+      minimatch: 3.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@eslint/config-helpers@0.4.2':
+    dependencies:
+      '@eslint/core': 0.17.0
+
+  '@eslint/core@0.17.0':
+    dependencies:
+      '@types/json-schema': 7.0.15
+
+  '@eslint/eslintrc@3.3.1':
+    dependencies:
+      ajv: 6.12.6
+      debug: 4.4.3
+      espree: 10.4.0
+      globals: 14.0.0
+      ignore: 5.3.2
+      import-fresh: 3.3.1
+      js-yaml: 4.1.0
+      minimatch: 3.1.2
+      strip-json-comments: 3.1.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@eslint/js@9.39.1': {}
+
+  '@eslint/object-schema@2.1.7': {}
+
+  '@eslint/plugin-kit@0.4.1':
+    dependencies:
+      '@eslint/core': 0.17.0
+      levn: 0.4.1
+
+  '@floating-ui/core@1.7.3':
+    dependencies:
+      '@floating-ui/utils': 0.2.10
+
+  '@floating-ui/dom@1.7.4':
+    dependencies:
+      '@floating-ui/core': 1.7.3
+      '@floating-ui/utils': 0.2.10
+
+  '@floating-ui/react-dom@2.1.6(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@floating-ui/dom': 1.7.4
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+
+  '@floating-ui/utils@0.2.10': {}
+
+  '@hexagon/base64@1.1.28': {}
+
+  '@humanfs/core@0.19.1': {}
+
+  '@humanfs/node@0.16.7':
+    dependencies:
+      '@humanfs/core': 0.19.1
+      '@humanwhocodes/retry': 0.4.3
+
+  '@humanwhocodes/module-importer@1.0.1': {}
+
+  '@humanwhocodes/retry@0.4.3': {}
+
+  '@img/colour@1.0.0':
+    optional: true
+
+  '@img/sharp-darwin-arm64@0.34.4':
+    optionalDependencies:
+      '@img/sharp-libvips-darwin-arm64': 1.2.3
+    optional: true
+
+  '@img/sharp-darwin-x64@0.34.4':
+    optionalDependencies:
+      '@img/sharp-libvips-darwin-x64': 1.2.3
+    optional: true
+
+  '@img/sharp-libvips-darwin-arm64@1.2.3':
+    optional: true
+
+  '@img/sharp-libvips-darwin-x64@1.2.3':
+    optional: true
+
+  '@img/sharp-libvips-linux-arm64@1.2.3':
+    optional: true
+
+  '@img/sharp-libvips-linux-arm@1.2.3':
+    optional: true
+
+  '@img/sharp-libvips-linux-ppc64@1.2.3':
+    optional: true
+
+  '@img/sharp-libvips-linux-s390x@1.2.3':
+    optional: true
+
+  '@img/sharp-libvips-linux-x64@1.2.3':
+    optional: true
+
+  '@img/sharp-libvips-linuxmusl-arm64@1.2.3':
+    optional: true
+
+  '@img/sharp-libvips-linuxmusl-x64@1.2.3':
+    optional: true
+
+  '@img/sharp-linux-arm64@0.34.4':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-arm64': 1.2.3
+    optional: true
+
+  '@img/sharp-linux-arm@0.34.4':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-arm': 1.2.3
+    optional: true
+
+  '@img/sharp-linux-ppc64@0.34.4':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-ppc64': 1.2.3
+    optional: true
+
+  '@img/sharp-linux-s390x@0.34.4':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-s390x': 1.2.3
+    optional: true
+
+  '@img/sharp-linux-x64@0.34.4':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-x64': 1.2.3
+    optional: true
+
+  '@img/sharp-linuxmusl-arm64@0.34.4':
+    optionalDependencies:
+      '@img/sharp-libvips-linuxmusl-arm64': 1.2.3
+    optional: true
+
+  '@img/sharp-linuxmusl-x64@0.34.4':
+    optionalDependencies:
+      '@img/sharp-libvips-linuxmusl-x64': 1.2.3
+    optional: true
+
+  '@img/sharp-wasm32@0.34.4':
+    dependencies:
+      '@emnapi/runtime': 1.5.0
+    optional: true
+
+  '@img/sharp-win32-arm64@0.34.4':
+    optional: true
+
+  '@img/sharp-win32-ia32@0.34.4':
+    optional: true
+
+  '@img/sharp-win32-x64@0.34.4':
+    optional: true
+
+  '@jridgewell/gen-mapping@0.3.13':
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+      '@jridgewell/trace-mapping': 0.3.31
+
+  '@jridgewell/remapping@2.3.5':
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
+
+  '@jridgewell/resolve-uri@3.1.2': {}
+
+  '@jridgewell/sourcemap-codec@1.5.5': {}
+
+  '@jridgewell/trace-mapping@0.3.31':
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.2
+      '@jridgewell/sourcemap-codec': 1.5.5
+
+  '@levischuck/tiny-cbor@0.2.11': {}
+
+  '@napi-rs/wasm-runtime@0.2.12':
+    dependencies:
+      '@emnapi/core': 1.5.0
+      '@emnapi/runtime': 1.5.0
+      '@tybys/wasm-util': 0.10.1
+    optional: true
+
+  '@next/env@16.0.3': {}
+
+  '@next/eslint-plugin-next@16.0.3':
+    dependencies:
+      fast-glob: 3.3.1
+
+  '@next/swc-darwin-arm64@16.0.3':
+    optional: true
+
+  '@next/swc-darwin-x64@16.0.3':
+    optional: true
+
+  '@next/swc-linux-arm64-gnu@16.0.3':
+    optional: true
+
+  '@next/swc-linux-arm64-musl@16.0.3':
+    optional: true
+
+  '@next/swc-linux-x64-gnu@16.0.3':
+    optional: true
+
+  '@next/swc-linux-x64-musl@16.0.3':
+    optional: true
+
+  '@next/swc-win32-arm64-msvc@16.0.3':
+    optional: true
+
+  '@next/swc-win32-x64-msvc@16.0.3':
+    optional: true
+
+  '@noble/ciphers@2.0.1': {}
+
+  '@noble/hashes@2.0.1': {}
+
+  '@nodelib/fs.scandir@2.1.5':
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      run-parallel: 1.2.0
+
+  '@nodelib/fs.stat@2.0.5': {}
+
+  '@nodelib/fs.walk@1.2.8':
+    dependencies:
+      '@nodelib/fs.scandir': 2.1.5
+      fastq: 1.19.1
+
+  '@nolyfill/is-core-module@1.0.39': {}
+
+  '@openrouter/ai-sdk-provider@1.2.2(ai@5.0.93(zod@4.1.12))(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(zod@4.1.12)':
+    dependencies:
+      '@openrouter/sdk': 0.1.11(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      ai: 5.0.93(zod@4.1.12)
+      zod: 4.1.12
+    transitivePeerDependencies:
+      - '@tanstack/react-query'
+      - react
+      - react-dom
+
+  '@openrouter/sdk@0.1.11(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      zod: 4.1.12
+    optionalDependencies:
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+
+  '@opentelemetry/api@1.9.0': {}
+
+  '@peculiar/asn1-android@2.5.0':
+    dependencies:
+      '@peculiar/asn1-schema': 2.5.0
+      asn1js: 3.0.6
+      tslib: 2.8.1
+
+  '@peculiar/asn1-cms@2.5.0':
+    dependencies:
+      '@peculiar/asn1-schema': 2.5.0
+      '@peculiar/asn1-x509': 2.5.0
+      '@peculiar/asn1-x509-attr': 2.5.0
+      asn1js: 3.0.6
+      tslib: 2.8.1
+
+  '@peculiar/asn1-csr@2.5.0':
+    dependencies:
+      '@peculiar/asn1-schema': 2.5.0
+      '@peculiar/asn1-x509': 2.5.0
+      asn1js: 3.0.6
+      tslib: 2.8.1
+
+  '@peculiar/asn1-ecc@2.5.0':
+    dependencies:
+      '@peculiar/asn1-schema': 2.5.0
+      '@peculiar/asn1-x509': 2.5.0
+      asn1js: 3.0.6
+      tslib: 2.8.1
+
+  '@peculiar/asn1-pfx@2.5.0':
+    dependencies:
+      '@peculiar/asn1-cms': 2.5.0
+      '@peculiar/asn1-pkcs8': 2.5.0
+      '@peculiar/asn1-rsa': 2.5.0
+      '@peculiar/asn1-schema': 2.5.0
+      asn1js: 3.0.6
+      tslib: 2.8.1
+
+  '@peculiar/asn1-pkcs8@2.5.0':
+    dependencies:
+      '@peculiar/asn1-schema': 2.5.0
+      '@peculiar/asn1-x509': 2.5.0
+      asn1js: 3.0.6
+      tslib: 2.8.1
+
+  '@peculiar/asn1-pkcs9@2.5.0':
+    dependencies:
+      '@peculiar/asn1-cms': 2.5.0
+      '@peculiar/asn1-pfx': 2.5.0
+      '@peculiar/asn1-pkcs8': 2.5.0
+      '@peculiar/asn1-schema': 2.5.0
+      '@peculiar/asn1-x509': 2.5.0
+      '@peculiar/asn1-x509-attr': 2.5.0
+      asn1js: 3.0.6
+      tslib: 2.8.1
+
+  '@peculiar/asn1-rsa@2.5.0':
+    dependencies:
+      '@peculiar/asn1-schema': 2.5.0
+      '@peculiar/asn1-x509': 2.5.0
+      asn1js: 3.0.6
+      tslib: 2.8.1
+
+  '@peculiar/asn1-schema@2.5.0':
+    dependencies:
+      asn1js: 3.0.6
+      pvtsutils: 1.3.6
+      tslib: 2.8.1
+
+  '@peculiar/asn1-x509-attr@2.5.0':
+    dependencies:
+      '@peculiar/asn1-schema': 2.5.0
+      '@peculiar/asn1-x509': 2.5.0
+      asn1js: 3.0.6
+      tslib: 2.8.1
+
+  '@peculiar/asn1-x509@2.5.0':
+    dependencies:
+      '@peculiar/asn1-schema': 2.5.0
+      asn1js: 3.0.6
+      pvtsutils: 1.3.6
+      tslib: 2.8.1
+
+  '@peculiar/x509@1.14.0':
+    dependencies:
+      '@peculiar/asn1-cms': 2.5.0
+      '@peculiar/asn1-csr': 2.5.0
+      '@peculiar/asn1-ecc': 2.5.0
+      '@peculiar/asn1-pkcs9': 2.5.0
+      '@peculiar/asn1-rsa': 2.5.0
+      '@peculiar/asn1-schema': 2.5.0
+      '@peculiar/asn1-x509': 2.5.0
+      pvtsutils: 1.3.6
+      reflect-metadata: 0.2.2
+      tslib: 2.8.1
+      tsyringe: 4.10.0
+
+  '@radix-ui/number@1.1.1': {}
+
+  '@radix-ui/primitive@1.1.3': {}
+
+  '@radix-ui/react-alert-dialog@1.1.15(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.4)(react@19.2.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.4)(react@19.2.0)
+      '@radix-ui/react-dialog': 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.4)(react@19.2.0)
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    optionalDependencies:
+      '@types/react': 19.2.4
+      '@types/react-dom': 19.2.3(@types/react@19.2.4)
+
+  '@radix-ui/react-arrow@1.1.7(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    optionalDependencies:
+      '@types/react': 19.2.4
+      '@types/react-dom': 19.2.3(@types/react@19.2.4)
+
+  '@radix-ui/react-avatar@1.1.11(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@radix-ui/react-context': 1.1.3(@types/react@19.2.4)(react@19.2.0)
+      '@radix-ui/react-primitive': 2.1.4(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.4)(react@19.2.0)
+      '@radix-ui/react-use-is-hydrated': 0.1.0(@types/react@19.2.4)(react@19.2.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.4)(react@19.2.0)
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    optionalDependencies:
+      '@types/react': 19.2.4
+      '@types/react-dom': 19.2.3(@types/react@19.2.4)
+
+  '@radix-ui/react-checkbox@1.3.3(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.4)(react@19.2.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.4)(react@19.2.0)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.4)(react@19.2.0)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.2.4)(react@19.2.0)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@19.2.4)(react@19.2.0)
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    optionalDependencies:
+      '@types/react': 19.2.4
+      '@types/react-dom': 19.2.3(@types/react@19.2.4)
+
+  '@radix-ui/react-collapsible@1.1.12(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.4)(react@19.2.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.4)(react@19.2.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.4)(react@19.2.0)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.4)(react@19.2.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.4)(react@19.2.0)
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    optionalDependencies:
+      '@types/react': 19.2.4
+      '@types/react-dom': 19.2.3(@types/react@19.2.4)
+
+  '@radix-ui/react-collection@1.1.7(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.4)(react@19.2.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.4)(react@19.2.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.4)(react@19.2.0)
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    optionalDependencies:
+      '@types/react': 19.2.4
+      '@types/react-dom': 19.2.3(@types/react@19.2.4)
+
+  '@radix-ui/react-compose-refs@1.1.2(@types/react@19.2.4)(react@19.2.0)':
+    dependencies:
+      react: 19.2.0
+    optionalDependencies:
+      '@types/react': 19.2.4
+
+  '@radix-ui/react-context@1.1.2(@types/react@19.2.4)(react@19.2.0)':
+    dependencies:
+      react: 19.2.0
+    optionalDependencies:
+      '@types/react': 19.2.4
+
+  '@radix-ui/react-context@1.1.3(@types/react@19.2.4)(react@19.2.0)':
+    dependencies:
+      react: 19.2.0
+    optionalDependencies:
+      '@types/react': 19.2.4
+
+  '@radix-ui/react-dialog@1.1.15(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.4)(react@19.2.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.4)(react@19.2.0)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-focus-guards': 1.1.3(@types/react@19.2.4)(react@19.2.0)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.4)(react@19.2.0)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.4)(react@19.2.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.4)(react@19.2.0)
+      aria-hidden: 1.2.6
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+      react-remove-scroll: 2.7.1(@types/react@19.2.4)(react@19.2.0)
+    optionalDependencies:
+      '@types/react': 19.2.4
+      '@types/react-dom': 19.2.3(@types/react@19.2.4)
+
+  '@radix-ui/react-direction@1.1.1(@types/react@19.2.4)(react@19.2.0)':
+    dependencies:
+      react: 19.2.0
+    optionalDependencies:
+      '@types/react': 19.2.4
+
+  '@radix-ui/react-dismissable-layer@1.1.11(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.4)(react@19.2.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.4)(react@19.2.0)
+      '@radix-ui/react-use-escape-keydown': 1.1.1(@types/react@19.2.4)(react@19.2.0)
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    optionalDependencies:
+      '@types/react': 19.2.4
+      '@types/react-dom': 19.2.3(@types/react@19.2.4)
+
+  '@radix-ui/react-dropdown-menu@2.1.16(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.4)(react@19.2.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.4)(react@19.2.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.4)(react@19.2.0)
+      '@radix-ui/react-menu': 2.1.16(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.4)(react@19.2.0)
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    optionalDependencies:
+      '@types/react': 19.2.4
+      '@types/react-dom': 19.2.3(@types/react@19.2.4)
+
+  '@radix-ui/react-focus-guards@1.1.3(@types/react@19.2.4)(react@19.2.0)':
+    dependencies:
+      react: 19.2.0
+    optionalDependencies:
+      '@types/react': 19.2.4
+
+  '@radix-ui/react-focus-scope@1.1.7(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.4)(react@19.2.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.4)(react@19.2.0)
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    optionalDependencies:
+      '@types/react': 19.2.4
+      '@types/react-dom': 19.2.3(@types/react@19.2.4)
+
+  '@radix-ui/react-hover-card@1.1.15(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.4)(react@19.2.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.4)(react@19.2.0)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-popper': 1.2.8(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.4)(react@19.2.0)
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    optionalDependencies:
+      '@types/react': 19.2.4
+      '@types/react-dom': 19.2.3(@types/react@19.2.4)
+
+  '@radix-ui/react-id@1.1.1(@types/react@19.2.4)(react@19.2.0)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.4)(react@19.2.0)
+      react: 19.2.0
+    optionalDependencies:
+      '@types/react': 19.2.4
+
+  '@radix-ui/react-label@2.1.8(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.4(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    optionalDependencies:
+      '@types/react': 19.2.4
+      '@types/react-dom': 19.2.3(@types/react@19.2.4)
+
+  '@radix-ui/react-menu@2.1.16(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.4)(react@19.2.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.4)(react@19.2.0)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.4)(react@19.2.0)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-focus-guards': 1.1.3(@types/react@19.2.4)(react@19.2.0)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.4)(react@19.2.0)
+      '@radix-ui/react-popper': 1.2.8(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.4)(react@19.2.0)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.4)(react@19.2.0)
+      aria-hidden: 1.2.6
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+      react-remove-scroll: 2.7.1(@types/react@19.2.4)(react@19.2.0)
+    optionalDependencies:
+      '@types/react': 19.2.4
+      '@types/react-dom': 19.2.3(@types/react@19.2.4)
+
+  '@radix-ui/react-popover@1.1.15(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.4)(react@19.2.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.4)(react@19.2.0)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-focus-guards': 1.1.3(@types/react@19.2.4)(react@19.2.0)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.4)(react@19.2.0)
+      '@radix-ui/react-popper': 1.2.8(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.4)(react@19.2.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.4)(react@19.2.0)
+      aria-hidden: 1.2.6
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+      react-remove-scroll: 2.7.1(@types/react@19.2.4)(react@19.2.0)
+    optionalDependencies:
+      '@types/react': 19.2.4
+      '@types/react-dom': 19.2.3(@types/react@19.2.4)
+
+  '@radix-ui/react-popper@1.2.8(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@floating-ui/react-dom': 2.1.6(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-arrow': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.4)(react@19.2.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.4)(react@19.2.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.4)(react@19.2.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.4)(react@19.2.0)
+      '@radix-ui/react-use-rect': 1.1.1(@types/react@19.2.4)(react@19.2.0)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@19.2.4)(react@19.2.0)
+      '@radix-ui/rect': 1.1.1
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    optionalDependencies:
+      '@types/react': 19.2.4
+      '@types/react-dom': 19.2.3(@types/react@19.2.4)
+
+  '@radix-ui/react-portal@1.1.9(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.4)(react@19.2.0)
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    optionalDependencies:
+      '@types/react': 19.2.4
+      '@types/react-dom': 19.2.3(@types/react@19.2.4)
+
+  '@radix-ui/react-presence@1.1.5(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.4)(react@19.2.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.4)(react@19.2.0)
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    optionalDependencies:
+      '@types/react': 19.2.4
+      '@types/react-dom': 19.2.3(@types/react@19.2.4)
+
+  '@radix-ui/react-primitive@2.1.3(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.4)(react@19.2.0)
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    optionalDependencies:
+      '@types/react': 19.2.4
+      '@types/react-dom': 19.2.3(@types/react@19.2.4)
+
+  '@radix-ui/react-primitive@2.1.4(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@radix-ui/react-slot': 1.2.4(@types/react@19.2.4)(react@19.2.0)
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    optionalDependencies:
+      '@types/react': 19.2.4
+      '@types/react-dom': 19.2.3(@types/react@19.2.4)
+
+  '@radix-ui/react-progress@1.1.8(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@radix-ui/react-context': 1.1.3(@types/react@19.2.4)(react@19.2.0)
+      '@radix-ui/react-primitive': 2.1.4(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    optionalDependencies:
+      '@types/react': 19.2.4
+      '@types/react-dom': 19.2.3(@types/react@19.2.4)
+
+  '@radix-ui/react-radio-group@1.3.8(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.4)(react@19.2.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.4)(react@19.2.0)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.4)(react@19.2.0)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.4)(react@19.2.0)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.2.4)(react@19.2.0)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@19.2.4)(react@19.2.0)
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    optionalDependencies:
+      '@types/react': 19.2.4
+      '@types/react-dom': 19.2.3(@types/react@19.2.4)
+
+  '@radix-ui/react-roving-focus@1.1.11(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.4)(react@19.2.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.4)(react@19.2.0)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.4)(react@19.2.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.4)(react@19.2.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.4)(react@19.2.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.4)(react@19.2.0)
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    optionalDependencies:
+      '@types/react': 19.2.4
+      '@types/react-dom': 19.2.3(@types/react@19.2.4)
+
+  '@radix-ui/react-select@2.2.6(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@radix-ui/number': 1.1.1
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.4)(react@19.2.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.4)(react@19.2.0)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.4)(react@19.2.0)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-focus-guards': 1.1.3(@types/react@19.2.4)(react@19.2.0)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.4)(react@19.2.0)
+      '@radix-ui/react-popper': 1.2.8(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.4)(react@19.2.0)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.4)(react@19.2.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.4)(react@19.2.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.4)(react@19.2.0)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.2.4)(react@19.2.0)
+      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      aria-hidden: 1.2.6
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+      react-remove-scroll: 2.7.1(@types/react@19.2.4)(react@19.2.0)
+    optionalDependencies:
+      '@types/react': 19.2.4
+      '@types/react-dom': 19.2.3(@types/react@19.2.4)
+
+  '@radix-ui/react-separator@1.1.8(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.4(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    optionalDependencies:
+      '@types/react': 19.2.4
+      '@types/react-dom': 19.2.3(@types/react@19.2.4)
+
+  '@radix-ui/react-slot@1.2.3(@types/react@19.2.4)(react@19.2.0)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.4)(react@19.2.0)
+      react: 19.2.0
+    optionalDependencies:
+      '@types/react': 19.2.4
+
+  '@radix-ui/react-slot@1.2.4(@types/react@19.2.4)(react@19.2.0)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.4)(react@19.2.0)
+      react: 19.2.0
+    optionalDependencies:
+      '@types/react': 19.2.4
+
+  '@radix-ui/react-switch@1.2.6(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.4)(react@19.2.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.4)(react@19.2.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.4)(react@19.2.0)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.2.4)(react@19.2.0)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@19.2.4)(react@19.2.0)
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    optionalDependencies:
+      '@types/react': 19.2.4
+      '@types/react-dom': 19.2.3(@types/react@19.2.4)
+
+  '@radix-ui/react-tabs@1.1.13(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.4)(react@19.2.0)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.4)(react@19.2.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.4)(react@19.2.0)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.4)(react@19.2.0)
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    optionalDependencies:
+      '@types/react': 19.2.4
+      '@types/react-dom': 19.2.3(@types/react@19.2.4)
+
+  '@radix-ui/react-toggle-group@1.1.11(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.4)(react@19.2.0)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.4)(react@19.2.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-toggle': 1.1.10(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.4)(react@19.2.0)
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    optionalDependencies:
+      '@types/react': 19.2.4
+      '@types/react-dom': 19.2.3(@types/react@19.2.4)
+
+  '@radix-ui/react-toggle@1.1.10(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.4)(react@19.2.0)
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    optionalDependencies:
+      '@types/react': 19.2.4
+      '@types/react-dom': 19.2.3(@types/react@19.2.4)
+
+  '@radix-ui/react-tooltip@1.2.8(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.4)(react@19.2.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.4)(react@19.2.0)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.4)(react@19.2.0)
+      '@radix-ui/react-popper': 1.2.8(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.4)(react@19.2.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.4)(react@19.2.0)
+      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    optionalDependencies:
+      '@types/react': 19.2.4
+      '@types/react-dom': 19.2.3(@types/react@19.2.4)
+
+  '@radix-ui/react-use-callback-ref@1.1.1(@types/react@19.2.4)(react@19.2.0)':
+    dependencies:
+      react: 19.2.0
+    optionalDependencies:
+      '@types/react': 19.2.4
+
+  '@radix-ui/react-use-controllable-state@1.2.2(@types/react@19.2.4)(react@19.2.0)':
+    dependencies:
+      '@radix-ui/react-use-effect-event': 0.0.2(@types/react@19.2.4)(react@19.2.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.4)(react@19.2.0)
+      react: 19.2.0
+    optionalDependencies:
+      '@types/react': 19.2.4
+
+  '@radix-ui/react-use-effect-event@0.0.2(@types/react@19.2.4)(react@19.2.0)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.4)(react@19.2.0)
+      react: 19.2.0
+    optionalDependencies:
+      '@types/react': 19.2.4
+
+  '@radix-ui/react-use-escape-keydown@1.1.1(@types/react@19.2.4)(react@19.2.0)':
+    dependencies:
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.4)(react@19.2.0)
+      react: 19.2.0
+    optionalDependencies:
+      '@types/react': 19.2.4
+
+  '@radix-ui/react-use-is-hydrated@0.1.0(@types/react@19.2.4)(react@19.2.0)':
+    dependencies:
+      react: 19.2.0
+      use-sync-external-store: 1.6.0(react@19.2.0)
+    optionalDependencies:
+      '@types/react': 19.2.4
+
+  '@radix-ui/react-use-layout-effect@1.1.1(@types/react@19.2.4)(react@19.2.0)':
+    dependencies:
+      react: 19.2.0
+    optionalDependencies:
+      '@types/react': 19.2.4
+
+  '@radix-ui/react-use-previous@1.1.1(@types/react@19.2.4)(react@19.2.0)':
+    dependencies:
+      react: 19.2.0
+    optionalDependencies:
+      '@types/react': 19.2.4
+
+  '@radix-ui/react-use-rect@1.1.1(@types/react@19.2.4)(react@19.2.0)':
+    dependencies:
+      '@radix-ui/rect': 1.1.1
+      react: 19.2.0
+    optionalDependencies:
+      '@types/react': 19.2.4
+
+  '@radix-ui/react-use-size@1.1.1(@types/react@19.2.4)(react@19.2.0)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.4)(react@19.2.0)
+      react: 19.2.0
+    optionalDependencies:
+      '@types/react': 19.2.4
+
+  '@radix-ui/react-visually-hidden@1.2.3(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    optionalDependencies:
+      '@types/react': 19.2.4
+      '@types/react-dom': 19.2.3(@types/react@19.2.4)
+
+  '@radix-ui/rect@1.1.1': {}
+
+  '@reduxjs/toolkit@2.9.1(react-redux@9.2.0(@types/react@19.2.4)(react@19.2.0)(redux@5.0.1))(react@19.2.0)':
+    dependencies:
+      '@standard-schema/spec': 1.0.0
+      '@standard-schema/utils': 0.3.0
+      immer: 10.1.3
+      redux: 5.0.1
+      redux-thunk: 3.1.0(redux@5.0.1)
+      reselect: 5.1.1
+    optionalDependencies:
+      react: 19.2.0
+      react-redux: 9.2.0(@types/react@19.2.4)(react@19.2.0)(redux@5.0.1)
+
+  '@remixicon/react@4.7.0(react@19.2.0)':
+    dependencies:
+      react: 19.2.0
+
+  '@rtsao/scc@1.1.0': {}
+
+  '@simplewebauthn/browser@13.2.2': {}
+
+  '@simplewebauthn/server@13.2.2':
+    dependencies:
+      '@hexagon/base64': 1.1.28
+      '@levischuck/tiny-cbor': 0.2.11
+      '@peculiar/asn1-android': 2.5.0
+      '@peculiar/asn1-ecc': 2.5.0
+      '@peculiar/asn1-rsa': 2.5.0
+      '@peculiar/asn1-schema': 2.5.0
+      '@peculiar/asn1-x509': 2.5.0
+      '@peculiar/x509': 1.14.0
+
+  '@stablelib/base64@1.0.1': {}
+
+  '@standard-schema/spec@1.0.0': {}
+
+  '@standard-schema/utils@0.3.0': {}
+
+  '@swc/helpers@0.5.15':
+    dependencies:
+      tslib: 2.8.1
+
+  '@tailwindcss/node@4.1.17':
+    dependencies:
+      '@jridgewell/remapping': 2.3.5
+      enhanced-resolve: 5.18.3
+      jiti: 2.6.1
+      lightningcss: 1.30.2
+      magic-string: 0.30.21
+      source-map-js: 1.2.1
+      tailwindcss: 4.1.17
+
+  '@tailwindcss/oxide-android-arm64@4.1.17':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-arm64@4.1.17':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-x64@4.1.17':
+    optional: true
+
+  '@tailwindcss/oxide-freebsd-x64@4.1.17':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.17':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.1.17':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.1.17':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.1.17':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-musl@4.1.17':
+    optional: true
+
+  '@tailwindcss/oxide-wasm32-wasi@4.1.17':
+    optional: true
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.1.17':
+    optional: true
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.1.17':
+    optional: true
+
+  '@tailwindcss/oxide@4.1.17':
+    optionalDependencies:
+      '@tailwindcss/oxide-android-arm64': 4.1.17
+      '@tailwindcss/oxide-darwin-arm64': 4.1.17
+      '@tailwindcss/oxide-darwin-x64': 4.1.17
+      '@tailwindcss/oxide-freebsd-x64': 4.1.17
+      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.1.17
+      '@tailwindcss/oxide-linux-arm64-gnu': 4.1.17
+      '@tailwindcss/oxide-linux-arm64-musl': 4.1.17
+      '@tailwindcss/oxide-linux-x64-gnu': 4.1.17
+      '@tailwindcss/oxide-linux-x64-musl': 4.1.17
+      '@tailwindcss/oxide-wasm32-wasi': 4.1.17
+      '@tailwindcss/oxide-win32-arm64-msvc': 4.1.17
+      '@tailwindcss/oxide-win32-x64-msvc': 4.1.17
+
+  '@tailwindcss/postcss@4.1.17':
+    dependencies:
+      '@alloc/quick-lru': 5.2.0
+      '@tailwindcss/node': 4.1.17
+      '@tailwindcss/oxide': 4.1.17
+      postcss: 8.5.6
+      tailwindcss: 4.1.17
+
+  '@tanstack/react-table@8.21.3(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@tanstack/table-core': 8.21.3
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+
+  '@tanstack/table-core@8.21.3': {}
+
+  '@tybys/wasm-util@0.10.1':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
+  '@types/d3-array@3.2.2': {}
+
+  '@types/d3-color@3.1.3': {}
+
+  '@types/d3-ease@3.0.2': {}
+
+  '@types/d3-interpolate@3.0.4':
+    dependencies:
+      '@types/d3-color': 3.1.3
+
+  '@types/d3-path@3.1.1': {}
+
+  '@types/d3-scale@4.0.9':
+    dependencies:
+      '@types/d3-time': 3.0.4
+
+  '@types/d3-shape@3.1.7':
+    dependencies:
+      '@types/d3-path': 3.1.1
+
+  '@types/d3-time@3.0.4': {}
+
+  '@types/d3-timer@3.0.2': {}
+
+  '@types/estree@1.0.8': {}
+
+  '@types/json-schema@7.0.15': {}
+
+  '@types/json5@0.0.29': {}
+
+  '@types/node@22.18.12':
+    dependencies:
+      undici-types: 6.21.0
+
+  '@types/node@24.10.1':
+    dependencies:
+      undici-types: 7.16.0
+
+  '@types/react-dom@19.2.3(@types/react@19.2.4)':
+    dependencies:
+      '@types/react': 19.2.4
+
+  '@types/react@19.2.4':
+    dependencies:
+      csstype: 3.1.3
+
+  '@types/use-sync-external-store@0.0.6': {}
+
+  '@typescript-eslint/eslint-plugin@8.46.3(@typescript-eslint/parser@8.46.3(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)':
+    dependencies:
+      '@eslint-community/regexpp': 4.12.1
+      '@typescript-eslint/parser': 8.46.3(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/scope-manager': 8.46.3
+      '@typescript-eslint/type-utils': 8.46.3(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.46.3(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/visitor-keys': 8.46.3
+      eslint: 9.39.1(jiti@2.6.1)
+      graphemer: 1.4.0
+      ignore: 7.0.5
+      natural-compare: 1.4.0
+      ts-api-utils: 2.1.0(typescript@5.9.3)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/parser@8.46.3(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)':
+    dependencies:
+      '@typescript-eslint/scope-manager': 8.46.3
+      '@typescript-eslint/types': 8.46.3
+      '@typescript-eslint/typescript-estree': 8.46.3(typescript@5.9.3)
+      '@typescript-eslint/visitor-keys': 8.46.3
+      debug: 4.4.3
+      eslint: 9.39.1(jiti@2.6.1)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/project-service@8.46.3(typescript@5.9.3)':
+    dependencies:
+      '@typescript-eslint/tsconfig-utils': 8.46.3(typescript@5.9.3)
+      '@typescript-eslint/types': 8.46.3
+      debug: 4.4.3
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/scope-manager@8.46.3':
+    dependencies:
+      '@typescript-eslint/types': 8.46.3
+      '@typescript-eslint/visitor-keys': 8.46.3
+
+  '@typescript-eslint/tsconfig-utils@8.46.3(typescript@5.9.3)':
+    dependencies:
+      typescript: 5.9.3
+
+  '@typescript-eslint/type-utils@8.46.3(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)':
+    dependencies:
+      '@typescript-eslint/types': 8.46.3
+      '@typescript-eslint/typescript-estree': 8.46.3(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.46.3(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)
+      debug: 4.4.3
+      eslint: 9.39.1(jiti@2.6.1)
+      ts-api-utils: 2.1.0(typescript@5.9.3)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/types@8.46.3': {}
+
+  '@typescript-eslint/typescript-estree@8.46.3(typescript@5.9.3)':
+    dependencies:
+      '@typescript-eslint/project-service': 8.46.3(typescript@5.9.3)
+      '@typescript-eslint/tsconfig-utils': 8.46.3(typescript@5.9.3)
+      '@typescript-eslint/types': 8.46.3
+      '@typescript-eslint/visitor-keys': 8.46.3
+      debug: 4.4.3
+      fast-glob: 3.3.3
+      is-glob: 4.0.3
+      minimatch: 9.0.5
+      semver: 7.7.3
+      ts-api-utils: 2.1.0(typescript@5.9.3)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/utils@8.46.3(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)':
+    dependencies:
+      '@eslint-community/eslint-utils': 4.9.0(eslint@9.39.1(jiti@2.6.1))
+      '@typescript-eslint/scope-manager': 8.46.3
+      '@typescript-eslint/types': 8.46.3
+      '@typescript-eslint/typescript-estree': 8.46.3(typescript@5.9.3)
+      eslint: 9.39.1(jiti@2.6.1)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/visitor-keys@8.46.3':
+    dependencies:
+      '@typescript-eslint/types': 8.46.3
+      eslint-visitor-keys: 4.2.1
+
+  '@unrs/resolver-binding-android-arm-eabi@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-android-arm64@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-darwin-arm64@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-darwin-x64@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-freebsd-x64@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-arm-gnueabihf@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-arm-musleabihf@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-arm64-gnu@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-arm64-musl@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-ppc64-gnu@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-riscv64-gnu@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-riscv64-musl@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-s390x-gnu@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-x64-gnu@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-x64-musl@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-wasm32-wasi@1.11.1':
+    dependencies:
+      '@napi-rs/wasm-runtime': 0.2.12
+    optional: true
+
+  '@unrs/resolver-binding-win32-arm64-msvc@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-win32-ia32-msvc@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-win32-x64-msvc@1.11.1':
+    optional: true
+
+  '@vercel/oidc@3.0.3': {}
+
+  acorn-jsx@5.3.2(acorn@8.15.0):
+    dependencies:
+      acorn: 8.15.0
+
+  acorn@8.15.0: {}
+
+  ai@5.0.93(zod@4.1.12):
+    dependencies:
+      '@ai-sdk/gateway': 2.0.9(zod@4.1.12)
+      '@ai-sdk/provider': 2.0.0
+      '@ai-sdk/provider-utils': 3.0.17(zod@4.1.12)
+      '@opentelemetry/api': 1.9.0
+      zod: 4.1.12
+
+  ajv@6.12.6:
+    dependencies:
+      fast-deep-equal: 3.1.3
+      fast-json-stable-stringify: 2.1.0
+      json-schema-traverse: 0.4.1
+      uri-js: 4.4.1
+
+  ansi-styles@4.3.0:
+    dependencies:
+      color-convert: 2.0.1
+
+  argparse@2.0.1: {}
+
+  aria-hidden@1.2.6:
+    dependencies:
+      tslib: 2.8.1
+
+  aria-query@5.3.2: {}
+
+  array-buffer-byte-length@1.0.2:
+    dependencies:
+      call-bound: 1.0.4
+      is-array-buffer: 3.0.5
+
+  array-includes@3.1.9:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+      es-object-atoms: 1.1.1
+      get-intrinsic: 1.3.0
+      is-string: 1.1.1
+      math-intrinsics: 1.1.0
+
+  array.prototype.findlast@1.2.5:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.1
+      es-shim-unscopables: 1.1.0
+
+  array.prototype.findlastindex@1.2.6:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.1
+      es-shim-unscopables: 1.1.0
+
+  array.prototype.flat@1.3.3:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+      es-shim-unscopables: 1.1.0
+
+  array.prototype.flatmap@1.3.3:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+      es-shim-unscopables: 1.1.0
+
+  array.prototype.tosorted@1.1.4:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+      es-errors: 1.3.0
+      es-shim-unscopables: 1.1.0
+
+  arraybuffer.prototype.slice@1.0.4:
+    dependencies:
+      array-buffer-byte-length: 1.0.2
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+      is-array-buffer: 3.0.5
+
+  asn1js@3.0.6:
+    dependencies:
+      pvtsutils: 1.3.6
+      pvutils: 1.1.3
+      tslib: 2.8.1
+
+  ast-types-flow@0.0.8: {}
+
+  async-function@1.0.0: {}
+
+  available-typed-arrays@1.0.7:
+    dependencies:
+      possible-typed-array-names: 1.1.0
+
+  axe-core@4.11.0: {}
+
+  axobject-query@4.1.0: {}
+
+  babel-plugin-react-compiler@1.0.0:
+    dependencies:
+      '@babel/types': 7.28.5
+    optional: true
+
+  balanced-match@1.0.2: {}
+
+  base64-js@1.5.1:
+    optional: true
+
+  baseline-browser-mapping@2.8.25: {}
+
+  better-auth@1.3.34(next@16.0.3(@babel/core@7.28.5)(@opentelemetry/api@1.9.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(react-dom@19.2.0(react@19.2.0))(react@19.2.0):
+    dependencies:
+      '@better-auth/core': 1.3.34(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.18)(better-call@1.0.19)(jose@6.1.0)(kysely@0.28.8)(nanostores@1.0.1)
+      '@better-auth/telemetry': 1.3.34(better-call@1.0.19)(jose@6.1.0)(kysely@0.28.8)(nanostores@1.0.1)
+      '@better-auth/utils': 0.3.0
+      '@better-fetch/fetch': 1.1.18
+      '@noble/ciphers': 2.0.1
+      '@noble/hashes': 2.0.1
+      '@simplewebauthn/browser': 13.2.2
+      '@simplewebauthn/server': 13.2.2
+      better-call: 1.0.19
+      defu: 6.1.4
+      jose: 6.1.0
+      kysely: 0.28.8
+      nanostores: 1.0.1
+      zod: 4.1.12
+    optionalDependencies:
+      next: 16.0.3(@babel/core@7.28.5)(@opentelemetry/api@1.9.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+
+  better-call@1.0.19:
+    dependencies:
+      '@better-auth/utils': 0.3.0
+      '@better-fetch/fetch': 1.1.18
+      rou3: 0.5.1
+      set-cookie-parser: 2.7.1
+      uncrypto: 0.1.3
+
+  better-sqlite3@12.4.1:
+    dependencies:
+      bindings: 1.5.0
+      prebuild-install: 7.1.3
+    optional: true
+
+  bindings@1.5.0:
+    dependencies:
+      file-uri-to-path: 1.0.0
+    optional: true
+
+  bl@4.1.0:
+    dependencies:
+      buffer: 5.7.1
+      inherits: 2.0.4
+      readable-stream: 3.6.2
+    optional: true
+
+  brace-expansion@1.1.12:
+    dependencies:
+      balanced-match: 1.0.2
+      concat-map: 0.0.1
+
+  brace-expansion@2.0.2:
+    dependencies:
+      balanced-match: 1.0.2
+
+  braces@3.0.3:
+    dependencies:
+      fill-range: 7.1.1
+
+  browserslist@4.27.0:
+    dependencies:
+      baseline-browser-mapping: 2.8.25
+      caniuse-lite: 1.0.30001754
+      electron-to-chromium: 1.5.249
+      node-releases: 2.0.27
+      update-browserslist-db: 1.1.4(browserslist@4.27.0)
+
+  buffer-from@1.1.2: {}
+
+  buffer@5.7.1:
+    dependencies:
+      base64-js: 1.5.1
+      ieee754: 1.2.1
+    optional: true
+
+  call-bind-apply-helpers@1.0.2:
+    dependencies:
+      es-errors: 1.3.0
+      function-bind: 1.1.2
+
+  call-bind@1.0.8:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      es-define-property: 1.0.1
+      get-intrinsic: 1.3.0
+      set-function-length: 1.2.2
+
+  call-bound@1.0.4:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      get-intrinsic: 1.3.0
+
+  callsites@3.1.0: {}
+
+  caniuse-lite@1.0.30001754: {}
+
+  chalk@4.1.2:
+    dependencies:
+      ansi-styles: 4.3.0
+      supports-color: 7.2.0
+
+  chownr@1.1.4:
+    optional: true
+
+  class-variance-authority@0.7.1:
+    dependencies:
+      clsx: 2.1.1
+
+  client-only@0.0.1: {}
+
+  clsx@2.1.1: {}
+
+  cmdk@1.1.1(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0):
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.4)(react@19.2.0)
+      '@radix-ui/react-dialog': 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.4)(react@19.2.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    transitivePeerDependencies:
+      - '@types/react'
+      - '@types/react-dom'
+
+  color-convert@2.0.1:
+    dependencies:
+      color-name: 1.1.4
+
+  color-name@1.1.4: {}
+
+  concat-map@0.0.1: {}
+
+  convert-source-map@2.0.0: {}
+
+  cross-spawn@7.0.6:
+    dependencies:
+      path-key: 3.1.1
+      shebang-command: 2.0.0
+      which: 2.0.2
+
+  csstype@3.1.3: {}
+
+  d3-array@3.2.4:
+    dependencies:
+      internmap: 2.0.3
+
+  d3-color@3.1.0: {}
+
+  d3-ease@3.0.1: {}
+
+  d3-format@3.1.0: {}
+
+  d3-interpolate@3.0.1:
+    dependencies:
+      d3-color: 3.1.0
+
+  d3-path@3.1.0: {}
+
+  d3-scale@4.0.2:
+    dependencies:
+      d3-array: 3.2.4
+      d3-format: 3.1.0
+      d3-interpolate: 3.0.1
+      d3-time: 3.1.0
+      d3-time-format: 4.1.0
+
+  d3-shape@3.2.0:
+    dependencies:
+      d3-path: 3.1.0
+
+  d3-time-format@4.1.0:
+    dependencies:
+      d3-time: 3.1.0
+
+  d3-time@3.1.0:
+    dependencies:
+      d3-array: 3.2.4
+
+  d3-timer@3.0.1: {}
+
+  damerau-levenshtein@1.0.8: {}
+
+  data-view-buffer@1.0.2:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      is-data-view: 1.0.2
+
+  data-view-byte-length@1.0.2:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      is-data-view: 1.0.2
+
+  data-view-byte-offset@1.0.1:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      is-data-view: 1.0.2
+
+  date-fns-jalali@4.1.0-0: {}
+
+  date-fns@4.1.0: {}
+
+  debug@3.2.7:
+    dependencies:
+      ms: 2.1.3
+
+  debug@4.4.3:
+    dependencies:
+      ms: 2.1.3
+
+  decimal.js-light@2.5.1: {}
+
+  decompress-response@6.0.0:
+    dependencies:
+      mimic-response: 3.1.0
+    optional: true
+
+  deep-extend@0.6.0:
+    optional: true
+
+  deep-is@0.1.4: {}
+
+  define-data-property@1.1.4:
+    dependencies:
+      es-define-property: 1.0.1
+      es-errors: 1.3.0
+      gopd: 1.2.0
+
+  define-properties@1.2.1:
+    dependencies:
+      define-data-property: 1.1.4
+      has-property-descriptors: 1.0.2
+      object-keys: 1.1.1
+
+  defu@6.1.4: {}
+
+  detect-libc@2.1.2: {}
+
+  detect-node-es@1.1.0: {}
+
+  doctrine@2.1.0:
+    dependencies:
+      esutils: 2.0.3
+
+  drizzle-kit@0.31.7:
+    dependencies:
+      '@drizzle-team/brocli': 0.10.2
+      '@esbuild-kit/esm-loader': 2.6.5
+      esbuild: 0.25.10
+      esbuild-register: 3.6.0(esbuild@0.25.10)
+    transitivePeerDependencies:
+      - supports-color
+
+  drizzle-orm@0.44.7(@opentelemetry/api@1.9.0)(better-sqlite3@12.4.1)(kysely@0.28.8)(pg@8.16.3):
+    optionalDependencies:
+      '@opentelemetry/api': 1.9.0
+      better-sqlite3: 12.4.1
+      kysely: 0.28.8
+      pg: 8.16.3
+
+  dunder-proto@1.0.1:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      es-errors: 1.3.0
+      gopd: 1.2.0
+
+  electron-to-chromium@1.5.249: {}
+
+  emoji-regex@9.2.2: {}
+
+  end-of-stream@1.4.5:
+    dependencies:
+      once: 1.4.0
+    optional: true
+
+  enhanced-resolve@5.18.3:
+    dependencies:
+      graceful-fs: 4.2.11
+      tapable: 2.3.0
+
+  es-abstract@1.24.0:
+    dependencies:
+      array-buffer-byte-length: 1.0.2
+      arraybuffer.prototype.slice: 1.0.4
+      available-typed-arrays: 1.0.7
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      data-view-buffer: 1.0.2
+      data-view-byte-length: 1.0.2
+      data-view-byte-offset: 1.0.1
+      es-define-property: 1.0.1
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.1
+      es-set-tostringtag: 2.1.0
+      es-to-primitive: 1.3.0
+      function.prototype.name: 1.1.8
+      get-intrinsic: 1.3.0
+      get-proto: 1.0.1
+      get-symbol-description: 1.1.0
+      globalthis: 1.0.4
+      gopd: 1.2.0
+      has-property-descriptors: 1.0.2
+      has-proto: 1.2.0
+      has-symbols: 1.1.0
+      hasown: 2.0.2
+      internal-slot: 1.1.0
+      is-array-buffer: 3.0.5
+      is-callable: 1.2.7
+      is-data-view: 1.0.2
+      is-negative-zero: 2.0.3
+      is-regex: 1.2.1
+      is-set: 2.0.3
+      is-shared-array-buffer: 1.0.4
+      is-string: 1.1.1
+      is-typed-array: 1.1.15
+      is-weakref: 1.1.1
+      math-intrinsics: 1.1.0
+      object-inspect: 1.13.4
+      object-keys: 1.1.1
+      object.assign: 4.1.7
+      own-keys: 1.0.1
+      regexp.prototype.flags: 1.5.4
+      safe-array-concat: 1.1.3
+      safe-push-apply: 1.0.0
+      safe-regex-test: 1.1.0
+      set-proto: 1.0.0
+      stop-iteration-iterator: 1.1.0
+      string.prototype.trim: 1.2.10
+      string.prototype.trimend: 1.0.9
+      string.prototype.trimstart: 1.0.8
+      typed-array-buffer: 1.0.3
+      typed-array-byte-length: 1.0.3
+      typed-array-byte-offset: 1.0.4
+      typed-array-length: 1.0.7
+      unbox-primitive: 1.1.0
+      which-typed-array: 1.1.19
+
+  es-define-property@1.0.1: {}
+
+  es-errors@1.3.0: {}
+
+  es-iterator-helpers@1.2.1:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+      es-errors: 1.3.0
+      es-set-tostringtag: 2.1.0
+      function-bind: 1.1.2
+      get-intrinsic: 1.3.0
+      globalthis: 1.0.4
+      gopd: 1.2.0
+      has-property-descriptors: 1.0.2
+      has-proto: 1.2.0
+      has-symbols: 1.1.0
+      internal-slot: 1.1.0
+      iterator.prototype: 1.1.5
+      safe-array-concat: 1.1.3
+
+  es-object-atoms@1.1.1:
+    dependencies:
+      es-errors: 1.3.0
+
+  es-set-tostringtag@2.1.0:
+    dependencies:
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+      has-tostringtag: 1.0.2
+      hasown: 2.0.2
+
+  es-shim-unscopables@1.1.0:
+    dependencies:
+      hasown: 2.0.2
+
+  es-to-primitive@1.3.0:
+    dependencies:
+      is-callable: 1.2.7
+      is-date-object: 1.1.0
+      is-symbol: 1.1.1
+
+  es-toolkit@1.40.0: {}
+
+  es6-promise@4.2.8: {}
+
+  esbuild-register@3.6.0(esbuild@0.25.10):
+    dependencies:
+      debug: 4.4.3
+      esbuild: 0.25.10
+    transitivePeerDependencies:
+      - supports-color
+
+  esbuild@0.18.20:
+    optionalDependencies:
+      '@esbuild/android-arm': 0.18.20
+      '@esbuild/android-arm64': 0.18.20
+      '@esbuild/android-x64': 0.18.20
+      '@esbuild/darwin-arm64': 0.18.20
+      '@esbuild/darwin-x64': 0.18.20
+      '@esbuild/freebsd-arm64': 0.18.20
+      '@esbuild/freebsd-x64': 0.18.20
+      '@esbuild/linux-arm': 0.18.20
+      '@esbuild/linux-arm64': 0.18.20
+      '@esbuild/linux-ia32': 0.18.20
+      '@esbuild/linux-loong64': 0.18.20
+      '@esbuild/linux-mips64el': 0.18.20
+      '@esbuild/linux-ppc64': 0.18.20
+      '@esbuild/linux-riscv64': 0.18.20
+      '@esbuild/linux-s390x': 0.18.20
+      '@esbuild/linux-x64': 0.18.20
+      '@esbuild/netbsd-x64': 0.18.20
+      '@esbuild/openbsd-x64': 0.18.20
+      '@esbuild/sunos-x64': 0.18.20
+      '@esbuild/win32-arm64': 0.18.20
+      '@esbuild/win32-ia32': 0.18.20
+      '@esbuild/win32-x64': 0.18.20
+
+  esbuild@0.25.10:
+    optionalDependencies:
+      '@esbuild/aix-ppc64': 0.25.10
+      '@esbuild/android-arm': 0.25.10
+      '@esbuild/android-arm64': 0.25.10
+      '@esbuild/android-x64': 0.25.10
+      '@esbuild/darwin-arm64': 0.25.10
+      '@esbuild/darwin-x64': 0.25.10
+      '@esbuild/freebsd-arm64': 0.25.10
+      '@esbuild/freebsd-x64': 0.25.10
+      '@esbuild/linux-arm': 0.25.10
+      '@esbuild/linux-arm64': 0.25.10
+      '@esbuild/linux-ia32': 0.25.10
+      '@esbuild/linux-loong64': 0.25.10
+      '@esbuild/linux-mips64el': 0.25.10
+      '@esbuild/linux-ppc64': 0.25.10
+      '@esbuild/linux-riscv64': 0.25.10
+      '@esbuild/linux-s390x': 0.25.10
+      '@esbuild/linux-x64': 0.25.10
+      '@esbuild/netbsd-arm64': 0.25.10
+      '@esbuild/netbsd-x64': 0.25.10
+      '@esbuild/openbsd-arm64': 0.25.10
+      '@esbuild/openbsd-x64': 0.25.10
+      '@esbuild/openharmony-arm64': 0.25.10
+      '@esbuild/sunos-x64': 0.25.10
+      '@esbuild/win32-arm64': 0.25.10
+      '@esbuild/win32-ia32': 0.25.10
+      '@esbuild/win32-x64': 0.25.10
+
+  escalade@3.2.0: {}
+
+  escape-string-regexp@4.0.0: {}
+
+  eslint-config-next@16.0.3(@typescript-eslint/parser@8.46.3(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3):
+    dependencies:
+      '@next/eslint-plugin-next': 16.0.3
+      eslint: 9.39.1(jiti@2.6.1)
+      eslint-import-resolver-node: 0.3.9
+      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0)(eslint@9.39.1(jiti@2.6.1))
+      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.46.3(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1)(eslint@9.39.1(jiti@2.6.1))
+      eslint-plugin-jsx-a11y: 6.10.2(eslint@9.39.1(jiti@2.6.1))
+      eslint-plugin-react: 7.37.5(eslint@9.39.1(jiti@2.6.1))
+      eslint-plugin-react-hooks: 7.0.1(eslint@9.39.1(jiti@2.6.1))
+      globals: 16.4.0
+      typescript-eslint: 8.46.3(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)
+    optionalDependencies:
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - '@typescript-eslint/parser'
+      - eslint-import-resolver-webpack
+      - eslint-plugin-import-x
+      - supports-color
+
+  eslint-import-resolver-node@0.3.9:
+    dependencies:
+      debug: 3.2.7
+      is-core-module: 2.16.1
+      resolve: 1.22.10
+    transitivePeerDependencies:
+      - supports-color
+
+  eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0)(eslint@9.39.1(jiti@2.6.1)):
+    dependencies:
+      '@nolyfill/is-core-module': 1.0.39
+      debug: 4.4.3
+      eslint: 9.39.1(jiti@2.6.1)
+      get-tsconfig: 4.12.0
+      is-bun-module: 2.0.0
+      stable-hash: 0.0.5
+      tinyglobby: 0.2.15
+      unrs-resolver: 1.11.1
+    optionalDependencies:
+      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.46.3(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1)(eslint@9.39.1(jiti@2.6.1))
+    transitivePeerDependencies:
+      - supports-color
+
+  eslint-module-utils@2.12.1(@typescript-eslint/parser@8.46.3(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1)(eslint@9.39.1(jiti@2.6.1)):
+    dependencies:
+      debug: 3.2.7
+    optionalDependencies:
+      '@typescript-eslint/parser': 8.46.3(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)
+      eslint: 9.39.1(jiti@2.6.1)
+      eslint-import-resolver-node: 0.3.9
+      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0)(eslint@9.39.1(jiti@2.6.1))
+    transitivePeerDependencies:
+      - supports-color
+
+  eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.46.3(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1)(eslint@9.39.1(jiti@2.6.1)):
+    dependencies:
+      '@rtsao/scc': 1.1.0
+      array-includes: 3.1.9
+      array.prototype.findlastindex: 1.2.6
+      array.prototype.flat: 1.3.3
+      array.prototype.flatmap: 1.3.3
+      debug: 3.2.7
+      doctrine: 2.1.0
+      eslint: 9.39.1(jiti@2.6.1)
+      eslint-import-resolver-node: 0.3.9
+      eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.46.3(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1)(eslint@9.39.1(jiti@2.6.1))
+      hasown: 2.0.2
+      is-core-module: 2.16.1
+      is-glob: 4.0.3
+      minimatch: 3.1.2
+      object.fromentries: 2.0.8
+      object.groupby: 1.0.3
+      object.values: 1.2.1
+      semver: 6.3.1
+      string.prototype.trimend: 1.0.9
+      tsconfig-paths: 3.15.0
+    optionalDependencies:
+      '@typescript-eslint/parser': 8.46.3(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)
+    transitivePeerDependencies:
+      - eslint-import-resolver-typescript
+      - eslint-import-resolver-webpack
+      - supports-color
+
+  eslint-plugin-jsx-a11y@6.10.2(eslint@9.39.1(jiti@2.6.1)):
+    dependencies:
+      aria-query: 5.3.2
+      array-includes: 3.1.9
+      array.prototype.flatmap: 1.3.3
+      ast-types-flow: 0.0.8
+      axe-core: 4.11.0
+      axobject-query: 4.1.0
+      damerau-levenshtein: 1.0.8
+      emoji-regex: 9.2.2
+      eslint: 9.39.1(jiti@2.6.1)
+      hasown: 2.0.2
+      jsx-ast-utils: 3.3.5
+      language-tags: 1.0.9
+      minimatch: 3.1.2
+      object.fromentries: 2.0.8
+      safe-regex-test: 1.1.0
+      string.prototype.includes: 2.0.1
+
+  eslint-plugin-react-hooks@7.0.1(eslint@9.39.1(jiti@2.6.1)):
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/parser': 7.28.5
+      eslint: 9.39.1(jiti@2.6.1)
+      hermes-parser: 0.25.1
+      zod: 4.1.12
+      zod-validation-error: 4.0.2(zod@4.1.12)
+    transitivePeerDependencies:
+      - supports-color
+
+  eslint-plugin-react@7.37.5(eslint@9.39.1(jiti@2.6.1)):
+    dependencies:
+      array-includes: 3.1.9
+      array.prototype.findlast: 1.2.5
+      array.prototype.flatmap: 1.3.3
+      array.prototype.tosorted: 1.1.4
+      doctrine: 2.1.0
+      es-iterator-helpers: 1.2.1
+      eslint: 9.39.1(jiti@2.6.1)
+      estraverse: 5.3.0
+      hasown: 2.0.2
+      jsx-ast-utils: 3.3.5
+      minimatch: 3.1.2
+      object.entries: 1.1.9
+      object.fromentries: 2.0.8
+      object.values: 1.2.1
+      prop-types: 15.8.1
+      resolve: 2.0.0-next.5
+      semver: 6.3.1
+      string.prototype.matchall: 4.0.12
+      string.prototype.repeat: 1.0.0
+
+  eslint-scope@8.4.0:
+    dependencies:
+      esrecurse: 4.3.0
+      estraverse: 5.3.0
+
+  eslint-visitor-keys@3.4.3: {}
+
+  eslint-visitor-keys@4.2.1: {}
+
+  eslint@9.39.1(jiti@2.6.1):
+    dependencies:
+      '@eslint-community/eslint-utils': 4.9.0(eslint@9.39.1(jiti@2.6.1))
+      '@eslint-community/regexpp': 4.12.1
+      '@eslint/config-array': 0.21.1
+      '@eslint/config-helpers': 0.4.2
+      '@eslint/core': 0.17.0
+      '@eslint/eslintrc': 3.3.1
+      '@eslint/js': 9.39.1
+      '@eslint/plugin-kit': 0.4.1
+      '@humanfs/node': 0.16.7
+      '@humanwhocodes/module-importer': 1.0.1
+      '@humanwhocodes/retry': 0.4.3
+      '@types/estree': 1.0.8
+      ajv: 6.12.6
+      chalk: 4.1.2
+      cross-spawn: 7.0.6
+      debug: 4.4.3
+      escape-string-regexp: 4.0.0
+      eslint-scope: 8.4.0
+      eslint-visitor-keys: 4.2.1
+      espree: 10.4.0
+      esquery: 1.6.0
+      esutils: 2.0.3
+      fast-deep-equal: 3.1.3
+      file-entry-cache: 8.0.0
+      find-up: 5.0.0
+      glob-parent: 6.0.2
+      ignore: 5.3.2
+      imurmurhash: 0.1.4
+      is-glob: 4.0.3
+      json-stable-stringify-without-jsonify: 1.0.1
+      lodash.merge: 4.6.2
+      minimatch: 3.1.2
+      natural-compare: 1.4.0
+      optionator: 0.9.4
+    optionalDependencies:
+      jiti: 2.6.1
+    transitivePeerDependencies:
+      - supports-color
+
+  espree@10.4.0:
+    dependencies:
+      acorn: 8.15.0
+      acorn-jsx: 5.3.2(acorn@8.15.0)
+      eslint-visitor-keys: 4.2.1
+
+  esquery@1.6.0:
+    dependencies:
+      estraverse: 5.3.0
+
+  esrecurse@4.3.0:
+    dependencies:
+      estraverse: 5.3.0
+
+  estraverse@5.3.0: {}
+
+  esutils@2.0.3: {}
+
+  eventemitter3@5.0.1: {}
+
+  eventsource-parser@3.0.6: {}
+
+  expand-template@2.0.3:
+    optional: true
+
+  fast-deep-equal@3.1.3: {}
+
+  fast-glob@3.3.1:
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      '@nodelib/fs.walk': 1.2.8
+      glob-parent: 5.1.2
+      merge2: 1.4.1
+      micromatch: 4.0.8
+
+  fast-glob@3.3.3:
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      '@nodelib/fs.walk': 1.2.8
+      glob-parent: 5.1.2
+      merge2: 1.4.1
+      micromatch: 4.0.8
+
+  fast-json-stable-stringify@2.1.0: {}
+
+  fast-levenshtein@2.0.6: {}
+
+  fast-sha256@1.3.0: {}
+
+  fastq@1.19.1:
+    dependencies:
+      reusify: 1.1.0
+
+  fdir@6.5.0(picomatch@4.0.3):
+    optionalDependencies:
+      picomatch: 4.0.3
+
+  file-entry-cache@8.0.0:
+    dependencies:
+      flat-cache: 4.0.1
+
+  file-uri-to-path@1.0.0:
+    optional: true
+
+  fill-range@7.1.1:
+    dependencies:
+      to-regex-range: 5.0.1
+
+  find-up@5.0.0:
+    dependencies:
+      locate-path: 6.0.0
+      path-exists: 4.0.0
+
+  flat-cache@4.0.1:
+    dependencies:
+      flatted: 3.3.3
+      keyv: 4.5.4
+
+  flatted@3.3.3: {}
+
+  for-each@0.3.5:
+    dependencies:
+      is-callable: 1.2.7
+
+  framer-motion@12.23.24(react-dom@19.2.0(react@19.2.0))(react@19.2.0):
+    dependencies:
+      motion-dom: 12.23.23
+      motion-utils: 12.23.6
+      tslib: 2.8.1
+    optionalDependencies:
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+
+  fs-constants@1.0.0:
+    optional: true
+
+  fsevents@2.3.3:
+    optional: true
+
+  function-bind@1.1.2: {}
+
+  function.prototype.name@1.1.8:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      define-properties: 1.2.1
+      functions-have-names: 1.2.3
+      hasown: 2.0.2
+      is-callable: 1.2.7
+
+  functions-have-names@1.2.3: {}
+
+  generator-function@2.0.1: {}
+
+  gensync@1.0.0-beta.2: {}
+
+  get-intrinsic@1.3.0:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      es-define-property: 1.0.1
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.1
+      function-bind: 1.1.2
+      get-proto: 1.0.1
+      gopd: 1.2.0
+      has-symbols: 1.1.0
+      hasown: 2.0.2
+      math-intrinsics: 1.1.0
+
+  get-nonce@1.0.1: {}
+
+  get-proto@1.0.1:
+    dependencies:
+      dunder-proto: 1.0.1
+      es-object-atoms: 1.1.1
+
+  get-symbol-description@1.1.0:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+
+  get-tsconfig@4.12.0:
+    dependencies:
+      resolve-pkg-maps: 1.0.0
+
+  github-from-package@0.0.0:
+    optional: true
+
+  glob-parent@5.1.2:
+    dependencies:
+      is-glob: 4.0.3
+
+  glob-parent@6.0.2:
+    dependencies:
+      is-glob: 4.0.3
+
+  globals@14.0.0: {}
+
+  globals@16.4.0: {}
+
+  globalthis@1.0.4:
+    dependencies:
+      define-properties: 1.2.1
+      gopd: 1.2.0
+
+  gopd@1.2.0: {}
+
+  graceful-fs@4.2.11: {}
+
+  graphemer@1.4.0: {}
+
+  has-bigints@1.1.0: {}
+
+  has-flag@4.0.0: {}
+
+  has-property-descriptors@1.0.2:
+    dependencies:
+      es-define-property: 1.0.1
+
+  has-proto@1.2.0:
+    dependencies:
+      dunder-proto: 1.0.1
+
+  has-symbols@1.1.0: {}
+
+  has-tostringtag@1.0.2:
+    dependencies:
+      has-symbols: 1.1.0
+
+  hasown@2.0.2:
+    dependencies:
+      function-bind: 1.1.2
+
+  hermes-estree@0.25.1: {}
+
+  hermes-parser@0.25.1:
+    dependencies:
+      hermes-estree: 0.25.1
+
+  ieee754@1.2.1:
+    optional: true
+
+  ignore@5.3.2: {}
+
+  ignore@7.0.5: {}
+
+  immer@10.1.3: {}
+
+  import-fresh@3.3.1:
+    dependencies:
+      parent-module: 1.0.1
+      resolve-from: 4.0.0
+
+  imurmurhash@0.1.4: {}
+
+  inherits@2.0.4:
+    optional: true
+
+  ini@1.3.8:
+    optional: true
+
+  internal-slot@1.1.0:
+    dependencies:
+      es-errors: 1.3.0
+      hasown: 2.0.2
+      side-channel: 1.1.0
+
+  internmap@2.0.3: {}
+
+  is-array-buffer@3.0.5:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      get-intrinsic: 1.3.0
+
+  is-async-function@2.1.1:
+    dependencies:
+      async-function: 1.0.0
+      call-bound: 1.0.4
+      get-proto: 1.0.1
+      has-tostringtag: 1.0.2
+      safe-regex-test: 1.1.0
+
+  is-bigint@1.1.0:
+    dependencies:
+      has-bigints: 1.1.0
+
+  is-boolean-object@1.2.2:
+    dependencies:
+      call-bound: 1.0.4
+      has-tostringtag: 1.0.2
+
+  is-bun-module@2.0.0:
+    dependencies:
+      semver: 7.7.3
+
+  is-callable@1.2.7: {}
+
+  is-core-module@2.16.1:
+    dependencies:
+      hasown: 2.0.2
+
+  is-data-view@1.0.2:
+    dependencies:
+      call-bound: 1.0.4
+      get-intrinsic: 1.3.0
+      is-typed-array: 1.1.15
+
+  is-date-object@1.1.0:
+    dependencies:
+      call-bound: 1.0.4
+      has-tostringtag: 1.0.2
+
+  is-extglob@2.1.1: {}
+
+  is-finalizationregistry@1.1.1:
+    dependencies:
+      call-bound: 1.0.4
+
+  is-generator-function@1.1.2:
+    dependencies:
+      call-bound: 1.0.4
+      generator-function: 2.0.1
+      get-proto: 1.0.1
+      has-tostringtag: 1.0.2
+      safe-regex-test: 1.1.0
+
+  is-glob@4.0.3:
+    dependencies:
+      is-extglob: 2.1.1
+
+  is-map@2.0.3: {}
+
+  is-negative-zero@2.0.3: {}
+
+  is-number-object@1.1.1:
+    dependencies:
+      call-bound: 1.0.4
+      has-tostringtag: 1.0.2
+
+  is-number@7.0.0: {}
+
+  is-regex@1.2.1:
+    dependencies:
+      call-bound: 1.0.4
+      gopd: 1.2.0
+      has-tostringtag: 1.0.2
+      hasown: 2.0.2
+
+  is-set@2.0.3: {}
+
+  is-shared-array-buffer@1.0.4:
+    dependencies:
+      call-bound: 1.0.4
+
+  is-string@1.1.1:
+    dependencies:
+      call-bound: 1.0.4
+      has-tostringtag: 1.0.2
+
+  is-symbol@1.1.1:
+    dependencies:
+      call-bound: 1.0.4
+      has-symbols: 1.1.0
+      safe-regex-test: 1.1.0
+
+  is-typed-array@1.1.15:
+    dependencies:
+      which-typed-array: 1.1.19
+
+  is-weakmap@2.0.2: {}
+
+  is-weakref@1.1.1:
+    dependencies:
+      call-bound: 1.0.4
+
+  is-weakset@2.0.4:
+    dependencies:
+      call-bound: 1.0.4
+      get-intrinsic: 1.3.0
+
+  isarray@2.0.5: {}
+
+  isexe@2.0.0: {}
+
+  iterator.prototype@1.1.5:
+    dependencies:
+      define-data-property: 1.1.4
+      es-object-atoms: 1.1.1
+      get-intrinsic: 1.3.0
+      get-proto: 1.0.1
+      has-symbols: 1.1.0
+      set-function-name: 2.0.2
+
+  jiti@2.6.1: {}
+
+  jose@6.1.0: {}
+
+  js-tokens@4.0.0: {}
+
+  js-yaml@4.1.0:
+    dependencies:
+      argparse: 2.0.1
+
+  jsesc@3.1.0: {}
+
+  json-buffer@3.0.1: {}
+
+  json-schema-traverse@0.4.1: {}
+
+  json-schema@0.4.0: {}
+
+  json-stable-stringify-without-jsonify@1.0.1: {}
+
+  json5@1.0.2:
+    dependencies:
+      minimist: 1.2.8
+
+  json5@2.2.3: {}
+
+  jsx-ast-utils@3.3.5:
+    dependencies:
+      array-includes: 3.1.9
+      array.prototype.flat: 1.3.3
+      object.assign: 4.1.7
+      object.values: 1.2.1
+
+  keyv@4.5.4:
+    dependencies:
+      json-buffer: 3.0.1
+
+  kysely@0.28.8: {}
+
+  language-subtag-registry@0.3.23: {}
+
+  language-tags@1.0.9:
+    dependencies:
+      language-subtag-registry: 0.3.23
+
+  levn@0.4.1:
+    dependencies:
+      prelude-ls: 1.2.1
+      type-check: 0.4.0
+
+  lightningcss-android-arm64@1.30.2:
+    optional: true
+
+  lightningcss-darwin-arm64@1.30.2:
+    optional: true
+
+  lightningcss-darwin-x64@1.30.2:
+    optional: true
+
+  lightningcss-freebsd-x64@1.30.2:
+    optional: true
+
+  lightningcss-linux-arm-gnueabihf@1.30.2:
+    optional: true
+
+  lightningcss-linux-arm64-gnu@1.30.2:
+    optional: true
+
+  lightningcss-linux-arm64-musl@1.30.2:
+    optional: true
+
+  lightningcss-linux-x64-gnu@1.30.2:
+    optional: true
+
+  lightningcss-linux-x64-musl@1.30.2:
+    optional: true
+
+  lightningcss-win32-arm64-msvc@1.30.2:
+    optional: true
+
+  lightningcss-win32-x64-msvc@1.30.2:
+    optional: true
+
+  lightningcss@1.30.2:
+    dependencies:
+      detect-libc: 2.1.2
+    optionalDependencies:
+      lightningcss-android-arm64: 1.30.2
+      lightningcss-darwin-arm64: 1.30.2
+      lightningcss-darwin-x64: 1.30.2
+      lightningcss-freebsd-x64: 1.30.2
+      lightningcss-linux-arm-gnueabihf: 1.30.2
+      lightningcss-linux-arm64-gnu: 1.30.2
+      lightningcss-linux-arm64-musl: 1.30.2
+      lightningcss-linux-x64-gnu: 1.30.2
+      lightningcss-linux-x64-musl: 1.30.2
+      lightningcss-win32-arm64-msvc: 1.30.2
+      lightningcss-win32-x64-msvc: 1.30.2
+
+  locate-path@6.0.0:
+    dependencies:
+      p-locate: 5.0.0
+
+  lodash.merge@4.6.2: {}
+
+  loose-envify@1.4.0:
+    dependencies:
+      js-tokens: 4.0.0
+
+  lru-cache@5.1.1:
+    dependencies:
+      yallist: 3.1.1
+
+  lucide-react@0.553.0(react@19.2.0):
+    dependencies:
+      react: 19.2.0
+
+  magic-string@0.30.21:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+
+  math-intrinsics@1.1.0: {}
+
+  merge2@1.4.1: {}
+
+  micromatch@4.0.8:
+    dependencies:
+      braces: 3.0.3
+      picomatch: 2.3.1
+
+  mimic-response@3.1.0:
+    optional: true
+
+  minimatch@3.1.2:
+    dependencies:
+      brace-expansion: 1.1.12
+
+  minimatch@9.0.5:
+    dependencies:
+      brace-expansion: 2.0.2
+
+  minimist@1.2.8: {}
+
+  mkdirp-classic@0.5.3:
+    optional: true
+
+  motion-dom@12.23.23:
+    dependencies:
+      motion-utils: 12.23.6
+
+  motion-utils@12.23.6: {}
+
+  motion@12.23.24(react-dom@19.2.0(react@19.2.0))(react@19.2.0):
+    dependencies:
+      framer-motion: 12.23.24(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      tslib: 2.8.1
+    optionalDependencies:
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+
+  ms@2.1.3: {}
+
+  nanoid@3.3.11: {}
+
+  nanostores@1.0.1: {}
+
+  napi-build-utils@2.0.0:
+    optional: true
+
+  napi-postinstall@0.3.4: {}
+
+  natural-compare@1.4.0: {}
+
+  next-themes@0.4.6(react-dom@19.2.0(react@19.2.0))(react@19.2.0):
+    dependencies:
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+
+  next@16.0.3(@babel/core@7.28.5)(@opentelemetry/api@1.9.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.0(react@19.2.0))(react@19.2.0):
+    dependencies:
+      '@next/env': 16.0.3
+      '@swc/helpers': 0.5.15
+      caniuse-lite: 1.0.30001754
+      postcss: 8.4.31
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+      styled-jsx: 5.1.6(@babel/core@7.28.5)(react@19.2.0)
+    optionalDependencies:
+      '@next/swc-darwin-arm64': 16.0.3
+      '@next/swc-darwin-x64': 16.0.3
+      '@next/swc-linux-arm64-gnu': 16.0.3
+      '@next/swc-linux-arm64-musl': 16.0.3
+      '@next/swc-linux-x64-gnu': 16.0.3
+      '@next/swc-linux-x64-musl': 16.0.3
+      '@next/swc-win32-arm64-msvc': 16.0.3
+      '@next/swc-win32-x64-msvc': 16.0.3
+      '@opentelemetry/api': 1.9.0
+      babel-plugin-react-compiler: 1.0.0
+      sharp: 0.34.4
+    transitivePeerDependencies:
+      - '@babel/core'
+      - babel-plugin-macros
+
+  node-abi@3.78.0:
+    dependencies:
+      semver: 7.7.3
+    optional: true
+
+  node-releases@2.0.27: {}
+
+  object-assign@4.1.1: {}
+
+  object-inspect@1.13.4: {}
+
+  object-keys@1.1.1: {}
+
+  object.assign@4.1.7:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      define-properties: 1.2.1
+      es-object-atoms: 1.1.1
+      has-symbols: 1.1.0
+      object-keys: 1.1.1
+
+  object.entries@1.1.9:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      define-properties: 1.2.1
+      es-object-atoms: 1.1.1
+
+  object.fromentries@2.0.8:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+      es-object-atoms: 1.1.1
+
+  object.groupby@1.0.3:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+
+  object.values@1.2.1:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      define-properties: 1.2.1
+      es-object-atoms: 1.1.1
+
+  once@1.4.0:
+    dependencies:
+      wrappy: 1.0.2
+    optional: true
+
+  optionator@0.9.4:
+    dependencies:
+      deep-is: 0.1.4
+      fast-levenshtein: 2.0.6
+      levn: 0.4.1
+      prelude-ls: 1.2.1
+      type-check: 0.4.0
+      word-wrap: 1.2.5
+
+  own-keys@1.0.1:
+    dependencies:
+      get-intrinsic: 1.3.0
+      object-keys: 1.1.1
+      safe-push-apply: 1.0.0
+
+  p-limit@3.1.0:
+    dependencies:
+      yocto-queue: 0.1.0
+
+  p-locate@5.0.0:
+    dependencies:
+      p-limit: 3.1.0
+
+  parent-module@1.0.1:
+    dependencies:
+      callsites: 3.1.0
+
+  path-exists@4.0.0: {}
+
+  path-key@3.1.1: {}
+
+  path-parse@1.0.7: {}
+
+  pg-cloudflare@1.2.7:
+    optional: true
+
+  pg-connection-string@2.9.1: {}
+
+  pg-int8@1.0.1: {}
+
+  pg-pool@3.10.1(pg@8.16.3):
+    dependencies:
+      pg: 8.16.3
+
+  pg-protocol@1.10.3: {}
+
+  pg-types@2.2.0:
+    dependencies:
+      pg-int8: 1.0.1
+      postgres-array: 2.0.0
+      postgres-bytea: 1.0.0
+      postgres-date: 1.0.7
+      postgres-interval: 1.2.0
+
+  pg@8.16.3:
+    dependencies:
+      pg-connection-string: 2.9.1
+      pg-pool: 3.10.1(pg@8.16.3)
+      pg-protocol: 1.10.3
+      pg-types: 2.2.0
+      pgpass: 1.0.5
+    optionalDependencies:
+      pg-cloudflare: 1.2.7
+
+  pgpass@1.0.5:
+    dependencies:
+      split2: 4.2.0
+
+  picocolors@1.1.1: {}
+
+  picomatch@2.3.1: {}
+
+  picomatch@4.0.3: {}
+
+  possible-typed-array-names@1.1.0: {}
+
+  postcss@8.4.31:
+    dependencies:
+      nanoid: 3.3.11
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+
+  postcss@8.5.6:
+    dependencies:
+      nanoid: 3.3.11
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+
+  postgres-array@2.0.0: {}
+
+  postgres-bytea@1.0.0: {}
+
+  postgres-date@1.0.7: {}
+
+  postgres-interval@1.2.0:
+    dependencies:
+      xtend: 4.0.2
+
+  prebuild-install@7.1.3:
+    dependencies:
+      detect-libc: 2.1.2
+      expand-template: 2.0.3
+      github-from-package: 0.0.0
+      minimist: 1.2.8
+      mkdirp-classic: 0.5.3
+      napi-build-utils: 2.0.0
+      node-abi: 3.78.0
+      pump: 3.0.3
+      rc: 1.2.8
+      simple-get: 4.0.1
+      tar-fs: 2.1.4
+      tunnel-agent: 0.6.0
+    optional: true
+
+  prelude-ls@1.2.1: {}
+
+  prop-types@15.8.1:
+    dependencies:
+      loose-envify: 1.4.0
+      object-assign: 4.1.1
+      react-is: 16.13.1
+
+  pump@3.0.3:
+    dependencies:
+      end-of-stream: 1.4.5
+      once: 1.4.0
+    optional: true
+
+  punycode@2.3.1: {}
+
+  pvtsutils@1.3.6:
+    dependencies:
+      tslib: 2.8.1
+
+  pvutils@1.1.3: {}
+
+  querystringify@2.2.0: {}
+
+  queue-microtask@1.2.3: {}
+
+  rc@1.2.8:
+    dependencies:
+      deep-extend: 0.6.0
+      ini: 1.3.8
+      minimist: 1.2.8
+      strip-json-comments: 2.0.1
+    optional: true
+
+  react-day-picker@9.11.1(react@19.2.0):
+    dependencies:
+      '@date-fns/tz': 1.4.1
+      date-fns: 4.1.0
+      date-fns-jalali: 4.1.0-0
+      react: 19.2.0
+
+  react-dom@19.2.0(react@19.2.0):
+    dependencies:
+      react: 19.2.0
+      scheduler: 0.27.0
+
+  react-is@16.13.1: {}
+
+  react-is@18.3.1: {}
+
+  react-redux@9.2.0(@types/react@19.2.4)(react@19.2.0)(redux@5.0.1):
+    dependencies:
+      '@types/use-sync-external-store': 0.0.6
+      react: 19.2.0
+      use-sync-external-store: 1.6.0(react@19.2.0)
+    optionalDependencies:
+      '@types/react': 19.2.4
+      redux: 5.0.1
+
+  react-remove-scroll-bar@2.3.8(@types/react@19.2.4)(react@19.2.0):
+    dependencies:
+      react: 19.2.0
+      react-style-singleton: 2.2.3(@types/react@19.2.4)(react@19.2.0)
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 19.2.4
+
+  react-remove-scroll@2.7.1(@types/react@19.2.4)(react@19.2.0):
+    dependencies:
+      react: 19.2.0
+      react-remove-scroll-bar: 2.3.8(@types/react@19.2.4)(react@19.2.0)
+      react-style-singleton: 2.2.3(@types/react@19.2.4)(react@19.2.0)
+      tslib: 2.8.1
+      use-callback-ref: 1.3.3(@types/react@19.2.4)(react@19.2.0)
+      use-sidecar: 1.1.3(@types/react@19.2.4)(react@19.2.0)
+    optionalDependencies:
+      '@types/react': 19.2.4
+
+  react-style-singleton@2.2.3(@types/react@19.2.4)(react@19.2.0):
+    dependencies:
+      get-nonce: 1.0.1
+      react: 19.2.0
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 19.2.4
+
+  react@19.2.0: {}
+
+  readable-stream@3.6.2:
+    dependencies:
+      inherits: 2.0.4
+      string_decoder: 1.3.0
+      util-deprecate: 1.0.2
+    optional: true
+
+  recharts@3.4.1(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react-is@18.3.1)(react@19.2.0)(redux@5.0.1):
+    dependencies:
+      '@reduxjs/toolkit': 2.9.1(react-redux@9.2.0(@types/react@19.2.4)(react@19.2.0)(redux@5.0.1))(react@19.2.0)
+      clsx: 2.1.1
+      decimal.js-light: 2.5.1
+      es-toolkit: 1.40.0
+      eventemitter3: 5.0.1
+      immer: 10.1.3
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+      react-is: 18.3.1
+      react-redux: 9.2.0(@types/react@19.2.4)(react@19.2.0)(redux@5.0.1)
+      reselect: 5.1.1
+      tiny-invariant: 1.3.3
+      use-sync-external-store: 1.6.0(react@19.2.0)
+      victory-vendor: 37.3.6
+    transitivePeerDependencies:
+      - '@types/react'
+      - redux
+
+  redux-thunk@3.1.0(redux@5.0.1):
+    dependencies:
+      redux: 5.0.1
+
+  redux@5.0.1: {}
+
+  reflect-metadata@0.2.2: {}
+
+  reflect.getprototypeof@1.0.10:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.1
+      get-intrinsic: 1.3.0
+      get-proto: 1.0.1
+      which-builtin-type: 1.2.1
+
+  regexp.prototype.flags@1.5.4:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-errors: 1.3.0
+      get-proto: 1.0.1
+      gopd: 1.2.0
+      set-function-name: 2.0.2
+
+  requires-port@1.0.0: {}
+
+  reselect@5.1.1: {}
+
+  resend@6.4.2:
+    dependencies:
+      svix: 1.76.1
+
+  resolve-from@4.0.0: {}
+
+  resolve-pkg-maps@1.0.0: {}
+
+  resolve@1.22.10:
+    dependencies:
+      is-core-module: 2.16.1
+      path-parse: 1.0.7
+      supports-preserve-symlinks-flag: 1.0.0
+
+  resolve@2.0.0-next.5:
+    dependencies:
+      is-core-module: 2.16.1
+      path-parse: 1.0.7
+      supports-preserve-symlinks-flag: 1.0.0
+
+  reusify@1.1.0: {}
+
+  rou3@0.5.1: {}
+
+  run-parallel@1.2.0:
+    dependencies:
+      queue-microtask: 1.2.3
+
+  safe-array-concat@1.1.3:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      get-intrinsic: 1.3.0
+      has-symbols: 1.1.0
+      isarray: 2.0.5
+
+  safe-buffer@5.2.1:
+    optional: true
+
+  safe-push-apply@1.0.0:
+    dependencies:
+      es-errors: 1.3.0
+      isarray: 2.0.5
+
+  safe-regex-test@1.1.0:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      is-regex: 1.2.1
+
+  scheduler@0.27.0: {}
+
+  semver@6.3.1: {}
+
+  semver@7.7.3: {}
+
+  set-cookie-parser@2.7.1: {}
+
+  set-function-length@1.2.2:
+    dependencies:
+      define-data-property: 1.1.4
+      es-errors: 1.3.0
+      function-bind: 1.1.2
+      get-intrinsic: 1.3.0
+      gopd: 1.2.0
+      has-property-descriptors: 1.0.2
+
+  set-function-name@2.0.2:
+    dependencies:
+      define-data-property: 1.1.4
+      es-errors: 1.3.0
+      functions-have-names: 1.2.3
+      has-property-descriptors: 1.0.2
+
+  set-proto@1.0.0:
+    dependencies:
+      dunder-proto: 1.0.1
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.1
+
+  sharp@0.34.4:
+    dependencies:
+      '@img/colour': 1.0.0
+      detect-libc: 2.1.2
+      semver: 7.7.3
+    optionalDependencies:
+      '@img/sharp-darwin-arm64': 0.34.4
+      '@img/sharp-darwin-x64': 0.34.4
+      '@img/sharp-libvips-darwin-arm64': 1.2.3
+      '@img/sharp-libvips-darwin-x64': 1.2.3
+      '@img/sharp-libvips-linux-arm': 1.2.3
+      '@img/sharp-libvips-linux-arm64': 1.2.3
+      '@img/sharp-libvips-linux-ppc64': 1.2.3
+      '@img/sharp-libvips-linux-s390x': 1.2.3
+      '@img/sharp-libvips-linux-x64': 1.2.3
+      '@img/sharp-libvips-linuxmusl-arm64': 1.2.3
+      '@img/sharp-libvips-linuxmusl-x64': 1.2.3
+      '@img/sharp-linux-arm': 0.34.4
+      '@img/sharp-linux-arm64': 0.34.4
+      '@img/sharp-linux-ppc64': 0.34.4
+      '@img/sharp-linux-s390x': 0.34.4
+      '@img/sharp-linux-x64': 0.34.4
+      '@img/sharp-linuxmusl-arm64': 0.34.4
+      '@img/sharp-linuxmusl-x64': 0.34.4
+      '@img/sharp-wasm32': 0.34.4
+      '@img/sharp-win32-arm64': 0.34.4
+      '@img/sharp-win32-ia32': 0.34.4
+      '@img/sharp-win32-x64': 0.34.4
+    optional: true
+
+  shebang-command@2.0.0:
+    dependencies:
+      shebang-regex: 3.0.0
+
+  shebang-regex@3.0.0: {}
+
+  side-channel-list@1.0.0:
+    dependencies:
+      es-errors: 1.3.0
+      object-inspect: 1.13.4
+
+  side-channel-map@1.0.1:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+      object-inspect: 1.13.4
+
+  side-channel-weakmap@1.0.2:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+      object-inspect: 1.13.4
+      side-channel-map: 1.0.1
+
+  side-channel@1.1.0:
+    dependencies:
+      es-errors: 1.3.0
+      object-inspect: 1.13.4
+      side-channel-list: 1.0.0
+      side-channel-map: 1.0.1
+      side-channel-weakmap: 1.0.2
+
+  simple-concat@1.0.1:
+    optional: true
+
+  simple-get@4.0.1:
+    dependencies:
+      decompress-response: 6.0.0
+      once: 1.4.0
+      simple-concat: 1.0.1
+    optional: true
+
+  sonner@2.0.7(react-dom@19.2.0(react@19.2.0))(react@19.2.0):
+    dependencies:
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+
+  source-map-js@1.2.1: {}
+
+  source-map-support@0.5.21:
+    dependencies:
+      buffer-from: 1.1.2
+      source-map: 0.6.1
+
+  source-map@0.6.1: {}
+
+  split2@4.2.0: {}
+
+  stable-hash@0.0.5: {}
+
+  stop-iteration-iterator@1.1.0:
+    dependencies:
+      es-errors: 1.3.0
+      internal-slot: 1.1.0
+
+  string.prototype.includes@2.0.1:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+
+  string.prototype.matchall@4.0.12:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.1
+      get-intrinsic: 1.3.0
+      gopd: 1.2.0
+      has-symbols: 1.1.0
+      internal-slot: 1.1.0
+      regexp.prototype.flags: 1.5.4
+      set-function-name: 2.0.2
+      side-channel: 1.1.0
+
+  string.prototype.repeat@1.0.0:
+    dependencies:
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+
+  string.prototype.trim@1.2.10:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      define-data-property: 1.1.4
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+      es-object-atoms: 1.1.1
+      has-property-descriptors: 1.0.2
+
+  string.prototype.trimend@1.0.9:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      define-properties: 1.2.1
+      es-object-atoms: 1.1.1
+
+  string.prototype.trimstart@1.0.8:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-object-atoms: 1.1.1
+
+  string_decoder@1.3.0:
+    dependencies:
+      safe-buffer: 5.2.1
+    optional: true
+
+  strip-bom@3.0.0: {}
+
+  strip-json-comments@2.0.1:
+    optional: true
+
+  strip-json-comments@3.1.1: {}
+
+  styled-jsx@5.1.6(@babel/core@7.28.5)(react@19.2.0):
+    dependencies:
+      client-only: 0.0.1
+      react: 19.2.0
+    optionalDependencies:
+      '@babel/core': 7.28.5
+
+  supports-color@7.2.0:
+    dependencies:
+      has-flag: 4.0.0
+
+  supports-preserve-symlinks-flag@1.0.0: {}
+
+  svix@1.76.1:
+    dependencies:
+      '@stablelib/base64': 1.0.1
+      '@types/node': 22.18.12
+      es6-promise: 4.2.8
+      fast-sha256: 1.3.0
+      url-parse: 1.5.10
+      uuid: 10.0.0
+
+  tailwind-merge@3.4.0: {}
+
+  tailwindcss@4.1.17: {}
+
+  tapable@2.3.0: {}
+
+  tar-fs@2.1.4:
+    dependencies:
+      chownr: 1.1.4
+      mkdirp-classic: 0.5.3
+      pump: 3.0.3
+      tar-stream: 2.2.0
+    optional: true
+
+  tar-stream@2.2.0:
+    dependencies:
+      bl: 4.1.0
+      end-of-stream: 1.4.5
+      fs-constants: 1.0.0
+      inherits: 2.0.4
+      readable-stream: 3.6.2
+    optional: true
+
+  tiny-invariant@1.3.3: {}
+
+  tinyglobby@0.2.15:
+    dependencies:
+      fdir: 6.5.0(picomatch@4.0.3)
+      picomatch: 4.0.3
+
+  to-regex-range@5.0.1:
+    dependencies:
+      is-number: 7.0.0
+
+  ts-api-utils@2.1.0(typescript@5.9.3):
+    dependencies:
+      typescript: 5.9.3
+
+  tsconfig-paths@3.15.0:
+    dependencies:
+      '@types/json5': 0.0.29
+      json5: 1.0.2
+      minimist: 1.2.8
+      strip-bom: 3.0.0
+
+  tslib@1.14.1: {}
+
+  tslib@2.8.1: {}
+
+  tsx@4.20.6:
+    dependencies:
+      esbuild: 0.25.10
+      get-tsconfig: 4.12.0
+    optionalDependencies:
+      fsevents: 2.3.3
+
+  tsyringe@4.10.0:
+    dependencies:
+      tslib: 1.14.1
+
+  tunnel-agent@0.6.0:
+    dependencies:
+      safe-buffer: 5.2.1
+    optional: true
+
+  type-check@0.4.0:
+    dependencies:
+      prelude-ls: 1.2.1
+
+  typed-array-buffer@1.0.3:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      is-typed-array: 1.1.15
+
+  typed-array-byte-length@1.0.3:
+    dependencies:
+      call-bind: 1.0.8
+      for-each: 0.3.5
+      gopd: 1.2.0
+      has-proto: 1.2.0
+      is-typed-array: 1.1.15
+
+  typed-array-byte-offset@1.0.4:
+    dependencies:
+      available-typed-arrays: 1.0.7
+      call-bind: 1.0.8
+      for-each: 0.3.5
+      gopd: 1.2.0
+      has-proto: 1.2.0
+      is-typed-array: 1.1.15
+      reflect.getprototypeof: 1.0.10
+
+  typed-array-length@1.0.7:
+    dependencies:
+      call-bind: 1.0.8
+      for-each: 0.3.5
+      gopd: 1.2.0
+      is-typed-array: 1.1.15
+      possible-typed-array-names: 1.1.0
+      reflect.getprototypeof: 1.0.10
+
+  typescript-eslint@8.46.3(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3):
+    dependencies:
+      '@typescript-eslint/eslint-plugin': 8.46.3(@typescript-eslint/parser@8.46.3(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/parser': 8.46.3(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/typescript-estree': 8.46.3(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.46.3(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)
+      eslint: 9.39.1(jiti@2.6.1)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
+  typescript@5.9.3: {}
+
+  unbox-primitive@1.1.0:
+    dependencies:
+      call-bound: 1.0.4
+      has-bigints: 1.1.0
+      has-symbols: 1.1.0
+      which-boxed-primitive: 1.1.1
+
+  uncrypto@0.1.3: {}
+
+  undici-types@6.21.0: {}
+
+  undici-types@7.16.0: {}
+
+  unrs-resolver@1.11.1:
+    dependencies:
+      napi-postinstall: 0.3.4
+    optionalDependencies:
+      '@unrs/resolver-binding-android-arm-eabi': 1.11.1
+      '@unrs/resolver-binding-android-arm64': 1.11.1
+      '@unrs/resolver-binding-darwin-arm64': 1.11.1
+      '@unrs/resolver-binding-darwin-x64': 1.11.1
+      '@unrs/resolver-binding-freebsd-x64': 1.11.1
+      '@unrs/resolver-binding-linux-arm-gnueabihf': 1.11.1
+      '@unrs/resolver-binding-linux-arm-musleabihf': 1.11.1
+      '@unrs/resolver-binding-linux-arm64-gnu': 1.11.1
+      '@unrs/resolver-binding-linux-arm64-musl': 1.11.1
+      '@unrs/resolver-binding-linux-ppc64-gnu': 1.11.1
+      '@unrs/resolver-binding-linux-riscv64-gnu': 1.11.1
+      '@unrs/resolver-binding-linux-riscv64-musl': 1.11.1
+      '@unrs/resolver-binding-linux-s390x-gnu': 1.11.1
+      '@unrs/resolver-binding-linux-x64-gnu': 1.11.1
+      '@unrs/resolver-binding-linux-x64-musl': 1.11.1
+      '@unrs/resolver-binding-wasm32-wasi': 1.11.1
+      '@unrs/resolver-binding-win32-arm64-msvc': 1.11.1
+      '@unrs/resolver-binding-win32-ia32-msvc': 1.11.1
+      '@unrs/resolver-binding-win32-x64-msvc': 1.11.1
+
+  update-browserslist-db@1.1.4(browserslist@4.27.0):
+    dependencies:
+      browserslist: 4.27.0
+      escalade: 3.2.0
+      picocolors: 1.1.1
+
+  uri-js@4.4.1:
+    dependencies:
+      punycode: 2.3.1
+
+  url-parse@1.5.10:
+    dependencies:
+      querystringify: 2.2.0
+      requires-port: 1.0.0
+
+  use-callback-ref@1.3.3(@types/react@19.2.4)(react@19.2.0):
+    dependencies:
+      react: 19.2.0
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 19.2.4
+
+  use-sidecar@1.1.3(@types/react@19.2.4)(react@19.2.0):
+    dependencies:
+      detect-node-es: 1.1.0
+      react: 19.2.0
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 19.2.4
+
+  use-sync-external-store@1.6.0(react@19.2.0):
+    dependencies:
+      react: 19.2.0
+
+  util-deprecate@1.0.2:
+    optional: true
+
+  uuid@10.0.0: {}
+
+  vaul@1.1.2(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0):
+    dependencies:
+      '@radix-ui/react-dialog': 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.4))(@types/react@19.2.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    transitivePeerDependencies:
+      - '@types/react'
+      - '@types/react-dom'
+
+  victory-vendor@37.3.6:
+    dependencies:
+      '@types/d3-array': 3.2.2
+      '@types/d3-ease': 3.0.2
+      '@types/d3-interpolate': 3.0.4
+      '@types/d3-scale': 4.0.9
+      '@types/d3-shape': 3.1.7
+      '@types/d3-time': 3.0.4
+      '@types/d3-timer': 3.0.2
+      d3-array: 3.2.4
+      d3-ease: 3.0.1
+      d3-interpolate: 3.0.1
+      d3-scale: 4.0.2
+      d3-shape: 3.2.0
+      d3-time: 3.1.0
+      d3-timer: 3.0.1
+
+  which-boxed-primitive@1.1.1:
+    dependencies:
+      is-bigint: 1.1.0
+      is-boolean-object: 1.2.2
+      is-number-object: 1.1.1
+      is-string: 1.1.1
+      is-symbol: 1.1.1
+
+  which-builtin-type@1.2.1:
+    dependencies:
+      call-bound: 1.0.4
+      function.prototype.name: 1.1.8
+      has-tostringtag: 1.0.2
+      is-async-function: 2.1.1
+      is-date-object: 1.1.0
+      is-finalizationregistry: 1.1.1
+      is-generator-function: 1.1.2
+      is-regex: 1.2.1
+      is-weakref: 1.1.1
+      isarray: 2.0.5
+      which-boxed-primitive: 1.1.1
+      which-collection: 1.0.2
+      which-typed-array: 1.1.19
+
+  which-collection@1.0.2:
+    dependencies:
+      is-map: 2.0.3
+      is-set: 2.0.3
+      is-weakmap: 2.0.2
+      is-weakset: 2.0.4
+
+  which-typed-array@1.1.19:
+    dependencies:
+      available-typed-arrays: 1.0.7
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      for-each: 0.3.5
+      get-proto: 1.0.1
+      gopd: 1.2.0
+      has-tostringtag: 1.0.2
+
+  which@2.0.2:
+    dependencies:
+      isexe: 2.0.0
+
+  word-wrap@1.2.5: {}
+
+  wrappy@1.0.2:
+    optional: true
+
+  xtend@4.0.2: {}
+
+  yallist@3.1.1: {}
+
+  yocto-queue@0.1.0: {}
+
+  zod-validation-error@4.0.2(zod@4.1.12):
+    dependencies:
+      zod: 4.1.12
+
+  zod@4.1.12: {}
diff --git a/postcss.config.mjs b/postcss.config.mjs
new file mode 100644
index 0000000..c7bcb4b
--- /dev/null
+++ b/postcss.config.mjs
@@ -0,0 +1,5 @@
+const config = {
+  plugins: ["@tailwindcss/postcss"],
+};
+
+export default config;
diff --git a/proxy.ts b/proxy.ts
new file mode 100644
index 0000000..2633335
--- /dev/null
+++ b/proxy.ts
@@ -0,0 +1,60 @@
+import { getSessionCookie } from "better-auth/cookies";
+import { NextRequest, NextResponse } from "next/server";
+
+// Rotas protegidas que requerem autenticação
+const PROTECTED_ROUTES = [
+  "/ajustes",
+  "/anotacoes",
+  "/calendario",
+  "/cartoes",
+  "/categorias",
+  "/contas",
+  "/dashboard",
+  "/insights",
+  "/lancamentos",
+  "/orcamentos",
+  "/pagadores",
+];
+
+// Rotas públicas (não requerem autenticação)
+const PUBLIC_AUTH_ROUTES = ["/login", "/signup"];
+
+export async function proxy(request: NextRequest) {
+  const sessionCookie = getSessionCookie(request);
+  const { pathname } = request.nextUrl;
+
+  // Redirect authenticated users away from login/signup pages
+  if (sessionCookie && PUBLIC_AUTH_ROUTES.includes(pathname)) {
+    return NextResponse.redirect(new URL("/dashboard", request.url));
+  }
+
+  // Redirect unauthenticated users trying to access protected routes
+  const isProtectedRoute = PROTECTED_ROUTES.some((route) =>
+    pathname.startsWith(route)
+  );
+
+  if (!sessionCookie && isProtectedRoute) {
+    return NextResponse.redirect(new URL("/login", request.url));
+  }
+
+  return NextResponse.next();
+}
+
+export const config = {
+  // Apply middleware to protected and auth routes
+  matcher: [
+    "/ajustes/:path*",
+    "/anotacoes/:path*",
+    "/calendario/:path*",
+    "/cartoes/:path*",
+    "/categorias/:path*",
+    "/contas/:path*",
+    "/dashboard/:path*",
+    "/insights/:path*",
+    "/lancamentos/:path*",
+    "/orcamentos/:path*",
+    "/pagadores/:path*",
+    "/login",
+    "/signup",
+  ],
+};
diff --git a/public/avatares/avatar_001.svg b/public/avatares/avatar_001.svg
new file mode 100644
index 0000000..4750181
--- /dev/null
+++ b/public/avatares/avatar_001.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="743" height="743" viewBox="0 0 743 743" xmlns:xlink="http://www.w3.org/1999/xlink" role="img" artist="Katerina Limpitsouni" source="https://undraw.co/"><path d="M743,371.5c0,108.41992-46.44971,206-120.54004,273.90918-12.95996,11.89062-26.76953,22.87012-41.33008,32.83008-3.22949,2.20996-6.48975,4.37988-9.78955,6.49023-3.1001,1.98047-6.24023,3.91016-9.3999,5.7998-2.52051,1.51074-5.06055,2.98047-7.62012,4.43066-8.68018,4.92969-17.58008,9.50977-26.68018,13.72949h-.02002c-1.02979.49023-2.06006.95996-3.1001,1.42969-.62988.29004-1.25977.57031-1.8999.85059-2.91992,1.2998-5.87012,2.57031-8.83008,3.7998-1.21973.5-2.43994,1-3.66016,1.49023-11.8999,4.7998-24.09961,8.99023-36.56982,12.54004-4.52002,1.29004-9.06982,2.5-13.65967,3.60938-20.38037,4.98047-41.42041,8.28027-62.95996,9.73047-8.41016.57031-16.89014.86035-25.44043.86035-29.84961,0-58.87012-3.52051-86.67969-10.16992-2.91016-.69043-5.82031-1.4209-8.7002-2.2002-2.87988-.75-5.75-1.5498-8.6001-2.37988-2.15967-.63086-4.31006-1.28027-6.45996-1.9502-1.41992-.43066-2.83984-.89062-4.25977-1.35059-10.03027-3.25-19.88037-6.91992-29.52002-10.97949-.2002-.08984-.41016-.16992-.61035-.25977-20.19971-8.56055-39.48975-18.86035-57.66992-30.7002v-.00977c-4.7998-3.12012-9.50977-6.35059-14.1499-9.69043C61.07031,605.87988,0,495.81934,0,371.5,0,166.33008,166.33008,0,371.5,0s371.5,166.33008,371.5,371.5Z" fill="#f2f2f2"/><path d="M292.9839,381.83256s23.87145,86.06132.3277,110.58236c-23.54374,24.52103-18.07313,43.32092-18.07313,43.32092,0,0-59.47427,18.98476-68.16239-51.30109l14.50453,53.63657s-55.835-4.40522-39.51383-74.15701c16.32117-69.75179,36.55262-69.82416,25.0093-91.20194-11.54332-21.37779-11.54332-129.87524,54.12619-135.58563,65.66951-5.71039,57.10392,28.55196,57.10392,28.55196l-25.32229,116.15386Z" fill="#090814"/><path d="M565.16992,697.46973c-9.90967,5.26953-25.86963,9.00977-37.52979,11.21973h-.02002c-1.02979.49023-2.06006.95996-3.1001,1.42969-.62988.29004-1.25977.57031-1.8999.85059-2.91992,1.2998-5.87012,2.57031-8.83008,3.7998-1.21973.5-2.43994,1-3.66016,1.49023l3.29004-3.33984,2.17041-2.2002,37.6001-38.17969s3.53955,6.92969,8.75,17.98926c1.01953,2.16016,2.09961,4.48047,3.22949,6.94043Z" fill="#ed9da0"/><path d="M298.19565,393.12555c-2.69218-57.79307,41.97603-106.82617,99.7691-109.51834,57.79307-2.69218,106.82656,41.97601,109.51873,99.76908,2.18337,46.87059-26.78601,87.97406-68.64099,103.27464l-14.00163,134.6349-107.13041-81.13515s20.95666-29.41531,31.41378-61.96909c-29.11127-17.42436-49.23152-48.62507-50.92859-85.05604Z" fill="#ed9da0"/><path d="M573.8501,689.67969c-1.15967,2.88965-4.33984,5.47949-8.68018,7.79004-9.90967,5.26953-25.86963,9.00977-37.52979,11.21973h-.02002c-5.14014.98047-9.4502,1.65039-12.02979,2.03027-.4502.07031-.84033.12988-1.18018.16992-.68994.09961-1.1499.16016-1.33008.19043l-.08984.00977c.16016.60938.2998,1.22949.42969,1.83008.14014.62012.27051,1.23926.37012,1.84961-1.21973.5-2.43994,1-3.66016,1.49023-11.8999,4.7998-24.09961,8.99023-36.56982,12.54004-4.52002,1.29004-9.06982,2.5-13.65967,3.60938-20.38037,4.98047-41.42041,8.28027-62.95996,9.73047-8.41016.57031-16.89014.86035-25.44043.86035-29.84961,0-58.87012-3.52051-86.67969-10.16992-2.91016-.69043-5.82031-1.4209-8.7002-2.2002-2.87988-.75-5.75-1.5498-8.6001-2.37988-2.15967-.63086-4.31006-1.28027-6.45996-1.9502-1.41992-.43066-2.83984-.89062-4.25977-1.35059l-34.14014-152.33984,108.1499-60c.88037.56055,1.75,1.12012,2.62012,1.66992,108.6001,68.86035,100.16992,15.45996,100.16992,15.45996,0,0,.25.15039.70996.43066,5.24023,3.16016,38.37012,22.91992,56.74023,28.16992,17.6001,5.0293,68.41992,103.06934,80.29004,126.38965,1.61963,3.16016,2.50977,4.9502,2.50977,4.9502Z" fill="#dc5c35"/><path d="M511.56909,711.19577c-.03346-.45449-3.49371-45.50747-14.57433-62.1284-11.57693-17.36539-8.91691-42.70804-8.79702-43.77874l2.83847.31508c-.02788.25373-2.65723,25.39284,8.33416,41.87993,11.49607,17.2455,14.90892,61.62093,15.04833,63.50023l-2.84962.21191Z" fill="#090814"/><path d="M459.71113,266.69011s-81.44582-55.26013-141.40494-1.01141c-59.95912,54.24872-63.99253,153.76214,30.81805,212.50288l-7.97648-41.19112s-22.84157-34.26235,14.27598-31.40716,31.40716-31.40716,31.40716-31.40716c0,0,79.49527-35.83421,79.72038-60.74504l29.64063,46.57349s59.24103-49.47514-36.48078-93.31449Z" fill="#090814"/><path d="M335.43736,265.6787s-14.36041-33.34875-32.87697-8.10879c-18.51656,25.23996-4.48032,43.32092-4.48032,43.32092l37.35729-35.21214Z" fill="#dc5c35"/><path d="M226.66992,713.70996c-20.19971-8.56055-39.48975-18.86035-57.66992-30.7002v-.00977c3.87988-6.59082,6.29004-10.45996,6.29004-10.45996l51.37988,41.16992Z" fill="#ed9da0"/><path d="M293.31006,663.26953l-32.25,63.03027c-1.41992-.43066-2.83984-.89062-4.25977-1.35059-10.03027-3.25-19.88037-6.91992-29.52002-10.97949-.2002-.08984-.41016-.16992-.61035-.25977-20.19971-8.56055-39.48975-18.86035-57.66992-30.7002v-.00977c-4.7998-3.12012-9.50977-6.35059-14.1499-9.69043,16.43018-37.22949,67.81006-100.7002,67.81006-100.7002l29.97998,1.43066,40.66992,89.22949Z" fill="#dc5c35"/></svg>
\ No newline at end of file
diff --git a/public/avatares/avatar_002.svg b/public/avatares/avatar_002.svg
new file mode 100644
index 0000000..50f503e
--- /dev/null
+++ b/public/avatares/avatar_002.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="640" height="640" viewBox="0 0 640 640" role="img" artist="Katerina Limpitsouni" source="https://undraw.co/"><defs><clipPath id="a-74"><circle cx="320" cy="320" r="320" transform="translate(501 195)" fill="none" stroke="#707070" stroke-width="1"/></clipPath></defs><g transform="translate(-21484 -20497)"><circle cx="320" cy="320" r="320" transform="translate(21484 20497)" fill="#f2f2f2"/><g transform="translate(20983 20302)" clip-path="url(#a-74)"><g transform="translate(426.41 -258.111)"><path d="M395,524.524a6.435,6.435,0,0,1-4.076-1.454,6.665,6.665,0,0,1-2.442-4.747,207.7,207.7,0,0,1,16.5-95.076c8.734-20.222,18.782-33.252,31.621-41.007,17.128-10.345,40.629-11.171,64.478-2.267,13.629,5.089,23.459,11.74,30.05,20.333,8.794,11.466,11.553,26.177,13.223,40.365a361.8,361.8,0,0,1,1.769,64.689,6.3,6.3,0,0,1-3.5,5.306,6.9,6.9,0,0,1-6.85-.451,14.172,14.172,0,0,0-1.25-.732,15.2,15.2,0,0,0-13.967.177,31.236,31.236,0,0,0-4.448,3.193l-8.574,6.941a6.62,6.62,0,0,1-7.543.478,46.521,46.521,0,0,0-20.309-6,129.64,129.64,0,0,0-28.3,2.054l-55.42,8.124A6.7,6.7,0,0,1,395,524.524Z" transform="translate(-62.412 244.496)" fill="#2f2e41"/><path d="M.022,18.3,19.69,93.288,94.679,78.538S42.356,24.584,49.721,0L0,18.3H.022Z" transform="translate(374.009 727.802) rotate(11)" fill="#ed9da0"/><path d="M507.867,693H421.459V439.014h86.408a62.423,62.423,0,0,1,62.353,62.353V630.643A62.423,62.423,0,0,1,507.867,693Z" transform="translate(-5.075 356.432)" fill="#2f2e41"/><path d="M455.71,548.908a10.9,10.9,0,0,1-10.885-10.885V443.688h21.77v94.336a10.9,10.9,0,0,1-10.885,10.885Z" transform="translate(35.055 364.458)" fill="#3f3d56"/><path d="M507.1,566.409H443.88a13.758,13.758,0,0,1-13.742-13.743V514.842A13.758,13.758,0,0,1,443.88,501.1H507.1a13.758,13.758,0,0,1,13.742,13.743v37.824A13.758,13.758,0,0,1,507.1,566.409Z" transform="translate(9.83 463.063)" fill="#3f3d56"/><path d="M254.356,376.062l-8.481,113.624L189.626,659.372l-22.591-13.131,30.648-172.572,10.408-99.555Z" transform="translate(57 539.824)" fill="#ed9da0"/><path d="M595.814,489.3,534.3,460.5,516.545,429.56l-59.706,3.385-18.067,29.492L385.628,473.2l7.81,192.079c-3.479,6.023-20.428,66.212-20.428,66.212s151.176,77,193.883-21.235c0,0,8.42-28.734-5.8-88.934S595.814,489.3,595.814,489.3Z" transform="translate(-88.287 340.193)" fill="#dc5c35"/><path d="M420.193,457.853,402.727,445.62s-24.157,9.917-24.972,29.981-14.7,80.108-14.7,80.108L418.2,585.356Z" transform="translate(-105.386 367.777)" fill="#dc5c35"/><path d="M355.826,379.547l-8.479,113.621-94.129,141.28-22.588-13.131,68.524-144.163L309.563,377.6Z" transform="translate(166.226 545.81)" fill="#ed9da0"/><path d="M458.658,457.967l28.773-6.423s17.338,5.537,19.705,31.579,4.353,71.365,4.353,71.365l-60.383,44.4-14.992-63.686Z" transform="translate(20.095 377.952)" fill="#dc5c35"/><circle cx="55.16" cy="55.16" r="55.16" transform="translate(337.846 649.294)" fill="#ed9da0"/><path d="M413.6,449.76h0q-10.54-.005-21.107-.028a6.3,6.3,0,0,1-4.5-1.918,6.1,6.1,0,0,1-1.725-4.471,72.52,72.52,0,0,1,33.742-58.106h0a70.451,70.451,0,0,1,107.028,56.321,6.209,6.209,0,0,1-5.943,6.553c-24.411,1.032-51.491,1.534-87.8,1.628h-.018a6.193,6.193,0,0,1-5.757-3.866l-.584-1.43a3.844,3.844,0,0,0-7.3.555A6.194,6.194,0,0,1,413.6,449.76Z" transform="translate(-65.522 246.376)" fill="#2f2e41"/><path d="M459.776,605.157c-14.825-13.95-21.2-34.192-21.3-54.181-.116-22.83,8.147-44.514,18.834-64.364,6.463-12.005,13.828-23.493,21.2-34.955,2.479-3.856-3.666-7.421-6.133-3.585-24.932,38.779-52.388,84.711-36.31,132.37a72.271,72.271,0,0,0,18.689,29.737c3.327,3.131,8.359-1.882,5.022-5.022Z" transform="translate(11.772 369.161)" fill="#3f3d56"/></g></g></g></svg>
\ No newline at end of file
diff --git a/public/avatares/avatar_003.svg b/public/avatares/avatar_003.svg
new file mode 100644
index 0000000..86740c7
--- /dev/null
+++ b/public/avatares/avatar_003.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="640" height="640" viewBox="0 0 640 640" role="img" artist="Katerina Limpitsouni" source="https://undraw.co/"><defs><clipPath id="a-78"><circle cx="320" cy="320" r="320" transform="translate(532 131)" fill="none" stroke="#707070" stroke-width="1"/></clipPath></defs><g transform="translate(-640 -220)"><circle cx="320" cy="320" r="320" transform="translate(640 220)" fill="#f2f2f2"/><g transform="translate(108 89)" clip-path="url(#a-78)"><g transform="translate(-786.643 -263.817)"><path d="M321.754,88.167l2.579,41.86-78.164,3.966,24.206-55.152Z" transform="translate(1347.951 613.625)" fill="#ed9da0"/><path d="M334.533,103.531c-20.951,11.01-54.461,8-92.437,0l-5.938,309.974s123.757,40.089,164.6-11.83L374.29,136.459l-39.769-32.925h0Z" transform="translate(1339.744 633.859)" fill="#dc5c35"/><path d="M292.933,94.674l-56.348,33.351a54.255,54.255,0,0,0-24.438,61.938L255.7,338.706S184.781,460.54,207.824,471.287c51.783,24.153,129.052,18.273,129.052,18.273l-17.27-291.7L292.931,94.669h0Z" transform="translate(1312.751 626.596)" fill="#3f3d58"/><path d="M288.877,102.924l63.714,24.752,15.049,183.8,42.143,148.069c-71.378,26.055-64.712,13.913-64.712,13.913L333.248,217.964,288.879,102.929h0Z" transform="translate(1382.953 633.363)" fill="#3f3d58"/><path d="M369.77,447.653l-.218-1.005L304.424,145.416a25.9,25.9,0,1,1,50.482-11.6L426.439,427.87,369.767,447.65Z" transform="translate(1395.136 642.123)" fill="#3f3d58"/><circle cx="63.414" cy="63.414" r="63.414" transform="translate(1572.377 586.084)" fill="#ed9da0"/><path d="M352.177,18.334c13.969,4.908,21.961,7.719,29.283,14.771,12.366,11.914,14.408,27.836,16.3,42.631,1.484,11.574,3.4,26.538-3.383,43.634-2.313,5.834-13.534,31.828-35.006,35.112-4.217.645-14.118.814-11.264-1.293,26.412-19.5,37.684-31.27,36.761-61.322-.575-18.674-29.107-38.834-46.048-42.457a28.853,28.853,0,0,0-23.442,5.462c-14.239,11.69-13.633,60.029-28.648,70.133-6.175,4.157-2.061-25.1-6.412-20.354-8.584,9.36-3.079,23.684-1.535,29.153,7.318,25.9,14.984,6.745,22.123,28.858,7.717,23.872-59.961,39.946-62.264,45.277-4.007,9.273,53.223,53.269,37.515,60.9-19.938,9.689-35.656-2.929-44.924,7.888-5.181,6.042-2.378,12.451-11.738,31.26-3.055,6.141-4.592,9.21-5.935,9.1-6.4-.515-16.762-51.744,0-99.452,7.033-20.022,13.923-39.634,32.384-54.978,9.766-8.11,17.954-11.027,20.286-20.5,3.33-13.534-10.5-19.3-13.27-40.651-1.895-14.6-3.226-35.48,1.933-48.863,4.867-12.639,9.094-23.609,20.153-33.556C277.706,16.7,299.147.46,321.883,0c10.467-.21,18.159,14.06,30.293,18.326h0Z" transform="translate(1313.784 549.004)" fill="#090814"/><path d="M334.292,212.03c19.575-2.061,36.449,6.752,37.669,19.684s-13.667,25.078-33.259,27.137a47.53,47.53,0,0,1-23.07-2.97l-83.082,7.644L230.057,223l82.168-3.234a48.2,48.2,0,0,1,22.067-7.733Z" transform="translate(1334.749 722.537)" fill="#ed9da0"/><path d="M260.939,114.224h0a38.592,38.592,0,0,0-43.16,30.264c-14.582,69.338-40.753,217.04.35,219.505,53.743,3.224,105.335-9.667,105.335-9.667l-12.9-74.164-41.92-4.3L293.3,160.529a38.6,38.6,0,0,0-32.357-46.3Z" transform="translate(1306.877 642.308)" fill="#3f3d58"/></g></g></g></svg>
\ No newline at end of file
diff --git a/public/avatares/avatar_004.svg b/public/avatares/avatar_004.svg
new file mode 100644
index 0000000..f87a0f9
--- /dev/null
+++ b/public/avatares/avatar_004.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="640" height="640" viewBox="0 0 640 640" role="img" artist="Katerina Limpitsouni" source="https://undraw.co/"><defs><clipPath id="a-88"><circle cx="320" cy="320" r="320" transform="translate(1129 200)" fill="none" stroke="#707070" stroke-width="1"/></clipPath></defs><g transform="translate(-68 -152)"><circle cx="320" cy="320" r="320" transform="translate(68 152)" fill="#f2f2f2"/><g transform="translate(-1061 -48)" clip-path="url(#a-88)"><g transform="translate(1282.835 383.564)"><path d="M322.991,81.632a77.011,77.011,0,1,0-100.083,73.49l2.574,148.209L343.189,187.152s-45.895-17.77-54.687-41.318a76.927,76.927,0,0,0,34.489-64.2Z" transform="translate(-88.792 -2.564)" fill="#ed9da0"/><path d="M316.956,145.878s26.276-9.358,39.746-36.688c12.372-25.1,13.729-67.868-21.4-78.254,0,0,20.239-17.474-17.075-28.12l4.964,4.579s-4.38-7.91-26.009-3.232c0,0-79.924-9.309-94.11,17.007,0,0-42.9,8.791-20.053,41.422,0,0,1.181,6.35,9.332,6.23L188.277,63.5l12.411,5.326s17.262-27.495,33.554-12.292c0,0,31.159-1.311,46.062-4.041,0,0-2.991,40.025,25.612,47.82S316.956,145.878,316.956,145.878Z" transform="translate(-117.59 -2.564)" fill="#090814"/><path d="M326.614,167.618c-32.442,32.6-63.25,41.349-91.6,14.169L194.983,475.145l16.646,24.119,101.232.288,13.753-331.935Z" transform="translate(-98.23 -2.564)" fill="#dc5c35"/><path d="M73.546,164.669l16.928,13.913,51.392,29.332A76.58,76.58,0,0,1,188.3,256.9a461.327,461.327,0,0,1,17.4,80.883c8.447,69.355,2.313,160.805,2.313,160.805l-78.132.679,3.4-45.86,12.569-113.461-.333,159.61H54.465s-6.231-270.71,7.347-330.913a7.284,7.284,0,0,1,11.734-3.97Z" transform="translate(160.166 -2.564)" fill="#090814"/><path d="M423.367,181.787l-61.562,29.6a75.081,75.081,0,0,0-41,52.524L295.009,389.2l-8.43,75.786s36.266,32.479,60.065,21.709l-1.7,12.569h55.032l23.389-317.477Z" transform="translate(-286.579 -2.564)" fill="#090814"/><path d="M242.031,183.241,202.393,473.7l-3.454-5,40.035-293.358c25.9,24.833,53.852,19.672,83.229-6.266a4.738,4.738,0,0,1,7.875,3.471c-31.14,29.712-60.736,36.888-88.047,10.7Z" transform="translate(-105.651 -2.564)" fill="#090814"/></g></g></g></svg>
\ No newline at end of file
diff --git a/public/avatares/avatar_005.svg b/public/avatares/avatar_005.svg
new file mode 100644
index 0000000..119e40b
--- /dev/null
+++ b/public/avatares/avatar_005.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="640" height="640" viewBox="0 0 640 640" role="img" artist="Katerina Limpitsouni" source="https://undraw.co/"><defs><clipPath id="a-90"><circle cx="320" cy="320" r="320" transform="translate(-17355 -6339)" fill="none" stroke="#707070" stroke-width="1"/></clipPath></defs><g transform="translate(-694 -110)"><circle cx="320" cy="320" r="320" transform="translate(694 110)" fill="#f2f2f2"/><g transform="translate(18049 6449)" clip-path="url(#a-90)"><path d="M697.018,68.443s-30.266-27.136-70.97,24-104.364,76.188-118.98,96.018c0,0,60.534-25.049,81.408-35.485s19.832-8.349,19.832-8.349-28.18,19.832-33.4,39.663-1.044,36.529-10.436,56.359,179.513,13.567,179.513,13.567,18.787-32.35,13.567-65.752S755.464,72.617,697.018,68.443Z" transform="translate(-17678.941 -6248.833)" fill="#090814"/><path d="M625.971,139.83s6.582,46.07-21.625,56.412-17.865,24.445-17.865,24.445l42.31,20.684,45.131-14.1L688.965,204.7S664.52,199.063,671.1,182.14s8.462-22.565,8.462-22.565Z" transform="translate(-17665.141 -6234.853)" fill="#ffb9b9"/><path d="M726.124,251.578s-6.582,86.5-4.7,90.26,0,134.45,0,134.45,13.163,70.515-3.761,74.277S704.5,471.587,704.5,471.587L687.575,362.523l1.88-108.124Z" transform="translate(-17646.828 -6214.972)" fill="#ffb9b9"/><ellipse cx="41.786" cy="41.786" rx="41.786" ry="41.786" transform="translate(-17043.348 -6146.212)" fill="#ffb9b9"/><path d="M584.607,194.763l12.42-4.338s-4.9,8.1,21.428,12.8,53.589,6.366,65.816-9.039c0,0,4.7-2.242,11.279,4.338s10.342,4.7,10.342,4.7l-4.7,24.445-9.4,45.131-12.223,33.848-34.787-7.521L607.17,271.856l-14.1-36.669V201.345Z" transform="translate(-17665.145 -6225.853)" fill="#dc5c35"/><path d="M706.412,207.4l9.4-6.582s31.967,5.641,33.848,20.684l-24.446,47.013a53.521,53.521,0,0,1-.941,40.429c-9.4,21.625-8.462,26.326-8.462,26.326l-6.582,28.207-119.406,9.4s-4.7-11.279-6.582-13.163-1.88-8.462,0-8.462,0-2.821-1.88-5.641-2.821-3.761,0-7.521-4.7-37.608-4.7-37.608V263.809L544.7,221.5s11.279-16.924,16.924-18.8,32.474-9.3,32.474-9.3l6.073,8.94,8.462,68.047,12.222,41.369,51.464-8.744,19.992-33.565,13.163-39.488Z" transform="translate(-17672.246 -6225.323)" fill="#dc5c35"/><path d="M715.874,212.466l7.521,5.641s6.582,52.652,4.7,56.412-34.787,7.521-35.728,5.641S715.874,212.466,715.874,212.466Z" transform="translate(-17645.98 -6221.93)" fill="#dc5c35"/><path d="M584.452,190.684l9.4,62.053s-8.462,92.14-6.582,110.944l1.88,5.641s-3.761-1.88-4.7,1.88,0,15.989,0,15.989-5.641,5.641-7.521,36.669-24.445,105.3-15.989,108.124,59.233,16.924,86.5,14.1,125.053-35.733,124.116-44.195-47.95-127.868-47.95-127.868-8.462-14.1-8.462-15.989,11.279-9.4,8.462-16.924-17.866-86.494-17.866-86.494l10.342-56.412-14.1-3.761-10.342,54.537s-40.429,19.745-82.739,1.88l-9.4-63.935Z" transform="translate(-17669.691 -6226.475)" fill="#090814"/><path d="M619.02,109.233s69.576,47.95,88.375,26.325-32.907-40.429-32.907-40.429l-43.249-4.7Z" transform="translate(-17659.023 -6243.642)" fill="#090814"/><path d="M539.134,261.157s6.582,86.5,4.7,90.26,0,134.45,0,134.45-13.163,70.515,3.761,74.277,13.163-78.977,13.163-78.977L577.682,372.1,575.8,263.977Z" transform="translate(-17673.266 -6213.268)" fill="#ffb9b9"/><path d="M553.875,214.861l-7.521,2.821s-14.1,59.233-10.342,59.233,48.891,5.641,48.891,3.761-8.462-47.95-8.462-47.95Z" transform="translate(-17673.906 -6221.505)" fill="#dc5c35"/></g></g></svg>
\ No newline at end of file
diff --git a/public/avatares/avatar_006.svg b/public/avatares/avatar_006.svg
new file mode 100644
index 0000000..78ea568
--- /dev/null
+++ b/public/avatares/avatar_006.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="640" height="640" viewBox="0 0 640 640" role="img" artist="Katerina Limpitsouni" source="https://undraw.co/"><defs><clipPath id="a-98"><circle cx="320" cy="320" r="320" transform="translate(16647 15904)" fill="none" stroke="#707070" stroke-width="1"/></clipPath></defs><g transform="translate(-640 -220)"><circle cx="320" cy="320" r="320" transform="translate(640 220)" fill="#f2f2f2"/><g transform="translate(-16007 -15684)" clip-path="url(#a-98)"><g transform="translate(16783.697 16044.811)"><path d="M574.925,358.759s9.545,31.361,4.091,40.906,9.545,30,34.088,20.453,25.907-20.453,25.907-20.453-9.545-15-12.272-46.36Z" transform="translate(-417.302 -277.318)" fill="#ffb9b9"/><path d="M499.912,567.9s-49.087,24.544-27.27,57.268c12.681,19.022,36.879,56.01,54.921,83.652a278.988,278.988,0,0,1,34.362,74.916l3.437,11.873L579,811.967l28.634-32.725s-42.269-77.721-42.269-92.72S531.273,623.8,531.273,623.8l34.088-21.816S527.182,558.352,499.912,567.9Z" transform="translate(-467.052 -178.981)" fill="#ffb9b9"/><path d="M601.733,627.822S603.1,666,604.46,681c1.125,12.374-9.815,47.021-6.022,85.566a362.319,362.319,0,0,1-.826,74.927l-5.424,49.49,40.906,4.091,13.635-111.809s8.181-79.084,4.091-104.991l1.363-54.541S622.186,612.823,601.733,627.822Z" transform="translate(-409.34 -154.368)" fill="#ffb9b9"/><path d="M579.352,520.482S483.9,581.84,482.541,600.93c0,0,54.541-5.454,55.9,42.269,0,0,32.725-12.272,40.906-15s51.814-31.361,51.814-31.361,17.726,13.635,17.726,35.452-1.364,60,0,62.722,32.725-36.815,58.632-2.727L725.249,598.2s5.454-57.268-5.454-61.359L643.437,508.21Z" transform="translate(-459.908 -205.878)" fill="#2f2e41"/><circle cx="40.906" cy="40.906" r="40.906" transform="translate(136.488 16.674)" fill="#ffb9b9"/><path d="M603.718,393.155s46.14,12.186,52.385-10.951c0,0,56.7,10.951,66.241,47.766s-23.18,125.444-23.18,128.171,12.272,50.451,4.091,53.178-57.268-39.542-95.447-28.634-57.268,2.727-57.268,2.727L533.422,437.453a34.179,34.179,0,0,1,12.152-30.332c8.545-7.033,19.883-14.632,30.875-16.693,21.816-4.091,22.723-6.33,22.723-6.33Z" transform="translate(-436.551 -263.991)" fill="#dc5c35"/><path d="M551.6,553s12.272,69.54,28.634,60-4.091-60-4.091-60Z" transform="translate(-428.061 -185.221)" fill="#ffb9b9"/><path d="M593.792,559.16S572.529,626.5,591.451,625.6s24.105-55.091,24.105-55.091Z" transform="translate(-413.297 -182.381)" fill="#ffb9b9"/><path d="M567.1,324.219s13.159-28.511,38.38-21.932,39.477,16.449,40.573,26.318-.548,24.673-.548,24.673-2.742-20.287-20.287-15.9-44.96,1.1-44.96,1.1l-4.386,39.477s-4.935-7.128-10.417-2.741S549.556,332.992,567.1,324.219Z" transform="translate(-425.405 -301.302)" fill="#2f2e41"/><path d="M674.792,416.423s-32.725,88.629-30,99.537,0,12.272-4.091,15-15,31.361-15,31.361-42.269,72.267-39.542,73.63,21.816,16.362,27.271,15,1.364-19.089,9.545-21.816,36.815-20.453,46.36-42.269,54.7-157.614,27.063-176.156C696.4,410.708,685.7,400.061,674.792,416.423Z" transform="translate(-412.178 -251.808)" fill="#dc5c35"/><path d="M551.207,403.7l-.554.231a34.336,34.336,0,0,0-20.4,24.689c-2.977,14.251-5.907,34.863-3.591,54.164,4.091,34.088,6.818,49.087,12.272,60S555.3,605.5,556.661,608.224s5.454,23.18,5.454,23.18,21.816-6.818,34.088-4.091c0,0-10.908-19.089-8.181-23.18s-6.818-62.722-6.818-62.722Z" transform="translate(-439.944 -254.079)" fill="#dc5c35"/></g></g></g></svg>
\ No newline at end of file
diff --git a/public/avatares/avatar_007.svg b/public/avatares/avatar_007.svg
new file mode 100644
index 0000000..7bcab1d
--- /dev/null
+++ b/public/avatares/avatar_007.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="640" height="640" viewBox="0 0 640 640" role="img" artist="Katerina Limpitsouni" source="https://undraw.co/"><defs><clipPath id="a-92"><circle cx="320" cy="320" r="320" transform="translate(980 239)" fill="none" stroke="#707070" stroke-width="1"/></clipPath></defs><g transform="translate(-33 100)"><circle cx="320" cy="320" r="320" transform="translate(33 -100)" fill="#f2f2f2"/><g transform="translate(-947 -339)" clip-path="url(#a-92)"><g transform="translate(-433.976 85.328)"><path d="M1058.619,314.491l-6.877,33.775-33.668,56.586-41.521-17.734S920.135,328,955.587,319.553a31.091,31.091,0,0,0,11.772-5.245c6.968-5.245,9.149-12.885,9.149-20.356,0-12.336-5.764-24.229-5.764-24.229l72.627-22.872a116,116,0,0,0-5.215,29.429c-.549,19.823,6.8,29.52,12.824,34.171a22.021,22.021,0,0,0,7.64,4.041Z" transform="translate(740.266 176.516)" fill="#ed9da0"/><path d="M1054.149,260.58a57.181,57.181,0,1,1-16.72-40.665A57.425,57.425,0,0,1,1054.149,260.58Z" transform="translate(737.859 153.576)" fill="#ed9da0"/><path d="M1016.181,348.1s-29.7-41.17-18.511-57.165l-50.182,20.57s-30.207-3.66-41.17,41.414a77.964,77.964,0,0,0-1.876,22.872c.4,6.8-.518,18.771-8.264,34.247-12.4,24.778-9.576,81.639,15.767,87.28s34.339,2.806,34.339,2.806-3.37,103.047-18.008,114.864S965.588,624,965.588,624s44.891,2.257,67.976,5.627,87.829-11.817,87.829-11.817-9.576-43.366-12.946-70.95-11.268-86.335-11.268-86.335l57.44-77.766s10.125-47.01-25.342-67.839S1080.482,289,1080.482,289s-35.589,57.943-54.161,60.794C1026.321,349.794,1019.261,352.631,1016.181,348.1Z" transform="translate(711.48 198.637)" fill="#dc5c35"/><path d="M932.516,338.47s-.564,18.587,2.806,25.922,15.767,47.864,15.767,47.864H922.94s15.248-16.331,14.074-24.214S932.516,338.47,932.516,338.47Z" transform="translate(729.273 224.6)" opacity="0.1"/><path d="M1014.766,457.584s-62.182-15.248-67.976-28.163S925,387.5,925,387.5l6.557-8.844L961.809,402.4s36.031,28.712,52.926,31.533S1014.766,457.584,1014.766,457.584Z" transform="translate(730.354 245.692)" fill="#ed9da0"/><path d="M1014.766,457.584s-62.182-15.248-67.976-28.163S925,387.5,925,387.5l6.557-8.844L961.809,402.4s36.031,28.712,52.926,31.533S1014.766,457.584,1014.766,457.584Z" transform="translate(730.354 245.692)" opacity="0.05"/><path d="M1057.793,382.519v33.729h-5.428a157.85,157.85,0,0,0-76.534,19.808l-10.182,5.657-2.729,1.525-17.459-39.31,16.331-14.638h.839c3.995.381,21.271,1.83,28.59-.64,6.953-2.363,15.584-9.85,36.062-4.574,10.094,2.577,18.709,13.891,28.5,10.354Z" transform="translate(741.091 247.566)" fill="#ed9da0"/><path d="M1098.089,355.356l11.268,12.656v30.695s-9.545,96.841-40.042,107.545-84.688-6.206-84.688-6.206-14.013-37.16-7.456-39.4,57.943-15.828,57.943-15.828-.732-56.815,10.536-73.71c0,0-7.319-52.911,18.023-54.039S1098.089,355.356,1098.089,355.356Z" transform="translate(756.817 213.355)" fill="#dc5c35"/><path d="M960.79,337.55l17.627,72.429S992.323,409.9,960.79,337.55Z" transform="translate(749.137 224.117)" opacity="0.1"/><path d="M1005.862,329.61s-23.086,37.815-14.074,76.9l4.3.32S988.4,388.727,1005.862,329.61Z" transform="translate(764.31 219.95)" opacity="0.1"/><path d="M978.433,386.85s-5.627,39.4,4.574,55.168c0,0-20.616,8.447-49.557,6.755l-19.7-61.923Z" transform="translate(724.45 249.99)" fill="#dc5c35"/><path d="M559.363,249.976c-6.68.87-11.719-5.966-14.055-12.283s-4.116-13.673-9.924-17.086c-7.934-4.662-18.085.945-27.158-.593-10.254-1.738-16.91-12.6-17.434-22.974s3.609-20.362,7.661-29.933l1.415,11.9a23.586,23.586,0,0,1,10.305-20.616l-1.816,17.45a18.523,18.523,0,0,1,21.306-15.335l-.287,10.4c11.836-1.408,23.773-2.816,35.642-1.745s23.822,4.827,32.818,12.645c13.457,11.693,18.371,30.945,16.723,48.707s-8.972,34.424-16.615,50.538c-1.921,4.054-4.578,8.626-9.034,9.143-4,.463-7.667-2.882-8.912-6.72a24.338,24.338,0,0,1,.108-11.959c1.126-5.984,2.543-12.1,1.487-18.093s-5.372-11.92-11.415-12.655-12.228,6.174-9.322,11.523Z" transform="translate(1186.412 171.578)" fill="#090814"/></g></g></g></svg>
\ No newline at end of file
diff --git a/public/avatares/avatar_008.svg b/public/avatares/avatar_008.svg
new file mode 100644
index 0000000..90f3c4b
--- /dev/null
+++ b/public/avatares/avatar_008.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="640" height="640" viewBox="0 0 640 640" role="img" artist="Katerina Limpitsouni" source="https://undraw.co/"><defs><clipPath id="a-82"><circle cx="320" cy="320" r="320" transform="translate(10854 -10709)" fill="none" stroke="#707070" stroke-width="1"/></clipPath></defs><g transform="translate(-685 -115)"><circle cx="320" cy="320" r="320" transform="translate(685 115)" fill="#f2f2f2"/><g transform="translate(-10169 10824)" clip-path="url(#a-82)"><g transform="translate(9973 -10818)"><path d="M265.123,161.609c6.564-1.071,13.708,6.781,16.691,10.06,7.965,8.755,9.628,18.941,10.271,23.264,10.15,68.226,15.224,102.338-5.778,118.2-19.96,15.079-56.443,11.035-63.555-2.515-2.77-5.278-.454-10.8,3.21-21.378,6.771-19.548,10.763-39.922,16.691-59.731,13.537-45.232,12.4-66.262,22.469-67.9Z" transform="translate(974.366 154.5)" fill="#090814"/><path d="M88.8,416.253,57.519,475.3c-7.986,15.074-45.777,247.272-28.971,250.2l72.8,2.415,30.2,1.585,31.046.447,76.954,2.553L196.321,430.085,88.8,416.253Z" transform="translate(976 154.5)" fill="#2f2e41"/><path d="M165.826,243.032l62.246,2.515L233.1,266.3l14.99,12.229a19.968,19.968,0,0,1,7.1,18.609l-7,43.983s13.2,31.437-20.12,51.557l-33.324,54.072L79.059,434.8s-10.689-1.258-3.144-8.8,16.976-44.641,16.976-44.641-1.257-16.348,3.144-20.749,1.337-15.719,1.337-15.719l17.9-66.175a29.573,29.573,0,0,1,28.546-21.85h19.852l2.154-13.832Z" transform="translate(976 154.5)" fill="#dc5c35"/><path d="M644.667,666.158,101.049,520.871a28.742,28.742,0,0,1-6.282-53.033L315.691,348.022a28.866,28.866,0,0,1,18.378-3.094l365.157,60.2a28.743,28.743,0,0,1,23.469,34.192l-42.462,204.9a28.791,28.791,0,0,1-28.072,22.928A29.01,29.01,0,0,1,644.667,666.158Z" transform="translate(976 154.5)" fill="#fff"/><path d="M644.667,666.158,101.049,520.871a28.742,28.742,0,0,1-6.282-53.033L315.691,348.022a28.866,28.866,0,0,1,18.378-3.094l365.157,60.2a28.743,28.743,0,0,1,23.469,34.192l-42.462,204.9a28.791,28.791,0,0,1-28.072,22.928A29.01,29.01,0,0,1,644.667,666.158Zm54.07-258.071-365.157-60.2a25.857,25.857,0,0,0-16.459,2.771L96.2,470.475a25.742,25.742,0,0,0,5.625,47.5L645.442,663.26A25.744,25.744,0,0,0,677.3,643.613l42.462-204.9a25.742,25.742,0,0,0-21.02-30.622l.244-1.48Z" transform="translate(976 154.5)" fill="#090814"/><path d="M619.761,464.494l-48.48,122.332A23.871,23.871,0,0,1,541.323,600.6L184.988,478c-19.675-6.77-21.874-33.718-3.555-43.587l114.675-61.781a23.871,23.871,0,0,1,16.314-2.328l290.14,62.053a23.871,23.871,0,0,1,17.2,32.137Z" transform="translate(976 154.5)" fill="#f2f2f2"/><circle cx="51.557" cy="51.557" r="51.557" transform="translate(1147.171 314.852)" fill="#ed9da0"/><path d="M233.417,135.2c-14.516-2.366-22.311-3.637-30.18-1.886-15.763,3.507-24.907,17.6-31.437,27.665-15.617,24.07-8.556,34.186-23.892,67.9-11,24.188-16.548,23.189-17.6,35.839-2.219,26.554,20.369,53.116,44.641,63.5,1.621.694,26.845,11.249,33.952,2.515,5.21-6.4-3.994-17.423-15.09-47.156-19.511-52.281-10.292-69.754-7.545-74.192,1.735-2.8,6.685-9.774,9.431-8.8,2.484.879.334,7.259,2.515,12.575,5.844,14.243,41.363,17.406,69.162,6.288,8.2-3.279,13.228-5.291,16.976-10.689,12.716-18.315-2.465-56.7-26.407-67.9-5.447-2.549-11.805-3.586-24.521-5.659Z" transform="translate(976 154.5)" fill="#090814"/><path d="M196.554,442.382c12.539,6.36,19.422,17.986,15.373,25.965s-17.494,9.29-30.037,2.926a35.187,35.187,0,0,1-12.772-10.632l-52.79-27.619,13.489-24.5,50.609,29.829a35.19,35.19,0,0,1,16.128,4.028Z" transform="translate(976 154.5)" fill="#ed9da0"/><path d="M443.448,406.845c13.209,4.818,21.43,15.538,18.363,23.944s-16.26,11.313-29.473,6.491a35.188,35.188,0,0,1-13.95-9.031l-55.709-21.12L373.146,381.2l53.808,23.573A35.19,35.19,0,0,1,443.448,406.845Z" transform="translate(976 154.5)" fill="#ed9da0"/><path d="M136.589,269.754s-10.689-22.006-35.21-5.03-82.995,87.4-82.995,87.4-30.18,26.407-13.2,35.839,144.316,63,144.316,63l22.221-18.082-33.742-20.925-72.435-37.2L128.383,327.6l8.206-57.845Z" transform="translate(976 154.5)" fill="#dc5c35"/><path d="M243.477,282.958s7.481-10.689,20.717,0,51.33,72.235,51.33,72.235l93.944,38.425-13.832,28.294-112.546-40.24-49.042-66.647,9.431-32.066Z" transform="translate(976 154.5)" fill="#dc5c35"/><g transform="translate(-88.759 -20.435)"><ellipse cx="20.12" cy="10.06" rx="20.12" ry="10.06" transform="translate(1482.294 619.167)" fill="#dc5c35"/><ellipse cx="20.12" cy="10.06" rx="20.12" ry="10.06" transform="translate(1463.432 649.976)" fill="#3f3d56"/><ellipse cx="54.701" cy="27.351" rx="54.701" ry="27.351" transform="translate(1320.705 591.188)" fill="#dc5c35"/><path d="M402.787,492.835a1.369,1.369,0,0,0,.178-.011,1.5,1.5,0,0,0,1.313-1.666L400.9,462.6a1.5,1.5,0,0,0-1.669-1.312l-53.709,6.459a1.5,1.5,0,0,0,.358,2.979l52.217-6.279,3.205,27.062A1.5,1.5,0,0,0,402.787,492.835Z" transform="translate(976 154.5)" fill="#fff"/></g></g></g></g></svg>
\ No newline at end of file
diff --git a/public/avatares/avatar_009.svg b/public/avatares/avatar_009.svg
new file mode 100644
index 0000000..fbc3dee
--- /dev/null
+++ b/public/avatares/avatar_009.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="640" height="640" viewBox="0 0 640 640" role="img" artist="Katerina Limpitsouni" source="https://undraw.co/"><defs><clipPath id="a-76"><circle cx="320" cy="320" r="320" transform="translate(626 151)" fill="none" stroke="#707070" stroke-width="1"/></clipPath></defs><g transform="translate(-626 -151)"><circle cx="320" cy="320" r="320" transform="translate(626 151)" fill="#f2f2f2"/><g clip-path="url(#a-76)"><path d="M581.722,260.562S595.577,365,574.262,376.728s126.823,12.789,126.823,12.789-33.038-90.588-18.118-118.3Z" transform="translate(318.813 155.394)" fill="#ffb9b9"/><circle cx="73.536" cy="73.536" r="73.536" transform="translate(881.887 324.39)" fill="#ffb9b9"/><path d="M809.257,390.045l-12.32,56.1-26.05,118.69-.78,6.5-8.99,75.25-5.98,49.99-4.01,33.58c-24.38,12.53-42.05,21.18-42.05,21.18s-1.52-7.62-3.97-17.37c-17.11,5.13-48.77,13.64-75.6,15.34,9.77,10.89-141.12-266.12-146.91-303.16-4.66-29.81-8.16-55-8.9-60.36-.1-.7-.15-1.06-.15-1.06l112.43-49.68c7.99,18.53,45.3,24.1,45.3,24.1,30.91-2.13,55.14-18.43,55.14-18.43Z" transform="translate(318.813 155.394)" fill="#dc5c35"/><path d="M720.129,154.235l13.749-5.5s-28.749-31.651-68.747-28.9l11.25-12.385s-27.5-11.009-52.5,17.89c-13.141,15.191-28.346,33.048-37.825,53.163H571.33l6.146,13.532-21.509,13.532,22.077-2.431a75.616,75.616,0,0,0-.6,22.445,29.041,29.041,0,0,0,10.634,19h0s17.052-35.3,17.052-40.8v13.761S618.88,205.157,618.88,196.9l7.5,9.633,3.75-15.137,46.248,15.137-7.5-12.385,28.749,4.128-11.25-15.137s32.5,17.89,33.749,33.027,10.762,29.481,10.762,29.481S756.378,174.877,720.129,154.235Z" transform="translate(297.666 174.133)" fill="#090814"/><path d="M889.187,647.955c-7.49,8.12-26.05,20.35-48.55,33.59-8.37,4.92-17.28,9.99-26.37,15.03-21.69,12.03-44.4,23.95-63.14,33.58-24.38,12.53-42.05,21.18-42.05,21.18s-1.52-7.62-3.97-17.37c-3.28-13.05-8.22-29.92-13.37-37.39-.18-.26-.36-.5-.54-.74-1.5-1.97-3.01-3.12-4.5-3.12l74.42-46.13,32.16-19.94-23.17-55.31-29.06-69.38,17.54-55.81,17.63-56.1h33.04s10.94,23.88,24.93,57.18c2.09,4.98,4.25,10.17,6.45,15.53C869.417,532.755,905.3,630.5,889.187,647.955Z" transform="translate(318.813 155.394)" fill="#dc5c35"/><path d="M556.677,695.915a47.792,47.792,0,0,0-8.1.66c-22.99,3.95-29.77,24.76-31.7,38.7a71.847,71.847,0,0,0-.7,12.86l-20.31-15.62-7.4-5.69c-17.81-6.21-33.68-17.24-47.44-30.25a238.478,238.478,0,0,1-31.95-37.89,334.144,334.144,0,0,1-24.72-42.4,31.184,31.184,0,0,1-.43-26.45l25.15-56.05,36.76-81.92q.4-2.925.89-5.72c7.29-41.8,26.82-60.36,26.82-60.36h14.92l9.98,60.36,12.4,74.99-8.69,28.34-20.08,65.45,19.19,20.84Z" transform="translate(318.813 155.394)" fill="#dc5c35"/><path d="M828.381,510.145H661.938v-3.431H586.466v3.431H419.337A11.259,11.259,0,0,0,408.079,521.4V749.315a11.259,11.259,0,0,0,11.259,11.259H828.381a11.259,11.259,0,0,0,11.259-11.259V521.4a11.259,11.259,0,0,0-11.259-11.259Z" transform="translate(318.813 119.599)" fill="#090814"/><circle cx="25" cy="25" r="25" transform="translate(921.445 684.314)" fill="#f2f2f2"/></g></g></svg>
\ No newline at end of file
diff --git a/public/avatares/avatar_010.svg b/public/avatares/avatar_010.svg
new file mode 100644
index 0000000..55dda7a
--- /dev/null
+++ b/public/avatares/avatar_010.svg
@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="640" height="640" viewBox="0 0 640 640" role="img" artist="Katerina Limpitsouni" source="https://undraw.co/">
+  <defs>
+    <clipPath id="clip-path-107">
+      <circle id="Ellipse_889" data-name="Ellipse 889" cx="320" cy="320" r="320" transform="translate(-4451 -15900)" fill="none" stroke="#707070" stroke-width="1"/>
+    </clipPath>
+  </defs>
+  <g id="Group_306" data-name="Group 306" transform="translate(-640 -220)">
+    <path id="Path_5233-108" data-name="Path 5233" d="M320,0C496.731,0,640,143.269,640,320S496.731,640,320,640,0,496.731,0,320,143.269,0,320,0Z" transform="translate(640 220)" fill="#dc5c35"/>
+    <g id="Mask_Group_9" data-name="Mask Group 9" transform="translate(5091 16120)" clip-path="url(#clip-path-107)">
+      <g id="Group_302" data-name="Group 302" transform="translate(-4315.748 -15782.601)">
+        <ellipse id="Ellipse_851" data-name="Ellipse 851" cx="55.3" cy="55.3" rx="55.3" ry="55.3" transform="translate(148.307 30.406)" fill="#ffb9b9"/>
+        <path id="Path_4985-109" data-name="Path 4985" d="M970.3,323.643s-2.514,77.922-15.082,87.977,45.245,52.785,45.245,52.785l37.7-60.326v-55.3Z" transform="translate(-814.455 -225.374)" fill="#ffb9b9"/>
+        <path id="Path_4986-110" data-name="Path 4986" d="M855.123,269.622l-30.517-46.081L807.367,247,782.23,317.381l20.111,273.984,118.143,2.514,15.082-314.2-37.7-45.244Z" transform="translate(-674.142 -65.778)" fill="#f2f2f2"/>
+        <path id="Path_4987-111" data-name="Path 4987" d="M920.045,374.6l20.111-2.514s5.026,2.514,7.541,20.108,32.667,173.442,32.667,173.442L940.145,756.662,894.9,696.336,922.56,590.773,894.908,485.2Z" transform="translate(-610.868 -153.163)" fill="#090814"/>
+        <path id="Path_4988-112" data-name="Path 4988" d="M906.682,248.1H891.6L853.894,451.7l35.189,158.361,35.192-57.814-10.055-62.84,5.013-55.3,17.6-32.68Z" transform="translate(-853.894 -29.172)" fill="#090814"/>
+        <path id="Path_4991-113" data-name="Path 4991" d="M970.562,369.89l10.055-2.514s7.541-42.743,25.137-37.7,62.841,10.055,62.841-10.055-42.744-37.7-67.867-35.192-67.867,10.055-65.355,47.756,18.733,74.384,18.733,74.384l1.319-22.356Z" transform="translate(-799.632 -284.185)" fill="#090814"/>
+        <path id="Path_4994-114" data-name="Path 4994" d="M1212.25,404.431l-80.437-32.677-18.852-13.826L1056.4,608.034,1018.7,494.92l11.311-144.533L925.7,404.431l35.192,170.928,5.026,65.355L950.834,693.5s-52.786,37.7-35.19,77.922,37.7,42.743,37.7,42.743,85.463-80.436,90.5-100.544,12.567-55.3,12.567-55.3,42.743,160.873,93,158.358,50.274-55.3,50.274-55.3l-12.567-55.3-20.108-57.814,10.055-95.513Z" transform="translate(-885.472 -185.507)" fill="#090814"/>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/public/avatares/avatar_011.svg b/public/avatares/avatar_011.svg
new file mode 100644
index 0000000..62946d8
--- /dev/null
+++ b/public/avatares/avatar_011.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="640" height="640" viewBox="0 0 640 640" role="img" artist="Katerina Limpitsouni" source="https://undraw.co/"><defs><clipPath id="a-94"><circle cx="320" cy="320" r="320" transform="translate(1316 176)" fill="none" stroke="#707070" stroke-width="1"/></clipPath></defs><g transform="translate(-640 -220)"><circle cx="320" cy="320" r="320" transform="translate(640 220)" fill="#f2f2f2"/><g transform="translate(-676 44)" clip-path="url(#a-94)"><g transform="translate(627.8 -209.043)"><path d="M43.489,0s7.87,20.237,6.226,40.26a21.219,21.219,0,0,1-3.508,10.025h0l96.416,45.774s43.565,4.51,32.692,23.537-50.284-9.513-50.284-9.513S21.745,95.132,13.59,80.183,0,2.718,0,2.718Z" transform="translate(897.712 784.099) rotate(8)" fill="#ed9da0"/><path d="M847.9,199.179s8.054,40.27,8.054,46.31,34.229,24.162,34.229,24.162l38.256-48.323s-24.162-34.229-24.162-42.283Z" transform="translate(101.764 449.918)" fill="#ed9da0"/><circle cx="52.35" cy="52.35" r="52.35" transform="translate(915.432 558.492)" fill="#ed9da0"/><path d="M895.23,240.777s-17.549-4.671-22.869-12.4c0,0-55.657,54.686-55.657,64.753L861,371.652s0,28.189,4.027,30.2,0,0,0,8.054-12.081,60.4-8.054,68.458,8.054,2.013,4.027,14.094-14.094,76.512-14.094,76.512,36.242-12.081,88.593,8.054,114.768-8.054,114.768-8.054-16.108-36.242-12.081-48.323-10.067-34.229-10.067-34.229l-10.067-185.24s14.094-82.552,4.027-86.579l-20.135-8.054-64.479-7.925S921.405,238.763,895.23,240.777Z" transform="translate(84.633 460.671)" fill="#dc5c35"/><path d="M838.426,250.526,818.291,264.62s-10.067,30.2,0,44.3,41.686,30.2,41.686,30.2h12.678Z" transform="translate(83.047 489.178)" fill="#dc5c35"/><path d="M840.034,143.073l-9.081-3.635s18.987-20.9,45.4-19.086l-7.43-8.18s18.162-7.271,34.672,11.815c8.679,10.033,18.721,21.826,24.981,35.111h9.725l-4.059,8.937,14.206,8.937-14.581-1.605a49.453,49.453,0,0,1-1.379,23.146l.391,7.064s-16.9-26.15-16.9-29.785v9.089s-9.081-8.18-9.081-13.633l-4.953,6.362-2.477-10-30.544,10,4.953-8.18-18.987,2.727,7.43-10s-21.464,11.815-22.289,21.813-11.557,22.721-11.557,22.721l-4.953-9.089S816.094,156.705,840.034,143.073Z" transform="translate(87.78 412.443)" fill="#2f2e41"/><path d="M996.031,262.223s-11.66,29.982-9.224,59.647a31.438,31.438,0,0,0,5.2,14.852h0L849.159,404.538s-64.543,6.682-48.435,34.871,74.5-14.094,74.5-14.094,153.024-22.148,165.1-44.3,20.135-114.768,20.135-114.768Z" transform="translate(74.438 495.602)" fill="#ed9da0"/><path d="M934.773,208.937h30.2s22.148,4.027,28.189,44.3,12.081,50.337,6.04,50.337-78.525-2.014-78.525-4.027S934.773,208.937,934.773,208.937Z" transform="translate(141.738 466.336)" fill="#dc5c35"/></g></g></g></svg>
\ No newline at end of file
diff --git a/public/avatares/avatar_012.svg b/public/avatares/avatar_012.svg
new file mode 100644
index 0000000..54a4796
--- /dev/null
+++ b/public/avatares/avatar_012.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="640" height="640" viewBox="0 0 640 640" role="img" artist="Katerina Limpitsouni" source="https://undraw.co/"><defs><clipPath id="a-86"><circle cx="320" cy="320" r="320" transform="translate(390 119)" fill="none" stroke="#707070" stroke-width="1"/></clipPath></defs><g transform="translate(-747 -202)"><circle cx="320" cy="320" r="320" transform="translate(747 202)" fill="#f2f2f2"/><g transform="translate(357 83)" clip-path="url(#a-86)"><path d="M618.779,384.128l-28.972-36.216L568.077,273.67l83.3-88.728s18.108-68.81,1.811-65.188-19.919,54.323-19.919,54.323L528.24,255.562S539.1,369.641,569.888,409.479l23.54,74.242Z" transform="translate(51.789 138.409)" fill="#ed9da0"/><path d="M655.37,384.128l28.972-36.216,21.729-74.242-83.3-88.728s-18.108-68.81-1.811-65.188,19.919,54.323,19.919,54.323l105.025,81.485s-10.865,114.079-41.648,153.916l-23.54,74.242Z" transform="translate(94.87 138.409)" fill="#ed9da0"/><path d="M606.631,260.815s1.811,38.026-9.054,50.7-21.729,77.864,30.783,79.674,47.08-54.323,47.08-54.323l-10.865-30.783s-16.3-23.54-10.865-45.27Z" transform="translate(82.044 209.209)" fill="#ed9da0"/><path d="M648.645,323.648,620.39,289.5l-19.138,8.772-19.918,63.377s-16.3,30.783,3.622,63.377c0,0,3.622,21.729-1.811,27.162s-7.243,39.837-7.243,39.837l-23.54,45.27s134,23.54,173.834-9.054c0,0-20.9-77.069-8.229-100.61s14.486-59.628,0-75.925-29.8-58.867-29.8-58.867l-8.769-5.609Z" transform="translate(63.883 222.455)" fill="#dc5c35"/><ellipse cx="56.799" cy="56.799" rx="56.799" ry="56.799" transform="translate(656.797 371.123)" fill="#090814"/><ellipse cx="42.09" cy="42.089" rx="42.09" ry="42.089" transform="translate(667.604 404.685)" fill="#ed9da0"/><ellipse cx="15.829" cy="15.829" rx="15.829" ry="15.829" transform="translate(707.177 350)" fill="#090814"/><path d="M353.077,485.294S336.9,512.2,299.3,522.265s-.307,66.583-.307,66.583-13.563-20.55,6-42.313S356.037,509.893,353.077,485.294Z" transform="translate(365.168 -102.235)" fill="#090814"/></g></g></svg>
\ No newline at end of file
diff --git a/public/avatares/avatar_013.svg b/public/avatares/avatar_013.svg
new file mode 100644
index 0000000..70f6b7a
--- /dev/null
+++ b/public/avatares/avatar_013.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="640" height="640" viewBox="0 0 640 640" role="img" artist="Katerina Limpitsouni" source="https://undraw.co/"><defs><clipPath id="a-84"><circle cx="320" cy="320" r="320" transform="translate(1131 211)" fill="none" stroke="#707070" stroke-width="1"/></clipPath></defs><g transform="translate(-605 -80)"><circle cx="320" cy="320" r="320" transform="translate(605 80)" fill="#f2f2f2"/><g transform="translate(-526 -131)" clip-path="url(#a-84)"><path d="M308.917,275.306a56.766,56.766,0,1,0-76.214,50.68l7.587,72.956,58.052-43.966s-11.356-15.94-17.023-33.58A56.7,56.7,0,0,0,308.917,275.306Z" transform="translate(1202.512 213.572)" fill="#ed9da0"/><path d="M40.4,521.694l-16.694-55.37s-31.3,121.137-1.081,121.137,82.654-37.327,82.654-37.327L65.141,501.289Z" transform="translate(1245.398 155.822)" fill="#ed9da0"/><path d="M459.466,572.6l-.193,83.81-12.25,62.834-74.1-.177,30.356-141.756Z" transform="translate(1161.584 131.316)" fill="#ed9da0"/><path d="M205.109,374.625,178,391.067s-55.991,5.332-61.324,24.885S97.125,435.5,98.014,447.059L70.463,481.72s37.772,40.438,37.772,52.881,24.441-6.879,24.441-6.879V673.867H327.914l5.175-122.38s48.881-34.661,62.213-9.776l-14.22-59.546s.889-43.549-27.551-64.879l-67.545-32s-5.584-9.6-26.914-11.377l-14.857,36.262-32.884,21.33Z" transform="translate(1231.332 177.133)" fill="#dc5c35"/><path d="M72.54,351.749,65.678,488.9l-47.541,3.285L34.8,349.941c-6.576-7.017-10.511-17.481-9.959-29,.965-20.149,15.265-35.835,31.94-35.036s29.41,17.78,28.444,37.929C84.674,335.353,79.756,345.393,72.54,351.749Z" transform="translate(1243.398 197.434)" fill="#ed9da0"/><path d="M460.626,274.851l-10.355-4.145s18.826-15.054,48.948-12.981c0,0,46.455-2.167,53.593,12.981l19.868,22.418-4.628,10.191,16.2,10.19-16.626-1.83a56.391,56.391,0,0,1-1.573,26.392l.446,8.055s-19.272-29.818-19.272-33.963v10.363s-10.354-9.327-10.354-15.545l-5.648,7.254-2.824-11.4-34.828,11.4,5.648-9.327-21.65,3.109,8.472-11.4s-24.474,13.472-25.415,24.872-13.178,25.908-13.178,25.908L441.8,337.031S433.328,290.4,460.626,274.851Z" transform="translate(950.26 150.506)" fill="#090814"/></g></g></svg>
\ No newline at end of file
diff --git a/public/avatares/avatar_014.svg b/public/avatares/avatar_014.svg
new file mode 100644
index 0000000..2ae741e
--- /dev/null
+++ b/public/avatares/avatar_014.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="640" height="640" viewBox="0 0 640 640" role="img" artist="Katerina Limpitsouni" source="https://undraw.co/"><defs><clipPath id="a-96"><circle cx="320" cy="320" r="320" transform="translate(-6887 -15230)" fill="none" stroke="#707070" stroke-width="1"/></clipPath></defs><g transform="translate(-640 -220)"><circle cx="320" cy="320" r="320" transform="translate(640 220)" fill="#f2f2f2"/><g transform="translate(7527 15450)" clip-path="url(#a-96)"><g transform="translate(-7107 -15079)"><path d="M631.3,168a86.2,86.2,0,1,0-131.232,45.789L447.449,345.682l258.486-21.906s-130.944-70.3-132.623-98.389A86.112,86.112,0,0,0,631.3,168Z" fill="#a0616a"/><path d="M693.129,291.664l20.021-9.249s22.872,2.916,29.694,28.721,37.97,164.049,37.97,164.049,18.247,18.007,7.789,42.838c0,0,3.643,27.5-7.789,31.643s-88.021,63.265-88.021,63.265l.337-321.266Z" fill="#dc5c35"/><path d="M632.829,255.642,574.5,225.2c-11.934,59.384-66.926,61.574-78.86,2.191l-38.058,28.251-80.321,26.773,11.683,311.424,163.034-.47.012.47H701.467L713.15,282.415l-80.321-26.773Z" fill="#dc5c35"/><path d="M397.284,291.664l-20.021-9.249s-22.872,2.916-29.694,28.721,5.841,175,5.841,175-18.247,18.007-7.789,42.838c0,0-3.643,27.5,7.789,31.643s43.873,5.974,43.873,5.974V291.664Z" fill="#dc5c35"/><path d="M476.326,101.572l-5.943,60.63S408.019,41.194,485.575,18.818c0,0-7.553-10.227,3.408-13.63S603.857-14.532,612.14,36.342c0,0,54.285,33.645,37.856,69.642L630.639,148.3l-17.524.974s-.494-80.569-27.26-77.887S476.326,101.572,476.326,101.572Z" fill="#090814"/></g></g></g></svg>
\ No newline at end of file
diff --git a/public/avatares/avatar_015.svg b/public/avatares/avatar_015.svg
new file mode 100644
index 0000000..0a4170e
--- /dev/null
+++ b/public/avatares/avatar_015.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="640" height="640" viewBox="0 0 640 640" role="img" artist="Katerina Limpitsouni" source="https://undraw.co/"><defs><clipPath id="a-80"><circle cx="320" cy="320" r="320" transform="translate(-7232 -24270)" fill="none" stroke="#707070" stroke-width="1"/></clipPath></defs><g transform="translate(-1095 -191)"><circle cx="320" cy="320" r="320" transform="translate(1095 191)" fill="#f2f2f2"/><g transform="translate(8327 24461)" clip-path="url(#a-80)"><g transform="translate(-95.409 -137.385)"><path d="M775.914,423.3c-1.908,2.939-1.908,6.6-1.908,10.057,0,16.889.172,33.873,2.672,50.589.592,4.007,1.336,8.015,1.718,12.061a139.136,139.136,0,0,1,.267,16.927l-1.908,73.47c-.229,8.988-.687,18.644-6.24,25.7a12.289,12.289,0,0,0-2.233,8.149c1.45,18.434,4.5,36.716,7.538,54.94a33.949,33.949,0,0,1,30.8,1.47,339.026,339.026,0,0,0,15.82-93.508c.439-15.629-.229-31.354,2.175-46.792,4.027-25.991,2.385-52.65-.572-78.794-.935-8.282-2.92-16.812-8.225-23.224a35.209,35.209,0,0,0-19.083-10.992C789.672,421.506,783.356,423.414,775.914,423.3Z" transform="translate(-7692.689 -24142.713)" fill="#dc5c35"/><path d="M808.067,364.594l5.839,22.709a60.684,60.684,0,0,1,2.614,16.049,11.852,11.852,0,0,1-1.279,5.725,13.642,13.642,0,0,1-3.626,3.7c-3.989,3.034-6.755,10.114-11.316,12.213,2.347,4.084,5.591,1.431,9.828,3.473,7.461,3.626,14.293,8.836,22.385,10.629,7.633,1.679,15.648.1,23.224-1.908,10.744-2.92,21.43-6.946,30.075-13.988s13.568-13.263,13.53-24.388c-9.542,1.126-18.034-8.511-22.251-17.175a46.662,46.662,0,0,1-3.206-10.286l-5.114-22.5c-5.572,1.221-10.114,5.21-15.438,7.29s-11.622,2.271-17.537,2.538a188.918,188.918,0,0,0-31.22,4.046c-1.412.286-3.187,1.183-2.843,2.557" transform="translate(-7663.566 -24209.65)" fill="#ed9da0"/><path d="M808.067,364.594l5.839,22.709a60.684,60.684,0,0,1,2.614,16.049,11.852,11.852,0,0,1-1.279,5.725,13.642,13.642,0,0,1-3.626,3.7c-3.989,3.034-6.755,10.114-11.316,12.213,2.347,4.084,5.591,1.431,9.828,3.473,7.461,3.626,14.293,8.836,22.385,10.629,7.633,1.679,15.648.1,23.224-1.908,10.744-2.92,21.43-6.946,30.075-13.988s13.568-13.263,13.53-24.388c-9.542,1.126-18.034-8.511-22.251-17.175a46.662,46.662,0,0,1-3.206-10.286l-5.114-22.5c-5.572,1.221-10.114,5.21-15.438,7.29s-11.622,2.271-17.537,2.538a188.918,188.918,0,0,0-31.22,4.046c-1.412.286-3.187,1.183-2.843,2.557" transform="translate(-7663.566 -24209.65)" opacity="0.1"/><circle cx="50.532" cy="50.532" r="50.532" transform="translate(-6880.957 -23933.605)" fill="#ed9da0"/><path d="M852.731,397.906a45.8,45.8,0,0,1,11.45-15.266c7.118-6.24,16.85-11.3,18.53-20.61l15.419,17.957a8.3,8.3,0,0,1,1.908,2.939,7.4,7.4,0,0,1-1.45,5.935c-3.817,6.088-9.828,10.438-15.515,14.847a471.229,471.229,0,0,0-37.384,32.976,3.817,3.817,0,0,1-2,1.221,3.607,3.607,0,0,1-2.08-.592,86.808,86.808,0,0,1-26.659-21.679c-.553-.668-1.24-1.431-2.137-1.374a2.749,2.749,0,0,0-1.431.744c-5.133,4.2-10.744,9.217-17.327,8.568,8.53-6.126,13.358-16.354,15.152-26.716a50.486,50.486,0,0,1,2.175-10.438,10.9,10.9,0,0,1,7.443-7.061c-4.16,6.355-1.317,15.362,4.275,20.5a42.134,42.134,0,0,0,18.93,9.179C848.513,410.253,850.422,402.906,852.731,397.906Z" transform="translate(-7669.243 -24197.68)" fill="#323444"/><path d="M801.657,554.85c7.194,1.775,14.007,4.79,20.991,7.023a100.319,100.319,0,0,0,39.407,4.141c4.088-.09,8.292,2.29,11.68,0,.9-.725,6.762.668,7.716,0,1.6-.958,28.295.446,30.1,0,10.5-3.286,13.015-8.207,39.2-11.164,16.985-1.918,30.031-8.923,35.718-13.549.458-.382.973-.859.935-1.469a1.909,1.909,0,0,0-.573-1.088L920.564,518c-19.618,3.339-39.712,2.08-59.616,1.584a86.573,86.573,0,0,0-12.251.324c-3.931.458-7.805,1.45-11.679,2.29-14.713,3.206-29.751,4.427-44.655,6.526a6.89,6.89,0,0,0-2.958.916,6.658,6.658,0,0,0-1.584,1.755l-5.229,7.347a23.11,23.11,0,0,0-4.389,8.415c-1.221,5.725,1.336,7.633,6.2,6.889A45.3,45.3,0,0,1,801.657,554.85Z" transform="translate(-7683.911 -24056.01)" fill="#323444"/><path d="M866.59,419.317a92.942,92.942,0,0,0-19.674-15.362,27.883,27.883,0,0,0-9.542-3.817,11.908,11.908,0,0,0-9.771,2.4c-1.7,1.508-2.767,3.607-4.408,5.191a21.923,21.923,0,0,1-6.984,3.95,123.884,123.884,0,0,0-24.541,13.988,56.3,56.3,0,0,0-11.126,10.267c-8.645,11.068-9.942,26.125-9.713,40.17.172,9.771,9.542,17.022,15.992,24.331a179.26,179.26,0,0,1,16.373,22.9c3.473,5.5,7.1,11.45,6.66,18-.363,5.362-3.492,10.4-3,15.744.172,1.908.782,3.664.954,5.515.344,3.817-1.164,7.633-1.546,11.45-.515,5.4,1.24,10.763,1.336,16.2a51.524,51.524,0,0,1-1.412,11.049c-3.664,17.442-8.263,34.979-7.328,52.784l-10.572,1.908a8.931,8.931,0,0,1-2.042,14.255c16.507,5.515,34.35,2.729,51.849,2.71,14.484,0,28.911,1.908,43.376,1.641s29.388-2.882,41.315-11.068c3.244-2.214,6.221-4.809,9.637-6.736a47.533,47.533,0,0,1,14.6-4.771,144.855,144.855,0,0,1,28.625-2.557c4.695,0,9.809.191,13.549-2.634,4.122-3.13,5.172-8.8,5.725-13.931.553-5.42.9-10.858.992-16.3a70.278,70.278,0,0,0-.668-12.671,83.01,83.01,0,0,0-2.232-9.084L985.822,569.5c-2.977-10.458,1.164-21.927,2.042-32.766.21-2.557.248-5.534-1.718-7.175-.706-.592-1.679-.992-1.908-1.908a3.263,3.263,0,0,1,.458-2.557c3.817-7.633,9.542-14.37,14.77-21.259a434.512,434.512,0,0,0,24.426-37.537,120.778,120.778,0,0,0-32.327-72.287,34.978,34.978,0,0,0-13.53-9.98,40.073,40.073,0,0,0-10.763-1.737c-14.961-1.011-30.533-1.908-43.567-9.427a8.284,8.284,0,0,0-3.111-1.317c-2.882-.325-4.981,2.519-6.851,4.771-4.809,5.725-11.889,9.007-18.11,13.225C884.033,397.429,874.968,408.268,866.59,419.317Z" transform="translate(-7690.355 -24189.055)" fill="#dc5c35"/><path d="M939.534,435.635c2.977,9.427,2.691,19.5,3.664,29.331a114.132,114.132,0,0,0,3.111,17.576,28.045,28.045,0,0,0,3.626,8.95c1.717,2.519,4.179,4.561,5.267,7.4a17.881,17.881,0,0,1,.782,5.954l.229,13.167a47.351,47.351,0,0,1-3.111,20.5l-8.225,25.018c-4.446,13.549-9.007,27.308-17.022,39.1a11.278,11.278,0,0,1-4.9,4.6,23.835,23.835,0,0,1-4.943.763,12.709,12.709,0,0,0-10.477,12.347,28.991,28.991,0,0,0-7.042-7.194l-16.736-13.358c-5.725-4.656-11.7-9.389-18.644-12.08a50.551,50.551,0,0,0,35.151-42.479,19.084,19.084,0,0,1,1.908-8.358c1.393-2.252,3.969-3.969,4.16-6.622.229-3.34-3.549-5.859-3.549-9.2,0-2.214,1.641-4.046,2.366-6.126a15.382,15.382,0,0,0,0-7.843l-2.309-12.824a9.792,9.792,0,0,0-1.145-3.664,23.693,23.693,0,0,0-2.862-3.015c-3.969-4.446-2.214-11.45,0-16.927a161.788,161.788,0,0,1,19.5-34.216A117,117,0,0,0,926.1,425.33c2.023-3.511,2.481-8.378,4.618-11.45C933.466,421.093,937.187,428.211,939.534,435.635Z" transform="translate(-7604.698 -24150.584)" fill="#dc5c35"/><path d="M869.95,506.212a9.2,9.2,0,0,0-2.176,2.29,19.294,19.294,0,0,1-8.645,6.164c1.908,1.374,3.645,2.729,5.439,4.122a238.321,238.321,0,0,1,36.258,34.674c1.2-4.294,8.4-3.988,10.152-8.091a7.924,7.924,0,0,0,.382-3.664,111.764,111.764,0,0,0-2.748-19.083,21.6,21.6,0,0,0-3.817-8.931c-2.672-3.225-6.832-4.771-10.8-6.107C887.984,505.487,876.057,502.529,869.95,506.212Z" transform="translate(-7610.13 -24068.305)" fill="#323444"/><path d="M866.987,516.145c-5.725,4.236-10.744,9.542-17.175,12.442-4.542,2.061-9.713,2.958-13.682,6.03,2.156,4.752,7.767,7.214,12.976,7.023a30.84,30.84,0,0,0,14.522-5.324c3.416-2.1,7.423-4.542,11.145-3.072.573,2.9-1.908,5.63-1.908,8.568s2.443,5.076,4.847,6.622c11.45,7.385,26.182,6.774,39.826,5.916a3.588,3.588,0,0,0,2.195-.649,3.455,3.455,0,0,0,.82-2.519c.172-3.015.248-6.011.267-9.026a12.939,12.939,0,0,0-5.534-12.748,155.762,155.762,0,0,0-23.854-16.888C883.036,507.653,874.525,510.535,866.987,516.145Z" transform="translate(-7631.021 -24063.238)" fill="#ed9da0"/><path d="M833.406,326.172c-8.473,1.011-14.637,7.633-13.778,14.828s8.416,12.156,16.889,11.125,14.637-7.633,13.778-14.809S841.879,325.161,833.406,326.172Zm2.882,23.968c-7.175.859-13.568-3.359-14.312-9.427s4.5-11.679,11.66-12.538,13.568,3.359,14.312,9.427S843.444,349.282,836.288,350.14Z" transform="translate(-7646.083 -24230.369)" fill="#3c354c"/><path d="M811.766,328.772c-8.473,1.011-14.637,7.633-13.778,14.809s8.416,12.156,16.889,11.145,14.637-7.633,13.778-14.828S820.239,327.761,811.766,328.772Zm2.882,23.949c-7.175.859-13.568-3.359-14.293-9.408s4.484-11.679,11.66-12.557,13.568,3.359,14.293,9.427-4.5,11.679-11.66,12.538Z" transform="translate(-7665.739 -24228.008)" fill="#3c354c"/><path d="M663.643,259.64l18.415,3.931-1.813,4.847-17.366-5.1Z" transform="translate(-7548.283 -24155.191)" fill="#3c354c"/><path d="M725.154,253.18l-16.984,8.187,2.92,4.275,15.667-9.065Z" transform="translate(-7507.146 -24161.059)" fill="#3c354c"/><path d="M687.31,261.8l12.919-1.546-.668,3.206-11.087.744Z" transform="translate(-7526.093 -24154.639)" fill="#3c354c"/><path d="M814.932,360.826a20.494,20.494,0,0,0,1.908-8.339,17.83,17.83,0,0,1,.878-5.076,14.2,14.2,0,0,1,4.16-5.324c5.954-5.038,14.484-7.633,22.9-8a52.938,52.938,0,0,1,26.487,5.725,20.609,20.609,0,0,1,6.584,4.885c2.672,3.263,3.244,7.481,5.935,10.706a15.591,15.591,0,0,0,14.618,4.58c.935-3.32-.286-6.832.191-10.229a49.483,49.483,0,0,1,3.034-8.473c2.958-8.721-1.355-18.835-10.248-24.045-3.111-1.908-6.794-3.149-9.122-5.725s-2.882-5.248-4.484-7.824c-4.255-6.813-15.266-10-23.644-6.851-2.634.992-4.962,2.5-7.633,3.569-4.962,2.042-10.61,2.4-16.068,3.091a49.214,49.214,0,0,0-15.572,4.084c-4.714,2.328-8.664,6.068-9.751,10.534-.515,2.061-.4,4.2-.916,6.24-2.634,10.362-19.637,15.4-20.591,25.972-.344,3.817,1.736,7.481,4.332,10.591,1.794,2.118,6.088,7.786,9.122,8.607s5.343-2.061,8.244-3.053C809.875,365.043,812.642,364.738,814.932,360.826Z" transform="translate(-7678.771 -24258)" fill="#d6d6e3"/></g></g></g></svg>
\ No newline at end of file
diff --git a/public/bandeiras/amex.svg b/public/bandeiras/amex.svg
new file mode 100644
index 0000000..5d5d32b
--- /dev/null
+++ b/public/bandeiras/amex.svg
@@ -0,0 +1 @@
+<svg width="780" height="500" enable-background="new 0 0 780 500" version="1.1" viewBox="0 0 780 500" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><rect width="780" height="500" fill="#2557D6"/><path d="m0.253 235.69h37.441l8.442-19.51h18.9l8.42 19.51h73.668v-14.915l6.576 14.98h38.243l6.576-15.202v15.138h183.08l-0.085-32.026h3.542c2.479 0.083 3.204 0.302 3.204 4.226v27.8h94.689v-7.455c7.639 3.92 19.518 7.455 35.148 7.455h39.836l8.525-19.51h18.9l8.337 19.51h76.765v-18.532l11.626 18.532h61.515v-122.51h-60.88v14.468l-8.522-14.468h-62.471v14.468l-7.828-14.468h-84.38c-14.123 0-26.539 1.889-36.569 7.153v-7.153h-58.229v7.153c-6.383-5.426-15.079-7.153-24.75-7.153h-212.74l-14.274 31.641-14.659-31.641h-67.005v14.468l-7.362-14.468h-57.145l-26.539 58.246v64.261h3e-3zm236.34-17.67h-22.464l-0.083-68.794-31.775 68.793h-19.24l-31.858-68.854v68.854h-44.57l-8.42-19.592h-45.627l-8.505 19.592h-23.801l39.241-87.837h32.559l37.269 83.164v-83.164h35.766l28.678 59.587 26.344-59.587h36.485l1e-3 87.838zm-165.9-37.823l-14.998-35.017-14.915 35.017h29.913zm255.3 37.821h-73.203v-87.837h73.203v18.291h-51.289v15.833h50.06v18.005h-50.061v17.542h51.289l1e-3 18.166zm103.16-64.18c0 14.004-9.755 21.24-15.439 23.412 4.794 1.748 8.891 4.838 10.84 7.397 3.094 4.369 3.628 8.271 3.628 16.116v17.255h-22.104l-0.083-11.077c0-5.285 0.528-12.886-3.458-17.112-3.202-3.09-8.083-3.76-15.973-3.76h-23.523v31.95h-21.914v-87.838h50.401c11.199 0 19.451 0.283 26.535 4.207 6.933 3.924 11.09 9.652 11.09 19.45zm-27.699 13.042c-3.013 1.752-6.573 1.81-10.841 1.81h-26.62v-19.51h26.982c3.818 0 7.804 0.164 10.393 1.584 2.842 1.28 4.601 4.003 4.601 7.765 0 3.84-1.674 6.929-4.515 8.351zm62.844 51.138h-22.358v-87.837h22.358v87.837zm259.56 0h-31.053l-41.535-65.927v65.927h-44.628l-8.527-19.592h-45.521l-8.271 19.592h-25.648c-10.649 0-24.138-2.257-31.773-9.715-7.701-7.458-11.708-17.56-11.708-33.533 0-13.027 2.395-24.936 11.812-34.347 7.085-7.01 18.18-10.242 33.28-10.242h21.215v18.821h-20.771c-7.997 0-12.514 1.14-16.862 5.203-3.735 3.699-6.298 10.69-6.298 19.897 0 9.41 1.951 16.196 6.023 20.628 3.373 3.476 9.506 4.53 15.272 4.53h9.842l30.884-69.076h32.835l37.102 83.081v-83.08h33.366l38.519 61.174v-61.174h22.445v87.833zm-133.2-37.82l-15.165-35.017-15.081 35.017h30.246zm189.04 178.08c-5.322 7.457-15.694 11.238-29.736 11.238h-42.319v-18.84h42.147c4.181 0 7.106-0.527 8.868-2.175 1.665-1.474 2.605-3.554 2.591-5.729 0-2.561-1.064-4.593-2.677-5.811-1.59-1.342-3.904-1.95-7.722-1.95-20.574-0.67-46.244 0.608-46.244-27.194 0-12.742 8.443-26.156 31.439-26.156h43.649v-17.479h-40.557c-12.237 0-21.129 2.81-27.425 7.174v-7.175h-59.985c-9.595 0-20.854 2.279-26.179 7.175v-7.175h-107.12v7.175c-8.524-5.892-22.908-7.175-29.549-7.175h-70.656v7.175c-6.745-6.258-21.742-7.175-30.886-7.175h-79.077l-18.094 18.764-16.949-18.764h-118.13v122.59h115.9l18.646-19.062 17.565 19.062 71.442 0.061v-28.838h7.021c9.479 0.14 20.66-0.228 30.523-4.312v33.085h58.928v-31.952h2.842c3.628 0 3.985 0.144 3.985 3.615v28.333h179.01c11.364 0 23.244-2.786 29.824-7.845v7.845h56.78c11.815 0 23.354-1.587 32.134-5.649l2e-3 -22.84zm-354.94-47.155c0 24.406-19.005 29.445-38.159 29.445h-27.343v29.469h-42.591l-26.984-29.086-28.042 29.086h-86.802v-87.859h88.135l26.961 28.799 27.875-28.799h70.021c17.389 0 36.929 4.613 36.929 28.945zm-174.22 40.434h-53.878v-17.48h48.11v-17.926h-48.11v-15.974h54.939l23.969 25.604-25.03 25.776zm86.81 10.06l-33.644-35.789 33.644-34.65v70.439zm49.757-39.066h-28.318v-22.374h28.572c7.912 0 13.404 3.09 13.404 10.772 0 7.599-5.238 11.602-13.658 11.602zm148.36-40.373h73.138v18.17h-51.315v15.973h50.062v17.926h-50.062v17.48l51.314 0.08v18.23h-73.139l2e-3 -87.859zm-28.119 47.029c4.878 1.725 8.865 4.816 10.734 7.375 3.095 4.291 3.542 8.294 3.631 16.037v17.418h-22.002v-10.992c0-5.286 0.531-13.112-3.542-17.198-3.201-3.147-8.083-3.899-16.076-3.899h-23.42v32.09h-22.02v-87.859h50.594c11.093 0 19.173 0.47 26.366 4.146 6.915 4.004 11.266 9.487 11.266 19.511-1e-3 14.022-9.764 21.178-15.531 23.371zm-12.385-11.107c-2.932 1.667-6.556 1.811-10.818 1.811h-26.622v-19.732h26.982c3.902 0 7.807 0.08 10.458 1.587 2.84 1.423 4.538 4.146 4.538 7.903 0 3.758-1.699 6.786-4.538 8.431zm197.82 5.597c4.27 4.229 6.554 9.571 6.554 18.613 0 18.9-12.322 27.723-34.425 27.723h-42.68v-18.84h42.51c4.157 0 7.104-0.525 8.95-2.175 1.508-1.358 2.589-3.333 2.589-5.729 0-2.561-1.17-4.592-2.675-5.811-1.675-1.34-3.986-1.949-7.803-1.949-20.493-0.67-46.157 0.609-46.157-27.192 0-12.744 8.355-26.158 31.33-26.158h43.932v18.7h-40.198c-3.984 0-6.575 0.145-8.779 1.587-2.4 1.422-3.29 3.534-3.29 6.319 0 3.314 2.037 5.57 4.795 6.546 2.311 0.77 4.795 0.995 8.526 0.995l11.797 0.306c11.895 0.276 20.061 2.248 25.024 7.065zm86.955-23.52h-39.938c-3.986 0-6.638 0.144-8.867 1.587-2.312 1.423-3.202 3.534-3.202 6.322 0 3.314 1.951 5.568 4.791 6.544 2.312 0.771 4.795 0.996 8.444 0.996l11.878 0.304c11.983 0.284 19.982 2.258 24.86 7.072 0.891 0.67 1.422 1.422 2.033 2.175v-25h1e-3z" fill="#fff"/></svg>
diff --git a/public/bandeiras/elo.svg b/public/bandeiras/elo.svg
new file mode 100644
index 0000000..7db4320
--- /dev/null
+++ b/public/bandeiras/elo.svg
@@ -0,0 +1 @@
+<svg width="780" height="500" enable-background="new 0 0 780 500" version="1.1" viewBox="0 0 780 500" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><rect width="780" height="500" fill="#000"/><path d="m167.25 181.4c6.8-2.3 14.1-3.5 21.7-3.5 33.2 0 60.9 23.601 67.2 54.9l47-9.6c-10.8-53.2-57.8-93.301-114.2-93.301-12.9 0-25.3 2.101-36.9 6l15.2 45.501z" fill="#FFF100"/><path d="m111.75 333.8l31.8-36c-14.2-12.6-23.1-30.9-23.1-51.4 0-20.399 8.9-38.8 23.1-51.3l-31.8-35.899c-24.1 21.399-39.3 52.5-39.3 87.3 0 34.699 15.2 65.898 39.3 87.299z" fill="#00A3DF"/><path d="m256.15 260.2c-6.4 31.3-34 54.8-67.2 54.8-7.6 0-14.9-1.2-21.8-3.5l-15.2 45.5c11.6 3.899 24.1 6 37 6 56.4 0 103.4-40 114.2-93.2l-47-9.6z" fill="#EE4023"/><path d="m459.75 292.4c-7.8 7.601-18.3 12.2-29.9 12-8-0.1-15.399-2.5-21.6-6.5l-15.601 24.801c10.7 6.699 23.2 10.699 36.801 10.899 19.699 0.3 37.699-7.5 50.8-20.2l-20.5-21zm-28.2-101.1c-39.2-0.6-71.6 30.8-72.2 70-0.2 14.7 4 28.5 11.5 39.9l128.8-55.101c-7.2-30.899-34.8-54.2-68.1-54.799m-42.7 75.599c-0.2-1.6-0.3-3.3-0.3-5 0.4-23.1 19.4-41.6 42.5-41.199 12.6 0.199 23.8 5.899 31.3 14.899l-73.5 31.3zm151.3-107.6v137.3l23.801 9.9-11.301 27.1-23.6-9.8c-5.3-2.3-8.9-5.8-11.6-9.8-2.601-4-4.601-9.601-4.601-17v-137.7h27.301zm85.901 63.5c4.2-1.4 8.6-2.1 13.3-2.1 20.3 0 37.101 14.399 41 33.5l28.7-5.9c-6.6-32.5-35.3-56.9-69.7-56.9-7.899 0-15.5 1.301-22.5 3.601l9.2 27.799zm-33.901 92.9l19.4-21.9c-8.7-7.7-14.1-18.9-14.1-31.4s5.5-23.699 14.1-31.3l-19.4-21.899c-14.699 13-24 32.1-24 53.3s9.301 40.199 24 53.199zm88.201-44.801c-3.899 19.101-20.8 33.5-41 33.5-4.6 0-9.1-0.8-13.3-2.199l-9.3 27.8c7.1 2.399 14.7 3.7 22.6 3.7 34.4 0 63.101-24.4 69.7-56.9l-28.7-5.901z" fill="#fff"/></svg>
diff --git a/public/bandeiras/hipercard.svg b/public/bandeiras/hipercard.svg
new file mode 100644
index 0000000..ce267a0
--- /dev/null
+++ b/public/bandeiras/hipercard.svg
@@ -0,0 +1 @@
+<svg width="780" height="500" enable-background="new 0 0 780 501" version="1.1" viewBox="0 0 780 501" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><rect width="780" height="500" fill="#fff"/><path d="m333.56 399.69l-286.53 0.104v-0.69c0-0.379 0.457-2.838 1.015-5.465 0.559-2.626 1.427-6.804 1.931-9.283 0.502-2.479 1.362-6.692 1.909-9.364 1.346-6.527 2.676-13.058 3.989-19.592 0.517-2.576 1.378-6.79 1.916-9.363 0.686-3.293 1.364-6.588 2.037-9.884 0.582-2.86 1.467-7.231 1.967-9.711s1.294-6.303 1.765-8.495c0.47-2.193 1.071-5.158 1.333-6.59 0.263-1.43 1.114-5.645 1.891-9.363 0.654-3.117 1.29-6.238 1.905-9.363 0.271-1.43 1.132-5.645 1.914-9.363 0.781-3.718 1.639-7.932 1.907-9.363 0.268-1.43 1.131-5.644 1.917-9.363 0.788-3.72 1.638-7.854 1.888-9.189 0.252-1.335 0.94-4.768 1.53-7.629 0.589-2.861 1.705-8.245 2.479-11.964 0.775-3.72 2.099-10.196 2.942-14.394 0.845-4.195 1.854-9.188 2.243-11.096 1.143-5.608 2.296-11.215 3.461-16.818 0.574-2.768 1.507-7.293 2.074-10.059 0.568-2.766 1.442-7.057 1.943-9.536s1.356-6.614 1.9-9.19c0.544-2.574 1.48-7.101 2.08-10.057 0.6-2.957 1.605-7.482 2.233-10.057s1.516-5.696 1.974-6.935c0.457-1.241 1.72-3.927 2.806-5.973l1.975-3.717 1.795-2.352c0.986-1.292 2.749-3.335 3.916-4.539s3.135-3.016 4.376-4.026c1.239-1.011 3.034-2.375 3.987-3.031 0.954-0.656 2.827-1.805 4.162-2.553s3.209-1.727 4.162-2.176c0.954-0.449 2.905-1.27 4.335-1.823 1.43-0.552 4.161-1.479 6.068-2.058 1.907-0.58 5.488-1.454 7.957-1.941 2.469-0.488 6.369-1.14 8.67-1.449l4.181-0.562 286.71-0.108 286.71-0.111v0.69c0 0.379-0.46 2.838-1.021 5.464-0.709 3.323-1.405 6.648-2.088 9.977-0.588 2.861-1.441 6.997-1.901 9.19-0.65 3.12-1.295 6.241-1.933 9.363-0.604 2.957-1.532 7.483-2.063 10.057-0.531 2.575-1.392 6.789-1.912 9.363-0.52 2.576-1.386 6.789-1.923 9.363-0.626 3.004-1.244 6.01-1.854 9.018-0.481 2.384-1.353 6.675-1.936 9.536-0.584 2.86-1.521 7.387-2.083 10.057s-1.418 6.806-1.902 9.19c-0.485 2.384-1.356 6.675-1.938 9.535-0.582 2.861-1.517 7.388-2.079 10.059-0.562 2.67-1.398 6.727-1.861 9.016-1.283 6.359-2.575 12.718-3.874 19.074-0.47 2.288-1.307 6.346-1.86 9.016-0.709 3.408-1.411 6.818-2.108 10.23-0.605 2.957-1.471 7.169-1.923 9.364-0.454 2.192-1.301 6.327-1.885 9.188-0.684 3.354-1.371 6.705-2.063 10.057-0.551 2.671-1.415 6.885-1.921 9.365-0.504 2.479-1.383 6.771-1.95 9.535-0.568 2.766-1.497 7.291-2.062 10.057-0.566 2.766-1.414 6.902-1.885 9.191-0.642 3.119-1.278 6.24-1.912 9.362-0.683 3.343-1.383 6.683-2.102 10.019l-1.044 4.817-1.244 3.332c-0.684 1.833-1.713 4.269-2.287 5.414-0.571 1.144-1.738 3.163-2.592 4.487-0.854 1.322-2.044 3.018-2.644 3.767-0.601 0.749-2.407 2.683-4.018 4.299l-2.923 2.935-2.814 2c-1.548 1.101-3.217 2.22-3.705 2.486-0.49 0.268-2.355 1.221-4.146 2.115-1.789 0.896-4.317 2.037-5.617 2.534-1.3 0.499-3.875 1.346-5.722 1.883-1.847 0.539-3.827 1.069-4.398 1.179-0.573 0.109-2.559 0.52-4.414 0.914-1.855 0.393-5.601 0.979-8.322 1.303l-4.95 0.59-286.53 0.1zm-101.94-74.115h7.456l0.21-0.549c0.117-0.302 0.211-1.011 0.211-1.576s0.246-2.619 0.547-4.565c0.3-1.948 1.004-6.427 1.566-9.955 0.561-3.529 1.401-8.835 1.867-11.791 0.443-2.8 0.864-5.604 1.265-8.41 0.229-1.669 0.508-3.034 0.621-3.034 0.112 0 0.594 0.737 1.071 1.639l0.866 1.639 1.922 1.938 1.923 1.937 2.366 0.948 2.367 0.947 2.82 0.365 2.821 0.365 3.579-0.219 3.58-0.221 3.876-1.002 3.877-1.005 2.08-0.948c1.145-0.522 3.173-1.662 4.508-2.531l2.428-1.581 2.263-2.263c1.245-1.242 3.001-3.238 3.901-4.434 0.902-1.193 1.639-2.258 1.639-2.364s0.443-0.846 0.984-1.644c0.541-0.797 1.647-3.012 2.459-4.918 0.813-1.907 2.081-5.34 2.821-7.629l1.344-4.162 0.695-3.604c0.382-1.982 0.874-5.26 1.093-7.283l0.397-3.678-0.23-3.121-0.229-3.121-0.725-3.121-0.723-3.121-1.172-2.336-1.171-2.338-2.263-2.398-2.262-2.398-2.677-1.384-2.677-1.383-2.948-0.707-2.948-0.705-2.948-0.216-2.947-0.217-3.283 0.377-3.285 0.378-2.679 0.685-2.68 0.684-2.329 1.078c-1.28 0.592-3.144 1.599-4.14 2.236-0.997 0.639-2.026 1.371-2.286 1.63-0.259 0.259-0.882 0.74-1.382 1.066l-0.911 0.597 0.636-3.047c0.351-1.675 0.643-3.24 0.651-3.48l0.014-0.433h-12.716l-1.114 7.022c-0.614 3.863-1.582 9.832-2.152 13.266-1.257 7.574-2.529 15.145-3.816 22.714-0.567 3.337-1.504 8.644-2.083 11.791s-1.426 7.751-1.884 10.231c-0.457 2.479-1.319 7.16-1.913 10.402-0.701 3.816-1.409 7.631-2.124 11.444-0.677 3.586-1.369 7.169-2.074 10.75-0.568 2.86-1.116 5.554-1.221 5.981l-0.189 0.781h7.457v1e-3zm32.1-40.095l-2.895 0.175-1.892-0.336-1.893-0.334-1.922-0.877-1.923-0.878-1.342-1.282-1.343-1.281-0.775-1.734c-0.427-0.954-0.974-2.574-1.217-3.602l-0.442-1.865 0.177-2.989 0.178-2.987 0.893-4.683c0.674-3.579 1.328-7.163 1.96-10.75 0.587-3.338 1.477-8.229 1.976-10.869l0.907-4.8 1.988-1.654c1.094-0.908 2.826-2.129 3.85-2.709l1.86-1.056 2.427-0.751 2.428-0.752 3.121-0.184 3.121-0.183 2.542 0.542 2.541 0.541 1.794 0.826 1.793 0.826 1.504 1.512 1.505 1.512 0.81 1.602c0.447 0.881 1.074 2.604 1.393 3.83l0.581 2.229-0.178 6.59-0.178 6.59-0.89 3.895c-0.49 2.142-1.422 5.419-2.072 7.281l-1.181 3.389-1.448 2.742c-0.796 1.509-2.023 3.547-2.727 4.529s-1.827 2.258-2.495 2.83c-0.809 0.688-1.637 1.352-2.484 1.991l-1.271 0.949-2.943 1.001-2.943 1.001-2.895 0.173zm72.011 9.534l3.815 0.044 3.813-0.348c2.1-0.191 5.532-0.59 7.629-0.887 2.1-0.295 5.724-0.957 8.056-1.469l4.239-0.933 0.212-1.564c0.115-0.858 0.592-3.417 1.058-5.685l0.847-4.125-0.188-0.186-0.187-0.187-1.296 0.625c-0.713 0.344-2.934 1.166-4.934 1.825l-3.638 1.197-3.818 0.741-3.818 0.739-6.068 0.013-6.069 0.011-2.081-0.664c-1.144-0.365-2.827-1.033-3.74-1.486l-1.659-0.821-1.369-1.237-1.37-1.238-1.069-1.867-1.069-1.869-0.67-2.342-0.67-2.344-4e-3 -4.336-5e-3 -4.336 0.594-3.867 0.597-3.869 5.218-0.244 5.218-0.244 19.291 0.125 19.29 0.123 0.582-2.47c0.321-1.359 0.811-4.168 1.089-6.242l0.506-3.772 0.011-3.172 0.012-3.173-0.549-2.368-0.551-2.369-0.908-1.567c-0.498-0.862-1.38-2.112-1.955-2.778-0.576-0.665-1.605-1.604-2.286-2.084-0.683-0.48-2.02-1.29-2.974-1.797l-1.733-0.922-3.029-0.73-3.03-0.729-3.731-0.357-3.734-0.356-3.467 0.226-3.468 0.225-4.162 0.8-4.161 0.8-2.602 1.039c-1.431 0.57-3.615 1.615-4.854 2.318-1.24 0.703-2.956 1.847-3.813 2.541-0.86 0.696-2.347 2.049-3.304 3.006-0.958 0.957-2.376 2.676-3.148 3.82-0.774 1.146-1.96 3.174-2.638 4.508-0.676 1.336-1.557 3.209-1.958 4.162-0.399 0.953-1.129 2.904-1.617 4.334-0.49 1.432-1.26 4.162-1.709 6.07-0.53 2.311-0.988 4.637-1.373 6.977l-0.554 3.51 6e-3 5.16 6e-3 5.16 0.526 2.254c0.289 1.24 0.845 3.113 1.231 4.162s1.104 2.609 1.593 3.468 1.532 2.239 2.318 3.071c0.785 0.83 2.21 2.092 3.164 2.801 0.952 0.709 2.65 1.709 3.771 2.219l2.039 0.928 2.843 0.688c1.563 0.378 3.923 0.826 5.244 0.996 1.317 0.165 4.114 0.325 6.212 0.348zm6.531-48.853c-9.6 0-17.455-0.068-17.455-0.153 0-0.083 0.41-1.293 0.911-2.688 0.5-1.394 1.38-3.468 1.953-4.609l1.045-2.077 2.293-2.281 2.294-2.283 2.255-1.077c1.239-0.593 2.878-1.238 3.641-1.435 0.764-0.196 2.947-0.456 4.854-0.577l3.469-0.223 2.664 0.343 2.662 0.342 1.936 0.886 1.936 0.887 1.062 1.145c0.583 0.629 1.278 1.557 1.546 2.059l0.483 0.916 0.32 2.033 0.321 2.031-0.367 3.381-0.366 3.383h-17.457v-3e-3zm103.75 48.855l3.817 0.042 4.332-0.514c2.383-0.282 5.555-0.75 7.05-1.041 1.806-0.363 3.599-0.789 5.375-1.275 1.462-0.414 2.785-0.861 2.939-0.993 0.155-0.133 0.567-1.706 0.918-3.497s0.792-4.192 0.981-5.337c0.188-1.145 0.286-2.142 0.217-2.217-0.07-0.075-0.325 0.022-0.568 0.214-0.243 0.194-1.944 0.91-3.781 1.592l-3.339 1.24-4.756 0.921-4.756 0.921-4.042-0.137-4.043-0.138-2.297-0.798-2.297-0.797-1.774-1.551-1.773-1.553-1.178-2.145-1.177-2.143-0.562-2.869-0.561-2.867 5e-3 -3.721 3e-3 -3.721 0.681-4.508 0.682-4.51 0.721-2.428c0.396-1.335 0.846-2.895 0.997-3.467 0.152-0.573 0.787-2.211 1.413-3.643 0.625-1.43 1.741-3.641 2.479-4.912l1.342-2.312 1.649-1.709 1.648-1.709 1.745-1.082 1.747-1.083 2.242-0.691c1.233-0.379 3.413-0.873 4.843-1.094l2.602-0.406 3.813 0.191 3.815 0.191 4.508 0.902 4.509 0.901 1.833 0.685c1.008 0.375 1.877 0.685 1.932 0.685 0.054 0 0.296-1.288 0.537-2.862 0.242-1.572 0.672-4.162 0.956-5.752 0.285-1.592 0.449-2.962 0.364-3.045-0.083-0.084-1.438-0.299-3.01-0.479-1.573-0.178-5.848-0.496-9.498-0.707l-6.639-0.381-4.683 0.358-4.681 0.36-3.469 0.728-3.468 0.729-2.233 0.893c-1.229 0.491-3.027 1.378-3.998 1.971-0.931 0.566-1.846 1.156-2.745 1.77-0.54 0.382-2.176 1.87-3.638 3.309l-2.655 2.613-1.484 2.172c-0.814 1.195-2.225 3.686-3.134 5.536l-1.652 3.364-1.267 3.64c-0.696 2.003-1.669 5.28-2.16 7.283l-0.895 3.642-0.325 3.295-0.324 3.295 3e-3 4.334 4e-3 4.334 0.327 2.522 0.327 2.522 1.039 2.594 1.038 2.594 1.201 1.875 1.198 1.875 1.907 1.878 1.909 1.877 2.017 1.068 2.02 1.065 2.65 0.737c1.457 0.404 3.564 0.869 4.682 1.032s3.748 0.316 5.848 0.339h-3e-3zm57.044-0.128l4.681-0.135 2.948-0.754 2.948-0.756 1.908-0.9c1.049-0.495 2.765-1.475 3.813-2.176 1.05-0.7 2.675-2.032 3.609-2.959 0.935-0.928 2.322-2.51 3.082-3.517s1.428-1.784 1.483-1.728c0.058 0.056-0.118 1.658-0.389 3.562-0.269 1.905-0.493 4.438-0.497 5.631l-6e-3 2.166h12.729l0.194-4.94 0.194-4.942 0.908-6.416c0.5-3.529 1.307-8.757 1.794-11.617 0.485-2.86 1.331-7.697 1.879-10.75 0.547-3.053 1.414-7.812 1.925-10.578l0.932-5.027 0.032-4.344 0.03-4.344-0.981-2.007-0.982-2.008-1.331-1.278-1.333-1.279-2.185-1.106-2.188-1.108-3.259-0.726-3.259-0.726-4.486-0.34-4.487-0.342-5.778 0.358c-3.181 0.196-7.652 0.584-9.941 0.862l-4.162 0.505-2.836 0.011-2.836 0.011-0.413 1.995c-0.227 1.096-0.858 3.701-1.401 5.79-0.545 2.088-0.938 3.847-0.877 3.908s1.578-0.283 3.37-0.765c1.792-0.483 5.601-1.275 8.462-1.764l5.201-0.886 4.682-0.192 4.682-0.193 3.016 0.529 3.017 0.528 2.012 0.993 2.013 0.994 1.127 1.68 1.128 1.68-0.016 2.647-0.017 2.649-0.598 2.905-0.598 2.907-12.479 0.045-12.478 0.044-4.083 1.12c-2.246 0.616-4.733 1.434-5.527 1.816-0.794 0.385-1.588 0.699-1.765 0.699-0.176 0-1.512 0.739-2.969 1.646l-2.648 1.645-2.085 2.082c-1.148 1.146-2.613 2.862-3.257 3.816-0.645 0.953-1.691 2.945-2.325 4.427l-1.154 2.693-0.529 3.028-0.53 3.028v6.355l0.505 2.646 0.507 2.646 0.938 1.725c0.517 0.948 1.466 2.339 2.106 3.089l1.168 1.364 2.073 1.26 2.074 1.261 2.375 0.67c1.306 0.369 3.293 0.817 4.417 0.996l2.042 0.321 4.682-0.134h-1e-3zm4.335-9.699l-2.774 0.146-1.838-0.469c-1.01-0.257-2.544-0.83-3.407-1.274l-1.569-0.808-0.858-1.019c-0.471-0.562-1.19-1.661-1.6-2.446l-0.743-1.428-0.145-3.333-0.147-3.334 0.588-2.022c0.323-1.111 1.082-3.043 1.687-4.289l1.098-2.267 2.104-2.087 2.102-2.088 2.232-1.075 2.231-1.073 2.774-0.66 2.774-0.66h17.34l0.549 0.228 0.548 0.226-0.461 2.723c-0.254 1.496-0.859 4.203-1.347 6.015-0.485 1.813-1.344 4.476-1.906 5.919-0.563 1.444-1.024 2.721-1.024 2.836 0 0.117-0.57 1.168-1.267 2.338l-1.267 2.127-2.079 2.061c-1.143 1.132-2.206 2.059-2.359 2.059s-0.854 0.392-1.558 0.868l-1.277 0.866-2.813 0.891-2.812 0.889-2.776 0.14zm112.88 9.822l3.294 0.042 3.122-0.507c1.717-0.278 3.901-0.727 4.855-0.997 0.953-0.271 2.671-0.97 3.813-1.556l2.082-1.066 1.79-1.576 1.789-1.576 1.886-2.513c1.037-1.383 1.976-2.748 2.086-3.035l0.201-0.521-0.175 1.734c-0.124 1.161-0.284 2.317-0.479 3.469-0.169 0.953-0.407 2.787-0.533 4.074l-0.23 2.34h13.606v-4.681l1.036-8.844c0.569-4.864 1.413-11.339 1.873-14.392s1.171-7.42 1.58-9.709c0.406-2.289 1.13-6.426 1.604-9.19 0.476-2.765 1.334-7.604 1.908-10.75 0.573-3.148 1.492-8.142 2.041-11.097 0.548-2.957 1.401-7.562 1.895-10.231s1.377-7.353 1.964-10.403c0.615-3.184 1.25-6.363 1.906-9.537 0.462-2.192 0.839-4.105 0.838-4.248v-0.261h-14.844l-0.219 2.168c-0.12 1.192-0.689 5.132-1.262 8.757-0.681 4.279-1.374 8.556-2.08 12.83-0.411 2.466-0.817 4.932-1.22 7.399l-0.186 1.155-0.585-0.248c-0.322-0.137-2.069-0.622-3.88-1.077l-3.294-0.827-4.508-0.352-4.51-0.351-3.814 0.354-3.814 0.356-3.468 0.877-3.468 0.876-3.294 1.607-3.296 1.607-2.428 1.795-2.427 1.797-2.097 2.25c-1.153 1.235-2.818 3.281-3.702 4.543l-1.604 2.297-1.886 3.922c-1.036 2.158-2.298 5.015-2.803 6.35-0.506 1.336-1.396 4.295-1.981 6.577l-1.061 4.15-0.523 5.388-0.522 5.387 0.392 4.334 0.395 4.336 0.463 1.56c0.257 0.858 0.794 2.388 1.196 3.397l0.732 1.84 1.335 1.806 1.336 1.808 1.524 1.248 1.523 1.249 2.081 1.034c1.146 0.566 3.064 1.302 4.267 1.631 1.2 0.329 3.151 0.725 4.335 0.878 1.183 0.156 3.632 0.301 5.445 0.323zm5.913-9.837l-2.619 0.137-1.766-0.317c-0.972-0.175-2.527-0.645-3.457-1.043l-1.689-0.723-1.422-1.166-1.421-1.164-1.056-2.023-1.057-2.022-0.482-2.254-0.48-2.255 0.041-4.508 0.04-4.508 0.56-3.989 0.559-3.987 0.869-2.773c0.479-1.526 0.872-2.967 0.874-3.201 4e-3 -0.232 0.474-1.48 1.049-2.772 0.672-1.495 1.382-2.973 2.13-4.431 0.599-1.145 1.717-2.928 2.483-3.965 0.769-1.035 2.138-2.596 3.042-3.469 0.904-0.869 2.341-2.014 3.196-2.539l1.552-0.955 2.727-0.943 2.727-0.944 5.722-3e-3h5.722l3.294 0.915c1.813 0.502 3.737 1.085 4.276 1.295l0.981 0.382-0.191 0.951c-0.104 0.524-0.518 2.825-0.916 5.113-0.398 2.289-1.184 6.659-1.745 9.711s-1.423 7.656-1.916 10.23c-0.492 2.574-1.205 5.852-1.585 7.281-0.39 1.47-0.786 2.938-1.189 4.403-0.275 0.991-0.93 2.709-1.454 3.815-0.525 1.106-1.444 2.715-2.042 3.572-0.599 0.858-1.608 2.049-2.246 2.643-0.639 0.596-2.02 1.652-3.068 2.349l-1.907 1.269-2.757 0.875-2.757 0.875-2.622 0.138zm-510.38 8.149h8.425l0.605-3.727c0.332-2.051 0.982-5.992 1.443-8.757l1.907-11.444c0.588-3.529 1.47-8.757 1.959-11.617 0.489-2.861 1.267-7.299 1.727-9.861 0.461-2.565 0.926-4.75 1.032-4.856l0.195-0.194h45.313l0.252 0.252 0.252 0.252-0.394 2.002c-0.215 1.102-0.854 4.498-1.419 7.551-0.565 3.052-1.515 8.201-2.112 11.445-0.627 3.412-1.265 6.821-1.914 10.229-0.458 2.384-1.384 7.377-2.058 11.097-0.673 3.719-1.223 6.957-1.221 7.196l4e-3 0.433h16.921l0.374-2.166c0.207-1.192 0.537-3.338 0.737-4.769 0.198-1.431 0.679-4.476 1.066-6.763 0.387-2.288 1.16-6.815 1.719-10.057 0.558-3.242 1.494-8.783 2.078-12.312s1.45-8.679 1.926-11.443c0.602-3.472 1.229-6.94 1.88-10.403 0.559-2.957 1.491-7.95 2.071-11.099 0.58-3.146 1.447-7.905 1.929-10.577 0.482-2.67 1.36-7.508 1.952-10.75s1.339-7.025 1.66-8.41l0.584-2.514h-17.133l-0.233 1.648c-0.127 0.904-0.541 3.441-0.919 5.635-0.379 2.193-1.065 6.094-1.527 8.669-0.462 2.576-1.306 7.491-1.876 10.925-0.559 3.363-1.097 6.729-1.614 10.1l-0.578 3.856-12.575 0.255-12.576 0.254-10.532-0.25c-5.793-0.137-10.565-0.277-10.605-0.31-0.039-0.034 0.158-1.381 0.438-2.995 0.369-2.081 0.762-4.157 1.179-6.229 0.532-2.656 1.049-5.315 1.55-7.978 0.485-2.574 1.033-5.772 1.22-7.108 0.186-1.334 0.577-3.559 0.868-4.942 0.291-1.382 0.843-4.295 1.227-6.472 0.383-2.178 0.792-4.207 0.909-4.508l0.21-0.551h-16.995l-0.543 3.035c-0.3 1.669-0.699 4.048-0.887 5.288-0.189 1.239-0.822 5.219-1.407 8.843s-1.449 9.008-1.92 11.964l-1.903 11.964c-0.669 4.168-1.375 8.329-2.116 12.484-0.617 3.412-1.246 6.822-1.887 10.23-0.451 2.385-1.31 6.91-1.91 10.058-0.629 3.298-1.278 6.593-1.945 9.884-0.47 2.288-0.989 4.941-1.153 5.895-0.166 0.953-0.702 3.705-1.194 6.113-0.491 2.407-0.893 4.631-0.893 4.941v0.562h8.427v2e-3zm93.278 0h7.459l0.21-0.548c0.117-0.303 0.211-1.094 0.211-1.758 0-0.666 0.47-4.126 1.042-7.688 1.309-8.118 2.65-16.23 4.024-24.338 0.589-3.416 1.208-6.826 1.859-10.23 0.552-2.86 1.4-7.309 1.884-9.882 0.483-2.575 1.435-7.474 2.114-10.888 0.679-3.412 1.319-6.341 1.422-6.508l0.189-0.305-7.543 0.093-7.543 0.093-0.63 4.51c-0.344 2.479-1.1 7.396-1.678 10.923-0.577 3.528-1.451 8.914-1.942 11.964-0.594 3.648-1.228 7.29-1.9 10.925-0.555 2.956-1.405 7.481-1.89 10.056-0.484 2.576-1.353 7.102-1.931 10.058-0.578 2.957-1.353 6.858-1.723 8.67-0.371 1.813-0.768 3.646-0.884 4.075l-0.209 0.779h7.459v-1e-3zm174.46 0h7.403l0.223-3.133c0.123-1.722 0.541-5.195 0.931-7.716s1.189-7.548 1.774-11.171c0.74-4.48 1.546-8.949 2.418-13.406 0.746-3.748 1.587-7.474 1.871-8.279s0.517-1.678 0.517-1.938c0-0.263 0.557-1.687 1.237-3.165 0.68-1.479 1.947-3.743 2.817-5.032l1.581-2.344 2.115-1.96 2.116-1.958 2.608-1.246 2.609-1.247 3.989 0.021 3.986 0.021 1.961 0.585c1.078 0.322 2.054 0.586 2.167 0.586 0.114 0 0.207-0.368 0.207-0.819 0-0.449 0.391-2.733 0.867-5.075 0.477-2.341 0.867-4.355 0.867-4.476s-1.131-0.564-2.514-0.984-3.295-0.86-4.248-0.979l-1.734-0.214-2.254 0.398c-1.24 0.22-3.083 0.703-4.096 1.076-1.015 0.373-2.688 1.217-3.72 1.877-1.03 0.66-2.636 1.946-3.564 2.857-0.931 0.912-2.495 2.751-3.477 4.086-0.764 1.037-1.524 2.078-2.28 3.121l-0.496 0.693 0.301-1.387c0.166-0.764 0.628-3.261 1.026-5.549 0.397-2.289 0.809-4.436 0.908-4.768l0.186-0.608h-13.226v0.837c0 0.459-0.391 3.229-0.866 6.154-0.478 2.928-1.265 7.816-1.748 10.869-0.484 3.052-1.345 8.357-1.91 11.791-0.604 3.646-1.24 7.288-1.911 10.923-1.305 6.942-2.64 13.878-4.005 20.808-0.584 2.957-1.283 6.447-1.552 7.76-0.271 1.31-0.491 2.519-0.491 2.686v0.305h7.407zm175.76 0h7.57v-4.634l0.871-5.746c0.481-3.159 1.272-8.165 1.761-11.12 0.487-2.957 1.095-6.701 1.35-8.324 0.256-1.62 0.933-5.131 1.503-7.801 0.573-2.672 1.286-5.558 1.587-6.416 0.302-0.858 0.549-1.76 0.552-2.002 5e-3 -0.242 0.649-1.8 1.435-3.462l1.429-3.022 1.887-2.506 1.885-2.504 2.062-1.551c1.134-0.854 2.959-1.984 4.056-2.516l1.991-0.965 4.334 0.029 4.335 0.031 1.707 0.547 1.706 0.549 0.288-0.179 0.287-0.178 0.017-1.106c7e-3 -0.608 0.378-2.873 0.823-5.033l0.812-3.926-0.912-0.356c-0.874-0.323-1.756-0.624-2.646-0.902l-1.733-0.547-3.121 9e-3 -3.121 8e-3 -2.544 0.896-2.544 0.894-1.91 1.152-1.909 1.152-2.483 2.601-2.483 2.601-1.334 2.018c-0.733 1.109-1.379 1.968-1.435 1.907-0.057-0.061 0.343-2.373 0.886-5.138 0.543-2.767 0.995-5.381 1.003-5.81l0.015-0.781h-12.831v0.222c0 0.121-0.319 2.346-0.711 4.941-0.391 2.598-1.177 7.608-1.744 11.137-0.682 4.221-1.373 8.44-2.072 12.658-0.608 3.646-1.247 7.288-1.915 10.924-0.481 2.574-1.336 7.101-1.9 10.057-0.563 2.957-1.49 7.717-2.058 10.578l-1.673 8.408-0.641 3.207h7.568zm-335.55-84.623l2.104 8e-3 1.674-0.57 1.675-0.57 1.481-1.503 1.482-1.502 0.779-2.003 0.781-2.002 0.027-2.948 0.028-2.946-0.693-1.151-0.694-1.151-1.207-0.746-1.208-0.748h-5.214l-1.775 0.795-1.775 0.793-1.03 1.104-1.03 1.104-0.81 1.908-0.809 1.906-0.153 2.971-0.152 2.971 0.752 1.478 0.754 1.476 1.454 0.66 1.453 0.659 2.106 7e-3z" fill="#B3131B"/></svg>
diff --git a/public/bandeiras/mastercard.svg b/public/bandeiras/mastercard.svg
new file mode 100644
index 0000000..41bea82
--- /dev/null
+++ b/public/bandeiras/mastercard.svg
@@ -0,0 +1,14 @@
+<svg width="780" height="500" viewBox="0 0 780 500" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_6278_125825)">
+<path d="M780 0H0V500H780V0Z" fill="#253747"/>
+<path d="M211.053 467.045V438.109C211.053 427.041 204.311 419.793 192.736 419.793C186.949 419.793 180.657 421.703 176.33 427.996C172.959 422.715 168.127 419.793 160.879 419.793C156.047 419.793 151.215 421.254 147.395 426.535V420.748H137.281V467.045H147.395V441.481C147.395 433.278 151.721 429.401 158.463 429.401C165.205 429.401 168.577 433.727 168.577 441.481V467.045H178.69V441.481C178.69 433.278 183.522 429.401 189.759 429.401C196.501 429.401 199.872 433.727 199.872 441.481V467.045H211.053ZM361.068 420.748H344.662V406.758H334.549V420.748H325.391V429.906H334.549V451.145C334.549 461.764 338.875 468 350.449 468C354.776 468 359.608 466.539 362.979 464.629L360.057 455.92C357.135 457.831 353.764 458.336 351.348 458.336C346.516 458.336 344.606 455.415 344.606 450.639V429.906H361.012V420.748H361.068ZM446.92 419.737C441.133 419.737 437.256 422.658 434.84 426.479V420.692H424.727V466.989H434.84V440.919C434.84 433.221 438.211 428.839 444.504 428.839C446.414 428.839 448.83 429.345 450.797 429.794L453.718 420.13C451.696 419.737 448.83 419.737 446.92 419.737ZM317.187 424.569C312.356 421.198 305.613 419.737 298.365 419.737C286.791 419.737 279.094 425.524 279.094 434.682C279.094 442.38 284.881 446.762 294.994 448.167L299.826 448.672C305.108 449.628 308.029 451.088 308.029 453.504C308.029 456.875 304.152 459.291 297.41 459.291C290.668 459.291 285.33 456.875 281.959 454.459L277.127 462.157C282.409 466.034 289.657 467.944 296.904 467.944C310.389 467.944 318.143 461.651 318.143 452.999C318.143 444.796 311.85 440.469 302.242 439.008L297.41 438.503C293.084 437.997 289.713 437.042 289.713 434.176C289.713 430.805 293.084 428.895 298.421 428.895C304.209 428.895 309.996 431.311 312.917 432.772L317.187 424.569ZM586.26 419.737C580.473 419.737 576.596 422.658 574.18 426.479V420.692H564.067V466.989H574.18V440.919C574.18 433.221 577.551 428.839 583.844 428.839C585.754 428.839 588.17 429.345 590.137 429.794L593.059 420.242C591.092 419.737 588.227 419.737 586.26 419.737ZM457.033 443.897C457.033 457.887 466.697 468 481.643 468C488.385 468 493.217 466.539 498.049 462.719L493.217 454.516C489.34 457.437 485.519 458.842 481.137 458.842C472.934 458.842 467.147 453.055 467.147 443.897C467.147 435.188 472.934 429.401 481.137 428.951C485.463 428.951 489.34 430.412 493.217 433.278L498.049 425.074C493.217 421.198 488.385 419.793 481.643 419.793C466.697 419.737 457.033 429.906 457.033 443.897ZM550.582 443.897V420.748H540.469V426.535C537.098 422.209 532.266 419.793 525.973 419.793C512.938 419.793 502.825 429.906 502.825 443.897C502.825 457.887 512.938 468 525.973 468C532.715 468 537.547 465.584 540.469 461.258V467.045H550.582V443.897ZM513.444 443.897C513.444 435.693 518.725 428.951 527.434 428.951C535.637 428.951 541.424 435.244 541.424 443.897C541.424 452.1 535.637 458.842 527.434 458.842C518.781 458.336 513.444 452.043 513.444 443.897ZM392.42 419.737C378.935 419.737 369.271 429.401 369.271 443.84C369.271 458.336 378.935 467.944 392.926 467.944C399.668 467.944 406.41 466.034 411.748 461.651L406.916 454.403C403.039 457.325 398.207 459.235 393.431 459.235C387.139 459.235 380.902 456.314 379.441 448.167H413.658C413.658 446.706 413.658 445.751 413.658 444.29C414.108 429.401 405.399 419.737 392.42 419.737ZM392.42 428.446C398.713 428.446 403.039 432.322 403.994 439.514H379.891C380.846 433.278 385.172 428.446 392.42 428.446ZM643.682 443.897V402.432H633.568V426.535C630.197 422.209 625.365 419.793 619.073 419.793C606.037 419.793 595.924 429.906 595.924 443.897C595.924 457.887 606.037 468 619.073 468C625.815 468 630.647 465.584 633.568 461.258V467.045H643.682V443.897ZM606.543 443.897C606.543 435.693 611.825 428.951 620.533 428.951C628.736 428.951 634.524 435.244 634.524 443.897C634.524 452.1 628.736 458.842 620.533 458.842C611.825 458.336 606.543 452.043 606.543 443.897ZM267.969 443.897V420.748H257.855V426.535C254.484 422.209 249.652 419.793 243.36 419.793C230.325 419.793 220.211 429.906 220.211 443.897C220.211 457.887 230.325 468 243.36 468C250.102 468 254.934 465.584 257.855 461.258V467.045H267.969V443.897ZM230.381 443.897C230.381 435.693 235.662 428.951 244.371 428.951C252.574 428.951 258.361 435.244 258.361 443.897C258.361 452.1 252.574 458.842 244.371 458.842C235.662 458.336 230.381 452.043 230.381 443.897Z" fill="white"/>
+<path d="M465.738 69.1387H313.812V342.088H465.738V69.1387Z" fill="#FF5A00"/>
+<path d="M323.926 205.613C323.926 150.158 349.996 100.94 390 69.1387C360.559 45.9902 323.42 32 282.91 32C186.945 32 109.297 109.648 109.297 205.613C109.297 301.578 186.945 379.227 282.91 379.227C323.42 379.227 360.559 365.237 390 342.088C349.94 310.737 323.926 261.069 323.926 205.613Z" fill="#EB001B"/>
+<path d="M670.711 205.613C670.711 301.578 593.062 379.227 497.098 379.227C456.588 379.227 419.449 365.237 390.008 342.088C430.518 310.231 456.082 261.069 456.082 205.613C456.082 150.158 430.012 100.94 390.008 69.1387C419.393 45.9902 456.532 32 497.041 32C593.062 32 670.711 110.154 670.711 205.613Z" fill="#F79E1B"/>
+</g>
+<defs>
+<clipPath id="clip0_6278_125825">
+<rect width="780" height="500" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/bandeiras/visa.svg b/public/bandeiras/visa.svg
new file mode 100644
index 0000000..618c5eb
--- /dev/null
+++ b/public/bandeiras/visa.svg
@@ -0,0 +1,11 @@
+<svg width="780" height="500" viewBox="0 0 780 500" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_6278_125833)">
+<path d="M780 0H0V500H780V0Z" fill="#1434CB"/>
+<path d="M489.823 143.111C442.988 143.111 401.134 167.393 401.134 212.256C401.134 263.706 475.364 267.259 475.364 293.106C475.364 303.989 462.895 313.731 441.6 313.731C411.377 313.731 388.789 300.119 388.789 300.119L379.123 345.391C379.123 345.391 405.145 356.889 439.692 356.889C490.898 356.889 531.19 331.415 531.19 285.784C531.19 231.419 456.652 227.971 456.652 203.981C456.652 195.455 466.887 186.114 488.122 186.114C512.081 186.114 531.628 196.014 531.628 196.014L541.087 152.289C541.087 152.289 519.818 143.111 489.823 143.111ZM61.3294 146.411L60.1953 153.011C60.1953 153.011 79.8988 156.618 97.645 163.814C120.495 172.064 122.122 176.868 125.971 191.786L167.905 353.486H224.118L310.719 146.411H254.635L198.989 287.202L176.282 167.861C174.199 154.203 163.651 146.411 150.74 146.411H61.3294ZM333.271 146.411L289.275 353.486H342.756L386.598 146.411H333.271ZM631.554 146.411C618.658 146.411 611.825 153.318 606.811 165.386L528.458 353.486H584.542L595.393 322.136H663.72L670.318 353.486H719.805L676.633 146.411H631.554ZM638.848 202.356L655.473 280.061H610.935L638.848 202.356Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_6278_125833">
+<rect width="780" height="500" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/fonts/aeonik-regular.otf b/public/fonts/aeonik-regular.otf
new file mode 100644
index 0000000..b156f1a
Binary files /dev/null and b/public/fonts/aeonik-regular.otf differ
diff --git a/public/fonts/anthropic-sans.woff2 b/public/fonts/anthropic-sans.woff2
new file mode 100644
index 0000000..3d19db6
Binary files /dev/null and b/public/fonts/anthropic-sans.woff2 differ
diff --git a/public/fonts/font_index.ts b/public/fonts/font_index.ts
new file mode 100644
index 0000000..191bc45
--- /dev/null
+++ b/public/fonts/font_index.ts
@@ -0,0 +1,38 @@
+import { Inter, Outfit } from "next/font/google";
+import localFont from "next/font/local";
+
+// const aeonik = localFont({
+//   src: [
+//     {
+//       path: "../fonts/aeonik-regular.otf",
+//       weight: "400",
+//       style: "normal",
+//     },
+//   ],
+// });
+
+const anthropic_sans = localFont({
+  src: [
+    {
+      path: "../fonts/anthropic-sans.woff2",
+      weight: "400",
+      style: "normal",
+    },
+  ],
+});
+
+const inter = Inter({
+  subsets: ["latin"],
+  weight: ["400", "500", "600", "700"],
+});
+
+const outfit = Outfit({
+  subsets: ["latin"],
+  weight: ["400", "500", "600", "700"],
+});
+
+const main_font = anthropic_sans;
+const money_font = outfit;
+const title_font = inter;
+
+export { main_font, money_font, title_font };
diff --git a/public/icones/party.svg b/public/icones/party.svg
new file mode 100644
index 0000000..fb399af
--- /dev/null
+++ b/public/icones/party.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--fxemoji" preserveAspectRatio="xMidYMid meet"><path fill="#FFB636" d="M378.553 355.648L45.117 500.733c-21.735 8.65-43.335-12.764-34.874-34.572l145.709-338.684"></path><path fill="#FFD469" d="M10.243 466.161l11.58-26.916c.993-1.514 1.983-3.03 2.977-4.543c57.597-87.744 116.038-174.952 176.475-260.768l67.765 69.46C217.91 278.496 51.89 450.063 17.115 495.571c-7.57-6.963-11.249-18.128-6.872-29.41z"></path><path fill="#A06C33" d="M304.382 204.434c61.854 61.854 95.685 128.308 75.564 148.43c-20.121 20.121-86.575-13.71-148.43-75.564s-95.685-128.308-75.564-148.43s86.575 13.709 148.43 75.564z"></path><path fill="#F7F9AA" d="M155.601 327.572c0 6.012-4.874 10.885-10.885 10.885s-10.885-4.873-10.885-10.885s4.873-10.885 10.885-10.885s10.885 4.873 10.885 10.885z"></path><path fill="#FFB636" d="M501.986 213.16c0 8.628-6.994 15.622-15.622 15.622s-15.622-6.994-15.622-15.622s6.994-15.622 15.622-15.622s15.622 6.994 15.622 15.622zM397.663 421.182c-8.628 0-15.622 6.994-15.622 15.622s6.994 15.622 15.622 15.622s15.622-6.994 15.622-15.622s-6.995-15.622-15.622-15.622z"></path><path fill="#BEA4FF" d="M355.949 79.523c-1.34 9.065-7.197 17.072-16.07 21.968c-6.126 3.38-13.33 5.137-20.807 5.137a48.72 48.72 0 0 1-7.117-.526c-5.288-.782-10.581.016-14.52 2.189c-1.766.974-4.8 3.105-5.293 6.438c-.492 3.333 1.796 6.251 3.203 7.694c3.058 3.135 7.725 5.381 12.849 6.22c.141.015.281.02.422.041c21.619 3.196 37.061 20.32 34.421 38.173c-1.34 9.066-7.197 17.073-16.071 21.969c-6.126 3.38-13.329 5.137-20.806 5.137a48.72 48.72 0 0 1-7.117-.526c-5.287-.783-10.582.015-14.521 2.189c-1.766.974-4.8 3.105-5.293 6.438c-.79 5.349 5.778 12.411 16.47 13.991c5.817.86 9.836 6.273 8.976 12.091c-.782 5.29-5.328 9.092-10.52 9.092c-.519 0-1.043-.038-1.571-.116c-21.619-3.196-37.06-20.321-34.421-38.173c1.34-9.066 7.197-17.073 16.071-21.969c8.055-4.444 17.972-6.082 27.924-4.611c5.288.781 10.58-.016 14.52-2.189c1.766-.974 4.8-3.105 5.293-6.438c.777-5.262-5.577-12.171-15.963-13.898c-.17-.017-.341-.031-.512-.056c-9.951-1.472-18.971-5.908-25.395-12.493c-7.077-7.254-10.367-16.614-9.026-25.681c1.34-9.065 7.197-17.072 16.07-21.968c8.055-4.444 17.972-6.082 27.924-4.611c5.286.78 10.581-.016 14.52-2.189c1.766-.974 4.8-3.105 5.293-6.438c.492-3.333-1.796-6.251-3.203-7.694c-3.142-3.22-7.977-5.516-13.267-6.297c-5.817-.86-9.836-6.273-8.976-12.091c.859-5.818 6.274-9.832 12.091-8.977c9.951 1.472 18.971 5.908 25.395 12.493c7.078 7.255 10.368 16.615 9.027 25.681z"></path><path fill="#FF6E83" d="M81.731 159.689c0 9.777-7.926 17.703-17.703 17.703s-17.703-7.926-17.703-17.703s7.926-17.703 17.703-17.703s17.703 7.925 17.703 17.703zm316.445-20.453c-11.296 0-20.452 9.157-20.452 20.452s9.157 20.452 20.452 20.452s20.452-9.157 20.452-20.452s-9.156-20.452-20.452-20.452zM215.529 395.899c-11.296 0-20.452 9.157-20.452 20.452s9.157 20.452 20.452 20.452c11.296 0 20.452-9.157 20.452-20.452s-9.156-20.452-20.452-20.452zm271.303-93.646c3.093-5.989.745-13.352-5.244-16.445c-2.388-1.232-5.238-2.868-8.538-4.761c-28.993-16.633-89.319-51.242-160.352 6.109c-5.245 4.234-6.063 11.919-1.829 17.163c4.233 5.245 11.917 6.065 17.163 1.829c58.035-46.856 104.882-19.985 132.871-3.928c3.403 1.952 6.617 3.796 9.483 5.276a12.205 12.205 0 0 0 16.446-5.243z"></path><path fill="#59CAFC" d="M434.834 62.776c0 6.012-4.874 10.885-10.885 10.885c-6.012 0-10.885-4.873-10.885-10.885s4.873-10.885 10.885-10.885c6.012-.001 10.885 4.873 10.885 10.885zM46.324 11.894c-6.012 0-10.885 4.873-10.885 10.885s4.873 10.885 10.885 10.885S57.21 28.791 57.21 22.779s-4.874-10.885-10.886-10.885zm170.681 142.057c1.231-2.414 2.749-5.163 4.356-8.073c8.154-14.771 19.32-34.999 19.992-58.559c.807-28.304-13.934-54.002-43.812-76.38c-5.187-3.885-12.539-2.828-16.421 2.357c-3.884 5.186-2.829 12.538 2.357 16.421c23.75 17.788 35.01 36.411 34.425 56.933c-.51 17.872-9.697 34.516-17.08 47.889c-1.701 3.083-3.309 5.994-4.713 8.747c-2.945 5.771-.654 12.836 5.116 15.781a11.677 11.677 0 0 0 5.323 1.285a11.73 11.73 0 0 0 10.457-6.401z"></path></svg>
\ No newline at end of file
diff --git a/public/logo_small.png b/public/logo_small.png
new file mode 100644
index 0000000..25a436a
Binary files /dev/null and b/public/logo_small.png differ
diff --git a/public/logo_text.png b/public/logo_text.png
new file mode 100644
index 0000000..a71abee
Binary files /dev/null and b/public/logo_text.png differ
diff --git a/public/logos/99Pay.png b/public/logos/99Pay.png
new file mode 100644
index 0000000..cd27788
Binary files /dev/null and b/public/logos/99Pay.png differ
diff --git a/public/logos/alelo.png b/public/logos/alelo.png
new file mode 100644
index 0000000..ea2611a
Binary files /dev/null and b/public/logos/alelo.png differ
diff --git a/public/logos/azul.png b/public/logos/azul.png
new file mode 100644
index 0000000..96108f9
Binary files /dev/null and b/public/logos/azul.png differ
diff --git a/public/logos/b3.png b/public/logos/b3.png
new file mode 100644
index 0000000..94c3338
Binary files /dev/null and b/public/logos/b3.png differ
diff --git a/public/logos/banrisul.png b/public/logos/banrisul.png
new file mode 100644
index 0000000..8c1d94c
Binary files /dev/null and b/public/logos/banrisul.png differ
diff --git a/public/logos/bb.png b/public/logos/bb.png
new file mode 100644
index 0000000..d394e31
Binary files /dev/null and b/public/logos/bb.png differ
diff --git a/public/logos/bmg.png b/public/logos/bmg.png
new file mode 100644
index 0000000..0367b88
Binary files /dev/null and b/public/logos/bmg.png differ
diff --git a/public/logos/bradesco.png b/public/logos/bradesco.png
new file mode 100644
index 0000000..ddfb4ed
Binary files /dev/null and b/public/logos/bradesco.png differ
diff --git a/public/logos/brb.png b/public/logos/brb.png
new file mode 100644
index 0000000..3ab051e
Binary files /dev/null and b/public/logos/brb.png differ
diff --git a/public/logos/bs2.png b/public/logos/bs2.png
new file mode 100644
index 0000000..9673197
Binary files /dev/null and b/public/logos/bs2.png differ
diff --git a/public/logos/btgpactual.png b/public/logos/btgpactual.png
new file mode 100644
index 0000000..ee01ca4
Binary files /dev/null and b/public/logos/btgpactual.png differ
diff --git a/public/logos/bv.png b/public/logos/bv.png
new file mode 100644
index 0000000..b6b8b3c
Binary files /dev/null and b/public/logos/bv.png differ
diff --git a/public/logos/c6bank.png b/public/logos/c6bank.png
new file mode 100644
index 0000000..f394762
Binary files /dev/null and b/public/logos/c6bank.png differ
diff --git a/public/logos/caixa.png b/public/logos/caixa.png
new file mode 100644
index 0000000..7bbd68e
Binary files /dev/null and b/public/logos/caixa.png differ
diff --git a/public/logos/citibank.png b/public/logos/citibank.png
new file mode 100644
index 0000000..a0f9946
Binary files /dev/null and b/public/logos/citibank.png differ
diff --git a/public/logos/cooperativa-cresol.png b/public/logos/cooperativa-cresol.png
new file mode 100644
index 0000000..3b25e4f
Binary files /dev/null and b/public/logos/cooperativa-cresol.png differ
diff --git a/public/logos/credicard-on.png b/public/logos/credicard-on.png
new file mode 100644
index 0000000..c1e6b3f
Binary files /dev/null and b/public/logos/credicard-on.png differ
diff --git a/public/logos/credicard-zero.png b/public/logos/credicard-zero.png
new file mode 100644
index 0000000..b8102b7
Binary files /dev/null and b/public/logos/credicard-zero.png differ
diff --git a/public/logos/credicard.png b/public/logos/credicard.png
new file mode 100644
index 0000000..00f99e3
Binary files /dev/null and b/public/logos/credicard.png differ
diff --git a/public/logos/digio.png b/public/logos/digio.png
new file mode 100644
index 0000000..a056663
Binary files /dev/null and b/public/logos/digio.png differ
diff --git a/public/logos/diners.png b/public/logos/diners.png
new file mode 100644
index 0000000..56cc5af
Binary files /dev/null and b/public/logos/diners.png differ
diff --git a/public/logos/elo.png b/public/logos/elo.png
new file mode 100644
index 0000000..270aa10
Binary files /dev/null and b/public/logos/elo.png differ
diff --git a/public/logos/infinitepay.png b/public/logos/infinitepay.png
new file mode 100644
index 0000000..39f36d9
Binary files /dev/null and b/public/logos/infinitepay.png differ
diff --git a/public/logos/intermedium.png b/public/logos/intermedium.png
new file mode 100644
index 0000000..b6940b1
Binary files /dev/null and b/public/logos/intermedium.png differ
diff --git a/public/logos/interpj.png b/public/logos/interpj.png
new file mode 100644
index 0000000..a7cd5ab
Binary files /dev/null and b/public/logos/interpj.png differ
diff --git a/public/logos/itau-ion.png b/public/logos/itau-ion.png
new file mode 100644
index 0000000..ca8565b
Binary files /dev/null and b/public/logos/itau-ion.png differ
diff --git a/public/logos/itau-uniclass.png b/public/logos/itau-uniclass.png
new file mode 100644
index 0000000..fe43c00
Binary files /dev/null and b/public/logos/itau-uniclass.png differ
diff --git a/public/logos/itau.png b/public/logos/itau.png
new file mode 100644
index 0000000..173e8e4
Binary files /dev/null and b/public/logos/itau.png differ
diff --git a/public/logos/itaupersonnalite.png b/public/logos/itaupersonnalite.png
new file mode 100644
index 0000000..fe2bbc8
Binary files /dev/null and b/public/logos/itaupersonnalite.png differ
diff --git a/public/logos/iti.png b/public/logos/iti.png
new file mode 100644
index 0000000..1d1cda4
Binary files /dev/null and b/public/logos/iti.png differ
diff --git a/public/logos/magalu-pay.png b/public/logos/magalu-pay.png
new file mode 100644
index 0000000..46b59ad
Binary files /dev/null and b/public/logos/magalu-pay.png differ
diff --git a/public/logos/mastercard.png b/public/logos/mastercard.png
new file mode 100644
index 0000000..1242ea3
Binary files /dev/null and b/public/logos/mastercard.png differ
diff --git a/public/logos/mercadobitcoin.png b/public/logos/mercadobitcoin.png
new file mode 100644
index 0000000..a704dde
Binary files /dev/null and b/public/logos/mercadobitcoin.png differ
diff --git a/public/logos/mercadopago.png b/public/logos/mercadopago.png
new file mode 100644
index 0000000..1a2a5f0
Binary files /dev/null and b/public/logos/mercadopago.png differ
diff --git a/public/logos/mercadopagocartao.png b/public/logos/mercadopagocartao.png
new file mode 100644
index 0000000..46e9d61
Binary files /dev/null and b/public/logos/mercadopagocartao.png differ
diff --git a/public/logos/neon.png b/public/logos/neon.png
new file mode 100644
index 0000000..a547141
Binary files /dev/null and b/public/logos/neon.png differ
diff --git a/public/logos/next.png b/public/logos/next.png
new file mode 100644
index 0000000..05f0c43
Binary files /dev/null and b/public/logos/next.png differ
diff --git a/public/logos/nomad.png b/public/logos/nomad.png
new file mode 100644
index 0000000..3ce2626
Binary files /dev/null and b/public/logos/nomad.png differ
diff --git a/public/logos/nu-invest.png b/public/logos/nu-invest.png
new file mode 100644
index 0000000..d1b77ce
Binary files /dev/null and b/public/logos/nu-invest.png differ
diff --git a/public/logos/nubank.png b/public/logos/nubank.png
new file mode 100644
index 0000000..1b0d086
Binary files /dev/null and b/public/logos/nubank.png differ
diff --git a/public/logos/nuconta.png b/public/logos/nuconta.png
new file mode 100644
index 0000000..1b0d086
Binary files /dev/null and b/public/logos/nuconta.png differ
diff --git a/public/logos/original.png b/public/logos/original.png
new file mode 100644
index 0000000..9a156c1
Binary files /dev/null and b/public/logos/original.png differ
diff --git a/public/logos/pagbank.png b/public/logos/pagbank.png
new file mode 100644
index 0000000..25e5485
Binary files /dev/null and b/public/logos/pagbank.png differ
diff --git a/public/logos/pagseguro.png b/public/logos/pagseguro.png
new file mode 100644
index 0000000..bf4cb1f
Binary files /dev/null and b/public/logos/pagseguro.png differ
diff --git a/public/logos/paypal.png b/public/logos/paypal.png
new file mode 100644
index 0000000..c1afad3
Binary files /dev/null and b/public/logos/paypal.png differ
diff --git a/public/logos/petrobras.png b/public/logos/petrobras.png
new file mode 100644
index 0000000..7a1f85c
Binary files /dev/null and b/public/logos/petrobras.png differ
diff --git a/public/logos/picpay.png b/public/logos/picpay.png
new file mode 100644
index 0000000..30ac9d5
Binary files /dev/null and b/public/logos/picpay.png differ
diff --git a/public/logos/pix.png b/public/logos/pix.png
new file mode 100644
index 0000000..33fcb09
Binary files /dev/null and b/public/logos/pix.png differ
diff --git a/public/logos/recargapay.png b/public/logos/recargapay.png
new file mode 100644
index 0000000..ef0c74a
Binary files /dev/null and b/public/logos/recargapay.png differ
diff --git a/public/logos/renner.png b/public/logos/renner.png
new file mode 100644
index 0000000..1086583
Binary files /dev/null and b/public/logos/renner.png differ
diff --git a/public/logos/safra.png b/public/logos/safra.png
new file mode 100644
index 0000000..48e054f
Binary files /dev/null and b/public/logos/safra.png differ
diff --git a/public/logos/samsung.png b/public/logos/samsung.png
new file mode 100644
index 0000000..bd09b01
Binary files /dev/null and b/public/logos/samsung.png differ
diff --git a/public/logos/santander-private.png b/public/logos/santander-private.png
new file mode 100644
index 0000000..5e81e54
Binary files /dev/null and b/public/logos/santander-private.png differ
diff --git a/public/logos/santander.png b/public/logos/santander.png
new file mode 100644
index 0000000..1b52dda
Binary files /dev/null and b/public/logos/santander.png differ
diff --git a/public/logos/sofisadireto.png b/public/logos/sofisadireto.png
new file mode 100644
index 0000000..9d2c67c
Binary files /dev/null and b/public/logos/sofisadireto.png differ
diff --git a/public/logos/stone.png b/public/logos/stone.png
new file mode 100644
index 0000000..7112154
Binary files /dev/null and b/public/logos/stone.png differ
diff --git a/public/logos/uber.drive.png b/public/logos/uber.drive.png
new file mode 100644
index 0000000..c599037
Binary files /dev/null and b/public/logos/uber.drive.png differ
diff --git a/public/logos/visa.png b/public/logos/visa.png
new file mode 100644
index 0000000..c65030c
Binary files /dev/null and b/public/logos/visa.png differ
diff --git a/public/logos/vr.png b/public/logos/vr.png
new file mode 100644
index 0000000..c0b07c6
Binary files /dev/null and b/public/logos/vr.png differ
diff --git a/public/logos/vuon.png b/public/logos/vuon.png
new file mode 100644
index 0000000..5891d02
Binary files /dev/null and b/public/logos/vuon.png differ
diff --git a/public/logos/xp.png b/public/logos/xp.png
new file mode 100644
index 0000000..7c14669
Binary files /dev/null and b/public/logos/xp.png differ
diff --git a/public/providers/chatgpt.svg b/public/providers/chatgpt.svg
new file mode 100644
index 0000000..cbcae72
--- /dev/null
+++ b/public/providers/chatgpt.svg
@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M28.1536 13.4602C28.7974 11.5536 28.5757 9.46491 27.5462 7.73063C25.9979 5.07057 22.8853 3.70204 19.8455 4.34605C18.4931 2.84277 16.5502 1.98788 14.5133 2.00013C11.406 1.99313 8.64905 3.96717 7.69311 6.88448C5.69698 7.28787 3.97398 8.52077 2.96571 10.2682C1.40588 12.9212 1.76148 16.2656 3.84539 18.5406C3.2016 20.4473 3.42329 22.5359 4.45283 24.2702C6.00114 26.9303 9.11372 28.2988 12.1536 27.6548C13.505 29.1581 15.4488 30.013 17.4857 29.9999C20.5948 30.0077 23.3526 28.0319 24.3086 25.112C26.3047 24.7086 28.0277 23.4757 29.036 21.7283C30.594 19.0752 30.2376 15.7335 28.1545 13.4585L28.1536 13.4602ZM17.4875 28.1702C16.2434 28.1719 15.0383 27.7423 14.0832 26.9557C14.1266 26.9329 14.202 26.8918 14.2508 26.862L19.9013 23.642C20.1904 23.4801 20.3678 23.1765 20.366 22.8483V14.988L22.7541 16.3487C22.7798 16.3609 22.7966 16.3854 22.8002 16.4134V22.9227C22.7966 25.8173 20.421 28.1641 17.4875 28.1702ZM6.06233 23.355C5.43893 22.2927 5.21457 21.0475 5.42829 19.8391C5.46996 19.8636 5.54357 19.9083 5.59589 19.938L11.2464 23.1581C11.5328 23.3235 11.8875 23.3235 12.1749 23.1581L19.0731 19.2275V21.9488C19.0748 21.9768 19.0615 22.0039 19.0394 22.0214L13.3277 25.2756C10.7835 26.7212 7.53437 25.8619 6.06321 23.355H6.06233ZM4.57521 11.1843C5.19595 10.1203 6.17584 9.30654 7.34283 8.8839C7.34283 8.93203 7.34017 9.01691 7.34017 9.07641V15.5174C7.3384 15.8447 7.51575 16.1483 7.80395 16.3102L14.7022 20.2399L12.3141 21.6005C12.2901 21.6163 12.26 21.6189 12.2334 21.6075L6.52079 18.3507C3.98196 16.8999 3.11115 13.6948 4.57432 11.1852L4.57521 11.1843ZM24.196 15.6898L17.2978 11.7592L19.6858 10.3994C19.7098 10.3837 19.7399 10.3811 19.7665 10.3924L25.4791 13.6466C28.0224 15.0965 28.8941 18.307 27.4247 20.8165C26.8031 21.8788 25.8241 22.6926 24.658 23.1161V16.4826C24.6606 16.1553 24.4842 15.8526 24.1969 15.6898H24.196ZM26.5725 12.16C26.5308 12.1346 26.4572 12.0908 26.4049 12.0611L20.7544 8.84103C20.468 8.67565 20.1133 8.67565 19.8259 8.84103L12.9277 12.7716V10.0503C12.926 10.0223 12.9393 9.99518 12.9614 9.97768L18.6731 6.72611C21.2173 5.27795 24.47 6.13984 25.9367 8.65115C26.5566 9.71167 26.7809 10.9533 26.5707 12.16H26.5725ZM11.6295 17.0102L9.24052 15.6495C9.21481 15.6373 9.19796 15.6128 9.19441 15.5848V9.07553C9.19619 6.17747 11.5789 3.82892 14.5159 3.83067C15.7583 3.83067 16.9608 4.26118 17.9158 5.04519C17.8724 5.06795 17.7979 5.10907 17.7482 5.13882L12.0977 8.35889C11.8086 8.52077 11.6313 8.82353 11.633 9.15166L11.6295 17.0085V17.0102ZM12.9268 14.2504L15.9995 12.4995L19.0722 14.2495V17.7505L15.9995 19.5005L12.9268 17.7505V14.2504Z" fill="black"/>
+</svg>
diff --git a/public/providers/chatgpt_dark_mode.svg b/public/providers/chatgpt_dark_mode.svg
new file mode 100644
index 0000000..2634749
--- /dev/null
+++ b/public/providers/chatgpt_dark_mode.svg
@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M28.1536 13.4602C28.7974 11.5536 28.5757 9.46491 27.5462 7.73063C25.9979 5.07057 22.8853 3.70204 19.8455 4.34605C18.4931 2.84277 16.5502 1.98788 14.5133 2.00013C11.406 1.99313 8.64905 3.96717 7.69311 6.88448C5.69698 7.28787 3.97398 8.52077 2.96571 10.2682C1.40588 12.9212 1.76148 16.2656 3.84539 18.5406C3.2016 20.4473 3.42329 22.5359 4.45283 24.2702C6.00114 26.9303 9.11372 28.2988 12.1536 27.6548C13.505 29.1581 15.4488 30.013 17.4857 29.9999C20.5948 30.0077 23.3526 28.0319 24.3086 25.112C26.3047 24.7086 28.0277 23.4757 29.036 21.7283C30.594 19.0752 30.2376 15.7335 28.1545 13.4585L28.1536 13.4602ZM17.4875 28.1702C16.2434 28.1719 15.0383 27.7423 14.0832 26.9557C14.1266 26.9329 14.202 26.8918 14.2508 26.862L19.9013 23.642C20.1904 23.4801 20.3678 23.1765 20.366 22.8483V14.988L22.7541 16.3487C22.7798 16.3609 22.7966 16.3854 22.8002 16.4134V22.9227C22.7966 25.8173 20.421 28.1641 17.4875 28.1702ZM6.06233 23.355C5.43893 22.2927 5.21457 21.0475 5.42829 19.8391C5.46996 19.8636 5.54357 19.9083 5.59589 19.938L11.2464 23.1581C11.5328 23.3235 11.8875 23.3235 12.1749 23.1581L19.0731 19.2275V21.9488C19.0748 21.9768 19.0615 22.0039 19.0394 22.0214L13.3277 25.2756C10.7835 26.7212 7.53437 25.8619 6.06321 23.355H6.06233ZM4.57521 11.1843C5.19595 10.1203 6.17584 9.30654 7.34283 8.8839C7.34283 8.93203 7.34017 9.01691 7.34017 9.07641V15.5174C7.3384 15.8447 7.51575 16.1483 7.80395 16.3102L14.7022 20.2399L12.3141 21.6005C12.2901 21.6163 12.26 21.6189 12.2334 21.6075L6.52079 18.3507C3.98196 16.8999 3.11115 13.6948 4.57432 11.1852L4.57521 11.1843ZM24.196 15.6898L17.2978 11.7592L19.6858 10.3994C19.7098 10.3837 19.7399 10.3811 19.7665 10.3924L25.4791 13.6466C28.0224 15.0965 28.8941 18.307 27.4247 20.8165C26.8031 21.8788 25.8241 22.6926 24.658 23.1161V16.4826C24.6606 16.1553 24.4842 15.8526 24.1969 15.6898H24.196ZM26.5725 12.16C26.5308 12.1346 26.4572 12.0908 26.4049 12.0611L20.7544 8.84103C20.468 8.67565 20.1133 8.67565 19.8259 8.84103L12.9277 12.7716V10.0503C12.926 10.0223 12.9393 9.99518 12.9614 9.97768L18.6731 6.72611C21.2173 5.27795 24.47 6.13984 25.9367 8.65115C26.5566 9.71167 26.7809 10.9533 26.5707 12.16H26.5725ZM11.6295 17.0102L9.24052 15.6495C9.21481 15.6373 9.19796 15.6128 9.19441 15.5848V9.07553C9.19619 6.17747 11.5789 3.82892 14.5159 3.83067C15.7583 3.83067 16.9608 4.26118 17.9158 5.04519C17.8724 5.06795 17.7979 5.10907 17.7482 5.13882L12.0977 8.35889C11.8086 8.52077 11.6313 8.82353 11.633 9.15166L11.6295 17.0085V17.0102ZM12.9268 14.2504L15.9995 12.4995L19.0722 14.2495V17.7505L15.9995 19.5005L12.9268 17.7505V14.2504Z" fill="white"/>
+</svg>
diff --git a/public/providers/claude.svg b/public/providers/claude.svg
new file mode 100644
index 0000000..7158935
--- /dev/null
+++ b/public/providers/claude.svg
@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.49261 20.6201L13.0022 17.5306L13.0949 17.2622L13.0022 17.113H12.7337L11.813 17.0563L8.66487 16.9713L5.93463 16.8579L3.28949 16.7162L2.62395 16.5744L2 15.7525L2.06429 15.3424L2.62395 14.9664L3.42562 15.0363L5.19725 15.1572L7.85563 15.3405L9.78419 15.4539L12.6411 15.7506H13.0949L13.1592 15.5673L13.0041 15.4539L12.8831 15.3405L10.1321 13.4774L7.15416 11.5084L5.5943 10.3747L4.75103 9.80024L4.32561 9.26171L4.14221 8.08638L4.90796 7.24362L5.93653 7.31354L6.19934 7.38345L7.24114 8.18464L9.46654 9.90606L12.3726 12.0451L12.798 12.3984L12.9682 12.2775L12.989 12.1925L12.798 11.8731L11.2174 9.01795L9.53083 6.11365L8.7802 4.90997L8.58167 4.18815C8.51172 3.89148 8.46067 3.64206 8.46067 3.33783L9.3323 2.15495L9.81444 2L10.9772 2.15495L11.4669 2.58011L12.1892 4.23161L13.3596 6.83169L15.1747 10.3671L15.706 11.4158L15.9896 12.3871L16.0955 12.6838H16.2789V12.5137L16.4283 10.5221L16.7043 8.07693L16.9728 4.93076L17.0654 4.04454L17.5041 2.98259L18.3757 2.40815L19.0564 2.73316L19.616 3.53435L19.5385 4.0521L19.2058 6.2138L18.5534 9.59995L18.128 11.8675H18.3757L18.6593 11.584L19.807 10.061L21.7356 7.65178L22.5864 6.69564L23.579 5.63936L24.2162 5.13673H25.4206L26.3074 6.45377L25.9103 7.81428L24.67 9.38642L23.6414 10.7186L22.1667 12.7027L21.2459 14.2899L21.3309 14.4165L21.5503 14.3957L24.8818 13.6871L26.6817 13.3621L28.8296 12.9937L29.8015 13.4472L29.9074 13.9082L29.5254 14.8511L27.2282 15.418L24.5339 15.9565L20.5217 16.9051L20.4726 16.941L20.5293 17.0109L22.3368 17.181L23.1101 17.2226H25.0028L28.5271 17.4852L29.4479 18.0937L30 18.8382L29.9074 19.4051L28.4893 20.1269L26.5759 19.6734L22.1099 18.6114L20.5784 18.2297H20.3667V18.3563L21.6429 19.6035L23.9818 21.7141L26.9105 24.4352L27.0599 25.1078L26.6836 25.6388L26.2866 25.5821L23.7133 23.6472L22.7206 22.7761L20.4726 20.8846H20.3232V21.083L20.8412 21.8407L23.5772 25.9506L23.719 27.211L23.5204 27.621L22.8114 27.8685L22.0324 27.7268L20.431 25.4801L18.7784 22.9499L17.4455 20.6824L17.2829 20.775L16.4963 29.2423L16.1276 29.675L15.2768 30L14.5678 29.4615L14.1915 28.5904L14.5678 26.8689L15.0215 24.6222L15.3902 22.8365L15.723 20.6182L15.9215 19.8812L15.9083 19.8321L15.7457 19.8529L14.0724 22.1487L11.5274 25.5859L9.51381 27.74L9.03167 27.9309L8.19596 27.4982L8.27348 26.7253L8.7405 26.0375L11.5274 22.4945L13.2083 20.2988L14.2936 19.0309L14.286 18.8476H14.2218L6.8195 23.651L5.50166 23.821L4.93443 23.2901L5.00439 22.419L5.27287 22.1355L7.49828 20.6049L7.49072 20.6125L7.49261 20.6201Z" fill="#D97757"/>
+</svg>
diff --git a/public/providers/gemini.svg b/public/providers/gemini.svg
new file mode 100644
index 0000000..5e2340e
--- /dev/null
+++ b/public/providers/gemini.svg
@@ -0,0 +1,10 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M30 16.028C26.3673 16.2509 22.9416 17.7945 20.3681 20.3681C17.7945 22.9416 16.2509 26.3673 16.028 30H15.972C15.7494 26.3672 14.2059 22.9412 11.6324 20.3676C9.05877 17.7941 5.63279 16.2506 2 16.028L2 15.972C5.63279 15.7494 9.05877 14.2059 11.6324 11.6324C14.2059 9.05877 15.7494 5.63279 15.972 2L16.028 2C16.2509 5.63266 17.7945 9.05843 20.3681 11.6319C22.9416 14.2055 26.3673 15.7491 30 15.972V16.028Z" fill="url(#paint0_radial_1_976)"/>
+<defs>
+<radialGradient id="paint0_radial_1_976" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(4.779 13.3802) rotate(18.6832) scale(29.8025 238.737)">
+<stop offset="0.067" stop-color="#9168C0"/>
+<stop offset="0.343" stop-color="#5684D1"/>
+<stop offset="0.672" stop-color="#1BA1E3"/>
+</radialGradient>
+</defs>
+</svg>
diff --git a/public/providers/openrouter_dark.svg b/public/providers/openrouter_dark.svg
new file mode 100644
index 0000000..8ba9bfc
--- /dev/null
+++ b/public/providers/openrouter_dark.svg
@@ -0,0 +1 @@
+<svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" fill="#ffff" stroke="#ffff"><g clip-path="url(#openrouter_dark__clip0_205_3)"><path d="M3 248.945C18 248.945 76 236 106 219C136 202 136 202 198 158C276.497 102.293 332 120.945 423 120.945" stroke-width="90"/><path d="M511 121.5L357.25 210.268L357.25 32.7324L511 121.5Z"/><path d="M0 249C15 249 73 261.945 103 278.945C133 295.945 133 295.945 195 339.945C273.497 395.652 329 377 420 377" stroke-width="90"/><path d="M508 376.445L354.25 287.678L354.25 465.213L508 376.445Z"/></g></svg>
\ No newline at end of file
diff --git a/public/providers/openrouter_light.svg b/public/providers/openrouter_light.svg
new file mode 100644
index 0000000..f668034
--- /dev/null
+++ b/public/providers/openrouter_light.svg
@@ -0,0 +1 @@
+<svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" fill="#111111" stroke="#111111"><g clip-path="url(#openrouter_light__clip0_205_3)"><path d="M3 248.945C18 248.945 76 236 106 219C136 202 136 202 198 158C276.497 102.293 332 120.945 423 120.945" stroke-width="90"/><path d="M511 121.5L357.25 210.268L357.25 32.7324L511 121.5Z"/><path d="M0 249C15 249 73 261.945 103 278.945C133 295.945 133 295.945 195 339.945C273.497 395.652 329 377 420 377" stroke-width="90"/><path d="M508 376.445L354.25 287.678L354.25 465.213L508 376.445Z"/></g></svg>
\ No newline at end of file
diff --git a/scripts/postgres/init.sql b/scripts/postgres/init.sql
new file mode 100644
index 0000000..ccf0688
--- /dev/null
+++ b/scripts/postgres/init.sql
@@ -0,0 +1,11 @@
+-- Script de inicialização do PostgreSQL para Docker
+-- Este script é executado automaticamente quando o banco é criado pela primeira vez
+
+-- Habilitar extensão pgcrypto (necessária para gen_random_bytes usado pelo Drizzle)
+CREATE EXTENSION IF NOT EXISTS pgcrypto;
+
+-- Log de sucesso
+DO $$
+BEGIN
+  RAISE NOTICE '✅ Extensão pgcrypto habilitada com sucesso';
+END $$;
diff --git a/scripts/setup-env.sh b/scripts/setup-env.sh
new file mode 100755
index 0000000..7b0340d
--- /dev/null
+++ b/scripts/setup-env.sh
@@ -0,0 +1,38 @@
+#!/bin/bash
+
+# Script para configurar ambiente de forma segura
+# Cria backup do .env atual antes de sobrescrever
+
+set -e
+
+echo "🔧 Configurando ambiente..."
+
+# Se .env já existe, criar backup
+if [ -f .env ]; then
+  BACKUP_FILE=".env.backup.$(date +%Y%m%d_%H%M%S)"
+  echo "⚠️  Arquivo .env existente detectado!"
+  echo "📦 Criando backup em: $BACKUP_FILE"
+  cp .env "$BACKUP_FILE"
+  echo "✅ Backup criado com sucesso!"
+  echo ""
+  read -p "Deseja sobrescrever o .env atual com .env.example? (s/N) " -n 1 -r
+  echo
+  if [[ ! $REPLY =~ ^[Ss]$ ]]; then
+    echo "❌ Operação cancelada. Seu .env não foi modificado."
+    exit 0
+  fi
+fi
+
+# Copiar .env.example para .env
+if [ -f .env.example ]; then
+  cp .env.example .env
+  echo "✅ Arquivo .env criado a partir de .env.example"
+  echo ""
+  echo "⚠️  IMPORTANTE: Edite o arquivo .env e configure:"
+  echo "   - DATABASE_URL"
+  echo "   - BETTER_AUTH_SECRET (gere com: openssl rand -base64 32)"
+  echo "   - Outras variáveis necessárias"
+else
+  echo "❌ Erro: .env.example não encontrado!"
+  exit 1
+fi
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..e7ff3a2
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,41 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}