Merge pull request 'fix: edit-report' (#84) from hotfix/edit-report into main

Reviewed-on: RiseUP/riseup-squad20#84

.gitignore

@@ -0,0 +1,3 @@
+node_modules/
+
+.vercel

README.md

@@ -1,2 +1,379 @@
-# riseup-squad20
+<div align="center">
 
+# 🏥 MEDIConnect
+
+### Plataforma de Gestão de Saúde Inteligente
+
+*Combatendo o absenteísmo em clínicas e hospitais através de tecnologia e inovação*
+
+[![Next.js](https://img.shields.io/badge/Next.js_15-000000?style=flat&logo=next.js&logoColor=white)](https://nextjs.org/)
+[![TypeScript](https://img.shields.io/badge/TypeScript-2B7FFF?style=flat&logo=typescript&logoColor=white)](https://www.typescriptlang.org/)
+[![React](https://img.shields.io/badge/React_19-2B7FFF?style=flat&logo=react&logoColor=white)](https://react.dev/)
+[![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-2B7FFF?style=flat&logo=tailwind-css&logoColor=white)](https://tailwindcss.com/)
+[![Supabase](https://img.shields.io/badge/Supabase-2B7FFF?style=flat&logo=supabase&logoColor=white)](https://supabase.com/)
+
+</div>
+
+---
+
+## Índice
+
+1. [Visão Geral](#-visão-geral)
+2. [Problema e Solução](#-problema-e-solução)
+3. [Funcionalidades](#-funcionalidades)
+4. [Tecnologias](#️-tecnologias)
+5. [Instalação](#-instalação)
+6. [Como Usar](#-como-usar)
+7. [Fluxos de Usuário](#-fluxos-de-usuário)
+8. [Componentes Principais](#-componentes-principais)
+9. [Contribuindo](#-contribuindo)
+10. [Licença](#-licença)
+11. [Contato](#-contato)
+
+---
+
+## Visão Geral
+
+**MEDIConnect** é uma plataforma web moderna e intuitiva desenvolvida para revolucionar a gestão de saúde em clínicas e hospitais. Com foco na redução do absenteísmo (faltas em consultas), a plataforma oferece uma experiência completa para pacientes, profissionais de saúde e administradores.
+
+### Diferenciais
+
+- **Zoe IA Assistant**: Assistente virtual inteligente para suporte aos usuários
+- **Interface Responsiva**: Design moderno e adaptável a qualquer dispositivo
+- **Autenticação Segura**: Sistema robusto com perfis diferenciados
+- **Performance**: Construído com Next.js 15 para máxima velocidade
+- **UX/UI Premium**: Interface limpa e profissional voltada para área da saúde
+
+---
+
+## Problema e Solução
+
+### O Problema
+O **absenteísmo** (não comparecimento a consultas agendadas) é um problema crítico em clínicas e hospitais, causando:
+- Desperdício de tempo dos profissionais
+- Perda de receita para estabelecimentos
+- Redução da eficiência operacional
+- Impacto negativo no atendimento de outros pacientes
+
+### Nossa Solução
+MEDIConnect oferece um sistema inteligente de gestão que:
+- Facilita o agendamento e reagendamento de consultas
+- Permite visualização clara da agenda para profissionais
+- Oferece assistência via IA para dúvidas e suporte
+
+---
+
+## Funcionalidades
+
+### Para Pacientes
+- **Dashboard Personalizado**: Visão geral de consultas e exames
+- **Agendamento**: Sistema fácil de marcar consultas
+- **Resultados de Exames**: Acesso seguro a laudos e resultados
+- **Busca de Profissionais**: Encontre médicos por especialidade
+- **Zoe IA Assistant**: Tire dúvidas 24/7 com nossa assistente virtual
+
+### Para Profissionais
+- **Dashboard Profissional**: Visão completa de atendimentos
+- **Editor de Laudos**: Crie e edite laudos médicos de forma rápida
+- **Gestão de Pacientes**: Acesse informações dos pacientes
+- **Agenda**: Visualização clara de consultas
+
+### Para Administradores
+- **Dashboard Administrativo**: Métricas e estatísticas em tempo real
+- **Relatórios Detalhados**: Análise de comparecimento e absenteísmo
+- **Gestão Completa**: Gerencie pacientes, profissionais e agendamentos
+- **Painel de Controle**: Visão 360° da operação da clínica
+
+---
+
+## Tecnologias
+
+### Frontend (Atual)
+- **[Next.js 15](https://nextjs.org/)** - Framework React com Server Components
+- **[React 19](https://react.dev/)** - Biblioteca JavaScript para interfaces
+- **[TypeScript](https://www.typescriptlang.org/)** - Tipagem estática para JavaScript
+- **[Tailwind CSS](https://tailwindcss.com/)** - Framework CSS utilitário
+- **[Shadcn/ui](https://ui.shadcn.com/)** - Componentes UI reutilizáveis
+- **[React Hook Form](https://react-hook-form.com/)** - Gerenciamento de formulários
+- **[Zod](https://zod.dev/)** - Validação de schemas
+- **[date-fns](https://date-fns.org/)** - Manipulação de datas
+
+### Backend (Integrado)
+- **[Supabase](https://supabase.com/)** - Backend as a Service (PostgreSQL)
+- **Authentication** - Sistema de autenticação completo
+- **Storage** - Armazenamento de arquivos e documentos
+- **REST API** - Endpoints integrados para todas as funcionalidades
+
+### Ferramentas de Desenvolvimento
+- **[ESLint](https://eslint.org/)** - Linter para código JavaScript/TypeScript
+- **[PostCSS](https://postcss.org/)** - Transformação de CSS
+- **[Autoprefixer](https://github.com/postcss/autoprefixer)** - Prefixos CSS automáticos
+
+---
+
+## Instalação
+
+### Pré-requisitos
+
+Certifique-se de ter instalado:
+
+- **Node.js** 18.17 ou superior
+- **npm**
+- **Git**
+
+### Passo a Passo
+
+1. **Clone o repositório**
+
+```bash
+git clone https://git.popcode.com.br/RiseUP/riseup-squad20.git
+cd susconecta
+```
+
+2. **Instale as dependências**
+
+```bash
+npm install
+```
+
+3. **Configuração de ambiente (desenvolvimento)**
+
+> Observação: o projeto possui valores _fallback_ em `susconecta/lib/env-config.ts`, mas o recomendado é criar um arquivo `.env.local` não versionado com suas credenciais locais.
+
+```env
+# Supabase
+NEXT_PUBLIC_SUPABASE_URL=https://seu-projeto.supabase.co
+NEXT_PUBLIC_SUPABASE_ANON_KEY=pk_... (anon key)
+
+# Aplicação
+NEXT_PUBLIC_APP_URL=http://localhost:3000
+NEXT_PUBLIC_API_URL=http://localhost:3000/api
+```
+
+**Boas práticas de segurança**
+- Nunca exponha a `service_role` key no frontend.
+- Proteja operações sensíveis com Row-Level Security (RLS) no Supabase ou mova-as para rotas/Edge Functions server-side.
+- Não commite `.env.local` no repositório (adicione ao `.gitignore`).
+
+4. **Inicie o servidor de desenvolvimento**
+
+```bash
+npm run dev
+```
+
+5. **Acesse a aplicação**
+
+Abra [http://localhost:3000](http://localhost:3000) no seu navegador.
+
+---
+
+## Como Usar
+
+### Navegação Principal
+
+#### Página Inicial
+Acesse `/home` para conhecer a plataforma e suas funcionalidades.
+
+#### Autenticação
+O sistema possui três níveis de acesso:
+
+- **Pacientes**: `/login-paciente`
+- **Profissionais**: `/login-profissional`
+- **Administradores**: `/login-admin`
+
+#### Funcionalidades por Perfil
+
+**Como Paciente:**
+1. Faça login em `/login-paciente`
+2. Acesse seu dashboard em `/paciente`
+3. Agende consultas em `/consultas`
+4. Visualize resultados em `/paciente/resultados`
+5. Gerencie seu perfil em `/perfil`
+
+**Como Profissional:**
+1. Faça login em `/login-profissional`
+2. Acesse seu dashboard em `/profissional`
+3. Gerencie sua agenda em `/agenda`
+4. Crie laudos em `/laudos-editor`
+5. Visualize pacientes em `/pacientes`
+
+**Como Administrador:**
+1. Faça login em `/login-admin`
+2. Acesse o painel em `/dashboard`
+3. Visualize relatórios em `/dashboard/relatorios`
+4. Gerencie o sistema completo
+
+---
+
+## Fluxos de Usuário
+
+### Fluxo de Agendamento (Paciente)
+
+```mermaid
+graph LR
+A[Login Paciente] --> B[Dashboard]
+B --> C[Buscar Médico]
+C --> D[Selecionar Especialidade]
+D --> E[Escolher Horário]
+E --> F[Confirmar Agendamento]
+F --> G[Receber Confirmação]
+```
+
+### Fluxo de Atendimento (Profissional)
+
+```mermaid
+graph LR
+A[Login Profissional] --> B[Ver Agenda]
+B --> C[Realizar Consulta]
+C --> D[Criar Laudo]
+D --> E[Enviar para Paciente]
+E --> F[Atualizar Status]
+```
+
+### Fluxo Administrativo
+
+```mermaid
+graph LR
+A[Login Admin] --> B[Dashboard]
+B --> C[Visualizar Métricas]
+C --> D[Gerar Relatórios]
+D --> E[Analisar Absenteísmo]
+E --> F[Tomar Decisões]
+```
+
+---
+
+## Componentes Principais
+
+### Zoe IA Assistant
+
+Assistente virtual inteligente que oferece:
+- Suporte 24/7 aos usuários
+- Respostas a dúvidas frequentes
+- Upload de arquivos para análise
+- Interação por voz
+
+**Arquivos:**
+- `components/ZoeIA/ai-assistant-interface.tsx`
+- `components/ZoeIA/voice-powered-orb.tsx`
+- `components/ZoeIA/demo.tsx`
+
+### Sistema de Agendamento
+
+Gerenciamento completo de consultas e exames:
+- Calendário interativo
+- Seleção de horários disponíveis
+- Confirmação automática
+- Lembretes e notificações
+
+**Arquivos:**
+- `components/features/agendamento/`
+- `components/features/Calendario/`
+- `app/(main-routes)/consultas/`
+
+### Editor de Laudos
+
+Ferramenta profissional para criação de laudos médicos:
+- Interface intuitiva
+- Frases pré-definidas
+- Exportação em PDF
+
+**Arquivos:**
+- `app/laudos-editor/`
+- `lib/laudo-exemplos.ts`
+- `lib/laudo-notification.ts`
+
+### Dashboard Analytics
+
+Painéis administrativos com:
+- Métricas em tempo real
+- Gráficos interativos
+- Relatórios de absenteísmo
+- Análise de desempenho
+
+**Arquivos:**
+- `components/features/dashboard/`
+- `app/(main-routes)/dashboard/`
+- `lib/reportService.ts`
+
+---
+
+## Contribuindo
+
+Contribuições são bem-vindas! Siga estes passos:
+
+### 1. Fork o projeto
+
+Clique no botão "Fork" no topo da página.
+
+### 2. Clone seu fork
+
+```bash
+git clone https://git.popcode.com.br/RiseUP/riseup-squad20.git
+cd susconecta
+```
+
+### 3. Crie uma branch
+
+```bash
+git checkout -b feature/nova-funcionalidade
+```
+
+### 4. Faça suas alterações
+
+Desenvolva sua funcionalidade seguindo os padrões do projeto.
+
+### 5. Commit suas mudanças
+
+```bash
+git add .
+git commit -m "feat: adiciona nova funcionalidade X"
+```
+
+**Padrão de commits:**
+- `feat:` Nova funcionalidade
+- `fix:` Correção de bug
+- `docs:` Documentação
+- `style:` Formatação
+- `refactor:` Refatoração
+- `test:` Testes
+- `chore:` Manutenção
+
+### 6. Push para seu fork
+
+```bash
+git push origin feature/nova-funcionalidade
+```
+
+### 7. Abra um Pull Request
+
+Descreva suas mudanças detalhadamente.
+
+---
+
+## Licença
+
+Este projeto está sob a licença **MIT**. Veja o arquivo [LICENSE](LICENSE) para mais detalhes.
+
+## Contato
+
+**MEDIConnect Team**
+
+- Website: [mediconnect.com](https://mediconecta-app-liart.vercel.app/)
+- Email dos Desenvolvedores:  
+    - [Jonas Francisco](mailto:jonastom478@gmail.com)
+    - [João Gustavo](mailto:jgcmendonca@gmail.com)
+    - [Maria Gabrielly](mailto:maria.gabrielly221106@gmail.com)
+    - [Pedro Gomes](mailto:pedrogomes5913@gmail.com)
+
+---
+
+<div align="center">
+
+**Desenvolvido pelo squad 20**
+
+*Transformando a gestão de saúde através da tecnologia*
+
+[![Next.js](https://img.shields.io/badge/Powered%20by-Next.js-black?style=for-the-badge&logo=next.js)](https://nextjs.org/)
+
+</div>

crude/.vscode/commander.json

@@ -1,12 +0,0 @@
-{
-    "packageProcessor": "npm",
-    "commands": {
-        "Sample command": {
-            "description": "Sample command to be modified",
-            "command": "echo 'Hello World !'",
-            "environment": {
-                "sample-variable": "foobar"
-            }
-        }
-    }
-}

crude/app/globals.css

@@ -1,780 +0,0 @@
-@import "tailwindcss";
-@import "tw-animate-css";
-
-@custom-variant dark (&:is(.dark *));
-
-:root {
-  --medical-blue: #1e40af;
-  --medical-blue-light: #3b82f6;
-  --medical-green: #059669;
-  --medical-green-light: #10b981;
-  --medical-red: #dc2626;
-  --medical-orange: #ea580c;
-  --clinical-white: #ffffff;
-  --clinical-gray-50: #f9fafb;
-  --clinical-gray-100: #f3f4f6;
-  --clinical-gray-200: #e5e7eb;
-  --clinical-gray-300: #d1d5db;
-  --clinical-gray-400: #9ca3af;
-  --clinical-gray-500: #6b7280;
-  --clinical-gray-600: #4b5563;
-  --clinical-gray-700: #374151;
-  --clinical-gray-800: #1f2937;
-  --clinical-gray-900: #111827;
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
-  --destructive-foreground: oklch(0.577 0.245 27.325);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --radius: 0.625rem;
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
-}
-
-.dark {
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.145 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.145 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.985 0 0);
-  --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.269 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.269 0 0);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.396 0.141 25.723);
-  --destructive-foreground: oklch(0.637 0.237 25.331);
-  --border: oklch(0.269 0 0);
-  --input: oklch(0.269 0 0);
-  --ring: oklch(0.439 0 0);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.205 0 0);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(0.269 0 0);
-  --sidebar-ring: oklch(0.439 0 0);
-}
-
-@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);
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-  --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);
-}
-
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
-
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-body {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Inter", sans-serif;
-  background: var(--clinical-gray-50);
-  color: var(--clinical-gray-900);
-  line-height: 1.5;
-  font-size: 14px;
-}
-
-.medical-system {
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-}
-
-.system-header {
-  background: var(--clinical-white);
-  border-bottom: 1px solid var(--clinical-gray-200);
-  padding: 0.75rem 1.5rem;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-  position: sticky;
-  top: 0;
-  z-index: 100;
-}
-
-.header-brand {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-}
-
-.brand-icon {
-  width: 32px;
-  height: 32px;
-  background: linear-gradient(135deg, var(--medical-blue) 0%, var(--medical-blue-light) 100%);
-  border-radius: 6px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: white;
-}
-
-.brand-text h1 {
-  font-size: 1.25rem;
-  font-weight: 700;
-  color: var(--clinical-gray-900);
-  line-height: 1.2;
-}
-
-.brand-text p {
-  font-size: 0.75rem;
-  color: var(--clinical-gray-500);
-  font-weight: 500;
-}
-
-.header-actions {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-}
-
-.user-info {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.5rem 0.75rem;
-  background: var(--clinical-gray-100);
-  border-radius: 6px;
-  font-size: 0.8rem;
-  color: var(--clinical-gray-700);
-}
-
-.main-content {
-  flex: 1;
-  padding: 1.5rem;
-  max-width: 1400px;
-  margin: 0 auto;
-  width: 100%;
-}
-
-.quick-stats {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 1rem;
-  margin-bottom: 1.5rem;
-}
-
-.stat-card {
-  background: var(--clinical-white);
-  border: 1px solid var(--clinical-gray-200);
-  border-radius: 8px;
-  padding: 1rem;
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  transition: all 0.2s ease;
-  position: relative;
-  overflow: hidden;
-}
-
-.stat-card::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 3px;
-  background: var(--accent-color);
-}
-
-.stat-card:hover {
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-  transform: translateY(-1px);
-}
-
-.stat-card.patients::before {
-  --accent-color: var(--medical-blue);
-}
-.stat-card.appointments::before {
-  --accent-color: var(--medical-green);
-}
-.stat-card.contacts::before {
-  --accent-color: var(--medical-orange);
-}
-.stat-card.recent::before {
-  --accent-color: var(--medical-red);
-}
-
-.stat-icon {
-  width: 40px;
-  height: 40px;
-  border-radius: 6px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--icon-bg);
-  color: var(--icon-color);
-}
-
-.stat-card.patients .stat-icon {
-  --icon-bg: #dbeafe;
-  --icon-color: var(--medical-blue);
-}
-.stat-card.appointments .stat-icon {
-  --icon-bg: #d1fae5;
-  --icon-color: var(--medical-green);
-}
-.stat-card.contacts .stat-icon {
-  --icon-bg: #fed7aa;
-  --icon-color: var(--medical-orange);
-}
-.stat-card.recent .stat-icon {
-  --icon-bg: #fecaca;
-  --icon-color: var(--medical-red);
-}
-
-.stat-content h3 {
-  font-size: 1.5rem;
-  font-weight: 700;
-  color: var(--clinical-gray-900);
-  line-height: 1;
-  margin-bottom: 0.25rem;
-}
-
-.stat-content p {
-  font-size: 0.8rem;
-  color: var(--clinical-gray-600);
-  font-weight: 500;
-}
-
-.control-panel {
-  background: var(--clinical-white);
-  border: 1px solid var(--clinical-gray-200);
-  border-radius: 8px;
-  padding: 1rem 1.25rem;
-  margin-bottom: 1.5rem;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.panel-title {
-  font-size: 1.1rem;
-  font-weight: 600;
-  color: var(--clinical-gray-900);
-}
-
-.add-patient-btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-  background: var(--medical-blue);
-  color: white;
-  border: none;
-  border-radius: 6px;
-  padding: 0.6rem 1rem;
-  font-size: 0.85rem;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-.add-patient-btn:hover {
-  background: var(--medical-blue-light);
-  transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgba(30, 64, 175, 0.3);
-}
-
-.patients-section {
-  background: var(--clinical-white);
-  border: 1px solid var(--clinical-gray-200);
-  border-radius: 8px;
-  overflow: hidden;
-}
-
-.section-header {
-  padding: 1rem 1.25rem;
-  border-bottom: 1px solid var(--clinical-gray-200);
-  background: var(--clinical-gray-50);
-}
-
-.section-title {
-  font-size: 1rem;
-  font-weight: 600;
-  color: var(--clinical-gray-900);
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.patient-count {
-  background: var(--medical-blue);
-  color: white;
-  padding: 0.2rem 0.5rem;
-  border-radius: 12px;
-  font-size: 0.75rem;
-  font-weight: 600;
-}
-
-.table-wrapper {
-  overflow-x: auto;
-}
-
-.patients-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 0.85rem;
-}
-
-.patients-table th {
-  background: var(--clinical-gray-50);
-  color: var(--clinical-gray-700);
-  font-weight: 600;
-  text-align: left;
-  padding: 0.75rem 1rem;
-  border-bottom: 1px solid var(--clinical-gray-200);
-  font-size: 0.8rem;
-  text-transform: uppercase;
-  letter-spacing: 0.025em;
-}
-
-.patients-table td {
-  padding: 0.75rem 1rem;
-  border-bottom: 1px solid var(--clinical-gray-100);
-  color: var(--clinical-gray-900);
-  vertical-align: middle;
-}
-
-.patients-table tr:hover {
-  background: var(--clinical-gray-50);
-}
-
-.patient-name {
-  font-weight: 600;
-  color: var(--clinical-gray-900);
-}
-
-.patient-id {
-  font-size: 0.75rem;
-  color: var(--clinical-gray-500);
-  font-family: monospace;
-}
-
-.contact-info {
-  display: flex;
-  flex-direction: column;
-  gap: 0.1rem;
-}
-
-.phone-number {
-  font-weight: 500;
-}
-
-.location-info {
-  font-size: 0.8rem;
-  color: var(--clinical-gray-600);
-}
-
-.date-info {
-  font-size: 0.8rem;
-  font-weight: 500;
-}
-
-.date-label {
-  font-size: 0.7rem;
-  color: var(--clinical-gray-500);
-  text-transform: uppercase;
-  letter-spacing: 0.025em;
-}
-
-.action-buttons {
-  display: flex;
-  gap: 0.25rem;
-}
-
-.action-btn {
-  width: 28px;
-  height: 28px;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.2s ease;
-}
-
-.edit-btn {
-  background: #dbeafe;
-  color: var(--medical-blue);
-}
-
-.edit-btn:hover {
-  background: var(--medical-blue);
-  color: white;
-}
-
-.delete-btn {
-  background: #fecaca;
-  color: var(--medical-red);
-}
-
-.delete-btn:hover {
-  background: var(--medical-red);
-  color: white;
-}
-
-.modal-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
-  backdrop-filter: blur(4px);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-  padding: 1rem;
-}
-
-.modal-content {
-  background: var(--clinical-white);
-  border-radius: 12px;
-  width: 100%;
-  max-width: 500px;
-  max-height: 90vh;
-  overflow-y: auto;
-  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
-}
-
-.modal-header {
-  padding: 1.25rem 1.5rem 1rem;
-  border-bottom: 1px solid var(--clinical-gray-200);
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-}
-
-.modal-header h2 {
-  font-size: 1.1rem;
-  font-weight: 600;
-  color: var(--clinical-gray-900);
-}
-
-.modal-body {
-  padding: 1.5rem;
-}
-
-.form-grid {
-  display: grid;
-  gap: 1rem;
-  margin-bottom: 1.5rem;
-}
-
-.form-group {
-  display: flex;
-  flex-direction: column;
-  gap: 0.4rem;
-}
-
-.form-label {
-  font-size: 0.8rem;
-  font-weight: 600;
-  color: var(--clinical-gray-700);
-  text-transform: uppercase;
-  letter-spacing: 0.025em;
-}
-
-.form-input {
-  padding: 0.6rem 0.75rem;
-  border: 1px solid var(--clinical-gray-300);
-  border-radius: 6px;
-  background: var(--clinical-white);
-  color: var(--clinical-gray-900);
-  font-size: 0.85rem;
-  transition: all 0.2s ease;
-}
-
-.form-input:focus {
-  outline: none;
-  border-color: var(--medical-blue);
-  box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);
-}
-
-.form-input::placeholder {
-  color: var(--clinical-gray-400);
-}
-
-.form-actions {
-  display: flex;
-  gap: 0.75rem;
-  justify-content: flex-end;
-  padding-top: 1rem;
-  border-top: 1px solid var(--clinical-gray-200);
-}
-
-.save-btn {
-  background: var(--medical-green);
-  color: white;
-  border: none;
-  border-radius: 6px;
-  padding: 0.6rem 1.25rem;
-  font-size: 0.85rem;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-.save-btn:hover {
-  background: var(--medical-green-light);
-  transform: translateY(-1px);
-}
-
-.cancel-btn {
-  background: var(--clinical-gray-100);
-  color: var(--clinical-gray-700);
-  border: 1px solid var(--clinical-gray-300);
-  border-radius: 6px;
-  padding: 0.6rem 1.25rem;
-  font-size: 0.85rem;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-.cancel-btn:hover {
-  background: var(--clinical-gray-200);
-}
-
-.empty-state {
-  text-align: center;
-  padding: 3rem 2rem;
-  color: var(--clinical-gray-500);
-}
-
-.empty-icon {
-  width: 64px;
-  height: 64px;
-  margin: 0 auto 1rem;
-  opacity: 0.5;
-  color: var(--clinical-gray-400);
-}
-
-.empty-title {
-  font-size: 1.1rem;
-  font-weight: 600;
-  margin-bottom: 0.5rem;
-  color: var(--clinical-gray-700);
-}
-
-.empty-description {
-  font-size: 0.9rem;
-  color: var(--clinical-gray-500);
-}
-
-.toast-container {
-  position: fixed;
-  top: 1rem;
-  right: 1rem;
-  z-index: 1100;
-}
-
-.toast {
-  background: var(--clinical-white);
-  border: 1px solid var(--clinical-gray-200);
-  border-radius: 8px;
-  padding: 0.75rem 1rem;
-  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  min-width: 280px;
-  animation: slideIn 0.3s ease;
-  border-left: 4px solid var(--toast-color);
-}
-
-.toast.success {
-  --toast-color: var(--medical-green);
-}
-.toast.error {
-  --toast-color: var(--medical-red);
-}
-.toast.info {
-  --toast-color: var(--medical-blue);
-}
-
-.toast-message {
-  color: var(--clinical-gray-900);
-  font-size: 0.85rem;
-  font-weight: 500;
-}
-
-@keyframes slideIn {
-  from {
-    transform: translateX(100%);
-    opacity: 0;
-  }
-  to {
-    transform: translateX(0);
-    opacity: 1;
-  }
-}
-
-.system-footer {
-  background: var(--clinical-white);
-  border-top: 1px solid var(--clinical-gray-200);
-  padding: 1rem 1.5rem;
-  text-align: center;
-  color: var(--clinical-gray-500);
-  font-size: 0.8rem;
-  margin-top: auto;
-}
-
-.footer-text {
-  margin-bottom: 0.25rem;
-}
-
-.footer-version {
-  font-size: 0.75rem;
-  color: var(--clinical-gray-400);
-}
-
-@media (max-width: 768px) {
-  .main-content {
-    padding: 1rem;
-  }
-
-  .quick-stats {
-    grid-template-columns: repeat(2, 1fr);
-    gap: 0.75rem;
-  }
-
-  .stat-card {
-    padding: 0.75rem;
-  }
-
-  .stat-content h3 {
-    font-size: 1.25rem;
-  }
-
-  .control-panel {
-    flex-direction: column;
-    gap: 1rem;
-    text-align: center;
-  }
-
-  .patients-table {
-    font-size: 0.8rem;
-  }
-
-  .patients-table th,
-  .patients-table td {
-    padding: 0.5rem 0.75rem;
-  }
-
-  .modal-content {
-    margin: 1rem;
-    max-width: calc(100vw - 2rem);
-  }
-
-  .form-actions {
-    flex-direction: column;
-  }
-
-  .header-actions .user-info {
-    display: none;
-  }
-}
-
-@media (max-width: 480px) {
-  .quick-stats {
-    grid-template-columns: 1fr;
-  }
-
-  .brand-text h1 {
-    font-size: 1.1rem;
-  }
-
-  .brand-text p {
-    display: none;
-  }
-
-  .patients-table th:nth-child(4),
-  .patients-table td:nth-child(4),
-  .patients-table th:nth-child(5),
-  .patients-table td:nth-child(5) {
-    display: none;
-  }
-}

crude/app/layout.tsx

@@ -1,32 +0,0 @@
-import type React from "react"
-import type { Metadata } from "next"
-import { GeistSans } from "geist/font/sans"
-import { GeistMono } from "geist/font/mono"
-import "./globals.css"
-
-export const metadata: Metadata = {
-  title: "v0 App",
-  description: "Created with v0",
-  generator: "v0.dev",
-}
-
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode
-}>) {
-  return (
-    <html lang="en">
-      <head>
-        <style>{`
-html {
-  font-family: ${GeistSans.style.fontFamily};
-  --font-sans: ${GeistSans.variable};
-  --font-mono: ${GeistMono.variable};
-}
-        `}</style>
-      </head>
-      <body>{children}</body>
-    </html>
-  )
-}

crude/app/page.tsx

@@ -1,562 +0,0 @@
-"use client"
-
-import type React from "react"
-import { useState, useCallback, useMemo } from "react"
-
-interface PatientRecord {
-  id: string
-  fullName: string
-  contactNumber: string
-  cityLocation: string
-  stateRegion: string
-  lastVisitDate: string
-  nextAppointmentDate: string
-  createdAt: string
-  updatedAt: string
-}
-
-interface NotificationState {
-  message: string
-  type: "success" | "error" | "info"
-  isVisible: boolean
-}
-
-interface FormData {
-  fullName: string
-  contactNumber: string
-  cityLocation: string
-  stateRegion: string
-  lastVisitDate: string
-  nextAppointmentDate: string
-}
-
-const useLocalStorage = <T,>(key: string, initialValue: T) => {
-  const [storedValue, setStoredValue] = useState<T>(() => {
-    if (typeof window === "undefined") return initialValue
-    try {
-      const item = window.localStorage.getItem(key)
-      return item ? JSON.parse(item) : initialValue
-    } catch (error) {
-      console.error(`Error reading localStorage key "${key}":`, error)
-      return initialValue
-    }
-  })
-
-  const setValue = useCallback(
-    (value: T | ((val: T) => T)) => {
-      try {
-        const valueToStore = value instanceof Function ? value(storedValue) : value
-        setStoredValue(valueToStore)
-        if (typeof window !== "undefined") {
-          window.localStorage.setItem(key, JSON.stringify(valueToStore))
-        }
-      } catch (error) {
-        console.error(`Error setting localStorage key "${key}":`, error)
-      }
-    },
-    [key, storedValue],
-  )
-
-  return [storedValue, setValue] as const
-}
-
-const useNotification = () => {
-  const [notification, setNotification] = useState<NotificationState>({
-    message: "",
-    type: "info",
-    isVisible: false,
-  })
-
-  const showNotification = useCallback((message: string, type: NotificationState["type"] = "info") => {
-    setNotification({ message, type, isVisible: true })
-    setTimeout(() => {
-      setNotification((prev) => ({ ...prev, isVisible: false }))
-    }, 4000)
-  }, [])
-
-  return { notification, showNotification }
-}
-
-const generatePatientId = (): string => {
-  return `PT${Date.now().toString().slice(-6)}${Math.random().toString(36).substr(2, 3).toUpperCase()}`
-}
-
-const formatDateDisplay = (dateString: string): string => {
-  if (!dateString) return "Não informado"
-  try {
-    const date = new Date(dateString)
-    return date.toLocaleDateString("pt-BR", {
-      day: "2-digit",
-      month: "2-digit",
-      year: "numeric",
-    })
-  } catch {
-    return "Data inválida"
-  }
-}
-
-const validateFormData = (data: FormData): string[] => {
-  const errors: string[] = []
-  if (!data.fullName.trim()) errors.push("Nome completo é obrigatório")
-  if (!data.contactNumber.trim()) errors.push("Número de contato é obrigatório")
-  if (!data.cityLocation.trim()) errors.push("Cidade é obrigatória")
-  if (data.fullName.trim().length < 2) errors.push("Nome deve ter pelo menos 2 caracteres")
-  if (data.contactNumber.trim().length < 10) errors.push("Número de contato deve ter pelo menos 10 dígitos")
-  return errors
-}
-
-export default function HospitalManagementSystem() {
-  const [patientRecords, setPatientRecords] = useLocalStorage<PatientRecord[]>("hospital_patients_v3", [])
-  const [isModalOpen, setIsModalOpen] = useState(false)
-  const [editingRecord, setEditingRecord] = useState<PatientRecord | null>(null)
-  const [formData, setFormData] = useState<FormData>({
-    fullName: "",
-    contactNumber: "",
-    cityLocation: "",
-    stateRegion: "",
-    lastVisitDate: "",
-    nextAppointmentDate: "",
-  })
-
-  const { notification, showNotification } = useNotification()
-
-  const systemMetrics = useMemo(
-    () => ({
-      totalPatients: patientRecords.length,
-      scheduledAppointments: patientRecords.filter((record) => record.nextAppointmentDate).length,
-      contactsAvailable: patientRecords.filter((record) => record.contactNumber).length,
-      recentVisits: patientRecords.filter((record) => {
-        if (!record.lastVisitDate) return false
-        const visitDate = new Date(record.lastVisitDate)
-        const thirtyDaysAgo = new Date()
-        thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30)
-        return visitDate >= thirtyDaysAgo
-      }).length,
-    }),
-    [patientRecords],
-  )
-
-  const resetFormState = useCallback(() => {
-    setFormData({
-      fullName: "",
-      contactNumber: "",
-      cityLocation: "",
-      stateRegion: "",
-      lastVisitDate: "",
-      nextAppointmentDate: "",
-    })
-    setEditingRecord(null)
-    setIsModalOpen(false)
-  }, [])
-
-  const handleInputChange = useCallback((field: keyof FormData, value: string) => {
-    setFormData((prev) => ({ ...prev, [field]: value }))
-  }, [])
-
-  const openCreateModal = useCallback(() => {
-    resetFormState()
-    setIsModalOpen(true)
-  }, [resetFormState])
-
-  const openEditModal = useCallback((record: PatientRecord) => {
-    setFormData({
-      fullName: record.fullName,
-      contactNumber: record.contactNumber,
-      cityLocation: record.cityLocation,
-      stateRegion: record.stateRegion,
-      lastVisitDate: record.lastVisitDate,
-      nextAppointmentDate: record.nextAppointmentDate,
-    })
-    setEditingRecord(record)
-    setIsModalOpen(true)
-  }, [])
-
-  const handleSubmitForm = useCallback(
-    (e: React.FormEvent) => {
-      e.preventDefault()
-
-      const validationErrors = validateFormData(formData)
-      if (validationErrors.length > 0) {
-        showNotification(validationErrors[0], "error")
-        return
-      }
-
-      const timestamp = new Date().toISOString()
-
-      if (editingRecord) {
-        const updatedRecord: PatientRecord = {
-          ...editingRecord,
-          ...formData,
-          updatedAt: timestamp,
-        }
-        setPatientRecords((prev) => prev.map((record) => (record.id === editingRecord.id ? updatedRecord : record)))
-        showNotification("Dados do paciente atualizados com sucesso!", "success")
-      } else {
-        const newRecord: PatientRecord = {
-          id: generatePatientId(),
-          ...formData,
-          createdAt: timestamp,
-          updatedAt: timestamp,
-        }
-        setPatientRecords((prev) => [...prev, newRecord])
-        showNotification("Paciente cadastrado no sistema!", "success")
-      }
-
-      resetFormState()
-    },
-    [formData, editingRecord, setPatientRecords, showNotification, resetFormState],
-  )
-
-  const handleDeleteRecord = useCallback(
-    (recordId: string) => {
-      const confirmDelete = window.confirm(
-        "Confirma a remoção deste paciente do sistema? Esta ação não pode ser desfeita.",
-      )
-      if (confirmDelete) {
-        setPatientRecords((prev) => prev.filter((record) => record.id !== recordId))
-        showNotification("Paciente removido do sistema.", "success")
-      }
-    },
-    [setPatientRecords, showNotification],
-  )
-
-  return (
-    <div className="medical-system">
-      <header className="system-header">
-        <div className="header-brand">
-          <div className="brand-icon">
-            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-              <path d="M22 12h-4l-3 9L9 3l-3 9H2" />
-            </svg>
-          </div>
-          <div className="brand-text">
-            <h1>MedSystem Pro</h1>
-            <p>Sistema Integrado de Gestão Hospitalar</p>
-          </div>
-        </div>
-        <div className="header-actions">
-          <div className="user-info">
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-              <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
-              <circle cx="12" cy="7" r="4" />
-            </svg>
-            Dr. Admin
-          </div>
-        </div>
-      </header>
-
-      <main className="main-content">
-        <section className="quick-stats">
-          <div className="stat-card patients">
-            <div className="stat-icon">
-              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
-                <circle cx="9" cy="7" r="4" />
-                <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
-                <path d="M16 3.13a4 4 0 0 1 0 7.75" />
-              </svg>
-            </div>
-            <div className="stat-content">
-              <h3>{systemMetrics.totalPatients}</h3>
-              <p>Total de Pacientes</p>
-            </div>
-          </div>
-
-          <div className="stat-card appointments">
-            <div className="stat-icon">
-              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                <rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
-                <line x1="16" y1="2" x2="16" y2="6" />
-                <line x1="8" y1="2" x2="8" y2="6" />
-                <line x1="3" y1="10" x2="21" y2="10" />
-              </svg>
-            </div>
-            <div className="stat-content">
-              <h3>{systemMetrics.scheduledAppointments}</h3>
-              <p>Consultas Agendadas</p>
-            </div>
-          </div>
-
-          <div className="stat-card contacts">
-            <div className="stat-icon">
-              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" />
-              </svg>
-            </div>
-            <div className="stat-content">
-              <h3>{systemMetrics.contactsAvailable}</h3>
-              <p>Contatos Disponíveis</p>
-            </div>
-          </div>
-
-          <div className="stat-card recent">
-            <div className="stat-icon">
-              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                <circle cx="12" cy="12" r="10" />
-                <polyline points="12,6 12,12 16,14" />
-              </svg>
-            </div>
-            <div className="stat-content">
-              <h3>{systemMetrics.recentVisits}</h3>
-              <p>Visitas Recentes</p>
-            </div>
-          </div>
-        </section>
-
-        <div className="control-panel">
-          <h2 className="panel-title">Registro de Pacientes</h2>
-          <button className="add-patient-btn" onClick={openCreateModal}>
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-              <line x1="12" y1="5" x2="12" y2="19" />
-              <line x1="5" y1="12" x2="19" y2="12" />
-            </svg>
-            Novo Paciente
-          </button>
-        </div>
-
-        <section className="patients-section">
-          <div className="section-header">
-            <h2 className="section-title">
-              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
-                <polyline points="14,2 14,8 20,8" />
-                <line x1="16" y1="13" x2="8" y2="13" />
-                <line x1="16" y1="17" x2="8" y2="17" />
-                <polyline points="10,9 9,9 8,9" />
-              </svg>
-              Pacientes Cadastrados
-              <span className="patient-count">{patientRecords.length}</span>
-            </h2>
-          </div>
-
-          {patientRecords.length === 0 ? (
-            <div className="empty-state">
-              <svg className="empty-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
-                <circle cx="9" cy="7" r="4" />
-                <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
-                <path d="M16 3.13a4 4 0 0 1 0 7.75" />
-              </svg>
-              <h3 className="empty-title">Nenhum paciente cadastrado</h3>
-              <p className="empty-description">Clique em "Novo Paciente" para começar</p>
-            </div>
-          ) : (
-            <div className="table-wrapper">
-              <table className="patients-table">
-                <thead>
-                  <tr>
-                    <th>Paciente</th>
-                    <th>Contato</th>
-                    <th>Localização</th>
-                    <th>Última Consulta</th>
-                    <th>Próxima Consulta</th>
-                    <th>Ações</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {patientRecords.map((record) => (
-                    <tr key={record.id}>
-                      <td>
-                        <div className="patient-name">{record.fullName}</div>
-                        <div className="patient-id">ID: {record.id}</div>
-                      </td>
-                      <td>
-                        <div className="contact-info">
-                          <div className="phone-number">{record.contactNumber}</div>
-                        </div>
-                      </td>
-                      <td>
-                        <div className="location-info">
-                          {record.cityLocation}
-                          {record.stateRegion && `, ${record.stateRegion}`}
-                        </div>
-                      </td>
-                      <td>
-                        <div className="date-info">
-                          <div className="date-label">Última</div>
-                          {formatDateDisplay(record.lastVisitDate)}
-                        </div>
-                      </td>
-                      <td>
-                        <div className="date-info">
-                          <div className="date-label">Próxima</div>
-                          {formatDateDisplay(record.nextAppointmentDate)}
-                        </div>
-                      </td>
-                      <td>
-                        <div className="action-buttons">
-                          <button className="action-btn edit-btn" onClick={() => openEditModal(record)} title="Editar">
-                            <svg
-                              width="14"
-                              height="14"
-                              viewBox="0 0 24 24"
-                              fill="none"
-                              stroke="currentColor"
-                              strokeWidth="2"
-                            >
-                              <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
-                              <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
-                            </svg>
-                          </button>
-                          <button
-                            className="action-btn delete-btn"
-                            onClick={() => handleDeleteRecord(record.id)}
-                            title="Excluir"
-                          >
-                            <svg
-                              width="14"
-                              height="14"
-                              viewBox="0 0 24 24"
-                              fill="none"
-                              stroke="currentColor"
-                              strokeWidth="2"
-                            >
-                              <polyline points="3,6 5,6 21,6" />
-                              <path d="M19,6v14a2,2,0,0,1-2,2H7a2,2,0,0,1-2-2V6m3,0V4a2,2,0,0,1,2-2h4a2,2,0,0,1,2,2V6" />
-                              <line x1="10" y1="11" x2="10" y2="17" />
-                              <line x1="14" y1="11" x2="14" y2="17" />
-                            </svg>
-                          </button>
-                        </div>
-                      </td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
-          )}
-        </section>
-      </main>
-
-      <footer className="system-footer">
-        <div className="footer-text">🏥 MedSystem Pro - Sistema Hospitalar Integrado</div>
-        <div className="footer-version">Versão 2.1.0 | Desenvolvido com React & TypeScript</div>
-      </footer>
-
-      {isModalOpen && (
-        <div className="modal-overlay" onClick={(e) => e.target === e.currentTarget && resetFormState()}>
-          <div className="modal-content">
-            <div className="modal-header">
-              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
-                <polyline points="14,2 14,8 20,8" />
-                <line x1="16" y1="13" x2="8" y2="13" />
-                <line x1="16" y1="17" x2="8" y2="17" />
-                <polyline points="10,9 9,9 8,9" />
-              </svg>
-              <h2>{editingRecord ? "Editar Paciente" : "Novo Paciente"}</h2>
-            </div>
-
-            <div className="modal-body">
-              <form onSubmit={handleSubmitForm}>
-                <div className="form-grid">
-                  <div className="form-group">
-                    <label className="form-label" htmlFor="fullName">
-                      Nome Completo *
-                    </label>
-                    <input
-                      id="fullName"
-                      type="text"
-                      className="form-input"
-                      value={formData.fullName}
-                      onChange={(e) => handleInputChange("fullName", e.target.value)}
-                      placeholder="Nome completo do paciente"
-                      required
-                    />
-                  </div>
-
-                  <div className="form-group">
-                    <label className="form-label" htmlFor="contactNumber">
-                      Telefone *
-                    </label>
-                    <input
-                      id="contactNumber"
-                      type="tel"
-                      className="form-input"
-                      value={formData.contactNumber}
-                      onChange={(e) => handleInputChange("contactNumber", e.target.value)}
-                      placeholder="(11) 99999-9999"
-                      required
-                    />
-                  </div>
-
-                  <div className="form-group">
-                    <label className="form-label" htmlFor="cityLocation">
-                      Cidade *
-                    </label>
-                    <input
-                      id="cityLocation"
-                      type="text"
-                      className="form-input"
-                      value={formData.cityLocation}
-                      onChange={(e) => handleInputChange("cityLocation", e.target.value)}
-                      placeholder="Cidade"
-                      required
-                    />
-                  </div>
-
-                  <div className="form-group">
-                    <label className="form-label" htmlFor="stateRegion">
-                      Estado
-                    </label>
-                    <input
-                      id="stateRegion"
-                      type="text"
-                      className="form-input"
-                      value={formData.stateRegion}
-                      onChange={(e) => handleInputChange("stateRegion", e.target.value)}
-                      placeholder="SP, RJ, MG..."
-                    />
-                  </div>
-
-                  <div className="form-group">
-                    <label className="form-label" htmlFor="lastVisitDate">
-                      Última Consulta
-                    </label>
-                    <input
-                      id="lastVisitDate"
-                      type="date"
-                      className="form-input"
-                      value={formData.lastVisitDate}
-                      onChange={(e) => handleInputChange("lastVisitDate", e.target.value)}
-                    />
-                  </div>
-
-                  <div className="form-group">
-                    <label className="form-label" htmlFor="nextAppointmentDate">
-                      Próxima Consulta
-                    </label>
-                    <input
-                      id="nextAppointmentDate"
-                      type="date"
-                      className="form-input"
-                      value={formData.nextAppointmentDate}
-                      onChange={(e) => handleInputChange("nextAppointmentDate", e.target.value)}
-                    />
-                  </div>
-                </div>
-
-                <div className="form-actions">
-                  <button type="submit" className="save-btn">
-                    {editingRecord ? "Atualizar" : "Cadastrar"}
-                  </button>
-                  <button type="button" className="cancel-btn" onClick={resetFormState}>
-                    Cancelar
-                  </button>
-                </div>
-              </form>
-            </div>
-          </div>
-        </div>
-      )}
-
-      {notification.isVisible && (
-        <div className="toast-container">
-          <div className={`toast ${notification.type}`}>
-            <div className="toast-message">{notification.message}</div>
-          </div>
-        </div>
-      )}
-    </div>
-  )
-}

crude/components/ui/dropdown-menu.tsx

@@ -1,257 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
-import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-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>
-          <CheckIcon 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>
-          <CircleIcon 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}
-      <ChevronRightIcon 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,
-  DropdownMenuPortal,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuLabel,
-  DropdownMenuItem,
-  DropdownMenuCheckboxItem,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuSub,
-  DropdownMenuSubTrigger,
-  DropdownMenuSubContent,
-}

crude/components/ui/popover.tsx

@@ -1,48 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as PopoverPrimitive from "@radix-ui/react-popover"
-
-import { cn } from "@/lib/utils"
-
-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 }

crude/components/ui/select.tsx

@@ -1,185 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as SelectPrimitive from "@radix-ui/react-select"
-import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-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 shadow-xs 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",
-  ...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}
-        {...props}
-      >
-        <SelectScrollUpButton />
-        <SelectPrimitive.Viewport
-          className={cn(
-            "p-1",
-            position === "popper" &&
-              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--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,
-}

crude/components/ui/textarea.tsx

@@ -1,18 +0,0 @@
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-
-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 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 }

crude/hooks/use-toast.ts

@@ -1,194 +0,0 @@
-"use client"
-
-// Inspired by react-hot-toast library
-import * as React from "react"
-
-import type {
-  ToastActionElement,
-  ToastProps,
-} from "@/components/ui/toast"
-
-const TOAST_LIMIT = 1
-const TOAST_REMOVE_DELAY = 1000000
-
-type ToasterToast = ToastProps & {
-  id: string
-  title?: React.ReactNode
-  description?: React.ReactNode
-  action?: ToastActionElement
-}
-
-const actionTypes = {
-  ADD_TOAST: "ADD_TOAST",
-  UPDATE_TOAST: "UPDATE_TOAST",
-  DISMISS_TOAST: "DISMISS_TOAST",
-  REMOVE_TOAST: "REMOVE_TOAST",
-} as const
-
-let count = 0
-
-function genId() {
-  count = (count + 1) % Number.MAX_SAFE_INTEGER
-  return count.toString()
-}
-
-type ActionType = typeof actionTypes
-
-type Action =
-  | {
-      type: ActionType["ADD_TOAST"]
-      toast: ToasterToast
-    }
-  | {
-      type: ActionType["UPDATE_TOAST"]
-      toast: Partial<ToasterToast>
-    }
-  | {
-      type: ActionType["DISMISS_TOAST"]
-      toastId?: ToasterToast["id"]
-    }
-  | {
-      type: ActionType["REMOVE_TOAST"]
-      toastId?: ToasterToast["id"]
-    }
-
-interface State {
-  toasts: ToasterToast[]
-}
-
-const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
-
-const addToRemoveQueue = (toastId: string) => {
-  if (toastTimeouts.has(toastId)) {
-    return
-  }
-
-  const timeout = setTimeout(() => {
-    toastTimeouts.delete(toastId)
-    dispatch({
-      type: "REMOVE_TOAST",
-      toastId: toastId,
-    })
-  }, TOAST_REMOVE_DELAY)
-
-  toastTimeouts.set(toastId, timeout)
-}
-
-export const reducer = (state: State, action: Action): State => {
-  switch (action.type) {
-    case "ADD_TOAST":
-      return {
-        ...state,
-        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
-      }
-
-    case "UPDATE_TOAST":
-      return {
-        ...state,
-        toasts: state.toasts.map((t) =>
-          t.id === action.toast.id ? { ...t, ...action.toast } : t
-        ),
-      }
-
-    case "DISMISS_TOAST": {
-      const { toastId } = action
-
-      // ! Side effects ! - This could be extracted into a dismissToast() action,
-      // but I'll keep it here for simplicity
-      if (toastId) {
-        addToRemoveQueue(toastId)
-      } else {
-        state.toasts.forEach((toast) => {
-          addToRemoveQueue(toast.id)
-        })
-      }
-
-      return {
-        ...state,
-        toasts: state.toasts.map((t) =>
-          t.id === toastId || toastId === undefined
-            ? {
-                ...t,
-                open: false,
-              }
-            : t
-        ),
-      }
-    }
-    case "REMOVE_TOAST":
-      if (action.toastId === undefined) {
-        return {
-          ...state,
-          toasts: [],
-        }
-      }
-      return {
-        ...state,
-        toasts: state.toasts.filter((t) => t.id !== action.toastId),
-      }
-  }
-}
-
-const listeners: Array<(state: State) => void> = []
-
-let memoryState: State = { toasts: [] }
-
-function dispatch(action: Action) {
-  memoryState = reducer(memoryState, action)
-  listeners.forEach((listener) => {
-    listener(memoryState)
-  })
-}
-
-type Toast = Omit<ToasterToast, "id">
-
-function toast({ ...props }: Toast) {
-  const id = genId()
-
-  const update = (props: ToasterToast) =>
-    dispatch({
-      type: "UPDATE_TOAST",
-      toast: { ...props, id },
-    })
-  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
-
-  dispatch({
-    type: "ADD_TOAST",
-    toast: {
-      ...props,
-      id,
-      open: true,
-      onOpenChange: (open) => {
-        if (!open) dismiss()
-      },
-    },
-  })
-
-  return {
-    id: id,
-    dismiss,
-    update,
-  }
-}
-
-function useToast() {
-  const [state, setState] = React.useState<State>(memoryState)
-
-  React.useEffect(() => {
-    listeners.push(setState)
-    return () => {
-      const index = listeners.indexOf(setState)
-      if (index > -1) {
-        listeners.splice(index, 1)
-      }
-    }
-  }, [state])
-
-  return {
-    ...state,
-    toast,
-    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
-  }
-}
-
-export { useToast, toast }

crude/lib/utils.ts

@@ -1,6 +0,0 @@
-import { clsx, type ClassValue } from "clsx"
-import { twMerge } from "tailwind-merge"
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
-}

crude/next.config.mjs

@@ -1,14 +0,0 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {
-  eslint: {
-    ignoreDuringBuilds: true,
-  },
-  typescript: {
-    ignoreBuildErrors: true,
-  },
-  images: {
-    unoptimized: true,
-  },
-}
-
-export default nextConfig

crude/pnpm-lock.yaml

@@ -1,5 +0,0 @@
-lockfileVersion: '9.0'
-
-settings:
-  autoInstallPeers: true
-  excludeLinksFromLockfile: false

crude/theme-provider.tsx

@@ -1,11 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import {
-  ThemeProvider as NextThemesProvider,
-  type ThemeProviderProps,
-} from 'next-themes'
-
-export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
-  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
-}

crude/ui/accordion.tsx

@@ -1,66 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as AccordionPrimitive from "@radix-ui/react-accordion"
-import { ChevronDownIcon } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-function Accordion({
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
-  return <AccordionPrimitive.Root data-slot="accordion" {...props} />
-}
-
-function AccordionItem({
-  className,
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
-  return (
-    <AccordionPrimitive.Item
-      data-slot="accordion-item"
-      className={cn("border-b last:border-b-0", className)}
-      {...props}
-    />
-  )
-}
-
-function AccordionTrigger({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
-  return (
-    <AccordionPrimitive.Header className="flex">
-      <AccordionPrimitive.Trigger
-        data-slot="accordion-trigger"
-        className={cn(
-          "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
-          className
-        )}
-        {...props}
-      >
-        {children}
-        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
-      </AccordionPrimitive.Trigger>
-    </AccordionPrimitive.Header>
-  )
-}
-
-function AccordionContent({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
-  return (
-    <AccordionPrimitive.Content
-      data-slot="accordion-content"
-      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
-      {...props}
-    >
-      <div className={cn("pt-0 pb-4", className)}>{children}</div>
-    </AccordionPrimitive.Content>
-  )
-}
-
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

crude/ui/alert-dialog.tsx

@@ -1,157 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
-
-import { cn } from "@/lib/utils"
-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,
-}

crude/ui/alert.tsx

@@ -1,66 +0,0 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-
-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 }

crude/ui/aspect-ratio.tsx

@@ -1,11 +0,0 @@
-"use client"
-
-import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
-
-function AspectRatio({
-  ...props
-}: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
-  return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />
-}
-
-export { AspectRatio }

crude/ui/avatar.tsx

@@ -1,53 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as AvatarPrimitive from "@radix-ui/react-avatar"
-
-import { cn } from "@/lib/utils"
-
-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 }

crude/ui/badge.tsx

@@ -1,46 +0,0 @@
-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"
-
-const badgeVariants = cva(
-  "inline-flex items-center justify-center rounded-md 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",
-      },
-    },
-    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 }

crude/ui/breadcrumb.tsx

@@ -1,109 +0,0 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { ChevronRight, MoreHorizontal } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-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,
-}

crude/ui/button.tsx

@@ -1,59 +0,0 @@
-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"
-
-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",
-  {
-    variants: {
-      variant: {
-        default:
-          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
-        destructive:
-          "bg-destructive text-white shadow-xs 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 shadow-xs 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",
-      },
-    },
-    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 }

crude/ui/calendar.tsx

@@ -1,213 +0,0 @@
-"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"
-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 [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none",
-          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 }

crude/ui/card.tsx

@@ -1,92 +0,0 @@
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-
-function Card({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card"
-      className={cn(
-        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
-        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-1.5 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,
-  CardHeader,
-  CardFooter,
-  CardTitle,
-  CardAction,
-  CardDescription,
-  CardContent,
-}

crude/ui/carousel.tsx

@@ -1,241 +0,0 @@
-"use client"
-
-import * as React from "react"
-import useEmblaCarousel, {
-  type UseEmblaCarouselType,
-} from "embla-carousel-react"
-import { ArrowLeft, ArrowRight } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
-
-type CarouselApi = UseEmblaCarouselType[1]
-type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
-type CarouselOptions = UseCarouselParameters[0]
-type CarouselPlugin = UseCarouselParameters[1]
-
-type CarouselProps = {
-  opts?: CarouselOptions
-  plugins?: CarouselPlugin
-  orientation?: "horizontal" | "vertical"
-  setApi?: (api: CarouselApi) => void
-}
-
-type CarouselContextProps = {
-  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
-  api: ReturnType<typeof useEmblaCarousel>[1]
-  scrollPrev: () => void
-  scrollNext: () => void
-  canScrollPrev: boolean
-  canScrollNext: boolean
-} & CarouselProps
-
-const CarouselContext = React.createContext<CarouselContextProps | null>(null)
-
-function useCarousel() {
-  const context = React.useContext(CarouselContext)
-
-  if (!context) {
-    throw new Error("useCarousel must be used within a <Carousel />")
-  }
-
-  return context
-}
-
-function Carousel({
-  orientation = "horizontal",
-  opts,
-  setApi,
-  plugins,
-  className,
-  children,
-  ...props
-}: React.ComponentProps<"div"> & CarouselProps) {
-  const [carouselRef, api] = useEmblaCarousel(
-    {
-      ...opts,
-      axis: orientation === "horizontal" ? "x" : "y",
-    },
-    plugins
-  )
-  const [canScrollPrev, setCanScrollPrev] = React.useState(false)
-  const [canScrollNext, setCanScrollNext] = React.useState(false)
-
-  const onSelect = React.useCallback((api: CarouselApi) => {
-    if (!api) return
-    setCanScrollPrev(api.canScrollPrev())
-    setCanScrollNext(api.canScrollNext())
-  }, [])
-
-  const scrollPrev = React.useCallback(() => {
-    api?.scrollPrev()
-  }, [api])
-
-  const scrollNext = React.useCallback(() => {
-    api?.scrollNext()
-  }, [api])
-
-  const handleKeyDown = React.useCallback(
-    (event: React.KeyboardEvent<HTMLDivElement>) => {
-      if (event.key === "ArrowLeft") {
-        event.preventDefault()
-        scrollPrev()
-      } else if (event.key === "ArrowRight") {
-        event.preventDefault()
-        scrollNext()
-      }
-    },
-    [scrollPrev, scrollNext]
-  )
-
-  React.useEffect(() => {
-    if (!api || !setApi) return
-    setApi(api)
-  }, [api, setApi])
-
-  React.useEffect(() => {
-    if (!api) return
-    onSelect(api)
-    api.on("reInit", onSelect)
-    api.on("select", onSelect)
-
-    return () => {
-      api?.off("select", onSelect)
-    }
-  }, [api, onSelect])
-
-  return (
-    <CarouselContext.Provider
-      value={{
-        carouselRef,
-        api: api,
-        opts,
-        orientation:
-          orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
-        scrollPrev,
-        scrollNext,
-        canScrollPrev,
-        canScrollNext,
-      }}
-    >
-      <div
-        onKeyDownCapture={handleKeyDown}
-        className={cn("relative", className)}
-        role="region"
-        aria-roledescription="carousel"
-        data-slot="carousel"
-        {...props}
-      >
-        {children}
-      </div>
-    </CarouselContext.Provider>
-  )
-}
-
-function CarouselContent({ className, ...props }: React.ComponentProps<"div">) {
-  const { carouselRef, orientation } = useCarousel()
-
-  return (
-    <div
-      ref={carouselRef}
-      className="overflow-hidden"
-      data-slot="carousel-content"
-    >
-      <div
-        className={cn(
-          "flex",
-          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
-          className
-        )}
-        {...props}
-      />
-    </div>
-  )
-}
-
-function CarouselItem({ className, ...props }: React.ComponentProps<"div">) {
-  const { orientation } = useCarousel()
-
-  return (
-    <div
-      role="group"
-      aria-roledescription="slide"
-      data-slot="carousel-item"
-      className={cn(
-        "min-w-0 shrink-0 grow-0 basis-full",
-        orientation === "horizontal" ? "pl-4" : "pt-4",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function CarouselPrevious({
-  className,
-  variant = "outline",
-  size = "icon",
-  ...props
-}: React.ComponentProps<typeof Button>) {
-  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
-
-  return (
-    <Button
-      data-slot="carousel-previous"
-      variant={variant}
-      size={size}
-      className={cn(
-        "absolute size-8 rounded-full",
-        orientation === "horizontal"
-          ? "top-1/2 -left-12 -translate-y-1/2"
-          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
-        className
-      )}
-      disabled={!canScrollPrev}
-      onClick={scrollPrev}
-      {...props}
-    >
-      <ArrowLeft />
-      <span className="sr-only">Previous slide</span>
-    </Button>
-  )
-}
-
-function CarouselNext({
-  className,
-  variant = "outline",
-  size = "icon",
-  ...props
-}: React.ComponentProps<typeof Button>) {
-  const { orientation, scrollNext, canScrollNext } = useCarousel()
-
-  return (
-    <Button
-      data-slot="carousel-next"
-      variant={variant}
-      size={size}
-      className={cn(
-        "absolute size-8 rounded-full",
-        orientation === "horizontal"
-          ? "top-1/2 -right-12 -translate-y-1/2"
-          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
-        className
-      )}
-      disabled={!canScrollNext}
-      onClick={scrollNext}
-      {...props}
-    >
-      <ArrowRight />
-      <span className="sr-only">Next slide</span>
-    </Button>
-  )
-}
-
-export {
-  type CarouselApi,
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselPrevious,
-  CarouselNext,
-}

crude/ui/chart.tsx

@@ -1,353 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as RechartsPrimitive from "recharts"
-
-import { cn } from "@/lib/utils"
-
-// 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,
-  ...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}
-        className={cn(
-          "[&_.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 flex aspect-video justify-center text-xs [&_.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} />
-        <RechartsPrimitive.ResponsiveContainer>
-          {children}
-        </RechartsPrimitive.ResponsiveContainer>
-      </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.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.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,
-}

crude/ui/checkbox.tsx

@@ -1,32 +0,0 @@
-"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"
-
-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="flex items-center justify-center text-current transition-none"
-      >
-        <CheckIcon className="size-3.5" />
-      </CheckboxPrimitive.Indicator>
-    </CheckboxPrimitive.Root>
-  )
-}
-
-export { Checkbox }

crude/ui/collapsible.tsx

@@ -1,33 +0,0 @@
-"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 }

crude/ui/command.tsx

@@ -1,184 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Command as CommandPrimitive } from "cmdk"
-import { SearchIcon } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-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,
-}

crude/ui/context-menu.tsx

@@ -1,252 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
-import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-function ContextMenu({
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {
-  return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />
-}
-
-function ContextMenuTrigger({
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {
-  return (
-    <ContextMenuPrimitive.Trigger data-slot="context-menu-trigger" {...props} />
-  )
-}
-
-function ContextMenuGroup({
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {
-  return (
-    <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />
-  )
-}
-
-function ContextMenuPortal({
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {
-  return (
-    <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />
-  )
-}
-
-function ContextMenuSub({
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {
-  return <ContextMenuPrimitive.Sub data-slot="context-menu-sub" {...props} />
-}
-
-function ContextMenuRadioGroup({
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {
-  return (
-    <ContextMenuPrimitive.RadioGroup
-      data-slot="context-menu-radio-group"
-      {...props}
-    />
-  )
-}
-
-function ContextMenuSubTrigger({
-  className,
-  inset,
-  children,
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {
-  inset?: boolean
-}) {
-  return (
-    <ContextMenuPrimitive.SubTrigger
-      data-slot="context-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 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <ChevronRightIcon className="ml-auto" />
-    </ContextMenuPrimitive.SubTrigger>
-  )
-}
-
-function ContextMenuSubContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {
-  return (
-    <ContextMenuPrimitive.SubContent
-      data-slot="context-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-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function ContextMenuContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Content>) {
-  return (
-    <ContextMenuPrimitive.Portal>
-      <ContextMenuPrimitive.Content
-        data-slot="context-menu-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 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
-          className
-        )}
-        {...props}
-      />
-    </ContextMenuPrimitive.Portal>
-  )
-}
-
-function ContextMenuItem({
-  className,
-  inset,
-  variant = "default",
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {
-  inset?: boolean
-  variant?: "default" | "destructive"
-}) {
-  return (
-    <ContextMenuPrimitive.Item
-      data-slot="context-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 ContextMenuCheckboxItem({
-  className,
-  children,
-  checked,
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {
-  return (
-    <ContextMenuPrimitive.CheckboxItem
-      data-slot="context-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">
-        <ContextMenuPrimitive.ItemIndicator>
-          <CheckIcon className="size-4" />
-        </ContextMenuPrimitive.ItemIndicator>
-      </span>
-      {children}
-    </ContextMenuPrimitive.CheckboxItem>
-  )
-}
-
-function ContextMenuRadioItem({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {
-  return (
-    <ContextMenuPrimitive.RadioItem
-      data-slot="context-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">
-        <ContextMenuPrimitive.ItemIndicator>
-          <CircleIcon className="size-2 fill-current" />
-        </ContextMenuPrimitive.ItemIndicator>
-      </span>
-      {children}
-    </ContextMenuPrimitive.RadioItem>
-  )
-}
-
-function ContextMenuLabel({
-  className,
-  inset,
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {
-  inset?: boolean
-}) {
-  return (
-    <ContextMenuPrimitive.Label
-      data-slot="context-menu-label"
-      data-inset={inset}
-      className={cn(
-        "text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function ContextMenuSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {
-  return (
-    <ContextMenuPrimitive.Separator
-      data-slot="context-menu-separator"
-      className={cn("bg-border -mx-1 my-1 h-px", className)}
-      {...props}
-    />
-  )
-}
-
-function ContextMenuShortcut({
-  className,
-  ...props
-}: React.ComponentProps<"span">) {
-  return (
-    <span
-      data-slot="context-menu-shortcut"
-      className={cn(
-        "text-muted-foreground ml-auto text-xs tracking-widest",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export {
-  ContextMenu,
-  ContextMenuTrigger,
-  ContextMenuContent,
-  ContextMenuItem,
-  ContextMenuCheckboxItem,
-  ContextMenuRadioItem,
-  ContextMenuLabel,
-  ContextMenuSeparator,
-  ContextMenuShortcut,
-  ContextMenuGroup,
-  ContextMenuPortal,
-  ContextMenuSub,
-  ContextMenuSubContent,
-  ContextMenuSubTrigger,
-  ContextMenuRadioGroup,
-}

crude/ui/dialog.tsx

@@ -1,143 +0,0 @@
-"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"
-
-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,
-}

crude/ui/drawer.tsx

@@ -1,135 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Drawer as DrawerPrimitive } from "vaul"
-
-import { cn } from "@/lib/utils"
-
-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,
-}

crude/ui/form.tsx

@@ -1,167 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
-import { Slot } from "@radix-ui/react-slot"
-import {
-  Controller,
-  FormProvider,
-  useFormContext,
-  useFormState,
-  type ControllerProps,
-  type FieldPath,
-  type FieldValues,
-} from "react-hook-form"
-
-import { cn } from "@/lib/utils"
-import { Label } from "@/components/ui/label"
-
-const Form = FormProvider
-
-type FormFieldContextValue<
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
-> = {
-  name: TName
-}
-
-const FormFieldContext = React.createContext<FormFieldContextValue>(
-  {} as FormFieldContextValue
-)
-
-const FormField = <
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
->({
-  ...props
-}: ControllerProps<TFieldValues, TName>) => {
-  return (
-    <FormFieldContext.Provider value={{ name: props.name }}>
-      <Controller {...props} />
-    </FormFieldContext.Provider>
-  )
-}
-
-const useFormField = () => {
-  const fieldContext = React.useContext(FormFieldContext)
-  const itemContext = React.useContext(FormItemContext)
-  const { getFieldState } = useFormContext()
-  const formState = useFormState({ name: fieldContext.name })
-  const fieldState = getFieldState(fieldContext.name, formState)
-
-  if (!fieldContext) {
-    throw new Error("useFormField should be used within <FormField>")
-  }
-
-  const { id } = itemContext
-
-  return {
-    id,
-    name: fieldContext.name,
-    formItemId: `${id}-form-item`,
-    formDescriptionId: `${id}-form-item-description`,
-    formMessageId: `${id}-form-item-message`,
-    ...fieldState,
-  }
-}
-
-type FormItemContextValue = {
-  id: string
-}
-
-const FormItemContext = React.createContext<FormItemContextValue>(
-  {} as FormItemContextValue
-)
-
-function FormItem({ className, ...props }: React.ComponentProps<"div">) {
-  const id = React.useId()
-
-  return (
-    <FormItemContext.Provider value={{ id }}>
-      <div
-        data-slot="form-item"
-        className={cn("grid gap-2", className)}
-        {...props}
-      />
-    </FormItemContext.Provider>
-  )
-}
-
-function FormLabel({
-  className,
-  ...props
-}: React.ComponentProps<typeof LabelPrimitive.Root>) {
-  const { error, formItemId } = useFormField()
-
-  return (
-    <Label
-      data-slot="form-label"
-      data-error={!!error}
-      className={cn("data-[error=true]:text-destructive", className)}
-      htmlFor={formItemId}
-      {...props}
-    />
-  )
-}
-
-function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
-  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
-
-  return (
-    <Slot
-      data-slot="form-control"
-      id={formItemId}
-      aria-describedby={
-        !error
-          ? `${formDescriptionId}`
-          : `${formDescriptionId} ${formMessageId}`
-      }
-      aria-invalid={!!error}
-      {...props}
-    />
-  )
-}
-
-function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
-  const { formDescriptionId } = useFormField()
-
-  return (
-    <p
-      data-slot="form-description"
-      id={formDescriptionId}
-      className={cn("text-muted-foreground text-sm", className)}
-      {...props}
-    />
-  )
-}
-
-function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
-  const { error, formMessageId } = useFormField()
-  const body = error ? String(error?.message ?? "") : props.children
-
-  if (!body) {
-    return null
-  }
-
-  return (
-    <p
-      data-slot="form-message"
-      id={formMessageId}
-      className={cn("text-destructive text-sm", className)}
-      {...props}
-    >
-      {body}
-    </p>
-  )
-}
-
-export {
-  useFormField,
-  Form,
-  FormItem,
-  FormLabel,
-  FormControl,
-  FormDescription,
-  FormMessage,
-  FormField,
-}

crude/ui/hover-card.tsx

@@ -1,44 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
-
-import { cn } from "@/lib/utils"
-
-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 }

crude/ui/input-otp.tsx

@@ -1,77 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { OTPInput, OTPInputContext } from "input-otp"
-import { MinusIcon } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-function InputOTP({
-  className,
-  containerClassName,
-  ...props
-}: React.ComponentProps<typeof OTPInput> & {
-  containerClassName?: string
-}) {
-  return (
-    <OTPInput
-      data-slot="input-otp"
-      containerClassName={cn(
-        "flex items-center gap-2 has-disabled:opacity-50",
-        containerClassName
-      )}
-      className={cn("disabled:cursor-not-allowed", className)}
-      {...props}
-    />
-  )
-}
-
-function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="input-otp-group"
-      className={cn("flex items-center", className)}
-      {...props}
-    />
-  )
-}
-
-function InputOTPSlot({
-  index,
-  className,
-  ...props
-}: React.ComponentProps<"div"> & {
-  index: number
-}) {
-  const inputOTPContext = React.useContext(OTPInputContext)
-  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}
-
-  return (
-    <div
-      data-slot="input-otp-slot"
-      data-active={isActive}
-      className={cn(
-        "data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]",
-        className
-      )}
-      {...props}
-    >
-      {char}
-      {hasFakeCaret && (
-        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
-          <div className="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
-        </div>
-      )}
-    </div>
-  )
-}
-
-function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {
-  return (
-    <div data-slot="input-otp-separator" role="separator" {...props}>
-      <MinusIcon />
-    </div>
-  )
-}
-
-export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }

crude/ui/input.tsx

@@ -1,21 +0,0 @@
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-
-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 flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs 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 }

crude/ui/label.tsx

@@ -1,24 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
-
-import { cn } from "@/lib/utils"
-
-function Label({
-  className,
-  ...props
-}: React.ComponentProps<typeof LabelPrimitive.Root>) {
-  return (
-    <LabelPrimitive.Root
-      data-slot="label"
-      className={cn(
-        "flex items-center gap-2 text-sm 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 }

crude/ui/menubar.tsx

@@ -1,276 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as MenubarPrimitive from "@radix-ui/react-menubar"
-import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-function Menubar({
-  className,
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.Root>) {
-  return (
-    <MenubarPrimitive.Root
-      data-slot="menubar"
-      className={cn(
-        "bg-background flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function MenubarMenu({
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.Menu>) {
-  return <MenubarPrimitive.Menu data-slot="menubar-menu" {...props} />
-}
-
-function MenubarGroup({
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.Group>) {
-  return <MenubarPrimitive.Group data-slot="menubar-group" {...props} />
-}
-
-function MenubarPortal({
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.Portal>) {
-  return <MenubarPrimitive.Portal data-slot="menubar-portal" {...props} />
-}
-
-function MenubarRadioGroup({
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {
-  return (
-    <MenubarPrimitive.RadioGroup data-slot="menubar-radio-group" {...props} />
-  )
-}
-
-function MenubarTrigger({
-  className,
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.Trigger>) {
-  return (
-    <MenubarPrimitive.Trigger
-      data-slot="menubar-trigger"
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function MenubarContent({
-  className,
-  align = "start",
-  alignOffset = -4,
-  sideOffset = 8,
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.Content>) {
-  return (
-    <MenubarPortal>
-      <MenubarPrimitive.Content
-        data-slot="menubar-content"
-        align={align}
-        alignOffset={alignOffset}
-        sideOffset={sideOffset}
-        className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in 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-[12rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-md",
-          className
-        )}
-        {...props}
-      />
-    </MenubarPortal>
-  )
-}
-
-function MenubarItem({
-  className,
-  inset,
-  variant = "default",
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.Item> & {
-  inset?: boolean
-  variant?: "default" | "destructive"
-}) {
-  return (
-    <MenubarPrimitive.Item
-      data-slot="menubar-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 MenubarCheckboxItem({
-  className,
-  children,
-  checked,
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem>) {
-  return (
-    <MenubarPrimitive.CheckboxItem
-      data-slot="menubar-checkbox-item"
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs 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">
-        <MenubarPrimitive.ItemIndicator>
-          <CheckIcon className="size-4" />
-        </MenubarPrimitive.ItemIndicator>
-      </span>
-      {children}
-    </MenubarPrimitive.CheckboxItem>
-  )
-}
-
-function MenubarRadioItem({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.RadioItem>) {
-  return (
-    <MenubarPrimitive.RadioItem
-      data-slot="menubar-radio-item"
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs 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">
-        <MenubarPrimitive.ItemIndicator>
-          <CircleIcon className="size-2 fill-current" />
-        </MenubarPrimitive.ItemIndicator>
-      </span>
-      {children}
-    </MenubarPrimitive.RadioItem>
-  )
-}
-
-function MenubarLabel({
-  className,
-  inset,
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.Label> & {
-  inset?: boolean
-}) {
-  return (
-    <MenubarPrimitive.Label
-      data-slot="menubar-label"
-      data-inset={inset}
-      className={cn(
-        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function MenubarSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.Separator>) {
-  return (
-    <MenubarPrimitive.Separator
-      data-slot="menubar-separator"
-      className={cn("bg-border -mx-1 my-1 h-px", className)}
-      {...props}
-    />
-  )
-}
-
-function MenubarShortcut({
-  className,
-  ...props
-}: React.ComponentProps<"span">) {
-  return (
-    <span
-      data-slot="menubar-shortcut"
-      className={cn(
-        "text-muted-foreground ml-auto text-xs tracking-widest",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function MenubarSub({
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.Sub>) {
-  return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />
-}
-
-function MenubarSubTrigger({
-  className,
-  inset,
-  children,
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & {
-  inset?: boolean
-}) {
-  return (
-    <MenubarPrimitive.SubTrigger
-      data-slot="menubar-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-none select-none data-[inset]:pl-8",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <ChevronRightIcon className="ml-auto h-4 w-4" />
-    </MenubarPrimitive.SubTrigger>
-  )
-}
-
-function MenubarSubContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.SubContent>) {
-  return (
-    <MenubarPrimitive.SubContent
-      data-slot="menubar-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-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export {
-  Menubar,
-  MenubarPortal,
-  MenubarMenu,
-  MenubarTrigger,
-  MenubarContent,
-  MenubarGroup,
-  MenubarSeparator,
-  MenubarLabel,
-  MenubarItem,
-  MenubarShortcut,
-  MenubarCheckboxItem,
-  MenubarRadioGroup,
-  MenubarRadioItem,
-  MenubarSub,
-  MenubarSubTrigger,
-  MenubarSubContent,
-}

crude/ui/navigation-menu.tsx

@@ -1,168 +0,0 @@
-import * as React from "react"
-import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
-import { cva } from "class-variance-authority"
-import { ChevronDownIcon } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-function NavigationMenu({
-  className,
-  children,
-  viewport = true,
-  ...props
-}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
-  viewport?: boolean
-}) {
-  return (
-    <NavigationMenuPrimitive.Root
-      data-slot="navigation-menu"
-      data-viewport={viewport}
-      className={cn(
-        "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      {viewport && <NavigationMenuViewport />}
-    </NavigationMenuPrimitive.Root>
-  )
-}
-
-function NavigationMenuList({
-  className,
-  ...props
-}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {
-  return (
-    <NavigationMenuPrimitive.List
-      data-slot="navigation-menu-list"
-      className={cn(
-        "group flex flex-1 list-none items-center justify-center gap-1",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function NavigationMenuItem({
-  className,
-  ...props
-}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {
-  return (
-    <NavigationMenuPrimitive.Item
-      data-slot="navigation-menu-item"
-      className={cn("relative", className)}
-      {...props}
-    />
-  )
-}
-
-const navigationMenuTriggerStyle = cva(
-  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1"
-)
-
-function NavigationMenuTrigger({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {
-  return (
-    <NavigationMenuPrimitive.Trigger
-      data-slot="navigation-menu-trigger"
-      className={cn(navigationMenuTriggerStyle(), "group", className)}
-      {...props}
-    >
-      {children}{" "}
-      <ChevronDownIcon
-        className="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
-        aria-hidden="true"
-      />
-    </NavigationMenuPrimitive.Trigger>
-  )
-}
-
-function NavigationMenuContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {
-  return (
-    <NavigationMenuPrimitive.Content
-      data-slot="navigation-menu-content"
-      className={cn(
-        "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto",
-        "group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function NavigationMenuViewport({
-  className,
-  ...props
-}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {
-  return (
-    <div
-      className={cn(
-        "absolute top-full left-0 isolate z-50 flex justify-center"
-      )}
-    >
-      <NavigationMenuPrimitive.Viewport
-        data-slot="navigation-menu-viewport"
-        className={cn(
-          "origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]",
-          className
-        )}
-        {...props}
-      />
-    </div>
-  )
-}
-
-function NavigationMenuLink({
-  className,
-  ...props
-}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {
-  return (
-    <NavigationMenuPrimitive.Link
-      data-slot="navigation-menu-link"
-      className={cn(
-        "data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function NavigationMenuIndicator({
-  className,
-  ...props
-}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {
-  return (
-    <NavigationMenuPrimitive.Indicator
-      data-slot="navigation-menu-indicator"
-      className={cn(
-        "data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden",
-        className
-      )}
-      {...props}
-    >
-      <div className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
-    </NavigationMenuPrimitive.Indicator>
-  )
-}
-
-export {
-  NavigationMenu,
-  NavigationMenuList,
-  NavigationMenuItem,
-  NavigationMenuContent,
-  NavigationMenuTrigger,
-  NavigationMenuLink,
-  NavigationMenuIndicator,
-  NavigationMenuViewport,
-  navigationMenuTriggerStyle,
-}

crude/ui/pagination.tsx

@@ -1,127 +0,0 @@
-import * as React from "react"
-import {
-  ChevronLeftIcon,
-  ChevronRightIcon,
-  MoreHorizontalIcon,
-} from "lucide-react"
-
-import { cn } from "@/lib/utils"
-import { Button, buttonVariants } from "@/components/ui/button"
-
-function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
-  return (
-    <nav
-      role="navigation"
-      aria-label="pagination"
-      data-slot="pagination"
-      className={cn("mx-auto flex w-full justify-center", className)}
-      {...props}
-    />
-  )
-}
-
-function PaginationContent({
-  className,
-  ...props
-}: React.ComponentProps<"ul">) {
-  return (
-    <ul
-      data-slot="pagination-content"
-      className={cn("flex flex-row items-center gap-1", className)}
-      {...props}
-    />
-  )
-}
-
-function PaginationItem({ ...props }: React.ComponentProps<"li">) {
-  return <li data-slot="pagination-item" {...props} />
-}
-
-type PaginationLinkProps = {
-  isActive?: boolean
-} & Pick<React.ComponentProps<typeof Button>, "size"> &
-  React.ComponentProps<"a">
-
-function PaginationLink({
-  className,
-  isActive,
-  size = "icon",
-  ...props
-}: PaginationLinkProps) {
-  return (
-    <a
-      aria-current={isActive ? "page" : undefined}
-      data-slot="pagination-link"
-      data-active={isActive}
-      className={cn(
-        buttonVariants({
-          variant: isActive ? "outline" : "ghost",
-          size,
-        }),
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function PaginationPrevious({
-  className,
-  ...props
-}: React.ComponentProps<typeof PaginationLink>) {
-  return (
-    <PaginationLink
-      aria-label="Go to previous page"
-      size="default"
-      className={cn("gap-1 px-2.5 sm:pl-2.5", className)}
-      {...props}
-    >
-      <ChevronLeftIcon />
-      <span className="hidden sm:block">Previous</span>
-    </PaginationLink>
-  )
-}
-
-function PaginationNext({
-  className,
-  ...props
-}: React.ComponentProps<typeof PaginationLink>) {
-  return (
-    <PaginationLink
-      aria-label="Go to next page"
-      size="default"
-      className={cn("gap-1 px-2.5 sm:pr-2.5", className)}
-      {...props}
-    >
-      <span className="hidden sm:block">Next</span>
-      <ChevronRightIcon />
-    </PaginationLink>
-  )
-}
-
-function PaginationEllipsis({
-  className,
-  ...props
-}: React.ComponentProps<"span">) {
-  return (
-    <span
-      aria-hidden
-      data-slot="pagination-ellipsis"
-      className={cn("flex size-9 items-center justify-center", className)}
-      {...props}
-    >
-      <MoreHorizontalIcon className="size-4" />
-      <span className="sr-only">More pages</span>
-    </span>
-  )
-}
-
-export {
-  Pagination,
-  PaginationContent,
-  PaginationLink,
-  PaginationItem,
-  PaginationPrevious,
-  PaginationNext,
-  PaginationEllipsis,
-}

crude/ui/progress.tsx

@@ -1,31 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as ProgressPrimitive from "@radix-ui/react-progress"
-
-import { cn } from "@/lib/utils"
-
-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 }

crude/ui/radio-group.tsx

@@ -1,45 +0,0 @@
-"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"
-
-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 }

crude/ui/resizable.tsx

@@ -1,56 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { GripVerticalIcon } from "lucide-react"
-import * as ResizablePrimitive from "react-resizable-panels"
-
-import { cn } from "@/lib/utils"
-
-function ResizablePanelGroup({
-  className,
-  ...props
-}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) {
-  return (
-    <ResizablePrimitive.PanelGroup
-      data-slot="resizable-panel-group"
-      className={cn(
-        "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function ResizablePanel({
-  ...props
-}: React.ComponentProps<typeof ResizablePrimitive.Panel>) {
-  return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />
-}
-
-function ResizableHandle({
-  withHandle,
-  className,
-  ...props
-}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
-  withHandle?: boolean
-}) {
-  return (
-    <ResizablePrimitive.PanelResizeHandle
-      data-slot="resizable-handle"
-      className={cn(
-        "bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90",
-        className
-      )}
-      {...props}
-    >
-      {withHandle && (
-        <div className="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border">
-          <GripVerticalIcon className="size-2.5" />
-        </div>
-      )}
-    </ResizablePrimitive.PanelResizeHandle>
-  )
-}
-
-export { ResizablePanelGroup, ResizablePanel, ResizableHandle }

crude/ui/scroll-area.tsx

@@ -1,58 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
-
-import { cn } from "@/lib/utils"
-
-function ScrollArea({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
-  return (
-    <ScrollAreaPrimitive.Root
-      data-slot="scroll-area"
-      className={cn("relative", className)}
-      {...props}
-    >
-      <ScrollAreaPrimitive.Viewport
-        data-slot="scroll-area-viewport"
-        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
-      >
-        {children}
-      </ScrollAreaPrimitive.Viewport>
-      <ScrollBar />
-      <ScrollAreaPrimitive.Corner />
-    </ScrollAreaPrimitive.Root>
-  )
-}
-
-function ScrollBar({
-  className,
-  orientation = "vertical",
-  ...props
-}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
-  return (
-    <ScrollAreaPrimitive.ScrollAreaScrollbar
-      data-slot="scroll-area-scrollbar"
-      orientation={orientation}
-      className={cn(
-        "flex touch-none p-px transition-colors select-none",
-        orientation === "vertical" &&
-          "h-full w-2.5 border-l border-l-transparent",
-        orientation === "horizontal" &&
-          "h-2.5 flex-col border-t border-t-transparent",
-        className
-      )}
-      {...props}
-    >
-      <ScrollAreaPrimitive.ScrollAreaThumb
-        data-slot="scroll-area-thumb"
-        className="bg-border relative flex-1 rounded-full"
-      />
-    </ScrollAreaPrimitive.ScrollAreaScrollbar>
-  )
-}
-
-export { ScrollArea, ScrollBar }

crude/ui/separator.tsx

@@ -1,28 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as SeparatorPrimitive from "@radix-ui/react-separator"
-
-import { cn } from "@/lib/utils"
-
-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 }

crude/ui/sheet.tsx

@@ -1,139 +0,0 @@
-"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"
-
-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,
-}

crude/ui/sidebar.tsx

@@ -1,726 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, VariantProps } from "class-variance-authority"
-import { PanelLeftIcon } from "lucide-react"
-
-import { useIsMobile } from "@/hooks/use-mobile"
-import { cn } from "@/lib/utils"
-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"
-
-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-2",
-        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,
-}

crude/ui/skeleton.tsx

@@ -1,13 +0,0 @@
-import { cn } from "@/lib/utils"
-
-function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="skeleton"
-      className={cn("bg-accent animate-pulse rounded-md", className)}
-      {...props}
-    />
-  )
-}
-
-export { Skeleton }

crude/ui/slider.tsx

@@ -1,63 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as SliderPrimitive from "@radix-ui/react-slider"
-
-import { cn } from "@/lib/utils"
-
-function Slider({
-  className,
-  defaultValue,
-  value,
-  min = 0,
-  max = 100,
-  ...props
-}: React.ComponentProps<typeof SliderPrimitive.Root>) {
-  const _values = React.useMemo(
-    () =>
-      Array.isArray(value)
-        ? value
-        : Array.isArray(defaultValue)
-          ? defaultValue
-          : [min, max],
-    [value, defaultValue, min, max]
-  )
-
-  return (
-    <SliderPrimitive.Root
-      data-slot="slider"
-      defaultValue={defaultValue}
-      value={value}
-      min={min}
-      max={max}
-      className={cn(
-        "relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
-        className
-      )}
-      {...props}
-    >
-      <SliderPrimitive.Track
-        data-slot="slider-track"
-        className={cn(
-          "bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
-        )}
-      >
-        <SliderPrimitive.Range
-          data-slot="slider-range"
-          className={cn(
-            "bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
-          )}
-        />
-      </SliderPrimitive.Track>
-      {Array.from({ length: _values.length }, (_, index) => (
-        <SliderPrimitive.Thumb
-          data-slot="slider-thumb"
-          key={index}
-          className="border-primary bg-background ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
-        />
-      ))}
-    </SliderPrimitive.Root>
-  )
-}
-
-export { Slider }

crude/ui/sonner.tsx

@@ -1,25 +0,0 @@
-"use client"
-
-import { useTheme } from "next-themes"
-import { Toaster as Sonner, ToasterProps } from "sonner"
-
-const Toaster = ({ ...props }: ToasterProps) => {
-  const { theme = "system" } = useTheme()
-
-  return (
-    <Sonner
-      theme={theme as ToasterProps["theme"]}
-      className="toaster group"
-      style={
-        {
-          "--normal-bg": "var(--popover)",
-          "--normal-text": "var(--popover-foreground)",
-          "--normal-border": "var(--border)",
-        } as React.CSSProperties
-      }
-      {...props}
-    />
-  )
-}
-
-export { Toaster }

crude/ui/switch.tsx

@@ -1,31 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as SwitchPrimitive from "@radix-ui/react-switch"
-
-import { cn } from "@/lib/utils"
-
-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 }

crude/ui/table.tsx

@@ -1,116 +0,0 @@
-"use client"
-
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-
-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 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,
-  TableHeader,
-  TableBody,
-  TableFooter,
-  TableHead,
-  TableRow,
-  TableCell,
-  TableCaption,
-}

crude/ui/tabs.tsx

@@ -1,66 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as TabsPrimitive from "@radix-ui/react-tabs"
-
-import { cn } from "@/lib/utils"
-
-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(
-        "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function TabsTrigger({
-  className,
-  ...props
-}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
-  return (
-    <TabsPrimitive.Trigger
-      data-slot="tabs-trigger"
-      className={cn(
-        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        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, TabsList, TabsTrigger, TabsContent }

crude/ui/textarea.tsx

@@ -1,18 +0,0 @@
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-
-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 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 }

crude/ui/toast.tsx

@@ -1,129 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as ToastPrimitives from "@radix-ui/react-toast"
-import { cva, type VariantProps } from "class-variance-authority"
-import { X } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-const ToastProvider = ToastPrimitives.Provider
-
-const ToastViewport = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Viewport>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Viewport
-    ref={ref}
-    className={cn(
-      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
-      className
-    )}
-    {...props}
-  />
-))
-ToastViewport.displayName = ToastPrimitives.Viewport.displayName
-
-const toastVariants = cva(
-  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
-  {
-    variants: {
-      variant: {
-        default: "border bg-background text-foreground",
-        destructive:
-          "destructive group border-destructive bg-destructive text-destructive-foreground",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
-
-const Toast = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
-    VariantProps<typeof toastVariants>
->(({ className, variant, ...props }, ref) => {
-  return (
-    <ToastPrimitives.Root
-      ref={ref}
-      className={cn(toastVariants({ variant }), className)}
-      {...props}
-    />
-  )
-})
-Toast.displayName = ToastPrimitives.Root.displayName
-
-const ToastAction = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Action>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Action
-    ref={ref}
-    className={cn(
-      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
-      className
-    )}
-    {...props}
-  />
-))
-ToastAction.displayName = ToastPrimitives.Action.displayName
-
-const ToastClose = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Close>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Close
-    ref={ref}
-    className={cn(
-      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
-      className
-    )}
-    toast-close=""
-    {...props}
-  >
-    <X className="h-4 w-4" />
-  </ToastPrimitives.Close>
-))
-ToastClose.displayName = ToastPrimitives.Close.displayName
-
-const ToastTitle = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Title>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Title
-    ref={ref}
-    className={cn("text-sm font-semibold", className)}
-    {...props}
-  />
-))
-ToastTitle.displayName = ToastPrimitives.Title.displayName
-
-const ToastDescription = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Description>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Description
-    ref={ref}
-    className={cn("text-sm opacity-90", className)}
-    {...props}
-  />
-))
-ToastDescription.displayName = ToastPrimitives.Description.displayName
-
-type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
-
-type ToastActionElement = React.ReactElement<typeof ToastAction>
-
-export {
-  type ToastProps,
-  type ToastActionElement,
-  ToastProvider,
-  ToastViewport,
-  Toast,
-  ToastTitle,
-  ToastDescription,
-  ToastClose,
-  ToastAction,
-}

crude/ui/toaster.tsx

@@ -1,35 +0,0 @@
-"use client"
-
-import { useToast } from "@/hooks/use-toast"
-import {
-  Toast,
-  ToastClose,
-  ToastDescription,
-  ToastProvider,
-  ToastTitle,
-  ToastViewport,
-} from "@/components/ui/toast"
-
-export function Toaster() {
-  const { toasts } = useToast()
-
-  return (
-    <ToastProvider>
-      {toasts.map(function ({ id, title, description, action, ...props }) {
-        return (
-          <Toast key={id} {...props}>
-            <div className="grid gap-1">
-              {title && <ToastTitle>{title}</ToastTitle>}
-              {description && (
-                <ToastDescription>{description}</ToastDescription>
-              )}
-            </div>
-            {action}
-            <ToastClose />
-          </Toast>
-        )
-      })}
-      <ToastViewport />
-    </ToastProvider>
-  )
-}

crude/ui/toggle-group.tsx

@@ -1,73 +0,0 @@
-"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"
-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 }

crude/ui/toggle.tsx

@@ -1,47 +0,0 @@
-"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"
-
-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 }

crude/ui/tooltip.tsx

@@ -1,61 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as TooltipPrimitive from "@radix-ui/react-tooltip"
-
-import { cn } from "@/lib/utils"
-
-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-primary text-primary-foreground 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-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
-      </TooltipPrimitive.Content>
-    </TooltipPrimitive.Portal>
-  )
-}
-
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

crude/ui/use-mobile.tsx

@@ -1,19 +0,0 @@
-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
-}

crude/ui/use-toast.ts

@@ -1,194 +0,0 @@
-"use client"
-
-// Inspired by react-hot-toast library
-import * as React from "react"
-
-import type {
-  ToastActionElement,
-  ToastProps,
-} from "@/components/ui/toast"
-
-const TOAST_LIMIT = 1
-const TOAST_REMOVE_DELAY = 1000000
-
-type ToasterToast = ToastProps & {
-  id: string
-  title?: React.ReactNode
-  description?: React.ReactNode
-  action?: ToastActionElement
-}
-
-const actionTypes = {
-  ADD_TOAST: "ADD_TOAST",
-  UPDATE_TOAST: "UPDATE_TOAST",
-  DISMISS_TOAST: "DISMISS_TOAST",
-  REMOVE_TOAST: "REMOVE_TOAST",
-} as const
-
-let count = 0
-
-function genId() {
-  count = (count + 1) % Number.MAX_SAFE_INTEGER
-  return count.toString()
-}
-
-type ActionType = typeof actionTypes
-
-type Action =
-  | {
-      type: ActionType["ADD_TOAST"]
-      toast: ToasterToast
-    }
-  | {
-      type: ActionType["UPDATE_TOAST"]
-      toast: Partial<ToasterToast>
-    }
-  | {
-      type: ActionType["DISMISS_TOAST"]
-      toastId?: ToasterToast["id"]
-    }
-  | {
-      type: ActionType["REMOVE_TOAST"]
-      toastId?: ToasterToast["id"]
-    }
-
-interface State {
-  toasts: ToasterToast[]
-}
-
-const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
-
-const addToRemoveQueue = (toastId: string) => {
-  if (toastTimeouts.has(toastId)) {
-    return
-  }
-
-  const timeout = setTimeout(() => {
-    toastTimeouts.delete(toastId)
-    dispatch({
-      type: "REMOVE_TOAST",
-      toastId: toastId,
-    })
-  }, TOAST_REMOVE_DELAY)
-
-  toastTimeouts.set(toastId, timeout)
-}
-
-export const reducer = (state: State, action: Action): State => {
-  switch (action.type) {
-    case "ADD_TOAST":
-      return {
-        ...state,
-        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
-      }
-
-    case "UPDATE_TOAST":
-      return {
-        ...state,
-        toasts: state.toasts.map((t) =>
-          t.id === action.toast.id ? { ...t, ...action.toast } : t
-        ),
-      }
-
-    case "DISMISS_TOAST": {
-      const { toastId } = action
-
-      // ! Side effects ! - This could be extracted into a dismissToast() action,
-      // but I'll keep it here for simplicity
-      if (toastId) {
-        addToRemoveQueue(toastId)
-      } else {
-        state.toasts.forEach((toast) => {
-          addToRemoveQueue(toast.id)
-        })
-      }
-
-      return {
-        ...state,
-        toasts: state.toasts.map((t) =>
-          t.id === toastId || toastId === undefined
-            ? {
-                ...t,
-                open: false,
-              }
-            : t
-        ),
-      }
-    }
-    case "REMOVE_TOAST":
-      if (action.toastId === undefined) {
-        return {
-          ...state,
-          toasts: [],
-        }
-      }
-      return {
-        ...state,
-        toasts: state.toasts.filter((t) => t.id !== action.toastId),
-      }
-  }
-}
-
-const listeners: Array<(state: State) => void> = []
-
-let memoryState: State = { toasts: [] }
-
-function dispatch(action: Action) {
-  memoryState = reducer(memoryState, action)
-  listeners.forEach((listener) => {
-    listener(memoryState)
-  })
-}
-
-type Toast = Omit<ToasterToast, "id">
-
-function toast({ ...props }: Toast) {
-  const id = genId()
-
-  const update = (props: ToasterToast) =>
-    dispatch({
-      type: "UPDATE_TOAST",
-      toast: { ...props, id },
-    })
-  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
-
-  dispatch({
-    type: "ADD_TOAST",
-    toast: {
-      ...props,
-      id,
-      open: true,
-      onOpenChange: (open) => {
-        if (!open) dismiss()
-      },
-    },
-  })
-
-  return {
-    id: id,
-    dismiss,
-    update,
-  }
-}
-
-function useToast() {
-  const [state, setState] = React.useState<State>(memoryState)
-
-  React.useEffect(() => {
-    listeners.push(setState)
-    return () => {
-      const index = listeners.indexOf(setState)
-      if (index > -1) {
-        listeners.splice(index, 1)
-      }
-    }
-  }, [state])
-
-  return {
-    ...state,
-    toast,
-    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
-  }
-}
-
-export { useToast, toast }

crude/use-mobile.ts

@@ -1,19 +0,0 @@
-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
-}

crude/utils.ts

@@ -1,6 +0,0 @@
-import { clsx, type ClassValue } from "clsx"
-import { twMerge } from "tailwind-merge"
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
-}

et --hard 23fad33

@@ -0,0 +1,45 @@
+a0d527c (HEAD -> feature/settings) ajuste no package.json da raiz
+23fad33 (origin/feature/settings) feat: implement settings module
+c36a16b (develop) feat: ajustes na seção de laudos, cpf, imagem e assinatura digital
+913fd6a (origin/feature/doctor-laudo, feature/api-medic) Merge pull request 'feat(api): implementação e integração das APIs de médicos' (#12) from feature/api-medicos into develop
+791d31a (origin/feature/api-medicos, feature/api-medicos) feat(api): implementação e integração das APIs de médicos
+e53d7fb (feature/crud-medi-api) Merge pull request 'feature/scheduling' (#11) from feature/scheduling into develop
+7aadcef Fix: folder organization
+c6b18b7 Merge branch 'develop' of https://git.popcode.com.br/RiseUP/riseup-squad20 into feature/scheduling
+945c6ea fix: Calendar and sidebar
+dfb70c6 Merge pull request 'feature/doctor-register' (#10) from feature/doctor-register into develop
+30b5609 feat: adds new fields and cards to the physician registry
+9dfba10 Merge branch 'develop' into feature/scheduling
+f435ade Ajuste no .gitignore
+9c7ce7d Finalizando merge da branch develop com origin/develop
+76feb4b feat:implements CRUD for doctors
+70c67e4 Merge pull request 'change doctors page' (#8) from feature/changes-doctors-painel into develop
+ba64fde add: new doctor page
+a7c9c90 chore: update components config
+a5d89b3 Merge pull request 'feature/image-doctor' (#7) from feature/image-doctor into develop
+0d416ca (origin/feature/image-doctor) resolvendo erro de imagens
+e405cc5 WIP: alterações locais
+bb4cc38 Ajustes no .gitignore
+953a4e7 WIP: alterações locais
+debc92d chore(calendar): adjust naming for calendar component consistency
+ae637c4 fix/errors-medical-page
+df530f7 Merge pull request 'Adicionando calendario interativo do medico' (#6) from feature/crud-medico into develop
+94839cc (origin/feature/crud-medico, feature/crud-medico) Adicionando calendario interativo do medico
+93a4389 fix(merge): prefer feature versions (layout.tsx, package-lock.json)
+f2db866 (feature/patient-register) fix(merge): resolve conflicts between develop and feature/patient-register
+cdd44da chore: save changes before switching branch
+b2a9ea0 (origin/feature/patient-register) feat(api): add and wire all mock endpoints
+a1ba4e5 Merge pull request 'feature/scheduling' (#5) from feature/scheduling into develop
+40f05ca (origin/feature/scheduling) ajeitando erro dos botões
+a9d093e  adicionando agendamento-incompleto
+6ca8524 Merge pull request 'feat: add medical page' (#4) from feature/crud-medico into develop
+7385e64 feat: add medical page
+a44e9bc Merge branch 'feature/patient-register' of https://git.popcode.com.br/RiseUP/riseup-squad20 into feature/patient-register
+372383f feat: connect patient registration form to create patient API
+3cce8a9 fix: fix ref error in actions menu
+91c84b6 fix: secure setting of onOpenChange on the patient form
+8258fac feat: implement patient recorder
+20d070e (origin/feature/patient-list, feature/patient-list) chore: remove Website folderfrom repository
+0ba1590 feat: add initial project files and patient list
+631f7f2 (origin/feature/cadastro-pacientes, origin/developer, feature/cadastro-pacientes) feat: add initial structure
+6414f69 (origin/main, origin/HEAD) Initial commit

next.config.mjs

@@ -0,0 +1,14 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  async rewrites() {
+    return [
+      // Proxy local → Supabase (bypass CORS no navegador)
+      {
+        source: '/proxy/supabase/:path*',
+        destination: 'https://yuanqfswhberkoevtmfr.supabase.co/:path*',
+      },
+    ];
+  },
+};
+
+export default nextConfig;

package.json

@@ -0,0 +1,10 @@
+{
+  "dependencies": {
+    "@headlessui/react": "^2.2.7",
+    "@heroicons/react": "^2.2.0",
+    "@supabase/supabase-js": "^2.75.0",
+    "date-fns": "^4.1.0",
+    "react-big-calendar": "^1.19.4",
+    "react-signature-canvas": "^1.1.0-alpha.2"
+  }
+}

pnpm-lock.yaml

@@ -0,0 +1,622 @@
+lockfileVersion: '9.0'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
+importers:
+
+  .:
+    dependencies:
+      '@headlessui/react':
+        specifier: ^2.2.7
+        version: 2.2.9(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@heroicons/react':
+        specifier: ^2.2.0
+        version: 2.2.0(react@19.2.0)
+      '@supabase/supabase-js':
+        specifier: ^2.75.0
+        version: 2.79.0
+      date-fns:
+        specifier: ^4.1.0
+        version: 4.1.0
+      react-big-calendar:
+        specifier: ^1.19.4
+        version: 1.19.4(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      react-signature-canvas:
+        specifier: ^1.1.0-alpha.2
+        version: 1.1.0-alpha.2(@types/react@19.2.2)(prop-types@15.8.1)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+
+packages:
+
+  '@babel/runtime@7.28.4':
+    resolution: {integrity: sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==}
+    engines: {node: '>=6.9.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/react@0.26.28':
+    resolution: {integrity: sha512-yORQuuAtVpiRjpMhdc0wJj06b9JFjrYF4qp96j++v2NBpbi6SEGF7donUJ3TMieerQ6qVkAv1tgr7L4r5roTqw==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+
+  '@floating-ui/utils@0.2.10':
+    resolution: {integrity: sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==}
+
+  '@headlessui/react@2.2.9':
+    resolution: {integrity: sha512-Mb+Un58gwBn0/yWZfyrCh0TJyurtT+dETj7YHleylHk5od3dv2XqETPGWMyQ5/7sYN7oWdyM1u9MvC0OC8UmzQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      react: ^18 || ^19 || ^19.0.0-rc
+      react-dom: ^18 || ^19 || ^19.0.0-rc
+
+  '@heroicons/react@2.2.0':
+    resolution: {integrity: sha512-LMcepvRaS9LYHJGsF0zzmgKCUim/X3N/DQKc4jepAXJ7l8QxJ1PmxJzqplF2Z3FE4PqBAIGyJAQ/w4B5dsqbtQ==}
+    peerDependencies:
+      react: '>= 16 || ^19.0.0-rc'
+
+  '@popperjs/core@2.11.8':
+    resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==}
+
+  '@react-aria/focus@3.21.2':
+    resolution: {integrity: sha512-JWaCR7wJVggj+ldmM/cb/DXFg47CXR55lznJhZBh4XVqJjMKwaOOqpT5vNN7kpC1wUpXicGNuDnJDN1S/+6dhQ==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+      react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+
+  '@react-aria/interactions@3.25.6':
+    resolution: {integrity: sha512-5UgwZmohpixwNMVkMvn9K1ceJe6TzlRlAfuYoQDUuOkk62/JVJNDLAPKIf5YMRc7d2B0rmfgaZLMtbREb0Zvkw==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+      react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+
+  '@react-aria/ssr@3.9.10':
+    resolution: {integrity: sha512-hvTm77Pf+pMBhuBm760Li0BVIO38jv1IBws1xFm1NoL26PU+fe+FMW5+VZWyANR6nYL65joaJKZqOdTQMkO9IQ==}
+    engines: {node: '>= 12'}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+
+  '@react-aria/utils@3.31.0':
+    resolution: {integrity: sha512-ABOzCsZrWzf78ysswmguJbx3McQUja7yeGj6/vZo4JVsZNlxAN+E9rs381ExBRI0KzVo6iBTeX5De8eMZPJXig==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+      react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+
+  '@react-stately/flags@3.1.2':
+    resolution: {integrity: sha512-2HjFcZx1MyQXoPqcBGALwWWmgFVUk2TuKVIQxCbRq7fPyWXIl6VHcakCLurdtYC2Iks7zizvz0Idv48MQ38DWg==}
+
+  '@react-stately/utils@3.10.8':
+    resolution: {integrity: sha512-SN3/h7SzRsusVQjQ4v10LaVsDc81jyyR0DD5HnsQitm/I5WDpaSr2nRHtyloPFU48jlql1XX/S04T2DLQM7Y3g==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+
+  '@react-types/shared@3.32.1':
+    resolution: {integrity: sha512-famxyD5emrGGpFuUlgOP6fVW2h/ZaF405G5KDi3zPHzyjAWys/8W6NAVJtNbkCkhedmvL0xOhvt8feGXyXaw5w==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+
+  '@restart/hooks@0.4.16':
+    resolution: {integrity: sha512-f7aCv7c+nU/3mF7NWLtVVr0Ra80RqsO89hO72r+Y/nvQr5+q0UFGkocElTH6MJApvReVh6JHUFYn2cw1WdHF3w==}
+    peerDependencies:
+      react: '>=16.8.0'
+
+  '@supabase/auth-js@2.79.0':
+    resolution: {integrity: sha512-p2GKvdbF9d/6C+dtS6iNcSicPr6eUfkvovD60HWlWsD+oOjC483DzFWrzGjNpBwnswhfMRP8Qn3rYA0VWaOfjw==}
+    engines: {node: '>=20.0.0'}
+
+  '@supabase/functions-js@2.79.0':
+    resolution: {integrity: sha512-WaiU6b+Z+ZfJOjFhpMKdajt42weiFUrA6TVW5oGd6WfPGajFiKZJJIAvuK0g7KDKaYowtQrOo5+Ais+PcuZ1qA==}
+    engines: {node: '>=20.0.0'}
+
+  '@supabase/postgrest-js@2.79.0':
+    resolution: {integrity: sha512-2i8EFm3/49ecjt6dk/TGVROBbtOmhryiC4NL3u0FBIrm2hqj+FvbELv1jjM6r+a6abnh+uzIV/bFsWHAa/k3/w==}
+    engines: {node: '>=20.0.0'}
+
+  '@supabase/realtime-js@2.79.0':
+    resolution: {integrity: sha512-foaZujNBycAqLizUcuLyyFyDitfPnEMVO4CiKXNwaMCDVMoVX4QR6n4gpJLUC5BGzc20Mte6vSJLbk4MN90Prw==}
+    engines: {node: '>=20.0.0'}
+
+  '@supabase/storage-js@2.79.0':
+    resolution: {integrity: sha512-PLSeKX1/BZhGWCT972w4TvVOCcw/xh4TsowtUBiZvPx4OdHT7dB1q0DXKwVUfKbWk5UUC+6XAq4ZU/ZCtdgn6w==}
+    engines: {node: '>=20.0.0'}
+
+  '@supabase/supabase-js@2.79.0':
+    resolution: {integrity: sha512-x9ndEaBSwoRnFOOZGhh2CeV69Uz4B/EOSGCbKysDhTiYakiCAdDXaNuLPluviKU/Aot+F7BglXZDZ0YJ3GpGrw==}
+    engines: {node: '>=20.0.0'}
+
+  '@swc/helpers@0.5.17':
+    resolution: {integrity: sha512-5IKx/Y13RsYd+sauPb2x+U/xZikHjolzfuDgTAl/Tdf3Q8rslRvC19NKDLgAJQ6wsqADk10ntlv08nPFw/gO/A==}
+
+  '@tanstack/react-virtual@3.13.12':
+    resolution: {integrity: sha512-Gd13QdxPSukP8ZrkbgS2RwoZseTTbQPLnQEn7HY/rqtM+8Zt95f7xKC7N0EsKs7aoz0WzZ+fditZux+F8EzYxA==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
+  '@tanstack/virtual-core@3.13.12':
+    resolution: {integrity: sha512-1YBOJfRHV4sXUmWsFSf5rQor4Ss82G8dQWLRbnk3GA4jeP8hQt1hxXh0tmflpC0dz3VgEv/1+qwPyLeWkQuPFA==}
+
+  '@types/node@24.10.0':
+    resolution: {integrity: sha512-qzQZRBqkFsYyaSWXuEHc2WR9c0a0CXwiE5FWUvn7ZM+vdy1uZLfCunD38UzhuB7YN/J11ndbDBcTmOdxJo9Q7A==}
+
+  '@types/phoenix@1.6.6':
+    resolution: {integrity: sha512-PIzZZlEppgrpoT2QgbnDU+MMzuR6BbCjllj0bM70lWoejMeNJAxCchxnv7J3XFkI8MpygtRpzXrIlmWUBclP5A==}
+
+  '@types/react@19.2.2':
+    resolution: {integrity: sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA==}
+
+  '@types/signature_pad@2.3.6':
+    resolution: {integrity: sha512-v3j92gCQJoxomHhd+yaG4Vsf8tRS/XbzWKqDv85UsqjMGy4zhokuwKe4b6vhbgncKkh+thF+gpz6+fypTtnFqQ==}
+
+  '@types/warning@3.0.3':
+    resolution: {integrity: sha512-D1XC7WK8K+zZEveUPY+cf4+kgauk8N4eHr/XIHXGlGYkHLud6hK9lYfZk1ry1TNh798cZUCgb6MqGEG8DkJt6Q==}
+
+  '@types/ws@8.18.1':
+    resolution: {integrity: sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg==}
+
+  clsx@1.2.1:
+    resolution: {integrity: sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==}
+    engines: {node: '>=6'}
+
+  clsx@2.1.1:
+    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
+    engines: {node: '>=6'}
+
+  csstype@3.1.3:
+    resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
+
+  date-arithmetic@4.1.0:
+    resolution: {integrity: sha512-QWxYLR5P/6GStZcdem+V1xoto6DMadYWpMXU82ES3/RfR3Wdwr3D0+be7mgOJ+Ov0G9D5Dmb9T17sNLQYj9XOg==}
+
+  date-fns@4.1.0:
+    resolution: {integrity: sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==}
+
+  dayjs@1.11.19:
+    resolution: {integrity: sha512-t5EcLVS6QPBNqM2z8fakk/NKel+Xzshgt8FFKAn+qwlD1pzZWxh0nVCrvFK7ZDb6XucZeF9z8C7CBWTRIVApAw==}
+
+  dequal@2.0.3:
+    resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
+    engines: {node: '>=6'}
+
+  dom-helpers@5.2.1:
+    resolution: {integrity: sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==}
+
+  globalize@0.1.1:
+    resolution: {integrity: sha512-5e01v8eLGfuQSOvx2MsDMOWS0GFtCx1wPzQSmcHw4hkxFzrQDBO3Xwg/m8Hr/7qXMrHeOIE29qWVzyv06u1TZA==}
+
+  invariant@2.2.4:
+    resolution: {integrity: sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==}
+
+  js-tokens@4.0.0:
+    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
+
+  lodash-es@4.17.21:
+    resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==}
+
+  lodash@4.17.21:
+    resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
+
+  loose-envify@1.4.0:
+    resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
+    hasBin: true
+
+  luxon@3.7.2:
+    resolution: {integrity: sha512-vtEhXh/gNjI9Yg1u4jX/0YVPMvxzHuGgCm6tC5kZyb08yjGWGnqAjGJvcXbqQR2P3MyMEFnRbpcdFS6PBcLqew==}
+    engines: {node: '>=12'}
+
+  memoize-one@6.0.0:
+    resolution: {integrity: sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==}
+
+  moment-timezone@0.5.48:
+    resolution: {integrity: sha512-f22b8LV1gbTO2ms2j2z13MuPogNoh5UzxL3nzNAYKGraILnbGc9NEE6dyiiiLv46DGRb8A4kg8UKWLjPthxBHw==}
+
+  moment@2.30.1:
+    resolution: {integrity: sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==}
+
+  object-assign@4.1.1:
+    resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
+    engines: {node: '>=0.10.0'}
+
+  prop-types@15.8.1:
+    resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
+
+  react-big-calendar@1.19.4:
+    resolution: {integrity: sha512-FrvbDx2LF6JAWFD96LU1jjloppC5OgIvMYUYIPzAw5Aq+ArYFPxAjLqXc4DyxfsQDN0TJTMuS/BIbcSB7Pg0YA==}
+    peerDependencies:
+      react: ^16.14.0 || ^17 || ^18 || ^19
+      react-dom: ^16.14.0 || ^17 || ^18 || ^19
+
+  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-lifecycles-compat@3.0.4:
+    resolution: {integrity: sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==}
+
+  react-overlays@5.2.1:
+    resolution: {integrity: sha512-GLLSOLWr21CqtJn8geSwQfoJufdt3mfdsnIiQswouuQ2MMPns+ihZklxvsTDKD3cR2tF8ELbi5xUsvqVhR6WvA==}
+    peerDependencies:
+      react: '>=16.3.0'
+      react-dom: '>=16.3.0'
+
+  react-signature-canvas@1.1.0-alpha.2:
+    resolution: {integrity: sha512-tKUNk3Gmh04Ug4K8p5g8Is08BFUKvbXxi0PyetQ/f8OgCBzcx4vqNf9+OArY/TdNdfHtswXQNRwZD6tyELjkjQ==}
+    peerDependencies:
+      '@types/prop-types': ^15.7.3
+      '@types/react': 0.14 - 19
+      prop-types: ^15.5.8
+      react: 0.14 - 19
+      react-dom: 0.14 - 19
+    peerDependenciesMeta:
+      '@types/prop-types':
+        optional: true
+      '@types/react':
+        optional: true
+
+  react@19.2.0:
+    resolution: {integrity: sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==}
+    engines: {node: '>=0.10.0'}
+
+  scheduler@0.27.0:
+    resolution: {integrity: sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==}
+
+  signature_pad@2.3.2:
+    resolution: {integrity: sha512-peYXLxOsIY6MES2TrRLDiNg2T++8gGbpP2yaC+6Ohtxr+a2dzoaqWosWDY9sWqTAAk6E/TyQO+LJw9zQwyu5kA==}
+
+  tabbable@6.3.0:
+    resolution: {integrity: sha512-EIHvdY5bPLuWForiR/AN2Bxngzpuwn1is4asboytXtpTgsArc+WmSJKVLlhdh71u7jFcryDqB2A8lQvj78MkyQ==}
+
+  trim-canvas@0.1.2:
+    resolution: {integrity: sha512-nd4Ga3iLFV94mdhW9JFMLpQbHUyCQuhFOD71PEAt1NjtMD5wbZctzhX8c3agHNybMR5zXD1XTGoIEWk995E6pQ==}
+
+  tslib@2.8.1:
+    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
+
+  uncontrollable@7.2.1:
+    resolution: {integrity: sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==}
+    peerDependencies:
+      react: '>=15.0.0'
+
+  undici-types@7.16.0:
+    resolution: {integrity: sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==}
+
+  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
+
+  warning@4.0.3:
+    resolution: {integrity: sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==}
+
+  ws@8.18.3:
+    resolution: {integrity: sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==}
+    engines: {node: '>=10.0.0'}
+    peerDependencies:
+      bufferutil: ^4.0.1
+      utf-8-validate: '>=5.0.2'
+    peerDependenciesMeta:
+      bufferutil:
+        optional: true
+      utf-8-validate:
+        optional: true
+
+snapshots:
+
+  '@babel/runtime@7.28.4': {}
+
+  '@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/react@0.26.28(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)
+      '@floating-ui/utils': 0.2.10
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+      tabbable: 6.3.0
+
+  '@floating-ui/utils@0.2.10': {}
+
+  '@headlessui/react@2.2.9(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@floating-ui/react': 0.26.28(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@react-aria/focus': 3.21.2(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@react-aria/interactions': 3.25.6(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@tanstack/react-virtual': 3.13.12(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)
+      use-sync-external-store: 1.6.0(react@19.2.0)
+
+  '@heroicons/react@2.2.0(react@19.2.0)':
+    dependencies:
+      react: 19.2.0
+
+  '@popperjs/core@2.11.8': {}
+
+  '@react-aria/focus@3.21.2(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@react-aria/interactions': 3.25.6(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@react-aria/utils': 3.31.0(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@react-types/shared': 3.32.1(react@19.2.0)
+      '@swc/helpers': 0.5.17
+      clsx: 2.1.1
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+
+  '@react-aria/interactions@3.25.6(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@react-aria/ssr': 3.9.10(react@19.2.0)
+      '@react-aria/utils': 3.31.0(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@react-stately/flags': 3.1.2
+      '@react-types/shared': 3.32.1(react@19.2.0)
+      '@swc/helpers': 0.5.17
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+
+  '@react-aria/ssr@3.9.10(react@19.2.0)':
+    dependencies:
+      '@swc/helpers': 0.5.17
+      react: 19.2.0
+
+  '@react-aria/utils@3.31.0(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@react-aria/ssr': 3.9.10(react@19.2.0)
+      '@react-stately/flags': 3.1.2
+      '@react-stately/utils': 3.10.8(react@19.2.0)
+      '@react-types/shared': 3.32.1(react@19.2.0)
+      '@swc/helpers': 0.5.17
+      clsx: 2.1.1
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+
+  '@react-stately/flags@3.1.2':
+    dependencies:
+      '@swc/helpers': 0.5.17
+
+  '@react-stately/utils@3.10.8(react@19.2.0)':
+    dependencies:
+      '@swc/helpers': 0.5.17
+      react: 19.2.0
+
+  '@react-types/shared@3.32.1(react@19.2.0)':
+    dependencies:
+      react: 19.2.0
+
+  '@restart/hooks@0.4.16(react@19.2.0)':
+    dependencies:
+      dequal: 2.0.3
+      react: 19.2.0
+
+  '@supabase/auth-js@2.79.0':
+    dependencies:
+      tslib: 2.8.1
+
+  '@supabase/functions-js@2.79.0':
+    dependencies:
+      tslib: 2.8.1
+
+  '@supabase/postgrest-js@2.79.0':
+    dependencies:
+      tslib: 2.8.1
+
+  '@supabase/realtime-js@2.79.0':
+    dependencies:
+      '@types/phoenix': 1.6.6
+      '@types/ws': 8.18.1
+      tslib: 2.8.1
+      ws: 8.18.3
+    transitivePeerDependencies:
+      - bufferutil
+      - utf-8-validate
+
+  '@supabase/storage-js@2.79.0':
+    dependencies:
+      tslib: 2.8.1
+
+  '@supabase/supabase-js@2.79.0':
+    dependencies:
+      '@supabase/auth-js': 2.79.0
+      '@supabase/functions-js': 2.79.0
+      '@supabase/postgrest-js': 2.79.0
+      '@supabase/realtime-js': 2.79.0
+      '@supabase/storage-js': 2.79.0
+    transitivePeerDependencies:
+      - bufferutil
+      - utf-8-validate
+
+  '@swc/helpers@0.5.17':
+    dependencies:
+      tslib: 2.8.1
+
+  '@tanstack/react-virtual@3.13.12(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@tanstack/virtual-core': 3.13.12
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+
+  '@tanstack/virtual-core@3.13.12': {}
+
+  '@types/node@24.10.0':
+    dependencies:
+      undici-types: 7.16.0
+
+  '@types/phoenix@1.6.6': {}
+
+  '@types/react@19.2.2':
+    dependencies:
+      csstype: 3.1.3
+
+  '@types/signature_pad@2.3.6': {}
+
+  '@types/warning@3.0.3': {}
+
+  '@types/ws@8.18.1':
+    dependencies:
+      '@types/node': 24.10.0
+
+  clsx@1.2.1: {}
+
+  clsx@2.1.1: {}
+
+  csstype@3.1.3: {}
+
+  date-arithmetic@4.1.0: {}
+
+  date-fns@4.1.0: {}
+
+  dayjs@1.11.19: {}
+
+  dequal@2.0.3: {}
+
+  dom-helpers@5.2.1:
+    dependencies:
+      '@babel/runtime': 7.28.4
+      csstype: 3.1.3
+
+  globalize@0.1.1: {}
+
+  invariant@2.2.4:
+    dependencies:
+      loose-envify: 1.4.0
+
+  js-tokens@4.0.0: {}
+
+  lodash-es@4.17.21: {}
+
+  lodash@4.17.21: {}
+
+  loose-envify@1.4.0:
+    dependencies:
+      js-tokens: 4.0.0
+
+  luxon@3.7.2: {}
+
+  memoize-one@6.0.0: {}
+
+  moment-timezone@0.5.48:
+    dependencies:
+      moment: 2.30.1
+
+  moment@2.30.1: {}
+
+  object-assign@4.1.1: {}
+
+  prop-types@15.8.1:
+    dependencies:
+      loose-envify: 1.4.0
+      object-assign: 4.1.1
+      react-is: 16.13.1
+
+  react-big-calendar@1.19.4(react-dom@19.2.0(react@19.2.0))(react@19.2.0):
+    dependencies:
+      '@babel/runtime': 7.28.4
+      clsx: 1.2.1
+      date-arithmetic: 4.1.0
+      dayjs: 1.11.19
+      dom-helpers: 5.2.1
+      globalize: 0.1.1
+      invariant: 2.2.4
+      lodash: 4.17.21
+      lodash-es: 4.17.21
+      luxon: 3.7.2
+      memoize-one: 6.0.0
+      moment: 2.30.1
+      moment-timezone: 0.5.48
+      prop-types: 15.8.1
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+      react-overlays: 5.2.1(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      uncontrollable: 7.2.1(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-lifecycles-compat@3.0.4: {}
+
+  react-overlays@5.2.1(react-dom@19.2.0(react@19.2.0))(react@19.2.0):
+    dependencies:
+      '@babel/runtime': 7.28.4
+      '@popperjs/core': 2.11.8
+      '@restart/hooks': 0.4.16(react@19.2.0)
+      '@types/warning': 3.0.3
+      dom-helpers: 5.2.1
+      prop-types: 15.8.1
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+      uncontrollable: 7.2.1(react@19.2.0)
+      warning: 4.0.3
+
+  react-signature-canvas@1.1.0-alpha.2(@types/react@19.2.2)(prop-types@15.8.1)(react-dom@19.2.0(react@19.2.0))(react@19.2.0):
+    dependencies:
+      '@babel/runtime': 7.28.4
+      '@types/signature_pad': 2.3.6
+      prop-types: 15.8.1
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+      signature_pad: 2.3.2
+      trim-canvas: 0.1.2
+    optionalDependencies:
+      '@types/react': 19.2.2
+
+  react@19.2.0: {}
+
+  scheduler@0.27.0: {}
+
+  signature_pad@2.3.2: {}
+
+  tabbable@6.3.0: {}
+
+  trim-canvas@0.1.2: {}
+
+  tslib@2.8.1: {}
+
+  uncontrollable@7.2.1(react@19.2.0):
+    dependencies:
+      '@babel/runtime': 7.28.4
+      '@types/react': 19.2.2
+      invariant: 2.2.4
+      react: 19.2.0
+      react-lifecycles-compat: 3.0.4
+
+  undici-types@7.16.0: {}
+
+  use-sync-external-store@1.6.0(react@19.2.0):
+    dependencies:
+      react: 19.2.0
+
+  warning@4.0.3:
+    dependencies:
+      loose-envify: 1.4.0
+
+  ws@8.18.3: {}

susconecta/.gitignore

@@ -24,4 +24,6 @@ yarn-error.log*
 
 # typescript
 *.tsbuildinfo
-next-env.d.ts
+next-env.d.tsriseup-squad20/
+susconecta/riseup-squad20/
+riseup-squad20/

susconecta/.vscode/tasks.json

@@ -0,0 +1,14 @@
+{
+	"version": "2.0.0",
+	"tasks": [
+		{
+			"label": "Build Next.js susconecta",
+			"type": "shell",
+			"command": "npm run build",
+			"problemMatcher": [
+				"$tsc"
+			],
+			"group": "build"
+		}
+	]
+}

susconecta/app/(auth)/login-admin/page-new.tsx

@@ -0,0 +1,17 @@
+'use client'
+import { useEffect } from 'react'
+import { useRouter } from 'next/navigation'
+
+export default function LoginAdminRedirect() {
+  const router = useRouter()
+
+  useEffect(() => {
+    router.replace('/login')
+  }, [router])
+
+  return (
+    <div className="min-h-screen flex items-center justify-center">
+      <p>Redirecionando para a página de login...</p>
+    </div>
+  )
+}

susconecta/app/(auth)/login-admin/page.tsx

@@ -0,0 +1,17 @@
+'use client'
+import { useEffect } from 'react'
+import { useRouter } from 'next/navigation'
+
+export default function LoginAdminRedirect() {
+  const router = useRouter()
+
+  useEffect(() => {
+    router.replace('/login')
+  }, [router])
+
+  return (
+    <div className="min-h-screen flex items-center justify-center">
+      <p>Redirecionando para a página de login...</p>
+    </div>
+  )
+}

susconecta/app/(auth)/login-paciente/page.tsx

@@ -0,0 +1,17 @@
+'use client'
+import { useEffect } from 'react'
+import { useRouter } from 'next/navigation'
+
+export default function LoginPacienteRedirect() {
+  const router = useRouter()
+
+  useEffect(() => {
+    router.replace('/login')
+  }, [router])
+
+  return (
+    <div className="min-h-screen flex items-center justify-center">
+      <p>Redirecionando...</p>
+    </div>
+  )
+}

susconecta/app/(auth)/login-profissional/page.tsx

@@ -0,0 +1,17 @@
+'use client'
+import { useEffect } from 'react'
+import { useRouter } from 'next/navigation'
+
+export default function LoginProfissionalRedirect() {
+  const router = useRouter()
+
+  useEffect(() => {
+    router.replace('/login')
+  }, [router])
+
+  return (
+    <div className="min-h-screen flex items-center justify-center">
+      <p>Redirecionando para a página de login...</p>
+    </div>
+  )
+}

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

@@ -0,0 +1,190 @@
+'use client'
+import { useState } from 'react'
+import { useRouter } from 'next/navigation'
+import Link from 'next/link'
+import { useAuth } from '@/hooks/useAuth'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Alert, AlertDescription } from '@/components/ui/alert'
+import { AuthenticationError } from '@/lib/auth'
+
+export default function LoginPage() {
+  const [credentials, setCredentials] = useState({ email: '', password: '' })
+  const [error, setError] = useState('')
+  const [loading, setLoading] = useState(false)
+  const router = useRouter()
+  const { login, user } = useAuth()
+
+  // Mapeamento de redirecionamento baseado em role
+  const getRoleRedirectPath = (userType: string): string => {
+    switch (userType) {
+      case 'paciente':
+        return '/paciente'
+      case 'profissional':
+        return '/profissional'
+      case 'administrador':
+        return '/dashboard'
+      default:
+        return '/'
+    }
+  }
+
+  const handleLogin = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setLoading(true)
+    setError('')
+
+    try {
+      // Tentar fazer login com cada tipo de usuário até conseguir
+      // Ordem de prioridade: profissional (inclui médico), paciente, administrador
+      const userTypes: Array<'paciente' | 'profissional' | 'administrador'> = [
+        'profissional',  // Tentar profissional PRIMEIRO pois inclui médicos
+        'paciente',
+        'administrador'
+      ]
+
+      let lastError: AuthenticationError | Error | null = null
+      let loginAttempted = false
+
+      for (const userType of userTypes) {
+        try {
+          console.log(`[LOGIN] Tentando login como ${userType}...`)
+          const loginSuccess = await login(credentials.email, credentials.password, userType)
+          
+          if (loginSuccess) {
+            loginAttempted = true
+            console.log('[LOGIN] Login bem-sucedido como', userType)
+            console.log('[LOGIN] User state:', user)
+            
+            // Aguardar um pouco para o state do usuário ser atualizado
+            await new Promise(resolve => setTimeout(resolve, 500))
+            
+            // Obter o userType atualizado do localStorage (que foi salvo pela função login)
+            const storedUser = localStorage.getItem('auth_user')
+            if (storedUser) {
+              try {
+                const userData = JSON.parse(storedUser)
+                const redirectPath = getRoleRedirectPath(userData.userType)
+                console.log('[LOGIN] Redirecionando para:', redirectPath)
+                router.push(redirectPath)
+              } catch (parseErr) {
+                console.error('[LOGIN] Erro ao parsear user do localStorage:', parseErr)
+                router.push('/')
+              }
+            } else {
+              console.warn('[LOGIN] Usuário não encontrado no localStorage')
+              router.push('/')
+            }
+            return
+          }
+        } catch (err) {
+          lastError = err as AuthenticationError | Error
+          const errorMsg = err instanceof Error ? err.message : String(err)
+          console.log(`[LOGIN] Falha ao tentar como ${userType}:`, errorMsg)
+          continue
+        }
+      }
+
+      // Se chegou aqui, nenhum tipo funcionou
+      console.error('[LOGIN] Nenhum tipo de usuário funcionou. Erro final:', lastError)
+      
+      if (lastError instanceof AuthenticationError) {
+        const errorMsg = lastError.message || lastError.details?.error_code || ''
+        if (lastError.code === '400' || errorMsg.includes('invalid_credentials') || errorMsg.includes('Email or password')) {
+          setError('❌ Email ou senha incorretos. Verifique suas credenciais.')
+        } else {
+          setError(lastError.message || 'Erro ao fazer login. Tente novamente.')
+        }
+      } else if (lastError instanceof Error) {
+        setError(lastError.message || 'Erro desconhecido ao fazer login.')
+      } else {
+        setError('Falha ao fazer login. Credenciais inválidas ou conta não encontrada.')
+      }
+    } catch (err) {
+      console.error('[LOGIN] Erro no login:', err)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-background py-12 px-4 sm:px-6 lg:px-8">
+      <div className="max-w-md w-full space-y-8">
+        <div className="text-center">
+          <h2 className="mt-6 text-3xl font-extrabold text-foreground">
+            Entrar
+          </h2>
+          <p className="mt-2 text-sm text-muted-foreground">
+            Entre com suas credenciais para acessar o sistema
+          </p>
+        </div>
+        
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-center">Login</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <form onSubmit={handleLogin} className="space-y-6">
+              <div>
+                <label htmlFor="email" className="block text-sm font-medium text-foreground">
+                  Email
+                </label>
+                <Input
+                  id="email"
+                  type="email"
+                  placeholder="Digite seu email"
+                  value={credentials.email}
+                  onChange={(e) => setCredentials({...credentials, email: e.target.value})}
+                  required
+                  className="mt-1"
+                  disabled={loading}
+                />
+              </div>
+              
+              <div>
+                <label htmlFor="password" className="block text-sm font-medium text-foreground">
+                  Senha
+                </label>
+                <Input
+                  id="password"
+                  type="password"
+                  placeholder="Digite sua senha"
+                  value={credentials.password}
+                  onChange={(e) => setCredentials({...credentials, password: e.target.value})}
+                  required
+                  className="mt-1"
+                  disabled={loading}
+                />
+              </div>
+
+              {error && (
+                <Alert variant="destructive">
+                  <AlertDescription>{error}</AlertDescription>
+                </Alert>
+              )}
+
+              <Button 
+                type="submit" 
+                className="w-full cursor-pointer" 
+                disabled={loading}
+              >
+                {loading ? 'Entrando...' : 'Entrar'}
+              </Button>
+            </form>
+            
+            <div className="mt-4 text-center">
+              <Button variant="ghost" asChild className="w-full">
+                <Link href="/">
+                  Voltar ao Início
+                </Link>
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  )
+}

susconecta/app/(main-routes)/agenda/page.tsx

@@ -0,0 +1,114 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { CalendarRegistrationForm } from "@/components/features/forms/calendar-registration-form";
+import HeaderAgenda from "@/components/features/agenda/HeaderAgenda";
+import FooterAgenda from "@/components/features/agenda/FooterAgenda";
+import { useState } from "react";
+import { criarAgendamento } from '@/lib/api';
+import { toast } from '@/hooks/use-toast';
+
+interface FormData {
+  patientName?: string;
+  patientId?: string;
+  doctorId?: string;
+  cpf?: string;
+  rg?: string;
+  birthDate?: string;
+  phoneCode?: string;
+  phoneNumber?: string;
+  email?: string;
+  convenio?: string;
+  matricula?: string;
+  validade?: string;
+  documentos?: string;
+  professionalName?: string;
+  unit?: string;
+  appointmentDate?: string;
+  startTime?: string;
+  endTime?: string;
+  requestingProfessional?: string;
+  appointmentType?: string;
+  notes?: string;
+  duration_minutes?: number;
+  chief_complaint?: string | null;
+  patient_notes?: string | null;
+  insurance_provider?: string | null;
+}
+
+export default function NovoAgendamentoPage() {
+  const router = useRouter();
+  const [formData, setFormData] = useState<FormData>({});
+
+  const handleFormChange = (data: FormData) => {
+    setFormData(data);
+  };
+
+  const handleSave = () => {
+    (async () => {
+      try {
+        // basic validation
+        if (!formData.patientId && !(formData as any).patient_id) throw new Error('Patient ID é obrigatório');
+        if (!formData.doctorId && !(formData as any).doctor_id) throw new Error('Doctor ID é obrigatório');
+        if (!formData.appointmentDate) throw new Error('Data é obrigatória');
+        if (!formData.startTime) throw new Error('Horário de início é obrigatório');
+
+        const payload: any = {
+          patient_id: formData.patientId || (formData as any).patient_id,
+          doctor_id: formData.doctorId || (formData as any).doctor_id,
+          scheduled_at: new Date(`${formData.appointmentDate}T${formData.startTime}`).toISOString(),
+          duration_minutes: formData.duration_minutes ?? 30,
+          appointment_type: formData.appointmentType ?? 'presencial',
+          chief_complaint: formData.chief_complaint ?? null,
+          patient_notes: formData.patient_notes ?? null,
+          insurance_provider: formData.insurance_provider ?? null,
+        };
+
+        await criarAgendamento(payload);
+        // success
+        try { toast({ title: 'Agendamento criado', description: 'O agendamento foi criado com sucesso.' }); } catch {}
+        router.push('/consultas');
+      } catch (err: any) {
+        // If the API threw a blocking exception message, surface it as a toast with additional info
+        const msg = err?.message ?? String(err);
+        // Heuristic: messages from criarAgendamento about exceptions start with "Não é possível agendar"
+        if (typeof msg === 'string' && msg.includes('Não é possível agendar')) {
+          try {
+            toast({ title: 'Data indisponível', description: msg });
+          } catch (_) {}
+        } else {
+          // fallback to generic alert for unexpected errors
+          alert(msg);
+        }
+      }
+    })();
+  };
+
+  const handleCancel = () => {
+    // If origin was provided (eg: consultas), return there. Default to calendar.
+    try {
+      const origin = (typeof window !== 'undefined') ? new URLSearchParams(window.location.search).get('origin') : null;
+      if (origin === 'consultas') {
+        router.push('/consultas');
+        return;
+      }
+    } catch (e) {
+      // fallback
+    }
+    router.push("/calendar");
+  };
+
+  return (
+    <div className="flex flex-col h-full bg-background">
+      <HeaderAgenda />
+      <main className="flex-1 mx-auto w-full max-w-7xl px-8 py-8 overflow-auto">
+        <CalendarRegistrationForm 
+          formData={formData as any} 
+          onFormChange={handleFormChange as any} 
+          createMode
+        />
+      </main>
+      <FooterAgenda onSave={handleSave} onCancel={handleCancel} />
+    </div>
+  );
+}

susconecta/app/(main-routes)/calendar/index.css

@@ -0,0 +1,83 @@
+.fc-media-screen {
+  flex-grow: 1;
+  height: 74vh;
+}
+
+
+.fc-prev-button,
+.fc-next-button {
+  background-color: var(--color-blue-600) !important;
+  border: none !important;
+  transition: 0.2s ease;
+}
+
+.fc-prev-button:hover,
+.fc-next-button:hover {
+  background-color: var(--color-blue-700) !important;
+}
+
+.fc-timeGridWeek-button,
+.fc-timeGridDay-button,
+.fc-dayGridMonth-button {
+  border: none !important;
+  background-color: var(--color-blue-600) !important;
+  transition: 0.2s ease;
+}
+
+.fc-timeGridWeek-button:hover,
+.fc-timeGridDay-button:hover,
+.fc-dayGridMonth-button:hover {
+  background-color: var(--color-blue-700) !important;
+}
+
+.fc-button-active {
+  background-color: var(--color-blue-500) !important;
+}
+
+.fc-toolbar-title {
+  font-weight: bold;
+  color: var(--color-gray-900);
+}
+
+/* Compact mode for embedded EventManager */
+.compact-event-manager {
+  gap: 0.5rem;
+}
+.compact-event-manager h2 {
+  font-size: 1rem; /* menor título */
+  margin-bottom: 0.25rem;
+}
+.compact-event-manager .sm\\:flex { /* reduz grupo de botões */
+  gap: 0.25rem;
+}
+.compact-event-manager .button,
+.compact-event-manager .btn,
+.compact-event-manager .chakra-button {
+  padding: 6px 8px;
+  font-size: 0.9rem;
+}
+
+/* Inputs dentro do EventManager compactos */
+.compact-event-manager input,
+.compact-event-manager .input {
+  padding: 6px 8px;
+  font-size: 0.95rem;
+}
+
+/* reduzir padding dos cards e dos toolbars internos */
+.compact-event-manager .p-4 { padding: 0.5rem; }
+.compact-event-manager .p-3 { padding: 0.4rem; }
+
+/* reduzir altura das linhas na vista semana/dia custom */
+.compact-event-manager .min-h-16 { min-height: 3.2rem; }
+.compact-event-manager .min-h-20 { min-height: 3.6rem; }
+
+/* tornar os botões de filtro menores */
+.compact-event-manager .dropdown-trigger,
+.compact-event-manager .dropdown-menu-trigger {
+  padding: 6px 8px;
+  font-size: 0.9rem;
+}
+
+/* melhorar harmonia: menos margem entre header e calendário */
+.compact-event-manager { margin-top: 0.25rem; margin-bottom: 0.25rem; }

susconecta/app/(main-routes)/calendar/page.tsx

@@ -0,0 +1,332 @@
+"use client";
+
+// Imports mantidos
+import { useEffect, useState } from "react";
+
+// --- Imports do EventManager (NOVO) - MANTIDOS ---
+import { EventManager, type Event } from "@/components/features/general/event-manager";
+import { v4 as uuidv4 } from 'uuid'; // Usado para IDs de fallback
+
+// Imports mantidos
+import "./index.css";
+
+export default function AgendamentoPage() {
+  const [appointments, setAppointments] = useState<any[]>([]);
+  // REMOVIDO: abas e 3D → não há mais alternância de abas
+  // const [activeTab, setActiveTab] = useState<"calendar" | "3d">("calendar");
+
+  // REMOVIDO: estados do 3D e formulário do paciente (eram usados pelo 3D)
+  // const [threeDEvents, setThreeDEvents] = useState<CalendarEvent[]>([]);
+  // const [showPatientForm, setShowPatientForm] = useState(false);
+
+  // --- NOVO ESTADO ---
+  // Estado para alimentar o NOVO EventManager com dados da API
+  const [managerEvents, setManagerEvents] = useState<Event[]>([]);
+  const [managerLoading, setManagerLoading] = useState<boolean>(true);
+
+  // Padroniza idioma da página para pt-BR (afeta componentes que usam o lang do documento)
+  useEffect(() => {
+    try {
+      // Atributos no <html>
+      document.documentElement.lang = "pt-BR";
+      document.documentElement.setAttribute("xml:lang", "pt-BR");
+      document.documentElement.setAttribute("data-lang", "pt-BR");
+      // Cookie de locale (usado por apps com i18n)
+      const oneYear = 60 * 60 * 24 * 365;
+      document.cookie = `NEXT_LOCALE=pt-BR; Path=/; Max-Age=${oneYear}; SameSite=Lax`;
+    } catch {
+      // ignore
+    }
+  }, []);
+
+  useEffect(() => {
+    let mounted = true;
+    (async () => {
+      try {
+        setManagerLoading(true);
+        const api = await import('@/lib/api');
+        const arr = await api.listarAgendamentos('select=*&order=scheduled_at.desc&limit=500').catch(() => []);
+        if (!mounted) return;
+        if (!arr || !arr.length) {
+          setAppointments([]);
+          // REMOVIDO: setThreeDEvents([])
+          setManagerEvents([]);
+          setManagerLoading(false);
+          return;
+        }
+
+  const patientIds = Array.from(new Set(arr.map((a: any) => a.patient_id).filter(Boolean)));
+  const patients = (patientIds && patientIds.length) ? await api.buscarPacientesPorIds(patientIds) : [];
+  const patientsById: Record<string, any> = {};
+  (patients || []).forEach((p: any) => { if (p && p.id) patientsById[String(p.id)] = p; });
+
+  // Tentar enriquecer com médicos/profissionais quando houver doctor_id
+  const doctorIds = Array.from(new Set(arr.map((a: any) => a.doctor_id).filter(Boolean)));
+  const doctors = (doctorIds && doctorIds.length) ? await api.buscarMedicosPorIds(doctorIds) : [];
+  const doctorsById: Record<string, any> = {};
+  (doctors || []).forEach((d: any) => { if (d && d.id) doctorsById[String(d.id)] = d; });
+
+        setAppointments(arr || []);
+
+        // --- LÓGICA DE TRANSFORMAÇÃO PARA O NOVO EVENTMANAGER ---
+        const newManagerEvents: Event[] = (arr || []).map((obj: any) => {
+          const scheduled = obj.scheduled_at || obj.scheduledAt || obj.time || null;
+          const start = scheduled ? new Date(scheduled) : new Date();
+          const duration = Number(obj.duration_minutes ?? obj.duration ?? 30) || 30;
+          const end = new Date(start.getTime() + duration * 60 * 1000);
+
+          const patient = (patientsById[String(obj.patient_id)]?.full_name) || obj.patient_name || obj.patient_full_name || obj.patient || 'Paciente';
+          const title = `${patient}: ${obj.appointment_type ?? obj.type ?? ''}`.trim();
+
+          // Mapeamento de cores padronizado
+          const status = String(obj.status || "").toLowerCase();
+          let color: Event["color"] = "blue";
+          if (status === "confirmed" || status === "confirmado") color = "green";
+          else if (status === "pending" || status === "pendente") color = "orange";
+          else if (status === "canceled" || status === "cancelado" || status === "cancelled") color = "red";
+          else if (status === "requested" || status === "solicitado") color = "blue";
+
+          const professional = (doctorsById[String(obj.doctor_id)]?.full_name) || obj.doctor_name || obj.professional_name || obj.professional || obj.executante || 'Profissional';
+          const appointmentType = obj.appointment_type || obj.type || obj.appointmentType || '';
+          const insurance = obj.insurance_provider || obj.insurance || obj.convenio || obj.insuranceProvider || null;
+          const completedAt = obj.completed_at || obj.completedAt || null;
+          const cancelledAt = obj.cancelled_at || obj.cancelledAt || null;
+          const cancellationReason = obj.cancellation_reason || obj.cancellationReason || obj.cancel_reason || null;
+
+          return {
+            id: obj.id || uuidv4(),
+            title,
+            description: `Agendamento para ${patient}. Status: ${obj.status || 'N/A'}.`,
+            startTime: start,
+            endTime: end,
+            color,
+            // Campos adicionais para visualização detalhada
+            patientName: patient,
+            professionalName: professional,
+            appointmentType,
+            status: obj.status || null,
+            insuranceProvider: insurance,
+            completedAt,
+            cancelledAt,
+            cancellationReason,
+          };
+        });
+        setManagerEvents(newManagerEvents);
+        setManagerLoading(false);
+        // --- FIM DA LÓGICA ---
+
+        // REMOVIDO: conversão para 3D e setThreeDEvents
+      } catch (err) {
+        console.warn('[AgendamentoPage] falha ao carregar agendamentos', err);
+        setAppointments([]);
+        // REMOVIDO: setThreeDEvents([])
+        setManagerEvents([]);
+        setManagerLoading(false);
+      }
+    })();
+    return () => { mounted = false; };
+  }, []);
+
+  // Handlers mantidos
+  const handleSaveAppointment = (appointment: any) => {
+    if (appointment.id) {
+      setAppointments((prev) =>
+        prev.map((a) => (a.id === appointment.id ? appointment : a))
+      );
+    } else {
+      const newAppointment = {
+        ...appointment,
+        id: Date.now().toString(),
+      };
+      setAppointments((prev) => [...prev, newAppointment]);
+    }
+  };
+
+  // Mapeia cor do calendário -> status da API
+  const statusFromColor = (color?: string) => {
+    switch ((color || "").toLowerCase()) {
+      case "green": return "confirmed";
+      case "orange": return "pending";
+      case "red": return "canceled";
+      default: return "requested";
+    }
+  };
+
+  // Componente auxiliar: legenda dinâmica que lista as cores/statuss presentes nos agendamentos
+  function DynamicLegend({ events }: { events: Event[] }) {
+    // Mapa de classes para cores conhecidas
+    const colorClassMap: Record<string, string> = {
+      blue: "bg-blue-500 ring-blue-500/20",
+      green: "bg-[#10B981] ring-[#10B981]/20",
+      orange: "bg-orange-500 ring-orange-500/20",
+      red: "bg-red-500 ring-red-500/20",
+      purple: "bg-purple-500 ring-purple-500/20",
+      pink: "bg-pink-500 ring-pink-500/20",
+      teal: "bg-teal-400 ring-teal-400/20",
+    }
+
+    const hashToColor = (s: string) => {
+      // gera cor hex simples a partir de hash da string
+      let h = 0
+      for (let i = 0; i < s.length; i++) h = (h << 5) - h + s.charCodeAt(i)
+      const c = (h & 0x00ffffff).toString(16).toUpperCase()
+      return "#" + "00000".substring(0, 6 - c.length) + c
+    }
+
+    // Agrupa por cor e coleta os status associados
+    const entries = new Map<string, Set<string>>()
+    for (const ev of events) {
+      const col = (ev.color || "blue").toString()
+      const st = (ev.status || statusFromColor(ev.color) || "").toString().toLowerCase()
+      if (!entries.has(col)) entries.set(col, new Set())
+      if (st) entries.get(col)!.add(st)
+    }
+
+    // Painel principal: sempre exibe os 3 status primários (Solicitado, Confirmado, Cancelado)
+    const statusDisplay = (s: string) => {
+      switch (s) {
+        case "requested":
+        case "request":
+        case "solicitado":
+          return "Solicitado"
+        case "confirmed":
+        case "confirmado":
+          return "Confirmado"
+        case "canceled":
+        case "cancelled":
+        case "cancelado":
+          return "Cancelado"
+        case "pending":
+        case "pendente":
+          return "Pendente"
+        case "governo":
+        case "government":
+          return "Governo"
+        default:
+          return s.charAt(0).toUpperCase() + s.slice(1)
+      }
+    }
+
+    // Ordem preferencial para exibição (tenta manter Solicitação/Confirmado/Cancelado em primeiro)
+    const priorityList = [
+      'solicitado','requested',
+      'confirmed','confirmado',
+      'pending','pendente',
+      'canceled','cancelled','cancelado',
+      'governo','government'
+    ]
+
+    const items = Array.from(entries.entries()).map(([col, statuses]) => {
+      const statusArr = Array.from(statuses)
+      let priority = 999
+      for (const s of statusArr) {
+        const idx = priorityList.indexOf(s)
+        if (idx >= 0) priority = Math.min(priority, idx)
+      }
+      // if none matched, leave priority high so they appear after known statuses
+      return { col, statuses: statusArr, priority }
+    })
+
+    items.sort((a, b) => a.priority - b.priority || a.col.localeCompare(b.col))
+
+    // Separar itens extras (fora os três principais) para renderizar depois
+    const primaryColors = new Set(['blue', 'green', 'red'])
+    const extras = items.filter(i => !primaryColors.has(i.col.toLowerCase()))
+
+    return (
+      <div className="max-w-full sm:max-w-[520px] rounded-lg border border-slate-700 bg-gradient-to-b from-card/70 to-card/50 px-3 py-2 shadow-md flex items-center gap-4 text-sm overflow-x-auto whitespace-nowrap">
+        {/* Bloco grande com os três status principais sempre visíveis e responsivos */}
+        <div className="flex items-center gap-4 shrink-0">
+          <div className="flex items-center gap-2">
+            <span aria-hidden className="h-2 w-2 sm:h-3 sm:w-3 rounded-full bg-blue-500 ring-1 ring-white/6" />
+            <span className="text-foreground text-xs sm:text-sm font-medium">Solicitado</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <span aria-hidden className="h-2 w-2 sm:h-3 sm:w-3 rounded-full ring-1 ring-white/6" style={{ backgroundColor: '#10B981' }} />
+            <span className="text-foreground text-xs sm:text-sm font-medium">Confirmado</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <span aria-hidden className="h-2 w-2 sm:h-3 sm:w-3 rounded-full bg-red-500 ring-1 ring-white/6" />
+            <span className="text-foreground text-xs sm:text-sm font-medium">Cancelado</span>
+          </div>
+        </div>
+
+        {/* Itens extras detectados dinamicamente (menores) */}
+        {extras.length > 0 && (
+          <div className="flex items-center gap-3 ml-3 flex-wrap">
+            {extras.map(({ col, statuses }) => {
+              const statusList = statuses.map(statusDisplay).filter(Boolean).join(', ')
+              const cls = colorClassMap[col.toLowerCase()]
+              return (
+                <div key={col} className="flex items-center gap-2">
+                  {cls ? (
+                    <span aria-hidden className={`h-2 w-2 rounded-full ${cls} ring-1`} />
+                  ) : (
+                    <span aria-hidden className="h-2 w-2 rounded-full ring-1" style={{ backgroundColor: hashToColor(col) }} />
+                  )}
+                  <span className="text-foreground text-xs">{statusList || col}</span>
+                </div>
+              )
+            })}
+          </div>
+        )}
+      </div>
+    )
+  }
+
+  // Envia atualização para a API e atualiza UI
+  const handleEventUpdate = async (id: string, partial: Partial<Event>) => {
+    try {
+      const payload: any = {};
+      if (partial.startTime) payload.scheduled_at = partial.startTime.toISOString();
+      if (partial.startTime && partial.endTime) {
+        const minutes = Math.max(1, Math.round((partial.endTime.getTime() - partial.startTime.getTime()) / 60000));
+        payload.duration_minutes = minutes;
+      }
+      if (partial.color) payload.status = statusFromColor(partial.color);
+      if (typeof partial.description === "string") payload.notes = partial.description;
+
+      if (Object.keys(payload).length) {
+        const api = await import('@/lib/api');
+        await api.atualizarAgendamento(id, payload);
+      }
+
+      // Otimista: reflete mudanças locais
+      setManagerEvents((prev) => prev.map((e) => (e.id === id ? { ...e, ...partial } : e)));
+    } catch (e) {
+      console.warn("[Calendário] Falha ao atualizar agendamento na API:", e);
+    }
+  };
+
+  return (
+    <div className="bg-background">
+      <div className="w-full">
+  <div className="w-full max-w-full mx-0 flex flex-col gap-0 p-0 pl-4 sm:pl-6">
+          <div className="relative flex items-center justify-between gap-0 p-0 py-2 sm:py-0">
+            <div>
+              <h1 className="text-lg font-semibold text-foreground m-0 p-0">Calendário</h1>
+              <p className="text-muted-foreground m-0 p-0 text-xs">Navegue através do atalho: Calendário (C).</p>
+            </div>
+
+            {/* legenda dinâmica: mostra as cores presentes nos agendamentos do dia atual */}
+            <div className="sm:absolute sm:top-2 sm:right-2 mt-2 sm:mt-0 z-10">
+              <DynamicLegend events={managerEvents} />
+            </div>
+          </div>
+
+          <div className="w-full m-0 p-0">
+            {managerLoading ? (
+              <div className="flex items-center justify-center w-full min-h-[70vh] m-0 p-0">
+                <div className="text-xs text-muted-foreground">Conectando ao calendário — carregando agendamentos...</div>
+              </div>
+            ) : (
+              <div className="w-full min-h-[80vh] m-0 p-0">
+                <EventManager events={managerEvents} className="compact-event-manager" onEventUpdate={handleEventUpdate} />
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

susconecta/app/(main-routes)/consultas/page.tsx

@@ -0,0 +1,832 @@
+"use client";
+
+import Link from "next/link";
+import { useEffect, useState, useCallback, useMemo } from "react";
+import {
+  MoreHorizontal,
+  PlusCircle,
+  Search,
+  Eye,
+  Edit,
+  Trash2,
+  ArrowLeft,
+  Loader2,
+} from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
+import { mockProfessionals } from "@/lib/mocks/appointment-mocks";
+import { listarAgendamentos, buscarPacientesPorIds, buscarMedicosPorIds, atualizarAgendamento, buscarAgendamentoPorId, deletarAgendamento, addDeletedAppointmentId } from "@/lib/api";
+import { CalendarRegistrationForm } from "@/components/features/forms/calendar-registration-form";
+
+const formatDate = (date: string | Date) => {
+  if (!date) return "";
+  return new Date(date).toLocaleDateString("pt-BR", {
+    day: "2-digit",
+    month: "2-digit",
+    year: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+};
+
+const capitalize = (s: string) => {
+  if (typeof s !== "string" || s.length === 0) return "";
+  return s.charAt(0).toUpperCase() + s.slice(1);
+};
+
+const translateStatus = (status: string) => {
+  const statusMap: { [key: string]: string } = {
+    'requested': 'Solicitado',
+    'confirmed': 'Confirmado',
+    'checked_in': 'Check-in',
+    'in_progress': 'Em Andamento',
+    'completed': 'Concluído',
+    'cancelled': 'Cancelado',
+    'no_show': 'Não Compareceu',
+    'pending': 'Pendente',
+  };
+  return statusMap[status?.toLowerCase()] || capitalize(status || '');
+};
+
+export default function ConsultasPage() {
+  const [appointments, setAppointments] = useState<any[]>([]);
+  const [originalAppointments, setOriginalAppointments] = useState<any[]>([]);
+  const [searchValue, setSearchValue] = useState<string>('');
+  const [selectedStatus, setSelectedStatus] = useState<string>('all');
+  const [filterDate, setFilterDate] = useState<string>('');
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+  const [showForm, setShowForm] = useState(false);
+  const [editingAppointment, setEditingAppointment] = useState<any | null>(null);
+  const [viewingAppointment, setViewingAppointment] = useState<any | null>(null);
+  // Local form state used when editing. Keep hook at top-level to avoid Hooks order changes.
+  const [localForm, setLocalForm] = useState<any | null>(null);
+
+  // Paginação
+  const [currentPage, setCurrentPage] = useState(1);
+  const [itemsPerPage, setItemsPerPage] = useState(10);
+
+  const mapAppointmentToFormData = (appointment: any) => {
+    // prefer scheduled_at (ISO) if available
+    const scheduledBase = appointment.scheduled_at || appointment.time || appointment.created_at || null;
+    const baseDate = scheduledBase ? new Date(scheduledBase) : new Date();
+    const duration = appointment.duration_minutes ?? appointment.duration ?? 30;
+
+    // compute start and end times (HH:MM) and date using local time to avoid timezone issues
+    const year = baseDate.getFullYear();
+    const month = String(baseDate.getMonth() + 1).padStart(2, '0');
+    const day = String(baseDate.getDate()).padStart(2, '0');
+    const appointmentDateStr = `${year}-${month}-${day}`;
+    const startTime = `${String(baseDate.getHours()).padStart(2, '0')}:${String(baseDate.getMinutes()).padStart(2, '0')}`;
+    const endDate = new Date(baseDate.getTime() + duration * 60000);
+    const endTime = `${String(endDate.getHours()).padStart(2, '0')}:${String(endDate.getMinutes()).padStart(2, '0')}`;
+
+    return {
+      id: appointment.id,
+      patientName: appointment.patient,
+      patientId: appointment.patient_id || appointment.patientId || null,
+      // include doctor id so the form can run availability/exception checks when editing
+      doctorId: appointment.doctor_id || appointment.doctorId || null,
+      professionalName: appointment.professional || "",
+      appointmentDate: appointmentDateStr,
+      startTime,
+      endTime,
+      status: appointment.status,
+      appointmentType: appointment.appointment_type || appointment.type,
+      notes: appointment.notes || appointment.patient_notes || "",
+      cpf: "",
+      rg: "",
+      birthDate: "",
+      phoneCode: "+55",
+      phoneNumber: "",
+      email: "",
+      unit: "nei",
+      // API-editable fields (populate so the form shows existing values)
+      duration_minutes: duration,
+      chief_complaint: appointment.chief_complaint ?? null,
+      patient_notes: appointment.patient_notes ?? null,
+      insurance_provider: appointment.insurance_provider ?? null,
+      checked_in_at: appointment.checked_in_at ?? null,
+      completed_at: appointment.completed_at ?? null,
+      cancelled_at: appointment.cancelled_at ?? null,
+      cancellation_reason: appointment.cancellation_reason ?? appointment.cancellationReason ?? "",
+    };
+  };
+
+  const handleDelete = async (appointmentId: string) => {
+    if (!window.confirm("Tem certeza que deseja excluir esta consulta?")) return;
+    try {
+      // call server DELETE
+      await deletarAgendamento(appointmentId);
+      // Mark as deleted in cache so it won't appear again
+      addDeletedAppointmentId(appointmentId);
+      // remove from UI
+      setAppointments((prev) => prev.filter((a) => a.id !== appointmentId));
+      // also update originalAppointments cache
+      setOriginalAppointments((prev) => (prev || []).filter((a) => a.id !== appointmentId));
+      alert('Agendamento excluído com sucesso.');
+    } catch (err) {
+      console.error('[ConsultasPage] Falha ao excluir agendamento', err);
+      try {
+        const msg = err instanceof Error ? err.message : String(err);
+        alert('Falha ao excluir agendamento: ' + msg);
+      } catch (e) {
+        // ignore
+      }
+    }
+  };
+
+  const handleEdit = (appointment: any) => {
+    const formData = mapAppointmentToFormData(appointment);
+    setEditingAppointment(formData);
+    setShowForm(true);
+  };
+
+  const handleView = (appointment: any) => {
+    setViewingAppointment(appointment);
+  };
+
+  const handleCancel = () => {
+    setEditingAppointment(null);
+    setShowForm(false);
+    setLocalForm(null);
+  };
+
+  const handleSave = async (formData: any) => {
+    try {
+      // build scheduled_at ISO (formData.startTime is 'HH:MM')
+      const scheduled_at = new Date(`${formData.appointmentDate}T${formData.startTime}`).toISOString();
+
+      // compute duration from start/end times when available
+      let duration_minutes = 30;
+      try {
+        if (formData.startTime && formData.endTime) {
+          const [sh, sm] = String(formData.startTime).split(":").map(Number);
+          const [eh, em] = String(formData.endTime).split(":").map(Number);
+          const start = (sh || 0) * 60 + (sm || 0);
+          const end = (eh || 0) * 60 + (em || 0);
+          if (!Number.isNaN(start) && !Number.isNaN(end) && end > start) duration_minutes = end - start;
+        }
+      } catch (e) {
+        // fallback to default
+        duration_minutes = 30;
+      }
+
+      const payload: any = {
+        scheduled_at,
+        duration_minutes,
+        status: 'confirmed',
+        notes: formData.notes ?? null,
+        chief_complaint: formData.chief_complaint ?? null,
+        patient_notes: formData.patient_notes ?? null,
+        insurance_provider: formData.insurance_provider ?? null,
+        // convert local datetime-local inputs (which may be in 'YYYY-MM-DDTHH:MM' format) to proper ISO if present
+        checked_in_at: formData.checked_in_at ? new Date(formData.checked_in_at).toISOString() : null,
+        completed_at: formData.completed_at ? new Date(formData.completed_at).toISOString() : null,
+        cancelled_at: formData.cancelled_at ? new Date(formData.cancelled_at).toISOString() : null,
+        cancellation_reason: formData.cancellation_reason ?? null,
+      };
+
+      // Call PATCH endpoint
+      const updated = await atualizarAgendamento(formData.id, payload);
+
+      // Build UI-friendly row using server response and existing local fields
+      const existing = appointments.find((a) => a.id === formData.id) || {};
+      const mapped = {
+        id: updated.id,
+        patient: formData.patientName || existing.patient || '',
+        patient_id: existing.patient_id ?? null,
+        // preserve doctor id so future edits retain the selected professional
+        doctor_id: existing.doctor_id ?? (formData.doctorId || (formData as any).doctor_id) ?? null,
+        // preserve server-side fields so future edits read them
+        scheduled_at: updated.scheduled_at ?? scheduled_at,
+        duration_minutes: updated.duration_minutes ?? duration_minutes,
+        appointment_type: updated.appointment_type ?? formData.appointmentType ?? existing.type ?? 'presencial',
+        status: updated.status ?? formData.status ?? existing.status,
+        professional: existing.professional || formData.professionalName || '',
+        notes: updated.notes ?? updated.patient_notes ?? formData.notes ?? existing.notes ?? '',
+        chief_complaint: updated.chief_complaint ?? formData.chief_complaint ?? existing.chief_complaint ?? null,
+        patient_notes: updated.patient_notes ?? formData.patient_notes ?? existing.patient_notes ?? null,
+        insurance_provider: updated.insurance_provider ?? formData.insurance_provider ?? existing.insurance_provider ?? null,
+        checked_in_at: updated.checked_in_at ?? formData.checked_in_at ?? existing.checked_in_at ?? null,
+        completed_at: updated.completed_at ?? formData.completed_at ?? existing.completed_at ?? null,
+        cancelled_at: updated.cancelled_at ?? formData.cancelled_at ?? existing.cancelled_at ?? null,
+        cancellation_reason: updated.cancellation_reason ?? formData.cancellation_reason ?? existing.cancellation_reason ?? null,
+      };
+
+      setAppointments((prev) => prev.map((a) => (a.id === mapped.id ? mapped : a)));
+      handleCancel();
+    } catch (err) {
+      console.error('[ConsultasPage] Falha ao atualizar agendamento', err);
+      // Inform the user
+      try {
+        const msg = err instanceof Error ? err.message : String(err);
+        alert('Falha ao salvar alterações: ' + msg);
+      } catch (e) {
+        // ignore
+      }
+    }
+  };
+
+  // Fetch and map appointments (used at load and when clearing search)
+  const fetchAndMapAppointments = async () => {
+    const arr = await listarAgendamentos("select=*&order=scheduled_at.desc&limit=200");
+
+    // Collect unique patient_ids and doctor_ids
+    const patientIds = new Set<string>();
+    const doctorIds = new Set<string>();
+    for (const a of arr || []) {
+      if (a.patient_id) patientIds.add(String(a.patient_id));
+      if (a.doctor_id) doctorIds.add(String(a.doctor_id));
+    }
+
+    // Batch fetch patients and doctors
+    const patientsMap = new Map<string, any>();
+    const doctorsMap = new Map<string, any>();
+
+    try {
+      if (patientIds.size) {
+        const list = await buscarPacientesPorIds(Array.from(patientIds));
+        for (const p of list || []) patientsMap.set(String(p.id), p);
+      }
+    } catch (e) {
+      console.warn("[ConsultasPage] Falha ao buscar pacientes em lote", e);
+    }
+
+    try {
+      if (doctorIds.size) {
+        const list = await buscarMedicosPorIds(Array.from(doctorIds));
+        for (const d of list || []) doctorsMap.set(String(d.id), d);
+      }
+    } catch (e) {
+      console.warn("[ConsultasPage] Falha ao buscar médicos em lote", e);
+    }
+
+    // Map appointments using the maps
+    const mapped = (arr || []).map((a: any) => {
+      const patient = a.patient_id ? patientsMap.get(String(a.patient_id))?.full_name || String(a.patient_id) : "";
+      const professional = a.doctor_id ? doctorsMap.get(String(a.doctor_id))?.full_name || String(a.doctor_id) : "";
+      return {
+        id: a.id,
+        patient,
+        patient_id: a.patient_id,
+        // preserve the doctor's id so later edit flows can access it
+        doctor_id: a.doctor_id ?? null,
+        // keep some server-side fields so edit can access them later
+        scheduled_at: a.scheduled_at ?? a.time ?? a.created_at ?? null,
+        duration_minutes: a.duration_minutes ?? a.duration ?? null,
+        appointment_type: a.appointment_type ?? a.type ?? null,
+        status: a.status ?? "requested",
+        professional,
+        notes: a.notes || a.patient_notes || "",
+        // additional editable fields
+        chief_complaint: a.chief_complaint ?? null,
+        patient_notes: a.patient_notes ?? null,
+        insurance_provider: a.insurance_provider ?? null,
+        checked_in_at: a.checked_in_at ?? null,
+        completed_at: a.completed_at ?? null,
+        cancelled_at: a.cancelled_at ?? null,
+        cancellation_reason: a.cancellation_reason ?? a.cancellationReason ?? null,
+      };
+    });
+
+    return mapped;
+  };
+
+  useEffect(() => {
+    let mounted = true;
+    (async () => {
+      try {
+        const mapped = await fetchAndMapAppointments();
+        if (!mounted) return;
+        setAppointments(mapped);
+        setOriginalAppointments(mapped || []);
+        setIsLoading(false);
+      } catch (err) {
+        console.warn("[ConsultasPage] Falha ao carregar agendamentos, usando mocks", err);
+        if (!mounted) return;
+        setAppointments([]);
+        setIsLoading(false);
+      }
+    })();
+    return () => { mounted = false; };
+  }, []);
+
+  // Search box: allow fetching a single appointment by ID when pressing Enter
+  // Perform a local-only search against the already-loaded appointments.
+  // This intentionally does not call the server — it filters the cached list.
+  const applyFilters = (val?: string) => {
+  const trimmed = String((val ?? searchValue) || '').trim();
+    let list = (originalAppointments || []).slice();
+
+    // search
+    if (trimmed) {
+      const q = trimmed.toLowerCase();
+      list = list.filter((a) => {
+        const patient = String(a.patient || '').toLowerCase();
+        const professional = String(a.professional || '').toLowerCase();
+        const pid = String(a.patient_id || '').toLowerCase();
+        const aid = String(a.id || '').toLowerCase();
+        return (
+          patient.includes(q) ||
+          professional.includes(q) ||
+          pid === q ||
+          aid === q
+        );
+      });
+    }
+
+    // status filter
+    if (selectedStatus && selectedStatus !== 'all') {
+      list = list.filter((a) => String(a.status || '').toLowerCase() === String(selectedStatus).toLowerCase());
+    }
+
+    // date filter (YYYY-MM-DD)
+    if (filterDate) {
+      list = list.filter((a) => {
+        try {
+          const sched = a.scheduled_at || a.time || a.created_at || null;
+          if (!sched) return false;
+          const iso = new Date(sched).toISOString().split('T')[0];
+          return iso === filterDate;
+        } catch (e) { return false; }
+      });
+    }
+
+    setAppointments(list as any[]);
+  };
+
+  const performSearch = (val: string) => { applyFilters(val); };
+
+  const handleSearchKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      // keep behavior consistent: perform a local filter immediately
+      performSearch(searchValue);
+    } else if (e.key === 'Escape') {
+      setSearchValue('');
+      setAppointments(originalAppointments || []);
+    }
+  };
+
+  const handleClearSearch = async () => {
+    setSearchValue('');
+    setIsLoading(true);
+    try {
+      // Reset to the original cached list without refetching from server
+      setAppointments(originalAppointments || []);
+    } catch (err) {
+      setAppointments([]);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // Debounce live filtering as the user types. Operates only on the cached originalAppointments.
+  useEffect(() => {
+    const t = setTimeout(() => {
+      performSearch(searchValue);
+    }, 250);
+    return () => clearTimeout(t);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchValue, originalAppointments]);
+
+  useEffect(() => {
+    applyFilters();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedStatus, filterDate, originalAppointments]);
+
+  // Dados paginados
+  const paginatedAppointments = useMemo(() => {
+    const startIndex = (currentPage - 1) * itemsPerPage;
+    const endIndex = startIndex + itemsPerPage;
+    return appointments.slice(startIndex, endIndex);
+  }, [appointments, currentPage, itemsPerPage]);
+
+  const totalPages = Math.ceil(appointments.length / itemsPerPage);
+
+  // Reset para página 1 quando mudar a busca ou itens por página
+  useEffect(() => {
+    setCurrentPage(1);
+  }, [searchValue, selectedStatus, filterDate, itemsPerPage]);
+
+  // Keep localForm synchronized with editingAppointment
+  useEffect(() => {
+    if (showForm && editingAppointment) {
+      setLocalForm(editingAppointment);
+    }
+    if (!showForm) setLocalForm(null);
+  }, [showForm, editingAppointment]);
+
+  const onFormChange = (d: any) => setLocalForm(d);
+
+  const saveLocal = async () => {
+    if (!localForm) return;
+    await handleSave(localForm);
+  };
+
+  // If editing, render the edit form as a focused view (keeps hooks stable)
+  if (showForm && localForm) {
+    return (
+      <div className="space-y-6 p-6 bg-background">
+        <div className="flex items-center gap-4">
+          <Button type="button" variant="ghost" size="icon" onClick={handleCancel}>
+            <ArrowLeft className="h-4 w-4" />
+          </Button>
+          <h1 className="text-lg font-semibold md:text-2xl">Editar Consulta</h1>
+        </div>
+  <CalendarRegistrationForm formData={localForm} onFormChange={onFormChange} createMode={true} />
+        <div className="flex gap-2 justify-end">
+          <Button variant="outline" className="hover:bg-primary/10 hover:text-primary dark:hover:bg-accent dark:hover:text-accent-foreground" onClick={handleCancel}>
+            Cancelar
+          </Button>
+          <Button onClick={saveLocal}>Salvar</Button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4 sm:space-y-6 p-3 sm:p-4 md:p-6 bg-background">
+      {/* Header responsivo */}
+      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 sm:gap-4">
+        <div>
+          <h1 className="text-2xl sm:text-3xl font-bold">Consultas</h1>
+          <p className="text-xs sm:text-sm text-muted-foreground">Gerencie todas as consultas da clínica</p>
+        </div>
+        <Link href="/agenda?origin=consultas">
+          <Button className="w-full sm:w-auto h-8 sm:h-9 gap-1 bg-blue-600 text-xs sm:text-sm">
+            <PlusCircle className="h-3.5 w-3.5" />
+            <span className="hidden sm:inline">Agendar</span>
+            <span className="sm:hidden">Nova</span>
+          </Button>
+        </Link>
+      </div>
+
+      {/* Filtros e busca responsivos */}
+      <div className="space-y-2 sm:space-y-3 p-3 sm:p-4 border rounded-lg bg-card">
+        {/* Linha 1: Busca */}
+        <div className="flex gap-2">
+          <div className="relative flex-1">
+            <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
+            <Input
+              type="search"
+              placeholder="Buscar…"
+              className="pl-8 w-full text-xs sm:text-sm h-8 sm:h-9 shadow-sm border"
+              value={searchValue}
+              onChange={(e) => setSearchValue(e.target.value)}
+              onKeyDown={handleSearchKeyDown}
+            />
+          </div>
+        </div>
+
+        {/* Linha 2: Selects responsivos */}
+        <div className="grid grid-cols-2 sm:grid-cols-3 gap-2">
+          <Select onValueChange={(v) => { setSelectedStatus(String(v)); }}>
+            <SelectTrigger className="h-8 sm:h-9 text-xs sm:text-sm">
+              <SelectValue placeholder="Status" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">Todos</SelectItem>
+              <SelectItem value="confirmed">Confirmada</SelectItem>
+              <SelectItem value="requested">Pendente</SelectItem>
+              <SelectItem value="cancelled">Cancelada</SelectItem>
+            </SelectContent>
+          </Select>
+          <Input type="date" className="h-8 sm:h-9 text-xs sm:text-sm" value={filterDate} onChange={(e) => setFilterDate(e.target.value)} />
+        </div>
+      </div>
+
+      {/* Loading state */}
+      {isLoading ? (
+        <div className="w-full py-12 flex justify-center items-center border rounded-lg">
+          <Loader2 className="animate-spin mr-2" />
+          <span className="text-xs sm:text-sm">Carregando agendamentos...</span>
+        </div>
+      ) : (
+        <>
+          {/* Desktop Table - Hidden on mobile */}
+          <div className="hidden md:block border rounded-lg overflow-hidden">
+            <Table>
+              <TableHeader>
+                <TableRow className="bg-primary hover:bg-primary">
+                  <TableHead className="text-primary-foreground text-xs sm:text-sm">Paciente</TableHead>
+                  <TableHead className="text-primary-foreground text-xs sm:text-sm">Médico</TableHead>
+                  <TableHead className="text-primary-foreground text-xs sm:text-sm">Status</TableHead>
+                  <TableHead className="text-primary-foreground text-xs sm:text-sm">Data e Hora</TableHead>
+                  <TableHead className="text-primary-foreground text-xs sm:text-sm">Ações</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {paginatedAppointments.map((appointment) => {
+                  const professionalLookup = mockProfessionals.find((p) => p.id === appointment.professional);
+                  const professionalName = typeof appointment.professional === "string" && appointment.professional && !professionalLookup
+                    ? appointment.professional
+                    : (professionalLookup ? professionalLookup.name : (appointment.professional || "Não encontrado"));
+
+                  return (
+                    <TableRow key={appointment.id}>
+                      <TableCell className="font-medium text-xs sm:text-sm">{appointment.patient}</TableCell>
+                      <TableCell className="text-xs sm:text-sm">{professionalName}</TableCell>
+                      <TableCell>
+                        <Badge
+                          variant={
+                            appointment.status === "confirmed" || appointment.status === "confirmado"
+                              ? "default"
+                              : appointment.status === "pending" || appointment.status === "pendente"
+                              ? "secondary"
+                              : appointment.status === "requested" || appointment.status === "solicitado"
+                              ? "default"
+                              : "destructive"
+                          }
+                          className={
+                            appointment.status === "confirmed" || appointment.status === "confirmado" ? "bg-[#10B981]" :
+                            appointment.status === "requested" || appointment.status === "solicitado" ? "bg-blue-500" :
+                            appointment.status === "canceled" || appointment.status === "cancelled" || appointment.status === "cancelado" ? "bg-red-500" : ""
+                          }
+                        >
+                          {translateStatus(appointment.status)}
+                        </Badge>
+                      </TableCell>
+                      <TableCell className="text-xs sm:text-sm">{formatDate(appointment.scheduled_at ?? appointment.time)}</TableCell>
+                      <TableCell>
+                        <DropdownMenu>
+                          <DropdownMenuTrigger asChild>
+                            <button className="h-8 w-8 p-0 flex items-center justify-center rounded-md hover:bg-primary hover:text-white transition-colors">
+                              <span className="sr-only">Menu</span>
+                              <MoreHorizontal className="h-4 w-4" />
+                            </button>
+                          </DropdownMenuTrigger>
+                          <DropdownMenuContent align="end">
+                            <DropdownMenuItem onClick={() => handleView(appointment)}>
+                              <Eye className="mr-2 h-4 w-4" />
+                              Ver
+                            </DropdownMenuItem>
+                            <DropdownMenuItem onClick={() => handleEdit(appointment)}>
+                              <Edit className="mr-2 h-4 w-4" />
+                              Editar
+                            </DropdownMenuItem>
+                            <DropdownMenuItem onClick={() => handleDelete(appointment.id)} className="text-destructive">
+                              <Trash2 className="mr-2 h-4 w-4" />
+                              Excluir
+                            </DropdownMenuItem>
+                          </DropdownMenuContent>
+                        </DropdownMenu>
+                      </TableCell>
+                    </TableRow>
+                  );
+                })}
+              </TableBody>
+            </Table>
+          </div>
+
+          {/* Mobile Cards - Hidden on desktop */}
+          <div className="md:hidden space-y-2">
+            {paginatedAppointments.length > 0 ? (
+              paginatedAppointments.map((appointment) => {
+                const professionalLookup = mockProfessionals.find((p) => p.id === appointment.professional);
+                const professionalName = typeof appointment.professional === "string" && appointment.professional && !professionalLookup
+                  ? appointment.professional
+                  : (professionalLookup ? professionalLookup.name : (appointment.professional || "Não encontrado"));
+
+                return (
+                  <div key={appointment.id} className="bg-card p-3 sm:p-4 rounded-lg border border-border hover:border-primary transition-colors">
+                    <div className="grid grid-cols-2 gap-2">
+                      <div className="col-span-2 flex justify-between items-start">
+                        <div className="flex-1">
+                          <div className="text-[10px] sm:text-xs font-semibold text-primary">Paciente</div>
+                          <div className="text-xs sm:text-sm font-medium truncate">{appointment.patient}</div>
+                        </div>
+                        <DropdownMenu>
+                          <DropdownMenuTrigger asChild>
+                            <button className="h-7 w-7 p-0 flex items-center justify-center rounded-md hover:bg-primary hover:text-white transition-colors flex-shrink-0">
+                              <span className="sr-only">Menu</span>
+                              <MoreHorizontal className="h-3.5 w-3.5" />
+                            </button>
+                          </DropdownMenuTrigger>
+                          <DropdownMenuContent align="end">
+                            <DropdownMenuItem onClick={() => handleView(appointment)}>
+                              <Eye className="mr-2 h-4 w-4" />
+                              Ver
+                            </DropdownMenuItem>
+                            <DropdownMenuItem onClick={() => handleEdit(appointment)}>
+                              <Edit className="mr-2 h-4 w-4" />
+                              Editar
+                            </DropdownMenuItem>
+                            <DropdownMenuItem onClick={() => handleDelete(appointment.id)} className="text-destructive">
+                              <Trash2 className="mr-2 h-4 w-4" />
+                              Excluir
+                            </DropdownMenuItem>
+                          </DropdownMenuContent>
+                        </DropdownMenu>
+                      </div>
+                      <div>
+                        <div className="text-[10px] sm:text-xs text-muted-foreground">Médico</div>
+                        <div className="text-[10px] sm:text-xs font-medium truncate">{professionalName}</div>
+                      </div>
+                      <div>
+                        <div className="text-[10px] sm:text-xs text-muted-foreground">Status</div>
+                        <Badge
+                          variant={
+                            appointment.status === "confirmed" || appointment.status === "confirmado"
+                              ? "default"
+                              : appointment.status === "pending" || appointment.status === "pendente"
+                              ? "secondary"
+                              : appointment.status === "requested" || appointment.status === "solicitado"
+                              ? "default"
+                              : "destructive"
+                          }
+                          className={
+                            `text-[10px] sm:text-xs ${
+                              appointment.status === "confirmed" || appointment.status === "confirmado" ? "bg-[#10B981]" :
+                              appointment.status === "requested" || appointment.status === "solicitado" ? "bg-blue-500" :
+                              appointment.status === "canceled" || appointment.status === "cancelled" || appointment.status === "cancelado" ? "bg-red-500" : ""
+                            }`
+                          }
+                        >
+                          {translateStatus(appointment.status)}
+                        </Badge>
+                      </div>
+                      <div className="col-span-2">
+                        <div className="text-[10px] sm:text-xs text-muted-foreground">Data e Hora</div>
+                        <div className="text-[10px] sm:text-xs font-medium">{formatDate(appointment.scheduled_at ?? appointment.time)}</div>
+                      </div>
+                    </div>
+                  </div>
+                );
+              })
+            ) : (
+              <div className="text-center text-xs sm:text-sm text-muted-foreground py-4">
+                Nenhuma consulta encontrada
+              </div>
+            )}
+          </div>
+        </>
+      )}
+
+      {/* Controles de paginação - Responsivos */}
+      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 sm:gap-4 text-xs sm:text-sm">
+        <div className="flex items-center gap-2 flex-wrap">
+          <span className="text-muted-foreground text-xs sm:text-sm">Itens por página:</span>
+          <select
+            value={itemsPerPage}
+            onChange={(e) => setItemsPerPage(Number(e.target.value))}
+            className="h-8 sm:h-9 rounded-md border border-input bg-background px-2 sm:px-3 py-1 text-xs sm:text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-primary hover:border-primary transition-colors cursor-pointer"
+          >
+            <option value={10}>10</option>
+            <option value={15}>15</option>
+            <option value={20}>20</option>
+          </select>
+          <span className="text-muted-foreground text-xs sm:text-sm">
+            Mostrando {paginatedAppointments.length > 0 ? (currentPage - 1) * itemsPerPage + 1 : 0} a{" "}
+            {Math.min(currentPage * itemsPerPage, appointments.length)} de {appointments.length}
+          </span>
+        </div>
+
+        <div className="flex items-center gap-1 sm:gap-2 flex-wrap justify-center sm:justify-end">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => setCurrentPage(1)}
+            disabled={currentPage === 1}
+            className="hover:bg-primary! hover:text-white! transition-colors text-xs sm:text-sm h-7 sm:h-9 px-1 sm:px-3"
+          >
+            <span className="hidden sm:inline">Primeira</span>
+            <span className="sm:hidden">1ª</span>
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => setCurrentPage((prev) => Math.max(1, prev - 1))}
+            disabled={currentPage === 1}
+            className="hover:bg-primary! hover:text-white! transition-colors text-xs sm:text-sm h-7 sm:h-9 px-1 sm:px-3"
+          >
+            <span className="hidden sm:inline">Anterior</span>
+            <span className="sm:hidden">«</span>
+          </Button>
+          <span className="text-muted-foreground text-xs sm:text-sm">
+            Pág {currentPage} de {totalPages || 1}
+          </span>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => setCurrentPage((prev) => Math.min(totalPages, prev + 1))}
+            disabled={currentPage === totalPages || totalPages === 0}
+            className="hover:bg-primary! hover:text-white! transition-colors text-xs sm:text-sm h-7 sm:h-9 px-1 sm:px-3"
+          >
+            <span className="hidden sm:inline">Próxima</span>
+            <span className="sm:hidden">»</span>
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => setCurrentPage(totalPages)}
+            disabled={currentPage === totalPages || totalPages === 0}
+            className="hover:bg-primary! hover:text-white! transition-colors text-xs sm:text-sm h-7 sm:h-9 px-1 sm:px-3"
+          >
+            <span className="hidden sm:inline">Última</span>
+            <span className="sm:hidden">Últ</span>
+          </Button>
+        </div>
+      </div>
+
+      {viewingAppointment && (
+        <Dialog open={!!viewingAppointment} onOpenChange={() => setViewingAppointment(null)}>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>Detalhes da Consulta</DialogTitle>
+              <DialogDescription>Informações detalhadas da consulta de {viewingAppointment?.patient}.</DialogDescription>
+            </DialogHeader>
+            <div className="grid gap-4 py-4">
+              <div className="grid grid-cols-4 items-center gap-4">
+                <Label htmlFor="name" className="text-right">Paciente</Label>
+                <span className="col-span-3">{viewingAppointment?.patient}</span>
+              </div>
+              <div className="grid grid-cols-4 items-center gap-4">
+                <Label className="text-right">Médico</Label>
+                <span className="col-span-3">{viewingAppointment?.professional || 'Não encontrado'}</span>
+              </div>
+              <div className="grid grid-cols-4 items-center gap-4">
+                <Label className="text-right">Data e Hora</Label>
+                <span className="col-span-3">{(viewingAppointment?.scheduled_at ?? viewingAppointment?.time) ? formatDate(viewingAppointment?.scheduled_at ?? viewingAppointment?.time) : ''}</span>
+              </div>
+              <div className="grid grid-cols-4 items-center gap-4">
+                <Label className="text-right">Status</Label>
+                <span className="col-span-3">
+                  <Badge
+                    variant={
+                      viewingAppointment?.status === "confirmed" || viewingAppointment?.status === "confirmado"
+                        ? "default"
+                        : viewingAppointment?.status === "pending" || viewingAppointment?.status === "pendente"
+                        ? "secondary"
+                        : viewingAppointment?.status === "requested" || viewingAppointment?.status === "solicitado"
+                        ? "default"
+                        : "destructive"
+                    }
+                    className={
+                      viewingAppointment?.status === "confirmed" || viewingAppointment?.status === "confirmado" ? "bg-[#10B981]" :
+                      viewingAppointment?.status === "requested" || viewingAppointment?.status === "solicitado" ? "bg-blue-500" :
+                      viewingAppointment?.status === "canceled" || viewingAppointment?.status === "cancelled" || viewingAppointment?.status === "cancelado" ? "bg-red-500" : ""
+                    }
+                  >
+                    {translateStatus(viewingAppointment?.status || "")}
+                  </Badge>
+                </span>
+              </div>
+              <div className="grid grid-cols-4 items-center gap-4">
+                <Label className="text-right">Tipo</Label>
+                <span className="col-span-3">{capitalize(viewingAppointment?.appointment_type || viewingAppointment?.type || "")}</span>
+              </div>
+              <div className="grid grid-cols-4 items-center gap-4">
+                <Label className="text-right">Observações</Label>
+                <span className="col-span-3">{viewingAppointment?.notes || "Nenhuma"}</span>
+              </div>
+            </div>
+            <DialogFooter>
+              <Button onClick={() => setViewingAppointment(null)}>Fechar</Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      )}
+    </div>
+    );
+  }

susconecta/app/(main-routes)/dashboard/page.tsx

@@ -0,0 +1,369 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import {
+  countTotalPatients,
+  countTotalDoctors,
+  countAppointmentsToday,
+  getUpcomingAppointments,
+  getAppointmentsByDateRange,
+  getNewUsersLastDays,
+  getDisabledUsers,
+  getDoctorsAvailabilityToday,
+  getPatientById,
+  getDoctorById,
+} from '@/lib/api';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { AlertCircle, Calendar, Users, Stethoscope, Clock, AlertTriangle, Plus, ArrowLeft } from 'lucide-react';
+import Link from 'next/link';
+import { PatientRegistrationForm } from '@/components/features/forms/patient-registration-form';
+import { DoctorRegistrationForm } from '@/components/features/forms/doctor-registration-form';
+
+interface DashboardStats {
+  totalPatients: number;
+  totalDoctors: number;
+  appointmentsToday: number;
+}
+
+interface UpcomingAppointment {
+  id: string;
+  scheduled_at: string;
+  status: string;
+  doctor_id: string;
+  patient_id: string;
+  doctor?: { full_name?: string };
+  patient?: { full_name?: string };
+}
+
+export default function DashboardPage() {
+  const router = useRouter();
+  const [stats, setStats] = useState<DashboardStats>({
+    totalPatients: 0,
+    totalDoctors: 0,
+    appointmentsToday: 0,
+  });
+  const [appointments, setAppointments] = useState<UpcomingAppointment[]>([]);
+  const [appointmentData, setAppointmentData] = useState<any[]>([]);
+  const [newUsers, setNewUsers] = useState<any[]>([]);
+  const [disabledUsers, setDisabledUsers] = useState<any[]>([]);
+  const [doctors, setDoctors] = useState<Map<string, any>>(new Map());
+  const [patients, setPatients] = useState<Map<string, any>>(new Map());
+  const [loading, setLoading] = useState(true);
+  
+  // Estados para os modais de formulário
+  const [showPatientForm, setShowPatientForm] = useState(false);
+  const [showDoctorForm, setShowDoctorForm] = useState(false);
+  const [editingPatientId, setEditingPatientId] = useState<string | null>(null);
+  const [editingDoctorId, setEditingDoctorId] = useState<string | null>(null);
+
+  useEffect(() => {
+    loadDashboardData();
+  }, []);
+
+  const loadDashboardData = async () => {
+    try {
+      setLoading(true);
+
+      // 1. Carrega stats
+      const [patientCount, doctorCount, todayCount] = await Promise.all([
+        countTotalPatients(),
+        countTotalDoctors(),
+        countAppointmentsToday(),
+      ]);
+
+      setStats({
+        totalPatients: patientCount,
+        totalDoctors: doctorCount,
+        appointmentsToday: todayCount,
+      });
+
+      // 2. Carrega dados dos widgets em paralelo
+      const [upcomingAppts, appointmentDataRange, newUsersList, disabledUsersList] = await Promise.all([
+        getUpcomingAppointments(5),
+        getAppointmentsByDateRange(7),
+        getNewUsersLastDays(7),
+        getDisabledUsers(5),
+      ]);
+
+      setAppointments(upcomingAppts);
+      setAppointmentData(appointmentDataRange);
+      setNewUsers(newUsersList);
+      setDisabledUsers(disabledUsersList);
+
+      // 3. Busca detalhes de pacientes e médicos para as próximas consultas
+      const doctorMap = new Map();
+      const patientMap = new Map();
+
+      for (const appt of upcomingAppts) {
+        if (appt.doctor_id && !doctorMap.has(appt.doctor_id)) {
+          const doctor = await getDoctorById(appt.doctor_id);
+          if (doctor) doctorMap.set(appt.doctor_id, doctor);
+        }
+        if (appt.patient_id && !patientMap.has(appt.patient_id)) {
+          const patient = await getPatientById(appt.patient_id);
+          if (patient) patientMap.set(appt.patient_id, patient);
+        }
+      }
+
+      setDoctors(doctorMap);
+      setPatients(patientMap);
+    } catch (err) {
+      console.error('[Dashboard] Erro ao carregar dados:', err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handlePatientFormSaved = () => {
+    setShowPatientForm(false);
+    setEditingPatientId(null);
+    loadDashboardData();
+  };
+
+  const handleDoctorFormSaved = () => {
+    setShowDoctorForm(false);
+    setEditingDoctorId(null);
+    loadDashboardData();
+  };
+
+  const formatDate = (dateStr: string) => {
+    return new Date(dateStr).toLocaleDateString('pt-BR', {
+      day: '2-digit',
+      month: '2-digit',
+      hour: '2-digit',
+      minute: '2-digit',
+    });
+  };
+
+  const getStatusBadge = (status: string) => {
+    const statusMap: Record<string, { variant: any; label: string }> = {
+      confirmed: { variant: 'default', label: 'Confirmado' },
+      completed: { variant: 'secondary', label: 'Concluído' },
+      cancelled: { variant: 'destructive', label: 'Cancelado' },
+      requested: { variant: 'outline', label: 'Solicitado' },
+    };
+    const s = statusMap[status] || { variant: 'outline', label: status };
+    return <Badge variant={s.variant as any}>{s.label}</Badge>;
+  };
+
+  if (loading) {
+    return (
+      <div className="space-y-4 sm:space-y-6 p-3 sm:p-4 md:p-6 bg-background">
+        <div className="animate-pulse space-y-4">
+          <div className="h-6 sm:h-8 bg-muted rounded w-1/4"></div>
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4 md:gap-6">
+            {[1, 2, 3, 4].map(i => (
+              <div key={i} className="h-24 sm:h-32 bg-muted rounded"></div>
+            ))}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Se está exibindo formulário de paciente
+  if (showPatientForm) {
+    return (
+      <div className="space-y-4 sm:space-y-6 p-3 sm:p-4 md:p-6 bg-background min-h-screen">
+        <div className="flex items-center gap-2 sm:gap-4">
+          <Button variant="ghost" size="icon" onClick={() => {
+            setShowPatientForm(false);
+            setEditingPatientId(null);
+          }} className="h-8 w-8 sm:h-10 sm:w-10">
+            <ArrowLeft className="h-4 w-4 sm:h-5 sm:w-5" />
+          </Button>
+          <h1 className="text-xl sm:text-2xl font-bold">{editingPatientId ? "Editar paciente" : "Novo paciente"}</h1>
+        </div>
+
+        <PatientRegistrationForm
+          inline
+          mode={editingPatientId ? "edit" : "create"}
+          patientId={editingPatientId}
+          onSaved={handlePatientFormSaved}
+          onClose={() => {
+            setShowPatientForm(false);
+            setEditingPatientId(null);
+          }}
+        />
+      </div>
+    );
+  }
+
+  // Se está exibindo formulário de médico
+  if (showDoctorForm) {
+    return (
+      <div className="space-y-4 sm:space-y-6 p-3 sm:p-4 md:p-6 bg-background min-h-screen">
+        <div className="flex items-center gap-2 sm:gap-4">
+          <Button variant="ghost" size="icon" onClick={() => {
+            setShowDoctorForm(false);
+            setEditingDoctorId(null);
+          }} className="h-8 w-8 sm:h-10 sm:w-10">
+            <ArrowLeft className="h-4 w-4 sm:h-5 sm:w-5" />
+          </Button>
+          <h1 className="text-xl sm:text-2xl font-bold">{editingDoctorId ? "Editar Médico" : "Novo Médico"}</h1>
+        </div>
+
+        <DoctorRegistrationForm
+          inline
+          mode={editingDoctorId ? "edit" : "create"}
+          doctorId={editingDoctorId}
+          onSaved={handleDoctorFormSaved}
+          onClose={() => {
+            setShowDoctorForm(false);
+            setEditingDoctorId(null);
+          }}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4 sm:space-y-6 p-3 sm:p-4 md:p-6 bg-background min-h-screen">
+      {/* Header - Responsivo */}
+      <div>
+        <h1 className="text-2xl sm:text-3xl font-bold text-foreground">Dashboard</h1>
+        <p className="text-xs sm:text-sm text-muted-foreground mt-1 sm:mt-2">Bem-vindo ao painel de controle</p>
+      </div>
+
+      {/* 1. CARDS RESUMO - Responsivo com 1/2/4 colunas */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4 md:gap-6">
+        <div className="bg-card p-4 sm:p-5 md:p-6 rounded-lg border border-border hover:shadow-md transition">
+          <div className="flex items-center justify-between gap-3">
+            <div className="min-w-0 flex-1">
+              <h3 className="text-xs sm:text-sm font-medium text-muted-foreground truncate">Total de Pacientes</h3>
+              <p className="text-2xl sm:text-3xl font-bold text-foreground mt-1 sm:mt-2">{stats.totalPatients}</p>
+            </div>
+            <Users className="h-6 sm:h-8 w-6 sm:w-8 text-blue-500 opacity-20 flex-shrink-0" />
+          </div>
+        </div>
+
+        <div className="bg-card p-4 sm:p-5 md:p-6 rounded-lg border border-border hover:shadow-md transition">
+          <div className="flex items-center justify-between gap-3">
+            <div className="min-w-0 flex-1">
+              <h3 className="text-xs sm:text-sm font-medium text-muted-foreground truncate">Total de Médicos</h3>
+              <p className="text-2xl sm:text-3xl font-bold text-foreground mt-1 sm:mt-2">{stats.totalDoctors}</p>
+            </div>
+            <Stethoscope className="h-6 sm:h-8 w-6 sm:w-8 text-green-500 opacity-20 flex-shrink-0" />
+          </div>
+        </div>
+
+        <div className="bg-card p-4 sm:p-5 md:p-6 rounded-lg border border-border hover:shadow-md transition">
+          <div className="flex items-center justify-between gap-3">
+            <div className="min-w-0 flex-1">
+              <h3 className="text-xs sm:text-sm font-medium text-muted-foreground truncate">Consultas Hoje</h3>
+              <p className="text-2xl sm:text-3xl font-bold text-foreground mt-1 sm:mt-2">{stats.appointmentsToday}</p>
+            </div>
+            <Calendar className="h-6 sm:h-8 w-6 sm:w-8 text-purple-500 opacity-20 flex-shrink-0" />
+          </div>
+        </div>
+
+
+      </div>
+
+      {/* 6. AÇÕES RÁPIDAS - Responsivo: stack em mobile, wrap em desktop */}
+      <div className="bg-card p-4 sm:p-5 md:p-6 rounded-lg border border-border">
+        <h2 className="text-base sm:text-lg font-semibold text-foreground mb-3 sm:mb-4">Ações Rápidas</h2>
+        <div className="flex flex-col sm:flex-row flex-wrap gap-2 sm:gap-3">
+          <Button onClick={() => setShowPatientForm(true)} className="gap-2 text-sm sm:text-base w-full sm:w-auto">
+            <Plus className="h-4 w-4" />
+            <span className="hidden sm:inline">Novo Paciente</span>
+            <span className="sm:hidden">Paciente</span>
+          </Button>
+          <Button onClick={() => router.push('/agenda')} variant="outline" className="gap-2 text-sm sm:text-base w-full sm:w-auto hover:bg-primary! hover:text-white! transition-colors">
+            <Calendar className="h-4 w-4" />
+            <span className="hidden sm:inline">Novo Agendamento</span>
+            <span className="sm:hidden">Agendamento</span>
+          </Button>
+          <Button onClick={() => setShowDoctorForm(true)} variant="outline" className="gap-2 text-sm sm:text-base w-full sm:w-auto hover:bg-primary! hover:text-white! transition-colors">
+            <Stethoscope className="h-4 w-4" />
+            <span className="hidden sm:inline">Novo Médico</span>
+            <span className="sm:hidden">Médico</span>
+          </Button>
+        </div>
+      </div>
+
+      {/* 2. PRÓXIMAS CONSULTAS */}
+      <div className="grid grid-cols-1 gap-4 md:gap-6">
+        <div className="bg-card p-4 sm:p-5 md:p-6 rounded-lg border border-border">
+          <h2 className="text-base sm:text-lg font-semibold text-foreground mb-3 sm:mb-4">Próximas Consultas (7 dias)</h2>
+          {appointments.length > 0 ? (
+            <div className="space-y-2 sm:space-y-3">
+              {appointments.map(appt => (
+                <div key={appt.id} className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 p-3 sm:p-4 bg-muted rounded-lg hover:bg-muted/80 transition">
+                  <div className="flex-1 min-w-0">
+                    <p className="font-medium text-foreground text-sm sm:text-base truncate">
+                      {patients.get(appt.patient_id)?.full_name || 'Paciente desconhecido'}
+                    </p>
+                    <p className="text-xs sm:text-sm text-muted-foreground truncate">
+                      Médico: {doctors.get(appt.doctor_id)?.full_name || 'Médico desconhecido'}
+                    </p>
+                    <p className="text-[11px] sm:text-xs text-muted-foreground mt-1">{formatDate(appt.scheduled_at)}</p>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    {getStatusBadge(appt.status)}
+                  </div>
+                </div>
+              ))}
+            </div>
+          ) : (
+            <p className="text-xs sm:text-sm text-muted-foreground">Nenhuma consulta agendada para os próximos 7 dias</p>
+          )}
+        </div>
+
+
+      </div>
+
+      {/* 4. NOVOS USUÁRIOS */}
+      <div className="bg-card p-4 sm:p-5 md:p-6 rounded-lg border border-border">
+        <h2 className="text-base sm:text-lg font-semibold text-foreground mb-3 sm:mb-4">Novos Usuários (últimos 7 dias)</h2>
+        {newUsers.length > 0 ? (
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2 sm:gap-3">
+            {newUsers.map(user => (
+              <div key={user.id} className="p-2 sm:p-3 bg-muted rounded-lg">
+                <p className="font-medium text-foreground text-xs sm:text-sm truncate">{user.full_name || 'Sem nome'}</p>
+                <p className="text-[10px] sm:text-xs text-muted-foreground truncate">{user.email}</p>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <p className="text-xs sm:text-sm text-muted-foreground">Nenhum novo usuário nos últimos 7 dias</p>
+        )}
+      </div>
+
+      {/* 8. ALERTAS */}
+      {disabledUsers.length > 0 && (
+        <div className="bg-card p-4 sm:p-5 md:p-6 rounded-lg border border-destructive/50">
+          <h2 className="text-base sm:text-lg font-semibold text-destructive mb-3 sm:mb-4 flex items-center gap-2">
+            <AlertTriangle className="h-4 sm:h-5 w-4 sm:w-5" />
+            <span className="truncate">Usuários Desabilitados</span>
+          </h2>
+          <div className="space-y-2">
+            {disabledUsers.map(user => (
+              <Alert key={user.id} variant="destructive" className="text-xs sm:text-sm">
+                <AlertCircle className="h-3 sm:h-4 w-3 sm:w-4" />
+                <AlertDescription className="ml-2">
+                  <strong className="truncate">{user.full_name}</strong> ({user.email}) está desabilitado
+                </AlertDescription>
+              </Alert>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* 11. LINK PARA RELATÓRIOS */}
+      <div className="bg-linear-to-r from-blue-500/10 to-purple-500/10 p-4 sm:p-5 md:p-6 rounded-lg border border-blue-500/20">
+        <h2 className="text-base sm:text-lg font-semibold text-foreground mb-2">Seção de Relatórios</h2>
+        <p className="text-xs sm:text-sm text-muted-foreground mb-3 sm:mb-4">
+          Acesse a seção de relatórios médicos para gerenciar, visualizar e exportar documentos.
+        </p>
+        <Button asChild className="w-full sm:w-auto text-sm sm:text-base">
+          <Link href="/dashboard/relatorios">Ir para Relatórios</Link>
+        </Button>
+      </div>
+    </div>
+  );
+}
+

susconecta/app/(main-routes)/dashboard/relatorios/page.tsx

@@ -0,0 +1,347 @@
+
+
+"use client";
+
+import React, { useEffect, useState, useRef } from "react";
+import { Button } from "@/components/ui/button";
+import { FileDown, BarChart2, Users, CalendarCheck } from "lucide-react";
+import jsPDF from "jspdf";
+import html2canvas from "html2canvas";
+import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from "recharts";
+import {
+  countAppointmentsToday,
+  getAppointmentsByDateRange,
+  listarAgendamentos,
+  buscarMedicosPorIds,
+  buscarPacientesPorIds,
+} from "@/lib/api";
+
+// ============================================================================
+// Constants
+// ============================================================================
+
+const FALLBACK_MEDICOS = [
+  { nome: "Dr. Carlos Andrade", consultas: 62 },
+  { nome: "Dra. Paula Silva", consultas: 58 },
+  { nome: "Dr. João Pedro", consultas: 54 },
+  { nome: "Dra. Marina Costa", consultas: 51 },
+];
+
+// ============================================================================
+// Helper Functions
+// ============================================================================
+
+async function exportPDF(title: string, content: string, chartElementId?: string) {
+  const doc = new jsPDF();
+  let yPosition = 15;
+
+  // Add title
+  doc.setFontSize(16);
+  doc.setFont(undefined, "bold");
+  doc.text(title, 15, yPosition);
+  yPosition += 10;
+
+  // Add description/content
+  doc.setFontSize(11);
+  doc.setFont(undefined, "normal");
+  const contentLines = doc.splitTextToSize(content, 180);
+  doc.text(contentLines, 15, yPosition);
+  yPosition += contentLines.length * 5 + 15;
+
+  // Capture chart if chartElementId is provided
+  if (chartElementId) {
+    try {
+      const chartElement = document.getElementById(chartElementId);
+      if (chartElement) {
+        // Create a canvas from the chart element
+        const canvas = await html2canvas(chartElement, {
+          backgroundColor: "#ffffff",
+          scale: 2,
+          logging: false,
+        });
+
+        // Convert canvas to image
+        const imgData = canvas.toDataURL("image/png");
+        const imgWidth = 180;
+        const imgHeight = (canvas.height * imgWidth) / canvas.width;
+
+        // Add image to PDF
+        doc.addImage(imgData, "PNG", 15, yPosition, imgWidth, imgHeight);
+        yPosition += imgHeight + 10;
+      }
+    } catch (error) {
+      console.error("Error capturing chart:", error);
+      doc.text("(Erro ao capturar gráfico)", 15, yPosition);
+      yPosition += 10;
+    }
+  }
+
+  doc.save(`${title.toLowerCase().replace(/ /g, "-")}.pdf`);
+}
+
+// ============================================================================
+// Main Component
+// ============================================================================
+
+export default function RelatoriosPage() {
+  // State
+  const [metricsState, setMetricsState] = useState<Array<{ label: string; value: any; icon: any }>>([]);
+  const [consultasData, setConsultasData] = useState<Array<{ periodo: string; consultas: number }>>([]);
+  const [pacientesTop, setPacientesTop] = useState<Array<{ nome: string; consultas: number }>>([]);
+  const [medicosTop, setMedicosTop] = useState(FALLBACK_MEDICOS);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  // Data Loading
+  useEffect(() => {
+    let mounted = true;
+
+    async function load() {
+      setLoading(true);
+      try {
+        // Fetch appointments
+        let appointments: any[] = [];
+        try {
+          appointments = await listarAgendamentos(
+            "select=patient_id,doctor_id,scheduled_at,status&order=scheduled_at.desc&limit=1000"
+          );
+        } catch (e) {
+          console.warn("[relatorios] listarAgendamentos failed, using fallback", e);
+          appointments = await getAppointmentsByDateRange(30).catch(() => []);
+        }
+
+        // Fetch today's appointments count
+        let appointmentsToday = 0;
+        try {
+          appointmentsToday = await countAppointmentsToday().catch(() => 0);
+        } catch (e) {
+          appointmentsToday = 0;
+        }
+
+        if (!mounted) return;
+
+        // ===== Build Consultas Chart (last 30 days) =====
+        const daysCount = 30;
+        const now = new Date();
+        const start = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+        const startTs = start.getTime() - (daysCount - 1) * 86400000;
+        const dayBuckets: Record<string, { periodo: string; consultas: number }> = {};
+
+        for (let i = 0; i < daysCount; i++) {
+          const d = new Date(startTs + i * 86400000);
+          const iso = d.toISOString().split("T")[0];
+          const periodo = `${String(d.getDate()).padStart(2, "0")}/${String(d.getMonth() + 1).padStart(2, "0")}`;
+          dayBuckets[iso] = { periodo, consultas: 0 };
+        }
+
+        const appts = Array.isArray(appointments) ? appointments : [];
+        for (const a of appts) {
+          try {
+            const iso = (a.scheduled_at || "").toString().split("T")[0];
+            if (iso && dayBuckets[iso]) dayBuckets[iso].consultas += 1;
+          } catch (e) {
+            // ignore malformed
+          }
+        }
+        setConsultasData(Object.values(dayBuckets));
+
+        // ===== Aggregate Counts =====
+        const patientCounts: Record<string, number> = {};
+        const doctorCounts: Record<string, number> = {};
+        const doctorNoShowCounts: Record<string, number> = {};
+
+        for (const a of appts) {
+          if (a.patient_id) {
+            patientCounts[String(a.patient_id)] = (patientCounts[String(a.patient_id)] || 0) + 1;
+          }
+          if (a.doctor_id) {
+            const did = String(a.doctor_id);
+            doctorCounts[did] = (doctorCounts[did] || 0) + 1;
+            if (String(a.status || "").toLowerCase() === "no_show" || String(a.status || "").toLowerCase() === "no-show") {
+              doctorNoShowCounts[did] = (doctorNoShowCounts[did] || 0) + 1;
+            }
+          }
+        }
+
+        // ===== Top 5 Patients & Doctors =====
+        const topPatientIds = Object.entries(patientCounts)
+          .sort((a, b) => b[1] - a[1])
+          .slice(0, 5)
+          .map((x) => x[0]);
+        const topDoctorIds = Object.entries(doctorCounts)
+          .sort((a, b) => b[1] - a[1])
+          .slice(0, 5)
+          .map((x) => x[0]);
+
+        const [patientsFetched, doctorsFetched] = await Promise.all([
+          topPatientIds.length ? buscarPacientesPorIds(topPatientIds) : Promise.resolve([]),
+          topDoctorIds.length ? buscarMedicosPorIds(topDoctorIds) : Promise.resolve([]),
+        ]);
+
+        // ===== Build Patient List =====
+        const pacientesList = topPatientIds.map((id) => {
+          const p = (patientsFetched || []).find((x: any) => String(x.id) === String(id));
+          return { nome: p ? p.full_name : id, consultas: patientCounts[id] || 0 };
+        });
+
+        // ===== Build Doctor List =====
+        const medicosList = topDoctorIds.map((id) => {
+          const m = (doctorsFetched || []).find((x: any) => String(x.id) === String(id));
+          return { nome: m ? m.full_name : id, consultas: doctorCounts[id] || 0 };
+        });
+
+        // ===== Update State =====
+        setPacientesTop(pacientesList);
+        setMedicosTop(medicosList.length ? medicosList : FALLBACK_MEDICOS);
+        setMetricsState([
+          { label: "Atendimentos", value: appointmentsToday ?? 0, icon: <CalendarCheck className="w-6 h-6 text-blue-500" /> },
+        ] as any);
+      } catch (err: any) {
+        console.error("[relatorios] error loading data:", err);
+        if (mounted) setError(err?.message ?? String(err));
+      } finally {
+        if (mounted) setLoading(false);
+      }
+    }
+
+    load();
+    return () => {
+      mounted = false;
+    };
+  }, []);  return (
+    <div className="p-6 bg-background min-h-screen">
+      <h1 className="text-2xl font-bold mb-6 text-foreground">Dashboard Executivo de Relatórios</h1>
+
+      {/* Métricas principais */}
+      <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-1 gap-6 mb-8">
+        {loading ? (
+          // simple skeletons while loading to avoid showing fake data
+          Array.from({ length: 1 }).map((_, i) => (
+            <div key={i} className="p-4 bg-card border border-border rounded-lg shadow flex flex-col items-center justify-center">
+              <div className="h-6 w-6 bg-muted rounded mb-2 animate-pulse" />
+              <div className="h-6 w-20 bg-muted rounded mt-2 animate-pulse" />
+              <div className="h-3 w-28 bg-muted rounded mt-3 animate-pulse" />
+            </div>
+          ))
+        ) : (
+          metricsState.map((m) => (
+            <div key={m.label} className="p-4 bg-card border border-border rounded-lg shadow flex flex-col items-center justify-center">
+              {m.icon}
+              <span className="text-2xl font-bold mt-2 text-foreground">{m.value}</span>
+              <span className="text-sm text-muted-foreground mt-1 text-center">{m.label}</span>
+            </div>
+          ))
+        )}
+      </div>
+
+      {/* Consultas Chart */}
+      <div className="grid grid-cols-1 gap-8 mb-8">
+        <div className="bg-card border border-border rounded-lg shadow p-6">
+          <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-3 md:gap-0 mb-4">
+            <h2 className="font-semibold text-lg text-foreground flex items-center gap-2">
+              <BarChart2 className="w-5 h-5" /> Consultas por Período
+            </h2>
+            <Button
+              size="sm"
+              variant="outline"
+              className="hover:bg-primary! hover:text-white! transition-colors w-full md:w-auto"
+              onClick={() => exportPDF("Consultas por Período", "Resumo das consultas realizadas por período.", "chart-consultas")}
+            >
+              <FileDown className="w-4 h-4 mr-1" /> Exportar PDF
+            </Button>
+          </div>
+          {loading ? (
+            <div className="h-[220px] flex items-center justify-center text-muted-foreground">Carregando dados...</div>
+          ) : (
+            <div id="chart-consultas">
+              <ResponsiveContainer width="100%" height={220}>
+                <BarChart data={consultasData}>
+                  <CartesianGrid strokeDasharray="3 3" />
+                  <XAxis dataKey="periodo" />
+                  <YAxis />
+                  <Tooltip />
+                  <Bar dataKey="consultas" fill="#6366f1" name="Consultas" />
+                </BarChart>
+              </ResponsiveContainer>
+            </div>
+          )}
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
+        {/* Pacientes mais atendidos */}
+        <div className="bg-card border border-border rounded-lg shadow p-6">
+          <div className="flex items-center justify-between mb-2">
+            <h2 className="font-semibold text-lg text-foreground flex items-center gap-2"><Users className="w-5 h-5" /> Pacientes Mais Atendidos</h2>
+            <Button size="sm" variant="outline" className="hover:bg-primary! hover:text-white! transition-colors" onClick={() => exportPDF("Pacientes Mais Atendidos", "Lista dos pacientes mais atendidos.", "table-pacientes")}> <FileDown className="w-4 h-4 mr-1" /> Exportar PDF</Button>
+          </div>
+          <div id="table-pacientes">
+            <table className="w-full text-sm mt-4">
+            <thead>
+              <tr className="text-muted-foreground">
+                <th className="text-left font-medium">Paciente</th>
+                <th className="text-left font-medium">Consultas</th>
+              </tr>
+            </thead>
+            <tbody>
+              {loading ? (
+                <tr>
+                  <td className="py-4 text-muted-foreground" colSpan={2}>Carregando pacientes...</td>
+                </tr>
+              ) : pacientesTop && pacientesTop.length ? (
+                pacientesTop.map((p: { nome: string; consultas: number }) => (
+                  <tr key={p.nome}>
+                    <td className="py-1">{p.nome}</td>
+                    <td className="py-1">{p.consultas}</td>
+                  </tr>
+                ))
+              ) : (
+                <tr>
+                  <td className="py-4 text-muted-foreground" colSpan={2}>Nenhum paciente encontrado</td>
+                </tr>
+              )}
+            </tbody>
+          </table>
+          </div>
+        </div>
+
+        {/* Médicos mais produtivos */}
+        <div className="bg-card border border-border rounded-lg shadow p-6">
+          <div className="flex items-center justify-between mb-2">
+            <h2 className="font-semibold text-lg text-foreground flex items-center gap-2"><Users className="w-5 h-5" /> Médicos Mais Produtivos</h2>
+            <Button size="sm" variant="outline" className="hover:bg-primary! hover:text-white! transition-colors" onClick={() => exportPDF("Médicos Mais Produtivos", "Lista dos médicos mais produtivos.", "table-medicos")}> <FileDown className="w-4 h-4 mr-1" /> Exportar PDF</Button>
+          </div>
+          <div id="table-medicos">
+            <table className="w-full text-sm mt-4">
+            <thead>
+              <tr className="text-muted-foreground">
+                <th className="text-left font-medium">Médico</th>
+                <th className="text-left font-medium">Consultas</th>
+              </tr>
+            </thead>
+            <tbody>
+              {loading ? (
+                <tr>
+                  <td className="py-4 text-muted-foreground" colSpan={2}>Carregando médicos...</td>
+                </tr>
+              ) : medicosTop && medicosTop.length ? (
+                medicosTop.map((m) => (
+                  <tr key={m.nome}>
+                    <td className="py-1">{m.nome}</td>
+                    <td className="py-1">{m.consultas}</td>
+                  </tr>
+                ))
+              ) : (
+                <tr>
+                  <td className="py-4 text-muted-foreground" colSpan={2}>Nenhum médico encontrado</td>
+                </tr>
+              )}
+            </tbody>
+          </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+

susconecta/app/(main-routes)/layout.tsx

@@ -0,0 +1,27 @@
+import type React from "react";
+import ProtectedRoute from "@/components/shared/ProtectedRoute";
+import { Sidebar } from "@/components/layout/sidebar";
+import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
+import { PagesHeader } from "@/components/features/dashboard/header";
+
+export default function MainRoutesLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  console.log('[MAIN-ROUTES-LAYOUT] Layout do administrador carregado')
+  
+  return (
+    <ProtectedRoute requiredUserType={["administrador"]}>
+      <div className="min-h-screen bg-background flex">
+        <SidebarProvider>
+          <Sidebar />
+          <main className="flex-1">
+            <PagesHeader />
+            {children}
+          </main>
+        </SidebarProvider>
+      </div>
+    </ProtectedRoute>
+  );
+}

susconecta/app/(main-routes)/pacientes/layout.tsx

@@ -0,0 +1,5 @@
+import type { ReactNode } from "react";
+
+export default function PacientesLayout({ children }: { children: ReactNode }) {
+  return <>{children}</>;
+}

susconecta/app/(main-routes)/pacientes/loading.tsx

@@ -0,0 +1,3 @@
+export default function Loading() {
+  return null
+}

susconecta/app/(main-routes)/pacientes/page.tsx

@@ -0,0 +1,583 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
+import { Label } from "@/components/ui/label";
+import { MoreHorizontal, Plus, Search, Eye, Edit, Trash2, ArrowLeft } from "lucide-react";
+
+import { Paciente, Endereco, listarPacientes, buscarPacientes, buscarPacientePorId, excluirPaciente } from "@/lib/api";
+import { PatientRegistrationForm } from "@/components/features/forms/patient-registration-form";
+import AssignmentForm from "@/components/features/admin/AssignmentForm";
+
+
+function normalizePaciente(p: any): Paciente {
+  return {
+    id: String(p.id ?? p.uuid ?? p.paciente_id ?? ""),
+    full_name: p.full_name ?? p.name ?? p.nome ?? "",
+    social_name: p.social_name ?? p.nome_social ?? null,
+    cpf: p.cpf ?? "",
+    rg: p.rg ?? p.document_number ?? null,
+    sex: p.sex ?? p.sexo ?? null,
+    birth_date: p.birth_date ?? p.data_nascimento ?? null,
+    phone_mobile: p.phone_mobile ?? p.telefone ?? "",
+    email: p.email ?? "",
+    cep: p.cep ?? "",
+    street: p.street ?? p.logradouro ?? "",
+    number: p.number ?? p.numero ?? "",
+    complement: p.complement ?? p.complemento ?? "",
+    neighborhood: p.neighborhood ?? p.bairro ?? "",
+    city: p.city ?? p.cidade ?? "",
+    state: p.state ?? p.estado ?? "",
+    notes: p.notes ?? p.observacoes ?? null,
+  };
+}
+
+
+export default function PacientesPage() {
+  const [patients, setPatients] = useState<Paciente[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const [search, setSearch] = useState("");
+  const [showForm, setShowForm] = useState(false);
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [viewingPatient, setViewingPatient] = useState<Paciente | null>(null);
+  const [assignDialogOpen, setAssignDialogOpen] = useState(false);
+  const [assignPatientId, setAssignPatientId] = useState<string | null>(null);
+  
+  // Paginação
+  const [currentPage, setCurrentPage] = useState(1);
+  const [itemsPerPage, setItemsPerPage] = useState(10);
+
+  // Ordenação e filtros adicionais
+  const [sortBy, setSortBy] = useState<"name_asc" | "name_desc" | "recent" | "oldest">("name_asc");
+  const [stateFilter, setStateFilter] = useState<string>("");
+  const [cityFilter, setCityFilter] = useState<string>("");
+
+  async function loadAll() {
+    try {
+      setLoading(true);
+      const data = await listarPacientes({ page: 1, limit: 50 });
+      
+      if (Array.isArray(data)) {
+        setPatients(data.map(normalizePaciente));
+      } else {
+        setPatients([]);
+      }
+      setError(null);
+    } catch (e: any) {
+      setPatients([]);
+      setError(e?.message || "Erro ao carregar pacientes.");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  useEffect(() => {
+    loadAll();
+  }, []);
+
+  // Opções dinâmicas para Estado e Cidade
+  const stateOptions = useMemo(
+    () =>
+      Array.from(
+        new Set((patients || []).map((p) => (p.state || "").trim()).filter(Boolean)),
+      ).sort((a, b) => a.localeCompare(b, "pt-BR", { sensitivity: "base" })),
+    [patients],
+  );
+
+  const cityOptions = useMemo(() => {
+    const base = (patients || []).filter((p) => !stateFilter || String(p.state) === stateFilter);
+    return Array.from(
+      new Set(base.map((p) => (p.city || "").trim()).filter(Boolean)),
+    ).sort((a, b) => a.localeCompare(b, "pt-BR", { sensitivity: "base" }));
+  }, [patients, stateFilter]);
+
+  // Índice para ordenar por "tempo" (ordem de carregamento)
+  const indexById = useMemo(() => {
+    const map = new Map<string, number>();
+    (patients || []).forEach((p, i) => map.set(String(p.id), i));
+    return map;
+  }, [patients]);
+
+  // Substitui o filtered anterior: aplica busca + filtros + ordenação
+  const filtered = useMemo(() => {
+    let base = patients;
+
+    // Busca
+    if (search.trim()) {
+      const q = search.toLowerCase().trim();
+      const qDigits = q.replace(/\D/g, "");
+      base = patients.filter((p) => {
+        const byName = (p.full_name || "").toLowerCase().includes(q);
+        const byCPF = qDigits.length >= 3 && (p.cpf || "").replace(/\D/g, "").includes(qDigits);
+        const byId = (p.id || "").toLowerCase().includes(q);
+        const byEmail = (p.email || "").toLowerCase().includes(q);
+        return byName || byCPF || byId || byEmail;
+      });
+    }
+
+    // Filtros por UF e cidade
+    const withLocation = base.filter((p) => {
+      if (stateFilter && String(p.state) !== stateFilter) return false;
+      if (cityFilter && String(p.city) !== cityFilter) return false;
+      return true;
+    });
+
+    // Ordenação
+    const sorted = [...withLocation];
+    if (sortBy === "name_asc" || sortBy === "name_desc") {
+      sorted.sort((a, b) => {
+        const an = (a.full_name || "").trim();
+        const bn = (b.full_name || "").trim();
+        const cmp = an.localeCompare(bn, "pt-BR", { sensitivity: "base" });
+        return sortBy === "name_asc" ? cmp : -cmp;
+      });
+    } else if (sortBy === "recent" || sortBy === "oldest") {
+      sorted.sort((a, b) => {
+        const ia = indexById.get(String(a.id)) ?? 0;
+        const ib = indexById.get(String(b.id)) ?? 0;
+        return sortBy === "recent" ? ia - ib : ib - ia;
+      });
+    }
+
+    return sorted;
+  }, [patients, search, stateFilter, cityFilter, sortBy, indexById]);
+
+  // Dados paginados
+  const paginatedData = useMemo(() => {
+    const startIndex = (currentPage - 1) * itemsPerPage;
+    const endIndex = startIndex + itemsPerPage;
+    return filtered.slice(startIndex, endIndex);
+  }, [filtered, currentPage, itemsPerPage]);
+
+  const totalPages = Math.ceil(filtered.length / itemsPerPage);
+
+  // Reset página ao mudar filtros/ordenadores
+  useEffect(() => {
+    setCurrentPage(1);
+  }, [search, itemsPerPage, stateFilter, cityFilter, sortBy]);
+
+  function handleAdd() {
+    setEditingId(null);
+    setShowForm(true);
+  }
+
+  function handleEdit(id: string) {
+    setEditingId(id);
+    setShowForm(true);
+  }
+
+  function handleView(patient: Paciente) {
+    setViewingPatient(patient);
+  }
+
+  async function handleDelete(id: string) {
+    if (!confirm("Excluir este paciente?")) return;
+    try {
+      await excluirPaciente(id);
+      setPatients((prev) => prev.filter((x) => String(x.id) !== String(id)));
+    } catch (e: any) {
+      alert(e?.message || "Não foi possível excluir.");
+    }
+  }
+
+  function handleSaved(p: Paciente) {
+    const saved = normalizePaciente(p);
+    setPatients((prev) => {
+      const i = prev.findIndex((x) => String(x.id) === String(saved.id));
+      if (i < 0) return [saved, ...prev];
+      const clone = [...prev];
+      clone[i] = saved;
+      return clone;
+    });
+    setShowForm(false);
+  }
+
+  async function handleBuscarServidor() {
+    const q = search.trim();
+    if (!q) return loadAll();
+
+    try {
+      setLoading(true);
+      setError(null);
+
+      // Se parece com ID (UUID), busca diretamente
+      if (q.includes('-') && q.length > 10) {
+        const one = await buscarPacientePorId(q);
+        setPatients(one ? [normalizePaciente(one)] : []);
+        setError(one ? null : "Paciente não encontrado.");
+        // Limpa o campo de busca para que o filtro não interfira
+        setSearch("");
+        return;
+      }
+
+      // Para outros termos, usa busca avançada
+      const results = await buscarPacientes(q);
+      setPatients(results.map(normalizePaciente));
+      setError(results.length === 0 ? "Nenhum paciente encontrado." : null);
+      // Limpa o campo de busca para que o filtro não interfira
+      setSearch("");
+      
+    } catch (e: any) {
+      setPatients([]);
+      setError(e?.message || "Erro na busca.");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  if (loading) return <p>Carregando pacientes...</p>;
+  if (error) return <p className="text-red-500">{error}</p>;
+
+  if (showForm) {
+    return (
+      <div className="space-y-6 p-6 bg-background">
+        <div className="flex items-center gap-4">
+          <Button variant="ghost" onClick={() => setShowForm(false)}>
+            <ArrowLeft className="h-4 w-4" />
+          </Button>
+          <h1 className="text-2xl font-bold">{editingId ? "Editar paciente" : "Novo paciente"}</h1>
+        </div>
+
+        <PatientRegistrationForm
+          inline
+          mode={editingId ? "edit" : "create"}
+          patientId={editingId}
+          onSaved={handleSaved}
+          onClose={() => setShowForm(false)}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4 sm:space-y-6 p-3 sm:p-4 md:p-6 bg-background">
+      {/* Header responsivo */}
+      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 sm:gap-4">
+        <div>
+          <h1 className="text-2xl sm:text-3xl font-bold">Pacientes</h1>
+          <p className="text-xs sm:text-sm text-muted-foreground">Gerencie os pacientes</p>
+        </div>
+        <Button onClick={handleAdd} className="w-full sm:w-auto">
+          <Plus className="mr-2 h-4 w-4" />
+          <span className="hidden sm:inline">Novo paciente</span>
+          <span className="sm:hidden">Novo</span>
+        </Button>
+      </div>
+
+      {/* Filtros e busca responsivos */}
+      <div className="space-y-2 sm:space-y-3">
+        {/* Linha 1: Busca */}
+        <div className="flex gap-2">
+          <div className="relative flex-1">
+            <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
+            <Input
+              className="pl-8 w-full text-xs sm:text-sm h-8 sm:h-9"
+              placeholder="Nome, CPF ou ID…"
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && handleBuscarServidor()}
+            />
+          </div>
+          <Button variant="secondary" size="sm" onClick={() => void handleBuscarServidor()} className="hover:bg-primary hover:text-white text-xs sm:text-sm h-8 sm:h-9 px-2 sm:px-4">
+            <span className="hidden sm:inline">Buscar</span>
+            <span className="sm:hidden">Ir</span>
+          </Button>
+        </div>
+
+        {/* Linha 2: Selects responsivos em grid */}
+        <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-2">
+          {/* Ordenar por */}
+          <select
+            aria-label="Ordenar por"
+            value={sortBy}
+            onChange={(e) => setSortBy(e.target.value as any)}
+                className="h-8 sm:h-9 rounded-md border border-input bg-background px-2 sm:px-3 py-1 text-xs sm:text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-primary hover:border-primary transition-colors cursor-pointer"
+          >
+            <option value="name_asc">A–Z</option>
+            <option value="name_desc">Z–A</option>
+            <option value="recent">Recentes</option>
+            <option value="oldest">Antigos</option>
+          </select>
+
+          {/* Estado (UF) */}
+          <select
+            aria-label="Filtrar por estado"
+            value={stateFilter}
+            onChange={(e) => {
+              setStateFilter(e.target.value);
+              setCityFilter("");
+            }}
+            className="h-8 sm:h-9 rounded-md border border-input bg-background px-2 sm:px-3 py-1 text-xs sm:text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-primary hover:border-primary transition-colors cursor-pointer"
+          >
+            <option value="">Estado</option>
+            {stateOptions.map((uf) => (
+              <option key={uf} value={uf}>{uf}</option>
+            ))}
+          </select>
+
+          {/* Cidade (dependente do estado) */}
+          <select
+            aria-label="Filtrar por cidade"
+            value={cityFilter}
+            onChange={(e) => setCityFilter(e.target.value)}
+            className="h-8 sm:h-9 rounded-md border border-input bg-background px-2 sm:px-3 py-1 text-xs sm:text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-primary hover:border-primary transition-colors cursor-pointer"
+          >
+            <option value="">Cidade</option>
+            {cityOptions.map((c) => (
+              <option key={c} value={c}>{c}</option>
+            ))}
+          </select>
+        </div>
+      </div>
+
+      {/* Desktop Table - Hidden on mobile */}
+      <div className="hidden md:block border rounded-lg overflow-hidden">
+        <Table>
+          <TableHeader>
+            <TableRow className="bg-primary hover:bg-primary">
+              <TableHead className="text-primary-foreground text-xs sm:text-sm">Nome</TableHead>
+              <TableHead className="text-primary-foreground text-xs sm:text-sm">CPF</TableHead>
+              <TableHead className="text-primary-foreground text-xs sm:text-sm">Telefone</TableHead>
+              <TableHead className="text-primary-foreground text-xs sm:text-sm">Cidade</TableHead>
+              <TableHead className="text-primary-foreground text-xs sm:text-sm">Estado</TableHead>
+              <TableHead className="w-[100px] text-primary-foreground text-xs sm:text-sm">Ações</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {paginatedData.length > 0 ? (
+              paginatedData.map((p) => (
+                <TableRow key={p.id}>
+                  <TableCell className="font-medium text-xs sm:text-sm">{p.full_name || "(sem nome)"}</TableCell>
+                  <TableCell className="text-xs sm:text-sm">{p.cpf || "-"}</TableCell>
+                  <TableCell className="text-xs sm:text-sm">{p.phone_mobile || "-"}</TableCell>
+                  <TableCell className="text-xs sm:text-sm">{p.city || "-"}</TableCell>
+                  <TableCell className="text-xs sm:text-sm">{p.state || "-"}</TableCell>
+                  <TableCell>
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild>
+                        <button className="h-8 w-8 p-0 flex items-center justify-center rounded-md hover:bg-primary hover:text-white transition-colors">
+                          <span className="sr-only">Abrir menu</span>
+                          <MoreHorizontal className="h-4 w-4" />
+                        </button>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent align="end">
+                        <DropdownMenuItem onClick={() => handleView(p)}>
+                          <Eye className="mr-2 h-4 w-4" />
+                          Ver
+                        </DropdownMenuItem>
+                        <DropdownMenuItem onClick={() => handleEdit(String(p.id))}>
+                          <Edit className="mr-2 h-4 w-4" />
+                          Editar
+                        </DropdownMenuItem>
+                        <DropdownMenuItem onClick={() => handleDelete(String(p.id))} className="text-destructive">
+                          <Trash2 className="mr-2 h-4 w-4" />
+                          Excluir
+                        </DropdownMenuItem>
+                        <DropdownMenuItem onClick={() => { setAssignPatientId(String(p.id)); setAssignDialogOpen(true); }}>
+                          <Edit className="mr-2 h-4 w-4" />
+                          Atribuir profissional
+                        </DropdownMenuItem>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  </TableCell>
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell colSpan={6} className="text-center text-xs sm:text-sm text-muted-foreground py-4">
+                  Nenhum paciente encontrado
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+
+      {/* Mobile Cards - Hidden on desktop */}
+      <div className="md:hidden space-y-2">
+        {paginatedData.length > 0 ? (
+          paginatedData.map((p) => (
+            <div key={p.id} className="bg-card p-3 sm:p-4 rounded-lg border border-border hover:border-primary transition-colors">
+              <div className="grid grid-cols-2 gap-2">
+                <div className="col-span-2 flex justify-between items-start">
+                  <div className="flex-1">
+                    <div className="text-[10px] sm:text-xs font-semibold text-primary">Nome</div>
+                    <div className="text-xs sm:text-sm font-medium truncate">{p.full_name || "(sem nome)"}</div>
+                  </div>
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <button className="h-7 w-7 p-0 flex items-center justify-center rounded-md hover:bg-primary hover:text-white transition-colors flex-shrink-0">
+                        <span className="sr-only">Menu</span>
+                        <MoreHorizontal className="h-3.5 w-3.5" />
+                      </button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end">
+                      <DropdownMenuItem onClick={() => handleView(p)}>
+                        <Eye className="mr-2 h-4 w-4" />
+                        Ver
+                      </DropdownMenuItem>
+                      <DropdownMenuItem onClick={() => handleEdit(String(p.id))}>
+                        <Edit className="mr-2 h-4 w-4" />
+                        Editar
+                      </DropdownMenuItem>
+                      <DropdownMenuItem onClick={() => handleDelete(String(p.id))} className="text-destructive">
+                        <Trash2 className="mr-2 h-4 w-4" />
+                        Excluir
+                      </DropdownMenuItem>
+                      <DropdownMenuItem onClick={() => { setAssignPatientId(String(p.id)); setAssignDialogOpen(true); }}>
+                        <Edit className="mr-2 h-4 w-4" />
+                        Atribuir prof.
+                      </DropdownMenuItem>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </div>
+                <div>
+                  <div className="text-[10px] sm:text-xs text-muted-foreground">CPF</div>
+                  <div className="text-[10px] sm:text-xs font-medium">{p.cpf || "-"}</div>
+                </div>
+                <div>
+                  <div className="text-[10px] sm:text-xs text-muted-foreground">Telefone</div>
+                  <div className="text-[10px] sm:text-xs font-medium">{p.phone_mobile || "-"}</div>
+                </div>
+                <div>
+                  <div className="text-[10px] sm:text-xs text-muted-foreground">Cidade</div>
+                  <div className="text-[10px] sm:text-xs font-medium truncate">{p.city || "-"}</div>
+                </div>
+                <div>
+                  <div className="text-[10px] sm:text-xs text-muted-foreground">Estado</div>
+                  <div className="text-[10px] sm:text-xs font-medium">{p.state || "-"}</div>
+                </div>
+              </div>
+            </div>
+          ))
+        ) : (
+          <div className="text-center text-xs sm:text-sm text-muted-foreground py-4">
+            Nenhum paciente encontrado
+          </div>
+        )}
+      </div>
+
+      {/* Controles de paginação - Responsivos */}
+      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 sm:gap-4 text-xs sm:text-sm">
+        <div className="flex items-center gap-2 flex-wrap">
+          <span className="text-muted-foreground text-xs sm:text-sm">Itens por página:</span>
+          <select
+            value={itemsPerPage}
+            onChange={(e) => setItemsPerPage(Number(e.target.value))}
+            className="h-8 sm:h-9 rounded-md border border-input bg-background px-2 sm:px-3 py-1 text-xs sm:text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-primary hover:border-primary transition-colors cursor-pointer"
+          >
+            <option value={10}>10</option>
+            <option value={15}>15</option>
+            <option value={20}>20</option>
+          </select>
+          <span className="text-muted-foreground text-xs sm:text-sm">
+            Mostrando {paginatedData.length > 0 ? (currentPage - 1) * itemsPerPage + 1 : 0} a{" "}
+            {Math.min(currentPage * itemsPerPage, filtered.length)} de {filtered.length}
+          </span>
+        </div>
+
+        <div className="flex items-center gap-1 sm:gap-2 flex-wrap justify-center sm:justify-end">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => setCurrentPage(1)}
+            disabled={currentPage === 1}
+            className="hover:bg-primary! hover:text-white! transition-colors text-xs sm:text-sm h-7 sm:h-9 px-1 sm:px-3"
+          >
+            <span className="hidden sm:inline">Primeira</span>
+            <span className="sm:hidden">1ª</span>
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => setCurrentPage((prev) => Math.max(1, prev - 1))}
+            disabled={currentPage === 1}
+            className="hover:bg-primary! hover:text-white! transition-colors text-xs sm:text-sm h-7 sm:h-9 px-1 sm:px-3"
+          >
+            <span className="hidden sm:inline">Anterior</span>
+            <span className="sm:hidden">«</span>
+          </Button>
+          <span className="text-muted-foreground text-xs sm:text-sm">
+            Pág {currentPage} de {totalPages || 1}
+          </span>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => setCurrentPage((prev) => Math.min(totalPages, prev + 1))}
+            disabled={currentPage === totalPages || totalPages === 0}
+            className="hover:bg-primary! hover:text-white! transition-colors text-xs sm:text-sm h-7 sm:h-9 px-1 sm:px-3"
+          >
+            <span className="hidden sm:inline">Próxima</span>
+            <span className="sm:hidden">»</span>
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => setCurrentPage(totalPages)}
+            disabled={currentPage === totalPages || totalPages === 0}
+            className="hover:bg-primary! hover:text-white! transition-colors text-xs sm:text-sm h-7 sm:h-9 px-1 sm:px-3"
+          >
+            <span className="hidden sm:inline">Última</span>
+            <span className="sm:hidden">Últ</span>
+          </Button>
+        </div>
+      </div>
+
+      {viewingPatient && (
+        <Dialog open={!!viewingPatient} onOpenChange={() => setViewingPatient(null)}>
+          <DialogContent className="max-w-2xl">
+            <DialogHeader>
+              <DialogTitle>Detalhes do Paciente</DialogTitle>
+              <DialogDescription>
+                Informações detalhadas de {viewingPatient.full_name}.
+              </DialogDescription>
+            </DialogHeader>
+            <div className="grid gap-4 py-4">
+              <div className="grid grid-cols-1 sm:grid-cols-4 items-start sm:items-center gap-2 sm:gap-4">
+                <Label className="text-left sm:text-right">Nome</Label>
+                <span className="col-span-1 sm:col-span-3 font-medium">{viewingPatient.full_name}</span>
+              </div>
+              <div className="grid grid-cols-1 sm:grid-cols-4 items-start sm:items-center gap-2 sm:gap-4">
+                <Label className="text-left sm:text-right">CPF</Label>
+                <span className="col-span-1 sm:col-span-3">{viewingPatient.cpf}</span>
+              </div>
+              <div className="grid grid-cols-1 sm:grid-cols-4 items-start sm:items-center gap-2 sm:gap-4">
+                <Label className="text-left sm:text-right">Telefone</Label>
+                <span className="col-span-1 sm:col-span-3">{viewingPatient.phone_mobile}</span>
+              </div>
+              <div className="grid grid-cols-1 sm:grid-cols-4 items-start sm:items-center gap-2 sm:gap-4">
+                <Label className="text-left sm:text-right">Endereço</Label>
+                <span className="col-span-1 sm:col-span-3">
+                  {`${viewingPatient.street || ''}, ${viewingPatient.number || ''} - ${viewingPatient.neighborhood || ''}, ${viewingPatient.city || ''} - ${viewingPatient.state || ''}`}
+                </span>
+              </div>
+               <div className="grid grid-cols-1 sm:grid-cols-4 items-start sm:items-center gap-2 sm:gap-4">
+                <Label className="text-left sm:text-right">Observações</Label>
+                <span className="col-span-1 sm:col-span-3">{viewingPatient.notes || "Nenhuma"}</span>
+              </div>
+            </div>
+            <DialogFooter>
+              <Button onClick={() => setViewingPatient(null)}>Fechar</Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      )}
+
+      {/* Assignment dialog */}
+      {assignDialogOpen && assignPatientId && (
+        <AssignmentForm
+          patientId={assignPatientId}
+          open={assignDialogOpen}
+          onClose={() => { setAssignDialogOpen(false); setAssignPatientId(null); }}
+          onSaved={() => { setAssignDialogOpen(false); setAssignPatientId(null); loadAll(); }}
+        />
+      )}
+    </div>
+  );
+}

susconecta/app/(main-routes)/perfil/loading.tsx

@@ -0,0 +1,34 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function PerfillLoading() {
+  return (
+    <div className="space-y-6 p-6">
+      <div className="flex items-center gap-4 mb-8">
+        <Skeleton className="h-20 w-20 rounded-full" />
+        <div className="space-y-2 flex-1">
+          <Skeleton className="h-6 w-64" />
+          <Skeleton className="h-4 w-48" />
+        </div>
+      </div>
+
+      <div className="grid gap-6">
+        <div className="rounded-lg border border-border p-6 space-y-4">
+          <Skeleton className="h-6 w-32" />
+          <div className="space-y-3">
+            <Skeleton className="h-4 w-full" />
+            <Skeleton className="h-4 w-full" />
+            <Skeleton className="h-4 w-3/4" />
+          </div>
+        </div>
+
+        <div className="rounded-lg border border-border p-6 space-y-4">
+          <Skeleton className="h-6 w-32" />
+          <div className="space-y-3">
+            <Skeleton className="h-4 w-full" />
+            <Skeleton className="h-4 w-full" />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

susconecta/app/(main-routes)/perfil/page.tsx

@@ -0,0 +1,697 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import { Button } from "@/components/ui/button";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Badge } from "@/components/ui/badge";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { UploadAvatar } from "@/components/ui/upload-avatar";
+import { AlertCircle, ArrowLeft, CheckCircle, XCircle } from "lucide-react";
+import { getUserInfoById } from "@/lib/api";
+import { useAuth } from "@/hooks/useAuth";
+import { formatTelefone, formatCEP, validarCEP, buscarCEP } from "@/lib/utils";
+
+interface UserProfile {
+  user: {
+    id: string;
+    email: string;
+    created_at: string;
+    last_sign_in_at: string | null;
+    email_confirmed_at: string | null;
+  };
+  profile: {
+    id: string;
+    full_name: string | null;
+    email: string | null;
+    phone: string | null;
+    avatar_url: string | null;
+    cep?: string | null;
+    street?: string | null;
+    number?: string | null;
+    complement?: string | null;
+    neighborhood?: string | null;
+    city?: string | null;
+    state?: string | null;
+    disabled: boolean;
+    created_at: string;
+    updated_at: string;
+  } | null;
+  roles: string[];
+  permissions: {
+    isAdmin: boolean;
+    isManager: boolean;
+    isDoctor: boolean;
+    isSecretary: boolean;
+    isAdminOrManager: boolean;
+  };
+}
+
+export default function PerfilPage() {
+  const router = useRouter();
+  const { user: authUser, updateUserProfile } = useAuth();
+  const [userInfo, setUserInfo] = useState<UserProfile | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [isEditing, setIsEditing] = useState(false);
+  const [editingData, setEditingData] = useState<{
+    phone?: string;
+    full_name?: string;
+    avatar_url?: string;
+    cep?: string;
+    street?: string;
+    number?: string;
+    complement?: string;
+    neighborhood?: string;
+    city?: string;
+    state?: string;
+  }>({});
+  const [cepLoading, setCepLoading] = useState(false);
+  const [cepValid, setCepValid] = useState<boolean | null>(null);
+
+  useEffect(() => {
+    async function loadUserInfo() {
+      try {
+        setLoading(true);
+        
+        if (!authUser?.id) {
+          throw new Error("ID do usuário não encontrado");
+        }
+
+        console.log('[PERFIL] Chamando getUserInfoById com ID:', authUser.id);
+        
+        // Para admin/gestor, usar getUserInfoById com o ID do usuário logado
+        const info = await getUserInfoById(authUser.id);
+        console.log('[PERFIL] Sucesso ao carregar info:', info);
+        setUserInfo(info as UserProfile);
+        setError(null);
+      } catch (err: any) {
+        console.error('[PERFIL] Erro ao carregar:', err);
+        setError(err?.message || "Erro ao carregar informações do perfil");
+        setUserInfo(null);
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    if (authUser) {
+      console.log('[PERFIL] useEffect acionado, authUser:', authUser);
+      loadUserInfo();
+    }
+  }, [authUser]);
+
+  if (authUser?.userType !== 'administrador') {
+    return (
+      <div className="flex flex-col h-screen">
+        <div className="flex-1 p-6">
+          <Alert variant="destructive">
+            <AlertCircle className="h-4 w-4" />
+            <AlertDescription>
+              Você não tem permissão para acessar esta página.
+            </AlertDescription>
+          </Alert>
+          <Button
+            variant="outline"
+            onClick={() => router.back()}
+            className="mt-4 hover:bg-primary/10 hover:text-primary dark:hover:bg-accent dark:hover:text-accent-foreground"
+          >
+            <ArrowLeft className="h-4 w-4 mr-2" />
+            Voltar
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  if (loading) {
+    return (
+      <div className="flex flex-col h-screen">
+        <div className="flex-1 p-6">
+          <div className="space-y-4">
+            <div className="h-20 bg-muted rounded-lg animate-pulse" />
+            <div className="h-64 bg-muted rounded-lg animate-pulse" />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="flex flex-col h-screen">
+        <div className="flex-1 p-6">
+          <Alert variant="destructive">
+            <AlertCircle className="h-4 w-4" />
+            <AlertDescription>{error}</AlertDescription>
+          </Alert>
+          <Button
+            variant="outline"
+            onClick={() => window.location.reload()}
+            className="mt-4"
+          >
+            Tentar Novamente
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  if (!userInfo) {
+    return (
+      <div className="flex flex-col h-screen">
+        <div className="flex-1 p-6">
+          <Alert>
+            <AlertCircle className="h-4 w-4" />
+            <AlertDescription>
+              Nenhuma informação de perfil disponível.
+            </AlertDescription>
+          </Alert>
+        </div>
+      </div>
+    );
+  }
+
+  const getInitials = (name: string | null | undefined) => {
+    if (!name) return "AD";
+    return name
+      .split(" ")
+      .map((n) => n[0])
+      .join("")
+      .toUpperCase()
+      .slice(0, 2);
+  };
+
+  const handleEditClick = () => {
+    if (!isEditing && userInfo) {
+      setEditingData({
+        full_name: userInfo.profile?.full_name || "",
+        phone: userInfo.profile?.phone || "",
+        avatar_url: userInfo.profile?.avatar_url || "",
+        cep: userInfo.profile?.cep || "",
+        street: userInfo.profile?.street || "",
+        number: userInfo.profile?.number || "",
+        complement: userInfo.profile?.complement || "",
+        neighborhood: userInfo.profile?.neighborhood || "",
+        city: userInfo.profile?.city || "",
+        state: userInfo.profile?.state || "",
+      });
+      // Se já existe CEP, marcar como válido
+      if (userInfo.profile?.cep) {
+        setCepValid(true);
+      }
+    }
+    setIsEditing(!isEditing);
+  };
+
+  const handleSaveEdit = async () => {
+    try {
+      // Aqui você implementaria a chamada para atualizar o perfil
+      console.log('[PERFIL] Salvando alterações:', editingData);
+      // await atualizarPerfil(userInfo?.user.id, editingData);
+      setIsEditing(false);
+      setUserInfo((prev) => 
+        prev ? {
+          ...prev,
+          profile: prev.profile ? {
+            ...prev.profile,
+            full_name: editingData.full_name || prev.profile.full_name,
+            phone: editingData.phone || prev.profile.phone,
+            avatar_url: editingData.avatar_url || prev.profile.avatar_url,
+            cep: editingData.cep || prev.profile.cep,
+            street: editingData.street || prev.profile.street,
+            number: editingData.number || prev.profile.number,
+            complement: editingData.complement || prev.profile.complement,
+            neighborhood: editingData.neighborhood || prev.profile.neighborhood,
+            city: editingData.city || prev.profile.city,
+            state: editingData.state || prev.profile.state,
+          } : null,
+        } : null
+      );
+
+      // Also update global auth profile so header/avatar updates immediately
+      try {
+        if (typeof updateUserProfile === 'function') {
+          updateUserProfile({
+            // Persist common keys used across the app
+            foto_url: editingData.avatar_url || undefined,
+            telefone: editingData.phone || undefined
+          });
+        } else {
+          // Fallback: try to persist directly to localStorage so next reload shows it
+          try {
+            const raw = localStorage.getItem('auth_user')
+            if (raw) {
+              const u = JSON.parse(raw)
+              u.profile = u.profile || {}
+              if (editingData.avatar_url) { u.profile.foto_url = editingData.avatar_url; u.profile.avatar_url = editingData.avatar_url }
+              if (editingData.phone) u.profile.telefone = editingData.phone
+              localStorage.setItem('auth_user', JSON.stringify(u))
+            }
+          } catch (_e) {}
+        }
+      } catch (err) {
+        console.warn('[PERFIL] Falha ao sincronizar profile global:', err)
+      }
+    } catch (err: any) {
+      console.error('[PERFIL] Erro ao salvar:', err);
+    }
+  };
+
+  const handleCancelEdit = () => {
+    setIsEditing(false);
+    setEditingData({});
+    setCepValid(null);
+  };
+
+  const handleCepChange = async (cepValue: string) => {
+    // Formatar CEP
+    const formatted = formatCEP(cepValue);
+    setEditingData({...editingData, cep: formatted});
+
+    // Validar CEP
+    const isValid = validarCEP(cepValue);
+    setCepValid(isValid ? null : false); // null = não validado ainda, false = inválido
+
+    if (isValid) {
+      setCepLoading(true);
+      try {
+        const resultado = await buscarCEP(cepValue);
+        if (resultado) {
+          setCepValid(true);
+          // Preencher campos automaticamente
+          setEditingData(prev => ({
+            ...prev,
+            street: resultado.street,
+            neighborhood: resultado.neighborhood,
+            city: resultado.city,
+            state: resultado.state,
+          }));
+          console.log('[PERFIL] CEP preenchido com sucesso:', resultado);
+        } else {
+          setCepValid(false);
+        }
+      } catch (err) {
+        console.error('[PERFIL] Erro ao buscar CEP:', err);
+        setCepValid(false);
+      } finally {
+        setCepLoading(false);
+      }
+    }
+  };
+
+  const handlePhoneChange = (phoneValue: string) => {
+    const formatted = formatTelefone(phoneValue);
+    setEditingData({...editingData, phone: formatted});
+  };
+
+  return (
+    <div className="flex flex-col h-screen bg-background">
+      <div className="flex-1 overflow-y-auto">
+        <div className="p-6 space-y-6">
+          {/* Header com Título e Botão */}
+          <div className="flex items-center justify-between">
+            <div>
+              <h2 className="text-3xl font-bold">Meu Perfil</h2>
+              <p className="text-muted-foreground mt-1">Bem-vindo à sua área exclusiva.</p>
+            </div>
+            {!isEditing ? (
+              <Button 
+                className="bg-blue-600 hover:bg-blue-700"
+                onClick={handleEditClick}
+              >
+                 Editar Perfil
+              </Button>
+            ) : (
+              <div className="flex gap-2">
+                <Button 
+                  className="bg-green-600 hover:bg-green-700"
+                  onClick={handleSaveEdit}
+                >
+                  ✓ Salvar
+                </Button>
+                <Button 
+                  variant="outline"
+                  onClick={handleCancelEdit}
+                >
+                  ✕ Cancelar
+                </Button>
+              </div>
+            )}
+          </div>
+
+          {/* Grid de 2 colunas */}
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+            {/* Coluna Esquerda - Informações Pessoais */}
+            <div className="lg:col-span-2 space-y-6">
+              {/* Informações Pessoais */}
+              <div className="border border-border rounded-lg p-6">
+                <h3 className="text-lg font-semibold mb-4">Informações Pessoais</h3>
+
+                <div className="space-y-4">
+                  {/* Nome Completo */}
+                  <div>
+                    <Label className="text-sm font-medium text-muted-foreground">
+                      Nome Completo
+                    </Label>
+                    {isEditing ? (
+                      <Input
+                        value={editingData.full_name || ""}
+                        onChange={(e) => setEditingData({...editingData, full_name: e.target.value})}
+                        className="mt-2"
+                      />
+                    ) : (
+                      <>
+                        <div className="mt-2 p-3 bg-muted rounded text-foreground font-medium">
+                          {userInfo.profile?.full_name || "Não preenchido"}
+                        </div>
+                        <p className="text-xs text-muted-foreground mt-1">
+                          Este campo não pode ser alterado
+                        </p>
+                      </>
+                    )}
+                  </div>
+
+                  {/* Email */}
+                  <div>
+                    <Label className="text-sm font-medium text-muted-foreground">
+                      Email
+                    </Label>
+                    <div className="mt-2 p-3 bg-muted rounded text-foreground">
+                      {userInfo.user.email}
+                    </div>
+                    <p className="text-xs text-muted-foreground mt-1">
+                      Este campo não pode ser alterado
+                    </p>
+                  </div>
+
+                  {/* UUID */}
+                  <div>
+                    <Label className="text-sm font-medium text-muted-foreground">
+                      UUID
+                    </Label>
+                    <div className="mt-2 p-3 bg-muted rounded text-foreground font-mono text-xs break-all">
+                      {userInfo.user.id}
+                    </div>
+                    <p className="text-xs text-muted-foreground mt-1">
+                      Este campo não pode ser alterado
+                    </p>
+                  </div>
+
+                  {/* Permissões */}
+                  <div>
+                    <Label className="text-sm font-medium text-muted-foreground">
+                      Permissões
+                    </Label>
+                    <div className="mt-2 flex flex-wrap gap-2">
+                      {userInfo.roles && userInfo.roles.length > 0 ? (
+                        userInfo.roles.map((role) => (
+                          <Badge key={role} variant="outline">
+                            {role}
+                          </Badge>
+                        ))
+                      ) : (
+                        <span className="text-sm text-muted-foreground">
+                          Nenhuma permissão atribuída
+                        </span>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              {/* Endereço e Contato */}
+              <div className="border border-border rounded-lg p-6">
+                <h3 className="text-lg font-semibold mb-4">Endereço e Contato</h3>
+
+                <div className="space-y-4">
+                  {/* Telefone */}
+                  <div>
+                    <Label className="text-sm font-medium text-muted-foreground">
+                      Telefone
+                    </Label>
+                    {isEditing ? (
+                      <Input
+                        value={editingData.phone || ""}
+                        onChange={(e) => handlePhoneChange(e.target.value)}
+                        className="mt-2"
+                        placeholder="(00) 00000-0000"
+                        maxLength={15}
+                      />
+                    ) : (
+                      <div className="mt-2 p-3 bg-muted rounded text-foreground">
+                        {userInfo.profile?.phone || "Não preenchido"}
+                      </div>
+                    )}
+                  </div>
+
+                  {/* Endereço */}
+                  <div>
+                    <Label className="text-sm font-medium text-muted-foreground">
+                      Logradouro
+                    </Label>
+                    {isEditing ? (
+                      <Input
+                        value={editingData.street || ""}
+                        onChange={(e) => setEditingData({...editingData, street: e.target.value})}
+                        className="mt-2"
+                        placeholder="Rua, avenida, etc."
+                      />
+                    ) : (
+                      <div className="mt-2 p-3 bg-muted rounded text-foreground">
+                        {userInfo.profile?.street || "Não preenchido"}
+                      </div>
+                    )}
+                  </div>
+
+                  {/* Número */}
+                  <div>
+                    <Label className="text-sm font-medium text-muted-foreground">
+                      Número
+                    </Label>
+                    {isEditing ? (
+                      <Input
+                        value={editingData.number || ""}
+                        onChange={(e) => setEditingData({...editingData, number: e.target.value})}
+                        className="mt-2"
+                        placeholder="123"
+                      />
+                    ) : (
+                      <div className="mt-2 p-3 bg-muted rounded text-foreground">
+                        {userInfo.profile?.number || "Não preenchido"}
+                      </div>
+                    )}
+                  </div>
+
+                  {/* Complemento */}
+                  <div>
+                    <Label className="text-sm font-medium text-muted-foreground">
+                      Complemento
+                    </Label>
+                    {isEditing ? (
+                      <Input
+                        value={editingData.complement || ""}
+                        onChange={(e) => setEditingData({...editingData, complement: e.target.value})}
+                        className="mt-2"
+                        placeholder="Apto 42, Bloco B, etc."
+                      />
+                    ) : (
+                      <div className="mt-2 p-3 bg-muted rounded text-foreground">
+                        {userInfo.profile?.complement || "Não preenchido"}
+                      </div>
+                    )}
+                  </div>
+
+                  {/* Bairro */}
+                  <div>
+                    <Label className="text-sm font-medium text-muted-foreground">
+                      Bairro
+                    </Label>
+                    {isEditing ? (
+                      <Input
+                        value={editingData.neighborhood || ""}
+                        onChange={(e) => setEditingData({...editingData, neighborhood: e.target.value})}
+                        className="mt-2"
+                        placeholder="Vila, bairro, etc."
+                      />
+                    ) : (
+                      <div className="mt-2 p-3 bg-muted rounded text-foreground">
+                        {userInfo.profile?.neighborhood || "Não preenchido"}
+                      </div>
+                    )}
+                  </div>
+
+                  {/* Cidade */}
+                  <div>
+                    <Label className="text-sm font-medium text-muted-foreground">
+                      Cidade
+                    </Label>
+                    {isEditing ? (
+                      <Input
+                        value={editingData.city || ""}
+                        onChange={(e) => setEditingData({...editingData, city: e.target.value})}
+                        className="mt-2"
+                        placeholder="São Paulo"
+                      />
+                    ) : (
+                      <div className="mt-2 p-3 bg-muted rounded text-foreground">
+                        {userInfo.profile?.city || "Não preenchido"}
+                      </div>
+                    )}
+                  </div>
+
+                  {/* Estado */}
+                  <div>
+                    <Label className="text-sm font-medium text-muted-foreground">
+                      Estado
+                    </Label>
+                    {isEditing ? (
+                      <Input
+                        value={editingData.state || ""}
+                        onChange={(e) => setEditingData({...editingData, state: e.target.value})}
+                        className="mt-2"
+                        placeholder="SP"
+                        maxLength={2}
+                      />
+                    ) : (
+                      <div className="mt-2 p-3 bg-muted rounded text-foreground">
+                        {userInfo.profile?.state || "Não preenchido"}
+                      </div>
+                    )}
+                  </div>
+
+                  {/* CEP */}
+                  <div>
+                    <Label className="text-sm font-medium text-muted-foreground">
+                      CEP
+                    </Label>
+                    {isEditing ? (
+                      <div className="space-y-2">
+                        <div className="flex gap-2 items-end">
+                          <div className="flex-1">
+                            <Input
+                              value={editingData.cep || ""}
+                              onChange={(e) => handleCepChange(e.target.value)}
+                              className="mt-2"
+                              placeholder="00000-000"
+                              maxLength={9}
+                              disabled={cepLoading}
+                            />
+                          </div>
+                          {cepValid === true && (
+                            <CheckCircle className="h-5 w-5 text-green-500 mb-2" />
+                          )}
+                          {cepValid === false && (
+                            <XCircle className="h-5 w-5 text-red-500 mb-2" />
+                          )}
+                        </div>
+                        {cepLoading && (
+                          <p className="text-xs text-muted-foreground">Buscando CEP...</p>
+                        )}
+                        {cepValid === false && (
+                          <p className="text-xs text-red-500">CEP inválido ou não encontrado</p>
+                        )}
+                        {cepValid === true && (
+                          <p className="text-xs text-green-500">✓ CEP preenchido com sucesso</p>
+                        )}
+                      </div>
+                    ) : (
+                      <div className="mt-2 p-3 bg-muted rounded text-foreground">
+                        {userInfo.profile?.cep || "Não preenchido"}
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* Coluna Direita - Foto do Perfil */}
+            <div>
+              <div className="border border-border rounded-lg p-6">
+                <h3 className="text-lg font-semibold mb-4">Foto do Perfil</h3>
+
+                {isEditing ? (
+                  <div className="space-y-4">
+                    <UploadAvatar
+                      userId={userInfo.user.id}
+                      currentAvatarUrl={editingData.avatar_url || userInfo.profile?.avatar_url || "/avatars/01.png"}
+                      onAvatarChange={(newUrl) => {
+                        setEditingData({...editingData, avatar_url: newUrl})
+                        try {
+                          if (typeof updateUserProfile === 'function') {
+                            updateUserProfile({ foto_url: newUrl })
+                          } else {
+                            const raw = localStorage.getItem('auth_user')
+                            if (raw) {
+                              const u = JSON.parse(raw)
+                              u.profile = u.profile || {}
+                              u.profile.foto_url = newUrl
+                              u.profile.avatar_url = newUrl
+                              localStorage.setItem('auth_user', JSON.stringify(u))
+                            }
+                          }
+                        } catch (err) {
+                          console.warn('[PERFIL] erro ao persistir avatar no auth_user localStorage', err)
+                        }
+                      }}
+                      userName={editingData.full_name || userInfo.profile?.full_name || "Usuário"}
+                    />
+                  </div>
+                ) : (
+                  <div className="flex flex-col items-center gap-4">
+                    <Avatar className="h-24 w-24">
+                      <AvatarImage
+                        src={userInfo.profile?.avatar_url || "/avatars/01.png"}
+                        alt={userInfo.profile?.full_name || "Usuário"}
+                      />
+                      <AvatarFallback className="bg-primary text-primary-foreground text-2xl font-bold">
+                        {getInitials(userInfo.profile?.full_name)}
+                      </AvatarFallback>
+                    </Avatar>
+
+                    <div className="text-center space-y-2">
+                      <p className="text-sm text-muted-foreground">
+                        {getInitials(userInfo.profile?.full_name)}
+                      </p>
+                    </div>
+                  </div>
+                )}
+
+                {/* Informações de Status */}
+                <div className="mt-6 pt-6 border-t border-border space-y-4">
+                  <div>
+                    <Label className="text-sm font-medium text-muted-foreground">
+                      Status
+                    </Label>
+                    <div className="mt-2">
+                      <Badge
+                        variant={
+                          userInfo.profile?.disabled ? "destructive" : "default"
+                        }
+                      >
+                        {userInfo.profile?.disabled ? "Desabilitado" : "Ativo"}
+                      </Badge>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Botão Voltar */}
+          <div className="flex gap-3 pb-6">
+            <Button
+              variant="outline"
+              onClick={() => router.back()}
+              className="hover:bg-primary/10 hover:text-primary dark:hover:bg-accent dark:hover:text-accent-foreground"
+            >
+              <ArrowLeft className="h-4 w-4 mr-2" />
+              Voltar
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

susconecta/app/audio-teste/page.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import AIVoiceFlow from "@/components/ZoeIA/ai-voice-flow";
+import { useTheme } from "next-themes";
+import React from "react";
+
+export default function VozPage() {
+  const { theme } = useTheme();
+  const isDark = theme === "dark";
+
+  // Classes condicionais para manter coerência com o chat
+  const bgClass = isDark
+    ? "bg-gray-900 text-white"
+    : "bg-gray-50 text-gray-900";
+
+  return (
+    <div className={`min-h-screen flex items-center justify-center p-10 transition-colors ${bgClass}`}>
+      <AIVoiceFlow />
+    </div>
+  );
+}
+

susconecta/app/globals.css

@@ -0,0 +1,185 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+/* Removed unsupported @custom-variant dark (&:is(.dark *)); */
+
+:root {
+  --background: #ffffff;
+  --foreground: #475569;
+  --card: #ffffff;
+  --card-foreground: #334155;
+  --popover: #ffffff;
+  --popover-foreground: #475569;
+  --primary: var(--color-blue-500);
+  --primary-foreground: #ffffff;
+  --secondary: #e2e8f0;
+  --secondary-foreground: #475569;
+  --muted: #f1f5f9;
+  --muted-foreground: #64748b;
+  --accent: #0891b2;
+  --accent-foreground: #ffffff;
+  --destructive: #dc2626;
+  --destructive-foreground: #ffffff;
+  --border: #e2e8f0;
+  --input: #f1f5f9;
+  --ring: var(--color-blue-500);
+  --chart-1: #0891b2;
+  --chart-2: #0f766e;
+  --chart-3: #f59e0b;
+  --chart-4: #dc2626;
+  --chart-5: #475569;
+  --radius: 0.5rem;
+  --sidebar: #ffffff;
+  --sidebar-foreground: #475569;
+  --sidebar-primary: var(--color-blue-500);
+  --sidebar-primary-foreground: #ffffff;
+  --sidebar-accent: var(--color-blue-500);
+  --sidebar-accent-foreground: #ffffff;
+  --sidebar-border: #e2e8f0;
+  --sidebar-ring: var(--color-blue-500);
+}
+
+.dark {
+  --background: #0f172a;
+  --foreground: #cbd5e1;
+  --card: #1e293b;
+  --card-foreground: #e2e8f0;
+  --popover: #1e293b;
+  --popover-foreground: #cbd5e1;
+  --primary: var(--color-blue-500);
+  --primary-foreground: #ffffff;
+  --secondary: #334155;
+  --secondary-foreground: #cbd5e1;
+  --muted: #334155;
+  --muted-foreground: #94a3b8;
+  --accent: #0891b2;
+  --accent-foreground: #ffffff;
+  --destructive: #dc2626;
+  --destructive-foreground: #ffffff;
+  --border: #334155;
+  --input: #334155;
+  --ring: var(--color-blue-500);
+  --chart-1: #0891b2;
+  --chart-2: #0f766e;
+  --chart-3: #f59e0b;
+  --chart-4: #dc2626;
+  --chart-5: #94a3b8;
+  --sidebar: #1e293b;
+  --sidebar-foreground: #cbd5e1;
+  --sidebar-primary: var(--color-blue-500);
+  --sidebar-primary-foreground: #ffffff;
+  --sidebar-accent: var(--color-blue-500);
+  --sidebar-accent-foreground: #ffffff;
+  --sidebar-border: #334155;
+  --sidebar-ring: var(--color-blue-500);
+}
+
+@theme inline {
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+  --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);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --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);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground font-sans;
+  }
+}
+
+/* Esconder botões com ícones de lixo */
+button:has(.lucide-trash2),
+button:has(.lucide-trash),
+button[class*="trash"] {
+  display: none !important;
+}
+
+/* Esconder campos de input embaixo do calendário 3D */
+input[placeholder="Nome do paciente"],
+input[placeholder^="dd/mm"],
+input[type="date"][value=""] {
+  display: none !important;
+}
+
+/* Esconder botão "Adicionar Paciente" */
+/* Removido seletor vazio - será tratado por outros seletores */
+
+/* Afastar X do popup (dialog-close) para longe das setas */
+[data-slot="dialog-close"],
+button[aria-label="Close"],
+.fc button[aria-label*="Close"] {
+  right: 16px !important;
+  top: 8px !important;
+  position: absolute !important;
+}
+
+/* Esconder footer/header extras do calendário que mostram os campos */
+.fc .fc-toolbar input,
+.fc .fc-toolbar [type="date"],
+.fc .fc-toolbar [placeholder*="paciente"] {
+  display: none !important;
+}
+
+/* Esconder row com campos de pesquisa - estrutura mantida pelo calendário */
+
+/* Esconder botões de trash/delete em todos os popups */
+[role="dialog"] button[class*="hover:text-destructive"],
+[role="dialog"] button[aria-label*="delete"],
+[role="dialog"] button[aria-label*="excluir"],
+[role="dialog"] button[aria-label*="remove"] {
+  display: none !important;
+}
+
+/* Classe padronizada de hover azul - consistente em todos os modos (claro/escuro SO e app) */
+.hover-primary-blue {
+  @apply hover:bg-blue-500 hover:text-white hover:border-blue-500 transition-all duration-200;
+}
+
+/* Hover simples para ícones e botões menores */
+.hover-primary-blue-soft {
+  @apply hover:bg-blue-500/10 hover:text-blue-500 transition-colors duration-200;
+}
+
+/* Hover padronizado para selects de filtro - apenas ao passar o mouse */
+.select-hover-blue {
+  background-color: transparent;
+  @apply hover:bg-blue-500 hover:text-white hover:border-blue-500 transition-colors duration-200;
+}
+

susconecta/app/laudos-editor/page.tsx

@@ -0,0 +1,993 @@
+'use client';
+
+import React, { useState, useRef, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import ProtectedRoute from '@/components/shared/ProtectedRoute';
+import { useAuth } from '@/hooks/useAuth';
+import { useToast } from '@/hooks/use-toast';
+import { listarPacientes, buscarMedicos, getUserInfo } from '@/lib/api';
+import { useReports } from '@/hooks/useReports';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import { Select, SelectTrigger, SelectContent, SelectItem, SelectValue } from '@/components/ui/select';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
+import { FileText, Upload, Settings, Eye, ArrowLeft, BookOpen } from 'lucide-react';
+
+// Helpers para normalizar dados
+const getPatientName = (p: any) => p?.full_name ?? p?.nome ?? '';
+const getPatientCpf = (p: any) => p?.cpf ?? '';
+const getPatientSex = (p: any) => p?.sex ?? p?.sexo ?? '';
+const getPatientAge = (p: any) => {
+  if (!p) return '';
+  const bd = p?.birth_date ?? p?.data_nascimento ?? p?.birthDate;
+  if (bd) {
+    const d = new Date(bd);
+    if (!isNaN(d.getTime())) {
+      const age = Math.floor((Date.now() - d.getTime()) / (1000 * 60 * 60 * 24 * 365.25));
+      return `${age}`;
+    }
+  }
+  return p?.idade ?? p?.age ?? '';
+};
+
+export default function LaudosEditorPage() {
+  const router = useRouter();
+  const { user, token } = useAuth();
+  const { toast } = useToast();
+  const { createNewReport } = useReports();
+
+  // Estados principais
+  const [pacienteSelecionado, setPacienteSelecionado] = useState<any>(null);
+  const [listaPacientes, setListaPacientes] = useState<any[]>([]);
+  const [content, setContent] = useState('');
+  const [activeTab, setActiveTab] = useState('editor');
+  const [showPreview, setShowPreview] = useState(false);
+
+  // Estados para solicitante e prazo
+  const [solicitanteId, setSolicitanteId] = useState<string>(user?.id || '');
+  // Nome exibido do solicitante (preferir nome do médico vindo da API)
+  const [solicitanteNome, setSolicitanteNome] = useState<string>(user?.name || '');
+  const [prazoDate, setPrazoDate] = useState<string>('');
+  const [prazoTime, setPrazoTime] = useState<string>('');
+
+  // Campos do laudo
+  const [campos, setCampos] = useState({
+    cid: '',
+    diagnostico: '',
+    conclusao: '',
+    exame: '',
+    especialidade: '',
+    mostrarData: true,
+    mostrarAssinatura: true,
+  });
+
+  // Imagens
+  const [imagens, setImagens] = useState<any[]>([]);
+  const [templates] = useState([
+    'Exame normal, sem alterações significativas',
+    'Paciente em acompanhamento ambulatorial',
+    'Recomenda-se retorno em 30 dias',
+    'Alterações compatíveis com processo inflamatório',
+    'Resultado dentro dos parâmetros de normalidade',
+    'Recomendo seguimento com especialista',
+  ]);
+
+  // Frases prontas
+  const [frasesProntas] = useState([
+    'Paciente apresenta bom estado geral.',
+    'Recomenda-se seguimento clínico periódico.',
+    'Encaminhar para especialista.',
+    'Realizar novos exames em 30 dias.',
+    'Retorno em 15 dias para reavaliação.',
+    'Suspender medicamento em caso de efeitos colaterais.',
+    'Manter repouso relativo por 7 dias.',
+    'Seguir orientações prescritas rigorosamente.',
+    'Compatível com os achados clínicos.',
+    'Sem alterações significativas detectadas.',
+  ]);
+
+  // Histórico
+  const [history, setHistory] = useState<string[]>([]);
+  const [historyIndex, setHistoryIndex] = useState(-1);
+
+  // Editor ref
+  const editorRef = useRef<HTMLDivElement>(null);
+
+  // Estado para rastrear formatações ativas
+  const [activeFormats, setActiveFormats] = useState({
+    bold: false,
+    italic: false,
+    underline: false,
+    strikethrough: false,
+  });
+
+  // Estado para controlar modal de confirmação de rascunho
+  const [showDraftConfirm, setShowDraftConfirm] = useState(false);
+
+  // Atualizar formatações ativas ao mudar seleção
+  useEffect(() => {
+    const updateFormats = () => {
+      setActiveFormats({
+        bold: document.queryCommandState('bold'),
+        italic: document.queryCommandState('italic'),
+        underline: document.queryCommandState('underline'),
+        strikethrough: document.queryCommandState('strikeThrough'),
+      });
+    };
+
+    editorRef.current?.addEventListener('mouseup', updateFormats);
+    editorRef.current?.addEventListener('keyup', updateFormats);
+
+    return () => {
+      editorRef.current?.removeEventListener('mouseup', updateFormats);
+      editorRef.current?.removeEventListener('keyup', updateFormats);
+    };
+  }, []);
+
+  // Carregar pacientes ao montar
+  useEffect(() => {
+    async function fetchPacientes() {
+      try {
+        if (!token) {
+          setListaPacientes([]);
+          return;
+        }
+        const pacientes = await listarPacientes();
+        setListaPacientes(pacientes || []);
+      } catch (err) {
+        console.warn('Erro ao carregar pacientes:', err);
+        setListaPacientes([]);
+      }
+    }
+    fetchPacientes();
+
+    // Carregar rascunho salvo ao montar
+    const savedDraft = localStorage.getItem('laudoDraft');
+    if (savedDraft) {
+      try {
+        const draft = JSON.parse(savedDraft);
+        // Carregar paciente do rascunho se existir
+        if (draft.pacienteSelecionado) {
+          setPacienteSelecionado(draft.pacienteSelecionado);
+        }
+        setContent(draft.content);
+        setCampos(draft.campos);
+        setSolicitanteId(draft.solicitanteId);
+        setPrazoDate(draft.prazoDate);
+        setPrazoTime(draft.prazoTime);
+        setImagens(draft.imagens || []);
+        
+        // Sincronizar editor com conteúdo carregado
+        if (editorRef.current) {
+          editorRef.current.innerHTML = draft.content;
+        }
+      } catch (err) {
+        console.warn('Erro ao carregar rascunho:', err);
+      }
+    }
+  }, [token]);
+
+  // Import Quill CSS on client side only
+  useEffect(() => {
+    // No CSS needed for native contenteditable
+  }, []);
+
+  // Sincronizar conteúdo inicial com editor ao montar
+  useEffect(() => {
+    if (editorRef.current && !editorRef.current.innerHTML) {
+      editorRef.current.innerHTML = content;
+    }
+  }, []);
+
+  // Auto-salvar no localStorage sempre que houver mudanças (com debounce)
+  useEffect(() => {
+    const timeoutId = setTimeout(() => {
+      // Capturar conteúdo atual do editor antes de salvar
+      const currentContent = editorRef.current?.innerHTML || content;
+      
+      const draft = {
+        pacienteSelecionado,
+        content: currentContent,
+        campos,
+        solicitanteId,
+        solicitanteNome,
+        prazoDate,
+        prazoTime,
+        imagens,
+        lastSaved: new Date().toISOString(),
+      };
+      
+      // Só salvar se houver conteúdo ou dados preenchidos
+      if (currentContent || pacienteSelecionado || campos.exame || campos.diagnostico || imagens.length > 0) {
+        localStorage.setItem('laudoDraft', JSON.stringify(draft));
+      }
+    }, 1000); // Aguarda 1 segundo após última mudança
+
+    return () => clearTimeout(timeoutId);
+  }, [pacienteSelecionado, content, campos, solicitanteId, solicitanteNome, prazoDate, prazoTime, imagens]);
+
+  // Tentar obter o registro de médico correspondente ao usuário autenticado
+  useEffect(() => {
+    let mounted = true;
+    async function fetchDoctorName() {
+      try {
+        // Se já temos um nome razoável, não sobrescrever
+        if (solicitanteNome && solicitanteNome.trim().length > 1) return;
+        if (!user) return;
+
+        // First try: query doctors index with any available identifier (email, id or username)
+        try {
+          const term = (user.email && user.email.trim()) || user.name || user.id || '';
+          if (term && term.length > 1) {
+            const docs = await buscarMedicos(term).catch(() => []);
+            if (!mounted) return;
+            if (Array.isArray(docs) && docs.length > 0) {
+              const d = docs[0];
+              if (d && (d.full_name || (d as any).nome)) {
+                setSolicitanteNome((d.full_name as string) || ((d as any).nome as string) || user.name || user.email || '');
+                setSolicitanteId(user.id || solicitanteId);
+                return;
+              }
+            }
+          }
+        } catch (err) {
+          // non-fatal, continue to next fallback
+        }
+
+        // Second try: fetch consolidated user-info (may contain profile.full_name)
+        try {
+          const info = await getUserInfo().catch(() => null);
+          if (!mounted) return;
+          if (info && (info.profile as any)?.full_name) {
+            const full = (info.profile as any).full_name as string;
+            if (full && full.trim().length > 1) {
+              setSolicitanteNome(full);
+              setSolicitanteId(user.id || solicitanteId);
+              return;
+            }
+          }
+        } catch (err) {
+          // ignore and fallback
+        }
+
+        // Final fallback: use name from auth user or email/username
+        setSolicitanteNome(user.name || user.email || '');
+        setSolicitanteId(user.id || solicitanteId);
+      } catch (err) {
+        // em caso de erro, manter o fallback
+        setSolicitanteNome(user?.name || user?.email || '');
+        setSolicitanteId(user?.id || solicitanteId);
+      }
+    }
+
+    fetchDoctorName();
+    return () => {
+      mounted = false;
+    };
+  }, [user]);
+
+  // Atualizar histórico
+  useEffect(() => {
+    if (history[historyIndex] !== content) {
+      const newHistory = history.slice(0, historyIndex + 1);
+      setHistory([...newHistory, content]);
+      setHistoryIndex(newHistory.length);
+    }
+  }, [content]);
+
+  // Função para trocar de aba salvando conteúdo antes
+  const handleTabChange = (newTab: string) => {
+    // Salvar conteúdo do editor antes de trocar
+    if (editorRef.current) {
+      const editorContent = editorRef.current.innerHTML;
+      setContent(editorContent);
+    }
+    setActiveTab(newTab);
+  };
+
+  // Restaurar conteúdo do editor quando voltar para a aba editor
+  useEffect(() => {
+    if (activeTab === 'editor' && editorRef.current && content) {
+      editorRef.current.innerHTML = content;
+    }
+  }, [activeTab]);
+
+  // Desfazer
+  const handleUndo = () => {
+    if (historyIndex > 0) {
+      const newIndex = historyIndex - 1;
+      setContent(history[newIndex]);
+      setHistoryIndex(newIndex);
+      
+      // Atualizar editor com conteúdo anterior
+      setTimeout(() => {
+        if (editorRef.current) {
+          editorRef.current.innerHTML = history[newIndex];
+          editorRef.current.focus();
+        }
+      }, 0);
+    }
+  };
+
+  // Formatação com contenteditable (document.execCommand)
+  const applyFormat = (command: string, value?: string) => {
+    document.execCommand(command, false, value || undefined);
+    editorRef.current?.focus();
+  };
+
+  const makeBold = () => applyFormat('bold');
+  const makeItalic = () => applyFormat('italic');
+  const makeUnderline = () => applyFormat('underline');
+  const makeStrikethrough = () => applyFormat('strikeThrough');
+  
+  const insertUnorderedList = () => {
+    document.execCommand('insertUnorderedList', false);
+    editorRef.current?.focus();
+  };
+  
+  const insertOrderedList = () => {
+    document.execCommand('insertOrderedList', false);
+    editorRef.current?.focus();
+  };
+  
+  const alignLeft = () => applyFormat('justifyLeft');
+  const alignCenter = () => applyFormat('justifyCenter');
+  const alignRight = () => applyFormat('justifyRight');
+  const alignJustify = () => applyFormat('justifyFull');
+
+  const insertTemplate = (template: string) => {
+    setContent((prev: string) => (prev ? `${prev}\n\n${template}` : template));
+  };
+
+  const insertFraseProta = (frase: string) => {
+    editorRef.current?.focus();
+    document.execCommand('insertText', false, frase + ' ');
+    setContent(editorRef.current?.innerHTML || '');
+  };
+
+  const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = Array.from(e.target.files || []);
+    files.forEach((file) => {
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        setImagens((prev) => [
+          ...prev,
+          {
+            id: Date.now() + Math.random(),
+            name: file.name,
+            url: e.target?.result,
+            type: file.type,
+          },
+        ]);
+      };
+      reader.readAsDataURL(file);
+    });
+  };
+
+  // Salvar rascunho no localStorage
+  const saveDraft = () => {
+    // Capturar conteúdo atual do editor antes de salvar
+    const currentContent = editorRef.current?.innerHTML || content;
+    
+    const draft = {
+      pacienteSelecionado,
+      content: currentContent,
+      campos,
+      solicitanteId,
+      solicitanteNome,
+      prazoDate,
+      prazoTime,
+      imagens,
+    };
+    localStorage.setItem('laudoDraft', JSON.stringify(draft));
+    toast({
+      title: 'Rascunho salvo!',
+      description: 'As informações do laudo foram salvas. Você pode continuar depois.',
+      variant: 'default',
+    });
+    
+    // Redirecionar para profissional após 1 segundo
+    setTimeout(() => {
+      router.push('/profissional');
+    }, 1000);
+  };
+
+  // Descartar rascunho
+  const discardDraft = () => {
+    localStorage.removeItem('laudoDraft');
+    router.push('/profissional');
+  };
+
+  // Processar cancelamento com confirmação
+  const handleCancel = () => {
+    // Verificar se há dados para salvar
+    const hasData = content || campos.cid || campos.diagnostico || campos.conclusao || campos.exame || imagens.length > 0;
+    
+    if (hasData) {
+      setShowDraftConfirm(true);
+    } else {
+      router.push('/profissional');
+    }
+  };
+
+  const processContent = (content: string) => {
+    return content
+      .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
+      .replace(/\*(.*?)\*/g, '<em>$1</em>')
+      .replace(/__(.*?)__/g, '<u>$1</u>')
+      .replace(/\[left\]([\s\S]*?)\[\/left\]/g, '<div style="text-align:left">$1</div>')
+      .replace(/\[center\]([\s\S]*?)\[\/center\]/g, '<div style="text-align:center">$1</div>')
+      .replace(/\[right\]([\s\S]*?)\[\/right\]/g, '<div style="text-align:right">$1</div>')
+      .replace(/\[justify\]([\s\S]*?)\[\/justify\]/g, '<div style="text-align:justify">$1</div>')
+      .replace(/\[size=(\d+)\]([\s\S]*?)\[\/size\]/g, '<span style="font-size:$1px">$2</span>')
+      .replace(/\[font=([^\]]+)\]([\s\S]*?)\[\/font\]/g, '<span style="font-family:$1">$2</span>')
+      .replace(/\[color=([^\]]+)\]([\s\S]*?)\[\/color\]/g, '<span style="color:$1">$2</span>')
+      .replace(/{{diagnostico}}/g, campos.diagnostico || '[DIAGNÓSTICO]')
+      .replace(/{{conclusao}}/g, campos.conclusao || '[CONCLUSÃO]')
+      .replace(/\n/g, '<br>');
+  };
+
+  const handleSave = async () => {
+    try {
+      if (!pacienteSelecionado?.id) {
+        toast({
+          title: 'Erro',
+          description: 'Selecione um paciente para continuar.',
+          variant: 'destructive',
+        });
+        return;
+      }
+
+      // Capturar conteúdo atual do editor antes de salvar
+      const currentContent = editorRef.current?.innerHTML || content;
+
+      const userId = user?.id || '00000000-0000-0000-0000-000000000001';
+
+      let composedDueAt = undefined;
+      if (prazoDate) {
+        const t = prazoTime || '23:59';
+        composedDueAt = new Date(`${prazoDate}T${t}:00`).toISOString();
+      }
+
+      const payload = {
+        patient_id: pacienteSelecionado?.id,
+        order_number: '',
+        exam: campos.exame || '',
+        diagnosis: campos.diagnostico || '',
+        conclusion: campos.conclusao || '',
+        cid_code: campos.cid || '',
+        content_html: currentContent,
+        content_json: {},
+        requested_by: solicitanteId || userId,
+        due_at: composedDueAt ?? new Date().toISOString(),
+        hide_date: !campos.mostrarData,
+        hide_signature: !campos.mostrarAssinatura,
+      };
+
+      if (createNewReport) {
+        await createNewReport(payload as any);
+        
+        // Limpar rascunho salvo após sucesso
+        localStorage.removeItem('laudoDraft');
+        
+        toast({
+          title: 'Laudo criado com sucesso!',
+          description: 'O laudo foi liberado e salvo.',
+          variant: 'default',
+        });
+        // Redirecionar para profissional
+        router.push('/profissional');
+      }
+    } catch (err) {
+      toast({
+        title: 'Erro ao criar laudo',
+        description: (err && typeof err === 'object' && 'message' in err) ? (err as any).message : String(err) || 'Tente novamente.',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  return (
+    <ProtectedRoute>
+      <div className="min-h-screen bg-background flex flex-col">
+        {/* Header */}
+        <div className="border-b border-border bg-card shadow-sm sticky top-0 z-10">
+          <div className="px-2 sm:px-4 md:px-6 py-3 sm:py-4 flex items-center justify-between gap-2 sm:gap-4">
+            <div className="flex items-center gap-2 sm:gap-4 flex-1 min-w-0">
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => setShowDraftConfirm(true)}
+                className="p-0 h-auto flex-shrink-0"
+              >
+                <ArrowLeft className="w-4 sm:w-5 h-4 sm:h-5" />
+              </Button>
+              <div className="min-w-0">
+                <h1 className="text-lg sm:text-2xl font-bold truncate">Novo Laudo Médico</h1>
+                <p className="text-xs sm:text-sm text-muted-foreground truncate">Crie um novo laudo selecionando um paciente</p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Main Content */}
+        <div className="flex-1 overflow-hidden flex flex-col">
+          {/* Seleção de Paciente */}
+          <div className="border-b border-border bg-card px-2 sm:px-4 md:px-6 py-3 sm:py-4 flex-shrink-0 overflow-y-auto md:max-h-56">
+            {!pacienteSelecionado ? (
+              <div className="bg-muted border border-border rounded-lg p-2 sm:p-4">
+                <Label htmlFor="select-paciente" className="text-xs sm:text-sm font-medium mb-2 block">
+                  Selecionar Paciente *
+                </Label>
+                <Select
+                  onValueChange={(value) => {
+                    const paciente = listaPacientes.find((p) => p.id === value);
+                    if (paciente) setPacienteSelecionado(paciente);
+                  }}
+                >
+                  <SelectTrigger className="w-full text-xs sm:text-sm">
+                    <SelectValue placeholder="Escolha um paciente para criar o laudo" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {listaPacientes.map((paciente) => (
+                      <SelectItem key={paciente.id} value={paciente.id}>
+                        <span className="text-xs sm:text-sm">
+                          {paciente.full_name} {paciente.cpf ? `- CPF: ${paciente.cpf}` : ''}
+                        </span>
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+            ) : (
+              <div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4">
+                <div className="flex-1 min-w-0">
+                  <div className="font-semibold text-primary text-sm sm:text-lg truncate">{getPatientName(pacienteSelecionado)}</div>
+                  <div className="text-xs sm:text-sm text-muted-foreground line-clamp-2">
+                    {getPatientCpf(pacienteSelecionado) ? `CPF: ${getPatientCpf(pacienteSelecionado)} | ` : ''}
+                    {pacienteSelecionado?.birth_date ? `Nascimento: ${pacienteSelecionado.birth_date.split('T')[0].split('-').reverse().join('/')}` : getPatientAge(pacienteSelecionado) ? `Idade: ${getPatientAge(pacienteSelecionado)} anos` : ''}
+                    {getPatientSex(pacienteSelecionado) ? ` | Sexo: ${getPatientSex(pacienteSelecionado)}` : ''}
+                  </div>
+                </div>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => setPacienteSelecionado(null)}
+                  className="text-xs sm:text-sm flex-shrink-0"
+                >
+                  Trocar
+                </Button>
+              </div>
+            )}
+
+            {/* Prazo */}
+            {pacienteSelecionado && (
+              <div className="mt-3 sm:mt-4">
+                <div>
+                  <Label htmlFor="prazoDate" className="text-xs sm:text-sm">
+                    Prazo do Laudo
+                  </Label>
+                  <div className="flex gap-1 sm:gap-2 mt-1">
+                    <Input
+                      id="prazoDate"
+                      type="date"
+                      value={prazoDate}
+                      onChange={(e) => setPrazoDate(e.target.value)}
+                      className="text-xs sm:text-sm h-8 sm:h-10 flex-1"
+                    />
+                    <Input
+                      id="prazoTime"
+                      type="time"
+                      value={prazoTime}
+                      onChange={(e) => setPrazoTime(e.target.value)}
+                      className="text-xs sm:text-sm h-8 sm:h-10 flex-1"
+                    />
+                  </div>
+                  <p className="text-xs text-muted-foreground mt-1">Defina a data e hora (opcional).</p>
+                </div>
+              </div>
+            )}
+          </div>
+
+          {/* Tabs */}
+          <div className="flex border-b border-border bg-card overflow-x-auto flex-shrink-0">
+            <button
+              onClick={() => handleTabChange('editor')}
+              className={`px-2 sm:px-4 py-2 text-xs sm:text-sm font-medium border-b-2 transition-colors whitespace-nowrap ${
+                activeTab === 'editor'
+                  ? 'border-blue-500 text-blue-600'
+                  : 'border-transparent text-gray-600 dark:text-muted-foreground'
+              }`}
+            >
+              <FileText className="w-3 sm:w-4 h-3 sm:h-4 inline mr-1" />
+              Editor
+            </button>
+            <button
+              onClick={() => handleTabChange('campos')}
+              className={`px-2 sm:px-4 py-2 text-xs sm:text-sm font-medium border-b-2 transition-colors whitespace-nowrap ${
+                activeTab === 'campos'
+                  ? 'border-blue-500 text-blue-600'
+                  : 'border-transparent text-gray-600 dark:text-muted-foreground'
+              }`}
+            >
+              <Settings className="w-3 sm:w-4 h-3 sm:h-4 inline mr-1" />
+              Campos
+            </button>
+            <button
+              onClick={() => setShowPreview(!showPreview)}
+              className={`px-2 sm:px-4 py-2 text-xs sm:text-sm font-medium border-b-2 transition-colors whitespace-nowrap ${
+                showPreview ? 'border-green-500 text-green-600' : 'border-transparent text-gray-600 dark:text-muted-foreground'
+              }`}
+            >
+              <Eye className="w-3 sm:w-4 h-3 sm:h-4 inline mr-1" />
+              <span>{showPreview ? 'Ocultar' : 'Pré-visualização'}</span>
+            </button>
+          </div>
+
+          {/* Content */}
+          <div className="flex-1 overflow-hidden flex flex-col md:flex-row bg-background">
+            {/* Left Panel */}
+              <div className={`flex flex-col overflow-hidden transition-all ${showPreview ? 'w-full md:w-3/5 h-auto md:h-full' : 'w-full'}`}>
+              {/* Editor Tab */}
+              {activeTab === 'editor' && (
+                <div className="flex-1 flex flex-col overflow-hidden">
+                  {/* Toolbar */}
+                  <div className="p-2 border-b border-border bg-card flex-shrink-0 overflow-x-auto">
+                    <div className="flex flex-wrap gap-2 items-center">
+                      {/* Font Family */}
+                      <label className="text-xs font-medium text-foreground whitespace-nowrap">Fonte:</label>
+                      <select
+                        defaultValue="Arial"
+                        onChange={(e) => applyFormat('fontName', e.target.value)}
+                        className="border border-border rounded px-2 py-1 text-xs bg-background text-foreground"
+                      >
+                        <option value="Arial">Arial</option>
+                        <option value="Helvetica">Helvetica</option>
+                        <option value="Times New Roman">Times New Roman</option>
+                        <option value="Courier New">Courier New</option>
+                        <option value="Verdana">Verdana</option>
+                        <option value="Georgia">Georgia</option>
+                      </select>
+
+                      {/* Font Size */}
+                      <label className="text-xs font-medium text-foreground whitespace-nowrap">Tamanho:</label>
+                      <select
+                        defaultValue="3"
+                        onChange={(e) => applyFormat('fontSize', e.target.value)}
+                        className="border border-border rounded px-2 py-1 text-xs bg-background text-foreground"
+                      >
+                        <option value="1">8px</option>
+                        <option value="2">10px</option>
+                        <option value="3">12px</option>
+                        <option value="4">14px</option>
+                        <option value="5">18px</option>
+                        <option value="6">24px</option>
+                        <option value="7">32px</option>
+                      </select>
+
+                      <div className="w-px h-6 bg-border mx-1" />
+
+                      <Button 
+                        variant={activeFormats.bold ? "default" : "outline"} 
+                        size="sm" 
+                        onMouseDown={(e) => { e.preventDefault(); makeBold(); }} 
+                        title="Negrito (Ctrl+B)" 
+                        className="text-xs h-8 px-2 hover:bg-blue-50 dark:hover:bg-blue-950"
+                      >
+                        <strong>B</strong>
+                      </Button>
+                      <Button 
+                        variant={activeFormats.italic ? "default" : "outline"} 
+                        size="sm" 
+                        onMouseDown={(e) => { e.preventDefault(); makeItalic(); }} 
+                        title="Itálico (Ctrl+I)" 
+                        className="text-xs h-8 px-2 hover:bg-blue-50 dark:hover:bg-blue-950"
+                      >
+                        <em>I</em>
+                      </Button>
+                      <Button 
+                        variant={activeFormats.underline ? "default" : "outline"} 
+                        size="sm" 
+                        onMouseDown={(e) => { e.preventDefault(); makeUnderline(); }} 
+                        title="Sublinhado (Ctrl+U)" 
+                        className="text-xs h-8 px-2 hover:bg-blue-50 dark:hover:bg-blue-950"
+                      >
+                        <u>U</u>
+                      </Button>
+                      <Button 
+                        variant={activeFormats.strikethrough ? "default" : "outline"} 
+                        size="sm" 
+                        onMouseDown={(e) => { e.preventDefault(); makeStrikethrough(); }} 
+                        title="Tachado" 
+                        className="text-xs h-8 px-2 hover:bg-blue-50 dark:hover:bg-blue-950"
+                      >
+                        <del>S</del>
+                      </Button>
+                      <div className="w-px h-6 bg-border mx-1" />
+                      <Button variant="outline" size="sm" onMouseDown={(e) => { e.preventDefault(); insertUnorderedList(); }} title="Lista com marcadores" className="text-xs h-8 px-2 hover:bg-blue-50 dark:hover:bg-blue-950">
+                        •
+                      </Button>
+                      <Button variant="outline" size="sm" onMouseDown={(e) => { e.preventDefault(); insertOrderedList(); }} title="Lista numerada" className="text-xs h-8 px-2 hover:bg-blue-50 dark:hover:bg-blue-950">
+                        1.
+                      </Button>
+                      <div className="w-px h-6 bg-border mx-1" />
+                      <Button variant="outline" size="sm" onMouseDown={(e) => { e.preventDefault(); alignLeft(); }} title="Alinhar à esquerda" className="text-xs h-8 px-2 hover:bg-blue-50 dark:hover:bg-blue-950">
+                        ◄
+                      </Button>
+                      <Button variant="outline" size="sm" onMouseDown={(e) => { e.preventDefault(); alignCenter(); }} title="Centralizar" className="text-xs h-8 px-2 hover:bg-blue-50 dark:hover:bg-blue-950">
+                        ·
+                      </Button>
+                      <Button variant="outline" size="sm" onMouseDown={(e) => { e.preventDefault(); alignRight(); }} title="Alinhar à direita" className="text-xs h-8 px-2 hover:bg-blue-50 dark:hover:bg-blue-950">
+                        ►
+                      </Button>
+                      <Button variant="outline" size="sm" onMouseDown={(e) => { e.preventDefault(); alignJustify(); }} title="Justificar" className="text-xs h-8 px-2 hover:bg-blue-50 dark:hover:bg-blue-950">
+                        ≡
+                      </Button>
+                      <div className="w-px h-6 bg-border mx-1" />
+                      <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                          <Button variant="outline" size="sm" title="Frases prontas" className="text-xs h-8 px-2 hover:bg-blue-50 dark:hover:bg-blue-950">
+                            <BookOpen className="w-4 h-4" />
+                          </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="start" className="w-64">
+                          {frasesProntas.map((frase, index) => (
+                            <DropdownMenuItem
+                              key={index}
+                              onSelect={() => insertFraseProta(frase)}
+                              className="text-xs cursor-pointer"
+                            >
+                              {frase}
+                            </DropdownMenuItem>
+                          ))}
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    </div>
+                  </div>
+
+                  {/* Editor contenteditable */}
+                  <div className="flex-1 overflow-hidden p-2 sm:p-3 md:p-4">
+                    <div
+                      ref={editorRef}
+                      contentEditable
+                      onInput={(e) => setContent(e.currentTarget.innerHTML)}
+                      onPaste={(e) => {
+                        e.preventDefault();
+                        const text = e.clipboardData.getData('text/plain');
+                        document.execCommand('insertText', false, text);
+                      }}
+                      className="w-full h-full overflow-auto p-3 text-sm border border-border rounded bg-background text-foreground outline-none empty:before:content-['Digite_aqui...'] empty:before:text-muted-foreground"
+                      style={{ caretColor: 'currentColor' }}
+                      suppressContentEditableWarning
+                    />
+                  </div>
+                </div>
+              )}
+
+              {/* Campos Tab */}
+              {activeTab === 'campos' && (
+                <div className="flex-1 p-2 sm:p-3 md:p-4 space-y-2 sm:space-y-3 md:space-y-4 overflow-y-auto">
+                  <div>
+                    <Label htmlFor="cid" className="text-xs sm:text-sm">
+                      CID
+                    </Label>
+                    <Input
+                      id="cid"
+                      value={campos.cid}
+                      onChange={(e) => setCampos((prev) => ({ ...prev, cid: e.target.value }))}
+                      placeholder="Ex: M25.5, I10, etc."
+                      className="text-xs sm:text-sm mt-1 h-8 sm:h-10"
+                    />
+                  </div>
+                  <div>
+                    <Label htmlFor="exame" className="text-xs sm:text-sm">
+                      Exame
+                    </Label>
+                    <Input
+                      id="exame"
+                      value={campos.exame}
+                      onChange={(e) => setCampos((prev) => ({ ...prev, exame: e.target.value }))}
+                      placeholder="Exame realizado"
+                      className="text-xs sm:text-sm mt-1 h-8 sm:h-10"
+                    />
+                  </div>
+                  <div>
+                    <Label htmlFor="diagnostico" className="text-xs sm:text-sm">
+                      Diagnóstico
+                    </Label>
+                    <Textarea
+                      id="diagnostico"
+                      value={campos.diagnostico}
+                      onChange={(e) => setCampos((prev) => ({ ...prev, diagnostico: e.target.value }))}
+                      placeholder="Diagnóstico principal"
+                      rows={2}
+                      className="text-xs sm:text-sm mt-1"
+                    />
+                  </div>
+                  <div>
+                    <Label htmlFor="conclusao" className="text-xs sm:text-sm">
+                      Conclusão
+                    </Label>
+                    <Textarea
+                      id="conclusao"
+                      value={campos.conclusao}
+                      onChange={(e) => setCampos((prev) => ({ ...prev, conclusao: e.target.value }))}
+                      placeholder="Conclusão do laudo"
+                      rows={2}
+                      className="text-xs sm:text-sm mt-1"
+                    />
+                  </div>
+                  <div className="space-y-1 sm:space-y-2">
+                    <div className="flex items-center gap-2">
+                      <input
+                        type="checkbox"
+                        id="mostrar-data"
+                        checked={campos.mostrarData}
+                        onChange={(e) => setCampos((prev) => ({ ...prev, mostrarData: e.target.checked }))}
+                        className="w-4 h-4"
+                      />
+                      <Label htmlFor="mostrar-data" className="text-xs sm:text-sm">
+                        Mostrar data no laudo
+                      </Label>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <input
+                        type="checkbox"
+                        id="mostrar-assinatura"
+                        checked={campos.mostrarAssinatura}
+                        onChange={(e) => setCampos((prev) => ({ ...prev, mostrarAssinatura: e.target.checked }))}
+                        className="w-4 h-4"
+                      />
+                      <Label htmlFor="mostrar-assinatura" className="text-xs sm:text-sm">
+                        Mostrar assinatura no laudo
+                      </Label>
+                    </div>
+                  </div>
+                </div>
+              )}
+            </div>
+
+            {/* Preview Panel */}
+            {showPreview && (
+              <div className="w-full md:w-2/5 h-auto md:h-full border-t md:border-l md:border-t-0 border-border bg-muted/20 flex flex-col overflow-hidden">
+                <div className="p-2 sm:p-2.5 md:p-3 border-b border-border flex-shrink-0 bg-card">
+                  <h3 className="font-semibold text-xs sm:text-sm text-foreground truncate">Pré-visualização</h3>
+                </div>
+                <div className="flex-1 overflow-y-auto p-2 sm:p-2.5 md:p-3">
+                  <div className="bg-background border border-border rounded p-2 sm:p-2.5 md:p-3 text-xs space-y-1.5 sm:space-y-2 max-w-full">
+                    {/* Header */}
+                    <div className="text-center mb-2 pb-2 border-b border-border/40">
+                      <h2 className="text-xs sm:text-sm font-bold leading-tight whitespace-normal">
+                        LAUDO {campos.especialidade ? `- ${campos.especialidade.toUpperCase().substring(0, 12)}` : ''}
+                      </h2>
+                      {campos.exame && <p className="text-xs font-semibold mt-1 whitespace-pre-wrap break-words">{campos.exame}</p>}
+                      {campos.mostrarData && (
+                        <p className="text-xs text-muted-foreground mt-1">{new Date().toLocaleDateString('pt-BR')}</p>
+                      )}
+                    </div>
+
+                    {/* Paciente */}
+                    {pacienteSelecionado && (
+                      <div className="mb-1.5 pb-1.5 border-b border-border/40 space-y-0.5">
+                        <div className="text-xs whitespace-normal break-words">
+                          <span className="font-semibold">Paciente:</span>
+                          <div className="mt-0.5">{getPatientName(pacienteSelecionado)}</div>
+                        </div>
+                        <div className="text-xs whitespace-normal break-words">
+                          <span className="font-semibold">CPF:</span>
+                          <div className="mt-0.5">{getPatientCpf(pacienteSelecionado)}</div>
+                        </div>
+                      </div>
+                    )}
+
+                    {/* Informações Clínicas */}
+                    <div className="mb-1.5 pb-1.5 border-b border-border/40 space-y-0.5">
+                      {campos.cid && (
+                        <div className="text-xs whitespace-normal break-words">
+                          <div className="font-semibold">CID:</div>
+                          <div className="mt-0.5 text-blue-600 dark:text-blue-400 font-semibold">{campos.cid}</div>
+                        </div>
+                      )}
+                    </div>
+
+                    {/* Diagnóstico - Completo */}
+                    {campos.diagnostico && (
+                      <div className="mb-1.5 pb-1.5 border-b border-border/40">
+                        <div className="text-xs font-semibold mb-0.5">Diagnóstico:</div>
+                        <div className="text-xs leading-tight whitespace-pre-wrap text-muted-foreground break-words">
+                          {campos.diagnostico}
+                        </div>
+                      </div>
+                    )}
+
+                    {/* Conteúdo */}
+                    {content && (
+                      <div className="mb-1.5 pb-1.5 border-b border-border/40">
+                        <div className="text-xs font-semibold mb-0.5">Conteúdo:</div>
+                        <div
+                          className="text-xs leading-tight whitespace-pre-wrap text-muted-foreground break-words overflow-hidden"
+                          dangerouslySetInnerHTML={{
+                            __html: processContent(content),
+                          }}
+                        />
+                      </div>
+                    )}
+
+                    {/* Conclusão - Completa */}
+                    {campos.conclusao && (
+                      <div className="mb-1.5 pb-1.5 border-b border-border/40">
+                        <div className="text-xs font-semibold mb-0.5">Conclusão:</div>
+                        <div className="text-xs leading-tight whitespace-pre-wrap text-muted-foreground break-words">
+                          {campos.conclusao}
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Footer */}
+        <div className="p-2 sm:p-3 md:p-4 border-t border-border bg-card flex-shrink-0">
+          <div className="flex flex-col sm:flex-row items-stretch sm:items-center justify-between gap-2 sm:gap-4">
+            <div className="text-xs text-muted-foreground hidden md:block">
+              Editor de relatórios com formatação de texto rica.
+            </div>
+            <div className="flex gap-2 w-full sm:w-auto">
+              <Button variant="outline" onClick={handleCancel} className="flex-1 sm:flex-none text-xs sm:text-sm h-8 sm:h-10 hover:bg-blue-50 dark:hover:bg-blue-950">
+                Cancelar
+              </Button>
+              <Button onClick={handleSave} className="flex-1 sm:flex-none text-xs sm:text-sm h-8 sm:h-10">
+                Liberar Laudo
+              </Button>
+            </div>
+          </div>
+        </div>
+
+        {/* Modal de Confirmação de Rascunho */}
+        {showDraftConfirm && (
+          <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+            <div className="bg-card rounded-lg shadow-lg p-4 sm:p-6 max-w-sm w-full">
+              <h2 className="text-lg sm:text-xl font-bold mb-2 text-foreground">Salvar Rascunho?</h2>
+              <p className="text-sm text-muted-foreground mb-6">
+                Você tem informações não salvas. Deseja salvar como rascunho para continuar depois?
+              </p>
+              <div className="flex gap-2 sm:gap-3 flex-col sm:flex-row">
+                <Button
+                  variant="outline"
+                  onClick={() => {
+                    setShowDraftConfirm(false);
+                    discardDraft();
+                  }}
+                  className="text-xs sm:text-sm h-9 sm:h-10 hover:bg-gray-100 dark:hover:bg-gray-800"
+                >
+                  Descartar
+                </Button>
+                <Button
+                  variant="outline"
+                  onClick={() => setShowDraftConfirm(false)}
+                  className="text-xs sm:text-sm h-9 sm:h-10 hover:bg-gray-100 dark:hover:bg-gray-800"
+                >
+                  Voltar
+                </Button>
+                <Button
+                  onClick={() => {
+                    setShowDraftConfirm(false);
+                    saveDraft();
+                  }}
+                  className="text-xs sm:text-sm h-9 sm:h-10"
+                >
+                  Salvar Rascunho
+                </Button>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </ProtectedRoute>
+  );
+}

susconecta/app/laudos/[id]/editar/page.tsx

@@ -0,0 +1,847 @@
+'use client';
+
+import React, { useState, useRef, useEffect } from 'react';
+import { useRouter, useParams } from 'next/navigation';
+import ProtectedRoute from '@/components/shared/ProtectedRoute';
+import { useAuth } from '@/hooks/useAuth';
+import { useToast } from '@/hooks/use-toast';
+import { buscarRelatorioPorId, buscarPacientePorId } from '@/lib/api';
+import { useReports } from '@/hooks/useReports';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { FileText, Settings, Eye, ArrowLeft, BookOpen } from 'lucide-react';
+
+export default function EditarLaudoPage() {
+  const router = useRouter();
+  const params = useParams();
+  const { user, token } = useAuth();
+  const { toast } = useToast();
+  const { updateExistingReport } = useReports();
+  const laudoId = params.id as string;
+
+  // Estados principais
+  const [reportData, setReportData] = useState<any>(null);
+  const [patient, setPatient] = useState<any>(null);
+  const [content, setContent] = useState('');
+  const [activeTab, setActiveTab] = useState('editor');
+  const [showPreview, setShowPreview] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const [showExitDialog, setShowExitDialog] = useState(false);
+
+  // Campos do laudo
+  const [campos, setCampos] = useState({
+    cid: '',
+    diagnostico: '',
+    conclusao: '',
+    exame: '',
+    especialidade: '',
+    mostrarData: true,
+    mostrarAssinatura: true,
+  });
+
+  // Editor ref
+  const editorRef = useRef<HTMLDivElement>(null);
+
+  // Frases prontas
+  const frasesProntas = [
+    'Paciente apresenta bom estado geral.',
+    'Recomenda-se seguimento clínico periódico.',
+    'Encaminhar para especialista.',
+    'Realizar novos exames em 30 dias.',
+    'Retorno em 15 dias para reavaliação.',
+    'Suspender medicamento em caso de efeitos colaterais.',
+    'Manter repouso relativo por 7 dias.',
+    'Seguir orientações prescritas rigorosamente.',
+    'Compatível com os achados clínicos.',
+    'Sem alterações significativas detectadas.',
+  ];
+
+  // Estado para rastrear formatações ativas
+  const [activeFormats, setActiveFormats] = useState({
+    bold: false,
+    italic: false,
+    underline: false,
+    strikethrough: false,
+  });
+
+  // Estado para rastrear alinhamento ativo
+  const [activeAlignment, setActiveAlignment] = useState('left');
+
+  // Salvar conteúdo no localStorage sempre que muda (com debounce)
+  useEffect(() => {
+    const timeoutId = setTimeout(() => {
+      if (laudoId) {
+        // Capturar conteúdo atual do editor antes de salvar
+        const currentContent = editorRef.current?.innerHTML || content;
+        
+        const draft = {
+          content: currentContent,
+          campos,
+          lastSaved: new Date().toISOString(),
+        };
+        
+        localStorage.setItem(`laudo-draft-${laudoId}`, JSON.stringify(draft));
+      }
+    }, 1000); // Aguarda 1 segundo após última mudança
+
+    return () => clearTimeout(timeoutId);
+  }, [content, campos, laudoId]);
+
+  // Função para trocar de aba salvando conteúdo antes
+  const handleTabChange = (newTab: string) => {
+    // Salvar conteúdo do editor antes de trocar
+    if (editorRef.current) {
+      const editorContent = editorRef.current.innerHTML;
+      setContent(editorContent);
+    }
+    
+    // Se estiver voltando para o editor, restaurar conteúdo
+    if (newTab === 'editor') {
+      setTimeout(() => {
+        if (editorRef.current && content) {
+          editorRef.current.innerHTML = content;
+        }
+      }, 0);
+    }
+    
+    setActiveTab(newTab);
+  };
+
+  // Atualizar formatações ativas ao mudar seleção
+  useEffect(() => {
+    const updateFormats = () => {
+      setActiveFormats({
+        bold: document.queryCommandState('bold'),
+        italic: document.queryCommandState('italic'),
+        underline: document.queryCommandState('underline'),
+        strikethrough: document.queryCommandState('strikeThrough'),
+      });
+
+      // Detectar alinhamento ativo
+      if (document.queryCommandState('justifyCenter')) {
+        setActiveAlignment('center');
+      } else if (document.queryCommandState('justifyRight')) {
+        setActiveAlignment('right');
+      } else if (document.queryCommandState('justifyFull')) {
+        setActiveAlignment('justify');
+      } else {
+        setActiveAlignment('left');
+      }
+    };
+
+    editorRef.current?.addEventListener('mouseup', updateFormats);
+    editorRef.current?.addEventListener('keyup', updateFormats);
+
+    return () => {
+      editorRef.current?.removeEventListener('mouseup', updateFormats);
+      editorRef.current?.removeEventListener('keyup', updateFormats);
+    };
+  }, []);
+
+  // Carregar laudo ao montar
+  useEffect(() => {
+    async function fetchLaudo() {
+      try {
+        if (!laudoId || !token) {
+          setLoading(false);
+          return;
+        }
+        const report = await buscarRelatorioPorId(laudoId);
+        setReportData(report);
+
+        // Carregar paciente se existir patient_id
+        const r = report as any;
+        if (r.patient_id) {
+          try {
+            const patientData = await buscarPacientePorId(r.patient_id);
+            setPatient(patientData);
+          } catch (err) {
+            console.warn('Erro ao carregar paciente:', err);
+          }
+        }
+
+        // Preencher campos
+        setCampos({
+          cid: r.cid_code || r.cid || '',
+          diagnostico: r.diagnosis || r.diagnostico || '',
+          conclusao: r.conclusion || r.conclusao || '',
+          exame: r.exam || r.exame || '',
+          especialidade: r.especialidade || '',
+          mostrarData: !r.hide_date,
+          mostrarAssinatura: !r.hide_signature,
+        });
+
+        // Preencher conteúdo - verificar todos os possíveis nomes de campo
+        const contentHtml = r.content_html || r.conteudo_html || r.contentHtml || r.conteudo || r.content || '';
+        console.log('[EditarLaudoPage] Loading content - report:', r);
+        console.log('[EditarLaudoPage] Content fields check:', {
+          content_html: r.content_html,
+          conteudo_html: r.conteudo_html,
+          contentHtml: r.contentHtml,
+          conteudo: r.conteudo,
+          content: r.content,
+          finalContent: contentHtml
+        });
+        
+        // Verificar se existe rascunho salvo no localStorage
+        let finalContent = contentHtml;
+        let finalCampos = {
+          cid: r.cid_code || r.cid || '',
+          diagnostico: r.diagnosis || r.diagnostico || '',
+          conclusao: r.conclusion || r.conclusao || '',
+          exame: r.exam || r.exame || '',
+          especialidade: r.especialidade || '',
+          mostrarData: !r.hide_date,
+          mostrarAssinatura: !r.hide_signature,
+        };
+        
+        if (typeof window !== 'undefined') {
+          const draftData = localStorage.getItem(`laudo-draft-${laudoId}`);
+          if (draftData) {
+            try {
+              const draft = JSON.parse(draftData);
+              if (draft.content) finalContent = draft.content;
+              if (draft.campos) finalCampos = { ...finalCampos, ...draft.campos };
+            } catch (err) {
+              // Se falhar parse, tentar como string simples (formato antigo)
+              finalContent = draftData;
+            }
+          }
+        }
+        
+        setCampos(finalCampos);
+        setContent(finalContent);
+        console.log('[EditarLaudoPage] Setting content state with length:', finalContent.length);
+        
+        // O innerHTML será setado no useEffect separado abaixo
+      } catch (err) {
+        console.warn('Erro ao carregar laudo:', err);
+        toast({
+          title: 'Erro',
+          description: 'Erro ao carregar o laudo.',
+          variant: 'destructive',
+        });
+      } finally {
+        setLoading(false);
+      }
+    }
+    fetchLaudo();
+  }, [laudoId, token, toast]);
+
+  // UseEffect separado para injetar o conteúdo no editor quando estiver pronto
+  useEffect(() => {
+    if (content && editorRef.current && !loading) {
+      console.log('[EditarLaudoPage] Injecting content into editor, length:', content.length);
+      // Só injetar se o conteúdo do editor estiver vazio ou muito diferente
+      const currentContent = editorRef.current.innerHTML;
+      if (!currentContent || currentContent.length === 0) {
+        editorRef.current.innerHTML = content;
+        // Mover cursor para o final
+        const range = document.createRange();
+        const sel = window.getSelection();
+        if (editorRef.current.childNodes.length > 0) {
+          range.selectNodeContents(editorRef.current);
+          range.collapse(false); // false = colapsar no final
+          sel?.removeAllRanges();
+          sel?.addRange(range);
+        }
+      }
+    }
+  }, [content, loading]);
+
+  // Formatação com contenteditable
+  const applyFormat = (command: string, value?: string) => {
+    document.execCommand(command, false, value || undefined);
+    editorRef.current?.focus();
+  };
+
+  const makeBold = () => applyFormat('bold');
+  const makeItalic = () => applyFormat('italic');
+  const makeUnderline = () => applyFormat('underline');
+  const makeStrikethrough = () => applyFormat('strikeThrough');
+  
+  const insertUnorderedList = () => {
+    document.execCommand('insertUnorderedList', false);
+    editorRef.current?.focus();
+  };
+  
+  const insertOrderedList = () => {
+    document.execCommand('insertOrderedList', false);
+    editorRef.current?.focus();
+  };
+  
+  const alignText = (alignment: 'left' | 'center' | 'right' | 'justify') => {
+    editorRef.current?.focus();
+    
+    const alignCommands: { [key: string]: string } = {
+      left: 'justifyLeft',
+      center: 'justifyCenter',
+      right: 'justifyRight',
+      justify: 'justifyFull',
+    };
+
+    document.execCommand(alignCommands[alignment], false, undefined);
+    
+    if (editorRef.current) {
+      setContent(editorRef.current.innerHTML);
+    }
+  };
+
+  const alignLeft = () => alignText('left');
+  const alignCenter = () => alignText('center');
+  const alignRight = () => alignText('right');
+  const alignJustify = () => alignText('justify');
+
+  const insertFraseProta = (frase: string) => {
+    editorRef.current?.focus();
+    document.execCommand('insertText', false, frase + ' ');
+    if (editorRef.current) {
+      setContent(editorRef.current.innerHTML);
+    }
+  };
+
+  const processContent = (content: string) => {
+    return content
+      .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
+      .replace(/\*(.*?)\*/g, '<em>$1</em>')
+      .replace(/__(.*?)__/g, '<u>$1</u>')
+      .replace(/\[left\]([\s\S]*?)\[\/left\]/g, '<div style="text-align:left">$1</div>')
+      .replace(/\[center\]([\s\S]*?)\[\/center\]/g, '<div style="text-align:center">$1</div>')
+      .replace(/\[right\]([\s\S]*?)\[\/right\]/g, '<div style="text-align:right">$1</div>')
+      .replace(/\[justify\]([\s\S]*?)\[\/justify\]/g, '<div style="text-align:justify">$1</div>')
+      .replace(/\[size=(\d+)\]([\s\S]*?)\[\/size\]/g, '<span style="font-size:$1px">$2</span>')
+      .replace(/\[font=([^\]]+)\]([\s\S]*?)\[\/font\]/g, '<span style="font-family:$1">$2</span>')
+      .replace(/\[color=([^\]]+)\]([\s\S]*?)\[\/color\]/g, '<span style="color:$1">$2</span>')
+      .replace(/{{diagnostico}}/g, campos.diagnostico || '[DIAGNÓSTICO]')
+      .replace(/{{conclusao}}/g, campos.conclusao || '[CONCLUSÃO]')
+      .replace(/\n/g, '<br>');
+  };
+
+  const handleSave = async () => {
+    try {
+      if (!reportData?.id) {
+        toast({
+          title: 'Erro',
+          description: 'ID do laudo não encontrado.',
+          variant: 'destructive',
+        });
+        return;
+      }
+
+      // Pegar conteúdo diretamente do DOM para garantir que está atualizado
+      const currentContent = editorRef.current?.innerHTML || content;
+
+      const payload = {
+        exam: campos.exame || '',
+        diagnosis: campos.diagnostico || '',
+        conclusion: campos.conclusao || '',
+        cid_code: campos.cid || '',
+        content_html: currentContent,
+        content_json: {},
+        hide_date: !campos.mostrarData,
+        hide_signature: !campos.mostrarAssinatura,
+      };
+
+      if (updateExistingReport) {
+        await updateExistingReport(reportData.id, payload as any);
+        
+        // Limpar rascunho do localStorage após salvar
+        if (typeof window !== 'undefined') {
+          localStorage.removeItem(`laudo-draft-${reportData.id}`);
+        }
+        
+        toast({
+          title: 'Laudo atualizado com sucesso!',
+          description: 'As alterações foram salvas.',
+          variant: 'default',
+        });
+        router.push(`/laudos/${reportData.id}`);
+      }
+    } catch (err) {
+      toast({
+        title: 'Erro ao atualizar laudo',
+        description: (err && typeof err === 'object' && 'message' in err) ? (err as any).message : String(err) || 'Tente novamente.',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  if (loading) {
+    return (
+      <ProtectedRoute>
+        <div className="flex items-center justify-center min-h-screen bg-background">
+          <div className="text-lg text-muted-foreground">Carregando laudo...</div>
+        </div>
+      </ProtectedRoute>
+    );
+  }
+
+  return (
+    <ProtectedRoute>
+      <div className="min-h-screen bg-background flex flex-col">
+        {/* Header */}
+        <div className="border-b border-border bg-card shadow-sm sticky top-0 z-10">
+          <div className="px-2 sm:px-4 md:px-6 py-3 sm:py-4 flex items-center justify-between gap-2 sm:gap-4">
+            <div className="flex items-center gap-2 sm:gap-4 flex-1 min-w-0">
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => setShowExitDialog(true)}
+                className="p-0 h-auto flex-shrink-0"
+              >
+                <ArrowLeft className="w-4 sm:w-5 h-4 sm:h-5" />
+              </Button>
+              <div className="min-w-0">
+                <h1 className="text-lg sm:text-2xl font-bold truncate">Editar Laudo Médico</h1>
+                <div className="flex flex-col gap-0.5">
+                  <p className="text-xs sm:text-sm text-muted-foreground truncate">Atualize as informações do laudo</p>
+                  {patient && (
+                    <p className="text-xs sm:text-sm font-semibold text-blue-600 dark:text-blue-400 truncate">
+                      Paciente: {patient.full_name || patient.name || 'N/A'}
+                    </p>
+                  )}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Main Content */}
+        <div className="flex-1 overflow-hidden flex flex-col">
+          {/* Tabs */}
+          <div className="flex border-b border-border bg-card overflow-x-auto flex-shrink-0">
+            <button
+              onClick={() => handleTabChange('editor')}
+              className={`px-2 sm:px-4 py-2 text-xs sm:text-sm font-medium border-b-2 transition-colors whitespace-nowrap ${
+                activeTab === 'editor'
+                  ? 'border-blue-500 text-blue-600'
+                  : 'border-transparent text-gray-600 dark:text-muted-foreground'
+              }`}
+            >
+              <FileText className="w-3 sm:w-4 h-3 sm:h-4 inline mr-1" />
+              Editor
+            </button>
+            <button
+              onClick={() => handleTabChange('campos')}
+              className={`px-2 sm:px-4 py-2 text-xs sm:text-sm font-medium border-b-2 transition-colors whitespace-nowrap ${
+                activeTab === 'campos'
+                  ? 'border-blue-500 text-blue-600'
+                  : 'border-transparent text-gray-600 dark:text-muted-foreground'
+              }`}
+            >
+              <Settings className="w-3 sm:w-4 h-3 sm:h-4 inline mr-1" />
+              Campos
+            </button>
+            <button
+              onClick={() => setShowPreview(!showPreview)}
+              className={`px-2 sm:px-4 py-2 text-xs sm:text-sm font-medium border-b-2 transition-colors whitespace-nowrap ${
+                showPreview ? 'border-green-500 text-green-600' : 'border-transparent text-gray-600 dark:text-muted-foreground'
+              }`}
+            >
+              <Eye className="w-3 sm:w-4 h-3 sm:h-4 inline mr-1" />
+              <span>{showPreview ? 'Ocultar' : 'Pré-visualização'}</span>
+            </button>
+          </div>
+
+          {/* Content */}
+          <div className="flex-1 overflow-hidden flex flex-col md:flex-row bg-background">
+            {/* Left Panel */}
+            <div className={`flex flex-col overflow-hidden transition-all ${showPreview ? 'w-full md:w-3/5 h-auto md:h-full' : 'w-full'}`}>
+              {/* Editor Tab */}
+              {activeTab === 'editor' && (
+                <div className="flex-1 flex flex-col overflow-hidden">
+                  {/* Toolbar */}
+                  <div className="p-2 border-b border-border bg-card flex-shrink-0 overflow-x-auto">
+                    <div className="flex flex-wrap gap-2 items-center">
+                      {/* Font Family */}
+                      <label className="text-xs font-medium text-foreground whitespace-nowrap">Fonte:</label>
+                      <select
+                        defaultValue="Arial"
+                        onChange={(e) => applyFormat('fontName', e.target.value)}
+                        className="border border-border rounded px-2 py-1 text-xs bg-background text-foreground"
+                      >
+                        <option value="Arial">Arial</option>
+                        <option value="Helvetica">Helvetica</option>
+                        <option value="Times New Roman">Times New Roman</option>
+                        <option value="Courier New">Courier New</option>
+                        <option value="Verdana">Verdana</option>
+                        <option value="Georgia">Georgia</option>
+                      </select>
+
+                      {/* Font Size */}
+                      <label className="text-xs font-medium text-foreground whitespace-nowrap">Tamanho:</label>
+                      <select
+                        defaultValue="3"
+                        onChange={(e) => applyFormat('fontSize', e.target.value)}
+                        className="border border-border rounded px-2 py-1 text-xs bg-background text-foreground"
+                      >
+                        <option value="1">8px</option>
+                        <option value="2">10px</option>
+                        <option value="3">12px</option>
+                        <option value="4">14px</option>
+                        <option value="5">18px</option>
+                        <option value="6">24px</option>
+                        <option value="7">32px</option>
+                      </select>
+
+                      <div className="w-px h-6 bg-border mx-1" />
+
+                      <Button 
+                        variant={activeFormats.bold ? "default" : "outline"} 
+                        size="sm" 
+                        onMouseDown={(e) => { e.preventDefault(); makeBold(); }} 
+                        title="Negrito (Ctrl+B)" 
+                        className="text-xs h-8 px-2 hover:bg-blue-50 dark:hover:bg-blue-950"
+                      >
+                        <strong>B</strong>
+                      </Button>
+                      <Button 
+                        variant={activeFormats.italic ? "default" : "outline"} 
+                        size="sm" 
+                        onMouseDown={(e) => { e.preventDefault(); makeItalic(); }} 
+                        title="Itálico (Ctrl+I)" 
+                        className="text-xs h-8 px-2 hover:bg-blue-50 dark:hover:bg-blue-950"
+                      >
+                        <em>I</em>
+                      </Button>
+                      <Button 
+                        variant={activeFormats.underline ? "default" : "outline"} 
+                        size="sm" 
+                        onMouseDown={(e) => { e.preventDefault(); makeUnderline(); }} 
+                        title="Sublinhado (Ctrl+U)" 
+                        className="text-xs h-8 px-2 hover:bg-blue-50 dark:hover:bg-blue-950"
+                      >
+                        <u>U</u>
+                      </Button>
+                      <Button 
+                        variant={activeFormats.strikethrough ? "default" : "outline"} 
+                        size="sm" 
+                        onMouseDown={(e) => { e.preventDefault(); makeStrikethrough(); }} 
+                        title="Tachado" 
+                        className="text-xs h-8 px-2 hover:bg-blue-50 dark:hover:bg-blue-950"
+                      >
+                        <del>S</del>
+                      </Button>
+                      <div className="w-px h-6 bg-border mx-1" />
+                      <Button variant="outline" size="sm" onMouseDown={(e) => { e.preventDefault(); insertUnorderedList(); }} title="Lista com marcadores" className="text-xs h-8 px-2 hover:bg-blue-50 dark:hover:bg-blue-950">
+                        •
+                      </Button>
+                      <Button variant="outline" size="sm" onMouseDown={(e) => { e.preventDefault(); insertOrderedList(); }} title="Lista numerada" className="text-xs h-8 px-2 hover:bg-blue-50 dark:hover:bg-blue-950">
+                        1.
+                      </Button>
+                      <div className="w-px h-6 bg-border mx-1" />
+                      <Button 
+                        variant={activeAlignment === 'left' ? "default" : "outline"} 
+                        size="sm" 
+                        onMouseDown={(e) => { e.preventDefault(); alignLeft(); }} 
+                        title="Alinhar à esquerda" 
+                        className="text-xs h-8 px-2 hover:bg-blue-50 dark:hover:bg-blue-950"
+                      >
+                        ◄
+                      </Button>
+                      <Button 
+                        variant={activeAlignment === 'center' ? "default" : "outline"} 
+                        size="sm" 
+                        onMouseDown={(e) => { e.preventDefault(); alignCenter(); }} 
+                        title="Centralizar" 
+                        className="text-xs h-8 px-2 hover:bg-blue-50 dark:hover:bg-blue-950"
+                      >
+                        ·
+                      </Button>
+                      <Button 
+                        variant={activeAlignment === 'right' ? "default" : "outline"} 
+                        size="sm" 
+                        onMouseDown={(e) => { e.preventDefault(); alignRight(); }} 
+                        title="Alinhar à direita" 
+                        className="text-xs h-8 px-2 hover:bg-blue-50 dark:hover:bg-blue-950"
+                      >
+                        ►
+                      </Button>
+                      <Button 
+                        variant={activeAlignment === 'justify' ? "default" : "outline"} 
+                        size="sm" 
+                        onMouseDown={(e) => { e.preventDefault(); alignJustify(); }} 
+                        title="Justificar" 
+                        className="text-xs h-8 px-2 hover:bg-blue-50 dark:hover:bg-blue-950"
+                      >
+                        ≡
+                      </Button>
+                      <div className="w-px h-6 bg-border mx-1" />
+                      <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                          <Button variant="outline" size="sm" title="Frases prontas" className="text-xs h-8 px-2 hover:bg-blue-50 dark:hover:bg-blue-950">
+                            <BookOpen className="w-4 h-4" />
+                          </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="start" className="w-64">
+                          {frasesProntas.map((frase, index) => (
+                            <DropdownMenuItem
+                              key={index}
+                              onSelect={() => insertFraseProta(frase)}
+                              className="text-xs cursor-pointer"
+                            >
+                              {frase}
+                            </DropdownMenuItem>
+                          ))}
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    </div>
+                  </div>
+
+                  {/* Editor contenteditable */}
+                  <div className="flex-1 overflow-hidden p-2 sm:p-3 md:p-4">
+                    <div
+                      ref={editorRef}
+                      contentEditable
+                      onInput={(e) => {
+                        // Capturar conteúdo sem perder posição do cursor
+                        setContent(e.currentTarget.innerHTML);
+                      }}
+                      onPaste={(e) => {
+                        e.preventDefault();
+                        const text = e.clipboardData.getData('text/plain');
+                        document.execCommand('insertText', false, text);
+                      }}
+                      className="w-full h-full overflow-auto p-3 text-sm border border-border rounded bg-background text-foreground outline-none empty:before:content-['Digite_aqui...'] empty:before:text-muted-foreground"
+                      style={{ caretColor: 'currentColor' }}
+                      suppressContentEditableWarning
+                    />
+                  </div>
+                </div>
+              )}
+
+              {/* Campos Tab */}
+              {activeTab === 'campos' && (
+                <div className="flex-1 p-2 sm:p-3 md:p-4 space-y-2 sm:space-y-3 md:space-y-4 overflow-y-auto">
+                  <div>
+                    <Label htmlFor="cid" className="text-xs sm:text-sm">
+                      CID
+                    </Label>
+                    <Input
+                      id="cid"
+                      value={campos.cid}
+                      onChange={(e) => setCampos((prev) => ({ ...prev, cid: e.target.value }))}
+                      placeholder="Ex: M25.5, I10, etc."
+                      className="text-xs sm:text-sm mt-1 h-8 sm:h-10"
+                    />
+                  </div>
+                  <div>
+                    <Label htmlFor="exame" className="text-xs sm:text-sm">
+                      Exame
+                    </Label>
+                    <Input
+                      id="exame"
+                      value={campos.exame}
+                      onChange={(e) => setCampos((prev) => ({ ...prev, exame: e.target.value }))}
+                      placeholder="Exame realizado"
+                      className="text-xs sm:text-sm mt-1 h-8 sm:h-10"
+                    />
+                  </div>
+                  <div>
+                    <Label htmlFor="diagnostico" className="text-xs sm:text-sm">
+                      Diagnóstico
+                    </Label>
+                    <Textarea
+                      id="diagnostico"
+                      value={campos.diagnostico}
+                      onChange={(e) => setCampos((prev) => ({ ...prev, diagnostico: e.target.value }))}
+                      placeholder="Diagnóstico principal"
+                      rows={2}
+                      className="text-xs sm:text-sm mt-1"
+                    />
+                  </div>
+                  <div>
+                    <Label htmlFor="conclusao" className="text-xs sm:text-sm">
+                      Conclusão
+                    </Label>
+                    <Textarea
+                      id="conclusao"
+                      value={campos.conclusao}
+                      onChange={(e) => setCampos((prev) => ({ ...prev, conclusao: e.target.value }))}
+                      placeholder="Conclusão do laudo"
+                      rows={2}
+                      className="text-xs sm:text-sm mt-1"
+                    />
+                  </div>
+                  <div className="space-y-1 sm:space-y-2">
+                    <div className="flex items-center gap-2">
+                      <input
+                        type="checkbox"
+                        id="mostrar-data"
+                        checked={campos.mostrarData}
+                        onChange={(e) => setCampos((prev) => ({ ...prev, mostrarData: e.target.checked }))}
+                        className="w-4 h-4"
+                      />
+                      <Label htmlFor="mostrar-data" className="text-xs sm:text-sm">
+                        Mostrar data no laudo
+                      </Label>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <input
+                        type="checkbox"
+                        id="mostrar-assinatura"
+                        checked={campos.mostrarAssinatura}
+                        onChange={(e) => setCampos((prev) => ({ ...prev, mostrarAssinatura: e.target.checked }))}
+                        className="w-4 h-4"
+                      />
+                      <Label htmlFor="mostrar-assinatura" className="text-xs sm:text-sm">
+                        Mostrar assinatura no laudo
+                      </Label>
+                    </div>
+                  </div>
+                </div>
+              )}
+            </div>
+
+            {/* Preview Panel */}
+            {showPreview && (
+              <div className="w-full md:w-2/5 h-auto md:h-full border-t md:border-l md:border-t-0 border-border bg-muted/20 flex flex-col overflow-hidden">
+                <div className="p-2 sm:p-2.5 md:p-3 border-b border-border flex-shrink-0 bg-card">
+                  <h3 className="font-semibold text-xs sm:text-sm text-foreground truncate">Pré-visualização</h3>
+                </div>
+                <div className="flex-1 overflow-y-auto p-2 sm:p-2.5 md:p-3">
+                  <div className="bg-background border border-border rounded p-2 sm:p-2.5 md:p-3 text-xs space-y-1.5 sm:space-y-2 max-w-full">
+                    {/* Header */}
+                    <div className="text-center mb-2 pb-2 border-b border-border/40">
+                      <h2 className="text-xs sm:text-sm font-bold leading-tight whitespace-normal">
+                        LAUDO {campos.especialidade ? `- ${campos.especialidade.toUpperCase().substring(0, 12)}` : ''}
+                      </h2>
+                      {campos.exame && <p className="text-xs font-semibold mt-1 whitespace-pre-wrap break-words">{campos.exame}</p>}
+                      {campos.mostrarData && (
+                        <p className="text-xs text-muted-foreground mt-1">{new Date().toLocaleDateString('pt-BR')}</p>
+                      )}
+                    </div>
+
+                    {/* Informações Clínicas */}
+                    <div className="mb-1.5 pb-1.5 border-b border-border/40 space-y-0.5">
+                      {campos.cid && (
+                        <div className="text-xs whitespace-normal break-words">
+                          <div className="font-semibold">CID:</div>
+                          <div className="mt-0.5 text-blue-600 dark:text-blue-400 font-semibold">{campos.cid}</div>
+                        </div>
+                      )}
+                    </div>
+
+                    {/* Diagnóstico */}
+                    {campos.diagnostico && (
+                      <div className="mb-1.5 pb-1.5 border-b border-border/40">
+                        <div className="text-xs font-semibold mb-0.5">Diagnóstico:</div>
+                        <div className="text-xs leading-tight whitespace-pre-wrap text-muted-foreground break-words">
+                          {campos.diagnostico}
+                        </div>
+                      </div>
+                    )}
+
+                    {/* Conteúdo */}
+                    {content && (
+                      <div className="mb-1.5 pb-1.5 border-b border-border/40">
+                        <div className="text-xs font-semibold mb-0.5">Conteúdo:</div>
+                        <div
+                          className="text-xs leading-tight whitespace-pre-wrap text-muted-foreground break-words overflow-hidden"
+                          dangerouslySetInnerHTML={{
+                            __html: processContent(content),
+                          }}
+                        />
+                      </div>
+                    )}
+
+                    {/* Conclusão */}
+                    {campos.conclusao && (
+                      <div className="mb-1.5 pb-1.5 border-b border-border/40">
+                        <div className="text-xs font-semibold mb-0.5">Conclusão:</div>
+                        <div className="text-xs leading-tight whitespace-pre-wrap text-muted-foreground break-words">
+                          {campos.conclusao}
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Footer */}
+        <div className="p-2 sm:p-3 md:p-4 border-t border-border bg-card flex-shrink-0">
+          <div className="flex flex-col sm:flex-row items-stretch sm:items-center justify-between gap-2 sm:gap-4">
+            <div className="text-xs text-muted-foreground hidden md:block">
+              Edite as informações do laudo e salve as alterações.
+            </div>
+            <div className="flex gap-2 w-full sm:w-auto">
+              <Button variant="outline" onClick={() => setShowExitDialog(true)} className="flex-1 sm:flex-none text-xs sm:text-sm h-8 sm:h-10 hover:bg-blue-50 dark:hover:bg-blue-950">
+                Cancelar
+              </Button>
+              <Button onClick={handleSave} className="flex-1 sm:flex-none text-xs sm:text-sm h-8 sm:h-10">
+                Salvar Alterações
+              </Button>
+            </div>
+          </div>
+        </div>
+
+        {/* Dialog de confirmação de saída */}
+        <Dialog open={showExitDialog} onOpenChange={setShowExitDialog}>
+          <DialogContent className="sm:max-w-md">
+            <DialogHeader>
+              <DialogTitle>Salvar Rascunho?</DialogTitle>
+              <DialogDescription>
+                Você tem informações não salvas. Deseja salvar como rascunho para continuar depois?
+              </DialogDescription>
+            </DialogHeader>
+            <DialogFooter className="flex-col sm:flex-row gap-2">
+              <Button
+                variant="outline"
+                onClick={() => {
+                  // Limpar rascunho
+                  localStorage.removeItem(`laudo-draft-${laudoId}`);
+                  setShowExitDialog(false);
+                  router.back();
+                }}
+                className="w-full sm:w-auto hover:bg-gray-100 dark:hover:bg-gray-800"
+              >
+                Descartar
+              </Button>
+              <Button
+                variant="outline"
+                onClick={() => {
+                  setShowExitDialog(false);
+                  router.back();
+                }}
+                className="w-full sm:w-auto hover:bg-gray-100 dark:hover:bg-gray-800"
+              >
+                Voltar
+              </Button>
+              <Button
+                onClick={() => {
+                  // Salvar rascunho manualmente antes de sair
+                  const currentContent = editorRef.current?.innerHTML || content;
+                  const draft = {
+                    content: currentContent,
+                    campos,
+                    lastSaved: new Date().toISOString(),
+                  };
+                  localStorage.setItem(`laudo-draft-${laudoId}`, JSON.stringify(draft));
+                  
+                  toast({
+                    title: 'Rascunho salvo!',
+                    description: 'Suas alterações foram salvas.',
+                    variant: 'default',
+                  });
+                  
+                  setShowExitDialog(false);
+                  router.back();
+                }}
+                className="w-full sm:w-auto"
+              >
+                Salvar Rascunho
+              </Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      </div>
+    </ProtectedRoute>
+  );
+}

susconecta/app/laudos/[id]/page.tsx

@@ -0,0 +1,536 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { useRouter, useParams } from 'next/navigation'
+import { useTheme } from 'next-themes'
+import Image from 'next/image'
+import { Button } from '@/components/ui/button'
+import { ArrowLeft, Printer, Download } from 'lucide-react'
+import { buscarRelatorioPorId, getDoctorById, buscarMedicosPorIds, buscarPacientePorId } from '@/lib/api'
+import { ENV_CONFIG } from '@/lib/env-config'
+import ProtectedRoute from '@/components/shared/ProtectedRoute'
+import { useAuth } from '@/hooks/useAuth'
+
+export default function LaudoPage() {
+  const router = useRouter()
+  const params = useParams()
+  const { user } = useAuth()
+  const { theme } = useTheme()
+  const reportId = params.id as string
+  const isDark = theme === 'dark'
+
+  const [report, setReport] = useState<any | null>(null)
+  const [doctor, setDoctor] = useState<any | null>(null)
+  const [patient, setPatient] = useState<any | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState('')
+
+  useEffect(() => {
+    if (!reportId) return
+
+    let mounted = true
+
+    async function loadReport() {
+      try {
+        setLoading(true)
+        const reportData = await buscarRelatorioPorId(reportId)
+        
+        if (!mounted) return
+        setReport(reportData)
+
+        // Load patient info if patient_id exists
+        const rd = reportData as any
+        const patientId = rd?.patient_id
+        if (patientId) {
+          try {
+            const patientData = await buscarPacientePorId(patientId).catch(() => null)
+            if (mounted && patientData) {
+              setPatient(patientData)
+            }
+          } catch (e) {
+            console.warn('Erro ao carregar dados do paciente:', e)
+          }
+        }
+
+        // Load doctor info using the same strategy as paciente/page.tsx
+        const maybeId = rd?.doctor_id ?? rd?.created_by ?? rd?.doctor ?? null
+        
+        if (maybeId) {
+          try {
+            // First try: buscarMedicosPorIds
+            let doctors = await buscarMedicosPorIds([maybeId]).catch(() => [])
+            
+            if (!doctors || doctors.length === 0) {
+              // Second try: getDoctorById
+              const doc = await getDoctorById(String(maybeId)).catch(() => null)
+              if (doc) doctors = [doc]
+            }
+            
+            if (!doctors || doctors.length === 0) {
+              // Third try: direct REST with user_id filter
+              const token = (typeof window !== 'undefined') 
+                ? (localStorage.getItem('auth_token') || localStorage.getItem('token') || 
+                   sessionStorage.getItem('auth_token') || sessionStorage.getItem('token')) 
+                : null
+              const headers: Record<string,string> = { 
+                apikey: (ENV_CONFIG as any).SUPABASE_ANON_KEY, 
+                Accept: 'application/json' 
+              }
+              if (token) headers.Authorization = `Bearer ${token}`
+              const url = `${(ENV_CONFIG as any).SUPABASE_URL}/rest/v1/doctors?user_id=eq.${encodeURIComponent(String(maybeId))}&limit=1`
+              const res = await fetch(url, { method: 'GET', headers })
+              if (res && res.status < 400) {
+                const rows = await res.json().catch(() => [])
+                if (rows && Array.isArray(rows) && rows.length) {
+                  doctors = rows
+                }
+              }
+            }
+            
+            if (mounted && doctors && doctors.length > 0) {
+              setDoctor(doctors[0])
+            }
+          } catch (e) {
+            console.warn('Erro ao carregar dados do profissional:', e)
+          }
+        }
+      } catch (err) {
+        if (mounted) setError('Erro ao carregar o laudo.')
+        console.error(err)
+      } finally {
+        if (mounted) setLoading(false)
+      }
+    }
+
+    loadReport()
+    return () => { mounted = false }
+  }, [reportId])
+
+  const handlePrint = () => {
+    window.print()
+  }
+
+  const handleDownloadPDF = async () => {
+    if (!report) return
+    
+    try {
+      // Para simplificar, vamos usar jsPDF com html2canvas para capturar o conteúdo
+      const { jsPDF } = await import('jspdf')
+      const html2canvas = await import('html2canvas').then((m) => m.default)
+      
+      // Criar um elemento temporário com o conteúdo
+      const element = document.createElement('div')
+      element.style.position = 'absolute'
+      element.style.left = '-9999px'
+      element.style.width = '210mm' // A4 width
+      element.style.padding = '20mm'
+      element.style.backgroundColor = 'white'
+      element.style.fontFamily = 'Arial, sans-serif'
+      
+      // Extrair informações
+      const reportDate = new Date(report.report_date || report.created_at || Date.now()).toLocaleDateString('pt-BR')
+      const cid = report.cid ?? report.cid_code ?? report.cidCode ?? report.cie ?? ''
+      const exam = report.exam ?? report.exame ?? report.especialidade ?? report.report_type ?? ''
+      const diagnosis = report.diagnosis ?? report.diagnostico ?? report.diagnosis_text ?? report.diagnostico_text ?? ''
+      const conclusion = report.conclusion ?? report.conclusao ?? report.conclusion_text ?? report.conclusao_text ?? ''
+      const notesText = report.content ?? report.body ?? report.conteudo ?? report.notes ?? report.observacoes ?? ''
+      
+      // Extrair nome do médico
+      let doctorName = ''
+      if (doctor) {
+        doctorName = doctor.full_name || doctor.name || doctor.fullName || doctor.doctor_name || ''
+      }
+      if (!doctorName) {
+        const rd = report as any
+        const tryKeys = [
+          'doctor_name', 'doctor_full_name', 'doctorFullName', 'doctorName',
+          'requested_by_name', 'requested_by', 'requester_name', 'requester',
+          'created_by_name', 'created_by', 'executante', 'executante_name',
+        ]
+        for (const k of tryKeys) {
+          const v = rd[k]
+          if (v !== undefined && v !== null && String(v).trim() !== '') {
+            doctorName = String(v)
+            break
+          }
+        }
+      }
+
+      // Extrair nome do paciente
+      let patientName = ''
+      if (patient) {
+        patientName = patient.full_name || patient.name || ''
+      }
+
+      // Montar HTML do documento
+      element.innerHTML = `
+        <div style="border-bottom: 2px solid #3b82f6; padding-bottom: 10px; margin-bottom: 20px;">
+          <h1 style="text-align: center; font-size: 24px; font-weight: bold; color: #1f2937; margin: 0;">RELATÓRIO MÉDICO</h1>
+          <p style="text-align: center; font-size: 10px; color: #6b7280; margin: 5px 0;">Data: ${reportDate}</p>
+          ${patientName ? `<p style="text-align: center; font-size: 10px; color: #6b7280; margin: 5px 0;">Paciente: ${patientName}</p>` : ''}
+          ${doctorName ? `<p style="text-align: center; font-size: 10px; color: #6b7280; margin: 5px 0;">Profissional: ${doctorName}</p>` : ''}
+        </div>
+
+        <div style="background-color: #f0f9ff; border: 1px solid #bfdbfe; padding: 10px; margin-bottom: 15px;">
+          <div style="display: flex; gap: 20px;">
+            ${cid ? `<div><p style="font-size: 9px; font-weight: bold; color: #475569; margin: 0 0 5px 0;">CID</p><p style="font-size: 11px; font-weight: bold; color: #1f2937; margin: 0;">${cid}</p></div>` : ''}
+            ${exam ? `<div><p style="font-size: 9px; font-weight: bold; color: #475569; margin: 0 0 5px 0;">EXAME / TIPO</p><p style="font-size: 11px; font-weight: bold; color: #1f2937; margin: 0;">${exam}</p></div>` : ''}
+          </div>
+        </div>
+
+        ${diagnosis ? `
+          <div style="margin-bottom: 20px;">
+            <h2 style="font-size: 14px; font-weight: bold; color: #1e40af; margin: 0 0 10px 0;">DIAGNÓSTICO</h2>
+            <p style="margin-left: 10px; padding-left: 10px; border-left: 2px solid #3b82f6; background-color: #f3f4f6; font-size: 10px; line-height: 1.5; margin: 0;">${diagnosis}</p>
+          </div>
+        ` : ''}
+
+        ${conclusion ? `
+          <div style="margin-bottom: 20px;">
+            <h2 style="font-size: 14px; font-weight: bold; color: #1e40af; margin: 0 0 10px 0;">CONCLUSÃO</h2>
+            <p style="margin-left: 10px; padding-left: 10px; border-left: 2px solid #3b82f6; background-color: #f3f4f6; font-size: 10px; line-height: 1.5; margin: 0;">${conclusion}</p>
+          </div>
+        ` : ''}
+
+        ${notesText ? `
+          <div style="margin-bottom: 20px;">
+            <h2 style="font-size: 14px; font-weight: bold; color: #1e40af; margin: 0 0 10px 0;">NOTAS DO PROFISSIONAL</h2>
+            <p style="margin-left: 10px; padding-left: 10px; border-left: 2px solid #3b82f6; background-color: #f3f4f6; font-size: 10px; line-height: 1.5; margin: 0;">${notesText}</p>
+          </div>
+        ` : ''}
+
+        <div style="margin-top: 30px; padding-top: 10px; border-top: 1px solid #e5e7eb; font-size: 8px; text-align: center; color: #9ca3af;">
+          Documento gerado em ${new Date().toLocaleString('pt-BR')}
+        </div>
+      `
+
+      document.body.appendChild(element)
+
+      // Capturar como canvas
+      const canvas = await html2canvas(element, {
+        scale: 2,
+        useCORS: true,
+        backgroundColor: '#ffffff',
+      })
+
+      document.body.removeChild(element)
+
+      // Converter para PDF
+      const imgData = canvas.toDataURL('image/png')
+      const pdf = new jsPDF({
+        orientation: 'portrait',
+        unit: 'mm',
+        format: 'a4',
+      })
+
+      const imgWidth = 210 // A4 width in mm
+      const pageHeight = 297 // A4 height in mm
+      const imgHeight = (canvas.height * imgWidth) / canvas.width
+      let heightLeft = imgHeight
+
+      let position = 0
+
+      while (heightLeft >= 0) {
+        pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight)
+        heightLeft -= pageHeight
+        position -= pageHeight
+        if (heightLeft > 0) {
+          pdf.addPage()
+        }
+      }
+
+      // Download
+      pdf.save(`laudo-${reportDate}-${doctorName || 'profissional'}.pdf`)
+    } catch (error) {
+      console.error('Erro ao gerar PDF:', error)
+      alert('Erro ao gerar PDF. Tente novamente.')
+    }
+  }
+
+  if (loading) {
+    return (
+      <ProtectedRoute>
+        <div className="flex items-center justify-center min-h-screen bg-background">
+          <div className="text-lg text-muted-foreground">Carregando laudo...</div>
+        </div>
+      </ProtectedRoute>
+    )
+  }
+
+  if (error || !report) {
+    return (
+      <ProtectedRoute>
+        <div className="flex flex-col items-center justify-center min-h-screen bg-background">
+          <div className="text-lg text-red-500 mb-4">{error || 'Laudo não encontrado.'}</div>
+          <Button onClick={() => router.back()} variant="outline">
+            <ArrowLeft className="w-4 h-4 mr-2" />
+            Voltar
+          </Button>
+        </div>
+      </ProtectedRoute>
+    )
+  }
+
+  // Extract fields with fallbacks
+  const reportDate = new Date(report.report_date || report.created_at || Date.now()).toLocaleDateString('pt-BR')
+  const cid = report.cid ?? report.cid_code ?? report.cidCode ?? report.cie ?? ''
+  const exam = report.exam ?? report.exame ?? report.especialidade ?? report.report_type ?? ''
+  const diagnosis = report.diagnosis ?? report.diagnostico ?? report.diagnosis_text ?? report.diagnostico_text ?? ''
+  const conclusion = report.conclusion ?? report.conclusao ?? report.conclusion_text ?? report.conclusao_text ?? ''
+  const notesHtml = report.content_html ?? report.conteudo_html ?? report.contentHtml ?? null
+  const notesText = report.content ?? report.body ?? report.conteudo ?? report.notes ?? report.observacoes ?? ''
+  
+  // Extract doctor name with multiple fallbacks
+  let doctorName = ''
+  if (doctor) {
+    doctorName = doctor.full_name || doctor.name || doctor.fullName || doctor.doctor_name || ''
+  }
+  if (!doctorName) {
+    const rd = report as any
+    const tryKeys = [
+      'doctor_name', 'doctor_full_name', 'doctorFullName', 'doctorName',
+      'requested_by_name', 'requested_by', 'requester_name', 'requester',
+      'created_by_name', 'created_by', 'executante', 'executante_name',
+    ]
+    for (const k of tryKeys) {
+      const v = rd[k]
+      if (v !== undefined && v !== null && String(v).trim() !== '') {
+        doctorName = String(v)
+        break
+      }
+    }
+  }
+
+  return (
+    <ProtectedRoute>
+      <div className={`min-h-screen transition-colors duration-300 ${
+        isDark 
+          ? 'bg-gradient-to-br from-slate-950 to-slate-900' 
+          : 'bg-gradient-to-br from-slate-50 to-slate-100'
+      }`}>
+        {/* Header Toolbar */}
+        <div className={`sticky top-0 z-40 transition-colors duration-300 print:hidden ${
+          isDark 
+            ? 'bg-slate-800 border-slate-700' 
+            : 'bg-white border-slate-200'
+        } border-b shadow-md`}>
+          <div className="flex items-center justify-between px-6 py-4">
+            {/* Left Section */}
+            <div className="flex items-center gap-4">
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={() => router.back()}
+                className={`${
+                  isDark 
+                    ? 'text-slate-300 hover:bg-slate-700 hover:text-white' 
+                    : 'text-slate-600 hover:bg-slate-100 hover:text-slate-900'
+                }`}
+              >
+                <ArrowLeft className="w-5 h-5" />
+              </Button>
+              <div className={`h-8 w-px ${isDark ? 'bg-slate-600' : 'bg-slate-300'}`} />
+              <div>
+                <p className={`text-xs font-semibold uppercase tracking-wide ${
+                  isDark ? 'text-slate-400' : 'text-slate-500'
+                }`}>Laudo Médico</p>
+                <p className={`text-lg font-bold ${isDark ? 'text-white' : 'text-slate-900'}`}>
+                  {doctorName || 'Profissional'}
+                </p>
+              </div>
+            </div>
+
+            {/* Right Section */}
+            <div className="flex items-center gap-2">
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={handlePrint}
+                title="Imprimir"
+                className={`${
+                  isDark 
+                    ? 'text-slate-300 hover:bg-slate-700 hover:text-white' 
+                    : 'text-slate-600 hover:bg-slate-100 hover:text-slate-900'
+                }`}
+              >
+                <Printer className="w-5 h-5" />
+              </Button>
+            </div>
+          </div>
+        </div>
+
+        {/* Main Content Area */}
+        <div className="flex justify-center py-6 sm:py-8 md:py-12 px-2 sm:px-4 print:py-0 print:px-0 min-h-[calc(100vh-80px)] print:min-h-screen">
+          {/* Document Container */}
+          <div className={`w-full max-w-2xl sm:max-w-3xl md:max-w-4xl transition-colors duration-300 shadow-lg sm:shadow-xl rounded-lg sm:rounded-xl overflow-hidden print:shadow-none print:rounded-none print:max-w-full ${
+            isDark ? 'bg-slate-800' : 'bg-white'
+          }`}>
+            {/* Document Content */}
+            <div className="p-4 sm:p-8 md:p-12 lg:p-16 space-y-4 sm:space-y-6 md:space-y-8 print:p-12 print:space-y-6">
+              
+              {/* Title */}
+              <div className={`text-center mb-6 sm:mb-8 md:mb-12 pb-4 sm:pb-6 md:pb-8 border-b-2 ${
+                isDark ? 'border-blue-900' : 'border-blue-200'
+              }`}>
+                <h1 className={`text-2xl sm:text-3xl md:text-4xl font-bold mb-2 sm:mb-4 ${isDark ? 'text-white' : 'text-slate-900'}`}>
+                  RELATÓRIO MÉDICO
+                </h1>
+                <div className={`text-xs sm:text-sm space-y-0.5 sm:space-y-1 ${isDark ? 'text-slate-300' : 'text-slate-700'}`}>
+                  <p className="font-medium">
+                    <span className={isDark ? 'text-slate-400' : 'text-slate-500'}>Data:</span> {reportDate}
+                  </p>
+                  {doctorName && (
+                    <p className="font-medium">
+                      <span className={isDark ? 'text-slate-400' : 'text-slate-500'}>Profissional:</span>{' '}
+                      <strong className={isDark ? 'text-blue-400' : 'text-blue-700'}>{doctorName}</strong>
+                    </p>
+                  )}
+                </div>
+              </div>
+
+              {/* Patient/Header Info */}
+              <div className={`rounded-lg p-3 sm:p-4 md:p-6 border transition-colors duration-300 ${
+                isDark 
+                  ? 'bg-slate-900 border-slate-700' 
+                  : 'bg-slate-50 border-slate-200'
+              }`}>
+                <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4 md:gap-6 text-xs sm:text-sm">
+                  {patient && (
+                    <div>
+                      <label className={`text-xs uppercase font-semibold tracking-wide block mb-1.5 sm:mb-2 ${
+                        isDark ? 'text-slate-400' : 'text-slate-600'
+                      }`}>Paciente</label>
+                      <p className={`text-base sm:text-lg font-semibold ${isDark ? 'text-white' : 'text-slate-900'}`}>
+                        {patient.full_name || patient.name || 'N/A'}
+                      </p>
+                    </div>
+                  )}
+                  {cid && (
+                    <div>
+                      <label className={`text-xs uppercase font-semibold tracking-wide block mb-1.5 sm:mb-2 ${
+                        isDark ? 'text-slate-400' : 'text-slate-600'
+                      }`}>CID</label>
+                      <p className={`text-base sm:text-lg font-semibold ${isDark ? 'text-white' : 'text-slate-900'}`}>
+                        {cid}
+                      </p>
+                    </div>
+                  )}
+                  {exam && (
+                    <div>
+                      <label className={`text-xs uppercase font-semibold tracking-wide block mb-1.5 sm:mb-2 ${
+                        isDark ? 'text-slate-400' : 'text-slate-600'
+                      }`}>Exame / Tipo</label>
+                      <p className={`text-base sm:text-lg font-semibold ${isDark ? 'text-white' : 'text-slate-900'}`}>
+                        {exam}
+                      </p>
+                    </div>
+                  )}
+                </div>
+              </div>
+
+              {/* Diagnosis Section */}
+              {diagnosis && (
+                <div className="space-y-2 sm:space-y-3">
+                  <h2 className={`text-lg sm:text-xl font-bold uppercase tracking-wide ${
+                    isDark ? 'text-blue-400' : 'text-blue-700'
+                  }`}>Diagnóstico</h2>
+                  <div className={`whitespace-pre-wrap text-sm sm:text-base leading-relaxed rounded-lg p-3 sm:p-4 border-l-4 border-blue-500 transition-colors duration-300 ${
+                    isDark 
+                      ? 'bg-slate-900 text-slate-200' 
+                      : 'bg-blue-50 text-slate-800'
+                  }`}>
+                    {diagnosis}
+                  </div>
+                </div>
+              )}
+
+              {/* Conclusion Section */}
+              {conclusion && (
+                <div className="space-y-2 sm:space-y-3">
+                  <h2 className={`text-lg sm:text-xl font-bold uppercase tracking-wide ${
+                    isDark ? 'text-blue-400' : 'text-blue-700'
+                  }`}>Conclusão</h2>
+                  <div className={`whitespace-pre-wrap text-sm sm:text-base leading-relaxed rounded-lg p-3 sm:p-4 border-l-4 border-blue-500 transition-colors duration-300 ${
+                    isDark 
+                      ? 'bg-slate-900 text-slate-200' 
+                      : 'bg-blue-50 text-slate-800'
+                  }`}>
+                    {conclusion}
+                  </div>
+                </div>
+              )}
+
+              {/* Notes/Content Section */}
+              {(notesHtml || notesText) && (
+                <div className="space-y-2 sm:space-y-3">
+                  <h2 className={`text-lg sm:text-xl font-bold uppercase tracking-wide ${
+                    isDark ? 'text-blue-400' : 'text-blue-700'
+                  }`}>Notas do Profissional</h2>
+                  {notesHtml ? (
+                    <div 
+                      className={`prose prose-sm max-w-none rounded-lg p-3 sm:p-4 border-l-4 border-blue-500 transition-colors duration-300 text-xs sm:text-sm ${
+                        isDark 
+                          ? 'prose-invert bg-slate-900 text-slate-200' 
+                          : 'bg-blue-50 text-slate-800'
+                      }`}
+                      dangerouslySetInnerHTML={{ __html: String(notesHtml) }}
+                    />
+                  ) : (
+                    <div className={`whitespace-pre-wrap text-sm sm:text-base leading-relaxed rounded-lg p-3 sm:p-4 border-l-4 border-blue-500 transition-colors duration-300 ${
+                      isDark 
+                        ? 'bg-slate-900 text-slate-200' 
+                        : 'bg-blue-50 text-slate-800'
+                    }`}>
+                      {notesText}
+                    </div>
+                  )}
+                </div>
+              )}
+
+              {/* Signature Section */}
+              {report.doctor_signature && (
+                <div className={`pt-6 sm:pt-8 border-t-2 ${isDark ? 'border-slate-600' : 'border-slate-300'}`}>
+                  <div className="flex flex-col items-center gap-3 sm:gap-4">
+                    <div className={`rounded-lg p-2 sm:p-4 border transition-colors duration-300 ${
+                      isDark 
+                        ? 'bg-slate-900 border-slate-600' 
+                        : 'bg-slate-100 border-slate-300'
+                    }`}>
+                      <Image
+                        src={report.doctor_signature}
+                        alt="Assinatura do profissional"
+                        width={150}
+                        height={100}
+                        className="h-16 sm:h-20 w-auto"
+                      />
+                    </div>
+                    {doctorName && (
+                      <div className="text-center">
+                        <p className={`text-xs sm:text-sm font-bold ${isDark ? 'text-white' : 'text-slate-900'}`}>
+                          {doctorName}
+                        </p>
+                        {doctor?.crm && (
+                          <p className={`text-xs mt-0.5 sm:mt-1 ${isDark ? 'text-slate-400' : 'text-slate-600'}`}>
+                            CRM: {doctor.crm}
+                          </p>
+                        )}
+                      </div>
+                    )}
+                  </div>
+                </div>
+              )}
+
+              {/* Footer */}
+              <div className={`pt-8 border-t-2 text-center space-y-2 ${isDark ? 'border-slate-600' : 'border-slate-300'}`}>
+                <p className={`text-xs ${isDark ? 'text-slate-400' : 'text-slate-600'}`}>
+                  Documento gerado em {new Date().toLocaleString('pt-BR')}
+                </p>
+              </div>
+
+            </div>
+          </div>
+        </div>
+      </div>
+    </ProtectedRoute>
+  )
+}

susconecta/app/layout.tsx

@@ -0,0 +1,34 @@
+import type React from "react"
+import type { Metadata } from "next"
+import { AuthProvider } from "@/hooks/useAuth"
+import { ThemeProvider } from "@/components/providers/theme-provider"
+import "./globals.css"
+
+export const metadata: Metadata = {
+  title: "MediConnect - Conectando Pacientes e Profissionais de Saúde",
+  description:
+    "Plataforma inovadora que conecta pacientes, clínicas, e médicos de forma prática, segura e humanizada. Experimente o futuro dos agendamentos médicos.",
+  keywords: "saúde, médicos, pacientes, agendamento, telemedicina, SUS",
+  generator: 'v0.app'
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="pt-BR" className="antialiased" suppressHydrationWarning>
+      <head>
+        <meta charSet="utf-8" />
+      </head>
+      <body style={{ fontFamily: "var(--font-geist-sans)" }}>
+        <ThemeProvider attribute="class" defaultTheme="light" enableSystem={false}>
+          <AuthProvider>
+            {children}
+          </AuthProvider>
+        </ThemeProvider>
+      </body>
+    </html>
+  )
+}

susconecta/app/paciente/layout.tsx

@@ -0,0 +1,11 @@
+import type { ReactNode } from "react";
+import { ChatWidget } from "@/components/features/pacientes/chat-widget";
+
+export default function PacienteLayout({ children }: { children: ReactNode }) {
+  return (
+    <>
+      {children}
+      <ChatWidget />
+    </>
+  );
+}

susconecta/app/paciente/resultados/page.tsx

@@ -0,0 +1,10 @@
+import React, { Suspense } from 'react'
+import ResultadosClient from './ResultadosClient'
+
+export default function Page() {
+  return (
+    <Suspense fallback={<div className="min-h-screen flex items-center justify-center"><span>Carregando...</span></div>}>
+      <ResultadosClient />
+    </Suspense>
+  )
+}

susconecta/app/page.tsx

@@ -0,0 +1,15 @@
+import { Header } from "@/components/layout/header"
+import { HeroSection } from "@/components/features/general/hero-section"
+import { Footer } from "@/components/layout/footer"
+
+export default function HomePage() {
+  return (
+    <div className="min-h-screen flex flex-col">
+      <Header />
+      <main className="flex-1">
+        <HeroSection />
+      </main>
+      <Footer />
+    </div>
+  )
+}