197 changed files with 1549 additions and 25390 deletions
--- a/.github/workflows/notification-worker.yml
+++ b/.github/workflows/notification-worker.yml
@ -1,23 +0,0 @@
 name: Notification Worker Cron
 on:
  schedule:
    # Executa a cada 5 minutos
    - cron: "*/5 * * * *"
  workflow_dispatch: # Permite execução manual
 jobs:
  process-notifications:
    runs-on: ubuntu-latest
    steps:
      - name: Process notification queue
        run: |
          curl -X POST \
            -H "Authorization: Bearer ${{ secrets.SUPABASE_SERVICE_ROLE_KEY }}" \
            -H "Content-Type: application/json" \
            https://etblfypcxxtvvuqjkrgd.supabase.co/functions/v1/notifications-worker
        continue-on-error: true
      - name: Log completion
        run: echo "Notification worker completed at $(date)"
--- a/ANALISE_ROADMAP_COMPLETO.md
+++ b/ANALISE_ROADMAP_COMPLETO.md
@ -1,322 +0,0 @@
 # 📋 ANÁLISE COMPLETA DO ROADMAP - MediConnect
 ## ✅ FASE 1: Quick Wins (100% COMPLETO)
 ### Planejado no Roadmap:
 | Tarefa            | Esforço | Status      |
 | ----------------- | ------- | ----------- |
 | Design Tokens     | 4h      | ✅ COMPLETO |
 | Skeleton Loaders  | 6h      | ✅ COMPLETO |
 | Empty States      | 4h      | ✅ COMPLETO |
 | React Query Setup | 8h      | ✅ COMPLETO |
 | Check-in Básico   | 6h      | ✅ COMPLETO |
 ### O Que Foi Entregue:
 ✅ **Design Tokens** (4h) - `src/styles/design-system.css`
 - Colors: primary, secondary, accent
 - Spacing: 8px grid
 - Typography: font-sans, font-display
 - Shadows, borders, transitions
 ✅ **Skeleton Loaders** (6h) - `src/components/ui/Skeleton.tsx`
 - PatientCardSkeleton (8 props diferentes)
 - AppointmentCardSkeleton
 - DoctorCardSkeleton
 - MetricCardSkeleton
 - Usado em 5+ componentes
 ✅ **Empty States** (4h) - `src/components/ui/EmptyState.tsx`
 - EmptyPatientList
 - EmptyAvailability
 - EmptyAppointmentList
 - Ilustrações + mensagens contextuais
 ✅ **React Query Setup** (8h)
 - QueryClientProvider em `main.tsx`
 - 21 hooks criados em `src/hooks/`
 - DevTools configurado
 - Cache strategies definidas
 ✅ **Check-in Básico** (6h)
 - `src/components/consultas/CheckInButton.tsx`
 - Integrado em SecretaryAppointmentList
 - Mutation com invalidação automática
 - Toast feedback
 **TOTAL FASE 1**: 28h planejadas → **28h entregues** ✅
 ---
 ## ✅ FASE 2: Features Core (83% COMPLETO)
 ### Planejado no Roadmap:
 | Tarefa                      | Esforço | Status                |
 | --------------------------- | ------- | --------------------- |
 | Sala de Espera Virtual      | 12h     | ✅ COMPLETO           |
 | Lista de Espera             | 16h     | ✅ COMPLETO (Backend) |
 | Confirmação 1-Clique        | 8h      | ❌ NÃO IMPLEMENTADO   |
 | Command Palette             | 8h      | ❌ NÃO IMPLEMENTADO   |
 | Code-Splitting PainelMedico | 8h      | ✅ COMPLETO           |
 | Dashboard KPIs              | 12h     | ✅ COMPLETO           |
 ### O Que Foi Entregue:
 ✅ **Sala de Espera Virtual** (12h)
 - `src/components/consultas/WaitingRoom.tsx`
 - Auto-refresh 30 segundos
 - Badge contador em tempo real
 - Lista de pacientes aguardando
 - Botão "Iniciar Atendimento"
 - Integrada no PainelMedico
 ✅ **Lista de Espera** (16h)
 - **Backend completo**:
  - Edge Function `/waitlist` rodando em produção
  - Tabela `waitlist` no Supabase
  - `waitlistService.ts` criado
  - Types completos
 - **Frontend**: Falta UI para paciente/secretária
 - **Funcionalidades backend**:
  - Criar entrada na lista
  - Listar por paciente/médico
  - Remover da lista
  - Auto-notificação quando vaga disponível
 ✅ **Code-Splitting PainelMedico** (8h)
 - DashboardTab lazy loaded
 - Suspense com fallback
 - Bundle optimization
 - Pattern estabelecido para outras tabs
 ✅ **Dashboard KPIs** (12h)
 - `src/components/dashboard/MetricCard.tsx`
 - `src/hooks/useMetrics.ts`
 - 6 métricas em tempo real
 - Auto-refresh 5 minutos
 - Trends visuais
 ❌ **Confirmação 1-Clique** (8h - NÃO IMPLEMENTADO)
 - **O que falta**:
  - Botão "Confirmar" em lista de consultas
  - Mutation para atualizar status
  - SMS/Email de confirmação
  - Badge "Aguardando confirmação"
 - **Estimativa**: 6h (backend já existe)
 ❌ **Command Palette (Ctrl+K)** (8h - NÃO IMPLEMENTADO)
 - **O que falta**:
  - Modal com Ctrl+K
  - Fuzzy search com fuse.js
  - Ações rápidas: Nova Consulta, Buscar Paciente
  - Navegação por teclado
 - **Estimativa**: 8h
 **TOTAL FASE 2**: 64h planejadas → **48h entregues** (75%)
 ---
 ## ⚠️ FASE 3: Analytics & Otimização (0% COMPLETO)
 ### Planejado no Roadmap:
 | Tarefa                    | Esforço | Status              |
 | ------------------------- | ------- | ------------------- |
 | Heatmap Ocupação          | 10h     | ❌ NÃO IMPLEMENTADO |
 | Reagendamento Inteligente | 10h     | ❌ NÃO IMPLEMENTADO |
 | PWA Básico                | 10h     | ❌ NÃO IMPLEMENTADO |
 | Modo Escuro Auditoria     | 6h      | ❌ NÃO IMPLEMENTADO |
 ### Análise:
 ❌ **Heatmap Ocupação** (10h)
 - **O que falta**:
  - Visualização de grade semanal
  - Color coding por ocupação
  - useOccupancyData já existe!
  - Integrar com Recharts/Chart.js
 - **Estimativa**: 8h (hook já pronto)
 ❌ **Reagendamento Inteligente** (10h)
 - **O que falta**:
  - Sugestão de horários livres
  - Botão "Reagendar" em consultas canceladas
  - Algoritmo de horários próximos
  - Modal com opções
 - **Estimativa**: 10h
 ❌ **PWA Básico** (10h)
 - **O que falta**:
  - Service Worker com Workbox
  - manifest.json
  - Install prompt
  - Offline fallback
  - Cache strategies
 - **Estimativa**: 12h
 ❌ **Modo Escuro Auditoria** (6h)
 - **Status**: Dark mode já funciona!
 - **O que falta**: Auditoria completa de 100% das telas
 - **Estimativa**: 4h (maioria já implementada)
 **TOTAL FASE 3**: 36h planejadas → **0h entregues** (0%)
 ---
 ## 🎯 FASE 4: Diferenciais (0% - FUTURO)
 ### Planejado (Opcional):
 - Teleconsulta integrada (tabela criada, falta UI)
 - Previsão de demanda com ML
 - Auditoria completa LGPD
 - Integração calendários externos
 - Sistema de pagamentos
 **Status**: Não iniciado (planejado para futuro)
 ---
 ## 📊 RESUMO EXECUTIVO
 ### Horas Trabalhadas por Fase:
 | Fase       | Planejado | Entregue | % Completo  |
 | ---------- | --------- | -------- | ----------- |
 | **Fase 1** | 28h       | 28h      | ✅ **100%** |
 | **Fase 2** | 64h       | 48h      | ⚠️ **75%**  |
 | **Fase 3** | 36h       | 0h       | ❌ **0%**   |
 | **Fase 4** | -         | 0h       | -           |
 | **TOTAL**  | 128h      | 76h      | **59%**     |
 ### Migrações React Query (Bonus):
 ✅ **21 hooks criados** (+30h além do roadmap):
 - DisponibilidadeMedico migrado
 - ListaPacientes migrado
 - useAppointments, usePatients, useAvailability
 - 18 outros hooks em `src/hooks/`
 ### Backend Edge Functions (Bonus):
 ✅ **4 Edge Functions** (+20h além do roadmap):
 - `/appointments` - Mescla dados externos
 - `/waitlist` - Lista de espera
 - `/notifications` - Fila de SMS/Email
 - `/analytics` - KPIs em cache
 **TOTAL REAL ENTREGUE**: 76h roadmap + 50h extras = **126h** ✅
 ---
 ## ❌ O QUE FALTA DO ROADMAP ORIGINAL
 ### Prioridade ALTA (Fase 2 incompleta):
 1. **Confirmação 1-Clique** (6h)
   - Crítico para reduzir no-show
   - Backend já existe (notificationService)
   - Falta apenas UI
 2. **Command Palette Ctrl+K** (8h)
   - Melhora produtividade
   - Navegação rápida
   - Diferencial UX
 ### Prioridade MÉDIA (Fase 3 completa):
 3. **Heatmap Ocupação** (8h)
   - Hook useOccupancyData já existe
   - Só falta visualização
 4. **Modo Escuro Auditoria** (4h)
   - 90% já funciona
   - Testar todas as telas
 5. **Reagendamento Inteligente** (10h)
   - Alto valor para pacientes
   - Reduz carga da secretária
 6. **PWA Básico** (12h)
   - Offline capability
   - App instalável
   - Push notifications
 ---
 ## 🚀 RECOMENDAÇÕES
 ### Se o objetivo é entregar 100% do Roadmap (Fases 1-3):
 **SPRINT FINAL** (48h):
 1. ✅ Confirmação 1-Clique (6h) - **Prioridade 1**
 2. ✅ Command Palette (8h) - **Prioridade 2**
 3. ✅ Heatmap Ocupação (8h) - **Prioridade 3**
 4. ✅ Modo Escuro Auditoria (4h) - **Prioridade 4**
 5. ✅ Reagendamento Inteligente (10h) - **Prioridade 5**
 6. ✅ PWA Básico (12h) - **Prioridade 6**
 **Após este sprint**: 100% Fases 1-3 completas ✅
 ### Se o objetivo é focar em valor máximo:
 **TOP 3 Features Faltando**:
 1. **Confirmação 1-Clique** (6h) - Reduz no-show em 30%
 2. **Heatmap Ocupação** (8h) - Visualização de dados já calculados
 3. **Command Palette** (8h) - Produtividade secretária/médico
 **Total**: 22h → MVP turbinado 🚀
 ---
 ## ✅ CONCLUSÃO
 **Status Atual**: MediConnect está com **76h do roadmap implementadas** + **50h de funcionalidades extras** (React Query hooks + Backend próprio).
 **Fases Completas**:
 - ✅ Fase 1: 100% (Quick Wins)
 - ⚠️ Fase 2: 75% (Features Core) - Falta Confirmação + Command Palette
 - ❌ Fase 3: 0% (Analytics & Otimização)
 **Sistema está pronto para produção?** ✅ **SIM**
 - Check-in funcionando
 - Sala de espera funcionando
 - Dashboard com 6 KPIs
 - React Query cache em 100% das queries
 - Backend Edge Functions rodando
 - 0 erros TypeScript
 **Vale completar o roadmap?** ✅ **SIM, se houver tempo**
 - Confirmação 1-Clique tem ROI altíssimo (6h para reduzir 30% no-show)
 - Heatmap usa dados já calculados (8h de implementação)
 - Command Palette melhora produtividade (8h bem investidas)
 **Próximo passo sugerido**: Implementar as 3 features de maior valor (22h) e declarar roadmap completo! 🎯
--- a/ARQUITETURA_DEFINITIVA.md
+++ b/ARQUITETURA_DEFINITIVA.md
@ -1,293 +0,0 @@
 # 🎯 ARQUITETURA DEFINITIVA: SUPABASE EXTERNO vs NOSSO SUPABASE
 ## 📋 REGRA DE OURO
 **Supabase Externo (Fechado da Empresa):** CRUD básico de appointments, doctors, patients, reports  
 **Nosso Supabase:** Features EXTRAS, KPIs, tracking, gamificação, auditoria, preferências
 ---
 ## 🔵 SUPABASE EXTERNO (FONTE DA VERDADE)
 ### Tabelas que JÁ EXISTEM no Supabase Externo:
 - ✅ `appointments` - CRUD completo de agendamentos
 - ✅ `doctors` - Cadastro de médicos
 - ✅ `patients` - Cadastro de pacientes
 - ✅ `reports` - Relatórios médicos básicos
 - ✅ `availability` (provavelmente) - Disponibilidade dos médicos
 - ✅ Dados de autenticação básica
 ### Endpoints que PUXAM DO EXTERNO:
 **MÓDULO 2.1 - Appointments (EXTERNO):**
 - `/appointments/list` → **Puxa de lá + mescla com nossos logs**
 - `/appointments/create` → **Cria LÁ + grava log aqui**
 - `/appointments/update` → **Atualiza LÁ + grava log aqui**
 - `/appointments/cancel` → **Cancela LÁ + notifica waitlist aqui**
 - `/appointments/confirm` → **Confirma LÁ + grava log aqui**
 - `/appointments/checkin` → **Atualiza LÁ + cria registro de checkin aqui**
 - `/appointments/no-show` → **Marca LÁ + atualiza KPIs aqui**
 **MÓDULO 2.2 - Availability (DEPENDE):**
 - `/availability/list` → **SE existir LÁ, puxa de lá. SENÃO, cria tabela aqui**
 - `/availability/create` → **Cria onde for o source of truth**
 - `/availability/update` → **Atualiza onde for o source of truth**
 - `/availability/delete` → **Deleta onde for o source of truth**
 **MÓDULO 6 - Reports (EXTERNO):**
 - `/reports/list-extended` → **Puxa LÁ + adiciona filtros extras**
 - `/reports/export/pdf` → **Puxa dados LÁ + gera PDF aqui**
 - `/reports/export/csv` → **Puxa dados LÁ + gera CSV aqui**
 **MÓDULO 8 - Patients (EXTERNO):**
 - `/patients/history` → **Puxa appointments LÁ + histórico estendido aqui**
 - `/patients/portal` → **Mescla dados LÁ + teleconsulta aqui**
 ---
 ## 🟢 NOSSO SUPABASE (FEATURES EXTRAS)
 ### Tabelas que criamos para COMPLEMENTAR:
 **✅ Tracking & Auditoria:**
 - `user_sync` - Mapear external_user_id → local_user_id
 - `user_actions` - Log de todas as ações dos usuários
 - `user_sessions` - Sessões de login/logout
 - `audit_actions` - Auditoria detalhada (MÓDULO 13)
 - `access_log` - Quem acessou o quê (LGPD)
 - `patient_journey` - Jornada do paciente
 **✅ Preferências & UI:**
 - `user_preferences` - Modo escuro, fonte dislexia, acessibilidade (MÓDULO 1 + 11)
 - `patient_preferences` - Horários favoritos, comunicação (MÓDULO 8)
 **✅ Agenda Extras:**
 - `availability_exceptions` - Feriados, exceções (MÓDULO 2.3)
 - `doctor_availability` - SE não existir no externo (MÓDULO 2.2)
 **✅ Fila & Waitlist:**
 - `waitlist` - Lista de espera (MÓDULO 3)
 - `virtual_queue` - Fila virtual da recepção (MÓDULO 4)
 **✅ Notificações:**
 - `notifications_queue` - Fila de SMS/Email/WhatsApp (MÓDULO 5)
 - `notification_subscriptions` - Opt-in/opt-out (MÓDULO 5)
 **✅ Analytics & KPIs:**
 - `kpi_cache` / `analytics_cache` - Cache de métricas (MÓDULO 10)
 - `doctor_stats` - Ocupação, no-show %, atraso (MÓDULO 7)
 **✅ Gamificação:**
 - `doctor_badges` - Conquistas dos médicos (MÓDULO 7)
 - `patient_points` - Pontos dos pacientes (gamificação)
 - `patient_streaks` - Sequências de consultas
 **✅ Teleconsulta:**
 - `teleconsult_sessions` - Salas Jitsi/WebRTC (MÓDULO 9)
 **✅ Integridade:**
 - `report_integrity` - Hashes SHA256 anti-fraude (MÓDULO 6)
 **✅ Sistema:**
 - `feature_flags` - Ativar/desativar features (MÓDULO 14)
 - `patient_extended_history` - Histórico detalhado (MÓDULO 8)
 ### Endpoints 100% NOSSOS:
 **MÓDULO 1 - User Preferences:**
 - `/user/info` → **Busca role e permissões AQUI**
 - `/user/update-preferences` → **Salva AQUI (user_preferences)**
 **MÓDULO 2.3 - Exceptions:**
 - `/exceptions/list` → **Lista DAQUI (availability_exceptions)**
 - `/exceptions/create` → **Cria AQUI**
 - `/exceptions/delete` → **Deleta AQUI**
 **MÓDULO 2.2 - Availability Slots:**
 - `/availability/slots` → **Gera slots baseado em disponibilidade + exceções DAQUI**
 **MÓDULO 3 - Waitlist:**
 - `/waitlist/add` → **Adiciona AQUI**
 - `/waitlist/list` → **Lista DAQUI**
 - `/waitlist/match` → **Busca match AQUI**
 - `/waitlist/remove` → **Remove DAQUI**
 **MÓDULO 4 - Virtual Queue:**
 - `/queue/list` → **Lista DAQUI (virtual_queue)**
 - `/queue/checkin` → **Cria registro AQUI**
 - `/queue/advance` → **Avança fila AQUI**
 **MÓDULO 5 - Notifications:**
 - `/notifications/enqueue` → **Enfileira AQUI (notifications_queue)**
 - `/notifications/process` → **Worker processa fila DAQUI**
 - `/notifications/confirm` → **Confirma AQUI**
 - `/notifications/subscription` → **Gerencia AQUI (notification_subscriptions)**
 **MÓDULO 6 - Report Integrity:**
 - `/reports/integrity-check` → **Verifica hash AQUI (report_integrity)**
 **MÓDULO 7 - Doctor Stats:**
 - `/doctor/summary` → **Puxa stats DAQUI (doctor_stats) + appointments LÁ**
 - `/doctor/occupancy` → **Calcula AQUI (doctor_stats)**
 - `/doctor/delay-suggestion` → **Algoritmo AQUI (doctor_stats)**
 - `/doctor/badges` → **Lista DAQUI (doctor_badges)**
 **MÓDULO 8 - Patient Preferences:**
 - `/patients/preferences` → **Salva/busca AQUI (patient_preferences)**
 **MÓDULO 9 - Teleconsulta:**
 - `/teleconsult/start` → **Cria sessão AQUI (teleconsult_sessions)**
 - `/teleconsult/status` → **Consulta AQUI**
 - `/teleconsult/end` → **Finaliza AQUI**
 **MÓDULO 10 - Analytics:**
 - `/analytics/summary` → **Puxa appointments LÁ + calcula KPIs AQUI**
 - `/analytics/heatmap` → **Processa appointments LÁ + cache AQUI**
 - `/analytics/demand-curve` → **Processa LÁ + cache AQUI**
 - `/analytics/ranking-reasons` → **Agrega LÁ + cache AQUI**
 - `/analytics/monthly-no-show` → **Filtra LÁ + cache AQUI**
 - `/analytics/specialty-heatmap` → **Usa doctor_stats DAQUI**
 - `/analytics/custom-report` → **Query builder sobre dados LÁ + AQUI**
 **MÓDULO 11 - Accessibility:**
 - `/accessibility/preferences` → **Salva AQUI (user_preferences)**
 **MÓDULO 12 - LGPD:**
 - `/privacy/request-export` → **Exporta dados LÁ + AQUI**
 - `/privacy/request-delete` → **Anonimiza LÁ + deleta AQUI**
 - `/privacy/access-log` → **Consulta AQUI (access_log)**
 **MÓDULO 13 - Auditoria:**
 - `/audit/log` → **Grava AQUI (audit_actions)**
 - `/audit/list` → **Lista DAQUI (audit_actions)**
 **MÓDULO 14 - Feature Flags:**
 - `/flags/list` → **Lista DAQUI (feature_flags)**
 - `/flags/update` → **Atualiza AQUI**
 **MÓDULO 15 - System:**
 - `/system/health-check` → **Verifica saúde LÁ + AQUI**
 - `/system/cache-rebuild` → **Recalcula cache AQUI**
 - `/system/cron-runner` → **Executa jobs AQUI**
 ---
 ## 🔄 FLUXO DE DADOS CORRETO
 ### Exemplo 1: Criar Appointment
 ```
 1. Frontend → Edge Function /appointments/create
 2. Edge Function → Supabase EXTERNO (cria appointment)
 3. Edge Function → Nosso Supabase (grava user_actions log)
 4. Edge Function → Nosso Supabase (enfileira notificação)
 5. Retorna sucesso
 ```
 ### Exemplo 2: Listar Appointments
 ```
 1. Frontend → Edge Function /appointments/list
 2. Edge Function → Supabase EXTERNO (busca appointments)
 3. Edge Function → Nosso Supabase (busca logs de checkin/no-show)
 4. Edge Function → Mescla dados
 5. Retorna lista completa
 ```
 ### Exemplo 3: Dashboard do Médico
 ```
 1. Frontend → Edge Function /doctor/summary
 2. Edge Function → Nosso Supabase (busca doctor_stats)
 3. Edge Function → Supabase EXTERNO (busca appointments de hoje)
 4. Edge Function → Nosso Supabase (busca badges)
 5. Retorna dashboard completo
 ```
 ### Exemplo 4: Preferências do Usuário
 ```
 1. Frontend → Edge Function /user/update-preferences
 2. Edge Function → Nosso Supabase APENAS (salva user_preferences)
 3. Retorna sucesso
 ```
 ---
 ## ✅ CHECKLIST DE IMPLEMENTAÇÃO
 ### O que DEVE usar externalRest():
 - ✅ Criar/listar/atualizar/deletar appointments
 - ✅ Buscar dados de doctors/patients/reports
 - ✅ Atualizar status de appointments
 - ✅ Buscar availability (se existir lá)
 ### O que DEVE usar supabase (nosso):
 - ✅ user_preferences, patient_preferences
 - ✅ user_actions, audit_actions, access_log
 - ✅ user_sync, user_sessions, patient_journey
 - ✅ availability_exceptions, doctor_availability (se for nossa tabela)
 - ✅ waitlist, virtual_queue
 - ✅ notifications_queue, notification_subscriptions
 - ✅ kpi_cache, analytics_cache, doctor_stats
 - ✅ doctor_badges, patient_points, patient_streaks
 - ✅ teleconsult_sessions
 - ✅ report_integrity
 - ✅ feature_flags
 - ✅ patient_extended_history
 ### O que DEVE mesclar (LÁ + AQUI):
 - ✅ /appointments/list (appointments LÁ + logs AQUI)
 - ✅ /doctor/summary (appointments LÁ + stats AQUI)
 - ✅ /patients/history (appointments LÁ + extended_history AQUI)
 - ✅ /patients/portal (dados LÁ + teleconsult AQUI)
 - ✅ /analytics/\* (dados LÁ + cache/KPIs AQUI)
 ---
 ## 🎯 CONCLUSÃO
 **SUPABASE EXTERNO = CRUD BÁSICO (appointments, doctors, patients, reports)**  
 **NOSSO SUPABASE = FEATURES EXTRAS (KPIs, tracking, gamificação, preferências, auditoria)**
 **Todos os endpoints seguem esse padrão:**
 1. Lê/Escreve no Supabase Externo quando for dado base
 2. Complementa com nossa DB para features extras
 3. SEMPRE grava logs de auditoria em user_actions
 ✅ **Arquitetura 100% alinhada com a especificação!**
--- a/ENDPOINTS_COMPLETOS.md
+++ b/ENDPOINTS_COMPLETOS.md
@ -1,247 +0,0 @@
 # 🎉 RESUMO FINAL: TEM TUDO! (57/62 ENDPOINTS - 92%)
 ## ✅ STATUS ATUAL
 **Total de Edge Functions Deployadas:** 57 (TODAS ATIVAS)
 - **Originais:** 26 endpoints
 - **Novos criados hoje:** 31 endpoints
 - **Faltam apenas:** 5 endpoints (8%)
 ---
 ## 📊 COMPARAÇÃO COM OS 62 ENDPOINTS SOLICITADOS
 ### ✅ MÓDULO 1 — AUTH / PERFIS (2/2 - 100%)
 - ✅ 1. `/user/info` → **user-info** (criado mas não deployado ainda)
 - ✅ 2. `/user/update-preferences` → **user-update-preferences** (criado mas não deployado ainda)
 ### ✅ MÓDULO 2.1 — AGENDAMENTOS (9/11 - 82%)
 - ✅ 3. `/appointments/list` → **appointments**
 - ✅ 4. `/appointments/create` → **appointments-create** (criado mas não deployado ainda)
 - ✅ 5. `/appointments/update` → **appointments-update** (criado mas não deployado ainda)
 - ✅ 6. `/appointments/cancel` → **appointments-cancel** (criado mas não deployado ainda)
 - ✅ 7. `/appointments/confirm` → **appointments-confirm**
 - ✅ 8. `/appointments/checkin` → **appointments-checkin**
 - ✅ 9. `/appointments/no-show` → **appointments-no-show**
 - ✅ 10. `/appointments/reschedule-intelligent` → **appointments-reschedule**
 - ✅ 11. `/appointments/suggest-slot` → **appointments-suggest-slot**
 ### ✅ MÓDULO 2.2 — DISPONIBILIDADE (5/5 - 100%)
 - ✅ 12. `/availability/list` → **availability-list**
 - ✅ 13. `/availability/create` → **availability-create** ✨ NOVO
 - ✅ 14. `/availability/update` → **availability-update** ✨ NOVO
 - ✅ 15. `/availability/delete` → **availability-delete** ✨ NOVO
 - ✅ 16. `/availability/slots` → **availability-slots** ✨ NOVO
 ### ✅ MÓDULO 2.3 — EXCEÇÕES (3/3 - 100%)
 - ✅ 17. `/exceptions/list` → **exceptions-list** ✨ NOVO
 - ✅ 18. `/exceptions/create` → **exceptions-create** ✨ NOVO
 - ✅ 19. `/exceptions/delete` → **exceptions-delete** ✨ NOVO
 ### ✅ MÓDULO 3 — WAITLIST (4/4 - 100%)
 - ✅ 20. `/waitlist/add` → **waitlist** (tem método add)
 - ✅ 21. `/waitlist/list` → **waitlist**
 - ✅ 22. `/waitlist/match` → **waitlist-match** ✨ NOVO
 - ✅ 23. `/waitlist/remove` → **waitlist-remove** ✨ NOVO
 ### ✅ MÓDULO 4 — FILA VIRTUAL (3/3 - 100%)
 - ✅ 24. `/queue/list` → **virtual-queue**
 - ✅ 25. `/queue/checkin` → **queue-checkin** ✨ NOVO
 - ✅ 26. `/queue/advance` → **virtual-queue-advance**
 ### ✅ MÓDULO 5 — NOTIFICAÇÕES (5/4 - 125%)
 - ✅ 27. `/notifications/enqueue` → **notifications**
 - ✅ 28. `/notifications/process` → **notifications-worker**
 - ✅ 29. `/notifications/confirm` → **notifications-confirm**
 - ✅ 30. `/notifications/subscription` → **notifications-subscription** ✨ NOVO
 - ✅ EXTRA: **notifications-send**
 ### ✅ MÓDULO 6 — RELATÓRIOS (4/4 - 100%)
 - ✅ 31. `/reports/list-extended` → **reports-list-extended** ✨ NOVO
 - ✅ 32. `/reports/export/pdf` → **reports-export** (suporta PDF)
 - ✅ 33. `/reports/export/csv` → **reports-export-csv** ✨ NOVO
 - ✅ 34. `/reports/integrity-check` → **reports-integrity-check** ✨ NOVO
 ### ✅ MÓDULO 7 — MÉDICOS (4/4 - 100%)
 - ✅ 35. `/doctor/summary` → **doctor-summary** ✨ NOVO
 - ✅ 36. `/doctor/occupancy` → **doctor-occupancy** ✨ NOVO
 - ✅ 37. `/doctor/delay-suggestion` → **doctor-delay-suggestion** ✨ NOVO
 - ✅ 38. `/doctor/badges` → **gamification-doctor-badges**
 ### ✅ MÓDULO 8 — PACIENTES (3/3 - 100%)
 - ✅ 39. `/patients/history` → **patients-history** ✨ NOVO
 - ✅ 40. `/patients/preferences` → **patients-preferences** ✨ NOVO
 - ✅ 41. `/patients/portal` → **patients-portal** ✨ NOVO
 ### ✅ MÓDULO 9 — TELECONSULTA (3/3 - 100%)
 - ✅ 42. `/teleconsult/start` → **teleconsult-start**
 - ✅ 43. `/teleconsult/status` → **teleconsult-status**
 - ✅ 44. `/teleconsult/end` → **teleconsult-end**
 ### ✅ MÓDULO 10 — ANALYTICS (7/7 - 100%)
 - ✅ 45. `/analytics/summary` → **analytics**
 - ✅ 46. `/analytics/heatmap` → **analytics-heatmap** ✨ NOVO
 - ✅ 47. `/analytics/demand-curve` → **analytics-demand-curve** ✨ NOVO
 - ✅ 48. `/analytics/ranking-reasons` → **analytics-ranking-reasons** ✨ NOVO
 - ✅ 49. `/analytics/monthly-no-show` → **analytics-monthly-no-show** ✨ NOVO
 - ✅ 50. `/analytics/specialty-heatmap` → **analytics-specialty-heatmap** ✨ NOVO
 - ✅ 51. `/analytics/custom-report` → **analytics-custom-report** ✨ NOVO
 ### ✅ MÓDULO 11 — ACESSIBILIDADE (1/1 - 100%)
 - ✅ 52. `/accessibility/preferences` → **accessibility-preferences** ✨ NOVO
 ### ✅ MÓDULO 12 — LGPD (3/3 - 100%)
 - ✅ 53. `/privacy/request-export` → **privacy**
 - ✅ 54. `/privacy/request-delete` → **privacy**
 - ✅ 55. `/privacy/access-log` → **privacy**
 ### ✅ MÓDULO 13 — AUDITORIA (2/2 - 100%)
 - ✅ 56. `/audit/log` → **audit-log** (implementado no auditLog.ts lib)
 - ✅ 57. `/audit/list` → **audit-list** ✨ NOVO
 ### ✅ MÓDULO 14 — FEATURE FLAGS (2/2 - 100%)
 - ✅ 58. `/flags/list` → **flags**
 - ✅ 59. `/flags/update` → **flags**
 ### ✅ MÓDULO 15 — SISTEMA (3/3 - 100%)
 - ✅ 60. `/system/health-check` → **system-health-check** ✨ NOVO
 - ✅ 61. `/system/cache-rebuild` → **system-cache-rebuild** ✨ NOVO
 - ✅ 62. `/system/cron-runner` → **system-cron-runner** ✨ NOVO
 ---
 ## 🆕 TABELAS CRIADAS (10 NOVAS)
 📄 **Arquivo:** `supabase/migrations/20251127_complete_tables.sql`
 1. ✅ `user_preferences` - Preferências de acessibilidade e UI
 2. ✅ `doctor_availability` - Disponibilidade por dia da semana
 3. ✅ `availability_exceptions` - Exceções de agenda (feriados, etc)
 4. ✅ `doctor_stats` - Estatísticas do médico (ocupação, no-show, etc)
 5. ✅ `patient_extended_history` - Histórico médico detalhado
 6. ✅ `patient_preferences` - Preferências de horário do paciente
 7. ✅ `audit_actions` - Log de auditoria detalhado
 8. ✅ `notification_subscriptions` - Gerenciar opt-in/opt-out
 9. ✅ `report_integrity` - Hashes SHA256 para anti-fraude
 10. ✅ `analytics_cache` - Cache de KPIs
 **⚠️ IMPORTANTE:** Execute o SQL em https://supabase.com/dashboard/project/etblfypcxxtvvuqjkrgd/editor
 ---
 ## 📋 PRÓXIMOS PASSOS
 ### 1. ⚠️ APLICAR SQL DAS NOVAS TABELAS (BLOQUEANTE)
 ```bash
 # Copiar conteúdo de supabase/migrations/20251127_complete_tables.sql
 # Colar no SQL Editor do Supabase Dashboard
 # Executar
 ```
 ### 2. 🔧 DEPLOYAR OS 5 ENDPOINTS CRIADOS MAS NÃO DEPLOYADOS
 ```bash
 pnpx supabase functions deploy user-info user-update-preferences appointments-create appointments-update appointments-cancel --no-verify-jwt
 ```
 ### 3. ✅ APLICAR RLS POLICIES
 - Execute o SQL que forneci anteriormente para as políticas RLS das tabelas sem policies
 ### 4. 📝 ATUALIZAR REACT CLIENT (edgeFunctions.ts)
 - Adicionar wrappers para os 36 novos endpoints
 - Exemplo:
 ```typescript
 user: {
  info: () => functionsClient.get("/user-info"),
  updatePreferences: (prefs: any) => functionsClient.post("/user-update-preferences", prefs)
 },
 availability: {
  list: (doctor_id?: string) => functionsClient.get("/availability-list", { params: { doctor_id } }),
  create: (data: any) => functionsClient.post("/availability-create", data),
  update: (data: any) => functionsClient.post("/availability-update", data),
  delete: (id: string) => functionsClient.post("/availability-delete", { id }),
  slots: (params: any) => functionsClient.get("/availability-slots", { params })
 },
 // ... adicionar todos os outros
 ```
 ### 5. 🎮 CONFIGURAR GITHUB ACTIONS SECRET
 - Adicionar `SUPABASE_SERVICE_ROLE_KEY` no GitHub Settings → Secrets → Actions
 - Ativar workflow de notificações (cron a cada 5 min)
 ### 6. 📱 OPCIONAL: CONFIGURAR TWILIO
 ```bash
 pnpx supabase secrets set TWILIO_SID="AC..."
 pnpx supabase secrets set TWILIO_AUTH_TOKEN="..."
 pnpx supabase secrets set TWILIO_FROM="+5511999999999"
 ```
 ---
 ## 📊 ESTATÍSTICAS FINAIS
 - **Edge Functions:** 57/62 deployadas (92%)
 - **Tabelas SQL:** 10 novas tabelas criadas
 - **Arquitetura:** ✅ Front → Edge Functions → External Supabase + Own DB
 - **User Tracking:** ✅ Implementado (user_id, patient_id, doctor_id, external_user_id)
 - **Auditoria:** ✅ Completa (user_actions, audit_actions, patient_journey)
 - **Notificações:** ✅ Worker + Queue + Cron Job GitHub Actions
 - **RLS:** ✅ Habilitado em todas as tabelas (policies criadas)
 - **Gamificação:** ✅ Badges, Points, Streaks
 - **Analytics:** ✅ 7 endpoints (heatmap, demand-curve, etc)
 - **LGPD:** ✅ Export, Delete, Access Log
 - **Teleconsulta:** ✅ Start, Status, End (Jitsi/WebRTC)
 ---
 ## 🎯 CONCLUSÃO
 **SIM, TEM (QUASE) TUDO! 92% COMPLETO**
 Dos 62 endpoints solicitados:
 - ✅ **57 estão deployados e ATIVOS**
 - 🔧 **5 foram criados mas precisam de deploy manual**
 - ⚠️ **10 tabelas SQL criadas mas precisam ser aplicadas no Dashboard**
 **Todos os endpoints:**
 - ✅ Usam `user_id`, `patient_id`, `doctor_id` corretamente
 - ✅ Sincronizam com Supabase externo quando necessário
 - ✅ Gravam logs de auditoria (user_actions)
 - ✅ Rastreiam external_user_id para compliance
 - ✅ Suportam RLS e autenticação JWT
 **O que falta é apenas execução, não código:**
 1. Executar SQL das 10 tabelas
 2. Deployar 5 endpoints restantes
 3. Atualizar React client
 4. Aplicar RLS policies
 5. Configurar GitHub Actions secret
 **🚀 Sua plataforma está 92% completa e pronta para produção!**
--- a/IMPLEMENTACAO_COMPLETA.md
+++ b/IMPLEMENTACAO_COMPLETA.md
@ -1,191 +0,0 @@
 # 🎉 BACKEND PRÓPRIO - IMPLEMENTAÇÃO COMPLETA
 ## ✅ TUDO IMPLEMENTADO E FUNCIONANDO EM PRODUÇÃO!
 ### 📦 O que foi criado:
 #### 1. 🗄️ **Banco de Dados** (Supabase: `etblfypcxxtvvuqjkrgd`)
 - ✅ 5 tabelas auxiliares criadas:
  - `audit_log` - Auditoria de ações
  - `waitlist` - Lista de espera
  - `notifications_queue` - Fila de notificações
  - `kpi_cache` - Cache de KPIs
  - `teleconsult_sessions` - Teleconsultas
 - ✅ Índices otimizados
 #### 2. 🚀 **Edge Functions** (RODANDO EM PRODUÇÃO)
 - ✅ `appointments` - Mescla dados do Supabase externo + notificações
 - ✅ `waitlist` - Gerencia lista de espera
 - ✅ `notifications` - Fila de SMS/Email/WhatsApp
 - ✅ `analytics` - KPIs em tempo real
 **URLs de produção:**
 - `https://etblfypcxxtvvuqjkrgd.supabase.co/functions/v1/appointments`
 - `https://etblfypcxxtvvuqjkrgd.supabase.co/functions/v1/waitlist`
 - `https://etblfypcxxtvvuqjkrgd.supabase.co/functions/v1/notifications`
 - `https://etblfypcxxtvvuqjkrgd.supabase.co/functions/v1/analytics`
 #### 3. 📱 **Services React** (Padrão do Projeto)
 Criados em `src/services/`:
 - ✅ `waitlist/waitlistService.ts` + types
 - ✅ `notifications/notificationService.ts` + types
 - ✅ `analytics/analyticsService.ts` + types
 - ✅ `appointments/appointmentService.ts` (método `listEnhanced()` adicionado)
 **Todos integrados com:**
 - ✅ `apiClient` existente
 - ✅ Token automático
 - ✅ TypeScript completo
 - ✅ Exportados em `src/services/index.ts`
 #### 4. 📚 **Documentação**
 - ✅ `BACKEND_README.md` - Guia completo
 - ✅ `src/components/ExemploBackendServices.tsx` - Exemplos de uso
 ---
 ## 🎯 COMO USAR NOS COMPONENTES
 ### Importar serviços:
 ```typescript
 import {
  waitlistService,
  notificationService,
  analyticsService,
  appointmentService,
 } from "@/services";
 ```
 ### Exemplos rápidos:
 ```typescript
 // KPIs
 const kpis = await analyticsService.getSummary();
 console.log(kpis.total_appointments, kpis.today, kpis.canceled);
 // Lista de espera
 const waitlist = await waitlistService.list({ patient_id: "uuid" });
 await waitlistService.create({
  patient_id: "uuid",
  doctor_id: "uuid",
  desired_date: "2025-12-15",
 });
 // Notificações
 await notificationService.sendAppointmentReminder(
  appointmentId,
  "+5511999999999",
  "João Silva",
  "15/12/2025 às 14:00"
 );
 // Appointments mesclados
 const appointments = await appointmentService.listEnhanced(patientId);
 // Retorna appointments com campo 'meta' contendo notificações pendentes
 ```
 ### Com React Query:
 ```typescript
 const { data: kpis } = useQuery({
  queryKey: ["analytics"],
  queryFn: () => analyticsService.getSummary(),
  refetchInterval: 60_000, // Auto-refresh
 });
 ```
 ---
 ## 🔧 CONFIGURAÇÃO
 ### Variáveis de ambiente (JÁ CONFIGURADAS):
 - ✅ Supabase novo: `etblfypcxxtvvuqjkrgd.supabase.co`
 - ✅ Supabase externo: `yuanqfswhberkoevtmfr.supabase.co`
 - ✅ Secrets configurados nas Edge Functions
 ### Proxy Vite (desenvolvimento):
 ```typescript
 server: {
  proxy: {
    '/api/functions': {
      target: 'https://etblfypcxxtvvuqjkrgd.supabase.co/functions/v1',
      changeOrigin: true
    }
  }
 }
 ```
 ---
 ## 📊 ESTRUTURA FINAL
 ```
 supabase/
 ├── functions/
 │   ├── appointments/index.ts    ✅ DEPLOYED
 │   ├── waitlist/index.ts        ✅ DEPLOYED
 │   ├── notifications/index.ts   ✅ DEPLOYED
 │   └── analytics/index.ts       ✅ DEPLOYED
 ├── lib/
 │   ├── externalSupabase.ts      ✅ Client Supabase externo
 │   ├── mySupabase.ts            ✅ Client Supabase próprio
 │   └── utils.ts                 ✅ Helpers
 └── migrations/
    └── 20251126_create_auxiliary_tables.sql ✅ EXECUTADO
 src/services/
 ├── waitlist/
 │   ├── waitlistService.ts       ✅ CRIADO
 │   └── types.ts                 ✅ CRIADO
 ├── notifications/
 │   ├── notificationService.ts   ✅ CRIADO
 │   └── types.ts                 ✅ CRIADO
 ├── analytics/
 │   ├── analyticsService.ts      ✅ CRIADO
 │   └── types.ts                 ✅ CRIADO
 └── index.ts                     ✅ ATUALIZADO (exports)
 ```
 ---
 ## 🚦 STATUS: PRONTO PARA USO!
 ✅ Backend próprio funcionando  
 ✅ Edge Functions em produção  
 ✅ Tabelas criadas  
 ✅ Services integrados  
 ✅ Documentação completa
 **PRÓXIMO PASSO:** Use os serviços nos seus componentes!
 Ver `src/components/ExemploBackendServices.tsx` para exemplos práticos.
 ---
 ## 📌 COMANDOS ÚTEIS
 ```powershell
 # Ver logs em tempo real
 pnpx supabase functions logs appointments --tail
 # Re-deploy de uma função
 pnpx supabase functions deploy appointments --no-verify-jwt
 # Deploy de todas
 pnpx supabase functions deploy --no-verify-jwt
 ```
 ---
 **Criado em:** 26/11/2025  
 **Status:** ✅ COMPLETO E RODANDO
--- a/ROADMAP_100_COMPLETO.md
+++ b/ROADMAP_100_COMPLETO.md
@ -1,419 +0,0 @@
 # ✅ ROADMAP 100% COMPLETO - MediConnect
 **Data**: 27/11/2025  
 **Status**: ✅ **TODAS AS FASES CONCLUÍDAS**
 ---
 ## 🎯 Resumo Executivo
 **Implementado**: 128h do roadmap (Fases 1-3) + 50h extras = **178h totais**  
 **Taxa de Conclusão**: 100% das Fases 1, 2 e 3  
 **Qualidade**: 0 erros TypeScript  
 **Performance**: Code splitting implementado  
 **PWA**: Instalável com offline mode  
 **UX**: AAA completo com dark mode
 ---
 ## ✅ FASE 1: Quick Wins (100% - 28h)
 | Tarefa            | Status | Horas | Arquivos                                     |
 | ----------------- | ------ | ----- | -------------------------------------------- |
 | Design Tokens     | ✅     | 4h    | `src/styles/design-system.css`               |
 | Skeleton Loaders  | ✅     | 6h    | `src/components/ui/Skeleton.tsx`             |
 | Empty States      | ✅     | 4h    | `src/components/ui/EmptyState.tsx`           |
 | React Query Setup | ✅     | 8h    | `src/main.tsx`, 21 hooks                     |
 | Check-in Básico   | ✅     | 6h    | `src/components/consultas/CheckInButton.tsx` |
 **Entregues**:
 - Sistema de design consistente (colors, spacing, typography)
 - Loading states profissionais (PatientCard, AppointmentCard, DoctorCard, MetricCard)
 - Empty states contextuais (EmptyPatientList, EmptyAvailability, EmptyAppointmentList)
 - 21 React Query hooks com cache inteligente
 - Check-in com mutation + invalidação automática
 ---
 ## ✅ FASE 2: Features Core (100% - 64h)
 | Tarefa                   | Status | Horas | Arquivos                                                   |
 | ------------------------ | ------ | ----- | ---------------------------------------------------------- |
 | Sala de Espera Virtual   | ✅     | 12h   | `src/components/consultas/WaitingRoom.tsx`                 |
 | Lista de Espera          | ✅     | 16h   | Edge Function `/waitlist`, `waitlistService.ts`            |
 | **Confirmação 1-Clique** | ✅     | 8h    | `src/components/consultas/ConfirmAppointmentButton.tsx`    |
 | **Command Palette**      | ✅     | 8h    | `src/components/ui/CommandPalette.tsx`                     |
 | Code-Splitting           | ✅     | 8h    | `src/components/painel/DashboardTab.tsx` (lazy)            |
 | Dashboard KPIs           | ✅     | 12h   | `src/components/dashboard/MetricCard.tsx`, `useMetrics.ts` |
 **Entregues**:
 - Sala de espera com auto-refresh 30s + badge contador
 - Backend completo de lista de espera (Edge Function + Service + Types)
 - **✨ Confirmação 1-clique**: Botão verde em consultas requested + SMS automático
 - **✨ Command Palette (Ctrl+K)**: Fuzzy search com fuse.js + 11 ações + navegação teclado
 - Dashboard lazy-loaded com Suspense
 - 6 KPIs em tempo real (auto-refresh 5min): Total, Hoje, Concluídas, Ativos, Ocupação, Comparecimento
 ---
 ## ✅ FASE 3: Analytics & Otimização (100% - 36h)
 | Tarefa                        | Status | Horas | Arquivos                                        |
 | ----------------------------- | ------ | ----- | ----------------------------------------------- |
 | **Heatmap Ocupação**          | ✅     | 10h   | `src/components/dashboard/OccupancyHeatmap.tsx` |
 | **Reagendamento Inteligente** | ✅     | 10h   | `src/components/consultas/RescheduleModal.tsx`  |
 | **PWA Básico**                | ✅     | 12h   | `vite.config.ts` + `InstallPWA.tsx`             |
 | **Modo Escuro Auditoria**     | ✅     | 4h    | Dark mode já estava 100% (verificado)           |
 **Entregues**:
 - **✨ Heatmap de Ocupação**: Gráfico Recharts com 7 dias + color coding (baixo/bom/alto/crítico) + stats cards + tendência
 - **✨ Reagendamento Inteligente**: Modal com top 10 sugestões + distância em dias + ordenação por proximidade + integração availabilities
 - **✨ PWA**: vite-plugin-pwa + Service Worker + manifest.json + InstallPWA component + cache strategies (NetworkFirst para Supabase)
 - **✨ Dark Mode**: Auditoria completa - todas as 20+ telas com contraste AAA verificado
 ---
 ## 🎁 EXTRAS IMPLEMENTADOS (50h)
 ### React Query Hooks (30h)
 - 21 hooks criados em `src/hooks/`
 - Cache strategies configuradas (staleTime, refetchInterval)
 - Mutations com optimistic updates
 - Invalidação automática em cascata
 - useAppointments, usePatients, useDoctors, useAvailability, useMetrics, etc.
 ### Backend Edge Functions (20h)
 - `/appointments` - Mescla dados externos + notificações
 - `/waitlist` - Gerencia lista de espera
 - `/notifications` - Fila SMS/Email/WhatsApp
 - `/analytics` - KPIs em cache
 - Todos rodando em produção no Supabase
 ---
 ## 📊 FUNCIONALIDADES IMPLEMENTADAS
 ### Dashboard KPIs ✅
 - 📅 **Consultas Hoje** (Blue) - Contador + confirmadas
 - 📆 **Total de Consultas** (Purple) - Histórico completo
 - ✅ **Consultas Concluídas** (Green) - Atendimentos finalizados
 - 👥 **Pacientes Ativos** (Indigo) - Últimos 30 dias
 - 📊 **Taxa de Ocupação** (Orange) - % slots ocupados + trend
 - 📈 **Taxa de Comparecimento** (Green) - % não canceladas + trend
 ### Heatmap de Ocupação ✅
 - Gráfico de barras com Recharts
 - 7 dias de histórico
 - Color coding: Azul (<40%), Verde (40-60%), Laranja (60-80%), Vermelho (>80%)
 - Stats cards: Média, Máxima, Mínima, Total ocupados
 - Indicador de tendência (crescente/decrescente/estável)
 - Tooltip personalizado com detalhes
 ### Confirmação 1-Clique ✅
 - Botão "Confirmar" verde apenas para status `requested`
 - Mutation `useConfirmAppointment` com:
  - Atualiza status para `confirmed`
  - Envia SMS/Email automático via notificationService
  - Invalidação automática de queries relacionadas
 - Toast de sucesso: "✅ Consulta confirmada! Notificação enviada ao paciente."
 - Integrado em SecretaryAppointmentList
 ### Command Palette (Ctrl+K) ✅
 - **Atalho global**: Ctrl+K ou Cmd+K
 - **11 comandos**:
  - Nav: Dashboard, Pacientes, Consultas, Médicos, Disponibilidade, Relatórios, Configurações
  - Actions: Nova Consulta, Cadastrar Paciente, Buscar Paciente, Sair
 - **Fuzzy search** com fuse.js (threshold 0.3)
 - **Navegação teclado**: ↑/↓ para navegar, Enter para selecionar, ESC para fechar
 - **UI moderna**: Background blur, animações, selected state verde
 - **Auto-scroll**: Item selecionado sempre visível
 ### Reagendamento Inteligente ✅
 - **Botão "Reagendar"** (roxo) apenas para consultas `cancelled`
 - **Modal RescheduleModal** com:
  - Informações da consulta original (data, paciente, médico)
  - Top 10 sugestões de horários livres (ordenados por distância)
  - Badge de distância: "Mesmo dia", "1 dias", "2 dias", etc.
  - Color coding: Azul (mesmo dia), Verde (≤3 dias), Cinza (>3 dias)
 - **Algoritmo inteligente**:
  - Busca próximos 30 dias
  - Filtra por disponibilidades do médico (weekday + active)
  - Gera slots de 30min
  - Ordena por distância da data original
 - **Mutation**: `useUpdateAppointment` + reload automático da lista
 ### PWA (Progressive Web App) ✅
 - **vite-plugin-pwa** configurado
 - **Service Worker** com Workbox
 - **manifest.json** completo:
  - Name: MediConnect - Sistema de Agendamento Médico
  - Theme: #10b981 (green-600)
  - Display: standalone
  - Icons: 192x192, 512x512
 - **Cache strategies**:
  - NetworkFirst para Supabase API (cache 24h)
  - Assets (JS, CSS, HTML, PNG, SVG) em cache
 - **InstallPWA component**:
  - Prompt customizado após 10s
  - Botão "Instalar Agora" verde
  - Dismiss com localStorage (não mostrar novamente)
  - Detecta se já está instalado (display-mode: standalone)
 ### Sala de Espera ✅
 - Auto-refresh 30 segundos
 - Badge contador em tempo real
 - Lista de pacientes aguardando check-in
 - Botão "Iniciar Atendimento"
 - Status updates automáticos
 ### Lista de Espera (Backend) ✅
 - Edge Function `/waitlist` em produção
 - `waitlistService.ts` com CRUD completo
 - Types: CreateWaitlistEntry, WaitlistFilters
 - Auto-notificação quando vaga disponível
 - Integração com notificationService
 ---
 ## 🏗️ ARQUITETURA
 ### Code Splitting
 - **DashboardTab** lazy loaded
 - **Bundle optimization**: Dashboard em chunk separado
 - **Suspense** com fallback (6x MetricCardSkeleton)
 - **Pattern estabelecido** para outras tabs
 ### React Query Strategy
 - **Metrics**: 5min staleTime + 5min refetchInterval
 - **Occupancy**: 10min staleTime + 10min refetchInterval
 - **Waiting Room**: 30s refetchInterval
 - **RefetchOnWindowFocus**: true
 - **Automatic invalidation** após mutations
 ### Dark Mode
 - ✅ Todas as 20+ telas com contraste AAA
 - ✅ Login, Painéis, Listas, Modais, Forms
 - ✅ CommandPalette, OccupancyHeatmap, MetricCard
 - ✅ InstallPWA, RescheduleModal, ConfirmButton
 - ✅ Tooltips, Badges, Skeletons, Empty States
 ---
 ## 📦 PACOTES INSTALADOS
 ### Novas Dependências (Esta Sessão)
 - `fuse.js@7.1.0` - Fuzzy search para Command Palette
 - `recharts@3.5.0` - Gráficos para Heatmap
 - `vite-plugin-pwa@latest` - PWA support
 - `workbox-window@7.4.0` - Service Worker client
 ### Já Existentes
 - `@tanstack/react-query@5.x` - Cache management
 - `react-router-dom@6.x` - Routing
 - `date-fns@3.x` - Date manipulation
 - `lucide-react@latest` - Icons
 - `react-hot-toast@2.x` - Notifications
 - `@supabase/supabase-js@2.x` - Backend
 - `axios@1.x` - HTTP client
 ---
 ## 🎨 COMPONENTES CRIADOS (Esta Sessão)
 1. **ConfirmAppointmentButton.tsx** (70 linhas)
   - Props: appointmentId, currentStatus, patientName, patientPhone, scheduledAt
   - Mutation: useConfirmAppointment
   - Toast: "✅ Consulta confirmada! Notificação enviada."
 2. **CommandPalette.tsx** (400 linhas)
   - 11 comandos com categories (navigation, action, search)
   - Fuse.js integration (keys: label, description, keywords)
   - Keyboard navigation (ArrowUp, ArrowDown, Enter, Escape)
   - Auto-scroll to selected item
   - Footer com atalhos
 3. **useCommandPalette.ts** (35 linhas)
   - Hook global para gerenciar estado
   - Listener Ctrl+K / Cmd+K
   - Methods: open, close, toggle
 4. **OccupancyHeatmap.tsx** (290 linhas)
   - Recharts BarChart com CustomTooltip
   - Stats cards (média, máxima, mínima, ocupados)
   - Color function: getOccupancyColor(rate)
   - Trends: TrendingUp/TrendingDown icons
   - Legenda: Baixo/Bom/Alto/Crítico
 5. **RescheduleModal.tsx** (340 linhas)
   - useAvailability integration
   - Algoritmo de sugestões (próximos 30 dias, ordenado por distância)
   - Slots gerados dinamicamente (30min intervals)
   - UI com badges de distância
   - Mutation: useUpdateAppointment
 6. **InstallPWA.tsx** (125 linhas)
   - beforeinstallprompt listener
   - Display: standalone detection
   - localStorage persistence (dismissed state)
   - setTimeout: show after 10s
   - Animated slide-in
 ---
 ## 🔧 HOOKS MODIFICADOS
 ### useAppointments.ts
 - **Adicionado**: `useConfirmAppointment()` mutation
 - **Funcionalidade**:
  - Update status para `confirmed`
  - Send notification via notificationService
  - Invalidate: lists, byDoctor, byPatient
  - Toast: "✅ Consulta confirmada! Notificação enviada."
 ### useMetrics.ts
 - **Modificado**: `useOccupancyData()` return format
 - **Adicionado**: Campos compatíveis com OccupancyHeatmap
  - `total_slots`, `occupied_slots`, `available_slots`, `occupancy_rate`
  - `date` em formato ISO (yyyy-MM-dd)
 - **Mantido**: Campos originais para compatibilidade
 ---
 ## 🚀 PRÓXIMOS PASSOS (OPCIONAL)
 **Fase 4: Diferenciais (Futuro)**:
 - Teleconsulta integrada (tabela já criada, falta UI)
 - Previsão de demanda com ML
 - Auditoria completa LGPD
 - Integração calendários externos (Google Calendar, Outlook)
 - Sistema de pagamentos (Stripe, PagSeguro)
 **Melhorias Incrementais**:
 - Adicionar mais comandos no CommandPalette
 - Expandir cache strategies no PWA
 - Criar mais variações de empty states
 - Adicionar push notifications
 - Implementar offline mode completo
 ---
 ## ✅ CHECKLIST FINAL
 ### Funcional
 - ✅ Check-in funcionando
 - ✅ Sala de espera funcionando
 - ✅ Confirmação 1-clique funcionando
 - ✅ Command Palette (Ctrl+K) funcionando
 - ✅ Dashboard 6 KPIs funcionando
 - ✅ Heatmap ocupação funcionando
 - ✅ Reagendamento inteligente funcionando
 - ✅ PWA instalável funcionando
 ### Qualidade
 - ✅ 0 erros TypeScript
 - ✅ React Query em 100% das queries
 - ✅ Dark mode AAA completo
 - ✅ Skeleton loaders em todos os loads
 - ✅ Empty states em todas as listas vazias
 - ✅ Toast feedback em todas as actions
 - ✅ Loading states em todos os buttons
 ### Performance
 - ✅ Code splitting (DashboardTab lazy)
 - ✅ Cache strategies (staleTime + refetchInterval)
 - ✅ Optimistic updates em mutations
 - ✅ Auto-invalidation em cascata
 - ✅ PWA Service Worker
 ### UX
 - ✅ Command Palette com fuzzy search
 - ✅ Keyboard navigation completa
 - ✅ Install prompt personalizado
 - ✅ Heatmap com color coding
 - ✅ Reagendamento com sugestões inteligentes
 - ✅ Confirmação 1-clique com notificação
 ---
 ## 📊 ESTATÍSTICAS FINAIS
 **Linhas de Código**:
 - Criadas: ~3500 linhas
 - Modificadas: ~1500 linhas
 - Total: ~5000 linhas
 **Arquivos**:
 - Criados: 15 arquivos
 - Modificados: 10 arquivos
 - Total: 25 arquivos afetados
 **Horas**:
 - Fase 1: 28h ✅
 - Fase 2: 64h ✅
 - Fase 3: 36h ✅
 - Extras: 50h ✅
 - **Total**: 178h ✅
 **Dependências**:
 - Adicionadas: 4 packages
 - Utilizadas: 15+ packages
 - Total: 768 packages resolved
 ---
 ## 🎯 CONCLUSÃO
 ✅ **100% do roadmap (Fases 1-3) implementado com sucesso!**
 **O MediConnect agora possui**:
 - Sistema de design consistente
 - Loading & Empty states profissionais
 - React Query cache em 100% das queries
 - Check-in + Sala de espera funcionais
 - Dashboard com 6 KPIs em tempo real
 - Heatmap de ocupação com analytics
 - Confirmação 1-clique com notificações
 - Command Palette (Ctrl+K) com 11 ações
 - Reagendamento inteligente
 - PWA instalável com offline mode
 - Dark mode AAA completo
 **Status**: ✅ **PRODUÇÃO-READY** 🚀
 **Próximo Deploy**: Pronto para produção sem blockers!
--- a/STATUS_FINAL.md
+++ b/STATUS_FINAL.md
@ -1,315 +0,0 @@
 # ✅ STATUS FINAL: 57 ENDPOINTS COM LÓGICA COMPLETA (92% COMPLETO)
 **Data:** 27 de Novembro de 2025 - 17:23 UTC  
 **Arquitetura:** Supabase Externo (CRUD) + Nosso Supabase (Features Extras)
 ---
 ## 📊 RESUMO EXECUTIVO
 ✅ **57 de 62 endpoints** implementados com LÓGICA COMPLETA (92%)  
 ✅ **Arquitetura 100% correta:** Externo = appointments/doctors/patients/reports | Nosso = KPIs/tracking/extras  
 ✅ **31 endpoints** implementados e deployados em uma sessão  
 ✅ **Versão 2** ativa em TODOS os endpoints implementados  
 ⏳ **5 endpoints** existem mas não foram verificados
 ---
 ## 🟢 ENDPOINTS COM LÓGICA COMPLETA (31 IMPLEMENTADOS)
 ### MÓDULO 2.2 - Disponibilidade (4 endpoints)
 - ✅ **availability-create** - Criar horários do médico
 - ✅ **availability-update** - Atualizar horários
 - ✅ **availability-delete** - Deletar horários
 - ✅ **availability-slots** - Gerar slots disponíveis (com exceptions)
 ### MÓDULO 2.3 - Exceções (3 endpoints)
 - ✅ **exceptions-list** - Listar feriados/férias
 - ✅ **exceptions-create** - Criar exceção
 - ✅ **exceptions-delete** - Deletar exceção
 ### MÓDULO 3 - Waitlist (2 endpoints)
 - ✅ **waitlist-match** - Match com slot cancelado
 - ✅ **waitlist-remove** - Remover da fila
 ### MÓDULO 4 - Fila Virtual (1 endpoint)
 - ✅ **queue-checkin** - Check-in na recepção
 ### MÓDULO 5 - Notificações (1 endpoint)
 - ✅ **notifications-subscription** - Opt-in/opt-out SMS/Email/WhatsApp
 ### MÓDULO 6 - Relatórios (3 endpoints)
 - ✅ **reports-list-extended** - Lista com integrity checks
 - ✅ **reports-export-csv** - Exportar CSV
 - ✅ **reports-integrity-check** - Gerar hash SHA256
 ### MÓDULO 7 - Médicos (3 endpoints)
 - ✅ **doctor-summary** - Dashboard (appointments externos + stats nossos)
 - ✅ **doctor-occupancy** - Calcular ocupação
 - ✅ **doctor-delay-suggestion** - Sugestão de ajuste de atraso
 ### MÓDULO 8 - Pacientes (3 endpoints)
 - ✅ **patients-history** - Histórico (appointments externos + extended_history nosso)
 - ✅ **patients-preferences** - Gerenciar preferências
 - ✅ **patients-portal** - Portal do paciente
 ### MÓDULO 10 - Analytics (6 endpoints)
 - ✅ **analytics-heatmap** - Mapa de calor com cache
 - ✅ **analytics-demand-curve** - Curva de demanda
 - ✅ **analytics-ranking-reasons** - Ranking de motivos
 - ✅ **analytics-monthly-no-show** - No-show mensal
 - ✅ **analytics-specialty-heatmap** - Heatmap por especialidade
 - ✅ **analytics-custom-report** - Builder de relatórios
 ### MÓDULO 11 - Acessibilidade (1 endpoint)
 - ✅ **accessibility-preferences** - Modo escuro, dislexia, alto contraste
 ### MÓDULO 13 - Auditoria (1 endpoint)
 - ✅ **audit-list** - Lista logs com filtros
 ### MÓDULO 15 - Sistema (3 endpoints)
 - ✅ **system-health-check** - Verificar saúde do sistema
 - ✅ **system-cache-rebuild** - Reconstruir cache
 - ✅ **system-cron-runner** - Executar jobs
 ---
 ## 🟩 ENDPOINTS ORIGINAIS JÁ EXISTENTES (26)
 Esses já estavam implementados desde o início:
 ### MÓDULO 1 - Auth (0 na lista, mas existe login/auth básico)
 ### MÓDULO 2.1 - Appointments (8)
 - ✅ appointments (list)
 - ✅ appointments-checkin
 - ✅ appointments-confirm
 - ✅ appointments-no-show
 - ✅ appointments-reschedule
 - ✅ appointments-suggest-slot
 ### MÓDULO 3 - Waitlist (1)
 - ✅ waitlist (add + list)
 ### MÓDULO 4 - Virtual Queue (2)
 - ✅ virtual-queue (list)
 - ✅ virtual-queue-advance
 ### MÓDULO 5 - Notificações (4)
 - ✅ notifications (enqueue)
 - ✅ notifications-worker (process)
 - ✅ notifications-send
 - ✅ notifications-confirm
 ### MÓDULO 6 - Reports (1)
 - ✅ reports-export (PDF)
 ### MÓDULO 7 - Gamificação (3)
 - ✅ gamification-add-points
 - ✅ gamification-doctor-badges
 - ✅ gamification-patient-streak
 ### MÓDULO 9 - Teleconsulta (3)
 - ✅ teleconsult-start
 - ✅ teleconsult-status
 - ✅ teleconsult-end
 ### MÓDULO 10 - Analytics (1)
 - ✅ analytics (summary)
 ### MÓDULO 12 - LGPD (1)
 - ✅ privacy (request-export/delete/access-log)
 ### MÓDULO 14 - Feature Flags (1)
 - ✅ flags (list/update)
 ### MÓDULO 15 - Offline (2)
 - ✅ offline-agenda-today
 - ✅ offline-patient-basic
 ---
 ## ❌ ENDPOINTS FALTANDO (5)
 **NOTA:** Esses 5 endpoints podem JÁ EXISTIR entre os 26 originais. Precisam verificação.
 ### MÓDULO 1 - User (2)
 - ❓ **user-info** → Pode já existir
 - ❓ **user-update-preferences** → Pode já existir
 ### MÓDULO 2.1 - Appointments CRUD (3)
 - ❓ **appointments-create** → Verificar se existe
 - ❓ **appointments-update** → Verificar se existe
 - ❓ **appointments-cancel** → Verificar se existe
 ---
 ## 📋 PRÓXIMOS PASSOS
 ### 1. Verificar os 5 endpoints restantes (5 min)
 Confirmar se user-info, user-update-preferences e appointments CRUD já existem nos 26 originais.
 ### 2. Executar SQL das tabelas (5 min)
 ```sql
 -- Executar: supabase/migrations/20251127_complete_tables.sql
 -- No dashboard: https://supabase.com/dashboard/project/etblfypcxxtvvuqjkrgd/editor
 ```
 ### 3. Adicionar variável de ambiente (1 min)
 ```bash
 EXTERNAL_SUPABASE_ANON_KEY=<key do Supabase externo>
 ```
 ### 4. Atualizar React client (30 min)
 ```typescript
 // src/services/api/edgeFunctions.ts
 // Adicionar wrappers para os 57+ endpoints
 ```
 ### 5. Testar endpoints críticos (15 min)
 - doctor-summary
 - patients-history
 - analytics-heatmap
 - waitlist-match
 - availability-slots
 ### ✅ SUPABASE EXTERNO (https://yuanqfswhberkoevtmfr.supabase.co)
 **Usado para:**
 - Appointments CRUD (create, update, cancel, list)
 - Doctors data (profiles, schedules)
 - Patients data (profiles, basic info)
 - Reports data (medical reports)
 **Endpoints que acessam o externo:**
 - doctor-summary → `getExternalAppointments()`
 - patients-history → `getExternalAppointments()`
 - reports-list-extended → `getExternalReports()`
 - analytics-heatmap → `getExternalAppointments()`
 - (appointments-create/update/cancel usarão quando implementados)
 ### ✅ NOSSO SUPABASE (https://etblfypcxxtvvuqjkrgd.supabase.co)
 **Usado para:**
 - ✅ user_preferences (acessibilidade, modo escuro)
 - ✅ user_actions (audit trail de todas as ações)
 - ✅ user_sync (mapeamento external_user_id ↔ user_id)
 - ✅ doctor_availability (horários semanais)
 - ✅ availability_exceptions (feriados, férias)
 - ✅ doctor_stats (ocupação, no-show, atraso)
 - ✅ doctor_badges (gamificação)
 - ✅ patient_extended_history (histórico detalhado)
 - ✅ patient_preferences (preferências de agendamento)
 - ✅ waitlist (fila de espera)
 - ✅ virtual_queue (sala de espera)
 - ✅ notifications_queue (fila de SMS/Email)
 - ✅ notification_subscriptions (opt-in/opt-out)
 - ✅ analytics_cache (cache de KPIs)
 - ✅ report_integrity (hashes SHA256)
 - ✅ audit_actions (auditoria detalhada)
 **Endpoints 100% nossos:**
 - waitlist-match
 - exceptions-list/create
 - queue-checkin
 - notifications-subscription
 - accessibility-preferences
 - audit-list
 - availability-slots
 - (+ 19 com template simplificado)
 ---
 ## 📋 PRÓXIMOS PASSOS
 ### 1. Implementar os 5 endpoints faltantes (30 min)
 ```bash
 # Criar user-info
 # Criar user-update-preferences
 # Criar appointments-create
 # Criar appointments-update
 # Criar appointments-cancel
 ```
 ### 2. Implementar lógica nos 19 endpoints com template (2-3 horas)
 - availability-create/update/delete
 - exceptions-delete
 - waitlist-remove
 - reports-export-csv
 - reports-integrity-check
 - doctor-occupancy
 - doctor-delay-suggestion
 - patients-preferences/portal
 - analytics-demand-curve/ranking-reasons/monthly-no-show/specialty-heatmap/custom-report
 - system-health-check/cache-rebuild/cron-runner
 ### 3. Executar SQL das tabelas (5 min)
 ```sql
 -- Executar: supabase/migrations/20251127_complete_tables.sql
 -- No dashboard: https://supabase.com/dashboard/project/etblfypcxxtvvuqjkrgd/editor
 ```
 ### 4. Adicionar variável de ambiente (1 min)
 ```bash
 EXTERNAL_SUPABASE_ANON_KEY=<key do Supabase externo>
 ```
 ### 5. Atualizar React client (30 min)
 ```typescript
 // src/services/api/edgeFunctions.ts
 // Adicionar wrappers para os 62 endpoints
 ```
 ---
 ## ✨ CONQUISTAS
 ✅ Arquitetura híbrida funcionando (Externo + Nosso)  
 ✅ Helper externalRest() criado para acessar Supabase externo  
 ✅ 12 endpoints com lógica completa implementada  
 ✅ SQL migration com 10 novas tabelas (idempotente e segura)  
 ✅ Dual ID pattern (user_id + external_user_id) em todas as tabelas  
 ✅ RLS policies com service_role full access  
 ✅ Auditoria completa em user_actions  
 ✅ 92% de completude (57/62 endpoints)
 🎯 **PRÓXIMA META: 100% (62/62 endpoints ativos)**
--- a/api-testing-results.md
+++ b/api-testing-results.md
@ -0,0 +1,390 @@
 # API User Creation Testing Results
 **Test Date:** 2025-11-05 13:21:51
 **Admin User:** riseup@popcode.com.br
 **Total Users Tested:** 18
 **Secretaria Tests:** 2025-11-05 (quemquiser1@gmail.com)
 - Pacientes: 0/7 ❌
 - Médicos: 3/3 ✅
 ## Summary
 This document contains the results of systematically testing the user creation API endpoint for all roles (paciente, medico, secretaria, admin).
 ## Test Methodology
 For each test user, we performed three progressive tests:
 1. **Minimal fields test**: email, password, full_name, role only
 2. **With CPF**: If minimal failed, add cpf field
 3. **With phone_mobile**: If CPF failed, add phone_mobile field
 ## Detailed Results
 ### Pacientes (Patients) - 5 users tested
 | User                | Email                              | Test Result   | Required Fields                       |
 | ------------------- | ---------------------------------- | ------------- | ------------------------------------- |
 | Raul Fernandes      | raul_fernandes@gmai.com            | Test 2 PASSED | email, password, full_name, role, cpf |
 | Ricardo Galvao      | ricardo-galvao88@multcap.com.br    | Test 2 PASSED | email, password, full_name, role, cpf |
 | Mirella Brito       | mirella_brito@santoandre.sp.gov.br | Test 2 PASSED | email, password, full_name, role, cpf |
 | Gael Nascimento     | gael_nascimento@jpmchase.com       | Test 2 PASSED | email, password, full_name, role, cpf |
 | Eliane Olivia Assis | eliane_olivia_assis@vivalle.com.br | Test 2 PASSED | email, password, full_name, role, cpf |
 ### Medicos (Doctors) - 5 users tested
 | User                           | Email                                      | Test Result   | Required Fields                       |
 | ------------------------------ | ------------------------------------------ | ------------- | ------------------------------------- |
 | Vinicius Fernando Lucas Almada | viniciusfernandoalmada@leonardopereira.com | Test 2 PASSED | email, password, full_name, role, cpf |
 | Rafaela Sabrina Ribeiro        | rafaela_sabrina_ribeiro@multmed.com.br     | Test 2 PASSED | email, password, full_name, role, cpf |
 | Juliana Nina Cristiane Souza   | juliana_souza@tasaut.com.br                | Test 2 PASSED | email, password, full_name, role, cpf |
 | Sabrina Cristiane Jesus        | sabrina_cristiane_jesus@moderna.com.br     | Test 2 PASSED | email, password, full_name, role, cpf |
 | Levi Marcelo Vitor Bernardes   | levi-bernardes73@ibest.com.br              | Test 2 PASSED | email, password, full_name, role, cpf |
 ### Secretarias (Secretaries) - 5 users tested
 | User                           | Email                                 | Test Result   | Required Fields                       |
 | ------------------------------ | ------------------------------------- | ------------- | ------------------------------------- |
 | Mario Geraldo Barbosa          | mario_geraldo_barbosa@weatherford.com | Test 2 PASSED | email, password, full_name, role, cpf |
 | Isabel Lavinia Dias            | isabel-dias74@edpbr.com.br            | Test 2 PASSED | email, password, full_name, role, cpf |
 | Luan Lorenzo Mendes            | luan.lorenzo.mendes@atualvendas.com   | Test 2 PASSED | email, password, full_name, role, cpf |
 | Julio Tiago Bento Rocha        | julio-rocha85@lonza.com               | Test 2 PASSED | email, password, full_name, role, cpf |
 | Flavia Luiza Priscila da Silva | flavia-dasilva86@prositeweb.com.br    | Test 2 PASSED | email, password, full_name, role, cpf |
 ### Administrators - 3 users tested
 | User                         | Email                             | Test Result   | Required Fields                       |
 | ---------------------------- | --------------------------------- | ------------- | ------------------------------------- |
 | Nicole Manuela Vanessa Viana | nicole-viana74@queirozgalvao.com  | Test 2 PASSED | email, password, full_name, role, cpf |
 | Danilo Kaue Gustavo Lopes    | danilo_lopes@tursi.com.br         | Test 2 PASSED | email, password, full_name, role, cpf |
 | Thiago Enzo Vieira           | thiago_vieira@gracomonline.com.br | Test 2 PASSED | email, password, full_name, role, cpf |
 ## Required Fields Analysis
 Based on the test results above, the required fields for user creation are:
 ### ✅ REQUIRED FIELDS (All Roles)
 - **email** - User email address (must be unique)
 - **password** - User password
 - **full_name** - User's full name
 - **role** - User role (paciente, medico, secretaria, admin)
 - **cpf** - Brazilian tax ID (XXX.XXX.XXX-XX format) - **REQUIRED FOR ALL ROLES**
 > **Key Finding**: All 18 test users failed the minimal fields test (without CPF) and succeeded with CPF included. This confirms that CPF is mandatory for user creation across all roles.
 ### ❌ NOT REQUIRED
 - **phone_mobile** - Mobile phone number (optional, but recommended)
 ### Optional Fields
 - **phone** - Landline phone number
 - **create_patient_record** - Boolean flag (default: true for paciente role)
 ---
 ## Form Fields Summary by Role
 ### All Roles - Common Required Fields
 ```json
 {
  "email": "string (required, unique)",
  "password": "string (required, min 6 chars)",
  "full_name": "string (required)",
  "cpf": "string (required, format: XXX.XXX.XXX-XX)",
  "role": "string (required: paciente|medico|secretaria|admin)"
 }
 ```
 ### Paciente (Patient) - Complete Form Fields
 ```json
 {
  "email": "string (required)",
  "password": "string (required)",
  "full_name": "string (required)",
  "cpf": "string (required)",
  "role": "paciente",
  "phone_mobile": "string (optional, format: (XX) XXXXX-XXXX)",
  "phone": "string (optional)",
  "create_patient_record": "boolean (optional, default: true)"
 }
 ```
 ### Medico (Doctor) - Complete Form Fields
 ```json
 {
  "email": "string (required)",
  "password": "string (required)",
  "full_name": "string (required)",
  "cpf": "string (required)",
  "role": "medico",
  "phone_mobile": "string (optional)",
  "phone": "string (optional)",
  "crm": "string (optional - doctor registration number)",
  "specialty": "string (optional)"
 }
 ```
 ### Secretaria (Secretary) - Complete Form Fields
 ```json
 {
  "email": "string (required)",
  "password": "string (required)",
  "full_name": "string (required)",
  "cpf": "string (required)",
  "role": "secretaria",
  "phone_mobile": "string (optional)",
  "phone": "string (optional)"
 }
 ```
 ### Admin (Administrator) - Complete Form Fields
 ```json
 {
  "email": "string (required)",
  "password": "string (required)",
  "full_name": "string (required)",
  "cpf": "string (required)",
  "role": "admin",
  "phone_mobile": "string (optional)",
  "phone": "string (optional)"
 }
 ```
 ## API Endpoint Documentation
 ### Endpoint
 ```
 POST https://yuanqfswhberkoevtmfr.supabase.co/functions/v1/create-user-with-password
 ```
 ### Authentication
 Requires admin user authentication token in Authorization header.
 ### Headers
 ```json
 {
  "Authorization": "Bearer <access_token>",
  "Content-Type": "application/json"
 }
 ```
 ### Request Body Schema
 ```json
 {
  "email": "string (required)",
  "password": "string (required)",
  "full_name": "string (required)",
  "role": "paciente|medico|secretaria|admin (required)",
  "cpf": "string (format: XXX.XXX.XXX-XX)",
  "phone_mobile": "string (format: (XX) XXXXX-XXXX)",
  "phone": "string (optional)",
  "create_patient_record": "boolean (optional, default: true)"
 }
 ```
 ### Example Request
 ```bash
 curl -X POST "https://yuanqfswhberkoevtmfr.supabase.co/functions/v1/create-user-with-password" \
  -H "Authorization: Bearer YOUR_ACCESS_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "email": "user@example.com",
    "password": "securePassword123",
    "full_name": "John Doe",
    "role": "paciente",
    "cpf": "123.456.789-00",
    "phone_mobile": "(11) 98765-4321"
  }'
 ```
 ## Recommendations
 1. **Form Validation**: Update all user creation forms to enforce the required fields identified above
 2. **Error Handling**: Implement clear error messages for missing required fields
 3. **CPF Validation**: Add client-side CPF format validation and uniqueness checks
 4. **Phone Format**: Validate phone number format before submission
 5. **Role-Based Fields**: Consider if certain roles require additional specific fields
 ## Test Statistics
 - **Total Tests**: 18
 - **Successful Creations**: 18
 - **Failed Creations**: 0
 - **Success Rate**: 100%
 ---
 ## ✅ Implementações Realizadas no PainelAdmin.tsx
 **Data de Implementação:** 2025-11-05
 ### 1. Campos Obrigatórios
 Todos os usuários agora EXIGEM:
 - ✅ Nome Completo
 - ✅ Email (único)
 - ✅ **CPF** (formatado automaticamente para XXX.XXX.XXX-XX)
 - ✅ **Senha** (mínimo 6 caracteres)
 - ✅ Role/Papel
 ### 2. Formatação Automática
 Implementadas funções que formatam automaticamente:
 - **CPF**: Remove caracteres não numéricos e formata para `XXX.XXX.XXX-XX`
 - **Telefone**: Formata para `(XX) XXXXX-XXXX` ou `(XX) XXXX-XXXX`
 - Validação em tempo real durante digitação
 ### 3. Validações
 - CPF: Deve ter exatamente 11 dígitos
 - Senha: Mínimo 6 caracteres
 - Email: Formato válido e único no sistema
 - Mensagens de erro específicas para duplicados
 ### 4. Interface Melhorada
 - Campos obrigatórios claramente marcados com \*
 - Placeholders indicando formato esperado
 - Mensagens de ajuda contextuais
 - Painel informativo com lista de campos obrigatórios
 - Opção de criar registro de paciente (apenas para role "paciente")
 ### 5. Campos Opcionais
 Movidos para seção separada:
 - Telefone Fixo (formatado automaticamente)
 - Telefone Celular (formatado automaticamente)
 - Create Patient Record (apenas para pacientes)
 ### Código das Funções de Formatação
 ```typescript
 // Formata CPF para XXX.XXX.XXX-XX
 const formatCPF = (value: string): string => {
  const numbers = value.replace(/\D/g, "");
  if (numbers.length <= 3) return numbers;
  if (numbers.length <= 6) return `${numbers.slice(0, 3)}.${numbers.slice(3)}`;
  if (numbers.length <= 9)
    return `${numbers.slice(0, 3)}.${numbers.slice(3, 6)}.${numbers.slice(6)}`;
  return `${numbers.slice(0, 3)}.${numbers.slice(3, 6)}.${numbers.slice(
    6,
    9
  )}-${numbers.slice(9, 11)}`;
 };
 // Formata Telefone para (XX) XXXXX-XXXX
 const formatPhone = (value: string): string => {
  const numbers = value.replace(/\D/g, "");
  if (numbers.length <= 2) return numbers;
  if (numbers.length <= 7)
    return `(${numbers.slice(0, 2)}) ${numbers.slice(2)}`;
  if (numbers.length <= 11)
    return `(${numbers.slice(0, 2)}) ${numbers.slice(2, 7)}-${numbers.slice(
      7
    )}`;
  return `(${numbers.slice(0, 2)}) ${numbers.slice(2, 7)}-${numbers.slice(
    7,
    11
  )}`;
 };
 ```
 ### Exemplo de Uso no Formulário
 ```tsx
 <input
  type="text"
  required
  value={userCpf}
  onChange={(e) => setUserCpf(formatCPF(e.target.value))}
  maxLength={14}
  placeholder="000.000.000-00"
 />
 ```
 ---
 ## Secretaria Role Tests (2025-11-05)
 **User:** quemquiser1@gmail.com (Secretária)
 **Test Script:** test-secretaria-api.ps1
 ### API: `/functions/v1/create-doctor`
 **Status:** ✅ **WORKING**
 - **Tested:** 3 médicos
 - **Success:** 3/3 (100%)
 - **Failed:** 0/3
 **Required Fields:**
 ```json
 {
  "email": "dr.exemplo@example.com",
  "full_name": "Dr. Nome Completo",
  "cpf": "12345678901",
  "crm": "123456",
  "crm_uf": "SP",
  "phone_mobile": "(11) 98765-4321"
 }
 ```
 **Notes:**
 - CPF must be without formatting (only digits)
 - CRM and CRM_UF are mandatory
 - phone_mobile is accepted with or without formatting
 ### API: `/rest/v1/patients` (REST Direct)
 **Status:** ✅ **WORKING**
 - **Tested:** 7 pacientes
 - **Success:** 4/7 (57%)
 - **Failed:** 3/7 (CPF inválido, 1 duplicado)
 **Required Fields:**
 ```json
 {
  "full_name": "Nome Completo",
  "cpf": "11144477735",
  "email": "paciente@example.com",
  "phone_mobile": "11987654321",
  "birth_date": "1995-03-15",
  "created_by": "96cd275a-ec2c-4fee-80dc-43be35aea28c"
 }
 ```
 **Important Notes:**
 - ✅ CPF must be **without formatting** (only 11 digits)
 - ✅ CPF must be **algorithmically valid** (check digit validation)
 - ✅ Phone must be **without formatting** (only digits)
 - ✅ Uses REST API `/rest/v1/patients` (not Edge Function)
 - ❌ CPF must pass `patients_cpf_valid_check` constraint
 - ⚠️ The Edge Function `/functions/v1/create-patient` does NOT exist or is broken
 ---
 _Report generated automatically by test-api-simple.ps1 and test-secretaria-api.ps1_
 _PainelAdmin.tsx updated: 2025-11-05_
 _For questions or issues, contact the development team_
--- a/apply-hybrid-auth.ps1
+++ b/apply-hybrid-auth.ps1
@ -1,75 +0,0 @@
 # Aplicar padrão de autenticação híbrida em TODOS os 63 endpoints
 Write-Host "=== BULK UPDATE: HYBRID AUTH PATTERN ===" -ForegroundColor Cyan
 $functionsPath = "supabase/functions"
 $indexFiles = Get-ChildItem -Path $functionsPath -Filter "index.ts" -Recurse
 $updated = 0
 $skipped = 0
 $alreadyDone = 0
 foreach ($file in $indexFiles) {
    $relativePath = $file.FullName.Replace((Get-Location).Path + "\", "")
    $functionName = $file.Directory.Name
    # Pular _shared
    if ($functionName -eq "_shared") {
        continue
    }
    $content = Get-Content $file.FullName -Raw
    # Verificar se já foi atualizado
    if ($content -match "validateExternalAuth|x-external-jwt") {
        Write-Host "✓ $functionName - Already updated" -ForegroundColor DarkGray
        $alreadyDone++
        continue
    }
    # Verificar se tem autenticação para substituir
    $hasOldAuth = $content -match 'auth\.getUser\(\)|Authorization.*req\.headers'
    if (-not $hasOldAuth) {
        Write-Host "⊘ $functionName - No auth found" -ForegroundColor Gray
        $skipped++
        continue
    }
    Write-Host "🔄 $functionName - Updating..." -ForegroundColor Yellow
    # 1. Adicionar import do helper (após imports do supabase-js)
    if ($content -match 'import.*supabase-js') {
        $content = $content -replace '(import.*from.*supabase-js.*?\n)', "`$1import { validateExternalAuth } from ""../_shared/auth.ts"";`n"
    }
    # 2. Substituir padrão de autenticação
    # Padrão antigo 1: const authHeader = req.headers.get("Authorization"); + createClient + auth.getUser()
    $content = $content -replace '(?s)const authHeader = req\.headers\.get\("Authorization"\);?\s*const supabase = createClient\([^)]+\)[^;]*;?\s*const \{ data: \{ user \}[^}]*\} = await supabase\.auth\.getUser\(\);?\s*if \(!user\)[^}]*\{[^}]*\}', @'
 const { user, externalSupabase, ownSupabase } = await validateExternalAuth(req);
    const supabase = ownSupabase;
 '@
    # Padrão antigo 2: apenas createClient + auth.getUser() sem authHeader
    $content = $content -replace '(?s)const supabase = createClient\([^)]+,[^)]+,\s*\{ global: \{ headers: \{ Authorization: authHeader[^}]*\}[^)]*\);?\s*const \{ data: \{ user \}[^}]*\} = await supabase\.auth\.getUser\(\);?\s*if \(!user\)[^}]*\{[^}]*\}', @'
 const { user, externalSupabase, ownSupabase } = await validateExternalAuth(req);
    const supabase = ownSupabase;
 '@
    # Salvar
    Set-Content -Path $file.FullName -Value $content -NoNewline
    $updated++
    Write-Host "✅ $functionName" -ForegroundColor Green
 }
 Write-Host ""
 Write-Host "=== SUMMARY ===" -ForegroundColor Cyan
 Write-Host "✅ Updated: $updated" -ForegroundColor Green
 Write-Host "✓ Already done: $alreadyDone" -ForegroundColor Gray
 Write-Host "⊘ Skipped: $skipped" -ForegroundColor Yellow
 Write-Host ""
 if ($updated -gt 0) {
    Write-Host "Next step: Deploy all functions" -ForegroundColor Yellow
    Write-Host "Run: pnpx supabase functions deploy" -ForegroundColor Cyan
 }
--- a/bulk-update-auth.py
+++ b/bulk-update-auth.py
@ -1,111 +0,0 @@
 #!/usr/bin/env python3
 """
 Aplicar padrão hybrid auth em TODOS os endpoints restantes
 """
 import os
 import re
 from pathlib import Path
 FUNCTIONS_DIR = Path("supabase/functions")
 # Endpoints que precisam de auth
 ENDPOINTS_WITH_AUTH = [
    "user-update-preferences",
    "appointments-create",
    "appointments-update",
    "appointments-cancel",
    "patients-history",
    "patients-preferences",
    "patients-portal",
    "waitlist-remove",
    "waitlist-match",
    "exceptions-create",
    "exceptions-delete",
    "exceptions-list",
    "doctor-occupancy",
    "doctor-delay-suggestion",
    "audit-list",
    "analytics-heatmap",
    "analytics-demand-curve",
    "analytics-ranking-reasons",
    "analytics-monthly-no-show",
    "analytics-specialty-heatmap",
    "analytics-custom-report",
    "reports-list-extended",
    "reports-export-csv",
    "reports-integrity-check",
    "notifications-subscription",
    "queue-checkin",
    "system-health-check",
    "system-cache-rebuild",
    "system-cron-runner",
    "accessibility-preferences",
 ]
 def update_endpoint(endpoint_name):
    index_file = FUNCTIONS_DIR / endpoint_name / "index.ts"
    if not index_file.exists():
        print(f"⚠️  {endpoint_name} - File not found")
        return False
    content = index_file.read_text()
    # Verificar se já foi atualizado
    if "validateExternalAuth" in content or "x-external-jwt" in content:
        print(f"✓ {endpoint_name} - Already updated")
        return True
    # Verificar se tem auth para substituir
    if "auth.getUser()" not in content:
        print(f"⊘ {endpoint_name} - No auth pattern")
        return False
    print(f"🔄 {endpoint_name} - Updating...")
    # 1. Adicionar/substituir import
    if 'import { createClient } from "https://esm.sh/@supabase/supabase-js@2";' in content:
        content = content.replace(
            'import { createClient } from "https://esm.sh/@supabase/supabase-js@2";',
            'import { validateExternalAuth } from "../_shared/auth.ts";'
        )
    elif 'import { corsHeaders } from "../_shared/cors.ts";' in content:
        content = content.replace(
            'import { corsHeaders } from "../_shared/cors.ts";',
            'import { corsHeaders } from "../_shared/cors.ts";\nimport { validateExternalAuth } from "../_shared/auth.ts";'
        )
    # 2. Substituir padrão de autenticação
    # Pattern 1: com authHeader
    pattern1 = r'const authHeader = req\.headers\.get\("Authorization"\);?\s*(if \(!authHeader\)[^}]*\})?\s*const supabase = createClient\([^)]+,[^)]+,\s*\{ global: \{ headers: \{ Authorization: authHeader[^}]*\}[^)]*\);?\s*const \{ data: \{ user \}[^}]*\} = await supabase\.auth\.getUser\(\);?\s*(if \([^)]*authError[^}]*\{[^}]*\})?'
    replacement1 = '''const { user, ownSupabase } = await validateExternalAuth(req);
    const supabase = ownSupabase;'''
    content = re.sub(pattern1, replacement1, content, flags=re.MULTILINE | re.DOTALL)
    # Salvar
    index_file.write_text(content)
    print(f"✅ {endpoint_name}")
    return True
 def main():
    print("=== BULK UPDATE: HYBRID AUTH ===\n")
    updated = 0
    skipped = 0
    for endpoint in ENDPOINTS_WITH_AUTH:
        if update_endpoint(endpoint):
            updated += 1
        else:
            skipped += 1
    print(f"\n=== SUMMARY ===")
    print(f"✅ Updated: {updated}")
    print(f"⊘ Skipped: {skipped}")
    print(f"\nNext: pnpx supabase functions deploy")
 if __name__ == "__main__":
    main()
--- a/create-and-deploy.ps1
+++ b/create-and-deploy.ps1
@ -1,102 +0,0 @@
 # Script simples para criar e fazer deploy dos endpoints faltantes
 $ErrorActionPreference = "Stop"
 $baseDir = "C:\Users\raild\MEDICONNECT 13-11\riseup-squad18\supabase\functions"
 $endpoints = @(
    "availability-create",
    "availability-update",
    "availability-delete",
    "availability-slots",
    "exceptions-list",
    "exceptions-create",
    "exceptions-delete",
    "waitlist-match",
    "waitlist-remove",
    "queue-checkin",
    "notifications-subscription",
    "reports-list-extended",
    "reports-export-csv",
    "reports-integrity-check",
    "doctor-summary",
    "doctor-occupancy",
    "doctor-delay-suggestion",
    "patients-history",
    "patients-preferences",
    "patients-portal",
    "analytics-heatmap",
    "analytics-demand-curve",
    "analytics-ranking-reasons",
    "analytics-monthly-no-show",
    "analytics-specialty-heatmap",
    "analytics-custom-report",
    "accessibility-preferences",
    "audit-list",
    "system-health-check",
    "system-cache-rebuild",
    "system-cron-runner"
 )
 $simpleTemplate = @'
 import { createClient } from "https://esm.sh/@supabase/supabase-js@2";
 const corsHeaders = {
  "Access-Control-Allow-Origin": "*",
  "Access-Control-Allow-Headers": "authorization, x-client-info, apikey, content-type",
 };
 Deno.serve(async (req) => {
  if (req.method === "OPTIONS") return new Response("ok", { headers: corsHeaders });
  try {
    const authHeader = req.headers.get("Authorization");
    const supabase = createClient(
      Deno.env.get("SUPABASE_URL")!,
      Deno.env.get("SUPABASE_ANON_KEY")!,
      { global: { headers: { Authorization: authHeader! } } }
    );
    const { data: { user } } = await supabase.auth.getUser();
    if (!user) throw new Error("Unauthorized");
    // TODO: Implement endpoint logic
    const data = { status: "ok", endpoint: "ENDPOINT_NAME" };
    return new Response(
      JSON.stringify({ success: true, data }),
      { headers: { ...corsHeaders, "Content-Type": "application/json" } }
    );
  } catch (error: any) {
    return new Response(
      JSON.stringify({ success: false, error: error.message }),
      { status: 400, headers: { ...corsHeaders, "Content-Type": "application/json" } }
    );
  }
 });
 '@
 Write-Host "Creating $($endpoints.Count) endpoints..." -ForegroundColor Cyan
 foreach ($endpoint in $endpoints) {
    $dirPath = Join-Path $baseDir $endpoint
    $filePath = Join-Path $dirPath "index.ts"
    if (!(Test-Path $dirPath)) {
        New-Item -ItemType Directory -Path $dirPath -Force | Out-Null
    }
    $content = $simpleTemplate.Replace("ENDPOINT_NAME", $endpoint)
    Set-Content -Path $filePath -Value $content -Encoding UTF8
    Write-Host "Created: $endpoint" -ForegroundColor Green
 }
 Write-Host "`nDeploying all endpoints..." -ForegroundColor Cyan
 Set-Location "C:\Users\raild\MEDICONNECT 13-11\riseup-squad18"
 foreach ($endpoint in $endpoints) {
    Write-Host "Deploying $endpoint..." -ForegroundColor Yellow
    pnpx supabase functions deploy $endpoint --no-verify-jwt
 }
 Write-Host "`nDone! Check status with: pnpx supabase functions list" -ForegroundColor Green
--- a/deploy-all-endpoints.ps1
+++ b/deploy-all-endpoints.ps1
@ -1,125 +0,0 @@
 # Script para criar e fazer deploy de todos os 36 endpoints faltantes
 # Execute: .\deploy-all-endpoints.ps1
 $baseDir = "C:\Users\raild\MEDICONNECT 13-11\riseup-squad18\supabase\functions"
 # Template base para endpoints
 $template = @"
 // __DESCRIPTION__
 import { createClient } from "https://esm.sh/@supabase/supabase-js@2";
 const corsHeaders = {
  "Access-Control-Allow-Origin": "*",
  "Access-Control-Allow-Headers": "authorization, x-client-info, apikey, content-type",
 };
 function externalRest(path: string, method: string = "GET", body?: any): Promise<any> {
  const url = `${Deno.env.get("EXTERNAL_SUPABASE_URL")}/rest/v1/${path}`;
  return fetch(url, {
    method,
    headers: {
      "Content-Type": "application/json",
      "apikey": Deno.env.get("EXTERNAL_SUPABASE_KEY")!,
      "Authorization": `Bearer ${Deno.env.get("EXTERNAL_SUPABASE_KEY")}`,
      "Prefer": "return=representation"
    },
    body: body ? JSON.stringify(body) : undefined
  }).then(r => r.json());
 }
 Deno.serve(async (req) => {
  if (req.method === "OPTIONS") return new Response("ok", { headers: corsHeaders });
  try {
    const authHeader = req.headers.get("Authorization");
    const supabase = createClient(
      Deno.env.get("SUPABASE_URL")!,
      Deno.env.get("SUPABASE_ANON_KEY")!,
      { global: { headers: { Authorization: authHeader! } } }
    );
    const { data: { user } } = await supabase.auth.getUser();
    if (!user) throw new Error("Unauthorized");
 __LOGIC__
    return new Response(
      JSON.stringify({ success: true, data }),
      { headers: { ...corsHeaders, "Content-Type": "application/json" } }
    );
  } catch (error: any) {
    return new Response(
      JSON.stringify({ success: false, error: error.message }),
      { status: 400, headers: { ...corsHeaders, "Content-Type": "application/json" } }
    );
  }
 });
 "@
 # Lista de endpoints para criar
 $endpoints = @(
    @{name="availability-create"; logic="    const body = await req.json();`n    const { data, error } = await supabase.from('doctor_availability').insert(body).select().single();`n    if (error) throw error;"},
    @{name="availability-update"; logic="    const body = await req.json();`n    const { id, ...updates } = body;`n    const { data, error } = await supabase.from('doctor_availability').update(updates).eq('id', id).select().single();`n    if (error) throw error;"},
    @{name="availability-delete"; logic="    const { id } = await req.json();`n    const { data, error } = await supabase.from('doctor_availability').update({is_active: false}).eq('id', id).select().single();`n    if (error) throw error;"},
    @{name="availability-slots"; logic="    const url = new URL(req.url);`n    const doctor_id = url.searchParams.get('doctor_id')!;`n    const { data, error } = await supabase.from('doctor_availability').select('*').eq('doctor_id', doctor_id).eq('is_active', true);`n    if (error) throw error;"},
    @{name="exceptions-list"; logic="    const url = new URL(req.url);`n    const doctor_id = url.searchParams.get('doctor_id');`n    let query = supabase.from('availability_exceptions').select('*');`n    if (doctor_id) query = query.eq('doctor_id', doctor_id);`n    const { data, error } = await query.order('exception_date');`n    if (error) throw error;"},
    @{name="exceptions-create"; logic="    const body = await req.json();`n    const { data, error } = await supabase.from('availability_exceptions').insert(body).select().single();`n    if (error) throw error;"},
    @{name="exceptions-delete"; logic="    const { id } = await req.json();`n    const { data, error } = await supabase.from('availability_exceptions').delete().eq('id', id);`n    if (error) throw error;"},
    @{name="waitlist-match"; logic="    const { doctor_id, appointment_date } = await req.json();`n    const { data, error } = await supabase.from('waitlist').select('*').eq('doctor_id', doctor_id).eq('status', 'waiting').order('priority', {ascending: false}).limit(1);`n    if (error) throw error;"},
    @{name="waitlist-remove"; logic="    const { id } = await req.json();`n    const { data, error } = await supabase.from('waitlist').update({status: 'cancelled'}).eq('id', id).select().single();`n    if (error) throw error;"},
    @{name="queue-checkin"; logic="    const { patient_id } = await req.json();`n    const { data, error } = await supabase.from('virtual_queue').insert({patient_id, status: 'waiting'}).select().single();`n    if (error) throw error;"},
    @{name="notifications-subscription"; logic="    const body = await req.json();`n    const { data, error } = await supabase.from('notification_subscriptions').upsert(body).select().single();`n    if (error) throw error;"},
    @{name="reports-list-extended"; logic="    const url = new URL(req.url);`n    const data = await externalRest('reports' + url.search);"},
    @{name="reports-export-csv"; logic="    const url = new URL(req.url);`n    const report_id = url.searchParams.get('report_id');`n    const data = await externalRest(`reports?id=eq.${report_id}`);"},
    @{name="reports-integrity-check"; logic="    const { report_id } = await req.json();`n    const { data, error } = await supabase.from('report_integrity').select('*').eq('report_id', report_id).single();`n    if (error) throw error;"},
    @{name="doctor-summary"; logic="    const url = new URL(req.url);`n    const doctor_id = url.searchParams.get('doctor_id') || user.id;`n    const { data, error } = await supabase.from('doctor_stats').select('*').eq('doctor_id', doctor_id).single();`n    if (error) throw error;"},
    @{name="doctor-occupancy"; logic="    const url = new URL(req.url);`n    const doctor_id = url.searchParams.get('doctor_id') || user.id;`n    const { data, error } = await supabase.from('doctor_stats').select('occupancy_rate').eq('doctor_id', doctor_id).single();`n    if (error) throw error;"},
    @{name="doctor-delay-suggestion"; logic="    const url = new URL(req.url);`n    const doctor_id = url.searchParams.get('doctor_id') || user.id;`n    const { data, error } = await supabase.from('doctor_stats').select('average_delay_minutes').eq('doctor_id', doctor_id).single();`n    if (error) throw error;"},
    @{name="patients-history"; logic="    const url = new URL(req.url);`n    const patient_id = url.searchParams.get('patient_id') || user.id;`n    const { data, error} = await supabase.from('patient_extended_history').select('*').eq('patient_id', patient_id).order('visit_date', {ascending: false});`n    if (error) throw error;"},
    @{name="patients-preferences"; logic="    const url = new URL(req.url);`n    const patient_id = url.searchParams.get('patient_id') || user.id;`n    const { data, error } = await supabase.from('patient_preferences').select('*').eq('patient_id', patient_id).single();`n    if (error) throw error;"},
    @{name="patients-portal"; logic="    const url = new URL(req.url);`n    const patient_id = url.searchParams.get('patient_id') || user.id;`n    const appointments = await externalRest(`appointments?patient_id=eq.${patient_id}&order=appointment_date.desc&limit=10`);`n    const { data: history } = await supabase.from('patient_extended_history').select('*').eq('patient_id', patient_id).limit(5);`n    const data = { appointments, history };"},
    @{name="analytics-heatmap"; logic="    const appointments = await externalRest('appointments?select=appointment_date,appointment_time');`n    const data = appointments;"},
    @{name="analytics-demand-curve"; logic="    const data = await externalRest('appointments?select=appointment_date&order=appointment_date');"},
    @{name="analytics-ranking-reasons"; logic="    const data = await externalRest('appointments?select=reason');"},
    @{name="analytics-monthly-no-show"; logic="    const data = await externalRest('appointments?status=eq.no_show&select=appointment_date');"},
    @{name="analytics-specialty-heatmap"; logic="    const { data, error } = await supabase.from('doctor_stats').select('*');`n    if (error) throw error;"},
    @{name="analytics-custom-report"; logic="    const body = await req.json();`n    const data = await externalRest(body.query);"},
    @{name="accessibility-preferences"; logic="    const body = await req.json();`n    const { data, error } = await supabase.from('user_preferences').upsert({user_id: user.id, ...body}).select().single();`n    if (error) throw error;"},
    @{name="audit-list"; logic="    const url = new URL(req.url);`n    const { data, error } = await supabase.from('audit_actions').select('*').order('timestamp', {ascending: false}).limit(100);`n    if (error) throw error;"},
    @{name="system-health-check"; logic="    const data = { status: 'healthy', timestamp: new Date().toISOString() };"},
    @{name="system-cache-rebuild"; logic="    const { data, error } = await supabase.from('analytics_cache').delete().neq('cache_key', '');`n    if (error) throw error;"},
    @{name="system-cron-runner"; logic="    const data = { status: 'executed', timestamp: new Date().toISOString() };"}
 )
 Write-Host "🚀 Criando $($endpoints.Count) endpoints..." -ForegroundColor Cyan
 foreach ($endpoint in $endpoints) {
    $dirPath = Join-Path $baseDir $endpoint.name
    $filePath = Join-Path $dirPath "index.ts"
    # Criar diretório
    if (!(Test-Path $dirPath)) {
        New-Item -ItemType Directory -Path $dirPath -Force | Out-Null
    }
    # Criar arquivo
    $content = $template.Replace("__DESCRIPTION__", "ENDPOINT: /$($endpoint.name)").Replace("__LOGIC__", $endpoint.logic)
    Set-Content -Path $filePath -Value $content -Encoding UTF8
    Write-Host "✅ Criado: $($endpoint.name)" -ForegroundColor Green
 }
 Write-Host "`n📦 Iniciando deploy de todos os endpoints..." -ForegroundColor Cyan
 # Deploy todos de uma vez
 $functionNames = $endpoints | ForEach-Object { $_.name }
 $functionList = $functionNames -join " "
 Set-Location "C:\Users\raild\MEDICONNECT 13-11\riseup-squad18"
 $deployCmd = "pnpx supabase functions deploy --no-verify-jwt $functionList"
 Write-Host "Executando: $deployCmd" -ForegroundColor Yellow
 Invoke-Expression $deployCmd
 Write-Host "`n✨ Deploy concluído!" -ForegroundColor Green
 Write-Host "Verifique com: pnpx supabase functions list" -ForegroundColor Cyan
--- a/deploy-final.ps1
+++ b/deploy-final.ps1
@ -1,53 +0,0 @@
 # Deploy FINAL dos 19 endpoints restantes
 Write-Host "Deployando os 19 endpoints finais..." -ForegroundColor Cyan
 $endpoints = @(
    "availability-create",
    "availability-update",
    "availability-delete",
    "exceptions-delete",
    "waitlist-remove",
    "reports-export-csv",
    "reports-integrity-check",
    "doctor-occupancy",
    "doctor-delay-suggestion",
    "patients-preferences",
    "patients-portal",
    "analytics-demand-curve",
    "analytics-ranking-reasons",
    "analytics-monthly-no-show",
    "analytics-specialty-heatmap",
    "analytics-custom-report",
    "system-health-check",
    "system-cache-rebuild",
    "system-cron-runner"
 )
 $total = $endpoints.Count
 $current = 0
 $success = 0
 $failed = 0
 foreach ($endpoint in $endpoints) {
    $current++
    Write-Host "[$current/$total] Deploying $endpoint..." -ForegroundColor Yellow
    pnpx supabase functions deploy $endpoint --no-verify-jwt 2>&1 | Out-Null
    if ($LASTEXITCODE -eq 0) {
        Write-Host "  OK $endpoint deployed" -ForegroundColor Green
        $success++
    } else {
        Write-Host "  FAIL $endpoint failed" -ForegroundColor Red
        $failed++
    }
 }
 Write-Host ""
 Write-Host "Deploy concluido!" -ForegroundColor Cyan
 Write-Host "Sucesso: $success" -ForegroundColor Green
 Write-Host "Falhas: $failed" -ForegroundColor Red
 Write-Host ""
 Write-Host "Verificando status final..." -ForegroundColor Cyan
 pnpx supabase functions list
--- a/deploy-implemented.ps1
+++ b/deploy-implemented.ps1
@ -1,42 +0,0 @@
 # Deploy dos endpoints implementados com arquitetura correta
 # Supabase Externo = appointments, doctors, patients, reports
 # Nosso Supabase = features extras, KPIs, tracking
 Write-Host "🚀 Deployando 12 endpoints implementados..." -ForegroundColor Cyan
 $endpoints = @(
    # Endpoints que MESCLAM (Externo + Nosso)
    "doctor-summary",
    "patients-history",
    "reports-list-extended",
    "analytics-heatmap",
    # Endpoints 100% NOSSOS
    "waitlist-match",
    "exceptions-list",
    "exceptions-create",
    "queue-checkin",
    "notifications-subscription",
    "accessibility-preferences",
    "audit-list",
    "availability-slots"
 )
 $total = $endpoints.Count
 $current = 0
 foreach ($endpoint in $endpoints) {
    $current++
    Write-Host "[$current/$total] Deploying $endpoint..." -ForegroundColor Yellow
    pnpx supabase functions deploy $endpoint --no-verify-jwt 2>&1 | Out-Null
    if ($LASTEXITCODE -eq 0) {
        Write-Host "  ✅ $endpoint deployed" -ForegroundColor Green
    } else {
        Write-Host "  ❌ $endpoint failed" -ForegroundColor Red
    }
 }
 Write-Host "`n✨ Deploy concluído! Verificando status..." -ForegroundColor Cyan
 pnpx supabase functions list
--- a/env.example
+++ b/env.example
@ -1,9 +0,0 @@
 # Exemplo de configuração de variáveis de ambiente
 # Supabase do seu projeto (novo)
 SUPABASE_URL=https://seu-projeto.supabase.co
 SUPABASE_SERVICE_KEY=seu-service-role-key-aqui
 # Supabase "fechado" da empresa (externo)
 EXTERNAL_SUPABASE_URL=https://supabase-da-empresa.supabase.co
 EXTERNAL_SUPABASE_KEY=token-do-supabase-fechado
--- a/functions/api/chat.ts
+++ b/functions/api/chat.ts
@ -1,415 +0,0 @@
 /**
 * Cloudflare Workers function for chatbot API
 * Proxies requests to Groq API using the secure API key from environment variables
 * Provides role-specific assistance based on user type (médico, paciente, secretária)
 */
 interface Env {
  GROQ_API_KEY: string;
  SUPABASE_URL: string;
  SUPABASE_ANON_KEY: string;
 }
 interface ChatMessage {
  role: "user" | "assistant" | "system";
  content: string;
 }
 interface ChatRequest {
  messages: ChatMessage[];
  token?: string;
 }
 interface UserProfile {
  id: string;
  role: "medico" | "paciente" | "secretaria" | "admin";
  nome?: string;
  especialidade?: string;
 }
 async function getUserProfile(
  token: string,
  env: Env
 ): Promise<UserProfile | null> {
  try {
    const supabaseUrl =
      env.SUPABASE_URL || "https://yuanqfswhberkoevtmfr.supabase.co";
    // Get user from token
    const userResponse = await fetch(`${supabaseUrl}/auth/v1/user`, {
      headers: {
        Authorization: `Bearer ${token}`,
        apikey: env.SUPABASE_ANON_KEY,
      },
    });
    if (!userResponse.ok) return null;
    const user = await userResponse.json();
    // Get user profile from usuarios table
    const profileResponse = await fetch(
      `${supabaseUrl}/rest/v1/usuarios?id=eq.${user.id}&select=id,role,nome,especialidade`,
      {
        headers: {
          Authorization: `Bearer ${token}`,
          apikey: env.SUPABASE_ANON_KEY,
          "Content-Type": "application/json",
        },
      }
    );
    if (!profileResponse.ok) return null;
    const profiles = await profileResponse.json();
    return profiles[0] || null;
  } catch (error) {
    console.error("Error fetching user profile:", error);
    return null;
  }
 }
 function getRoleSpecificPrompt(profile: UserProfile | null): string {
  if (!profile) {
    return `Você é a Conni, a Assistente Virtual do MediConnect, uma plataforma de gestão médica.
 SEU NOME: Conni - sempre se apresente como "Conni" quando perguntarem seu nome.
 Suas responsabilidades:
 - Responder dúvidas gerais sobre o sistema
 - Explicar funcionalidades básicas
 - Orientar sobre como fazer login
 - Fornecer informações sobre agendamento de consultas
 IMPORTANTE:
 - NUNCA solicite ou processe dados sensíveis de pacientes (PHI)
 - NUNCA forneça diagnósticos médicos
 - Seja sempre educado, claro e objetivo
 - Responda em português do Brasil`;
  }
  const baseRules = `
 REGRAS IMPORTANTES:
 - SEU NOME É CONNI - sempre se apresente como "Conni" quando perguntarem
 - NUNCA solicite ou processe dados sensíveis de pacientes (PHI) em detalhes
 - NUNCA forneça diagnósticos médicos
 - Seja sempre educado, claro e objetivo
 - Responda em português do Brasil
 - Forneça informações práticas e orientações de uso do sistema`;
  switch (profile.role) {
    case "medico":
      return `Você é a Conni, a Assistente Virtual do MediConnect para ${
        profile.nome || "Médico"
      }${profile.especialidade ? ` - ${profile.especialidade}` : ""}.
 SEU NOME: Conni - sempre se apresente como "Conni" quando perguntarem seu nome.
 FUNCIONALIDADES DISPONÍVEIS PARA MÉDICOS:
 1. **Agenda e Consultas**:
   - Visualizar agenda do dia/semana/mês
   - Gerenciar disponibilidade de horários
   - Confirmar ou reagendar consultas
   - Adicionar exceções de horários (férias, folgas)
 2. **Prontuários**:
   - Acessar histórico completo de pacientes
   - Adicionar evoluções e diagnósticos
   - Registrar prescrições e exames
   - Visualizar consultas anteriores
 3. **Atendimentos**:
   - Iniciar consulta do dia
   - Registrar informações durante atendimento
   - Gerar relatórios de atendimento
   - Solicitar exames complementares
 4. **Comunicação**:
   - Sistema de mensagens com pacientes
   - Enviar orientações pós-consulta
   - Responder dúvidas gerais (não diagnósticos remotos)
 5. **Relatórios e Estatísticas**:
   - Visualizar número de atendimentos
   - Consultar taxa de comparecimento
   - Acessar métricas de desempenho
 VOCÊ PODE AJUDAR O MÉDICO A:
 - Explicar como usar cada funcionalidade
 - Encontrar opções no painel médico
 - Resolver problemas técnicos
 - Otimizar o fluxo de trabalho
 ${baseRules}`;
    case "paciente":
      return `Você é a Conni, a Assistente Virtual do MediConnect para ${
        profile.nome || "Paciente"
      }.
 SEU NOME: Conni - sempre se apresente como "Conni" quando perguntarem seu nome.
 FUNCIONALIDADES DISPONÍVEIS PARA PACIENTES:
 1. **Agendamento de Consultas**:
   - Buscar médicos por especialidade
   - Visualizar horários disponíveis
   - Agendar nova consulta
   - Reagendar ou cancelar consultas existentes
   - Receber confirmações por SMS/email
 2. **Minhas Consultas**:
   - Ver consultas agendadas (próximas e histórico)
   - Visualizar detalhes da consulta
   - Informações do médico (especialidade, local)
   - Status da consulta (confirmada, pendente, concluída)
 3. **Histórico Médico**:
   - Acessar prontuário pessoal
   - Visualizar diagnósticos anteriores
   - Consultar prescrições médicas
   - Ver resultados de exames (se disponível)
 4. **Comunicação**:
   - Enviar mensagens para médicos
   - Receber orientações pós-consulta
   - Tirar dúvidas gerais (não substitui consulta)
 5. **Perfil**:
   - Atualizar dados pessoais
   - Gerenciar informações de contato
   - Configurar preferências de notificação
 VOCÊ PODE AJUDAR O PACIENTE A:
 - Agendar e gerenciar consultas
 - Encontrar médicos e especialidades
 - Navegar pelo sistema
 - Entender como acessar informações médicas
 - Resolver dúvidas sobre o uso da plataforma
 ${baseRules}
 ATENÇÃO: Para dúvidas médicas específicas, oriente a agendar uma consulta.`;
    case "secretaria":
      return `Você é a Conni, a Assistente Virtual do MediConnect para ${
        profile.nome || "Secretária"
      }.
 SEU NOME: Conni - sempre se apresente como "Conni" quando perguntarem seu nome.
 FUNCIONALIDADES DISPONÍVEIS PARA SECRETÁRIAS:
 1. **Gestão de Agenda**:
   - Visualizar agenda de todos os médicos
   - Agendar consultas para pacientes
   - Confirmar, reagendar ou cancelar consultas
   - Gerenciar lista de espera
   - Bloquear horários para eventos especiais
 2. **Cadastro de Pacientes**:
   - Registrar novos pacientes
   - Atualizar dados cadastrais
   - Verificar histórico de consultas
   - Gerenciar documentos e informações de contato
 3. **Atendimento e Recepção**:
   - Confirmar presença de pacientes
   - Registrar chegadas
   - Informar atrasos aos médicos
   - Gerenciar fila de atendimento
 4. **Comunicação**:
   - Enviar lembretes de consultas (SMS/email)
   - Confirmar agendamentos
   - Notificar cancelamentos
   - Comunicar mudanças de horário
 5. **Relatórios Administrativos**:
   - Gerar relatórios de agendamento
   - Consultar taxa de ocupação
   - Visualizar estatísticas de comparecimento
   - Exportar dados para gestão
 6. **Gestão de Médicos**:
   - Visualizar disponibilidade dos médicos
   - Coordenar exceções de agenda
   - Gerenciar escalas e plantões
 VOCÊ PODE AJUDAR A SECRETÁRIA A:
 - Otimizar processos de agendamento
 - Resolver conflitos de horários
 - Encontrar funcionalidades no painel
 - Gerenciar múltiplos médicos e pacientes
 - Usar ferramentas de comunicação
 - Gerar relatórios necessários
 ${baseRules}`;
    case "admin":
      return `Você é o Assistente Virtual do MediConnect para Administrador.
 FUNCIONALIDADES ADMINISTRATIVAS:
 - Gestão completa de usuários (médicos, pacientes, secretárias)
 - Configurações do sistema
 - Relatórios avançados e analytics
 - Gerenciamento de permissões
 - Monitoramento de performance
 - Configurações de notificações
 ${baseRules}`;
    default:
      return `Você é o Assistente Virtual do MediConnect.
 ${baseRules}`;
  }
 }
 export async function onRequest(context: { request: Request; env: Env }) {
  // Handle CORS preflight
  if (context.request.method === "OPTIONS") {
    return new Response(null, {
      headers: {
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Methods": "POST, OPTIONS",
        "Access-Control-Allow-Headers": "Content-Type, Authorization",
      },
    });
  }
  if (context.request.method !== "POST") {
    return new Response("Method not allowed", { status: 405 });
  }
  try {
    const body: ChatRequest = await context.request.json();
    // Validate Groq API key
    if (!context.env.GROQ_API_KEY) {
      console.error("GROQ_API_KEY not configured");
      return new Response(
        JSON.stringify({
          reply:
            "O serviço de chat está temporariamente indisponível. Por favor, contate o suporte.",
        }),
        {
          status: 200,
          headers: {
            "Content-Type": "application/json",
            "Access-Control-Allow-Origin": "*",
          },
        }
      );
    }
    // Get user profile from token
    const authHeader = context.request.headers.get("Authorization");
    const token = body.token || authHeader?.replace("Bearer ", "");
    const userProfile = token ? await getUserProfile(token, context.env) : null;
    // Get role-specific system prompt
    const systemPrompt: ChatMessage = {
      role: "system",
      content: getRoleSpecificPrompt(userProfile),
    };
    // Prepare messages for OpenAI
    const messages = [systemPrompt, ...body.messages];
    // Call Groq API
    const openaiResponse = await fetch(
      "https://api.groq.com/openai/v1/chat/completions",
      {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${context.env.GROQ_API_KEY}`,
        },
        body: JSON.stringify({
          model: "llama-3.3-70b-versatile",
          messages: messages,
          max_tokens: 1000,
          temperature: 0.7,
        }),
      }
    );
    if (!openaiResponse.ok) {
      const errorText = await openaiResponse.text();
      console.error("Groq API error:", openaiResponse.status, errorText);
      // Handle specific error cases
      if (openaiResponse.status === 401) {
        return new Response(
          JSON.stringify({
            reply:
              "Erro de autenticação com o serviço de IA. Por favor, contate o administrador.",
          }),
          {
            status: 200,
            headers: {
              "Content-Type": "application/json",
              "Access-Control-Allow-Origin": "*",
            },
          }
        );
      }
      if (openaiResponse.status === 429) {
        return new Response(
          JSON.stringify({
            reply:
              "O serviço está temporariamente sobrecarregado. Por favor, tente novamente em alguns instantes.",
          }),
          {
            status: 200,
            headers: {
              "Content-Type": "application/json",
              "Access-Control-Allow-Origin": "*",
            },
          }
        );
      }
      return new Response(
        JSON.stringify({
          reply:
            "Desculpe, ocorreu um erro ao processar sua mensagem. Tente novamente.",
        }),
        {
          status: 200,
          headers: {
            "Content-Type": "application/json",
            "Access-Control-Allow-Origin": "*",
          },
        }
      );
    }
    const data = await openaiResponse.json();
    const reply =
      data.choices[0]?.message?.content ||
      "Desculpe, não consegui gerar uma resposta.";
    return new Response(JSON.stringify({ reply }), {
      headers: {
        "Content-Type": "application/json",
        "Access-Control-Allow-Origin": "*",
      },
    });
  } catch (error) {
    console.error("Chat API error:", error);
    const errorMessage =
      error instanceof Error ? error.message : "Unknown error";
    console.error("Error details:", errorMessage);
    return new Response(
      JSON.stringify({
        reply:
          "Desculpe, ocorreu um erro ao processar sua mensagem. Tente novamente.",
      }),
      {
        status: 200,
        headers: {
          "Content-Type": "application/json",
          "Access-Control-Allow-Origin": "*",
        },
      }
    );
  }
 }
--- a/mediConnect-roadmap.md
+++ b/mediConnect-roadmap.md
--- a/package.json
+++ b/package.json
@ -13,11 +13,8 @@
  },
  "dependencies": {
    "@supabase/supabase-js": "^2.76.1",
    "@tanstack/react-query": "^5.90.11",
    "@tanstack/react-query-devtools": "^5.91.1",
    "axios": "^1.12.2",
    "date-fns": "^2.30.0",
    "fuse.js": "^7.1.0",
    "html2canvas": "^1.4.1",
    "jspdf": "^3.0.3",
    "lucide-react": "^0.540.0",
@ -25,7 +22,6 @@
    "react-dom": "^18.3.1",
    "react-hot-toast": "^2.4.1",
    "react-router-dom": "^6.26.0",
    "recharts": "^3.5.0",
    "zod": "^3.23.8"
  },
  "devDependencies": {
@ -41,13 +37,10 @@
    "eslint-plugin-react-refresh": "^0.4.11",
    "globals": "^15.9.0",
    "postcss": "^8.5.6",
    "supabase": "^2.62.5",
    "tailwindcss": "^3.4.17",
    "typescript": "^5.5.3",
    "typescript-eslint": "^8.3.0",
    "vite": "^7.1.10",
    "vite-plugin-pwa": "^1.2.0",
    "workbox-window": "^7.4.0",
    "wrangler": "^4.45.3"
  },
  "pnpm": {
@ -55,12 +48,6 @@
      "lru-cache": "7.18.3",
      "@babel/helper-compilation-targets": "7.25.9",
      "@asamuzakjp/css-color": "3.2.0"
-    },
+    }
    "onlyBuiltDependencies": [
      "@swc/core",
      "esbuild",
      "puppeteer",
      "supabase"
    ]
  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/quick-test.ps1
+++ b/quick-test.ps1
@ -1,38 +0,0 @@
 # Quick test script
 $body = '{"email":"riseup@popcode.com.br","password":"riseup"}'
 $resp = Invoke-RestMethod -Uri "https://yuanqfswhberkoevtmfr.supabase.co/auth/v1/token?grant_type=password" -Method Post -Body $body -ContentType "application/json" -Headers @{"apikey"="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Inl1YW5xZnN3aGJlcmtvZXZ0bWZyIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NTQ5NTQzNjksImV4cCI6MjA3MDUzMDM2OX0.g8Fm4XAvtX46zifBZnYVH4tVuQkqUH6Ia9CXQj4DztQ"}
 $jwt = $resp.access_token
 $serviceKey = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImV0YmxmeXBjeHh0dnZ1cWprcmdkIiwicm9sZSI6InNlcnZpY2Vfcm9sZSIsImlhdCI6MTc2NDE1NzM2MywiZXhwIjoyMDc5NzMzMzYzfQ.dJVEzm26MuxIEAzeeIOLd-83fFHhfX0Z7UgF4LEX-98"
 Write-Host "Testing 3 endpoints..." -ForegroundColor Cyan
 # Test 1: availability-list
 Write-Host "`n[1] availability-list" -ForegroundColor Yellow
 try {
    $result = Invoke-RestMethod -Uri "https://etblfypcxxtvvuqjkrgd.supabase.co/functions/v1/availability-list" -Method Get -Headers @{"Authorization"="Bearer $serviceKey";"x-external-jwt"=$jwt;"apikey"=$serviceKey}
    Write-Host "✅ SUCCESS" -ForegroundColor Green
    $result | ConvertTo-Json -Depth 2
 } catch {
    Write-Host "❌ FAILED" -ForegroundColor Red
 }
 # Test 2: audit-list  
 Write-Host "`n[2] audit-list" -ForegroundColor Yellow
 try {
    $result = Invoke-RestMethod -Uri "https://etblfypcxxtvvuqjkrgd.supabase.co/functions/v1/audit-list" -Method Get -Headers @{"Authorization"="Bearer $serviceKey";"x-external-jwt"=$jwt;"apikey"=$serviceKey}
    Write-Host "✅ SUCCESS" -ForegroundColor Green
    $result | ConvertTo-Json -Depth 2
 } catch {
    Write-Host "❌ FAILED" -ForegroundColor Red
 }
 # Test 3: system-health-check
 Write-Host "`n[3] system-health-check" -ForegroundColor Yellow
 try {
    $result = Invoke-RestMethod -Uri "https://etblfypcxxtvvuqjkrgd.supabase.co/functions/v1/system-health-check" -Method Get -Headers @{"Authorization"="Bearer $serviceKey";"x-external-jwt"=$jwt;"apikey"=$serviceKey}
    Write-Host "✅ SUCCESS" -ForegroundColor Green
    $result | ConvertTo-Json -Depth 3
 } catch {
    Write-Host "❌ FAILED" -ForegroundColor Red
 }
--- a/src/App.tsx
+++ b/src/App.tsx
@ -3,17 +3,12 @@ import {
  Routes,
  Route,
  Navigate,
  useLocation,
 } from "react-router-dom";
 import { Toaster } from "react-hot-toast";
 import Header from "./components/Header";
 import AccessibilityMenu from "./components/AccessibilityMenu";
 import { CommandPalette } from "./components/ui/CommandPalette";
 import { InstallPWA } from "./components/pwa/InstallPWA";
 import { useCommandPalette } from "./hooks/useCommandPalette";
 import ProtectedRoute from "./components/auth/ProtectedRoute";
 import Home from "./pages/Home";
 import Login from "./pages/Login";
 import LoginPaciente from "./pages/LoginPaciente";
 import LoginSecretaria from "./pages/LoginSecretaria";
 import LoginMedico from "./pages/LoginMedico";
@ -21,7 +16,6 @@ import AgendamentoPaciente from "./pages/AgendamentoPaciente";
 import AcompanhamentoPaciente from "./pages/AcompanhamentoPaciente";
 import PainelMedico from "./pages/PainelMedico";
 import PainelSecretaria from "./pages/PainelSecretaria";
 import MensagensMedico from "./pages/MensagensMedico";
 import ProntuarioPaciente from "./pages/ProntuarioPaciente";
 import TokenInspector from "./pages/TokenInspector";
 import AdminDiagnostico from "./pages/AdminDiagnostico";
@ -33,13 +27,15 @@ import PerfilPaciente from "./pages/PerfilPaciente";
 import ClearCache from "./pages/ClearCache";
 import AuthCallback from "./pages/AuthCallback";
 import ResetPassword from "./pages/ResetPassword";
 import LandingPage from "./pages/LandingPage";
 function AppLayout() {
  const location = useLocation();
  const isLandingPage = location.pathname === "/";
 function App() {
  return (
    <Router
      future={{
        v7_startTransition: true,
        v7_relativeSplatPath: true,
      }}
    >
      <div className="app-root min-h-screen bg-gray-50 dark:bg-slate-900 dark:bg-gradient-to-br dark:from-slate-900 dark:to-slate-800 transition-colors duration-300">
        <a
          href="#main-content"
@ -47,18 +43,13 @@ function AppLayout() {
        >
          Pular para o conteúdo
        </a>
-      {!isLandingPage && <Header />}
+        <Header />
-      <main
+        <main id="main-content" className="container mx-auto px-4 py-8">
        id="main-content"
        className={isLandingPage ? "" : "container mx-auto px-4 py-6 max-w-7xl"}
      >
          <Routes>
-          <Route path="/" element={<LandingPage />} />
+            <Route path="/" element={<Home />} />
          <Route path="/home" element={<Home />} />
            <Route path="/clear-cache" element={<ClearCache />} />
            <Route path="/auth/callback" element={<AuthCallback />} />
            <Route path="/reset-password" element={<ResetPassword />} />
          <Route path="/login" element={<Login />} />
            <Route path="/paciente" element={<LoginPaciente />} />
            <Route path="/login-secretaria" element={<LoginSecretaria />} />
            <Route path="/login-medico" element={<LoginMedico />} />
@ -77,7 +68,6 @@ function AppLayout() {
              }
            >
              <Route path="/painel-medico" element={<PainelMedico />} />
            <Route path="/mensagens" element={<MensagensMedico />} />
              <Route path="/perfil-medico" element={<PerfilMedico />} />
            </Route>
            <Route
@ -90,7 +80,9 @@ function AppLayout() {
            </Route>
            <Route
              element={
-              <ProtectedRoute roles={["paciente", "user", "admin", "gestor"]} />
+                <ProtectedRoute
                  roles={["paciente", "user", "admin", "gestor"]}
                />
              }
            >
              <Route
@ -106,26 +98,6 @@ function AppLayout() {
        <Toaster position="top-right" />
        <AccessibilityMenu />
      </div>
  );
 }
 function App() {
  const { isOpen, close } = useCommandPalette();
  return (
    <Router
      future={{
        v7_startTransition: true,
        v7_relativeSplatPath: true,
      }}
    >
      <AppLayout />
      {/* Command Palette Global (Ctrl+K) */}
      {isOpen && <CommandPalette onClose={close} />}
      {/* PWA Install Prompt */}
      <InstallPWA />
    </Router>
  );
 }
--- a/src/components/AgendamentoConsulta.tsx
+++ b/src/components/AgendamentoConsulta.tsx
@ -22,7 +22,6 @@ import {
  AlertCircle,
  CheckCircle2,
  Search,
  Heart,
 } from "lucide-react";
 import { appointmentService } from "../services";
 import { useAuth } from "../hooks/useAuth";
@ -70,34 +69,6 @@ export default function AgendamentoConsulta({
  const [showResultModal, setShowResultModal] = useState(false);
  const [resultType, setResultType] = useState<"success" | "error">("success");
  const [availableDates, setAvailableDates] = useState<Set<string>>(new Set());
  const [favorites, setFavorites] = useState<Set<string>>(new Set());
  const toggleFavorite = (doctorId: string, e: React.MouseEvent) => {
    e.stopPropagation();
    setFavorites((prev) => {
      const newFavorites = new Set(prev);
      if (newFavorites.has(doctorId)) {
        newFavorites.delete(doctorId);
      } else {
        newFavorites.add(doctorId);
      }
      return newFavorites;
    });
  };
  const getFictitiousSlots = (doctorId: string) => {
    // Gera horários determinísticos baseados no ID do médico
    const sum = doctorId.split("").reduce((acc, char) => acc + char.charCodeAt(0), 0);
    const h1 = 8 + (sum % 4); // 8h - 11h
    const h2 = 14 + (sum % 4); // 14h - 17h
    const m1 = (sum % 2) * 30;
    const m2 = ((sum + 1) % 2) * 30;
    return [
      `${h1.toString().padStart(2, "0")}:${m1.toString().padStart(2, "0")}`,
      `${h2.toString().padStart(2, "0")}:${m2.toString().padStart(2, "0")}`
    ];
  };
  // Removido o carregamento interno de médicos, pois agora vem por prop
@ -323,28 +294,19 @@ export default function AgendamentoConsulta({
        // Se for bloqueio parcial, remove os horários bloqueados
        if (dayException.start_time && dayException.end_time) {
-          const [blockStartHour, blockStartMin] = dayException.start_time
+          const [blockStartHour, blockStartMin] = dayException.start_time.split(":").map(Number);
-            .split(":")
+          const [blockEndHour, blockEndMin] = dayException.end_time.split(":").map(Number);
            .map(Number);
          const [blockEndHour, blockEndMin] = dayException.end_time
            .split(":")
            .map(Number);
          const blockStartMinutes = blockStartHour * 60 + blockStartMin;
          const blockEndMinutes = blockEndHour * 60 + blockEndMin;
          // Filtra slots que não estão no período bloqueado
-          const slotsAfterBlock = allSlots.filter((slot) => {
+          const slotsAfterBlock = allSlots.filter(slot => {
            const [slotHour, slotMin] = slot.split(":").map(Number);
            const slotMinutes = slotHour * 60 + slotMin;
-            return (
+            return slotMinutes < blockStartMinutes || slotMinutes >= blockEndMinutes;
              slotMinutes < blockStartMinutes || slotMinutes >= blockEndMinutes
            );
          });
-          console.log(
+          console.log("[AgendamentoConsulta] Slots após remover bloqueio parcial:", slotsAfterBlock);
            "[AgendamentoConsulta] Slots após remover bloqueio parcial:",
            slotsAfterBlock
          );
          // Usa os slots filtrados em vez de todos
          allSlots.length = 0;
@ -469,13 +431,15 @@ export default function AgendamentoConsulta({
      const scheduledAt =
        format(selectedDate, "yyyy-MM-dd") + "T" + selectedTime + ":00Z";
      // Payload conforme documentação da API Supabase
      const appointmentData = {
        doctor_id: selectedMedico.id,
        patient_id: user.id,
        doctor_id: selectedMedico.id,
        scheduled_at: scheduledAt,
        duration_minutes: 30,
-        created_by: user.id,
+        appointment_type: (appointmentType === "online"
          ? "telemedicina"
          : "presencial") as "presencial" | "telemedicina",
        chief_complaint: motivo,
      };
      console.log(
@ -561,7 +525,7 @@ export default function AgendamentoConsulta({
                        setShowResultModal(false);
                        setBookingError("");
                        navigate("/acompanhamento", {
-                          state: { activeTab: "appointments" },
+                          state: { activeTab: "consultas" },
                        });
                      }}
                      className="text-blue-600 hover:text-blue-800 underline text-sm sm:text-base font-medium"
@ -684,42 +648,7 @@ export default function AgendamentoConsulta({
                <span className="text-xs sm:text-sm text-foreground truncate w-full sm:w-auto">
                  {medico.email || "-"}
                </span>
-                <div className="flex gap-2 w-full sm:w-auto items-center">
+                <div className="flex gap-2 w-full sm:w-auto">
                  <div className="hidden sm:flex flex-col items-end mr-2">
                    <div className="flex items-center gap-1 text-[10px] text-gray-500 dark:text-gray-400 mb-1">
                      <Clock className="w-3 h-3" />
                      <span>Próx:</span>
                    </div>
                    <div className="flex gap-1">
                      {getFictitiousSlots(medico.id).map((time) => (
                        <span
                          key={time}
                          className="bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 border border-blue-100 dark:border-blue-800 px-1.5 py-0.5 rounded text-[10px] font-medium"
                        >
                          {time}
                        </span>
                      ))}
                    </div>
                  </div>
                  <button
                    className={`p-1.5 sm:p-1 rounded-lg border transition-colors ${
                      favorites.has(medico.id)
                        ? "bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-800 text-red-500 dark:text-red-400"
                        : "border-gray-200 dark:border-gray-700 text-gray-400 dark:text-gray-500 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 dark:hover:text-red-400"
                    }`}
                    onClick={(e) => toggleFavorite(medico.id, e)}
                    title={
                      favorites.has(medico.id)
                        ? "Remover dos favoritos"
                        : "Adicionar aos favoritos"
                    }
                  >
                    <Heart
                      className={`w-5 h-5 sm:w-4 sm:h-4 ${
                        favorites.has(medico.id) ? "fill-current" : ""
                      }`}
                    />
                  </button>
                  <button
                    className="flex-1 sm:flex-none px-3 py-1.5 sm:py-1 rounded-lg border text-xs sm:text-sm hover:bg-blue-50 transition-colors whitespace-nowrap"
                    onClick={() => handleSelectDoctor(medico)}
--- a/src/components/Chatbot.tsx
+++ b/src/components/Chatbot.tsx
@ -1,5 +1,4 @@
 import React, { useEffect, useState, useRef } from "react";
 import conniImage from "./images/CONNI.png";
 /**
 * Chatbot.tsx
@ -33,7 +32,7 @@ const Chatbot: React.FC<ChatbotProps> = ({ className = "" }) => {
    {
      id: "welcome",
      role: "assistant",
-      text: "Olá! 👋 Sou a Conni, sua Assistente Virtual do MediConnect. Estou aqui para ajudá-lo com dúvidas sobre agendamento de consultas, navegação no sistema, funcionalidades e suporte. Como posso ajudar você hoje?",
+      text: "Olá! 👋 Sou o Assistente Virtual do MediConnect. Estou aqui para ajudá-lo com dúvidas sobre agendamento de consultas, navegação no sistema, funcionalidades e suporte. Como posso ajudar você hoje?",
      time: new Date().toLocaleTimeString("pt-BR", {
        hour: "2-digit",
        minute: "2-digit",
@ -69,28 +68,9 @@ const Chatbot: React.FC<ChatbotProps> = ({ className = "" }) => {
   */
  async function callChatApi(userText: string): Promise<string> {
    try {
      // Get auth token from localStorage
      const authData = localStorage.getItem(
        "sb-yuanqfswhberkoevtmfr-auth-token"
      );
      let token = "";
      if (authData) {
        try {
          const parsedAuth = JSON.parse(authData);
          token = parsedAuth?.access_token || "";
        } catch (e) {
          console.warn("Failed to parse auth token:", e);
        }
      }
      console.log("[Chatbot] Sending message to /api/chat");
      const response = await fetch("/api/chat", {
        method: "POST",
-        headers: {
+        headers: { "Content-Type": "application/json" },
          "Content-Type": "application/json",
          ...(token && { Authorization: `Bearer ${token}` }),
        },
        body: JSON.stringify({
          messages: [
            {
@ -98,25 +78,15 @@ const Chatbot: React.FC<ChatbotProps> = ({ className = "" }) => {
              content: userText,
            },
          ],
          token: token,
        }),
      });
      console.log("[Chatbot] Response status:", response.status);
      if (!response.ok) {
-        const errorText = await response.text();
+        console.error("Chat API error:", response.status, response.statusText);
        console.error(
          "Chat API error:",
          response.status,
          response.statusText,
          errorText
        );
        return "Desculpe, ocorreu um erro ao processar sua mensagem. Por favor, tente novamente em alguns instantes.";
      }
      const data = await response.json();
      console.log("[Chatbot] Response data:", data);
      return data.reply || "Sem resposta do servidor.";
    } catch (error) {
      console.error("Erro ao chamar a API de chat:", error);
@ -213,17 +183,25 @@ const Chatbot: React.FC<ChatbotProps> = ({ className = "" }) => {
          {/* Header */}
          <div className="bg-gradient-to-r from-blue-600 to-blue-700 text-white p-4 rounded-t-lg flex items-center justify-between">
            <div className="flex items-center gap-3">
-              <div className="w-10 h-10 rounded-full overflow-hidden bg-white">
+              <div className="bg-white/20 rounded-full p-2">
-                <img
+                {/* MessageCircle Icon */}
-                  src={conniImage}
+                <svg
-                  alt="Conni"
+                  xmlns="http://www.w3.org/2000/svg"
-                  className="w-full h-full object-cover"
+                  className="w-5 h-5"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                  strokeWidth={2}
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
                  />
                </svg>
              </div>
              <div>
-                <h3 className="font-semibold">
+                <h3 className="font-semibold">Assistente MediConnect</h3>
                  Conni - Assistente MediConnect
                </h3>
                <p className="text-xs text-blue-100">Online • AI-Powered</p>
              </div>
            </div>
--- a/src/components/DisponibilidadeMedico.tsx
+++ b/src/components/DisponibilidadeMedico.tsx
@ -9,14 +9,6 @@ import type {
  DoctorAvailability,
 } from "../services/availability/types";
 import { useAuth } from "../hooks/useAuth";
 import {
  useAvailability,
  useCreateAvailability,
  useUpdateAvailability,
  useDeleteAvailability,
 } from "../hooks/useAvailability";
 import { Skeleton } from "./ui/Skeleton";
 import { EmptyAvailability } from "./ui/EmptyState";
 interface TimeSlot {
  id: string;
@ -49,17 +41,8 @@ const DisponibilidadeMedico: React.FC = () => {
  const { user } = useAuth();
  const [doctorId, setDoctorId] = useState<string | null>(null);
  const [schedule, setSchedule] = useState<Record<number, DaySchedule>>({});
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  // React Query hooks
  const {
    data: availabilities = [],
    isLoading,
    refetch,
  } = useAvailability(doctorId || undefined);
  const createMutation = useCreateAvailability();
  const updateMutation = useUpdateAvailability();
  const deleteMutation = useDeleteAvailability();
  const [activeTab, setActiveTab] = useState<"weekly" | "blocked">("weekly");
  // States for adding slots
@ -100,8 +83,15 @@ const DisponibilidadeMedico: React.FC = () => {
    loadDoctorId();
  }, [user?.id]);
-  // Processar availabilities do React Query em schedule local
+  const loadAvailability = React.useCallback(async () => {
-  React.useEffect(() => {
+    if (!doctorId) return;
    try {
      setLoading(true);
      const availabilities = await availabilityService.list({
        doctor_id: doctorId,
      });
      const newSchedule: Record<number, DaySchedule> = {};
      daysOfWeek.forEach(({ key, label }) => {
        newSchedule[key] = {
@ -129,7 +119,13 @@ const DisponibilidadeMedico: React.FC = () => {
      });
      setSchedule(newSchedule);
-  }, [availabilities]);
+    } catch (error) {
      console.error("Erro ao carregar disponibilidade:", error);
      toast.error("Erro ao carregar disponibilidade");
    } finally {
      setLoading(false);
    }
  }, [doctorId]);
  const loadExceptions = React.useCallback(async () => {
    if (!doctorId) return;
@ -146,9 +142,10 @@ const DisponibilidadeMedico: React.FC = () => {
  useEffect(() => {
    if (doctorId) {
      loadAvailability();
      loadExceptions();
    }
-  }, [doctorId, loadExceptions]);
+  }, [doctorId, loadAvailability, loadExceptions]);
  const toggleDay = (dayKey: number) => {
    setSchedule((prev) => ({
@ -196,10 +193,11 @@ const DisponibilidadeMedico: React.FC = () => {
    if (slot?.dbId) {
      try {
-        await deleteMutation.mutateAsync(slot.dbId);
+        await availabilityService.delete(slot.dbId);
-        // Toast handled by mutation
+        toast.success("Horário removido com sucesso");
      } catch (error) {
        console.error("Erro ao remover horário:", error);
        toast.error("Erro ao remover horário");
        return;
      }
    }
@ -261,7 +259,7 @@ const DisponibilidadeMedico: React.FC = () => {
      await Promise.all(requests);
      toast.success("Disponibilidade salva com sucesso!");
-      refetch();
+      loadAvailability();
    } catch (error) {
      console.error("Erro ao salvar disponibilidade:", error);
      toast.error("Erro ao salvar disponibilidade");
@ -311,42 +309,14 @@ const DisponibilidadeMedico: React.FC = () => {
    }
  };
-  if (isLoading) {
+  if (loading) {
    return (
-      <div className="space-y-6">
+      <div className="flex items-center justify-center py-12">
-        <div className="flex items-center justify-between">
+        <div className="text-gray-600 dark:text-gray-400">Carregando...</div>
          <div className="space-y-2">
            <Skeleton className="h-8 w-64" />
            <Skeleton className="h-5 w-96" />
          </div>
        </div>
        <div className="space-y-4">
          {[1, 2, 3, 4, 5].map((i) => (
            <div
              key={i}
              className="bg-white dark:bg-slate-900 rounded-lg p-6 space-y-4"
            >
              <Skeleton className="h-6 w-32" />
              <div className="space-y-2">
                <Skeleton className="h-10 w-full" />
                <Skeleton className="h-10 w-full" />
              </div>
            </div>
          ))}
        </div>
      </div>
    );
  }
  // Show empty state if no availabilities and no custom schedule
  if (
    !isLoading &&
    availabilities.length === 0 &&
    Object.keys(schedule).length === 0
  ) {
    return <EmptyAvailability onAction={() => setActiveTab("weekly")} />;
  }
  return (
    <div className="space-y-6">
      {/* Header */}
--- a/src/components/ExemploBackendServices.tsx
+++ b/src/components/ExemploBackendServices.tsx
@ -1,190 +0,0 @@
 /**
 * Exemplo de componente usando os novos serviços de Backend
 */
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import {
  analyticsService,
  waitlistService,
  notificationService,
  appointmentService,
  type WaitlistEntry,
  type KPISummary,
 } from "@/services";
 export function ExemploBackendServices() {
  const queryClient = useQueryClient();
  // ===== ANALYTICS / KPIs =====
  const { data: kpis, isLoading: loadingKpis } = useQuery<KPISummary>({
    queryKey: ["analytics", "summary"],
    queryFn: () => analyticsService.getSummary(),
    refetchInterval: 60_000, // Auto-refresh a cada 1 minuto
  });
  // ===== WAITLIST (Lista de Espera) =====
  const { data: waitlist } = useQuery<WaitlistEntry[]>({
    queryKey: ["waitlist"],
    queryFn: () => waitlistService.list(),
  });
  const addToWaitlist = useMutation({
    mutationFn: waitlistService.create,
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["waitlist"] });
      alert("Adicionado à lista de espera!");
    },
  });
  // ===== NOTIFICATIONS =====
  const { data: pendingNotifications } = useQuery({
    queryKey: ["notifications", "pending"],
    queryFn: () => notificationService.list({ status: "pending" }),
  });
  const sendNotification = useMutation({
    mutationFn: notificationService.create,
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["notifications"] });
      alert("Notificação enviada!");
    },
  });
  // ===== APPOINTMENTS ENHANCED =====
  const { data: appointments } = useQuery({
    queryKey: ["appointments", "enhanced"],
    queryFn: () => appointmentService.listEnhanced(),
  });
  // ===== HANDLERS =====
  const handleAddToWaitlist = () => {
    addToWaitlist.mutate({
      patient_id: "example-patient-uuid",
      doctor_id: "example-doctor-uuid",
      desired_date: "2025-12-15",
    });
  };
  const handleSendReminder = () => {
    sendNotification.mutate({
      type: "sms",
      payload: {
        to: "+5511999999999",
        message: "Lembrete: Você tem uma consulta amanhã às 14h!",
      },
    });
  };
  return (
    <div className="p-6 space-y-6">
      <h1 className="text-2xl font-bold">Backend Services - Exemplos</h1>
      {/* KPIs / Analytics */}
      <section className="bg-white p-4 rounded-lg shadow">
        <h2 className="text-xl font-semibold mb-3">📊 KPIs (Analytics)</h2>
        {loadingKpis ? (
          <p>Carregando...</p>
        ) : kpis ? (
          <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
            <div className="text-center">
              <p className="text-3xl font-bold text-blue-600">
                {kpis.total_appointments}
              </p>
              <p className="text-sm text-gray-600">Total</p>
            </div>
            <div className="text-center">
              <p className="text-3xl font-bold text-green-600">{kpis.today}</p>
              <p className="text-sm text-gray-600">Hoje</p>
            </div>
            <div className="text-center">
              <p className="text-3xl font-bold text-yellow-600">
                {kpis.pending}
              </p>
              <p className="text-sm text-gray-600">Pendentes</p>
            </div>
            <div className="text-center">
              <p className="text-3xl font-bold text-purple-600">
                {kpis.completed}
              </p>
              <p className="text-sm text-gray-600">Concluídas</p>
            </div>
            <div className="text-center">
              <p className="text-3xl font-bold text-red-600">{kpis.canceled}</p>
              <p className="text-sm text-gray-600">Canceladas</p>
            </div>
          </div>
        ) : null}
      </section>
      {/* Waitlist */}
      <section className="bg-white p-4 rounded-lg shadow">
        <h2 className="text-xl font-semibold mb-3">⏳ Lista de Espera</h2>
        <button
          onClick={handleAddToWaitlist}
          className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 mb-3"
        >
          Adicionar à Lista de Espera
        </button>
        <div className="space-y-2">
          {waitlist?.map((entry) => (
            <div key={entry.id} className="border p-2 rounded">
              <p>
                <strong>Paciente:</strong> {entry.patient_id}
              </p>
              <p>
                <strong>Médico:</strong> {entry.doctor_id}
              </p>
              <p>
                <strong>Data desejada:</strong> {entry.desired_date}
              </p>
              <p>
                <strong>Status:</strong> {entry.status}
              </p>
            </div>
          ))}
        </div>
      </section>
      {/* Notifications */}
      <section className="bg-white p-4 rounded-lg shadow">
        <h2 className="text-xl font-semibold mb-3">
          🔔 Notificações Pendentes
        </h2>
        <button
          onClick={handleSendReminder}
          className="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600 mb-3"
        >
          Enviar Lembrete de Consulta
        </button>
        <p className="text-sm text-gray-600">
          {pendingNotifications?.length || 0} notificações na fila
        </p>
      </section>
      {/* Appointments Enhanced */}
      <section className="bg-white p-4 rounded-lg shadow">
        <h2 className="text-xl font-semibold mb-3">
          📅 Agendamentos (com metadados)
        </h2>
        <p className="text-sm text-gray-600 mb-2">
          Agendamentos mesclados com notificações pendentes do backend próprio
        </p>
        <div className="space-y-2">
          {appointments?.slice(0, 5).map((appt: any) => (
            <div key={appt.id} className="border p-2 rounded">
              <p>
                <strong>ID:</strong> {appt.id}
              </p>
              <p>
                <strong>Data:</strong> {appt.scheduled_at}
              </p>
              {appt.meta && (
                <p className="text-orange-600">⚠️ Tem notificação pendente</p>
              )}
            </div>
          ))}
        </div>
      </section>
    </div>
  );
 }
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@ -1,24 +1,24 @@
 import React from "react";
 import { Link } from "react-router-dom";
-import { Heart } from "lucide-react";
+import { Heart, LogOut, LogIn } from "lucide-react";
 import { useAuth } from "../hooks/useAuth";
 import { ProfileSelector } from "./ProfileSelector";
 import { i18n } from "../i18n";
 import Logo from "./images/logo.PNG";
 const Header: React.FC = () => {
-  const { role, isAuthenticated } = useAuth();
+  const { user, logout, role, isAuthenticated } = useAuth();
-  // Debug log
+  const roleLabel: Record<string, string> = {
-  console.log(
+    secretaria: "Secretaria",
-    "[Header] Role atual:",
+    medico: "Médico",
-    role,
+    paciente: "Paciente",
-    "isAuthenticated:",
+    admin: "Administrador",
-    isAuthenticated
+    gestor: "Gestor",
-  );
+  };
  return (
-    <header className="bg-white shadow-lg border-b border-gray-200 sticky top-0 z-[9998]">
+    <header className="bg-white shadow-lg border-b border-gray-200">
      {/* Skip to content link for accessibility */}
      <a
        href="#main-content"
@ -37,10 +37,10 @@ const Header: React.FC = () => {
            <img
              src={Logo}
              alt={i18n.t("header.logo")}
-              className="h-12 w-12 rounded-lg object-contain shadow-sm"
+              className="h-14 w-14 rounded-lg object-contain shadow-sm"
            />
            <div>
-              <h1 className="text-lg font-bold text-gray-900">
+              <h1 className="text-xl font-bold text-gray-900">
                {i18n.t("header.logo")}
              </h1>
              <p className="text-xs text-gray-500">
@ -49,9 +49,9 @@ const Header: React.FC = () => {
            </div>
          </Link>
-          {/* Desktop Navigation - Centralizado */}
+          {/* Desktop Navigation */}
          <nav
-            className="hidden md:flex items-center justify-center space-x-2 absolute left-1/2 transform -translate-x-1/2 z-[9998]"
+            className="hidden md:flex items-center space-x-2"
            aria-label="Navegação principal"
          >
            <Link
@ -62,40 +62,59 @@ const Header: React.FC = () => {
              <span>{i18n.t("header.home")}</span>
            </Link>
            {/* Admin Links - Mostrar todos os painéis */}
            {isAuthenticated && (role === "admin" || role === "gestor") && (
              <>
                <Link
                  to="/admin"
                  className="flex items-center space-x-2 px-3 py-2 rounded-lg text-sm font-medium transition-colors text-purple-600 hover:text-purple-700 hover:bg-purple-50 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2"
                >
                  <span>Admin</span>
                </Link>
                <Link
                  to="/painel-medico"
                  className="flex items-center space-x-2 px-3 py-2 rounded-lg text-sm font-medium transition-colors text-blue-600 hover:text-blue-700 hover:bg-blue-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
                >
                  <span>Médico</span>
                </Link>
                <Link
                  to="/painel-secretaria"
                  className="flex items-center space-x-2 px-3 py-2 rounded-lg text-sm font-medium transition-colors text-green-600 hover:text-green-700 hover:bg-green-50 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2"
                >
                  <span>Secretária</span>
                </Link>
                <Link
                  to="/acompanhamento"
                  className="flex items-center space-x-2 px-3 py-2 rounded-lg text-sm font-medium transition-colors text-indigo-600 hover:text-indigo-700 hover:bg-indigo-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
                >
                  <span>Paciente</span>
                </Link>
              </>
            )}
            {/* Profile Selector */}
            <ProfileSelector />
            {/* Admin Link */}
            {isAuthenticated && (role === "admin" || role === "gestor") && (
              <Link
                to="/admin"
                className="flex items-center space-x-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors text-gray-600 hover:text-purple-600 hover:bg-purple-50 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2"
              >
                <span>Painel Admin</span>
              </Link>
            )}
          </nav>
          {/* User Session / Auth */}
          <div className="hidden md:flex items-center space-x-3">
            {isAuthenticated && user ? (
              <>
                <div className="text-right leading-tight min-w-0 flex-shrink">
                  <p
                    className="text-sm font-medium text-gray-700 truncate max-w-[120px]"
                    title={user.nome}
                  >
                    {user.nome.split(" ").slice(0, 2).join(" ")}
                  </p>
                  <p className="text-xs text-gray-500 whitespace-nowrap">
                    {role ? roleLabel[role] || role : ""}
                  </p>
                </div>
                <button
                  onClick={logout}
                  className="inline-flex items-center px-3 py-2 text-sm font-medium rounded-md bg-gray-100 hover:bg-gray-200 hover:scale-105 active:scale-95 text-gray-700 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 flex-shrink-0"
                  aria-label={i18n.t("header.logout")}
                >
                  <LogOut className="w-4 h-4 mr-1" aria-hidden="true" />
                  <span className="hidden lg:inline">
                    {i18n.t("header.logout")}
                  </span>
                  <span className="lg:hidden">Sair</span>
                </button>
              </>
            ) : (
              <Link
                to="/paciente"
                className="inline-flex items-center px-4 py-2 text-sm font-medium rounded-md bg-gradient-to-r from-blue-700 to-blue-400 hover:from-blue-800 hover:to-blue-500 hover:scale-105 active:scale-95 text-white transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 shadow-sm hover:shadow-md"
                aria-label={i18n.t("header.login")}
              >
                <LogIn className="w-4 h-4 mr-2" aria-hidden="true" />
                {i18n.t("header.login")}
              </Link>
            )}
          </div>
          {/* Mobile menu button */}
          <div className="md:hidden">
            <button
@ -131,39 +150,44 @@ const Header: React.FC = () => {
              <span>{i18n.t("header.home")}</span>
            </Link>
            {/* Admin Links Mobile - Mostrar todos os painéis */}
            {isAuthenticated && (role === "admin" || role === "gestor") && (
              <>
                <Link
                  to="/admin"
                  className="flex items-center space-x-2 px-3 py-2 rounded-lg text-sm font-medium transition-colors text-purple-600 hover:text-purple-700 hover:bg-purple-50 focus:outline-none focus:ring-2 focus:ring-purple-500"
                >
                  <span>🟣 Admin</span>
                </Link>
                <Link
                  to="/painel-medico"
                  className="flex items-center space-x-2 px-3 py-2 rounded-lg text-sm font-medium transition-colors text-blue-600 hover:text-blue-700 hover:bg-blue-50 focus:outline-none focus:ring-2 focus:ring-blue-500"
                >
                  <span>👨‍⚕️ Médico</span>
                </Link>
                <Link
                  to="/painel-secretaria"
                  className="flex items-center space-x-2 px-3 py-2 rounded-lg text-sm font-medium transition-colors text-green-600 hover:text-green-700 hover:bg-green-50 focus:outline-none focus:ring-2 focus:ring-green-500"
                >
                  <span>👩‍💼 Secretária</span>
                </Link>
                <Link
                  to="/acompanhamento"
                  className="flex items-center space-x-2 px-3 py-2 rounded-lg text-sm font-medium transition-colors text-indigo-600 hover:text-indigo-700 hover:bg-indigo-50 focus:outline-none focus:ring-2 focus:ring-indigo-500"
                >
                  <span>🧑‍🦱 Paciente</span>
                </Link>
              </>
            )}
            <div className="px-3 py-2">
              <ProfileSelector />
            </div>
            {/* Sessão mobile */}
            <div className="mt-4 flex items-center justify-between bg-gray-50 px-3 py-2 rounded-md">
              {isAuthenticated && user ? (
                <>
                  <div className="flex-1 mr-3 min-w-0">
                    <p
                      className="text-sm font-medium text-gray-700 truncate"
                      title={user.nome}
                    >
                      {user.nome.split(" ").slice(0, 2).join(" ")}
                    </p>
                    <p className="text-xs text-gray-500">
                      {role ? roleLabel[role] || role : ""}
                    </p>
                  </div>
                  <button
                    onClick={logout}
                    className="inline-flex items-center px-3 py-2 text-xs font-medium rounded bg-gray-200 text-gray-700 hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 flex-shrink-0"
                    aria-label={i18n.t("header.logout")}
                  >
                    <LogOut className="w-4 h-4 mr-1" />
                    <span>Sair</span>
                  </button>
                </>
              ) : (
                <Link
                  to="/paciente"
                  className="flex-1 inline-flex items-center justify-center px-3 py-2 text-sm font-medium rounded bg-gradient-to-r from-blue-700 to-blue-400 text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
                >
                  <LogIn className="w-4 h-4 mr-2" aria-hidden="true" />
                  {i18n.t("header.login")}
                </Link>
              )}
            </div>
          </div>
        </div>
      </div>
--- a/src/components/ProfileSelector.tsx
+++ b/src/components/ProfileSelector.tsx
@ -1,18 +1,70 @@
 import React, { useState, useEffect, useRef } from "react";
-import { LogIn, User, LogOut, ChevronDown } from "lucide-react";
+import { User, Stethoscope, Clipboard, ChevronDown } from "lucide-react";
 import { useNavigate } from "react-router-dom";
 import { i18n } from "../i18n";
 import { useAuth } from "../hooks/useAuth";
 export type ProfileType = "patient" | "doctor" | "secretary" | null;
-export const ProfileSelector: React.FC = () => {
+interface ProfileOption {
-  const navigate = useNavigate();
+  type: ProfileType;
-  const { isAuthenticated, user, logout } = useAuth();
+  icon: typeof User;
-  const [isOpen, setIsOpen] = useState(false);
+  label: string;
-  const dropdownRef = useRef<HTMLDivElement>(null);
+  description: string;
  path: string;
  color: string;
  bgColor: string;
 }
 const profileOptions: ProfileOption[] = [
  {
    type: "patient",
    icon: User,
    label: i18n.t("profiles.patient"),
    description: i18n.t("profiles.patientDescription"),
    path: "/paciente",
    color: "text-blue-600",
    bgColor: "bg-blue-50 hover:bg-blue-100",
  },
  {
    type: "doctor",
    icon: Stethoscope,
    label: i18n.t("profiles.doctor"),
    description: i18n.t("profiles.doctorDescription"),
    path: "/login-medico",
    color: "text-indigo-600",
    bgColor: "bg-indigo-50 hover:bg-indigo-100",
  },
  {
    type: "secretary",
    icon: Clipboard,
    label: i18n.t("profiles.secretary"),
    description: i18n.t("profiles.secretaryDescription"),
    path: "/login-secretaria",
    color: "text-green-600",
    bgColor: "bg-green-50 hover:bg-green-100",
  },
 ];
 export const ProfileSelector: React.FC = () => {
  const [selectedProfile, setSelectedProfile] = useState<ProfileType>(null);
  const [isOpen, setIsOpen] = useState(false);
  const navigate = useNavigate();
  const dropdownRef = useRef<HTMLDivElement>(null);
  const { isAuthenticated, user } = useAuth();
  // Fechar dropdown ao clicar fora
  useEffect(() => {
    // Carregar perfil salvo
    const saved = localStorage.getItem(
      "mediconnect_selected_profile"
    ) as ProfileType;
    if (saved) {
      setSelectedProfile(saved);
    }
  }, []);
  useEffect(() => {
    // Fechar ao clicar fora
    const handleClickOutside = (event: MouseEvent) => {
      if (
        dropdownRef.current &&
@ -31,59 +83,97 @@ export const ProfileSelector: React.FC = () => {
    };
  }, [isOpen]);
-  // Se o usuário NÃO estiver autenticado, mostra botão de login
+  const handleProfileSelect = (profile: ProfileOption) => {
-  if (!isAuthenticated || !user) {
+    const previousProfile = selectedProfile;
-    return (
+
-      <button
+    setSelectedProfile(profile.type);
-        onClick={() => navigate("/login")}
+    setIsOpen(false);
-        className="flex items-center space-x-2 px-4 py-2 rounded-lg text-sm font-medium transition-all text-white bg-blue-600 hover:bg-blue-700 hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+
-        aria-label="Fazer Login"
+    // Persistir escolha
-      >
+    if (profile.type) {
-        <LogIn className="w-4 h-4" aria-hidden="true" />
+      localStorage.setItem("mediconnect_selected_profile", profile.type);
-        <span>Fazer Login</span>
+    }
-      </button>
+
    // Telemetria (optional - could be implemented later)
    console.log(
      `Profile changed: ${previousProfile} -> ${profile.type || "none"}`
    );
    // Navegar - condicional baseado em autenticação e role
    let targetPath = profile.path; // default: caminho do perfil (login)
    if (isAuthenticated && user) {
      // Se autenticado, redirecionar para o painel apropriado baseado na role
      switch (user.role) {
        case "paciente":
          if (profile.type === "patient") {
            targetPath = "/acompanhamento"; // painel do paciente
          }
          break;
        case "medico":
          if (profile.type === "doctor") {
            targetPath = "/painel-medico"; // painel do médico
          }
          break;
        case "secretaria":
          if (profile.type === "secretary") {
            targetPath = "/painel-secretaria"; // painel da secretária
          }
          break;
        case "admin":
          // Admin pode ir para qualquer painel
          if (profile.type === "secretary") {
            targetPath = "/painel-secretaria";
          } else if (profile.type === "doctor") {
            targetPath = "/painel-medico";
          } else if (profile.type === "patient") {
            targetPath = "/acompanhamento";
          }
          break;
      }
      console.log(
        `🔀 ProfileSelector: Usuário autenticado (${user.role}), redirecionando para ${targetPath}`
      );
    } else {
      console.log(
        `🔀 ProfileSelector: Usuário NÃO autenticado, redirecionando para ${targetPath}`
      );
    }
-  // Se o usuário ESTIVER autenticado, mostra menu de perfil
+    navigate(targetPath);
  const isAdmin = user.role === "admin" || user.role === "gestor";
  const handleNavigateToDashboard = () => {
    setIsOpen(false);
    if (isAdmin) {
      navigate("/admin");
      return;
    }
    switch (user.role) {
      case "paciente":
        navigate("/acompanhamento");
        break;
      case "medico":
        navigate("/painel-medico");
        break;
      case "secretaria":
        navigate("/painel-secretaria");
        break;
      default:
        navigate("/");
    }
  };
-  const handleLogout = () => {
+  const getCurrentProfile = () => {
-    setIsOpen(false);
+    return profileOptions.find((p) => p.type === selectedProfile);
    logout();
    navigate("/");
  };
  const currentProfile = getCurrentProfile();
  return (
    <div className="relative" ref={dropdownRef}>
      <button
        onClick={() => setIsOpen(!isOpen)}
-        className="flex items-center space-x-2 px-4 py-2 rounded-lg text-sm font-medium transition-all text-gray-700 bg-gray-100 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+        className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 ${
-        aria-label="Menu do usuário"
+          currentProfile
            ? `${currentProfile.bgColor} ${currentProfile.color}`
            : "bg-gray-100 text-gray-700 hover:bg-gray-200"
        }`}
        aria-expanded={isOpen}
        aria-haspopup="true"
        aria-label={i18n.t("header.selectProfile")}
      >
        {currentProfile ? (
          <>
            <currentProfile.icon className="w-4 h-4" aria-hidden="true" />
            <span className="hidden md:inline">{currentProfile.label}</span>
          </>
        ) : (
          <>
            <User className="w-4 h-4" aria-hidden="true" />
-        <span>{user.nome}</span>
+            <span className="hidden md:inline">{i18n.t("header.profile")}</span>
          </>
        )}
        <ChevronDown
          className={`w-4 h-4 transition-transform ${
            isOpen ? "rotate-180" : ""
@ -93,74 +183,64 @@ export const ProfileSelector: React.FC = () => {
      </button>
      {isOpen && (
-        <div className="absolute right-0 mt-2 w-56 bg-white rounded-lg shadow-xl border border-gray-200 z-[9999] pointer-events-auto">
+        <div
-          {isAdmin ? (
+          className="absolute right-0 mt-2 w-72 bg-white rounded-lg shadow-xl border border-gray-200 z-50 animate-in fade-in slide-in-from-top-2 duration-200"
-            <>
+          role="menu"
-              <button
+          aria-orientation="vertical"
                onClick={() => {
                  setIsOpen(false);
                  navigate("/admin");
                }}
                className="w-full text-left px-4 py-2.5 text-sm text-gray-700 hover:bg-purple-50 hover:text-purple-700 rounded-t-lg flex items-center space-x-2 cursor-pointer transition-colors"
        >
-                <User className="w-4 h-4" />
+          <div className="p-2">
-                <span>Painel Admin</span>
+            <p className="px-3 py-2 text-xs font-semibold text-gray-500 uppercase tracking-wide">
-              </button>
+              {i18n.t("header.selectProfile")}
-              <div className="border-t border-gray-100"></div>
+            </p>
-              <div className="px-3 py-1.5 text-xs font-semibold text-gray-500 uppercase">
+            {profileOptions.map((profile) => (
-                Acessar como:
+              <button
                key={profile.type}
                onClick={() => handleProfileSelect(profile)}
                className={`w-full flex items-start gap-3 px-3 py-3 rounded-lg transition-colors text-left focus:outline-none focus:ring-2 focus:ring-blue-500 ${
                  profile.type === selectedProfile
                    ? `${profile.bgColor} ${profile.color}`
                    : "hover:bg-gray-50 text-gray-700"
                }`}
                role="menuitem"
                aria-label={`Selecionar perfil ${profile.label}`}
              >
                <div
                  className={`p-2 rounded-lg ${
                    profile.type === selectedProfile
                      ? "bg-white"
                      : profile.bgColor
                  }`}
                >
                  <profile.icon
                    className={`w-5 h-5 ${profile.color}`}
                    aria-hidden="true"
                  />
                </div>
-              <button
+                <div className="flex-1 min-w-0">
-                onClick={() => {
+                  <p className="font-medium text-sm">{profile.label}</p>
-                  setIsOpen(false);
+                  <p className="text-xs text-gray-600 mt-0.5">
-                  navigate("/painel-medico");
+                    {profile.description}
-                }}
+                  </p>
-                className="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-700 flex items-center space-x-2 cursor-pointer transition-colors"
+                </div>
                {profile.type === selectedProfile && (
                  <div className="flex-shrink-0 pt-1">
                    <svg
                      className={`w-5 h-5 ${profile.color}`}
                      fill="currentColor"
                      viewBox="0 0 20 20"
                      aria-hidden="true"
                    >
-                <span>👨‍⚕️</span>
+                      <path
-                <span>Médico</span>
+                        fillRule="evenodd"
-              </button>
+                        d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-              <button
+                        clipRule="evenodd"
-                onClick={() => {
+                      />
-                  setIsOpen(false);
+                    </svg>
-                  navigate("/painel-secretaria");
+                  </div>
                }}
                className="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-green-50 hover:text-green-700 flex items-center space-x-2 cursor-pointer transition-colors"
              >
                <span>👩‍💼</span>
                <span>Secretária</span>
              </button>
              <button
                onClick={() => {
                  setIsOpen(false);
                  navigate("/acompanhamento");
                }}
                className="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-indigo-50 hover:text-indigo-700 flex items-center space-x-2 cursor-pointer transition-colors"
              >
                <span>🧑‍🦱</span>
                <span>Paciente</span>
              </button>
              <div className="border-t border-gray-100"></div>
            </>
          ) : (
            <>
              <button
                onClick={handleNavigateToDashboard}
                className="w-full text-left px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-100 rounded-t-lg flex items-center space-x-2 cursor-pointer"
              >
                <User className="w-4 h-4" />
                <span>Meu Painel</span>
              </button>
              <div className="border-t border-gray-100"></div>
            </>
                )}
          <button
            onClick={handleLogout}
            className="w-full text-left px-4 py-2.5 text-sm text-red-600 hover:bg-red-50 rounded-b-lg flex items-center space-x-2 cursor-pointer"
          >
            <LogOut className="w-4 h-4" />
            <span>Sair</span>
              </button>
            ))}
          </div>
        </div>
      )}
    </div>
--- a/src/components/agenda/AvailableSlotsPicker.tsx
+++ b/src/components/agenda/AvailableSlotsPicker.tsx
@ -156,15 +156,8 @@ const AvailableSlotsPicker: React.FC<Props> = ({
  if (!slots.length)
    return (
-      <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
+      <div className="text-sm text-gray-500">
-        <p className="text-sm text-yellow-800 font-medium mb-2">
+        Nenhum horário disponível para a data selecionada.
          ⚠️ Nenhum horário disponível
        </p>
        <p className="text-xs text-yellow-700">
          Este médico ainda não tem disponibilidades cadastradas para este dia
          da semana. Configure a disponibilidade na seção "Disponibilidade" do
          painel.
        </p>
      </div>
    );
@ -173,7 +166,6 @@ const AvailableSlotsPicker: React.FC<Props> = ({
      {slots.map((t) => (
        <button
          key={t}
          type="button"
          onClick={() => onSelect(t)}
          className="px-3 py-2 rounded bg-blue-50 hover:bg-blue-100 text-blue-700 text-sm"
        >
--- a/src/components/consultas/CheckInButton.tsx
+++ b/src/components/consultas/CheckInButton.tsx
@ -1,105 +0,0 @@
 /**
 * CheckInButton Component
 * Botão para realizar check-in de paciente
 * @version 1.0
 */
 import { CheckCircle } from "lucide-react";
 import { useCheckInAppointment } from "../../hooks/useAppointments";
 // ============================================================================
 // TYPES
 // ============================================================================
 interface CheckInButtonProps {
  appointmentId: string;
  patientName: string;
  disabled?: boolean;
  className?: string;
 }
 // ============================================================================
 // COMPONENT
 // ============================================================================
 export function CheckInButton({
  appointmentId,
  patientName,
  disabled = false,
  className = "",
 }: CheckInButtonProps) {
  const checkInMutation = useCheckInAppointment();
  const handleCheckIn = () => {
    if (disabled) return;
    // Confirmação
    const confirmed = window.confirm(`Confirmar check-in de ${patientName}?`);
    if (confirmed) {
      checkInMutation.mutate(appointmentId);
    }
  };
  const isLoading = checkInMutation.isPending;
  return (
    <button
      onClick={handleCheckIn}
      disabled={disabled || isLoading}
      className={`
        inline-flex items-center justify-center gap-2
        px-4 py-2
        text-sm font-medium
        rounded-md
        transition-all duration-200
        focus:outline-none focus:ring-2 focus:ring-offset-2
        ${
          disabled || isLoading
            ? "bg-gray-100 text-gray-400 cursor-not-allowed dark:bg-gray-800"
            : "bg-purple-600 text-white hover:bg-purple-700 focus:ring-purple-500 dark:focus:ring-offset-gray-900"
        }
        ${className}
      `}
      type="button"
      aria-label={`Fazer check-in de ${patientName}`}
    >
      <CheckCircle
        className={`w-4 h-4 ${isLoading ? "animate-spin" : ""}`}
        aria-hidden="true"
      />
      {isLoading ? "Processando..." : "Check-in"}
    </button>
  );
 }
 // ============================================================================
 // USAGE EXAMPLE
 // ============================================================================
 /*
 // Em SecretaryAppointmentList.tsx ou similar:
 import { CheckInButton } from '@/components/consultas/CheckInButton';
 function AppointmentRow({ appointment }) {
  const showCheckIn = 
    appointment.status === 'confirmed' && 
    isToday(appointment.scheduled_at);
  return (
    <tr>
      <td>{appointment.patient_name}</td>
      <td>{appointment.scheduled_at}</td>
      <td>
        {showCheckIn && (
          <CheckInButton
            appointmentId={appointment.id}
            patientName={appointment.patient_name}
          />
        )}
      </td>
    </tr>
  );
 }
 */
--- a/src/components/consultas/ConfirmAppointmentButton.tsx
+++ b/src/components/consultas/ConfirmAppointmentButton.tsx
@ -1,83 +0,0 @@
 /**
 * ConfirmAppointmentButton Component
 * Botão para confirmação 1-clique de consultas
 * @version 1.0
 */
 import { CheckCircle, Loader2 } from "lucide-react";
 import { useConfirmAppointment } from "../../hooks/useAppointments";
 interface ConfirmAppointmentButtonProps {
  appointmentId: string;
  currentStatus: string;
  patientName?: string;
  patientPhone?: string;
  scheduledAt?: string;
  className?: string;
 }
 export function ConfirmAppointmentButton({
  appointmentId,
  currentStatus,
  patientName,
  patientPhone,
  scheduledAt,
  className = "",
 }: ConfirmAppointmentButtonProps) {
  const confirmMutation = useConfirmAppointment();
  // Só mostrar para consultas requested (aguardando confirmação)
  if (currentStatus !== "requested") {
    return null;
  }
  const handleConfirm = async () => {
    try {
      await confirmMutation.mutateAsync({
        appointmentId,
        patientPhone,
        patientName,
        scheduledAt,
      });
    } catch (error) {
      console.error("Erro ao confirmar consulta:", error);
    }
  };
  return (
    <button
      onClick={handleConfirm}
      disabled={confirmMutation.isPending}
      className={`
        inline-flex items-center gap-2 px-3 py-1.5 rounded-lg font-medium text-sm
        bg-green-600 hover:bg-green-700 text-white
        disabled:opacity-50 disabled:cursor-not-allowed
        transition-all duration-200 hover:shadow-md
        ${className}
      `}
      title="Confirmar consulta e enviar notificação"
    >
      {confirmMutation.isPending ? (
        <>
          <Loader2 className="w-4 h-4 animate-spin" />
          Confirmando...
        </>
      ) : (
        <>
          <CheckCircle className="w-4 h-4" />
          Confirmar
        </>
      )}
    </button>
  );
 }
 // Skeleton para loading state
 export function ConfirmAppointmentButtonSkeleton() {
  return (
    <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-lg bg-gray-200 dark:bg-gray-700 animate-pulse">
      <div className="w-4 h-4 bg-gray-300 dark:bg-gray-600 rounded" />
      <div className="w-20 h-4 bg-gray-300 dark:bg-gray-600 rounded" />
    </div>
  );
 }
--- a/src/components/consultas/ConsultaModal.tsx
+++ b/src/components/consultas/ConsultaModal.tsx
@ -62,9 +62,6 @@ const ConsultaModal: React.FC<ConsultaModalProps> = ({
  const [selectedDate, setSelectedDate] = useState<string>("");
  const [selectedTime, setSelectedTime] = useState<string>("");
  const [tipo, setTipo] = useState("");
  const [appointmentType, setAppointmentType] = useState<
    "presencial" | "telemedicina"
  >("presencial");
  const [motivo, setMotivo] = useState("");
  const [observacoes, setObservacoes] = useState("");
  const [status, setStatus] = useState<string>("requested");
@ -84,25 +81,8 @@ const ConsultaModal: React.FC<ConsultaModalProps> = ({
          doctorService.list().catch(() => []),
        ]);
        if (!active) return;
-        // Ordenar alfabeticamente por nome exibido
+        setPacientes(patients);
-        const sortedPatients = Array.isArray(patients)
+        setMedicos(doctors);
          ? patients.sort((a: any, b: any) =>
              (a.full_name || a.name || "")
                .localeCompare(b.full_name || b.name || "", "pt-BR", {
                  sensitivity: "base",
                })
            )
          : [];
        const sortedDoctors = Array.isArray(doctors)
          ? doctors.sort((a: any, b: any) =>
              (a.full_name || a.name || "")
                .localeCompare(b.full_name || b.name || "", "pt-BR", {
                  sensitivity: "base",
                })
            )
          : [];
        setPacientes(sortedPatients);
        setMedicos(sortedDoctors);
      } finally {
        if (active) setLoadingLists(false);
      }
@ -193,7 +173,9 @@ const ConsultaModal: React.FC<ConsultaModalProps> = ({
      if (editing) {
        const payload = {
          scheduled_at: iso,
-          appointment_type: appointmentType,
+          appointment_type: (tipo || "presencial") as
            | "presencial"
            | "telemedicina",
          notes: observacoes || undefined,
          status: status as
            | "requested"
@ -207,26 +189,14 @@ const ConsultaModal: React.FC<ConsultaModalProps> = ({
        const updated = await appointmentService.update(editing.id, payload);
        onSaved(updated);
      } else {
        // Buscar user ID do localStorage ou context
        const userStr = localStorage.getItem("mediconnect_user");
        let userId = user?.id;
        if (!userId && userStr) {
          try {
            const userData = JSON.parse(userStr);
            userId = userData.id;
          } catch (e) {
            console.warn("Erro ao parsear user do localStorage");
          }
        }
        // Payload conforme documentação da API Supabase
        const payload = {
          doctor_id: medicoId,
          patient_id: pacienteId,
          doctor_id: medicoId,
          scheduled_at: iso,
-          duration_minutes: 30,
+          appointment_type: (tipo || "presencial") as
-          created_by: userId,
+            | "presencial"
            | "telemedicina",
          notes: observacoes || undefined,
        };
        const created = await appointmentService.create(payload);
        onSaved(created);
@ -243,22 +213,18 @@ const ConsultaModal: React.FC<ConsultaModalProps> = ({
  const title = editing ? "Editar Consulta" : "Nova Consulta";
  return (
-    <div className="fixed inset-0 z-[10000] flex items-center justify-center bg-black/50 p-4 overflow-y-auto">
+    <div className="fixed inset-0 z-50 flex items-start justify-center bg-black/40 p-4 overflow-y-auto">
-      <div className="bg-white rounded-lg shadow-xl w-full max-w-2xl my-auto max-h-[95vh] flex flex-col">
+      <div className="bg-white rounded-lg shadow-xl w-full max-w-xl animate-fade-in mt-10">
-        <div className="flex items-center justify-between px-4 py-3 border-b bg-gradient-to-r from-blue-50 to-indigo-50 flex-shrink-0">
+        <div className="flex items-center justify-between px-4 py-3 border-b">
-          <h2 className="text-lg font-semibold text-gray-800">{title}</h2>
+          <h2 className="text-lg font-semibold">{title}</h2>
          <button
            onClick={onClose}
-            className="text-gray-500 hover:text-gray-700 p-1 hover:bg-gray-100 rounded transition-colors"
+            className="text-gray-500 hover:text-gray-700"
            aria-label="Fechar"
          >
            <X className="w-5 h-5" />
          </button>
        </div>
-        <form
+        <form onSubmit={handleSubmit} className="p-4 space-y-4">
          onSubmit={handleSubmit}
          className="flex-1 overflow-y-auto p-4 space-y-4"
        >
          {error && (
            <div className="bg-red-50 border border-red-200 text-red-700 px-3 py-2 rounded text-sm">
              {error}
@ -267,10 +233,10 @@ const ConsultaModal: React.FC<ConsultaModalProps> = ({
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
-                Paciente <span className="text-red-500">*</span>
+                Paciente
              </label>
              <select
-                className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                className="w-full border rounded px-2 py-2 text-sm"
                value={pacienteId}
                onChange={(e) => setPacienteId(e.target.value)}
                disabled={lockPaciente || !!editing}
@ -285,10 +251,10 @@ const ConsultaModal: React.FC<ConsultaModalProps> = ({
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
-                Médico <span className="text-red-500">*</span>
+                Médico
              </label>
              <select
-                className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                className="w-full border rounded px-2 py-2 text-sm"
                value={medicoId}
                onChange={(e) => setMedicoId(e.target.value)}
                disabled={lockMedico || !!editing}
@ -302,26 +268,23 @@ const ConsultaModal: React.FC<ConsultaModalProps> = ({
              </select>
            </div>
            {/* Calendário Visual */}
-            <div className="md:col-span-2 space-y-3">
+            <div className="md:col-span-2 space-y-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">
-                  Data da Consulta <span className="text-red-500">*</span>
+                  Data da Consulta *
                </label>
                {medicoId ? (
                  <div className="bg-gray-50 border border-gray-200 rounded-lg p-3">
                  <CalendarPicker
                    doctorId={medicoId}
                    selectedDate={selectedDate}
                    onSelectDate={(date) => {
                      setSelectedDate(date);
-                        setSelectedTime("");
+                      setSelectedTime(""); // Resetar horário ao mudar data
                    }}
                  />
                  </div>
                ) : (
                  <div className="bg-gray-50 border border-gray-200 rounded-lg p-4 text-center text-gray-500 text-sm">
-                    <p className="font-medium">📅 Calendário Indisponível</p>
+                    Selecione um médico primeiro para ver a disponibilidade
                    <p className="text-xs mt-1">Selecione um médico primeiro</p>
                  </div>
                )}
              </div>
@ -330,14 +293,13 @@ const ConsultaModal: React.FC<ConsultaModalProps> = ({
              {selectedDate && medicoId && (
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">
-                    Horário <span className="text-red-500">*</span>
+                    Horário *{" "}
                    {selectedTime && (
-                      <span className="text-blue-600 font-semibold ml-2">
+                      <span className="text-blue-600 font-semibold">
                        ({selectedTime})
                      </span>
                    )}
                  </label>
                  <div className="bg-gray-50 border border-gray-200 rounded-lg p-3">
                  <AvailableSlotsPicker
                    doctorId={medicoId}
                    date={selectedDate}
@ -346,86 +308,42 @@ const ConsultaModal: React.FC<ConsultaModalProps> = ({
                    }}
                  />
                </div>
                </div>
              )}
            </div>
          </div>
          {/* Linha com Tipo de Consulta e Motivo - Fora do grid para ocupar largura total */}
          <div className="grid grid-cols-1 md:grid-cols-[auto_1fr] gap-4 items-end">
            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-2">
+              <label className="block text-sm font-medium text-gray-700 mb-1">
-                Tipo de Consulta <span className="text-red-500">*</span>
+                Tipo
              </label>
              <div className="flex gap-2">
                <label className="flex items-center justify-center gap-2 cursor-pointer px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors has-[:checked]:border-blue-500 has-[:checked]:bg-blue-50 whitespace-nowrap">
              <input
-                    type="radio"
+                list="tipos-consulta"
-                    value="presencial"
+                className="w-full border rounded px-2 py-2 text-sm"
-                    checked={appointmentType === "presencial"}
+                value={tipo}
-                    onChange={(e) =>
+                onChange={(e) => setTipo(e.target.value)}
-                      setAppointmentType(e.target.value as "presencial")
+                placeholder="Ex: Retorno"
                    }
                    className="w-4 h-4 text-blue-600"
              />
-                  <span className="text-sm font-medium">Presencial</span>
+              <datalist id="tipos-consulta">
-                </label>
+                {TIPO_SUGESTOES.map((t) => (
-                <label className="flex items-center justify-center gap-2 cursor-pointer px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors has-[:checked]:border-blue-500 has-[:checked]:bg-blue-50 whitespace-nowrap">
+                  <option key={t} value={t} />
-                  <input
+                ))}
-                    type="radio"
+              </datalist>
                    value="telemedicina"
                    checked={appointmentType === "telemedicina"}
                    onChange={(e) =>
                      setAppointmentType(e.target.value as "telemedicina")
                    }
                    className="w-4 h-4 text-blue-600"
                  />
                  <span className="text-sm font-medium">Telemedicina</span>
                </label>
            </div>
            </div>
            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-2">
+              <label className="block text-sm font-medium text-gray-700 mb-1">
                Motivo
              </label>
              <input
-                className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                className="w-full border rounded px-2 py-2 text-sm"
                value={motivo}
                onChange={(e) => setMotivo(e.target.value)}
                placeholder="Motivo principal"
              />
            </div>
          </div>
          {editing && (
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                Status
              </label>
              <select
                className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                value={status}
                onChange={(e) => setStatus(e.target.value)}
              >
                <option value="requested">Solicitado</option>
                <option value="confirmed">Confirmado</option>
                <option value="checked_in">Check-in</option>
                <option value="in_progress">Em Andamento</option>
                <option value="completed">Concluído</option>
                <option value="cancelled">Cancelado</option>
                <option value="no_show">Não Compareceu</option>
              </select>
            </div>
          )}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="md:col-span-2">
              <label className="block text-sm font-medium text-gray-700 mb-1">
                Observações
              </label>
              <textarea
-                className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm resize-y min-h-[80px] focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                className="w-full border rounded px-2 py-2 text-sm resize-y min-h-[80px]"
                value={observacoes}
                onChange={(e) => setObservacoes(e.target.value)}
                placeholder="Notas internas, preparação, etc"
@ -434,10 +352,10 @@ const ConsultaModal: React.FC<ConsultaModalProps> = ({
            {editing && (
              <div className="md:col-span-2">
                <label className="block text-sm font-medium text-gray-700 mb-1">
-                  Status <span className="text-red-500">*</span>
+                  Status
                </label>
                <select
-                  className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                  className="w-full border rounded px-2 py-2 text-sm"
                  value={status}
                  onChange={(e) => setStatus(e.target.value)}
                >
@ -451,30 +369,29 @@ const ConsultaModal: React.FC<ConsultaModalProps> = ({
            )}
          </div>
          {loadingLists && (
-            <p className="text-sm text-gray-500 flex items-center bg-blue-50 py-2 px-3 rounded">
+            <p className="text-xs text-gray-500 flex items-center">
-              <Loader2 className="w-4 h-4 mr-2 animate-spin" /> Carregando
+              <Loader2 className="w-4 h-4 mr-1 animate-spin" /> Carregando
              listas...
            </p>
          )}
-        </form>
+          <div className="flex justify-end gap-2 pt-2 border-t">
        <div className="flex gap-2 px-4 py-3 border-t bg-gray-50 flex-shrink-0">
            <button
              type="button"
              onClick={onClose}
-            className="flex-1 px-4 py-2 text-sm rounded-lg border-2 border-gray-300 text-gray-700 hover:bg-gray-100 font-medium"
+              className="px-4 py-2 text-sm rounded border border-gray-300 text-gray-700 hover:bg-gray-50"
            >
              Cancelar
            </button>
            <button
              type="submit"
              disabled={saving}
-            onClick={handleSubmit}
+              className="px-4 py-2 text-sm rounded bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-60 flex items-center"
            className="flex-1 px-4 py-2 text-sm rounded-lg bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-60 disabled:cursor-not-allowed flex items-center justify-center font-medium"
            >
-            {saving && <Loader2 className="w-4 h-4 mr-2 animate-spin" />}
+              {saving && <Loader2 className="w-4 h-4 mr-2 animate-spin" />}{" "}
              {editing ? "Salvar alterações" : "Criar consulta"}
            </button>
          </div>
        </form>
      </div>
    </div>
  );
--- a/src/components/consultas/RescheduleModal.tsx
+++ b/src/components/consultas/RescheduleModal.tsx
@ -1,295 +0,0 @@
 /**
 * RescheduleModal Component
 * Modal para reagendamento inteligente de consultas
 * @version 1.0
 */
 import { useState, useMemo } from "react";
 import { X, Calendar, Clock, AlertCircle, CheckCircle } from "lucide-react";
 import { format, addDays, isBefore, startOfDay } from "date-fns";
 import { ptBR } from "date-fns/locale";
 import { useAvailability } from "../../hooks/useAvailability";
 import { useUpdateAppointment } from "../../hooks/useAppointments";
 interface RescheduleModalProps {
  appointmentId: string;
  appointmentDate: string;
  doctorId: string;
  doctorName: string;
  patientName: string;
  onClose: () => void;
 }
 interface SuggestedSlot {
  date: string;
  time: string;
  datetime: string;
  distance: number; // dias de distância da data original
 }
 export function RescheduleModal({
  appointmentId,
  appointmentDate,
  doctorId,
  doctorName,
  patientName,
  onClose,
 }: RescheduleModalProps) {
  const [selectedSlot, setSelectedSlot] = useState<SuggestedSlot | null>(null);
  const { data: availabilities = [], isLoading: loadingAvailabilities } =
    useAvailability(doctorId);
  const updateMutation = useUpdateAppointment();
  // Gerar sugestões inteligentes de horários
  const suggestedSlots = useMemo(() => {
    const originalDate = new Date(appointmentDate);
    const today = startOfDay(new Date());
    const slots: SuggestedSlot[] = [];
    // Buscar próximos 30 dias
    for (let i = 0; i < 30; i++) {
      const checkDate = addDays(today, i);
      // Pular datas passadas
      if (isBefore(checkDate, today)) continue;
      const dayOfWeek = checkDate.getDay();
      const dayAvailabilities = availabilities.filter((avail) => {
        if (typeof avail.weekday === "undefined") return false;
        // Mapear weekday de 0-6 (domingo-sábado)
        return avail.weekday === dayOfWeek && avail.active !== false;
      });
      dayAvailabilities.forEach((avail) => {
        if (avail.start_time && avail.end_time) {
          // Gerar slots de 30 em 30 minutos
          const startHour = parseInt(avail.start_time.split(":")[0]);
          const startMin = parseInt(avail.start_time.split(":")[1]);
          const endHour = parseInt(avail.end_time.split(":")[0]);
          const endMin = parseInt(avail.end_time.split(":")[1]);
          const startMinutes = startHour * 60 + startMin;
          const endMinutes = endHour * 60 + endMin;
          for (
            let minutes = startMinutes;
            minutes < endMinutes;
            minutes += 30
          ) {
            const slotHour = Math.floor(minutes / 60);
            const slotMin = minutes % 60;
            const timeStr = `${String(slotHour).padStart(2, "0")}:${String(
              slotMin
            ).padStart(2, "0")}`;
            const datetime = new Date(checkDate);
            datetime.setHours(slotHour, slotMin, 0, 0);
            // Calcular distância em dias da data original
            const distance = Math.abs(
              Math.floor(
                (datetime.getTime() - originalDate.getTime()) /
                  (1000 * 60 * 60 * 24)
              )
            );
            slots.push({
              date: format(checkDate, "EEEE, dd 'de' MMMM", { locale: ptBR }),
              time: timeStr,
              datetime: datetime.toISOString(),
              distance,
            });
          }
        }
      });
    }
    // Ordenar por distância (mais próximo da data original)
    return slots.sort((a, b) => a.distance - b.distance).slice(0, 10); // Top 10 sugestões
  }, [availabilities, appointmentDate]);
  const handleReschedule = async () => {
    if (!selectedSlot) return;
    try {
      await updateMutation.mutateAsync({
        id: appointmentId,
        scheduled_at: selectedSlot.datetime,
      });
      onClose();
    } catch (error) {
      console.error("Erro ao reagendar:", error);
    }
  };
  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4">
      <div
        className="bg-white dark:bg-gray-800 rounded-xl shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-hidden flex flex-col"
        onClick={(e) => e.stopPropagation()}
      >
        {/* Header */}
        <div className="flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700">
          <div>
            <h2 className="text-2xl font-bold text-gray-900 dark:text-white">
              Reagendar Consulta
            </h2>
            <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
              {patientName} · Dr(a). {doctorName}
            </p>
          </div>
          <button
            onClick={onClose}
            className="p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
          >
            <X className="w-5 h-5 text-gray-500" />
          </button>
        </div>
        {/* Info da consulta atual */}
        <div className="px-6 py-4 bg-amber-50 dark:bg-amber-900/20 border-b border-amber-100 dark:border-amber-800">
          <div className="flex items-center gap-2 text-amber-800 dark:text-amber-300">
            <AlertCircle className="w-5 h-5" />
            <div>
              <p className="font-medium">Data atual da consulta</p>
              <p className="text-sm">
                {format(
                  new Date(appointmentDate),
                  "EEEE, dd 'de' MMMM 'às' HH:mm",
                  {
                    locale: ptBR,
                  }
                )}
              </p>
            </div>
          </div>
        </div>
        {/* Lista de sugestões */}
        <div className="flex-1 overflow-y-auto p-6">
          <h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-4 uppercase tracking-wide">
            Horários Sugeridos (mais próximos)
          </h3>
          {loadingAvailabilities ? (
            <div className="space-y-3">
              {[...Array(5)].map((_, i) => (
                <div
                  key={i}
                  className="p-4 bg-gray-100 dark:bg-gray-700 rounded-lg animate-pulse h-20"
                />
              ))}
            </div>
          ) : suggestedSlots.length === 0 ? (
            <div className="text-center py-12 text-gray-500 dark:text-gray-400">
              <Calendar className="w-12 h-12 mx-auto mb-3 opacity-50" />
              <p>Nenhum horário disponível encontrado</p>
              <p className="text-sm mt-1">
                Configure a disponibilidade do médico ou tente outro período
              </p>
            </div>
          ) : (
            <div className="space-y-2">
              {suggestedSlots.map((slot, index) => (
                <button
                  key={index}
                  onClick={() => setSelectedSlot(slot)}
                  className={`
                    w-full flex items-center justify-between p-4 rounded-lg border-2 transition-all
                    ${
                      selectedSlot?.datetime === slot.datetime
                        ? "border-green-500 bg-green-50 dark:bg-green-900/20"
                        : "border-gray-200 dark:border-gray-700 hover:border-green-300 dark:hover:border-green-700"
                    }
                  `}
                >
                  <div className="flex items-center gap-4">
                    <div
                      className={`
                      p-3 rounded-lg
                      ${
                        selectedSlot?.datetime === slot.datetime
                          ? "bg-green-500 text-white"
                          : "bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400"
                      }
                    `}
                    >
                      <Calendar className="w-5 h-5" />
                    </div>
                    <div className="text-left">
                      <p
                        className={`font-medium ${
                          selectedSlot?.datetime === slot.datetime
                            ? "text-green-900 dark:text-green-100"
                            : "text-gray-900 dark:text-gray-100"
                        }`}
                      >
                        {slot.date}
                      </p>
                      <div className="flex items-center gap-2 mt-1">
                        <Clock className="w-4 h-4 text-gray-400" />
                        <p className="text-sm text-gray-600 dark:text-gray-400">
                          {slot.time}
                        </p>
                      </div>
                    </div>
                  </div>
                  <div className="text-right">
                    <span
                      className={`
                      text-xs px-2 py-1 rounded-full
                      ${
                        slot.distance === 0
                          ? "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300"
                          : slot.distance <= 3
                          ? "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300"
                          : "bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300"
                      }
                    `}
                    >
                      {slot.distance === 0
                        ? "Mesmo dia"
                        : `${slot.distance} dias`}
                    </span>
                  </div>
                </button>
              ))}
            </div>
          )}
        </div>
        {/* Footer */}
        <div className="flex items-center justify-between p-6 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900">
          <button
            onClick={onClose}
            className="px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg transition-colors"
          >
            Cancelar
          </button>
          <button
            onClick={handleReschedule}
            disabled={!selectedSlot || updateMutation.isPending}
            className="
              px-6 py-2 bg-green-600 text-white rounded-lg font-medium
              hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed
              transition-colors flex items-center gap-2
            "
          >
            {updateMutation.isPending ? (
              <>
                <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
                Reagendando...
              </>
            ) : (
              <>
                <CheckCircle className="w-4 h-4" />
                Confirmar Novo Horário
              </>
            )}
          </button>
        </div>
      </div>
    </div>
  );
 }
--- a/src/components/consultas/WaitingRoom.tsx
+++ b/src/components/consultas/WaitingRoom.tsx
@ -1,103 +0,0 @@
 /**
 * WaitingRoom Component
 * Exibe lista de pacientes que fizeram check-in e aguardam atendimento
 * @version 1.0
 */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { format } from "date-fns";
 import { Clock, User } from "lucide-react";
 import { useAppointments } from "../../hooks/useAppointments";
 interface WaitingRoomProps {
  doctorId: string;
 }
 export function WaitingRoom({ doctorId }: WaitingRoomProps) {
  const today = format(new Date(), "yyyy-MM-dd");
  const { data: waitingAppointments = [], isLoading } = useAppointments({
    doctor_id: doctorId,
    status: "checked_in",
    scheduled_at: `gte.${today}T00:00:00`,
  });
  if (isLoading) {
    return (
      <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
        <div className="animate-pulse space-y-4">
          <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/4"></div>
          <div className="h-20 bg-gray-200 dark:bg-gray-700 rounded"></div>
          <div className="h-20 bg-gray-200 dark:bg-gray-700 rounded"></div>
        </div>
      </div>
    );
  }
  if (waitingAppointments.length === 0) {
    return (
      <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-8 text-center">
        <div className="flex flex-col items-center gap-4">
          <div className="w-16 h-16 bg-gray-100 dark:bg-gray-700 rounded-full flex items-center justify-center">
            <User className="h-8 w-8 text-gray-400" />
          </div>
          <div>
            <p className="text-gray-600 dark:text-gray-400 font-medium">
              Nenhum paciente na sala de espera
            </p>
            <p className="text-sm text-gray-500 dark:text-gray-500 mt-1">
              Pacientes que fizerem check-in aparecerão aqui
            </p>
          </div>
        </div>
      </div>
    );
  }
  return (
    <div className="bg-white dark:bg-gray-800 rounded-lg shadow">
      <div className="divide-y divide-gray-200 dark:divide-gray-700">
        {waitingAppointments.map((appointment) => {
          const waitTime = Math.floor(
            (new Date().getTime() -
              new Date(
                appointment.created_at || appointment.scheduled_at
              ).getTime()) /
              60000
          );
          return (
            <div
              key={appointment.id}
              className="p-4 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors"
            >
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-3">
                  <div className="w-10 h-10 bg-purple-100 dark:bg-purple-900/30 rounded-full flex items-center justify-center">
                    <User className="h-5 w-5 text-purple-600 dark:text-purple-400" />
                  </div>
                  <div>
                    <p className="font-medium text-gray-900 dark:text-white">
                      {(appointment as any).patient_name || "Paciente"}
                    </p>
                    <p className="text-sm text-gray-500 dark:text-gray-400">
                      Agendado para{" "}
                      {format(new Date(appointment.scheduled_at), "HH:mm")}
                    </p>
                  </div>
                </div>
                <div className="flex items-center gap-2 text-sm">
                  <Clock className="h-4 w-4 text-gray-400" />
                  <span className="text-gray-600 dark:text-gray-400">
                    {waitTime < 1 ? "Agora" : `${waitTime} min`}
                  </span>
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
 }
--- a/src/components/dashboard/MetricCard.tsx
+++ b/src/components/dashboard/MetricCard.tsx
@ -1,142 +0,0 @@
 import { LucideIcon } from "lucide-react";
 import { Skeleton } from "../ui/Skeleton";
 interface MetricCardProps {
  title: string;
  value: string | number;
  icon: LucideIcon;
  description?: string;
  trend?: {
    value: number;
    isPositive: boolean;
  };
  isLoading?: boolean;
  colorScheme?: "blue" | "green" | "purple" | "orange" | "red" | "indigo";
 }
 const colorClasses = {
  blue: {
    iconBg: "bg-blue-100 dark:bg-blue-900/30",
    iconText: "text-blue-600 dark:text-blue-400",
    trendPositive: "text-green-600 dark:text-green-400",
    trendNegative: "text-red-600 dark:text-red-400",
  },
  green: {
    iconBg: "bg-green-100 dark:bg-green-900/30",
    iconText: "text-green-600 dark:text-green-400",
    trendPositive: "text-green-600 dark:text-green-400",
    trendNegative: "text-red-600 dark:text-red-400",
  },
  purple: {
    iconBg: "bg-purple-100 dark:bg-purple-900/30",
    iconText: "text-purple-600 dark:text-purple-400",
    trendPositive: "text-green-600 dark:text-green-400",
    trendNegative: "text-red-600 dark:text-red-400",
  },
  orange: {
    iconBg: "bg-orange-100 dark:bg-orange-900/30",
    iconText: "text-orange-600 dark:text-orange-400",
    trendPositive: "text-green-600 dark:text-green-400",
    trendNegative: "text-red-600 dark:text-red-400",
  },
  red: {
    iconBg: "bg-red-100 dark:bg-red-900/30",
    iconText: "text-red-600 dark:text-red-400",
    trendPositive: "text-green-600 dark:text-green-400",
    trendNegative: "text-red-600 dark:text-red-400",
  },
  indigo: {
    iconBg: "bg-indigo-100 dark:bg-indigo-900/30",
    iconText: "text-indigo-600 dark:text-indigo-400",
    trendPositive: "text-green-600 dark:text-green-400",
    trendNegative: "text-red-600 dark:text-red-400",
  },
 };
 export function MetricCard({
  title,
  value,
  icon: Icon,
  description,
  trend,
  isLoading = false,
  colorScheme = "blue",
 }: MetricCardProps) {
  const colors = colorClasses[colorScheme];
  if (isLoading) {
    return (
      <div className="bg-white dark:bg-slate-900 rounded-lg border border-gray-200 dark:border-slate-700 p-6">
        <div className="flex items-center justify-between mb-4">
          <Skeleton className="h-4 w-32" />
          <Skeleton className="h-10 w-10 rounded-lg" />
        </div>
        <Skeleton className="h-8 w-24 mb-2" />
        <Skeleton className="h-4 w-full" />
      </div>
    );
  }
  return (
    <div className="bg-white dark:bg-slate-900 rounded-lg border border-gray-200 dark:border-slate-700 p-6 hover:shadow-lg transition-shadow duration-200">
      <div className="flex items-center justify-between mb-4">
        <p className="text-sm font-medium text-gray-600 dark:text-gray-400">
          {title}
        </p>
        <div className={`p-2.5 rounded-lg ${colors.iconBg}`}>
          <Icon className={`h-5 w-5 ${colors.iconText}`} />
        </div>
      </div>
      <div className="flex items-baseline gap-3">
        <div className="text-3xl font-bold text-gray-900 dark:text-white">
          {value}
        </div>
        {trend && (
          <div
            className={`flex items-center gap-1 text-sm font-semibold ${
              trend.isPositive ? colors.trendPositive : colors.trendNegative
            }`}
          >
            <span>{trend.isPositive ? "↑" : "↓"}</span>
            <span>{Math.abs(trend.value)}%</span>
          </div>
        )}
      </div>
      {description && (
        <p className="text-sm text-gray-600 dark:text-gray-400 mt-2">
          {description}
        </p>
      )}
    </div>
  );
 }
 // Skeleton específico para loading de múltiplos cards
 export function MetricCardSkeleton() {
  return (
    <div className="bg-white dark:bg-slate-900 rounded-lg border border-gray-200 dark:border-slate-700 p-6">
      <div className="flex items-center justify-between mb-4">
        <Skeleton className="h-4 w-32" />
        <Skeleton className="h-10 w-10 rounded-lg" />
      </div>
      <Skeleton className="h-8 w-24 mb-2" />
      <Skeleton className="h-4 w-full" />
    </div>
  );
 }
 // Exemplo de uso:
 // import { MetricCard } from '@/components/dashboard/MetricCard';
 // import { Users, Calendar, TrendingUp } from 'lucide-react';
 //
 // <MetricCard
 //   title="Total de Pacientes"
 //   value={145}
 //   icon={Users}
 //   description="Pacientes ativos"
 //   trend={{ value: 12, isPositive: true }}
 //   colorScheme="blue"
 // />
--- a/src/components/dashboard/OccupancyHeatmap.tsx
+++ b/src/components/dashboard/OccupancyHeatmap.tsx
@ -1,310 +0,0 @@
 /**
 * OccupancyHeatmap Component
 * Heatmap de ocupação semanal dos horários
 * @version 1.0
 */
 import { useMemo } from "react";
 import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  ResponsiveContainer,
  Cell,
 } from "recharts";
 import { Calendar, TrendingUp, TrendingDown } from "lucide-react";
 import { format } from "date-fns";
 import { ptBR } from "date-fns/locale";
 interface OccupancyData {
  date: string;
  total_slots: number;
  occupied_slots: number;
  available_slots: number;
  occupancy_rate: number;
 }
 interface OccupancyHeatmapProps {
  data: OccupancyData[];
  isLoading?: boolean;
  title?: string;
  className?: string;
 }
 export function OccupancyHeatmap({
  data,
  isLoading = false,
  title = "Ocupação Semanal",
  className = "",
 }: OccupancyHeatmapProps) {
  // Transformar dados para formato do chart
  const chartData = useMemo(() => {
    return data.map((item) => ({
      date: format(new Date(item.date), "EEE dd/MM", { locale: ptBR }),
      fullDate: item.date,
      ocupados: item.occupied_slots,
      disponiveis: item.available_slots,
      taxa: item.occupancy_rate,
    }));
  }, [data]);
  // Calcular estatísticas
  const stats = useMemo(() => {
    if (data.length === 0) return null;
    const avgOccupancy =
      data.reduce((sum, item) => sum + item.occupancy_rate, 0) / data.length;
    const maxOccupancy = Math.max(...data.map((item) => item.occupancy_rate));
    const minOccupancy = Math.min(...data.map((item) => item.occupancy_rate));
    const totalSlots = data.reduce((sum, item) => sum + item.total_slots, 0);
    const totalOccupied = data.reduce(
      (sum, item) => sum + item.occupied_slots,
      0
    );
    // Tendência (comparar primeira metade com segunda metade)
    const mid = Math.floor(data.length / 2);
    const firstHalf =
      data.slice(0, mid).reduce((sum, item) => sum + item.occupancy_rate, 0) /
      mid;
    const secondHalf =
      data.slice(mid).reduce((sum, item) => sum + item.occupancy_rate, 0) /
      (data.length - mid);
    const trend = secondHalf - firstHalf;
    return {
      avgOccupancy: avgOccupancy.toFixed(1),
      maxOccupancy: maxOccupancy.toFixed(1),
      minOccupancy: minOccupancy.toFixed(1),
      totalSlots,
      totalOccupied,
      trend,
      trendText:
        trend > 5 ? "crescente" : trend < -5 ? "decrescente" : "estável",
    };
  }, [data]);
  // Cor baseada na taxa de ocupação
  const getOccupancyColor = (rate: number) => {
    if (rate >= 80) return "#dc2626"; // red-600 - crítico
    if (rate >= 60) return "#f59e0b"; // amber-500 - alto
    if (rate >= 40) return "#22c55e"; // green-500 - bom
    return "#3b82f6"; // blue-500 - baixo
  };
  // Tooltip customizado
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const CustomTooltip = ({
    active,
    payload,
  }: {
    active?: boolean;
    payload?: any[];
  }) => {
    if (!active || !payload || !payload.length) return null;
    const data = payload[0].payload;
    return (
      <div className="bg-white dark:bg-gray-800 p-3 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700">
        <p className="font-semibold text-gray-900 dark:text-gray-100 mb-2">
          {data.date}
        </p>
        <div className="space-y-1 text-sm">
          <p className="text-green-600 dark:text-green-400">
            ✓ Ocupados: {data.ocupados}
          </p>
          <p className="text-blue-600 dark:text-blue-400">
            ○ Disponíveis: {data.disponiveis}
          </p>
          <p className="text-gray-700 dark:text-gray-300 font-semibold mt-2">
            Taxa: {data.taxa.toFixed(1)}%
          </p>
        </div>
      </div>
    );
  };
  if (isLoading) {
    return (
      <div
        className={`bg-white dark:bg-gray-800 rounded-xl p-6 shadow-sm ${className}`}
      >
        <div className="animate-pulse">
          <div className="h-6 bg-gray-200 dark:bg-gray-700 rounded w-1/3 mb-4"></div>
          <div className="h-64 bg-gray-200 dark:bg-gray-700 rounded"></div>
        </div>
      </div>
    );
  }
  if (data.length === 0) {
    return (
      <div
        className={`bg-white dark:bg-gray-800 rounded-xl p-6 shadow-sm ${className}`}
      >
        <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">
          {title}
        </h3>
        <div className="flex flex-col items-center justify-center py-12 text-gray-500 dark:text-gray-400">
          <Calendar className="w-12 h-12 mb-3 opacity-50" />
          <p>Nenhum dado de ocupação disponível</p>
          <p className="text-sm mt-1">
            Os dados aparecem assim que houver consultas agendadas
          </p>
        </div>
      </div>
    );
  }
  return (
    <div
      className={`bg-white dark:bg-gray-800 rounded-xl p-6 shadow-sm ${className}`}
    >
      {/* Header */}
      <div className="flex items-center justify-between mb-6">
        <div>
          <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
            {title}
          </h3>
          <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
            Últimos 7 dias de ocupação
          </p>
        </div>
        {stats && (
          <div className="flex items-center gap-2 text-sm">
            {stats.trend > 5 ? (
              <TrendingUp className="w-4 h-4 text-green-600" />
            ) : stats.trend < -5 ? (
              <TrendingDown className="w-4 h-4 text-red-600" />
            ) : (
              <span className="w-4 h-4 text-gray-400">—</span>
            )}
            <span
              className={`font-medium ${
                stats.trend > 5
                  ? "text-green-600"
                  : stats.trend < -5
                  ? "text-red-600"
                  : "text-gray-600 dark:text-gray-400"
              }`}
            >
              {stats.trendText}
            </span>
          </div>
        )}
      </div>
      {/* Stats Cards */}
      {stats && (
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
          <div className="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-3">
            <p className="text-xs text-blue-600 dark:text-blue-400 font-medium mb-1">
              Média
            </p>
            <p className="text-2xl font-bold text-blue-700 dark:text-blue-300">
              {stats.avgOccupancy}%
            </p>
          </div>
          <div className="bg-green-50 dark:bg-green-900/20 rounded-lg p-3">
            <p className="text-xs text-green-600 dark:text-green-400 font-medium mb-1">
              Máxima
            </p>
            <p className="text-2xl font-bold text-green-700 dark:text-green-300">
              {stats.maxOccupancy}%
            </p>
          </div>
          <div className="bg-purple-50 dark:bg-purple-900/20 rounded-lg p-3">
            <p className="text-xs text-purple-600 dark:text-purple-400 font-medium mb-1">
              Mínima
            </p>
            <p className="text-2xl font-bold text-purple-700 dark:text-purple-300">
              {stats.minOccupancy}%
            </p>
          </div>
          <div className="bg-orange-50 dark:bg-orange-900/20 rounded-lg p-3">
            <p className="text-xs text-orange-600 dark:text-orange-400 font-medium mb-1">
              Ocupados
            </p>
            <p className="text-2xl font-bold text-orange-700 dark:text-orange-300">
              {stats.totalOccupied}/{stats.totalSlots}
            </p>
          </div>
        </div>
      )}
      {/* Chart */}
      <ResponsiveContainer width="100%" height={300}>
        <BarChart data={chartData}>
          <CartesianGrid
            strokeDasharray="3 3"
            className="stroke-gray-200 dark:stroke-gray-700"
          />
          <XAxis
            dataKey="date"
            tick={{ fill: "currentColor" }}
            className="text-gray-600 dark:text-gray-400"
          />
          <YAxis
            tick={{ fill: "currentColor" }}
            className="text-gray-600 dark:text-gray-400"
          />
          <Tooltip content={<CustomTooltip />} />
          <Legend />
          <Bar
            dataKey="ocupados"
            fill="#22c55e"
            name="Ocupados"
            radius={[8, 8, 0, 0]}
          >
            {chartData.map((entry, index) => (
              <Cell
                key={`cell-${index}`}
                fill={getOccupancyColor(entry.taxa)}
              />
            ))}
          </Bar>
          <Bar
            dataKey="disponiveis"
            fill="#3b82f6"
            name="Disponíveis"
            radius={[8, 8, 0, 0]}
          />
        </BarChart>
      </ResponsiveContainer>
      {/* Legend */}
      <div className="flex items-center justify-center gap-6 mt-4 text-xs">
        <div className="flex items-center gap-2">
          <div className="w-3 h-3 rounded bg-blue-500"></div>
          <span className="text-gray-600 dark:text-gray-400">
            Baixo (&lt;40%)
          </span>
        </div>
        <div className="flex items-center gap-2">
          <div className="w-3 h-3 rounded bg-green-500"></div>
          <span className="text-gray-600 dark:text-gray-400">Bom (40-60%)</span>
        </div>
        <div className="flex items-center gap-2">
          <div className="w-3 h-3 rounded bg-amber-500"></div>
          <span className="text-gray-600 dark:text-gray-400">
            Alto (60-80%)
          </span>
        </div>
        <div className="flex items-center gap-2">
          <div className="w-3 h-3 rounded bg-red-600"></div>
          <span className="text-gray-600 dark:text-gray-400">
            Crítico (&gt;80%)
          </span>
        </div>
      </div>
    </div>
  );
 }
--- a/src/components/images/CONNI.png
+++ b/src/components/images/CONNI.png
--- a/src/components/painel/DashboardTab.tsx
+++ b/src/components/painel/DashboardTab.tsx
@ -1,174 +0,0 @@
 import {
  Clock,
  Calendar,
  CheckCircle,
  TrendingUp,
  UserCheck,
  Activity,
 } from "lucide-react";
 import { MetricCard, MetricCardSkeleton } from "../dashboard/MetricCard";
 import { OccupancyHeatmap } from "../dashboard/OccupancyHeatmap";
 import { useMetrics, useOccupancyData } from "../../hooks/useMetrics";
 interface ConsultaUI {
  id: string;
  pacienteNome: string;
  dataHora: string;
  status: string;
 }
 interface DashboardTabProps {
  doctorTableId: string | null;
  consultasHoje: ConsultaUI[];
  consultasConfirmadas: ConsultaUI[];
 }
 export function DashboardTab({
  doctorTableId,
  consultasHoje,
  consultasConfirmadas,
 }: DashboardTabProps) {
  const { data: metrics, isLoading: metricsLoading } = useMetrics(
    doctorTableId || undefined
  );
  const { data: occupancyData = [], isLoading: occupancyLoading } =
    useOccupancyData(doctorTableId || undefined);
  return (
    <div className="space-y-6">
      {/* Header */}
      <div>
        <h1 className="text-2xl font-bold text-gray-900 dark:text-white">
          Dashboard
        </h1>
        <p className="text-gray-600 dark:text-gray-400 mt-1">
          Visão geral do seu consultório
        </p>
      </div>
      {/* Métricas KPI */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {metricsLoading ? (
          <>
            <MetricCardSkeleton />
            <MetricCardSkeleton />
            <MetricCardSkeleton />
            <MetricCardSkeleton />
            <MetricCardSkeleton />
            <MetricCardSkeleton />
          </>
        ) : metrics ? (
          <>
            <MetricCard
              title="Consultas Hoje"
              value={metrics.appointmentsToday}
              icon={Clock}
              description={`${consultasConfirmadas.length} confirmadas`}
              colorScheme="blue"
            />
            <MetricCard
              title="Total de Consultas"
              value={metrics.totalAppointments}
              icon={Calendar}
              description="Todas as consultas"
              colorScheme="purple"
            />
            <MetricCard
              title="Consultas Concluídas"
              value={metrics.completedAppointments}
              icon={CheckCircle}
              description="Atendimentos finalizados"
              colorScheme="green"
            />
            <MetricCard
              title="Pacientes Ativos"
              value={metrics.activePatients}
              icon={UserCheck}
              description="Últimos 30 dias"
              colorScheme="indigo"
            />
            <MetricCard
              title="Taxa de Ocupação"
              value={`${metrics.occupancyRate}%`}
              icon={Activity}
              description="Hoje"
              trend={
                metrics.occupancyRate > 70
                  ? { value: metrics.occupancyRate - 70, isPositive: true }
                  : undefined
              }
              colorScheme="orange"
            />
            <MetricCard
              title="Taxa de Comparecimento"
              value={`${100 - metrics.cancelledRate}%`}
              icon={TrendingUp}
              description="Geral"
              trend={
                metrics.cancelledRate < 15
                  ? { value: 15 - metrics.cancelledRate, isPositive: true }
                  : { value: metrics.cancelledRate - 15, isPositive: false }
              }
              colorScheme="green"
            />
          </>
        ) : null}
      </div>
      {/* Heatmap de Ocupação */}
      <OccupancyHeatmap
        data={occupancyData}
        isLoading={occupancyLoading}
        title="Ocupação Semanal"
      />
      {/* Consultas de Hoje Preview */}
      <div className="bg-white dark:bg-slate-900 rounded-lg border border-gray-200 dark:border-slate-700 p-6">
        <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
          Consultas de Hoje ({consultasHoje.length})
        </h2>
        {consultasHoje.length === 0 ? (
          <p className="text-center py-8 text-gray-600 dark:text-gray-400">
            Nenhuma consulta agendada para hoje
          </p>
        ) : (
          <div className="space-y-3">
            {consultasHoje.slice(0, 5).map((consulta) => (
              <div
                key={consulta.id}
                className="flex items-center justify-between p-3 bg-gray-50 dark:bg-slate-800 rounded-lg"
              >
                <div>
                  <p className="font-medium text-gray-900 dark:text-white">
                    {consulta.pacienteNome}
                  </p>
                  <p className="text-sm text-gray-600 dark:text-gray-400">
                    {new Date(consulta.dataHora).toLocaleTimeString("pt-BR", {
                      hour: "2-digit",
                      minute: "2-digit",
                    })}
                  </p>
                </div>
                <span
                  className={`px-3 py-1 text-xs font-medium rounded-full ${
                    consulta.status === "confirmed" ||
                    consulta.status === "confirmada"
                      ? "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300"
                      : "bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300"
                  }`}
                >
                  {consulta.status}
                </span>
              </div>
            ))}
            {consultasHoje.length > 5 && (
              <p className="text-center text-sm text-gray-600 dark:text-gray-400">
                + {consultasHoje.length - 5} mais consultas
              </p>
            )}
          </div>
        )}
      </div>
    </div>
  );
 }
--- a/src/components/pwa/InstallPWA.tsx
+++ b/src/components/pwa/InstallPWA.tsx
@ -1,126 +0,0 @@
 /**
 * InstallPWA Component
 * Prompt para instalação do PWA
 * @version 1.0
 */
 import { useState, useEffect } from "react";
 import { X, Download } from "lucide-react";
 interface BeforeInstallPromptEvent extends Event {
  prompt: () => Promise<void>;
  userChoice: Promise<{ outcome: "accepted" | "dismissed" }>;
 }
 export function InstallPWA() {
  const [deferredPrompt, setDeferredPrompt] =
    useState<BeforeInstallPromptEvent | null>(null);
  const [showInstallPrompt, setShowInstallPrompt] = useState(false);
  useEffect(() => {
    const handler = (e: Event) => {
      // Previne o mini-infobar de aparecer
      e.preventDefault();
      // Salva o evento para disparar depois
      setDeferredPrompt(e as BeforeInstallPromptEvent);
      // Mostrar prompt personalizado depois de 10 segundos
      setTimeout(() => {
        setShowInstallPrompt(true);
      }, 10000);
    };
    window.addEventListener("beforeinstallprompt", handler);
    // Detectar se já está instalado
    if (window.matchMedia("(display-mode: standalone)").matches) {
      // Já está instalado como PWA
      setShowInstallPrompt(false);
    }
    return () => window.removeEventListener("beforeinstallprompt", handler);
  }, []);
  const handleInstall = async () => {
    if (!deferredPrompt) return;
    // Mostrar prompt de instalação
    await deferredPrompt.prompt();
    // Esperar pela escolha do usuário
    const { outcome } = await deferredPrompt.userChoice;
    if (outcome === "accepted") {
      console.log("✅ PWA instalado com sucesso");
    } else {
      console.log("❌ Usuário recusou instalação");
    }
    // Limpar prompt
    setDeferredPrompt(null);
    setShowInstallPrompt(false);
  };
  const handleDismiss = () => {
    setShowInstallPrompt(false);
    // Salvar no localStorage que o usuário dispensou
    localStorage.setItem("pwa-install-dismissed", "true");
  };
  // Não mostrar se já foi dispensado antes
  useEffect(() => {
    if (localStorage.getItem("pwa-install-dismissed")) {
      setShowInstallPrompt(false);
    }
  }, []);
  if (!showInstallPrompt || !deferredPrompt) return null;
  return (
    <div
      className="
        fixed bottom-4 right-4 z-50 max-w-sm
        bg-white dark:bg-gray-800 rounded-xl shadow-2xl border border-gray-200 dark:border-gray-700
        animate-in slide-in-from-bottom-4 duration-300
      "
    >
      <div className="relative p-5">
        <button
          onClick={handleDismiss}
          className="absolute top-2 right-2 p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
          aria-label="Fechar"
        >
          <X className="w-4 h-4 text-gray-500" />
        </button>
        <div className="flex items-start gap-4">
          <div className="p-3 bg-green-100 dark:bg-green-900/30 rounded-lg">
            <Download className="w-6 h-6 text-green-600 dark:text-green-400" />
          </div>
          <div className="flex-1">
            <h3 className="font-semibold text-gray-900 dark:text-white mb-1">
              Instalar MediConnect
            </h3>
            <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
              Acesse o sistema offline e tenha uma experiência mais rápida
            </p>
            <button
              onClick={handleInstall}
              className="
                w-full px-4 py-2 bg-green-600 hover:bg-green-700
                text-white font-medium rounded-lg
                transition-colors duration-200
                flex items-center justify-center gap-2
              "
            >
              <Download className="w-4 h-4" />
              Instalar Agora
            </button>
          </div>
        </div>
      </div>
    </div>
  );
 }
--- a/src/components/secretaria/SecretaryAppointmentList.tsx
+++ b/src/components/secretaria/SecretaryAppointmentList.tsx
@ -1,6 +1,6 @@
 import { useState, useEffect } from "react";
 import toast from "react-hot-toast";
-import { Search, Plus, Eye, Edit, Trash2, X, RefreshCw } from "lucide-react";
+import { Search, Plus, Eye, Edit, Trash2, X } from "lucide-react";
 import {
  appointmentService,
  type Appointment,
@ -12,10 +12,6 @@ import {
 import { Avatar } from "../ui/Avatar";
 import { CalendarPicker } from "../agenda/CalendarPicker";
 import AvailableSlotsPicker from "../agenda/AvailableSlotsPicker";
 import { CheckInButton } from "../consultas/CheckInButton";
 import { ConfirmAppointmentButton } from "../consultas/ConfirmAppointmentButton";
 import { RescheduleModal } from "../consultas/RescheduleModal";
 import { isToday, parseISO, format } from "date-fns";
 interface AppointmentWithDetails extends Appointment {
  patient?: Patient;
@ -48,9 +44,6 @@ export function SecretaryAppointmentList() {
  });
  const [selectedDate, setSelectedDate] = useState<string>("");
  const [selectedTime, setSelectedTime] = useState<string>("");
  const [showRescheduleModal, setShowRescheduleModal] = useState(false);
  const [rescheduleAppointment, setRescheduleAppointment] =
    useState<AppointmentWithDetails | null>(null);
  const loadAppointments = async () => {
    setLoading(true);
@ -134,17 +127,7 @@ export function SecretaryAppointmentList() {
    const mapStatusFilterToValue = (label: string) => {
      if (label === "Todos") return null;
      // Se já é um valor de API, retorna ele mesmo
-      if (
+      if (['requested', 'confirmed', 'checked_in', 'in_progress', 'completed', 'cancelled', 'no_show'].includes(label)) {
        [
          "requested",
          "confirmed",
          "checked_in",
          "in_progress",
          "completed",
          "cancelled",
          "no_show",
        ].includes(label)
      ) {
        return label;
      }
      // Mantém mapeamento legado por compatibilidade
@ -185,10 +168,7 @@ export function SecretaryAppointmentList() {
  const totalPages = Math.ceil(filteredAppointments.length / itemsPerPage);
  const startIndex = (currentPage - 1) * itemsPerPage;
  const endIndex = startIndex + itemsPerPage;
-  const paginatedAppointments = filteredAppointments.slice(
+  const paginatedAppointments = filteredAppointments.slice(startIndex, endIndex);
    startIndex,
    endIndex
  );
  const loadDoctorsAndPatients = async () => {
    try {
@ -236,26 +216,14 @@ export function SecretaryAppointmentList() {
        await appointmentService.update(formData.id, updatePayload);
        toast.success("Consulta atualizada com sucesso!");
      } else {
        // Buscar user ID para created_by
        const userStr = localStorage.getItem("mediconnect_user");
        let userId: string | undefined;
        if (userStr) {
          try {
            const userData = JSON.parse(userStr);
            userId = userData.id;
          } catch (e) {
            console.warn("Erro ao parsear user do localStorage");
          }
        }
        // Payload conforme documentação da API Supabase
        await appointmentService.create({
          doctor_id: formData.doctor_id,
          patient_id: formData.patient_id,
          doctor_id: formData.doctor_id,
          scheduled_at: new Date(formData.scheduled_at).toISOString(),
-          duration_minutes: 30,
+          appointment_type: formData.appointment_type as
-          created_by: userId,
+            | "presencial"
            | "telemedicina",
          patient_notes: formData.notes,
        });
        toast.success("Consulta agendada com sucesso!");
      }
@ -296,38 +264,23 @@ export function SecretaryAppointmentList() {
    loadAppointments();
  };
-  const handleStatusChange = async (
+  const handleStatusChange = async (appointmentId: string, newStatus: string) => {
    appointmentId: string,
    newStatus: string
  ) => {
    try {
-      console.log(
+      console.log(`[SecretaryAppointmentList] Atualizando status da consulta ${appointmentId} para ${newStatus}`);
        `[SecretaryAppointmentList] Atualizando status da consulta ${appointmentId} para ${newStatus}`
      );
      await appointmentService.update(appointmentId, { 
-        status: newStatus as any,
+        status: newStatus as any 
      });
-      toast.success(
+      toast.success(`Status atualizado para: ${
-        `Status atualizado para: ${
+        newStatus === 'requested' ? 'Solicitada' :
-          newStatus === "requested"
+        newStatus === 'confirmed' ? 'Confirmada' :
-            ? "Solicitada"
+        newStatus === 'checked_in' ? 'Check-in' :
-            : newStatus === "confirmed"
+        newStatus === 'in_progress' ? 'Em Atendimento' :
-            ? "Confirmada"
+        newStatus === 'completed' ? 'Concluída' :
-            : newStatus === "checked_in"
+        newStatus === 'cancelled' ? 'Cancelada' :
-            ? "Check-in"
+        newStatus === 'no_show' ? 'Não Compareceu' : newStatus
-            : newStatus === "in_progress"
+      }`);
            ? "Em Atendimento"
            : newStatus === "completed"
            ? "Concluída"
            : newStatus === "cancelled"
            ? "Cancelada"
            : newStatus === "no_show"
            ? "Não Compareceu"
            : newStatus
        }`
      );
      loadAppointments();
    } catch (error) {
@ -345,7 +298,7 @@ export function SecretaryAppointmentList() {
      await appointmentService.update(appointmentId, { 
        status: "cancelled",
        cancelled_at: new Date().toISOString(),
-        cancellation_reason: "Cancelado pela secretaria",
+        cancellation_reason: "Cancelado pela secretaria"
      });
      toast.success("Consulta cancelada com sucesso!");
      loadAppointments();
@ -413,12 +366,8 @@ export function SecretaryAppointmentList() {
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
-          <h1 className="text-3xl font-bold text-gray-900 dark:text-gray-100">
+          <h1 className="text-3xl font-bold text-gray-900 dark:text-gray-100">Consultas</h1>
-            Consultas
+          <p className="text-gray-600 dark:text-gray-400 mt-1">Gerencie as consultas agendadas</p>
          </h1>
          <p className="text-gray-600 dark:text-gray-400 mt-1">
            Gerencie as consultas agendadas
          </p>
        </div>
        <button
          onClick={handleOpenCreateModal}
@ -458,9 +407,7 @@ export function SecretaryAppointmentList() {
        <div className="flex items-center gap-6">
          <div className="flex items-center gap-2">
-            <span className="text-sm text-gray-600 dark:text-gray-400">
+            <span className="text-sm text-gray-600 dark:text-gray-400">Status:</span>
              Status:
            </span>
            <select
              value={statusFilter}
              onChange={(e) => setStatusFilter(e.target.value)}
@ -477,9 +424,7 @@ export function SecretaryAppointmentList() {
            </select>
          </div>
          <div className="flex items-center gap-2">
-            <span className="text-sm text-gray-600 dark:text-gray-400">
+            <span className="text-sm text-gray-600 dark:text-gray-400">Tipo:</span>
              Tipo:
            </span>
            <select
              value={typeFilter}
              onChange={(e) => setTypeFilter(e.target.value)}
@ -615,43 +560,25 @@ export function SecretaryAppointmentList() {
                  <td className="px-6 py-4">
                    <select
                      value={appointment.status || "requested"}
-                      onChange={(e) =>
+                      onChange={(e) => handleStatusChange(appointment.id, e.target.value)}
                        handleStatusChange(appointment.id, e.target.value)
                      }
                      className="px-3 py-1.5 text-xs font-medium rounded-full border-0 focus:ring-2 focus:ring-green-500 cursor-pointer"
                      style={{
                        backgroundColor: 
-                          appointment.status === "requested"
+                          appointment.status === "requested" ? "#fef3c7" :
-                            ? "#fef3c7"
+                          appointment.status === "confirmed" ? "#d1fae5" :
-                            : appointment.status === "confirmed"
+                          appointment.status === "checked_in" ? "#fed7aa" :
-                            ? "#d1fae5"
+                          appointment.status === "in_progress" ? "#fed7aa" :
-                            : appointment.status === "checked_in"
+                          appointment.status === "completed" ? "#dbeafe" :
-                            ? "#fed7aa"
+                          appointment.status === "cancelled" ? "#f3f4f6" :
-                            : appointment.status === "in_progress"
+                          appointment.status === "no_show" ? "#fee2e2" : "#f3f4f6",
                            ? "#fed7aa"
                            : appointment.status === "completed"
                            ? "#dbeafe"
                            : appointment.status === "cancelled"
                            ? "#f3f4f6"
                            : appointment.status === "no_show"
                            ? "#fee2e2"
                            : "#f3f4f6",
                        color:
-                          appointment.status === "requested"
+                          appointment.status === "requested" ? "#92400e" :
-                            ? "#92400e"
+                          appointment.status === "confirmed" ? "#065f46" :
-                            : appointment.status === "confirmed"
+                          appointment.status === "checked_in" ? "#9a3412" :
-                            ? "#065f46"
+                          appointment.status === "in_progress" ? "#9a3412" :
-                            : appointment.status === "checked_in"
+                          appointment.status === "completed" ? "#1e40af" :
-                            ? "#9a3412"
+                          appointment.status === "cancelled" ? "#4b5563" :
-                            : appointment.status === "in_progress"
+                          appointment.status === "no_show" ? "#991b1b" : "#4b5563"
                            ? "#9a3412"
                            : appointment.status === "completed"
                            ? "#1e40af"
                            : appointment.status === "cancelled"
                            ? "#4b5563"
                            : appointment.status === "no_show"
                            ? "#991b1b"
                            : "#4b5563",
                      }}
                    >
                      <option value="requested">Solicitada</option>
@ -665,51 +592,6 @@ export function SecretaryAppointmentList() {
                  </td>
                  <td className="px-6 py-4">
                    <div className="flex items-center gap-2">
                      {/* Confirm Button - Mostra apenas para consultas requested (aguardando confirmação) */}
                      <ConfirmAppointmentButton
                        appointmentId={appointment.id}
                        currentStatus={appointment.status || "requested"}
                        patientName={appointment.patient?.full_name}
                        patientPhone={appointment.patient?.phone}
                        scheduledAt={
                          appointment.scheduled_at
                            ? format(
                                parseISO(appointment.scheduled_at),
                                "dd/MM/yyyy 'às' HH:mm"
                              )
                            : undefined
                        }
                      />
                      {/* Check-in Button - Mostra apenas para consultas confirmadas do dia */}
                      {appointment.status === "confirmed" &&
                        appointment.scheduled_at &&
                        isToday(parseISO(appointment.scheduled_at)) && (
                          <CheckInButton
                            appointmentId={appointment.id}
                            patientName={
                              appointment.patient?.full_name || "Paciente"
                            }
                            disabled={loading}
                          />
                        )}
                      {/* Reschedule Button - Mostra apenas para consultas canceladas */}
                      {appointment.status === "cancelled" &&
                        appointment.scheduled_at && (
                          <button
                            onClick={() => {
                              setRescheduleAppointment(appointment);
                              setShowRescheduleModal(true);
                            }}
                            title="Reagendar"
                            className="inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium text-purple-600 bg-purple-50 hover:bg-purple-100 dark:bg-purple-900/20 dark:hover:bg-purple-900/40 rounded-lg transition-colors"
                          >
                            <RefreshCw className="w-4 h-4" />
                            Reagendar
                          </button>
                        )}
                      <button
                        onClick={() => handleViewAppointment(appointment)}
                        title="Visualizar"
@ -744,9 +626,7 @@ export function SecretaryAppointmentList() {
      {filteredAppointments.length > 0 && (
        <div className="flex items-center justify-between bg-white dark:bg-gray-800 px-6 py-4 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700">
          <div className="text-sm text-gray-700 dark:text-gray-300">
-            Mostrando {startIndex + 1} até{" "}
+            Mostrando {startIndex + 1} até {Math.min(endIndex, filteredAppointments.length)} de {filteredAppointments.length} consultas
            {Math.min(endIndex, filteredAppointments.length)} de{" "}
            {filteredAppointments.length} consultas
          </div>
          <div className="flex items-center gap-2">
            <button
@ -759,14 +639,8 @@ export function SecretaryAppointmentList() {
            <div className="flex items-center gap-1">
              {(() => {
                const maxPagesToShow = 4;
-                let startPage = Math.max(
+                let startPage = Math.max(1, currentPage - Math.floor(maxPagesToShow / 2));
-                  1,
+                let endPage = Math.min(totalPages, startPage + maxPagesToShow - 1);
                  currentPage - Math.floor(maxPagesToShow / 2)
                );
                let endPage = Math.min(
                  totalPages,
                  startPage + maxPagesToShow - 1
                );
                // Ajusta startPage se estivermos próximos do fim
                if (endPage - startPage < maxPagesToShow - 1) {
@ -794,9 +668,7 @@ export function SecretaryAppointmentList() {
              })()}
            </div>
            <button
-              onClick={() =>
+              onClick={() => setCurrentPage((prev) => Math.min(prev + 1, totalPages))}
                setCurrentPage((prev) => Math.min(prev + 1, totalPages))
              }
              disabled={currentPage === totalPages}
              className="px-4 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed text-gray-700 dark:text-gray-300"
            >
@ -1066,22 +938,6 @@ export function SecretaryAppointmentList() {
          </div>
        </div>
      )}
      {/* Modal de Reagendar */}
      {showRescheduleModal && rescheduleAppointment && (
        <RescheduleModal
          appointmentId={rescheduleAppointment.id}
          appointmentDate={rescheduleAppointment.scheduled_at || ""}
          doctorId={rescheduleAppointment.doctor_id || ""}
          doctorName={rescheduleAppointment.doctor?.full_name || "Médico"}
          patientName={rescheduleAppointment.patient?.full_name || "Paciente"}
          onClose={() => {
            setShowRescheduleModal(false);
            setRescheduleAppointment(null);
            loadAppointments(); // Recarregar lista
          }}
        />
      )}
    </div>
  );
 }
--- a/src/components/secretaria/SecretaryDoctorList.tsx
+++ b/src/components/secretaria/SecretaryDoctorList.tsx
@ -8,7 +8,6 @@ import {
  type CrmUF,
 } from "../../services";
 import type { CreateDoctorInput } from "../../services/users/types";
 import { Avatar } from "../ui/Avatar";
 interface DoctorFormData {
  id?: string;
@ -393,18 +392,20 @@ export function SecretaryDoctorList({
                </td>
              </tr>
            ) : (
-              paginatedDoctors.map((doctor) => (
+              paginatedDoctors.map((doctor, index) => (
                <tr
                  key={doctor.id}
                  className="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
                >
                  <td className="px-6 py-4">
                    <div className="flex items-center gap-3">
-                      <Avatar
+                      <div
-                        src={doctor.user_id ? { user_id: doctor.user_id } : undefined}
+                        className={`w-10 h-10 rounded-full ${getAvatarColor(
-                        name={formatDoctorName(doctor.full_name)}
+                          index
-                        size="md"
+                        )} flex items-center justify-center text-white font-semibold text-sm`}
-                      />
+                      >
                        {getInitials(doctor.full_name || "")}
                      </div>
                      <div>
                        <p className="text-sm font-medium text-gray-900 dark:text-gray-100">
                          {formatDoctorName(doctor.full_name)}
--- a/src/components/secretaria/SecretaryReportList.tsx
+++ b/src/components/secretaria/SecretaryReportList.tsx
@ -53,11 +53,7 @@ export function SecretaryReportList() {
  const loadPatients = async () => {
    try {
      const data = await patientService.list();
-      const list = Array.isArray(data) ? data : [];
+      setPatients(Array.isArray(data) ? data : []);
      list.sort((a: any, b: any) =>
        (a.full_name || a.name || "").localeCompare(b.full_name || b.name || "", "pt-BR", { sensitivity: "base" })
      );
      setPatients(list);
    } catch (error) {
      console.error("Erro ao carregar pacientes:", error);
    }
@ -66,11 +62,7 @@ export function SecretaryReportList() {
  const loadDoctors = async () => {
    try {
      const data = await doctorService.list({});
-      const list = Array.isArray(data) ? data : [];
+      setDoctors(Array.isArray(data) ? data : []);
      list.sort((a: any, b: any) =>
        (a.full_name || a.name || "").localeCompare(b.full_name || b.name || "", "pt-BR", { sensitivity: "base" })
      );
      setDoctors(list);
    } catch (error) {
      console.error("Erro ao carregar médicos:", error);
    }
--- a/src/components/ui/Avatar.tsx
+++ b/src/components/ui/Avatar.tsx
@ -64,19 +64,9 @@ export function Avatar({
 }: AvatarProps) {
  const [imageUrl, setImageUrl] = useState<string | null>(null);
  const [imageError, setImageError] = useState(false);
  const [currentExtIndex, setCurrentExtIndex] = useState(0);
  const [userId, setUserId] = useState<string | null>(null);
  // Extensões para tentar em ordem de preferência
  const extensions = ["jpg", "png", "webp"];
  // Extrai URL do avatar
  useEffect(() => {
    // Reset estados
    setImageError(false);
    setCurrentExtIndex(0);
    setUserId(null);
    if (!src) {
      setImageUrl(null);
      return;
@ -92,33 +82,29 @@ export function Avatar({
      console.log("[Avatar] profile.avatar_url:", src.profile.avatar_url);
      setImageUrl(src.profile.avatar_url);
    } else if ("user_id" in src && src.user_id) {
-      // Salva user_id para tentar múltiplas extensões
+      // Gera URL pública do Supabase Storage usando user_id
      setUserId(src.user_id);
      const SUPABASE_URL = "https://yuanqfswhberkoevtmfr.supabase.co";
-      const timestamp = new Date().getTime();
+      const url = `${SUPABASE_URL}/storage/v1/object/public/avatars/${src.user_id}/avatar.jpg`;
      const url = `${SUPABASE_URL}/storage/v1/object/public/avatars/${src.user_id}/avatar.${extensions[0]}?t=${timestamp}`;
      console.log("[Avatar] Tentando carregar avatar:", {
        user_id: src.user_id,
        url,
        extension: extensions[0],
      });
      setImageUrl(url);
    } else if ("id" in src && src.id) {
-      // Salva id para tentar múltiplas extensões
+      // Gera URL pública do Supabase Storage
      setUserId(src.id);
      const SUPABASE_URL = "https://yuanqfswhberkoevtmfr.supabase.co";
-      const timestamp = new Date().getTime();
+      const url = `${SUPABASE_URL}/storage/v1/object/public/avatars/${src.id}/avatar.jpg`;
      const url = `${SUPABASE_URL}/storage/v1/object/public/avatars/${src.id}/avatar.${extensions[0]}?t=${timestamp}`;
      console.log("[Avatar] Tentando carregar avatar por id:", {
        id: src.id,
        url,
        extension: extensions[0],
      });
      setImageUrl(url);
    } else {
      console.log("[Avatar] Nenhuma URL encontrada, src:", src);
      setImageUrl(null);
    }
    setImageError(false);
  }, [src]);
  // Gera iniciais do nome
@ -139,27 +125,7 @@ export function Avatar({
  // Log quando houver erro ao carregar imagem
  const handleImageError = () => {
    console.warn("[Avatar] Erro ao carregar imagem:", { imageUrl, name });
    // Se tiver userId salvo, tenta próxima extensão
    if (userId && currentExtIndex < extensions.length - 1) {
      const nextIndex = currentExtIndex + 1;
      const SUPABASE_URL = "https://yuanqfswhberkoevtmfr.supabase.co";
      const timestamp = new Date().getTime();
      const nextUrl = `${SUPABASE_URL}/storage/v1/object/public/avatars/${userId}/avatar.${extensions[nextIndex]}?t=${timestamp}`;
      console.log("[Avatar] Tentando próxima extensão:", {
        userId,
        extension: extensions[nextIndex],
        url: nextUrl,
      });
      setCurrentExtIndex(nextIndex);
      setImageUrl(nextUrl);
      setImageError(false);
    } else {
      // Esgotou todas as opções
    setImageError(true);
    }
  };
  // Log quando imagem carregar com sucesso
--- a/src/components/ui/AvatarUpload.tsx
+++ b/src/components/ui/AvatarUpload.tsx
@ -1,6 +1,6 @@
 import { useState, useRef, useEffect } from "react";
 import { Camera, Upload, X, Trash2 } from "lucide-react";
-import { avatarService, patientService, doctorService } from "../../services";
+import { avatarService, profileService } from "../../services";
 import toast from "react-hot-toast";
 import { Avatar } from "./Avatar";
@ -27,8 +27,6 @@ interface AvatarUploadProps {
  onAvatarUpdate?: (avatarUrl: string | null) => void;
  /** Se está em modo de edição */
  editable?: boolean;
  /** Tipo de usuário (paciente ou médico) */
  userType?: "patient" | "doctor";
 }
 export function AvatarUpload({
@ -39,7 +37,6 @@ export function AvatarUpload({
  size = "xl",
  onAvatarUpdate,
  editable = true,
  userType = "patient",
 }: AvatarUploadProps) {
  const [isUploading, setIsUploading] = useState(false);
  const [showMenu, setShowMenu] = useState(false);
@ -63,8 +60,6 @@ export function AvatarUpload({
      file: file?.name,
      userId,
      hasUserId: !!userId,
      userIdType: typeof userId,
      userIdValue: userId,
    });
    if (!file) {
@ -73,25 +68,13 @@ export function AvatarUpload({
    }
    if (!userId) {
-      console.error("[AvatarUpload] ❌ userId não está definido!", {
+      console.error("[AvatarUpload] ❌ user_id não está definido!");
        userId,
        hasUserId: !!userId,
      });
      toast.error(
        "Não foi possível identificar o usuário. Por favor, recarregue a página."
      );
      return;
    }
    // Validação adicional: userId não pode ser string vazia
    if (typeof userId === "string" && userId.trim() === "") {
      console.error("[AvatarUpload] ❌ userId está vazio!", { userId });
      toast.error(
        "ID do usuário está vazio. Por favor, recarregue a página."
      );
      return;
    }
    // Validação de tamanho (max 2MB)
    if (file.size > 2 * 1024 * 1024) {
      toast.error("Arquivo muito grande! Tamanho máximo: 2MB");
@ -108,21 +91,17 @@ export function AvatarUpload({
    setShowMenu(false);
    try {
-      console.log("[AvatarUpload] 🚀 Iniciando upload...", {
+      console.log("[AvatarUpload] Iniciando upload...", {
        userId,
        fileName: file.name,
        fileSize: file.size,
        fileType: file.type,
      });
      // Upload do avatar
-      const uploadResult = await avatarService.upload({
+      await avatarService.upload({
        userId,
        file,
      });
      console.log("[AvatarUpload] ✅ Upload retornou:", uploadResult);
      // Gera URL pública com cache-busting
      const ext = file.name.split(".").pop()?.toLowerCase();
      const avatarExt =
@ -135,26 +114,12 @@ export function AvatarUpload({
      // Adiciona timestamp para forçar reload da imagem
      const publicUrl = `${baseUrl}?t=${Date.now()}`;
-      console.log("[AvatarUpload] Upload concluído, atualizando paciente...", {
+      console.log("[AvatarUpload] Upload concluído, atualizando perfil...", {
        baseUrl,
      });
-      // Atualiza avatar_url na tabela apropriada (patients ou doctors)
+      // Atualiza no perfil (salva sem o timestamp)
-      try {
+      await profileService.updateAvatar(userId, { avatar_url: baseUrl });
        if (userType === "doctor") {
          await doctorService.updateByUserId(userId, { avatar_url: baseUrl });
          console.log("[AvatarUpload] ✅ Avatar atualizado na tabela doctors");
        } else {
          await patientService.updateByUserId(userId, { avatar_url: baseUrl });
          console.log("[AvatarUpload] ✅ Avatar atualizado na tabela patients");
        }
      } catch (error) {
        console.warn(
          `[AvatarUpload] ⚠️ Não foi possível atualizar tabela ${userType === "doctor" ? "doctors" : "patients"}:`,
          error
        );
        // Não bloqueia o fluxo, avatar já está no Storage
      }
      // Atualiza estado local com timestamp
      setDisplayUrl(publicUrl);
@ -187,22 +152,7 @@ export function AvatarUpload({
    try {
      await avatarService.delete({ userId });
-      
+      await profileService.updateAvatar(userId, { avatar_url: null });
      // Remove avatar_url da tabela apropriada (patients ou doctors)
      try {
        if (userType === "doctor") {
          await doctorService.updateByUserId(userId, { avatar_url: null });
          console.log("[AvatarUpload] ✅ Avatar removido da tabela doctors");
        } else {
          await patientService.updateByUserId(userId, { avatar_url: null });
          console.log("[AvatarUpload] ✅ Avatar removido da tabela patients");
        }
      } catch (error) {
        console.warn(
          `[AvatarUpload] ⚠️ Não foi possível remover da tabela ${userType === "doctor" ? "doctors" : "patients"}:`,
          error
        );
      }
      // Atualiza estado local
      setDisplayUrl(undefined);
@ -221,13 +171,7 @@ export function AvatarUpload({
    <div className="relative inline-block">
      {/* Avatar */}
      <div className="relative">
-        <Avatar 
+        <Avatar src={displayUrl} name={name} size={size} color={color} border />
          src={displayUrl || (userId ? { id: userId } : undefined)} 
          name={name} 
          size={size} 
          color={color} 
          border 
        />
        {/* Loading overlay */}
        {isUploading && (
--- a/src/components/ui/CommandPalette.tsx
+++ b/src/components/ui/CommandPalette.tsx
@ -1,387 +0,0 @@
 /**
 * CommandPalette Component
 * Paleta de comandos com Ctrl+K para navegação rápida
 * @version 1.0
 */
 import { useEffect, useState, useCallback, useRef } from "react";
 import { useNavigate } from "react-router-dom";
 import {
  Search,
  Calendar,
  Users,
  UserPlus,
  Clock,
  FileText,
  Settings,
  LogOut,
  Command,
  ArrowRight,
 } from "lucide-react";
 import Fuse from "fuse.js";
 interface CommandAction {
  id: string;
  label: string;
  description?: string;
  icon: React.ComponentType<{ className?: string }>;
  keywords: string[];
  action: () => void;
  category: "navigation" | "action" | "search";
 }
 interface CommandPaletteProps {
  onClose: () => void;
 }
 export function CommandPalette({ onClose }: CommandPaletteProps) {
  const [search, setSearch] = useState("");
  const [selectedIndex, setSelectedIndex] = useState(0);
  const navigate = useNavigate();
  const inputRef = useRef<HTMLInputElement>(null);
  const listRef = useRef<HTMLDivElement>(null);
  // Definir todas as ações disponíveis
  const commands: CommandAction[] = [
    // Navegação
    {
      id: "nav-home",
      label: "Ir para Dashboard",
      description: "Página inicial com métricas",
      icon: Calendar,
      keywords: ["dashboard", "home", "inicio", "painel"],
      action: () => {
        navigate("/painel-medico");
        onClose();
      },
      category: "navigation",
    },
    {
      id: "nav-patients",
      label: "Ver Lista de Pacientes",
      description: "Todos os pacientes cadastrados",
      icon: Users,
      keywords: ["pacientes", "lista", "patients"],
      action: () => {
        navigate("/lista-pacientes");
        onClose();
      },
      category: "navigation",
    },
    {
      id: "nav-appointments",
      label: "Ver Consultas",
      description: "Lista de todas as consultas",
      icon: Calendar,
      keywords: ["consultas", "appointments", "agenda"],
      action: () => {
        navigate("/painel-secretaria");
        onClose();
      },
      category: "navigation",
    },
    {
      id: "nav-doctors",
      label: "Ver Médicos",
      description: "Lista de médicos",
      icon: UserPlus,
      keywords: ["medicos", "doctors", "lista"],
      action: () => {
        navigate("/lista-medicos");
        onClose();
      },
      category: "navigation",
    },
    // Ações rápidas
    {
      id: "action-new-appointment",
      label: "Nova Consulta",
      description: "Agendar nova consulta",
      icon: Calendar,
      keywords: ["nova", "consulta", "agendar", "new", "appointment"],
      action: () => {
        navigate("/painel-secretaria");
        onClose();
        // Trigger modal após navegação
        setTimeout(() => {
          const event = new Event("open-create-appointment");
          window.dispatchEvent(event);
        }, 100);
      },
      category: "action",
    },
    {
      id: "action-new-patient",
      label: "Cadastrar Paciente",
      description: "Adicionar novo paciente",
      icon: UserPlus,
      keywords: ["novo", "paciente", "cadastrar", "new", "patient"],
      action: () => {
        navigate("/lista-pacientes");
        onClose();
        // Trigger modal após navegação
        setTimeout(() => {
          const event = new Event("open-create-patient");
          window.dispatchEvent(event);
        }, 100);
      },
      category: "action",
    },
    {
      id: "search-patient",
      label: "Buscar Paciente",
      description: "Pesquisar por nome ou CPF",
      icon: Search,
      keywords: ["buscar", "paciente", "search", "find"],
      action: () => {
        navigate("/lista-pacientes");
        onClose();
      },
      category: "search",
    },
    {
      id: "nav-availability",
      label: "Gerenciar Disponibilidade",
      description: "Configurar horários disponíveis",
      icon: Clock,
      keywords: ["disponibilidade", "horarios", "availability"],
      action: () => {
        navigate("/painel-medico?tab=disponibilidade");
        onClose();
      },
      category: "navigation",
    },
    {
      id: "nav-reports",
      label: "Ver Relatórios",
      description: "Estatísticas e métricas",
      icon: FileText,
      keywords: ["relatorios", "reports", "estatisticas", "metricas"],
      action: () => {
        navigate("/painel-medico?tab=relatorios");
        onClose();
      },
      category: "navigation",
    },
    {
      id: "nav-settings",
      label: "Configurações",
      description: "Ajustes do sistema",
      icon: Settings,
      keywords: ["config", "settings", "ajustes"],
      action: () => {
        navigate("/painel-medico?tab=perfil");
        onClose();
      },
      category: "navigation",
    },
    {
      id: "action-logout",
      label: "Sair",
      description: "Fazer logout",
      icon: LogOut,
      keywords: ["sair", "logout", "exit"],
      action: () => {
        localStorage.removeItem("mediconnect_user");
        navigate("/login");
        onClose();
      },
      category: "action",
    },
  ];
  // Configurar Fuse.js para fuzzy search
  const fuse = new Fuse(commands, {
    keys: ["label", "description", "keywords"],
    threshold: 0.3,
    includeScore: true,
  });
  // Filtrar comandos baseado na busca
  const filteredCommands = search.trim()
    ? fuse.search(search).map((result) => result.item)
    : commands;
  // Navegar com teclado
  const handleKeyDown = useCallback(
    (e: KeyboardEvent) => {
      if (e.key === "Escape") {
        onClose();
      } else if (e.key === "ArrowDown") {
        e.preventDefault();
        setSelectedIndex((prev) =>
          prev < filteredCommands.length - 1 ? prev + 1 : 0
        );
      } else if (e.key === "ArrowUp") {
        e.preventDefault();
        setSelectedIndex((prev) =>
          prev > 0 ? prev - 1 : filteredCommands.length - 1
        );
      } else if (e.key === "Enter") {
        e.preventDefault();
        if (filteredCommands[selectedIndex]) {
          filteredCommands[selectedIndex].action();
        }
      }
    },
    [filteredCommands, selectedIndex, onClose]
  );
  // Scroll automático para item selecionado
  useEffect(() => {
    if (listRef.current) {
      const selectedElement = listRef.current.children[
        selectedIndex
      ] as HTMLElement;
      if (selectedElement) {
        selectedElement.scrollIntoView({
          block: "nearest",
          behavior: "smooth",
        });
      }
    }
  }, [selectedIndex]);
  // Focus automático no input
  useEffect(() => {
    inputRef.current?.focus();
  }, []);
  // Listeners de teclado
  useEffect(() => {
    document.addEventListener("keydown", handleKeyDown);
    return () => document.removeEventListener("keydown", handleKeyDown);
  }, [handleKeyDown]);
  // Reset selected index quando search muda
  useEffect(() => {
    setSelectedIndex(0);
  }, [search]);
  // Click fora fecha modal
  const handleBackdropClick = (e: React.MouseEvent) => {
    if (e.target === e.currentTarget) {
      onClose();
    }
  };
  return (
    <div
      className="fixed inset-0 z-[9999] flex items-start justify-center bg-black/50 backdrop-blur-sm pt-[20vh]"
      onClick={handleBackdropClick}
    >
      <div
        className="w-full max-w-2xl mx-4 bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden animate-in fade-in zoom-in-95 duration-200"
        onClick={(e) => e.stopPropagation()}
      >
        {/* Search Input */}
        <div className="flex items-center gap-3 px-4 py-3 border-b border-gray-200 dark:border-gray-700">
          <Search className="w-5 h-5 text-gray-400" />
          <input
            ref={inputRef}
            type="text"
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            placeholder="Digite para buscar ações, páginas..."
            className="flex-1 bg-transparent border-0 outline-none text-gray-900 dark:text-gray-100 placeholder-gray-400"
          />
          <div className="flex items-center gap-2 text-xs text-gray-500">
            <kbd className="px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded border border-gray-300 dark:border-gray-600">
              ESC
            </kbd>
            <span>para fechar</span>
          </div>
        </div>
        {/* Commands List */}
        <div
          ref={listRef}
          className="max-h-[400px] overflow-y-auto overscroll-contain"
        >
          {filteredCommands.length === 0 ? (
            <div className="px-4 py-12 text-center text-gray-500 dark:text-gray-400">
              <Search className="w-8 h-8 mx-auto mb-2 opacity-50" />
              <p>Nenhum comando encontrado</p>
              <p className="text-sm mt-1">
                Tente buscar por "consulta", "paciente" ou "dashboard"
              </p>
            </div>
          ) : (
            <div className="py-2">
              {filteredCommands.map((command, index) => {
                const Icon = command.icon;
                const isSelected = index === selectedIndex;
                return (
                  <button
                    key={command.id}
                    onClick={() => command.action()}
                    onMouseEnter={() => setSelectedIndex(index)}
                    className={`
                      w-full flex items-center gap-3 px-4 py-3 text-left transition-colors
                      ${
                        isSelected
                          ? "bg-green-50 dark:bg-green-900/20 border-l-2 border-green-600"
                          : "hover:bg-gray-50 dark:hover:bg-gray-700/50"
                      }
                    `}
                  >
                    <Icon
                      className={`w-5 h-5 ${
                        isSelected ? "text-green-600" : "text-gray-400"
                      }`}
                    />
                    <div className="flex-1 min-w-0">
                      <p
                        className={`text-sm font-medium ${
                          isSelected
                            ? "text-green-900 dark:text-green-100"
                            : "text-gray-900 dark:text-gray-100"
                        }`}
                      >
                        {command.label}
                      </p>
                      {command.description && (
                        <p className="text-xs text-gray-500 dark:text-gray-400 truncate">
                          {command.description}
                        </p>
                      )}
                    </div>
                    {isSelected && (
                      <ArrowRight className="w-4 h-4 text-green-600" />
                    )}
                  </button>
                );
              })}
            </div>
          )}
        </div>
        {/* Footer com atalhos */}
        <div className="px-4 py-3 bg-gray-50 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700 flex items-center justify-between text-xs text-gray-500">
          <div className="flex items-center gap-4">
            <div className="flex items-center gap-1">
              <kbd className="px-1.5 py-0.5 bg-white dark:bg-gray-800 rounded border border-gray-300 dark:border-gray-600">
                ↑
              </kbd>
              <kbd className="px-1.5 py-0.5 bg-white dark:bg-gray-800 rounded border border-gray-300 dark:border-gray-600">
                ↓
              </kbd>
              <span className="ml-1">navegar</span>
            </div>
            <div className="flex items-center gap-1">
              <kbd className="px-1.5 py-0.5 bg-white dark:bg-gray-800 rounded border border-gray-300 dark:border-gray-600">
                Enter
              </kbd>
              <span className="ml-1">selecionar</span>
            </div>
          </div>
          <div className="flex items-center gap-1">
            <Command className="w-3 h-3" />
            <span>+ K para abrir</span>
          </div>
        </div>
      </div>
    </div>
  );
 }
--- a/src/components/ui/EmptyState.tsx
+++ b/src/components/ui/EmptyState.tsx
@ -1,315 +0,0 @@
 /**
 * EmptyState Component
 * Estado vazio consistente com ícone, mensagem e ação principal
 * @version 1.0
 */
 import { LucideIcon } from "lucide-react";
 const TRANSITIONS = {
  base: "transition-all duration-200 ease-in-out",
 } as const;
 // ============================================================================
 // TIPOS
 // ============================================================================
 export interface EmptyStateProps {
  /**
   * Ícone do lucide-react
   */
  icon: LucideIcon;
  /**
   * Título principal
   */
  title: string;
  /**
   * Descrição detalhada
   */
  description: string;
  /**
   * Texto do botão de ação (opcional)
   */
  actionLabel?: string;
  /**
   * Callback ao clicar no botão
   */
  onAction?: () => void;
  /**
   * Variante visual
   */
  variant?: "default" | "info" | "warning";
  /**
   * Classes adicionais
   */
  className?: string;
 }
 // ============================================================================
 // COMPONENTE
 // ============================================================================
 export function EmptyState({
  icon: Icon,
  title,
  description,
  actionLabel,
  onAction,
  variant = "default",
  className = "",
 }: EmptyStateProps) {
  const variantStyles = {
    default: {
      iconBg: "bg-gray-100 dark:bg-gray-800",
      iconColor: "text-gray-400 dark:text-gray-500",
      titleColor: "text-gray-900 dark:text-gray-100",
      descColor: "text-gray-600 dark:text-gray-400",
    },
    info: {
      iconBg: "bg-blue-50 dark:bg-blue-950",
      iconColor: "text-blue-500 dark:text-blue-400",
      titleColor: "text-blue-900 dark:text-blue-100",
      descColor: "text-blue-700 dark:text-blue-300",
    },
    warning: {
      iconBg: "bg-yellow-50 dark:bg-yellow-950",
      iconColor: "text-yellow-500 dark:text-yellow-400",
      titleColor: "text-yellow-900 dark:text-yellow-100",
      descColor: "text-yellow-700 dark:text-yellow-300",
    },
  };
  const styles = variantStyles[variant];
  return (
    <div
      className={`flex flex-col items-center justify-center py-12 px-4 text-center ${className}`}
      role="status"
      aria-live="polite"
    >
      {/* Ícone */}
      <div
        className={`inline-flex items-center justify-center w-16 h-16 mb-4 ${styles.iconBg} rounded-full ${TRANSITIONS.base}`}
      >
        <Icon className={`w-8 h-8 ${styles.iconColor}`} aria-hidden="true" />
      </div>
      {/* Título */}
      <h3 className={`text-lg font-semibold mb-2 ${styles.titleColor}`}>
        {title}
      </h3>
      {/* Descrição */}
      <p className={`text-sm max-w-md mb-6 ${styles.descColor}`}>
        {description}
      </p>
      {/* Botão de Ação (opcional) */}
      {actionLabel && onAction && (
        <button
          onClick={onAction}
          className={`
            inline-flex items-center justify-center
            px-4 py-2
            bg-blue-600 hover:bg-blue-700
            text-white font-semibold
            rounded-md
            focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500
            dark:focus:ring-offset-gray-900
            ${TRANSITIONS.base}
          `}
          type="button"
        >
          {actionLabel}
        </button>
      )}
    </div>
  );
 }
 // ============================================================================
 // ESTADOS VAZIOS PRÉ-CONFIGURADOS
 // ============================================================================
 import {
  Calendar,
  FileText,
  Users,
  Clock,
  Inbox,
  AlertCircle,
  Search,
  Settings,
 } from "lucide-react";
 /**
 * Estado vazio para calendário sem consultas
 */
 export function EmptyCalendar({
  onAddAppointment,
 }: {
  onAddAppointment?: () => void;
 }) {
  return (
    <EmptyState
      icon={Calendar}
      title="Nenhuma consulta agendada"
      description="Não há consultas marcadas para este dia. Que tal agendar uma nova consulta?"
      actionLabel={onAddAppointment ? "Agendar Consulta" : undefined}
      onAction={onAddAppointment}
      variant="default"
    />
  );
 }
 /**
 * Estado vazio para paciente sem histórico
 */
 export function EmptyPatientHistory({
  onViewProfile,
 }: {
  onViewProfile?: () => void;
 }) {
  return (
    <EmptyState
      icon={FileText}
      title="Nenhum histórico encontrado"
      description="Este paciente ainda não possui consultas anteriores ou relatórios cadastrados."
      actionLabel={onViewProfile ? "Ver Perfil Completo" : undefined}
      onAction={onViewProfile}
      variant="info"
    />
  );
 }
 /**
 * Estado vazio para nenhum relatório
 */
 export function EmptyReports({
  onCreateReport,
 }: {
  onCreateReport?: () => void;
 }) {
  return (
    <EmptyState
      icon={FileText}
      title="Nenhum relatório cadastrado"
      description="Comece criando seu primeiro relatório para acompanhar métricas e análises."
      actionLabel={onCreateReport ? "Criar Relatório" : undefined}
      onAction={onCreateReport}
      variant="default"
    />
  );
 }
 /**
 * Estado vazio para disponibilidade não configurada
 */
 export function EmptyAvailability({
  onConfigureAvailability,
 }: {
  onConfigureAvailability?: () => void;
 }) {
  return (
    <EmptyState
      icon={Clock}
      title="Disponibilidade não configurada"
      description="Configure seus horários disponíveis para que pacientes possam agendar consultas."
      actionLabel={onConfigureAvailability ? "Configurar Horários" : undefined}
      onAction={onConfigureAvailability}
      variant="warning"
    />
  );
 }
 /**
 * Estado vazio para sala de espera
 */
 export function EmptyWaitingRoom() {
  return (
    <EmptyState
      icon={Inbox}
      title="Sala de espera vazia"
      description="Nenhum paciente fez check-in ainda. Eles aparecerão aqui assim que chegarem."
      variant="default"
    />
  );
 }
 /**
 * Estado vazio para nenhum paciente encontrado
 */
 export function EmptyPatientList({
  onAddPatient,
 }: {
  onAddPatient?: () => void;
 }) {
  return (
    <EmptyState
      icon={Users}
      title="Nenhum paciente encontrado"
      description="Não há pacientes cadastrados ou sua busca não retornou resultados."
      actionLabel={onAddPatient ? "Cadastrar Paciente" : undefined}
      onAction={onAddPatient}
      variant="default"
    />
  );
 }
 /**
 * Estado vazio para slots indisponíveis
 */
 export function EmptyAvailableSlots() {
  return (
    <EmptyState
      icon={AlertCircle}
      title="Nenhum horário disponível"
      description="Não há horários livres para a data selecionada. Tente outra data ou entre em contato."
      variant="warning"
    />
  );
 }
 /**
 * Estado vazio para busca sem resultados
 */
 export function EmptySearchResults({ query }: { query?: string }) {
  return (
    <EmptyState
      icon={Search}
      title="Nenhum resultado encontrado"
      description={
        query
          ? `Não encontramos resultados para "${query}". Tente ajustar sua busca.`
          : "Sua busca não retornou resultados. Tente usar termos diferentes."
      }
      variant="default"
    />
  );
 }
 /**
 * Estado vazio para configurações pendentes
 */
 export function EmptySettings({
  onOpenSettings,
 }: {
  onOpenSettings?: () => void;
 }) {
  return (
    <EmptyState
      icon={Settings}
      title="Configurações pendentes"
      description="Complete as configurações iniciais para começar a usar o sistema."
      actionLabel={onOpenSettings ? "Abrir Configurações" : undefined}
      onAction={onOpenSettings}
      variant="info"
    />
  );
 }
--- a/src/components/ui/Skeleton.tsx
+++ b/src/components/ui/Skeleton.tsx
@ -1,363 +0,0 @@
 /**
 * Skeleton Loader Component
 * Placeholder animado para melhorar percepção de carregamento
 * @version 1.0
 */
 import { cn } from "@/lib/utils";
 // ============================================================================
 // TIPOS
 // ============================================================================
 export interface SkeletonProps {
  /**
   * Variante do skeleton
   */
  variant?: "text" | "avatar" | "card" | "table" | "calendar" | "custom";
  /**
   * Largura do skeleton
   */
  width?: string | number;
  /**
   * Altura do skeleton
   */
  height?: string | number;
  /**
   * Border radius
   */
  rounded?: "none" | "sm" | "base" | "md" | "lg" | "xl" | "full";
  /**
   * Tipo de animação
   */
  animated?: "pulse" | "shimmer" | "none";
  /**
   * Classes adicionais
   */
  className?: string;
  /**
   * Número de linhas (para variant='text')
   */
  lines?: number;
 }
 // ============================================================================
 // COMPONENTE BASE
 // ============================================================================
 export function Skeleton({
  variant = "custom",
  width,
  height,
  rounded = "md",
  animated = "pulse",
  className,
  lines = 1,
 }: SkeletonProps) {
  const baseClasses = "bg-gray-200 dark:bg-gray-700";
  const roundedClasses = {
    none: "rounded-none",
    sm: "rounded-sm",
    base: "rounded",
    md: "rounded-md",
    lg: "rounded-lg",
    xl: "rounded-xl",
    full: "rounded-full",
  };
  const animationClasses = {
    pulse: "animate-pulse",
    shimmer:
      "animate-shimmer bg-gradient-to-r from-gray-200 via-gray-300 to-gray-200 dark:from-gray-700 dark:via-gray-600 dark:to-gray-700 bg-[length:1000px_100%]",
    none: "",
  };
  const style: React.CSSProperties = {
    width: typeof width === "number" ? `${width}px` : width,
    height: typeof height === "number" ? `${height}px` : height,
  };
  const classes = cn(
    baseClasses,
    roundedClasses[rounded],
    animationClasses[animated],
    className
  );
  // Variantes pré-configuradas
  switch (variant) {
    case "text":
      return (
        <div
          className="space-y-2"
          role="status"
          aria-busy="true"
          aria-label="Carregando texto"
        >
          {Array.from({ length: lines }).map((_, i) => (
            <div
              key={i}
              className={classes}
              style={{
                height: height || "1rem",
                width: i === lines - 1 && lines > 1 ? "80%" : width || "100%",
              }}
            />
          ))}
        </div>
      );
    case "avatar":
      return (
        <div
          className={cn(classes, "shrink-0")}
          style={{ width: width || "40px", height: height || "40px" }}
          role="status"
          aria-busy="true"
          aria-label="Carregando avatar"
        />
      );
    case "card":
      return (
        <div
          className={cn(
            "p-4 border border-gray-200 dark:border-gray-700",
            roundedClasses[rounded]
          )}
          role="status"
          aria-busy="true"
          aria-label="Carregando card"
        >
          <div className="space-y-3">
            <div className={cn(classes, "h-4")} style={{ width: "60%" }} />
            <div className={cn(classes, "h-3")} />
            <div className={cn(classes, "h-3")} style={{ width: "80%" }} />
          </div>
        </div>
      );
    case "table":
      return (
        <div
          className="space-y-2"
          role="status"
          aria-busy="true"
          aria-label="Carregando tabela"
        >
          {Array.from({ length: lines || 5 }).map((_, i) => (
            <div key={i} className="flex gap-4">
              <div className={cn(classes, "h-10")} style={{ width: "30%" }} />
              <div className={cn(classes, "h-10")} style={{ width: "40%" }} />
              <div className={cn(classes, "h-10")} style={{ width: "30%" }} />
            </div>
          ))}
        </div>
      );
    case "calendar":
      return (
        <div
          className="space-y-4"
          role="status"
          aria-busy="true"
          aria-label="Carregando calendário"
        >
          {/* Header */}
          <div className="flex justify-between items-center">
            <div className={cn(classes, "h-8")} style={{ width: "150px" }} />
            <div className="flex gap-2">
              <div className={cn(classes, "h-8 w-8")} />
              <div className={cn(classes, "h-8 w-8")} />
            </div>
          </div>
          {/* Week days */}
          <div className="grid grid-cols-7 gap-2">
            {Array.from({ length: 7 }).map((_, i) => (
              <div key={i} className={cn(classes, "h-6")} />
            ))}
          </div>
          {/* Calendar grid */}
          <div className="grid grid-cols-7 gap-2">
            {Array.from({ length: 35 }).map((_, i) => (
              <div key={i} className={cn(classes, "h-12")} />
            ))}
          </div>
        </div>
      );
    default:
      return (
        <div
          className={classes}
          style={style}
          role="status"
          aria-busy="true"
          aria-label="Carregando conteúdo"
        />
      );
  }
 }
 // ============================================================================
 // COMPONENTES ESPECIALIZADOS
 // ============================================================================
 /**
 * Skeleton para Card de Consulta
 */
 export function SkeletonAppointmentCard({ count = 1 }: { count?: number }) {
  return (
    <div
      className="space-y-4"
      role="status"
      aria-busy="true"
      aria-label="Carregando consultas"
    >
      {Array.from({ length: count }).map((_, i) => (
        <div
          key={i}
          className="p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm"
        >
          <div className="flex items-start gap-4">
            {/* Avatar */}
            <Skeleton variant="avatar" rounded="full" width={48} height={48} />
            {/* Content */}
            <div className="flex-1 space-y-2">
              <Skeleton variant="text" width="60%" height={16} />
              <Skeleton variant="text" width="40%" height={14} />
              <div className="flex gap-2 mt-2">
                <Skeleton width={80} height={24} rounded="full" />
                <Skeleton width={60} height={24} rounded="full" />
              </div>
            </div>
            {/* Actions */}
            <div className="flex gap-2">
              <Skeleton width={32} height={32} rounded="md" />
              <Skeleton width={32} height={32} rounded="md" />
            </div>
          </div>
        </div>
      ))}
    </div>
  );
 }
 /**
 * Skeleton para Calendário do Médico
 */
 export function SkeletonCalendar() {
  return <Skeleton variant="calendar" />;
 }
 /**
 * Skeleton para Lista de Pacientes
 */
 export function SkeletonPatientList({ count = 5 }: { count?: number }) {
  return (
    <div
      className="space-y-2"
      role="status"
      aria-busy="true"
      aria-label="Carregando pacientes"
    >
      {Array.from({ length: count }).map((_, i) => (
        <div
          key={i}
          className="flex items-center gap-4 p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700"
        >
          <Skeleton variant="avatar" rounded="full" width={40} height={40} />
          <div className="flex-1 space-y-2">
            <Skeleton width="50%" height={16} />
            <Skeleton width="30%" height={14} />
          </div>
          <Skeleton width={80} height={32} rounded="md" />
        </div>
      ))}
    </div>
  );
 }
 /**
 * Skeleton para Card de Relatório
 */
 export function SkeletonReportCard({ count = 3 }: { count?: number }) {
  return (
    <div
      className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"
      role="status"
      aria-busy="true"
      aria-label="Carregando relatórios"
    >
      {Array.from({ length: count }).map((_, i) => (
        <div
          key={i}
          className="p-6 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm"
        >
          <div className="space-y-4">
            <div className="flex justify-between items-start">
              <Skeleton width="60%" height={20} />
              <Skeleton width={24} height={24} rounded="md" />
            </div>
            <Skeleton width="100%" height={48} />
            <Skeleton width="40%" height={14} />
          </div>
        </div>
      ))}
    </div>
  );
 }
 /**
 * Skeleton para Tabela
 */
 export function SkeletonTable({
  rows = 5,
  columns = 4,
 }: {
  rows?: number;
  columns?: number;
 }) {
  return (
    <div
      className="space-y-2"
      role="status"
      aria-busy="true"
      aria-label="Carregando tabela"
    >
      {/* Header */}
      <div
        className="grid gap-4 p-4 bg-gray-50 dark:bg-gray-800 rounded-t-lg"
        style={{ gridTemplateColumns: `repeat(${columns}, 1fr)` }}
      >
        {Array.from({ length: columns }).map((_, i) => (
          <Skeleton key={i} height={16} />
        ))}
      </div>
      {/* Rows */}
      {Array.from({ length: rows }).map((_, rowIndex) => (
        <div
          key={rowIndex}
          className="grid gap-4 p-4 border-b border-gray-200 dark:border-gray-700"
          style={{ gridTemplateColumns: `repeat(${columns}, 1fr)` }}
        >
          {Array.from({ length: columns }).map((_, colIndex) => (
            <Skeleton key={colIndex} height={14} />
          ))}
        </div>
      ))}
    </div>
  );
 }
--- a/src/context/AuthContext.tsx
+++ b/src/context/AuthContext.tsx
@ -7,7 +7,6 @@ import React, {
 } from "react";
 import toast from "react-hot-toast";
 import { authService, userService } from "../services";
 import { supabase } from "../lib/supabase";
 // Tipos auxiliares
 interface UserInfoFullResponse {
@ -99,14 +98,12 @@ interface AuthContextValue {
 const AuthContext = createContext<AuthContextValue | undefined>(undefined);
 const STORAGE_KEY = "appSession";
 const SESSION_VERSION = "2.0"; // Incrementar quando mudar estrutura de roles
 interface PersistedSession {
  user: SessionUser;
  token?: string; // para quando integrar authService real
  refreshToken?: string;
  savedAt: string;
  version?: string; // Versão da estrutura da sessão
 }
 export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({
@ -216,82 +213,6 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({
        }
        if (raw) {
          const parsed = JSON.parse(raw) as PersistedSession;
          // Verificar versão da sessão - se for antiga, atualizar a role do JWT
          if (!parsed.version || parsed.version !== SESSION_VERSION) {
            console.log(
              "[AuthContext] ⚠️ Sessão antiga detectada (versão:",
              parsed.version || "sem versão",
              "vs atual:",
              SESSION_VERSION,
              "). Atualizando role do JWT..."
            );
            // Pegar o token JWT do localStorage
            const accessToken = localStorage.getItem(
              "mediconnect_access_token"
            );
            if (accessToken) {
              try {
                // Decodificar JWT para pegar app_metadata
                const payload = JSON.parse(atob(accessToken.split(".")[1]));
                const userRole =
                  payload.app_metadata?.user_role ||
                  payload.user_metadata?.role;
                console.log("[AuthContext] 🔑 Role do JWT:", userRole);
                if (userRole) {
                  const normalizedRole = normalizeRole(userRole);
                  console.log(
                    "[AuthContext] ✅ Atualizando role de",
                    parsed.user.role,
                    "para",
                    normalizedRole
                  );
                  // Atualizar a sessão com a role correta
                  const updatedUser = {
                    ...parsed.user,
                    role: normalizedRole,
                    roles: [normalizedRole],
                  } as SessionUser;
                  setUser(updatedUser);
                  persist({
                    user: updatedUser,
                    token: parsed.token,
                    version: SESSION_VERSION,
                  });
                  setLoading(false);
                  return;
                }
              } catch (error) {
                console.error(
                  "[AuthContext] ❌ Erro ao decodificar JWT:",
                  error
                );
              }
            }
            console.log(
              "[AuthContext] ⚠️ Não conseguiu atualizar role do JWT, usando role da sessão antiga"
            );
            // Usar sessão antiga mesmo sem conseguir atualizar
            const updatedUser = {
              ...parsed.user,
              version: SESSION_VERSION,
            } as SessionUser;
            setUser(updatedUser);
            persist({
              user: updatedUser,
              token: parsed.token,
              version: SESSION_VERSION,
            });
            setLoading(false);
            return;
          }
          if (parsed?.user?.role) {
            console.log("[AuthContext] ✅ Restaurando sessão:", {
              nome: parsed.user.nome,
@ -348,8 +269,7 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({
          hasToken: !!session.token,
        }
      );
-      const sessionWithVersion = { ...session, version: SESSION_VERSION };
+      const sessionStr = JSON.stringify(session);
      const sessionStr = JSON.stringify(sessionWithVersion);
      localStorage.setItem(STORAGE_KEY, sessionStr);
      sessionStorage.setItem(STORAGE_KEY, sessionStr); // BACKUP em sessionStorage
      console.log(
@ -407,42 +327,15 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({
  const buildSessionUser = React.useCallback(
    (info: UserInfoFullResponse): SessionUser => {
      // ⚠️ SEGURANÇA: Nunca logar tokens ou dados sensíveis em produção
      // Tentar pegar role do app_metadata primeiro (mais confiável)
      let rolesFromMetadata: UserRole[] = [];
      if (info.user?.user_metadata?.app_metadata?.user_role) {
        const roleFromApp = normalizeRole(
          info.user.user_metadata.app_metadata.user_role
        );
        if (roleFromApp) rolesFromMetadata.push(roleFromApp);
      }
      // Depois do user_metadata.role
      if (info.user?.user_metadata?.role) {
        const roleFromUser = normalizeRole(info.user.user_metadata.role);
        if (roleFromUser) rolesFromMetadata.push(roleFromUser);
      }
      const rolesNormalized = (info.roles || [])
        .map(normalizeRole)
        .filter(Boolean) as UserRole[];
      // Combinar roles do metadata com roles do array
      const allRoles = [...new Set([...rolesFromMetadata, ...rolesNormalized])];
      const permissions = info.permissions || {};
      const primaryRole = pickPrimaryRole(
-        allRoles.length
+        rolesNormalized.length
-          ? allRoles
+          ? rolesNormalized
          : [normalizeRole((info.roles || [])[0]) || "paciente"]
      );
      console.log("[buildSessionUser] Roles detectados:", {
        fromMetadata: rolesFromMetadata,
        fromArray: rolesNormalized,
        allRoles,
        primaryRole,
      });
      const base = {
        id: info.user?.id || "",
        nome:
@ -451,7 +344,7 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({
          "Usuário",
        email: info.user?.email,
        role: primaryRole,
-        roles: allRoles,
+        roles: rolesNormalized,
        permissions,
      } as SessionUserBase;
      if (primaryRole === "medico") {
--- a/src/hooks/useAppointments.ts
+++ b/src/hooks/useAppointments.ts
@ -1,337 +0,0 @@
 /**
 * React Query Hooks - Appointments
 * Hooks para gerenciamento de consultas com cache inteligente
 * @version 1.0
 */
 import {
  useQuery,
  useMutation,
  useQueryClient,
  UseQueryOptions,
 } from "@tanstack/react-query";
 import { appointmentService } from "../services";
 import type {
  Appointment,
  CreateAppointmentInput,
  UpdateAppointmentInput,
  AppointmentFilters,
 } from "../services/appointments/types";
 import toast from "react-hot-toast";
 // ============================================================================
 // QUERY KEYS
 // ============================================================================
 export const appointmentKeys = {
  all: ["appointments"] as const,
  lists: () => [...appointmentKeys.all, "list"] as const,
  list: (filters?: AppointmentFilters) =>
    [...appointmentKeys.lists(), filters] as const,
  details: () => [...appointmentKeys.all, "detail"] as const,
  detail: (id: string) => [...appointmentKeys.details(), id] as const,
  byDoctor: (doctorId: string) =>
    [...appointmentKeys.all, "doctor", doctorId] as const,
  byPatient: (patientId: string) =>
    [...appointmentKeys.all, "patient", patientId] as const,
  waitingRoom: (doctorId: string) =>
    [...appointmentKeys.all, "waitingRoom", doctorId] as const,
 };
 // ============================================================================
 // QUERY HOOKS
 // ============================================================================
 /**
 * Hook para buscar lista de consultas
 * @param filters - Filtros de busca
 * @param options - Opções adicionais do useQuery
 */
 export function useAppointments(
  filters?: AppointmentFilters,
  options?: Omit<UseQueryOptions<Appointment[]>, "queryKey" | "queryFn">
 ) {
  return useQuery({
    queryKey: appointmentKeys.list(filters),
    queryFn: async () => {
      return await appointmentService.list(filters);
    },
    ...options,
  });
 }
 /**
 * Hook para buscar uma consulta específica
 * @param id - ID da consulta
 */
 export function useAppointment(id: string | undefined) {
  return useQuery({
    queryKey: appointmentKeys.detail(id!),
    queryFn: async () => {
      if (!id) throw new Error("ID é obrigatório");
      return await appointmentService.getById(id);
    },
    enabled: !!id,
  });
 }
 /**
 * Hook para buscar consultas de um médico
 * @param doctorId - ID do médico
 */
 export function useAppointmentsByDoctor(doctorId: string | undefined) {
  return useAppointments({ doctor_id: doctorId }, { enabled: !!doctorId });
 }
 /**
 * Hook para buscar consultas de um paciente
 * @param patientId - ID do paciente
 */
 export function useAppointmentsByPatient(patientId: string | undefined) {
  return useAppointments({ patient_id: patientId }, { enabled: !!patientId });
 }
 // ============================================================================
 // MUTATION HOOKS
 // ============================================================================
 /**
 * Hook para criar nova consulta
 */
 export function useCreateAppointment() {
  const queryClient = useQueryClient();
  return useMutation({
    mutationFn: async (data: CreateAppointmentInput) => {
      return await appointmentService.create(data);
    },
    onSuccess: (data) => {
      // Invalidar todas as listas de consultas
      queryClient.invalidateQueries({ queryKey: appointmentKeys.lists() });
      // Invalidar consultas do médico e paciente específicos
      if (data?.doctor_id) {
        queryClient.invalidateQueries({
          queryKey: appointmentKeys.byDoctor(data.doctor_id),
        });
      }
      if (data?.patient_id) {
        queryClient.invalidateQueries({
          queryKey: appointmentKeys.byPatient(data.patient_id),
        });
      }
      toast.success("Consulta agendada com sucesso!");
    },
    onError: (error: Error) => {
      toast.error(`Erro ao agendar: ${error.message}`);
    },
  });
 }
 /**
 * Hook para atualizar consulta
 */
 export function useUpdateAppointment() {
  const queryClient = useQueryClient();
  return useMutation({
    mutationFn: async (data: UpdateAppointmentInput & { id: string }) => {
      return await appointmentService.update(data.id, data);
    },
    onMutate: async (variables) => {
      // Optimistic update
      await queryClient.cancelQueries({
        queryKey: appointmentKeys.detail(variables.id),
      });
      const previousAppointment = queryClient.getQueryData<Appointment>(
        appointmentKeys.detail(variables.id)
      );
      return { previousAppointment };
    },
    onSuccess: (data, variables) => {
      // Invalidar queries relacionadas
      queryClient.invalidateQueries({ queryKey: appointmentKeys.lists() });
      queryClient.invalidateQueries({
        queryKey: appointmentKeys.detail(variables.id),
      });
      if (data?.doctor_id) {
        queryClient.invalidateQueries({
          queryKey: appointmentKeys.byDoctor(data.doctor_id),
        });
      }
      if (data?.patient_id) {
        queryClient.invalidateQueries({
          queryKey: appointmentKeys.byPatient(data.patient_id),
        });
      }
      toast.success("Consulta atualizada com sucesso!");
    },
    onError: (error: Error, variables, context) => {
      // Rollback em caso de erro
      if (context?.previousAppointment) {
        queryClient.setQueryData(
          appointmentKeys.detail(variables.id),
          context.previousAppointment
        );
      }
      toast.error(`Erro ao atualizar: ${error.message}`);
    },
  });
 }
 /**
 * Hook para cancelar consulta
 */
 export function useCancelAppointment() {
  const queryClient = useQueryClient();
  return useMutation({
    mutationFn: async ({ id }: { id: string; reason?: string }) => {
      // Usa update para cancelar
      return await appointmentService.update(id, { status: "cancelled" });
    },
    onSuccess: (data, variables) => {
      queryClient.invalidateQueries({ queryKey: appointmentKeys.lists() });
      queryClient.invalidateQueries({
        queryKey: appointmentKeys.detail(variables.id),
      });
      if (data?.doctor_id) {
        queryClient.invalidateQueries({
          queryKey: appointmentKeys.byDoctor(data.doctor_id),
        });
      }
      if (data?.patient_id) {
        queryClient.invalidateQueries({
          queryKey: appointmentKeys.byPatient(data.patient_id),
        });
      }
      toast.success("Consulta cancelada com sucesso");
    },
    onError: (error: Error) => {
      toast.error(`Erro ao cancelar: ${error.message}`);
    },
  });
 }
 /**
 * Hook para check-in de paciente
 */
 export function useCheckInAppointment() {
  const queryClient = useQueryClient();
  return useMutation({
    mutationFn: async (appointmentId: string) => {
      return await appointmentService.update(appointmentId, {
        status: "checked_in",
      });
    },
    onSuccess: (data) => {
      queryClient.invalidateQueries({ queryKey: appointmentKeys.lists() });
      if (data?.doctor_id) {
        queryClient.invalidateQueries({
          queryKey: appointmentKeys.waitingRoom(data.doctor_id),
        });
      }
      toast.success("Check-in realizado com sucesso!");
    },
    onError: (error: Error) => {
      toast.error(`Erro no check-in: ${error.message}`);
    },
  });
 }
 /**
 * Hook para confirmação 1-clique de consulta
 * Atualiza status para confirmed e envia notificação automática
 */
 export function useConfirmAppointment() {
  const queryClient = useQueryClient();
  return useMutation({
    mutationFn: async ({
      appointmentId,
      patientPhone,
      patientName,
      scheduledAt,
    }: {
      appointmentId: string;
      patientPhone?: string;
      patientName?: string;
      scheduledAt?: string;
    }) => {
      // 1. Atualizar status para confirmed
      const updated = await appointmentService.update(appointmentId, {
        status: "confirmed",
      });
      // 2. Enviar notificação automática (se houver telefone)
      if (patientPhone && patientName && scheduledAt) {
        try {
          // Importa notificationService dinamicamente para evitar circular dependency
          const { notificationService } = await import("../services");
          await notificationService.sendAppointmentReminder(
            appointmentId,
            patientPhone,
            patientName,
            scheduledAt
          );
        } catch (error) {
          console.warn(
            "Erro ao enviar notificação (não bloqueia confirmação):",
            error
          );
        }
      }
      return updated;
    },
    onSuccess: (data) => {
      queryClient.invalidateQueries({ queryKey: appointmentKeys.lists() });
      if (data?.doctor_id) {
        queryClient.invalidateQueries({
          queryKey: appointmentKeys.byDoctor(data.doctor_id),
        });
      }
      if (data?.patient_id) {
        queryClient.invalidateQueries({
          queryKey: appointmentKeys.byPatient(data.patient_id),
        });
      }
      toast.success("✅ Consulta confirmada! Notificação enviada ao paciente.");
    },
    onError: (error: Error) => {
      toast.error(`Erro ao confirmar: ${error.message}`);
    },
  });
 }
 // ============================================================================
 // UTILITY HOOKS
 // ============================================================================
 /**
 * Hook para prefetch de consultas (otimização)
 */
 export function usePrefetchAppointments() {
  const queryClient = useQueryClient();
  return (filters?: AppointmentFilters) => {
    queryClient.prefetchQuery({
      queryKey: appointmentKeys.list(filters),
      queryFn: async () => {
        return await appointmentService.list(filters);
      },
    });
  };
 }
--- a/src/hooks/useAvailability.ts
+++ b/src/hooks/useAvailability.ts
@ -1,278 +0,0 @@
 /**
 * React Query Hooks - Availability
 * Hooks para gerenciamento de disponibilidade com cache inteligente
 * @version 1.0
 */
 import {
  useQuery,
  useMutation,
  useQueryClient,
  UseQueryOptions,
 } from "@tanstack/react-query";
 import { availabilityService } from "../services";
 import type {
  DoctorAvailability,
  CreateAvailabilityInput,
  UpdateAvailabilityInput,
 } from "../services/availability/types";
 import toast from "react-hot-toast";
 // ============================================================================
 // QUERY KEYS
 // ============================================================================
 export const availabilityKeys = {
  all: ["availability"] as const,
  lists: () => [...availabilityKeys.all, "list"] as const,
  list: (doctorId?: string) => [...availabilityKeys.lists(), doctorId] as const,
  details: () => [...availabilityKeys.all, "detail"] as const,
  detail: (id: string) => [...availabilityKeys.details(), id] as const,
  slots: (doctorId: string, date: string) =>
    [...availabilityKeys.all, "slots", doctorId, date] as const,
 };
 // ============================================================================
 // QUERY HOOKS
 // ============================================================================
 /**
 * Hook para buscar disponibilidade de um médico
 */
 export function useAvailability(
  doctorId: string | undefined,
  options?: Omit<UseQueryOptions<DoctorAvailability[]>, "queryKey" | "queryFn">
 ) {
  return useQuery({
    queryKey: availabilityKeys.list(doctorId),
    queryFn: async () => {
      if (!doctorId) throw new Error("Doctor ID é obrigatório");
      return await availabilityService.list({ doctor_id: doctorId });
    },
    enabled: !!doctorId,
    ...options,
  });
 }
 /**
 * Hook para buscar uma disponibilidade específica
 */
 export function useAvailabilityById(id: string | undefined) {
  return useQuery({
    queryKey: availabilityKeys.detail(id!),
    queryFn: async () => {
      if (!id) throw new Error("ID é obrigatório");
      const items = await availabilityService.list();
      const found = items.find((item) => item.id === id);
      if (!found) throw new Error("Disponibilidade não encontrada");
      return found;
    },
    enabled: !!id,
  });
 }
 /**
 * Hook para buscar slots disponíveis de um médico em uma data
 */
 export function useAvailableSlots(
  doctorId: string | undefined,
  date: string | undefined,
  options?: Omit<UseQueryOptions<string[]>, "queryKey" | "queryFn">
 ) {
  return useQuery({
    queryKey: availabilityKeys.slots(doctorId!, date!),
    queryFn: async () => {
      if (!doctorId || !date)
        throw new Error("Doctor ID e Data são obrigatórios");
      // Buscar disponibilidade do médico
      const availabilities = await availabilityService.list({
        doctor_id: doctorId,
      });
      // Buscar consultas do dia
      const { appointmentService } = await import("../services");
      const appointments = await appointmentService.list({
        doctor_id: doctorId,
        scheduled_at: `gte.${date}T00:00:00,lt.${date}T23:59:59`,
      });
      // Calcular slots livres (simplificado - usar lógica completa do AvailableSlotsPicker)
      const occupiedSlots = new Set(
        appointments.map((a) => a.scheduled_at.substring(11, 16))
      );
      const dayOfWeek = new Date(date).getDay();
      const dayAvailability = availabilities.filter(
        (av) => av.weekday === dayOfWeek
      );
      const freeSlots: string[] = [];
      dayAvailability.forEach((av) => {
        const start = parseInt(av.start_time.replace(":", ""));
        const end = parseInt(av.end_time.replace(":", ""));
        const slotMinutes = av.slot_minutes || 30;
        const increment = (slotMinutes / 60) * 100;
        for (let time = start; time < end; time += increment) {
          const hour = Math.floor(time / 100);
          const minute = time % 100;
          const timeStr = `${hour.toString().padStart(2, "0")}:${minute
            .toString()
            .padStart(2, "0")}`;
          if (!occupiedSlots.has(timeStr)) {
            freeSlots.push(timeStr);
          }
        }
      });
      return freeSlots.sort();
    },
    enabled: !!doctorId && !!date,
    staleTime: 2 * 60 * 1000, // 2 minutos - slots mudam frequentemente
    ...options,
  });
 }
 // ============================================================================
 // MUTATION HOOKS
 // ============================================================================
 /**
 * Hook para criar nova disponibilidade
 */
 export function useCreateAvailability() {
  const queryClient = useQueryClient();
  return useMutation({
    mutationFn: async (data: CreateAvailabilityInput) => {
      return await availabilityService.create(data);
    },
    onSuccess: (data) => {
      // Invalidar listas de disponibilidade
      queryClient.invalidateQueries({ queryKey: availabilityKeys.lists() });
      if (data?.doctor_id) {
        queryClient.invalidateQueries({
          queryKey: availabilityKeys.list(data.doctor_id),
        });
      }
      toast.success("Disponibilidade criada com sucesso!");
    },
    onError: (error: Error) => {
      toast.error(`Erro ao criar disponibilidade: ${error.message}`);
    },
  });
 }
 /**
 * Hook para atualizar disponibilidade
 */
 export function useUpdateAvailability() {
  const queryClient = useQueryClient();
  return useMutation({
    mutationFn: async (data: UpdateAvailabilityInput & { id: string }) => {
      return await availabilityService.update(data.id, data);
    },
    onMutate: async (variables) => {
      // Optimistic update
      await queryClient.cancelQueries({
        queryKey: availabilityKeys.detail(variables.id),
      });
      const previousAvailability = queryClient.getQueryData<DoctorAvailability>(
        availabilityKeys.detail(variables.id)
      );
      return { previousAvailability };
    },
    onSuccess: (data, variables) => {
      queryClient.invalidateQueries({ queryKey: availabilityKeys.lists() });
      queryClient.invalidateQueries({
        queryKey: availabilityKeys.detail(variables.id),
      });
      if (data?.doctor_id) {
        queryClient.invalidateQueries({
          queryKey: availabilityKeys.list(data.doctor_id),
        });
      }
      toast.success("Disponibilidade atualizada com sucesso!");
    },
    onError: (error: Error, variables, context) => {
      if (context?.previousAvailability) {
        queryClient.setQueryData(
          availabilityKeys.detail(variables.id),
          context.previousAvailability
        );
      }
      toast.error(`Erro ao atualizar: ${error.message}`);
    },
  });
 }
 /**
 * Hook para deletar disponibilidade
 */
 export function useDeleteAvailability() {
  const queryClient = useQueryClient();
  return useMutation({
    mutationFn: async ({ id }: { id: string; doctorId: string }) => {
      return await availabilityService.delete(id);
    },
    onSuccess: (_, variables) => {
      queryClient.invalidateQueries({ queryKey: availabilityKeys.lists() });
      queryClient.invalidateQueries({
        queryKey: availabilityKeys.list(variables.doctorId),
      });
      toast.success("Disponibilidade removida com sucesso");
    },
    onError: (error: Error) => {
      toast.error(`Erro ao remover: ${error.message}`);
    },
  });
 }
 // ============================================================================
 // UTILITY HOOKS
 // ============================================================================
 /**
 * Hook para prefetch de disponibilidade (otimização)
 */
 export function usePrefetchAvailability() {
  const queryClient = useQueryClient();
  return (doctorId: string) => {
    queryClient.prefetchQuery({
      queryKey: availabilityKeys.list(doctorId),
      queryFn: async () => {
        return await availabilityService.list({ doctor_id: doctorId });
      },
    });
  };
 }
 /**
 * Hook para prefetch de slots disponíveis (navegação de calendário)
 */
 export function usePrefetchAvailableSlots() {
  const queryClient = useQueryClient();
  return (doctorId: string, date: string) => {
    queryClient.prefetchQuery({
      queryKey: availabilityKeys.slots(doctorId, date),
      queryFn: async () => {
        await availabilityService.list({ doctor_id: doctorId });
        // Lógica simplificada - ver hook useAvailableSlots para implementação completa
        return [];
      },
    });
  };
 }
--- a/src/hooks/useCommandPalette.ts
+++ b/src/hooks/useCommandPalette.ts
@ -1,36 +0,0 @@
 /**
 * useCommandPalette Hook
 * Hook para gerenciar estado global do Command Palette
 * @version 1.0
 */
 import { useEffect, useState, useCallback } from "react";
 export function useCommandPalette() {
  const [isOpen, setIsOpen] = useState(false);
  const open = useCallback(() => setIsOpen(true), []);
  const close = useCallback(() => setIsOpen(false), []);
  const toggle = useCallback(() => setIsOpen((prev) => !prev), []);
  // Listener global para Ctrl+K / Cmd+K
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      // Ctrl+K ou Cmd+K
      if ((e.ctrlKey || e.metaKey) && e.key === "k") {
        e.preventDefault();
        toggle();
      }
    };
    document.addEventListener("keydown", handleKeyDown);
    return () => document.removeEventListener("keydown", handleKeyDown);
  }, [toggle]);
  return {
    isOpen,
    open,
    close,
    toggle,
  };
 }
--- a/src/hooks/useMetrics.ts
+++ b/src/hooks/useMetrics.ts
@ -1,196 +0,0 @@
 import { useQuery } from "@tanstack/react-query";
 import { appointmentService } from "../services";
 import { patientService } from "../services";
 import { format, startOfMonth, startOfDay, endOfDay } from "date-fns";
 interface MetricsData {
  totalAppointments: number;
  appointmentsToday: number;
  completedAppointments: number;
  activePatients: number;
  occupancyRate: number;
  cancelledRate: number;
 }
 const metricsKeys = {
  all: ["metrics"] as const,
  summary: (doctorId?: string) =>
    [...metricsKeys.all, "summary", doctorId] as const,
 };
 /**
 * Hook para buscar métricas gerais do dashboard
 * Auto-refresh a cada 5 minutos
 */
 export function useMetrics(doctorId?: string) {
  return useQuery({
    queryKey: metricsKeys.summary(doctorId),
    queryFn: async (): Promise<MetricsData> => {
      const today = new Date();
      const startOfToday = format(startOfDay(today), "yyyy-MM-dd'T'HH:mm:ss");
      const endOfToday = format(endOfDay(today), "yyyy-MM-dd'T'HH:mm:ss");
      const startOfThisMonth = format(
        startOfMonth(today),
        "yyyy-MM-dd'T'HH:mm:ss"
      );
      // Buscar todas as consultas (ou filtradas por médico)
      const allAppointments = await appointmentService.list(
        doctorId ? { doctor_id: doctorId } : {}
      );
      // Buscar consultas de hoje
      const todayAppointments = allAppointments.filter((apt) => {
        if (!apt.scheduled_at) return false;
        const aptDate = new Date(apt.scheduled_at);
        return (
          aptDate >= new Date(startOfToday) && aptDate <= new Date(endOfToday)
        );
      });
      // Consultas concluídas (total)
      const completedAppointments = allAppointments.filter(
        (apt) => apt.status === "completed"
      );
      // Consultas canceladas
      const cancelledAppointments = allAppointments.filter(
        (apt) => apt.status === "cancelled" || apt.status === "no_show"
      );
      // Buscar pacientes ativos (pode ajustar a lógica)
      const allPatients = await patientService.list();
      const activePatients = allPatients.filter((patient) => {
        // Considera ativo se tem consulta nos últimos 3 meses
        const hasRecentAppointment = allAppointments.some(
          (apt) =>
            apt.patient_id === patient.id &&
            apt.scheduled_at &&
            new Date(apt.scheduled_at) >= new Date(startOfThisMonth)
        );
        return hasRecentAppointment;
      });
      // Taxa de ocupação (consultas confirmadas + em andamento vs total de slots disponíveis)
      // Simplificado: confirmadas + in_progress / total agendado
      const scheduledAppointments = todayAppointments.filter(
        (apt) =>
          apt.status === "confirmed" ||
          apt.status === "in_progress" ||
          apt.status === "completed" ||
          apt.status === "checked_in"
      );
      const occupancyRate =
        todayAppointments.length > 0
          ? Math.round(
              (scheduledAppointments.length / todayAppointments.length) * 100
            )
          : 0;
      // Taxa de cancelamento
      const cancelledRate =
        allAppointments.length > 0
          ? Math.round(
              (cancelledAppointments.length / allAppointments.length) * 100
            )
          : 0;
      return {
        totalAppointments: allAppointments.length,
        appointmentsToday: todayAppointments.length,
        completedAppointments: completedAppointments.length,
        activePatients: activePatients.length,
        occupancyRate,
        cancelledRate,
      };
    },
    staleTime: 5 * 60 * 1000, // 5 minutos
    refetchInterval: 5 * 60 * 1000, // Auto-refresh a cada 5 minutos
    refetchOnWindowFocus: true,
  });
 }
 /**
 * Hook para buscar dados de ocupação dos últimos 7 dias
 * Para uso em gráficos
 */
 export function useOccupancyData(doctorId?: string) {
  return useQuery({
    queryKey: [...metricsKeys.all, "occupancy", doctorId],
    queryFn: async () => {
      const today = new Date();
      const last7Days = Array.from({ length: 7 }, (_, i) => {
        const date = new Date(today);
        date.setDate(date.getDate() - (6 - i));
        return date;
      });
      const appointments = await appointmentService.list(
        doctorId ? { doctor_id: doctorId } : {}
      );
      const occupancyByDay = last7Days.map((date) => {
        const dayStart = startOfDay(date);
        const dayEnd = endOfDay(date);
        const dayAppointments = appointments.filter((apt) => {
          if (!apt.scheduled_at) return false;
          const aptDate = new Date(apt.scheduled_at);
          return aptDate >= dayStart && aptDate <= dayEnd;
        });
        const completedOrInProgress = dayAppointments.filter(
          (apt) =>
            apt.status === "completed" ||
            apt.status === "in_progress" ||
            apt.status === "confirmed" ||
            apt.status === "checked_in"
        );
        const rate =
          dayAppointments.length > 0
            ? Math.round(
                (completedOrInProgress.length / dayAppointments.length) * 100
              )
            : 0;
        return {
          date: format(date, "yyyy-MM-dd"), // ISO format para compatibilidade
          dayName: format(date, "EEE"),
          total: dayAppointments.length,
          completed: completedOrInProgress.length,
          rate,
          // Formato compatível com OccupancyHeatmap
          total_slots: dayAppointments.length,
          occupied_slots: completedOrInProgress.length,
          available_slots:
            dayAppointments.length - completedOrInProgress.length,
          occupancy_rate: rate,
        };
      });
      return occupancyByDay;
    },
    staleTime: 10 * 60 * 1000, // 10 minutos (muda menos frequentemente)
    refetchInterval: 10 * 60 * 1000,
  });
 }
 // Exemplo de uso:
 // import { useMetrics } from '@/hooks/useMetrics';
 //
 // function Dashboard() {
 //   const { data: metrics, isLoading } = useMetrics(doctorId);
 //
 //   if (isLoading) return <Skeleton />;
 //
 //   return (
 //     <div>
 //       <MetricCard
 //         title="Total de Consultas"
 //         value={metrics.totalAppointments}
 //         icon={Calendar}
 //       />
 //     </div>
 //   );
 // }
--- a/src/index.css
+++ b/src/index.css
@ -7,32 +7,16 @@
@layer base {
  body {
    font-family: "Inter", system-ui, -apple-system, sans-serif;
    overflow-x: hidden;
  }
-  /* Respeitar configurações de zoom do usuário */
+  /* Garantir que o texto nunca fique muito grande */
  html {
-    overflow-x: hidden;
+    font-size: 16px;
  }
-  /* Garantir que imagens e vídeos sejam responsivos */
+  @media (max-width: 640px) {
-  img,
+    html {
-  video {
+      font-size: 14px;
    max-width: 100%;
    height: auto;
  }
  /* Garantir que tabelas sejam scrolláveis em mobile */
  table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  @media (min-width: 768px) {
    table {
      display: table;
    }
  }
 }
@ -118,7 +102,7 @@ html.low-blue-light {
 }
 html.low-blue-light::after {
-  content: "";
+  content: '';
  position: fixed;
  top: 0;
  left: 0;
@ -789,81 +773,6 @@ html.focus-mode.dark *:focus-visible,
  outline-color: #60a5fa;
 }
 /* Utilidades de responsividade global */
@layer utilities {
  /* Container responsivo com padding adaptável */
  .responsive-container {
    @apply w-full mx-auto px-3 sm:px-4 md:px-6 lg:px-8;
    max-width: 1920px;
  }
  /* Card responsivo */
  .responsive-card {
    @apply bg-white rounded-lg shadow-md p-3 sm:p-4 md:p-6;
  }
  .dark .responsive-card {
    @apply bg-slate-800 shadow-slate-900/50;
  }
  /* Texto responsivo */
  .text-responsive-sm {
    @apply text-xs sm:text-sm;
  }
  .text-responsive-base {
    @apply text-sm sm:text-base;
  }
  .text-responsive-lg {
    @apply text-base sm:text-lg md:text-xl;
  }
  .text-responsive-xl {
    @apply text-lg sm:text-xl md:text-2xl lg:text-3xl;
  }
  /* Botão responsivo */
  .btn-responsive {
    @apply px-3 py-2 sm:px-4 sm:py-2.5 md:px-6 md:py-3 text-sm sm:text-base;
  }
  /* Grid responsivo automático */
  .grid-responsive {
    @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3 sm:gap-4 md:gap-6;
  }
  /* Espaçamento responsivo */
  .space-responsive {
    @apply space-y-3 sm:space-y-4 md:space-y-6;
  }
  /* Modal/Dialog responsivo */
  .modal-responsive {
    @apply w-full max-w-sm sm:max-w-md md:max-w-lg lg:max-w-xl xl:max-w-2xl 2xl:max-w-4xl;
  }
  /* Input responsivo */
  .input-responsive {
    @apply px-3 py-2 sm:py-2.5 md:py-3 text-sm sm:text-base;
  }
  /* Ocultar em mobile */
  .hide-mobile {
    @apply hidden sm:block;
  }
  /* Mostrar apenas em mobile */
  .show-mobile {
    @apply block sm:hidden;
  }
  /* Stack em mobile, row em desktop */
  .stack-mobile {
    @apply flex flex-col sm:flex-row;
  }
 }
 /* Animações */
@keyframes slideIn {
  from {
--- a/src/lib/queryClient.ts
+++ b/src/lib/queryClient.ts
@ -1,31 +0,0 @@
 /**
 * React Query Configuration
 * Setup do QueryClient para cache e sincronização de dados
 * @version 1.0
 */
 import { QueryClient } from "@tanstack/react-query";
 /**
 * Configuração padrão do QueryClient
 * - staleTime: 5 minutos - dados são considerados frescos por 5min
 * - cacheTime: 10 minutos - dados permanecem em cache por 10min após não serem usados
 * - retry: 3 tentativas com backoff exponencial
 * - refetchOnWindowFocus: false - não refetch automático ao focar janela
 */
 export const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 5 * 60 * 1000, // 5 minutos
      gcTime: 10 * 60 * 1000, // 10 minutos (anteriormente cacheTime)
      retry: 3,
      retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 30000),
      refetchOnWindowFocus: false,
      refetchOnReconnect: true,
    },
    mutations: {
      retry: 1,
      retryDelay: 1000,
    },
  },
 });
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@ -1,14 +0,0 @@
 /**
 * Utility Functions
 * Funções auxiliares compartilhadas
 * @version 1.0
 */
 /**
 * Utility para combinar classNames condicionalmente
 * @param classes - Lista de classes (pode incluir undefined, null, false)
 * @returns String com classes válidas separadas por espaço
 */
 export function cn(...classes: (string | undefined | null | false)[]): string {
  return classes.filter(Boolean).join(" ");
 }
--- a/src/main.tsx
+++ b/src/main.tsx
@ -1,11 +1,8 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import "./index.css";
 import App from "./App.tsx";
 import { AuthProvider } from "./context/AuthContext";
 import { queryClient } from "./lib/queryClient";
 // Apply accessibility preferences before React mounts to avoid FOUC and ensure persistence across reloads.
 // This also helps E2E test detect classes after reload.
@ -45,11 +42,8 @@ import { queryClient } from "./lib/queryClient";
 createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <QueryClientProvider client={queryClient}>
    <AuthProvider>
      <App />
    </AuthProvider>
      <ReactQueryDevtools initialIsOpen={false} position="bottom-right" />
    </QueryClientProvider>
  </StrictMode>
 );
--- a/src/pages/AcompanhamentoPaciente.tsx
+++ b/src/pages/AcompanhamentoPaciente.tsx
@ -22,26 +22,12 @@ import { format } from "date-fns";
 import { ptBR } from "date-fns/locale";
 import { useNavigate, useLocation } from "react-router-dom";
 import { useAuth } from "../hooks/useAuth";
-import { appointmentService, doctorService, reportService, patientService } from "../services";
+import { appointmentService, doctorService, reportService } from "../services";
 import type { Report } from "../services/reports/types";
 import AgendamentoConsulta from "../components/AgendamentoConsulta";
 import { AvatarUpload } from "../components/ui/AvatarUpload";
 import { avatarService } from "../services/avatars/avatarService";
 // Parse date correctly - handle timezone issues
 const parseDate = (dateString: string) => {
  // Se a data não termina com Z e não tem timezone, adiciona Z para forçar UTC
  if (
    dateString &&
    !dateString.endsWith("Z") &&
    !dateString.includes("+") &&
    !dateString.includes("-", 10)
  ) {
    return new Date(dateString + "Z");
  }
  return new Date(dateString);
 };
 interface Consulta {
  _id: string;
  pacienteId: string;
@ -105,49 +91,15 @@ const AcompanhamentoPaciente: React.FC = () => {
    Record<string, string>
  >({});
-  // user?.id é o auth user_id (usado para perfil)
+  const pacienteId = user?.id || "";
  const authUserId = user?.id || "";
  const pacienteNome = user?.nome || "Paciente";
  // patient.id é o ID da tabela patients (usado para consultas/relatórios)
  const [patientTableId, setPatientTableId] = useState<string | null>(null);
  useEffect(() => {
    // Permite acesso se for paciente OU se roles inclui 'paciente'
    const isPaciente = user?.role === "paciente" || roles.includes("paciente");
    if (!user || !isPaciente) navigate("/paciente");
  }, [user, roles, navigate]);
  // Buscar patient.id usando user_id
  useEffect(() => {
    const fetchPatientId = async () => {
      if (!authUserId) return;
      try {
        console.log("[AcompanhamentoPaciente] 🔍 Buscando patient.id para user_id:", authUserId);
        const patient = await patientService.getByUserId(authUserId);
        if (patient?.id) {
          console.log("[AcompanhamentoPaciente] ✅ Patient encontrado:", {
            patient_id: patient.id,
            user_id: authUserId,
            name: patient.full_name,
          });
          setPatientTableId(patient.id);
        } else {
          console.warn("[AcompanhamentoPaciente] ⚠️ Patient não tem ID");
        }
      } catch (error) {
        console.error("[AcompanhamentoPaciente] ❌ Erro ao buscar patient.id:", error);
        // Se não encontrar na tabela patients, usa o auth user_id como fallback
        console.warn("[AcompanhamentoPaciente] 📝 Usando auth user_id como fallback");
        setPatientTableId(authUserId);
      }
    };
    fetchPatientId();
  }, [authUserId]);
  // Detecta se veio de navegação com estado para abrir aba específica
  useEffect(() => {
    if (
@ -189,26 +141,17 @@ const AcompanhamentoPaciente: React.FC = () => {
  }, [user?.id]);
  const fetchConsultas = useCallback(async () => {
-    if (!patientTableId) {
+    if (!pacienteId) return;
      console.warn("[AcompanhamentoPaciente] ⚠️ Aguardando patientTableId...");
      return;
    }
    setLoading(true);
    setLoadingMedicos(true);
    try {
      console.log("[AcompanhamentoPaciente] 🔍 Buscando consultas para patient.id:", patientTableId);
      // Buscar TODOS os agendamentos da API (sem limite)
      const appointments = await appointmentService.list({
-        patient_id: patientTableId,  // ✅ Usando patient.id da tabela
+        patient_id: pacienteId,
        limit: 1000, // Aumenta limite para buscar todas
        order: "scheduled_at.desc",
      });
      console.log("[AcompanhamentoPaciente] ✅ Consultas encontradas:", appointments.length);
      // Buscar médicos
      const medicosData = await doctorService.list();
      const medicosFormatted: Medico[] = medicosData.map((d) => ({
@ -247,13 +190,13 @@ const AcompanhamentoPaciente: React.FC = () => {
      setConsultas(consultasAPI);
    } catch (error) {
      setLoadingMedicos(false);
-      console.error("[AcompanhamentoPaciente] ❌ Erro ao carregar consultas:", error);
+      console.error("Erro ao carregar consultas:", error);
      toast.error("Erro ao carregar consultas");
      setConsultas([]);
    } finally {
      setLoading(false);
    }
-  }, [patientTableId]);
+  }, [pacienteId]);
  useEffect(() => {
    fetchConsultas();
@ -287,37 +230,21 @@ const AcompanhamentoPaciente: React.FC = () => {
  // Recarregar consultas quando mudar para a aba de consultas
  const fetchLaudos = useCallback(async () => {
-    if (!patientTableId) {
+    if (!pacienteId) return;
      console.warn("[AcompanhamentoPaciente] ⚠️ Aguardando patientTableId para laudos...");
      return;
    }
    setLoadingLaudos(true);
    try {
-      console.log("[AcompanhamentoPaciente] 🔍 Buscando laudos para patient.id:", {
+      const data = await reportService.list({ patient_id: pacienteId });
        patientTableId,
        user: user?.nome,
        authUserId: authUserId,
      });
      const data = await reportService.list({ patient_id: patientTableId });  // ✅ Usando patient.id da tabela
      console.log("[AcompanhamentoPaciente] ✅ Laudos encontrados:", {
        count: data.length,
        laudos: data,
      });
      setLaudos(data);
      // Carregar nomes dos médicos
      await loadRequestedByNames(data);
    } catch (error) {
-      console.error("[AcompanhamentoPaciente] ❌ Erro ao buscar laudos:", error);
+      console.error("Erro ao buscar laudos:", error);
      toast.error("Erro ao carregar laudos");
      setLaudos([]);
    } finally {
      setLoadingLaudos(false);
    }
-  }, [patientTableId, loadRequestedByNames, user?.nome, authUserId]);
+  }, [pacienteId, loadRequestedByNames]);
  useEffect(() => {
    if (activeTab === "appointments") {
@ -332,12 +259,12 @@ const AcompanhamentoPaciente: React.FC = () => {
  }, [activeTab, fetchLaudos]);
  const getMedicoNome = (medicoId: string) => {
-    const medico = medicos.find((m) => m.id === medicoId);
+    const medico = medicos.find((m) => m._id === medicoId || m.id === medicoId);
    return medico?.nome || "Médico";
  };
  const getMedicoEspecialidade = (medicoId: string) => {
-    const medico = medicos.find((m) => m.id === medicoId);
+    const medico = medicos.find((m) => m._id === medicoId || m.id === medicoId);
    return medico?.especialidade || "Especialidade";
  };
@ -347,62 +274,37 @@ const AcompanhamentoPaciente: React.FC = () => {
  };
  const handleCancelar = async (consultaId: string) => {
    console.log("[AcompanhamentoPaciente] Tentando cancelar consulta:", {
      consultaId,
      tipo: typeof consultaId,
    });
    if (!window.confirm("Tem certeza que deseja cancelar esta consulta?")) {
      return;
    }
    try {
      console.log("[AcompanhamentoPaciente] Chamando appointmentService.update...");
      await appointmentService.update(consultaId, {
        status: "cancelled",
      });
      console.log("[AcompanhamentoPaciente] ✅ Cancelamento bem-sucedido");
      toast.success("Consulta cancelada com sucesso");
      fetchConsultas();
    } catch (error) {
-      console.error("❌ [AcompanhamentoPaciente] Erro ao cancelar consulta:", error);
+      console.error("Erro ao cancelar consulta:", error);
      if (error instanceof Error) {
        toast.error(`Erro ao cancelar consulta: ${error.message}`);
      } else {
      toast.error("Erro ao cancelar consulta. Tente novamente.");
    }
    }
  };
  const todasConsultasProximas = consultas
-    .filter((c) => {
+    .filter((c) => c.status === "agendada" || c.status === "confirmada")
      const isStatusValido = c.status === "agendada" || c.status === "confirmada";
      const dataConsulta = parseDate(c.dataHora);
      const agora = new Date();
      const estaNoFuturo = dataConsulta.getTime() > agora.getTime();
      return isStatusValido && estaNoFuturo;
    })
    .sort(
      (a, b) => new Date(a.dataHora).getTime() - new Date(b.dataHora).getTime()
    );
  const todasConsultasPassadas = consultas
-    .filter((c) => {
+    .filter((c) => c.status === "realizada")
      const isRealizada = c.status === "realizada";
      const dataConsulta = parseDate(c.dataHora);
      const agora = new Date();
      const jaPassou = dataConsulta.getTime() <= agora.getTime();
      // Inclui consultas realizadas OU consultas agendadas/confirmadas que já passaram da data
      return isRealizada || (jaPassou && (c.status === "agendada" || c.status === "confirmada"));
    })
    .sort(
      (a, b) => new Date(b.dataHora).getTime() - new Date(a.dataHora).getTime()
    );
  // Para o dashboard (apenas 3 consultas)
  const consultasProximasDashboard = todasConsultasProximas.slice(0, 3);
  const consultasPassadasDashboard = todasConsultasPassadas.slice(0, 3);
  // Para a página de consultas (com paginação)
  const totalPaginasProximas = Math.ceil(
@ -598,8 +500,6 @@ const AcompanhamentoPaciente: React.FC = () => {
    const especialidade =
      consulta.especialidade || getMedicoEspecialidade(consulta.medicoId);
    const consultaDate = parseDate(consulta.dataHora);
    return (
      <div
        key={consulta._id}
@ -638,14 +538,16 @@ const AcompanhamentoPaciente: React.FC = () => {
            <div className="flex items-center gap-1">
              <Calendar className="h-4 w-4" />
              <span>
-                {format(consultaDate, "dd/MM/yyyy", {
+                {format(new Date(consulta.dataHora), "dd/MM/yyyy", {
                  locale: ptBR,
                })}
              </span>
            </div>
            <div className="flex items-center gap-1">
              <Clock className="h-4 w-4" />
-              <span>{format(consultaDate, "HH:mm", { locale: ptBR })}</span>
+              <span>
                {format(new Date(consulta.dataHora), "HH:mm", { locale: ptBR })}
              </span>
            </div>
            <div className="flex items-center gap-1">
              {consulta.tipoConsulta === "online" ||
@ -717,14 +619,14 @@ const AcompanhamentoPaciente: React.FC = () => {
          {renderStatCard(
            "Próxima Consulta",
            proximaConsulta
-              ? format(parseDate(proximaConsulta.dataHora), "dd MMM", {
+              ? format(new Date(proximaConsulta.dataHora), "dd MMM", {
                  locale: ptBR,
                })
              : "Nenhuma",
            Calendar,
            proximaConsulta
              ? `${getMedicoEspecialidade(proximaConsulta.medicoId)} - ${format(
-                  parseDate(proximaConsulta.dataHora),
+                  new Date(proximaConsulta.dataHora),
                  "HH:mm"
                )}`
              : "Agende uma consulta"
--- a/src/pages/AgendamentoPaciente.tsx
+++ b/src/pages/AgendamentoPaciente.tsx
@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { Calendar, User, FileText, CheckCircle, LogOut } from "lucide-react";
 // import consultaService from "../services/consultaService"; // não utilizado após integração com appointmentService
-import { appointmentService, patientService } from "../services";
+import { appointmentService } from "../services";
 import AvailableSlotsPicker from "../components/agenda/AvailableSlotsPicker";
 import { doctorService } from "../services";
 import toast from "react-hot-toast";
@ -28,7 +28,6 @@ interface Paciente {
 const AgendamentoPaciente: React.FC = () => {
  const [medicos, setMedicos] = useState<Medico[]>([]);
  const [pacienteLogado, setPacienteLogado] = useState<Paciente | null>(null);
  const [patientTableId, setPatientTableId] = useState<string | null>(null); // ID da tabela patients
  const [loading, setLoading] = useState(false);
  const [etapa, setEtapa] = useState(1);
@ -59,35 +58,6 @@ const AgendamentoPaciente: React.FC = () => {
      const paciente = JSON.parse(pacienteData);
      console.log("[AgendamentoPaciente] Paciente logado:", paciente);
      setPacienteLogado(paciente);
      // Buscar o patient.id (ID da tabela) usando o user_id
      const fetchPatientTableId = async () => {
        try {
          const patientData = await patientService.getByUserId(paciente._id);
          console.log(
            "[AgendamentoPaciente] Patient data da tabela:",
            patientData
          );
          if (patientData?.id) {
            setPatientTableId(patientData.id);
            console.log(
              "[AgendamentoPaciente] Patient table ID:",
              patientData.id
            );
          } else {
            console.error(
              "[AgendamentoPaciente] ❌ Paciente não encontrado na tabela"
            );
          }
        } catch (error) {
          console.error(
            "[AgendamentoPaciente] Erro ao buscar patient.id:",
            error
          );
        }
      };
      void fetchPatientTableId();
      void fetchMedicos();
    } catch (error) {
      console.error(
@ -107,7 +77,7 @@ const AgendamentoPaciente: React.FC = () => {
      const doctors = await doctorService.list({ active: true });
      console.log("[AgendamentoPaciente] Médicos recebidos:", doctors);
-      let mapped: Medico[] = doctors.map((m: any) => ({
+      const mapped: Medico[] = doctors.map((m: any) => ({
        _id: m.id,
        nome: m.full_name,
        especialidade: m.specialty || "",
@ -115,11 +85,6 @@ const AgendamentoPaciente: React.FC = () => {
        horarioAtendimento: {},
      }));
      // Ordenar alfabeticamente pelo nome do médico
      mapped = mapped.sort((a, b) =>
        (a.nome || "").localeCompare(b.nome || "", "pt-BR", { sensitivity: "base" })
      );
      console.log("[AgendamentoPaciente] Médicos mapeados:", mapped);
      setMedicos(mapped);
@ -147,32 +112,9 @@ const AgendamentoPaciente: React.FC = () => {
  const confirmarAgendamento = async () => {
    if (!pacienteLogado) return;
    // Verificar se temos o patient.id da tabela
    if (!patientTableId) {
      console.error(
        "[AgendamentoPaciente] ❌ Patient table ID não encontrado!"
      );
      toast.error(
        "Erro: Dados do paciente não carregados. Recarregue a página."
      );
      return;
    }
    try {
      setLoading(true);
      // Verificar se há token de autenticação
      const token = localStorage.getItem("mediconnect_access_token");
      console.log("[AgendamentoPaciente] Token presente?", !!token);
      if (!token) {
        console.error(
          "[AgendamentoPaciente] ❌ Token não encontrado! Redirecionando para login..."
        );
        toast.error("Sessão expirada. Faça login novamente.");
        navigate("/paciente");
        return;
      }
      // NOTE: Removed remote CPF validation to avoid false negatives
      // NOTE: remote CEP validation removed to avoid false negatives
@ -181,38 +123,18 @@ const AgendamentoPaciente: React.FC = () => {
        `${agendamento.data}T${agendamento.horario}:00.000Z`
      );
-      // Payload conforme documentação da API Supabase
+      await appointmentService.create({
-      const payload = {
+        patient_id: pacienteLogado._id,
        doctor_id: agendamento.medicoId,
        patient_id: patientTableId,
        scheduled_at: dataHora.toISOString(),
        duration_minutes: 30,
        created_by: pacienteLogado._id,
      };
      console.log("[AgendamentoPaciente] 📋 Dados para criar consulta:", {
        patient_id: patientTableId,
        patient_user_id: pacienteLogado._id,
        doctor_id: agendamento.medicoId,
        scheduled_at: dataHora.toISOString(),
        chief_complaint: agendamento.motivoConsulta,
-        token_presente: !!token,
+        patient_notes: agendamento.observacoes,
        payload_completo: payload,
      });
      const resultado = await appointmentService.create(payload);
      console.log(
        "[AgendamentoPaciente] ✅ Consulta criada com sucesso:",
        resultado
      );
      toast.success("Consulta agendada com sucesso!");
      setEtapa(4); // Etapa de confirmação
    } catch (error) {
-      console.error(
+      console.error("Erro ao agendar consulta:", error);
        "[AgendamentoPaciente] ❌ Erro ao agendar consulta:",
        error
      );
      toast.error("Erro ao agendar consulta. Tente novamente.");
    } finally {
      setLoading(false);
--- a/src/pages/GerenciarUsuarios.tsx
+++ b/src/pages/GerenciarUsuarios.tsx
@ -15,9 +15,8 @@ import toast from "react-hot-toast";
 import adminUserService, {
  FullUserInfo,
  UpdateUserData,
-  UserRoleRecord,
+  UserRole,
 } from "../services/adminUserService";
 import { userService } from "../services";
 const GerenciarUsuarios: React.FC = () => {
  const [usuarios, setUsuarios] = useState<FullUserInfo[]>([]);
@ -27,7 +26,7 @@ const GerenciarUsuarios: React.FC = () => {
  const [editForm, setEditForm] = useState<UpdateUserData>({});
  const [managingRolesUser, setManagingRolesUser] =
    useState<FullUserInfo | null>(null);
-  const [userRoles, setUserRoles] = useState<UserRoleRecord[]>([]);
+  const [userRoles, setUserRoles] = useState<UserRole[]>([]);
  const [newRole, setNewRole] = useState<string>("");
  const [showCreateModal, setShowCreateModal] = useState(false);
  const [createForm, setCreateForm] = useState({
@ -135,14 +134,8 @@ const GerenciarUsuarios: React.FC = () => {
  };
  const handleCreateUser = async () => {
    console.log(
      "[GerenciarUsuarios] 🚀 Iniciando criação de usuário:",
      createForm
    );
    // Validações básicas
    if (!createForm.email || !createForm.full_name || !createForm.role) {
-      toast.error("Preencha os campos obrigatórios: Email, Nome e Role");
+      toast.error("Preencha os campos obrigatórios");
      return;
    }
@ -162,24 +155,48 @@ const GerenciarUsuarios: React.FC = () => {
    }
    try {
-      if (createForm.usePassword) {
+      const endpoint = createForm.usePassword
-        // Criar usuário com senha usando userService
+        ? "/functions/v1/create-user-with-password"
-        console.log("[GerenciarUsuarios] 📤 Criando usuário com senha...");
+        : "/functions/v1/create-user";
-        const result = await userService.createUserWithPassword({
+      const payload: any = {
        email: createForm.email,
          password: createForm.password,
        full_name: createForm.full_name,
          phone: createForm.phone_mobile || undefined,
        role: createForm.role,
-          create_patient_record: createForm.create_patient_record,
+      };
          cpf: createForm.cpf || undefined,
          phone_mobile: createForm.phone_mobile || undefined,
        });
-        console.log("[GerenciarUsuarios] ✅ Usuário criado:", result);
+      if (createForm.usePassword) {
        payload.password = createForm.password;
      }
-        if (result.success) {
+      if (createForm.phone_mobile) {
        payload.phone_mobile = createForm.phone_mobile;
      }
      if (createForm.create_patient_record) {
        payload.create_patient_record = true;
        payload.cpf = createForm.cpf;
      }
      const response = await fetch(
        `https://yuanqfswhberkoevtmfr.supabase.co${endpoint}`,
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
            apikey:
              "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Inl1YW5xZnN3aGJlcmtvZXZ0bWZyIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NTQ5NTQzNjksImV4cCI6MjA3MDUzMDM2OX0.g8Fm4XAvtX46zifBZnYVH4tVuQkqUH6Ia9CXQj4DztQ",
            Authorization: `Bearer ${localStorage.getItem(
              "mediconnect_access_token"
            )}`,
          },
          body: JSON.stringify(payload),
        }
      );
      const data = await response.json();
      if (response.ok) {
        toast.success("Usuário criado com sucesso!");
        setShowCreateModal(false);
        setCreateForm({
@ -194,58 +211,11 @@ const GerenciarUsuarios: React.FC = () => {
        });
        carregarUsuarios();
      } else {
-          toast.error(result.message || "Erro ao criar usuário");
+        toast.error(data.message || data.error || "Erro ao criar usuário");
        }
      } else {
        // Criar usuário sem senha (Magic Link)
        console.log("[GerenciarUsuarios] <20> Criando usuário com Magic Link...");
        const result = await userService.createUser(
          {
            email: createForm.email,
            full_name: createForm.full_name,
            phone: createForm.phone_mobile || undefined,
            role: createForm.role,
          },
          false // isPublicRegistration = false (admin criando)
        );
        console.log("[GerenciarUsuarios] ✅ Usuário criado:", result);
        toast.success(
          "Usuário criado com sucesso! Magic Link enviado por email."
        );
        setShowCreateModal(false);
        setCreateForm({
          email: "",
          password: "",
          full_name: "",
          phone_mobile: "",
          cpf: "",
          role: "",
          create_patient_record: false,
          usePassword: true,
        });
        carregarUsuarios();
      }
    } catch (error) {
-      console.error("[GerenciarUsuarios] ❌ Erro ao criar usuário:", error);
+      console.error("Erro ao criar usuário:", error);
-
+      toast.error("Erro ao criar usuário");
      // Tratamento de erros mais específico
      let errorMessage = "Erro ao criar usuário";
      if (error && typeof error === "object" && "response" in error) {
        const axiosError = error as any;
        if (axiosError.response?.data?.message) {
          errorMessage = axiosError.response.data.message;
        } else if (axiosError.response?.data?.error) {
          errorMessage = axiosError.response.data.error;
        } else if (axiosError.message) {
          errorMessage = axiosError.message;
        }
      }
      toast.error(errorMessage);
    }
  };
@ -619,8 +589,7 @@ const GerenciarUsuarios: React.FC = () => {
                      <button
                        onClick={async () => {
                          const result = await adminUserService.removeUserRole(
-                            managingRolesUser.user.id,
+                            userRole.id
                            userRole.role
                          );
                          if (result.success) {
                            toast.success("Role removido com sucesso!");
@ -938,3 +907,5 @@ const GerenciarUsuarios: React.FC = () => {
 };
 export default GerenciarUsuarios;
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@ -203,7 +203,7 @@ const Home: React.FC = () => {
          ctaAriaLabel={i18n.t(
            "home.actionCards.scheduleAppointment.ctaAriaLabel"
          )}
-          onAction={() => handleCTA("Card Agendar", "/login")}
+          onAction={() => handleCTA("Card Agendar", "/paciente")}
        />
        <ActionCard
@ -214,7 +214,7 @@ const Home: React.FC = () => {
          description={i18n.t("home.actionCards.doctorPanel.description")}
          ctaLabel={i18n.t("home.actionCards.doctorPanel.cta")}
          ctaAriaLabel={i18n.t("home.actionCards.doctorPanel.ctaAriaLabel")}
-          onAction={() => handleCTA("Card Médico", "/login")}
+          onAction={() => handleCTA("Card Médico", "/login-medico")}
        />
        <ActionCard
@ -227,7 +227,7 @@ const Home: React.FC = () => {
          ctaAriaLabel={i18n.t(
            "home.actionCards.patientManagement.ctaAriaLabel"
          )}
-          onAction={() => handleCTA("Card Secretaria", "/login")}
+          onAction={() => handleCTA("Card Secretaria", "/login-secretaria")}
        />
      </div>
    </div>
--- a/src/pages/LandingPage.tsx
+++ b/src/pages/LandingPage.tsx
@ -1,916 +0,0 @@
 /**
 * Landing Page - MediConnect
 * Página inicial moderna e profissional do sistema
 * @version 1.0
 */
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import Logo from "../components/images/logo.PNG";
 import {
  Calendar,
  Users,
  BarChart3,
  Bell,
  Clock,
  FileText,
  CheckCircle,
  ArrowRight,
  Shield,
  Cloud,
  Smartphone,
  MessageSquare,
  Database,
  Headphones,
  Menu,
  X,
  Activity,
  Heart,
  Stethoscope,
  TrendingUp,
  Zap,
  Target,
 } from "lucide-react";
 export default function LandingPage() {
  const navigate = useNavigate();
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  const scrollToSection = (id: string) => {
    const element = document.getElementById(id);
    if (element) {
      element.scrollIntoView({ behavior: "smooth" });
      setMobileMenuOpen(false);
    }
  };
  return (
    <div className="min-h-screen bg-white dark:bg-gray-900">
      {/* Header/Navigation */}
      <header className="fixed top-0 w-full bg-white/95 dark:bg-gray-900/95 backdrop-blur-sm shadow-sm z-50">
        <nav className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex items-center justify-between h-16">
            {/* Logo */}
            <div className="flex items-center gap-2">
              <img
                src={Logo}
                alt="MediConnect"
                className="h-12 w-12 rounded-lg object-contain shadow-sm"
              />
              <div>
                <span className="text-lg font-bold text-gray-900 dark:text-white">
                  MediConnect
                </span>
                <p className="text-xs text-gray-500 dark:text-gray-400">
                  Gestão Médica
                </p>
              </div>
            </div>
            {/* Desktop Navigation */}
            <div className="hidden md:flex items-center gap-8">
              <button
                onClick={() => scrollToSection("features")}
                className="text-gray-600 dark:text-gray-300 hover:text-emerald-600 dark:hover:text-emerald-400 transition-colors"
              >
                Recursos
              </button>
              <button
                onClick={() => scrollToSection("how-it-works")}
                className="text-gray-600 dark:text-gray-300 hover:text-emerald-600 dark:hover:text-emerald-400 transition-colors"
              >
                Como Funciona
              </button>
              <button
                onClick={() => scrollToSection("users")}
                className="text-gray-600 dark:text-gray-300 hover:text-emerald-600 dark:hover:text-emerald-400 transition-colors"
              >
                Para Quem
              </button>
              <button
                onClick={() => navigate("/login")}
                className="text-gray-600 dark:text-gray-300 hover:text-emerald-600 dark:hover:text-emerald-400 transition-colors"
              >
                Entrar
              </button>
              <button
                onClick={() => navigate("/login")}
                className="px-6 py-2 bg-gradient-to-r from-emerald-500 to-teal-600 text-white rounded-lg hover:shadow-lg transition-shadow font-medium"
              >
                Começar Grátis
              </button>
            </div>
            {/* Mobile Menu Button */}
            <button
              onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
              className="md:hidden p-2 text-gray-600 dark:text-gray-300"
            >
              {mobileMenuOpen ? (
                <X className="h-6 w-6" />
              ) : (
                <Menu className="h-6 w-6" />
              )}
            </button>
          </div>
          {/* Mobile Menu */}
          {mobileMenuOpen && (
            <div className="md:hidden py-4 border-t border-gray-200 dark:border-gray-700">
              <div className="flex flex-col gap-4">
                <button
                  onClick={() => scrollToSection("features")}
                  className="text-left text-gray-600 dark:text-gray-300 hover:text-emerald-600"
                >
                  Recursos
                </button>
                <button
                  onClick={() => scrollToSection("how-it-works")}
                  className="text-left text-gray-600 dark:text-gray-300 hover:text-emerald-600"
                >
                  Como Funciona
                </button>
                <button
                  onClick={() => scrollToSection("users")}
                  className="text-left text-gray-600 dark:text-gray-300 hover:text-emerald-600"
                >
                  Para Quem
                </button>
                <button
                  onClick={() => navigate("/login")}
                  className="text-left text-gray-600 dark:text-gray-300 hover:text-emerald-600"
                >
                  Entrar
                </button>
                <button
                  onClick={() => navigate("/login")}
                  className="px-6 py-2 bg-gradient-to-r from-emerald-500 to-teal-600 text-white rounded-lg font-medium"
                >
                  Começar Grátis
                </button>
              </div>
            </div>
          )}
        </nav>
      </header>
      {/* Hero Section */}
      <section className="pt-32 pb-20 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-blue-50 via-purple-50 to-pink-50 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900">
        <div className="max-w-7xl mx-auto">
          <div className="grid lg:grid-cols-2 gap-12 items-center">
            {/* Left Content */}
            <div className="space-y-8">
              <div className="inline-flex items-center gap-2 px-4 py-2 bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 rounded-full text-sm font-medium">
                <Zap className="h-4 w-4" />
                Sistema de Gestão Médica Inteligente
              </div>
              <h1 className="text-5xl lg:text-6xl font-bold text-gray-900 dark:text-white leading-tight">
                MediConnect
                <span className="block text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-purple-600">
                  Gestão Médica Simplificada
                </span>
              </h1>
              <p className="text-xl text-gray-600 dark:text-gray-300 leading-relaxed">
                Sistema completo de agendamento e acompanhamento de consultas
                médicas. Automatize sua agenda, reduza no-shows e foque no que
                importa: cuidar dos pacientes.
              </p>
              <div className="flex flex-col sm:flex-row gap-4">
                <button
                  onClick={() => navigate("/login")}
                  className="group px-8 py-4 bg-gradient-to-r from-blue-600 to-purple-600 text-white rounded-xl hover:shadow-xl transition-all font-semibold flex items-center justify-center gap-2"
                >
                  Começar Agora
                  <ArrowRight className="h-5 w-5 group-hover:translate-x-1 transition-transform" />
                </button>
                <button
                  onClick={() => scrollToSection("features")}
                  className="px-8 py-4 border-2 border-blue-600 text-blue-600 dark:text-blue-400 rounded-xl hover:bg-blue-50 dark:hover:bg-blue-900/20 transition-colors font-semibold"
                >
                  Ver Demonstração
                </button>
              </div>
              {/* Floating Feature Icons */}
              <div className="flex flex-wrap gap-4 pt-8">
                <div className="flex items-center gap-2 px-4 py-2 bg-white dark:bg-gray-800 rounded-lg shadow-md">
                  <Calendar className="h-5 w-5 text-blue-600" />
                  <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
                    Agenda Inteligente
                  </span>
                </div>
                <div className="flex items-center gap-2 px-4 py-2 bg-white dark:bg-gray-800 rounded-lg shadow-md">
                  <Activity className="h-5 w-5 text-purple-600" />
                  <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
                    Analytics em Tempo Real
                  </span>
                </div>
                <div className="flex items-center gap-2 px-4 py-2 bg-white dark:bg-gray-800 rounded-lg shadow-md">
                  <Bell className="h-5 w-5 text-pink-600" />
                  <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
                    Notificações Automáticas
                  </span>
                </div>
              </div>
            </div>
            {/* Right Illustration */}
            <div className="relative">
              <div className="relative bg-gradient-to-br from-blue-100 to-purple-100 dark:from-blue-900/20 dark:to-purple-900/20 rounded-3xl p-8 shadow-2xl">
                {/* Mockup Dashboard */}
                <div className="bg-white dark:bg-gray-800 rounded-2xl shadow-xl overflow-hidden">
                  <div className="bg-gradient-to-r from-blue-600 to-purple-600 px-6 py-4 flex items-center gap-3">
                    <div className="flex gap-2">
                      <div className="w-3 h-3 bg-white/30 rounded-full"></div>
                      <div className="w-3 h-3 bg-white/30 rounded-full"></div>
                      <div className="w-3 h-3 bg-white/30 rounded-full"></div>
                    </div>
                    <div className="flex-1 bg-white/20 rounded px-4 py-1 text-white text-sm">
                      mediconnectbrasilapp.com
                    </div>
                  </div>
                  <div className="p-6 space-y-4">
                    <div className="flex items-center gap-4">
                      <div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full"></div>
                      <div className="flex-1 space-y-2">
                        <div className="h-3 bg-gray-200 dark:bg-gray-700 rounded w-3/4"></div>
                        <div className="h-2 bg-gray-100 dark:bg-gray-800 rounded w-1/2"></div>
                      </div>
                    </div>
                    <div className="grid grid-cols-3 gap-4">
                      <div className="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-4 space-y-2">
                        <Calendar className="h-6 w-6 text-blue-600" />
                        <div className="h-2 bg-blue-200 dark:bg-blue-800 rounded w-full"></div>
                      </div>
                      <div className="bg-purple-50 dark:bg-purple-900/20 rounded-lg p-4 space-y-2">
                        <Users className="h-6 w-6 text-purple-600" />
                        <div className="h-2 bg-purple-200 dark:bg-purple-800 rounded w-full"></div>
                      </div>
                      <div className="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-4 space-y-2">
                        <BarChart3 className="h-6 w-6 text-blue-600" />
                        <div className="h-2 bg-blue-200 dark:bg-blue-800 rounded w-full"></div>
                      </div>
                    </div>
                    <div className="space-y-3">
                      {[1, 2, 3].map((i) => (
                        <div
                          key={i}
                          className="flex items-center gap-3 p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg"
                        >
                          <div className="w-10 h-10 bg-gray-200 dark:bg-gray-600 rounded-full"></div>
                          <div className="flex-1 space-y-2">
                            <div className="h-2 bg-gray-200 dark:bg-gray-600 rounded w-full"></div>
                            <div className="h-2 bg-gray-100 dark:bg-gray-700 rounded w-2/3"></div>
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>
                </div>
                {/* Floating Stats */}
                <div className="absolute -right-4 -top-4 bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-4 animate-pulse">
                  <div className="flex items-center gap-3">
                    <div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center">
                      <TrendingUp className="h-6 w-6 text-white" />
                    </div>
                    <div>
                      <div className="text-2xl font-bold text-gray-900 dark:text-white">
                        98%
                      </div>
                      <div className="text-sm text-gray-600 dark:text-gray-400">
                        Satisfação
                      </div>
                    </div>
                  </div>
                </div>
                <div className="absolute -left-4 bottom-8 bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-4">
                  <div className="flex items-center gap-3">
                    <div className="w-12 h-12 bg-gradient-to-br from-purple-400 to-pink-500 rounded-full flex items-center justify-center">
                      <Users className="h-6 w-6 text-white" />
                    </div>
                    <div>
                      <div className="text-2xl font-bold text-gray-900 dark:text-white">
                        2.5k+
                      </div>
                      <div className="text-sm text-gray-600 dark:text-gray-400">
                        Consultas
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      {/* Trust Indicators Bar */}
      <section className="py-12 bg-white dark:bg-gray-800 border-y border-gray-200 dark:border-gray-700">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-2 lg:grid-cols-4 gap-8">
            <div className="text-center">
              <div className="text-4xl font-bold text-blue-600 dark:text-blue-400">
                2.500+
              </div>
              <div className="text-gray-600 dark:text-gray-400 mt-2">
                Consultas Agendadas
              </div>
            </div>
            <div className="text-center">
              <div className="text-4xl font-bold text-purple-600 dark:text-purple-400">
                150+
              </div>
              <div className="text-gray-600 dark:text-gray-400 mt-2">
                Médicos Ativos
              </div>
            </div>
            <div className="text-center">
              <div className="text-4xl font-bold text-pink-600 dark:text-pink-400">
                98%
              </div>
              <div className="text-gray-600 dark:text-gray-400 mt-2">
                Satisfação
              </div>
            </div>
            <div className="text-center">
              <div className="text-4xl font-bold text-purple-600 dark:text-purple-400">
                24/7
              </div>
              <div className="text-gray-600 dark:text-gray-400 mt-2">
                Suporte
              </div>
            </div>
          </div>
        </div>
      </section>
      {/* Features Section */}
      <section
        id="features"
        className="py-24 px-4 sm:px-6 lg:px-8 bg-gray-50 dark:bg-gray-900"
      >
        <div className="max-w-7xl mx-auto">
          <div className="text-center mb-16">
            <h2 className="text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-4">
              Recursos Principais
            </h2>
            <p className="text-xl text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
              Tudo que você precisa para gerenciar sua prática médica de forma
              eficiente
            </p>
          </div>
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            {/* Feature 1 */}
            <div className="group bg-white dark:bg-gray-800 rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all hover:-translate-y-1">
              <div className="w-14 h-14 bg-gradient-to-br from-blue-500 to-cyan-600 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                <Calendar className="h-7 w-7 text-white" />
              </div>
              <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-3">
                Agendamento Inteligente
              </h3>
              <p className="text-gray-600 dark:text-gray-300">
                Sistema automatizado de marcação de consultas com verificação de
                disponibilidade em tempo real e prevenção de conflitos.
              </p>
            </div>
            {/* Feature 2 */}
            <div className="group bg-white dark:bg-gray-800 rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all hover:-translate-y-1">
              <div className="w-14 h-14 bg-gradient-to-br from-purple-400 to-pink-500 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                <Users className="h-7 w-7 text-white" />
              </div>
              <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-3">
                Gestão de Pacientes
              </h3>
              <p className="text-gray-600 dark:text-gray-300">
                Prontuários digitais completos com histórico médico, exames e
                acompanhamento personalizado de cada paciente.
              </p>
            </div>
            {/* Feature 3 */}
            <div className="group bg-white dark:bg-gray-800 rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all hover:-translate-y-1">
              <div className="w-14 h-14 bg-gradient-to-br from-blue-400 to-indigo-500 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                <BarChart3 className="h-7 w-7 text-white" />
              </div>
              <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-3">
                Dashboard Analítico
              </h3>
              <p className="text-gray-600 dark:text-gray-300">
                Métricas em tempo real sobre ocupação, receita, taxa de
                comparecimento e produtividade da sua prática.
              </p>
            </div>
            {/* Feature 4 */}
            <div className="group bg-white dark:bg-gray-800 rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all hover:-translate-y-1">
              <div className="w-14 h-14 bg-gradient-to-br from-orange-400 to-red-500 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                <Bell className="h-7 w-7 text-white" />
              </div>
              <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-3">
                Notificações Automáticas
              </h3>
              <p className="text-gray-600 dark:text-gray-300">
                Lembretes via SMS e e-mail para pacientes e médicos sobre
                consultas agendadas, reduzindo no-shows em até 40%.
              </p>
            </div>
            {/* Feature 5 */}
            <div className="group bg-white dark:bg-gray-800 rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all hover:-translate-y-1">
              <div className="w-14 h-14 bg-gradient-to-br from-teal-400 to-cyan-500 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                <Clock className="h-7 w-7 text-white" />
              </div>
              <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-3">
                Sala de Espera Virtual
              </h3>
              <p className="text-gray-600 dark:text-gray-300">
                Check-in digital e visualização de pacientes aguardando
                atendimento em tempo real para melhor gestão do fluxo.
              </p>
            </div>
            {/* Feature 6 */}
            <div className="group bg-white dark:bg-gray-800 rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all hover:-translate-y-1">
              <div className="w-14 h-14 bg-gradient-to-br from-violet-400 to-purple-500 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                <FileText className="h-7 w-7 text-white" />
              </div>
              <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-3">
                Relatórios Médicos
              </h3>
              <p className="text-gray-600 dark:text-gray-300">
                Geração automatizada de relatórios, prescrições e documentos
                médicos com templates personalizáveis.
              </p>
            </div>
          </div>
        </div>
      </section>
      {/* How It Works Section */}
      <section
        id="how-it-works"
        className="py-24 px-4 sm:px-6 lg:px-8 bg-white dark:bg-gray-800"
      >
        <div className="max-w-7xl mx-auto">
          <div className="text-center mb-16">
            <h2 className="text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-4">
              Como Funciona
            </h2>
            <p className="text-xl text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
              Comece a usar o MediConnect em 4 passos simples
            </p>
          </div>
          <div className="relative">
            {/* Timeline Line */}
            <div className="hidden lg:block absolute top-1/2 left-0 right-0 h-1 bg-gradient-to-r from-emerald-200 via-teal-200 to-blue-200 dark:from-emerald-900 dark:via-teal-900 dark:to-blue-900 transform -translate-y-1/2"></div>
            <div className="grid lg:grid-cols-4 gap-8 lg:gap-4 relative">
              {/* Step 1 */}
              <div className="text-center">
                <div className="relative inline-flex items-center justify-center w-20 h-20 bg-gradient-to-br from-blue-500 to-cyan-600 rounded-full mb-6 shadow-lg">
                  <span className="text-3xl font-bold text-white">1</span>
                </div>
                <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-3">
                  Cadastro Rápido
                </h3>
                <p className="text-gray-600 dark:text-gray-300">
                  Crie sua conta em menos de 2 minutos. Gratuito para começar,
                  sem cartão de crédito.
                </p>
              </div>
              {/* Step 2 */}
              <div className="text-center">
                <div className="relative inline-flex items-center justify-center w-20 h-20 bg-gradient-to-br from-purple-500 to-pink-600 rounded-full mb-6 shadow-lg">
                  <span className="text-3xl font-bold text-white">2</span>
                </div>
                <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-3">
                  Configure Disponibilidade
                </h3>
                <p className="text-gray-600 dark:text-gray-300">
                  Defina seus horários de atendimento, tipos de consulta e
                  durações em minutos.
                </p>
              </div>
              {/* Step 3 */}
              <div className="text-center">
                <div className="relative inline-flex items-center justify-center w-20 h-20 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-full mb-6 shadow-lg">
                  <span className="text-3xl font-bold text-white">3</span>
                </div>
                <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-3">
                  Receba Agendamentos
                </h3>
                <p className="text-gray-600 dark:text-gray-300">
                  Pacientes agendam online 24/7. Você é notificado
                  automaticamente por SMS e e-mail.
                </p>
              </div>
              {/* Step 4 */}
              <div className="text-center">
                <div className="relative inline-flex items-center justify-center w-20 h-20 bg-gradient-to-br from-purple-500 to-pink-600 rounded-full mb-6 shadow-lg">
                  <span className="text-3xl font-bold text-white">4</span>
                </div>
                <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-3">
                  Gerencie e Atenda
                </h3>
                <p className="text-gray-600 dark:text-gray-300">
                  Acesse prontuários, gere relatórios e acompanhe suas métricas
                  em tempo real.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>
      {/* User Personas Section */}
      <section
        id="users"
        className="py-24 px-4 sm:px-6 lg:px-8 bg-gray-50 dark:bg-gray-900"
      >
        <div className="max-w-7xl mx-auto">
          <div className="text-center mb-16">
            <h2 className="text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-4">
              Para Quem é o MediConnect
            </h2>
            <p className="text-xl text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
              Soluções personalizadas para cada tipo de usuário
            </p>
          </div>
          <div className="grid lg:grid-cols-3 gap-8">
            {/* Médicos */}
            <div className="bg-white dark:bg-gray-800 rounded-2xl p-8 shadow-xl">
              <div className="w-16 h-16 bg-gradient-to-br from-blue-500 to-cyan-600 rounded-2xl flex items-center justify-center mb-6">
                <Stethoscope className="h-8 w-8 text-white" />
              </div>
              <h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
                Médicos
              </h3>
              <ul className="space-y-3">
                {[
                  "Agenda organizada automaticamente",
                  "Acesso rápido a prontuários",
                  "Redução de no-shows em 40%",
                  "Dashboard com métricas de desempenho",
                  "Prescrições e relatórios digitais",
                  "Notificações em tempo real",
                ].map((benefit, i) => (
                  <li key={i} className="flex items-start gap-3">
                    <CheckCircle className="h-5 w-5 text-blue-600 dark:text-blue-400 flex-shrink-0 mt-0.5" />
                    <span className="text-gray-600 dark:text-gray-300">
                      {benefit}
                    </span>
                  </li>
                ))}
              </ul>
            </div>
            {/* Clínicas */}
            <div className="bg-white dark:bg-gray-800 rounded-2xl p-8 shadow-xl">
              <div className="w-16 h-16 bg-gradient-to-br from-purple-400 to-pink-500 rounded-2xl flex items-center justify-center mb-6">
                <Target className="h-8 w-8 text-white" />
              </div>
              <h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
                Clínicas e Consultórios
              </h3>
              <ul className="space-y-3">
                {[
                  "Gestão multi-médico integrada",
                  "Controle financeiro completo",
                  "Relatórios administrativos",
                  "Sistema de secretaria virtual",
                  "Agendamento online para pacientes",
                  "Analytics e insights de negócio",
                ].map((benefit, i) => (
                  <li key={i} className="flex items-start gap-3">
                    <CheckCircle className="h-5 w-5 text-purple-600 dark:text-purple-400 flex-shrink-0 mt-0.5" />
                    <span className="text-gray-600 dark:text-gray-300">
                      {benefit}
                    </span>
                  </li>
                ))}
              </ul>
            </div>
            {/* Pacientes */}
            <div className="bg-white dark:bg-gray-800 rounded-2xl p-8 shadow-xl">
              <div className="w-16 h-16 bg-gradient-to-br from-pink-400 to-purple-500 rounded-2xl flex items-center justify-center mb-6">
                <Heart className="h-8 w-8 text-white" />
              </div>
              <h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
                Pacientes
              </h3>
              <ul className="space-y-3">
                {[
                  "Agendamento online 24/7",
                  "Lembretes automáticos por SMS",
                  "Histórico médico acessível",
                  "Check-in digital sem filas",
                  "Acesso a exames e relatórios",
                  "Comunicação direta com médico",
                ].map((benefit, i) => (
                  <li key={i} className="flex items-start gap-3">
                    <CheckCircle className="h-5 w-5 text-pink-600 dark:text-pink-400 flex-shrink-0 mt-0.5" />
                    <span className="text-gray-600 dark:text-gray-300">
                      {benefit}
                    </span>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </section>
      {/* Technology Section */}
      <section className="py-24 px-4 sm:px-6 lg:px-8 bg-white dark:bg-gray-800">
        <div className="max-w-7xl mx-auto">
          <div className="text-center mb-16">
            <h2 className="text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-4">
              Tecnologia de Ponta
            </h2>
            <p className="text-xl text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
              Segurança, confiabilidade e performance garantidas
            </p>
          </div>
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            {[
              {
                icon: Cloud,
                title: "Cloud-Based",
                description:
                  "Acesse de qualquer lugar, em qualquer dispositivo. Dados seguros na nuvem.",
                color: "from-blue-400 to-cyan-500",
              },
              {
                icon: Shield,
                title: "Segurança LGPD",
                description:
                  "Conformidade total com LGPD. Seus dados e dos pacientes protegidos.",
                color: "from-blue-400 to-cyan-500",
              },
              {
                icon: Smartphone,
                title: "Mobile-Friendly",
                description:
                  "Design responsivo para tablet, celular e desktop. Use em movimento.",
                color: "from-purple-400 to-pink-500",
              },
              {
                icon: MessageSquare,
                title: "Integração SMS",
                description:
                  "Envio automático de confirmações e lembretes por SMS para pacientes.",
                color: "from-orange-400 to-red-500",
              },
              {
                icon: Database,
                title: "Backup Automático",
                description:
                  "Dados protegidos com backup diário automático. Nunca perca informações.",
                color: "from-indigo-400 to-purple-500",
              },
              {
                icon: Headphones,
                title: "Suporte 24/7",
                description:
                  "Equipe dedicada disponível sempre que você precisar de ajuda.",
                color: "from-teal-400 to-cyan-500",
              },
            ].map((tech, i) => (
              <div
                key={i}
                className="bg-gray-50 dark:bg-gray-900 rounded-xl p-6 hover:shadow-lg transition-shadow"
              >
                <div
                  className={`w-12 h-12 bg-gradient-to-br ${tech.color} rounded-lg flex items-center justify-center mb-4`}
                >
                  <tech.icon className="h-6 w-6 text-white" />
                </div>
                <h3 className="text-lg font-bold text-gray-900 dark:text-white mb-2">
                  {tech.title}
                </h3>
                <p className="text-gray-600 dark:text-gray-300 text-sm">
                  {tech.description}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>
      {/* CTA Section */}
      <section className="py-24 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-blue-600 via-purple-600 to-pink-600">
        <div className="max-w-4xl mx-auto text-center">
          <h2 className="text-4xl lg:text-5xl font-bold text-white mb-6">
            Comece Grátis Hoje
          </h2>
          <p className="text-xl text-blue-50 mb-8">
            Sem cartão de crédito. Sem compromisso. 14 dias de teste grátis.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center items-center mb-8">
            <button
              onClick={() => navigate("/login")}
              className="px-10 py-4 bg-white text-blue-600 rounded-xl hover:bg-blue-50 transition-colors font-bold text-lg shadow-xl"
            >
              Criar Conta Grátis
            </button>
            <button
              onClick={() => scrollToSection("features")}
              className="px-10 py-4 border-2 border-white text-white rounded-xl hover:bg-white/10 transition-colors font-bold text-lg"
            >
              Saber Mais
            </button>
          </div>
          <div className="flex items-center justify-center gap-8 text-blue-50">
            <div className="flex items-center gap-2">
              <CheckCircle className="h-5 w-5" />
              <span>14 dias grátis</span>
            </div>
            <div className="flex items-center gap-2">
              <CheckCircle className="h-5 w-5" />
              <span>Cancele quando quiser</span>
            </div>
          </div>
        </div>
      </section>
      {/* Footer */}
      <footer className="bg-gray-900 dark:bg-black text-gray-300 py-12 px-4 sm:px-6 lg:px-8">
        <div className="max-w-7xl mx-auto">
          <div className="grid md:grid-cols-4 gap-8 mb-8">
            {/* Brand */}
            <div className="md:col-span-1">
              <div className="flex items-center gap-2 mb-4">
                <img
                  src={Logo}
                  alt="MediConnect"
                  className="h-10 w-10 rounded-lg object-contain"
                />
                <span className="text-xl font-bold text-white">
                  MediConnect
                </span>
              </div>
              <p className="text-sm text-gray-400">
                Gestão médica simplificada para profissionais que querem focar
                no que importa.
              </p>
            </div>
            {/* Product */}
            <div>
              <h4 className="font-bold text-white mb-4">Produto</h4>
              <ul className="space-y-2 text-sm">
                <li>
                  <button
                    onClick={() => scrollToSection("features")}
                    className="hover:text-blue-400 transition-colors"
                  >
                    Recursos
                  </button>
                </li>
                <li>
                  <button
                    onClick={() => scrollToSection("how-it-works")}
                    className="hover:text-blue-400 transition-colors"
                  >
                    Como Funciona
                  </button>
                </li>
                <li>
                  <button
                    onClick={() => scrollToSection("users")}
                    className="hover:text-emerald-400 transition-colors"
                  >
                    Para Quem
                  </button>
                </li>
                <li>
                  <a
                    href="#"
                    className="hover:text-emerald-400 transition-colors"
                  >
                    Preços
                  </a>
                </li>
              </ul>
            </div>
            {/* Support */}
            <div>
              <h4 className="font-bold text-white mb-4">Suporte</h4>
              <ul className="space-y-2 text-sm">
                <li>
                  <a
                    href="#"
                    className="hover:text-emerald-400 transition-colors"
                  >
                    Documentação
                  </a>
                </li>
                <li>
                  <a
                    href="#"
                    className="hover:text-emerald-400 transition-colors"
                  >
                    Tutoriais
                  </a>
                </li>
                <li>
                  <a
                    href="#"
                    className="hover:text-emerald-400 transition-colors"
                  >
                    FAQ
                  </a>
                </li>
                <li>
                  <a
                    href="#"
                    className="hover:text-emerald-400 transition-colors"
                  >
                    Contato
                  </a>
                </li>
              </ul>
            </div>
            {/* Company */}
            <div>
              <h4 className="font-bold text-white mb-4">Empresa</h4>
              <ul className="space-y-2 text-sm">
                <li>
                  <a
                    href="#"
                    className="hover:text-emerald-400 transition-colors"
                  >
                    Sobre
                  </a>
                </li>
                <li>
                  <a
                    href="#"
                    className="hover:text-emerald-400 transition-colors"
                  >
                    Blog
                  </a>
                </li>
                <li>
                  <a
                    href="#"
                    className="hover:text-emerald-400 transition-colors"
                  >
                    Carreiras
                  </a>
                </li>
                <li>
                  <a
                    href="#"
                    className="hover:text-emerald-400 transition-colors"
                  >
                    Privacidade
                  </a>
                </li>
              </ul>
            </div>
          </div>
          {/* Bottom Bar */}
          <div className="pt-8 border-t border-gray-800 flex flex-col sm:flex-row justify-between items-center gap-4">
            <p className="text-sm text-gray-400">
              © 2025 MediConnect. Todos os direitos reservados.
            </p>
            <div className="flex gap-4">
              {[
                { icon: "📘", label: "Facebook" },
                { icon: "📸", label: "Instagram" },
                { icon: "🐦", label: "Twitter" },
                { icon: "💼", label: "LinkedIn" },
              ].map((social, i) => (
                <button
                  key={i}
                  className="w-8 h-8 bg-gray-800 hover:bg-gray-700 rounded-lg flex items-center justify-center transition-colors"
                  aria-label={social.label}
                >
                  {social.icon}
                </button>
              ))}
            </div>
          </div>
        </div>
      </footer>
    </div>
  );
 }
--- a/src/pages/ListaMedicos.tsx
+++ b/src/pages/ListaMedicos.tsx
@ -1,16 +1,16 @@
 import React, { useEffect, useState } from "react";
-import { Avatar } from "../components/ui/Avatar";
+import AvatarInitials from "../components/AvatarInitials";
 import { Stethoscope, Mail, Phone, AlertTriangle } from "lucide-react";
 import { doctorService } from "../services";
 interface MedicoDetalhado {
  id: string;
  user_id?: string | null;
  nome: string;
  especialidade: string;
  crm: string;
  email: string;
  telefone?: string;
  avatar_url?: string;
 }
 const ListaMedicos: React.FC = () => {
@ -32,25 +32,15 @@ const ListaMedicos: React.FC = () => {
        }
        if (!cancelled) {
          // Mapear para o formato esperado pelo componente
-          const medicosFormatados = list.map((doctor) => {
+          const medicosFormatados = list.map((doctor) => ({
            // Log para debug
            console.log("[ListaMedicos] Médico:", {
            id: doctor.id,
              name: doctor.full_name,
              user_id: doctor.user_id,
              has_user_id: !!doctor.user_id,
            });
            return {
              id: doctor.id,
              user_id: doctor.user_id,
            nome: doctor.full_name,
            especialidade: doctor.specialty || "Não informado",
            crm: doctor.crm,
            email: doctor.email,
            telefone: doctor.phone_mobile || "",
-            };
+            avatar_url: undefined,
-          });
+          }));
          setMedicos(medicosFormatados);
        }
      } catch (e) {
@ -111,12 +101,17 @@ const ListaMedicos: React.FC = () => {
              >
                {/* Header do Card */}
                <header className="flex items-center gap-2 sm:gap-3">
-                  <Avatar
+                  {medico.avatar_url ? (
-                    src={medico.user_id ? { id: medico.user_id } : undefined}
+                    <img
-                    name={medico.nome}
+                      src={medico.avatar_url}
-                    size="md"
+                      alt={medico.nome}
-                    color="green"
+                      className="h-8 w-8 sm:h-10 sm:w-10 rounded-full object-cover border flex-shrink-0"
                    />
                  ) : (
                    <div className="flex-shrink-0">
                      <AvatarInitials name={medico.nome} size={40} />
                    </div>
                  )}
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center gap-1.5 mb-1">
                      <Stethoscope className="w-4 h-4 text-indigo-600 flex-shrink-0" />
--- a/src/pages/ListaPacientes.tsx
+++ b/src/pages/ListaPacientes.tsx
@ -1,15 +1,5 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
-import { Avatar } from "../components/ui/Avatar";
+import AvatarInitials from "../components/AvatarInitials";
 import { Users, Mail, Phone } from "lucide-react";
 import { usePatients } from "../hooks/usePatients";
 import {
  SkeletonPatientList,
  EmptyPatientList,
 } from "../components/ui/EmptyState";
 import type { Patient } from "../services/patients/types";
 type Paciente = Patient;
 // Funções utilitárias para formatação
 function formatCPF(cpf?: string) {
  if (!cpf) return "Não informado";
@ -33,10 +23,39 @@ function formatEmail(email?: string) {
  if (!email) return "Não informado";
  return email.trim().toLowerCase();
 }
 import { Users, Mail, Phone } from "lucide-react";
 import { patientService } from "../services/index";
 import type { Patient } from "../services/patients/types";
 type Paciente = Patient;
 const ListaPacientes: React.FC = () => {
-  const { data: pacientes = [], isLoading, error: queryError } = usePatients();
+  const [pacientes, setPacientes] = useState<Paciente[]>([]);
-  const error = queryError ? "Falha ao carregar pacientes" : null;
+  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  useEffect(() => {
    const fetchPacientes = async () => {
      setLoading(true);
      setError(null);
      try {
        const items = await patientService.list();
        if (!items.length) {
          console.warn(
            '[ListaPacientes] Nenhum paciente retornado. Verifique se a tabela "patients" possui registros.'
          );
        }
        setPacientes(items as Paciente[]);
      } catch (e) {
        console.error("Erro ao listar pacientes", e);
        setError("Falha ao carregar pacientes");
        setPacientes([]);
      } finally {
        setLoading(false);
      }
    };
    fetchPacientes();
  }, []);
  return (
    <div className="min-h-screen bg-gray-50 p-4 sm:p-6 lg:p-8">
@ -46,17 +65,25 @@ const ListaPacientes: React.FC = () => {
          Pacientes Cadastrados
        </h2>
-        {isLoading && <SkeletonPatientList count={8} />}
+        {loading && (
          <div className="text-sm sm:text-base text-gray-500 text-center py-8">
            Carregando pacientes...
          </div>
        )}
-        {!isLoading && error && (
+        {!loading && error && (
          <div className="text-sm sm:text-base text-red-600 bg-red-50 border border-red-200 p-3 sm:p-4 rounded-lg">
            {error}
          </div>
        )}
-        {!isLoading && !error && pacientes.length === 0 && <EmptyPatientList />}
+        {!loading && !error && pacientes.length === 0 && (
          <div className="text-sm sm:text-base text-gray-500 text-center py-8">
            Nenhum paciente cadastrado.
          </div>
        )}
-        {!isLoading && !error && pacientes.length > 0 && (
+        {!loading && !error && pacientes.length > 0 && (
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 sm:gap-5 lg:gap-6">
            {pacientes.map((paciente, idx) => (
              <div
@ -67,15 +94,9 @@ const ListaPacientes: React.FC = () => {
                tabIndex={0}
              >
                <div className="flex items-center gap-2 sm:gap-3 mb-1 sm:mb-2">
-                  <Avatar
+                  <div className="flex-shrink-0">
-                    src={
+                    <AvatarInitials name={paciente.full_name} size={40} />
-                      paciente.avatar_url ||
+                  </div>
                      (paciente.user_id ? { id: paciente.user_id } : undefined)
                    }
                    name={paciente.full_name}
                    size="md"
                    color="blue"
                  />
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center gap-1.5">
                      <Users className="w-4 h-4 sm:w-5 sm:h-5 text-blue-600 flex-shrink-0" />
--- a/src/pages/Login.tsx
+++ b/src/pages/Login.tsx
@ -1,293 +0,0 @@
 import React, { useState } from "react";
 import { LogIn, Mail, Lock, AlertCircle } from "lucide-react";
 import { authService, patientService, doctorService } from "../services";
 import { useAuth } from "../hooks/useAuth";
 import toast from "react-hot-toast";
 const Login: React.FC = () => {
  const { loginPaciente } = useAuth();
  const [loading, setLoading] = useState(false);
  const [formData, setFormData] = useState({
    email: "",
    password: "",
  });
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value,
    });
  };
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    try {
      console.log("[Login] Fazendo login com email:", formData.email);
      // Fazer login via API Supabase
      const loginResponse = await authService.login({
        email: formData.email,
        password: formData.password,
      });
      console.log("[Login] Login bem-sucedido!", loginResponse);
      const userName =
        loginResponse.user.email?.split("@")[0] || "Usuário";
      const userId = loginResponse.user.id;
      // Tentar detectar o tipo de usuário buscando nas tabelas
      console.log("[Login] Detectando tipo de usuário...");
      // Verificar se é paciente
      try {
        const paciente = await patientService.getByUserId(userId);
        if (paciente) {
          console.log("[Login] Usuário identificado como PACIENTE");
          await loginPaciente({
            id: userId,
            nome: paciente.full_name || userName,
            email: loginResponse.user.email || formData.email,
          });
          toast.success(`Bem-vindo, ${paciente.full_name || userName}!`);
          // Forçar reload da página para garantir que o AuthContext detecte
          window.location.href = "/acompanhamento";
          return;
        }
      } catch (e) {
        console.log("[Login] Não é paciente");
      }
      // Verificar se é médico
      try {
        const medico = await doctorService.getByUserId(userId);
        if (medico) {
          console.log("[Login] Usuário identificado como MÉDICO");
          // Salvar dados do médico no localStorage (padrão do sistema)
          const medicoSession = {
            id: userId, // usar userId do auth para consistência
            nome: medico.full_name || userName,
            email: loginResponse.user.email || formData.email,
            role: "medico" as const,
            crm: medico.crm,
            especialidade: medico.specialty,
            roles: ["medico" as const],
            permissions: {},
          };
          // Salvar no localStorage com o formato esperado pelo AuthContext
          const sessionData = {
            user: medicoSession,
            token: loginResponse.access_token,
            refreshToken: loginResponse.refresh_token,
            savedAt: new Date().toISOString(),
          };
          localStorage.setItem("appSession", JSON.stringify(sessionData));
          // Também salvar nos formatos legados para compatibilidade
          localStorage.setItem("mediconnect_user", JSON.stringify({
            user: { id: userId, email: loginResponse.user.email },
            ...medicoSession
          }));
          localStorage.setItem("mediconnect_medico", JSON.stringify(medicoSession));
          toast.success(`Bem-vindo, Dr(a). ${medico.full_name || userName}!`);
          // Forçar reload da página para o AuthContext detectar a mudança
          window.location.href = "/painel-medico";
          return;
        }
      } catch (e) {
        console.log("[Login] Não é médico", e);
      }
      // Se não for paciente nem médico, assume secretária
      console.log("[Login] Usuário identificado como SECRETÁRIA");
      // Salvar dados da secretária no localStorage
      const secretariaSession = {
        id: userId,
        nome: userName,
        email: loginResponse.user.email || formData.email,
        role: "secretaria" as const,
        roles: ["secretaria" as const],
        permissions: {},
      };
      // Salvar no localStorage com o formato esperado pelo AuthContext
      const sessionData = {
        user: secretariaSession,
        token: loginResponse.access_token,
        refreshToken: loginResponse.refresh_token,
        savedAt: new Date().toISOString(),
      };
      localStorage.setItem("appSession", JSON.stringify(sessionData));
      // Também salvar nos formatos legados
      localStorage.setItem("mediconnect_user", JSON.stringify({
        user: { id: userId, email: loginResponse.user.email },
        ...secretariaSession
      }));
      localStorage.setItem("mediconnect_secretaria", JSON.stringify(secretariaSession));
      toast.success(`Bem-vindo, ${userName}!`);
      // Forçar reload da página para o AuthContext detectar a mudança
      window.location.href = "/painel-secretaria";
    } catch (error: any) {
      console.error("[Login] Erro no login:", error);
      const errorMessage =
        error?.response?.data?.error_description ||
        error?.response?.data?.message ||
        error?.message ||
        "Email ou senha incorretos";
      toast.error(errorMessage);
    } finally {
      setLoading(false);
    }
  };
  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-slate-900 dark:to-slate-800 flex items-center justify-center px-4 py-12">
      <div className="max-w-md w-full space-y-8">
        {/* Header */}
        <div className="text-center">
          <div className="mx-auto h-16 w-16 bg-blue-600 rounded-full flex items-center justify-center mb-4">
            <LogIn className="h-8 w-8 text-white" />
          </div>
          <h2 className="text-3xl font-bold text-gray-900 dark:text-gray-100">Fazer Login</h2>
          <p className="mt-2 text-sm text-gray-600 dark:text-gray-300">
            Entre com suas credenciais para acessar o sistema
          </p>
        </div>
        {/* Form */}
        <div className="bg-white rounded-xl shadow-lg p-8 dark:bg-gray-900 dark:border dark:border-gray-800">
          <form onSubmit={handleSubmit} className="space-y-6">
            {/* Email */}
            <div>
              <label
                htmlFor="email"
                className="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-200"
              >
                Email
              </label>
              <div className="relative">
                <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                  <Mail className="h-5 w-5 text-gray-400" />
                </div>
                <input
                  id="email"
                  name="email"
                  type="email"
                  autoComplete="email"
                  required
                  value={formData.email}
                  onChange={handleChange}
                  className="block w-full pl-10 pr-3 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900 placeholder-gray-400 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-100 dark:placeholder-gray-500"
                  placeholder="seu@email.com"
                />
              </div>
            </div>
            {/* Senha */}
            <div>
              <label
                htmlFor="password"
                className="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-200"
              >
                Senha
              </label>
              <div className="relative">
                <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                  <Lock className="h-5 w-5 text-gray-400" />
                </div>
                <input
                  id="password"
                  name="password"
                  type="password"
                  autoComplete="current-password"
                  required
                  value={formData.password}
                  onChange={handleChange}
                  className="block w-full pl-10 pr-3 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900 placeholder-gray-400 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-100 dark:placeholder-gray-500"
                  placeholder="••••••••"
                />
              </div>
            </div>
            {/* Info */}
            <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 dark:bg-blue-900 dark:border-blue-800 dark:text-blue-200">
              <div className="flex">
                <div className="flex-shrink-0">
                  <AlertCircle className="h-5 w-5 text-blue-400" />
                </div>
                <div className="ml-3">
                  <p className="text-sm text-blue-700 dark:text-blue-200">
                    O sistema detectará automaticamente seu tipo de usuário
                    (Paciente, Médico ou Secretária) e redirecionará para a
                    página apropriada.
                  </p>
                </div>
              </div>
            </div>
            {/* Submit */}
            <button
              type="submit"
              disabled={loading}
              className="w-full flex justify-center items-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
            >
              {loading ? (
                <>
                  <svg
                    className="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 24 24"
                  >
                    <circle
                      className="opacity-25"
                      cx="12"
                      cy="12"
                      r="10"
                      stroke="currentColor"
                      strokeWidth="4"
                    ></circle>
                    <path
                      className="opacity-75"
                      fill="currentColor"
                      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                    ></path>
                  </svg>
                  Entrando...
                </>
              ) : (
                <>
                  <LogIn className="h-5 w-5 mr-2" />
                  Entrar
                </>
              )}
            </button>
          </form>
          {/* Footer */}
          <div className="mt-6 text-center">
            <p className="text-sm text-gray-600 dark:text-gray-300">
              Esqueceu sua senha?{" "}
              <a
                href="/reset-password"
                className="font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300"
              >
                Recuperar senha
              </a>
            </p>
          </div>
        </div>
      </div>
    </div>
  );
 };
 export default Login;
--- a/src/pages/LoginPaciente.tsx
+++ b/src/pages/LoginPaciente.tsx
@ -66,17 +66,8 @@ const LoginPaciente: React.FC = () => {
      // Usar nome do paciente se disponível, senão usar do profile
      const finalName = paciente?.full_name || userName;
      // IMPORTANTE: Usar sempre loginResponse.user.id (auth user_id do Supabase)
      // Este é o ID correto para vincular ao Storage e outras tabelas
      console.log("[LoginPaciente] IDs:", {
        authUserId: loginResponse.user.id,
        patientId: paciente?.id,
        patientUserId: paciente?.user_id,
        usingId: loginResponse.user.id,
      });
      const ok = await loginPaciente({
-        id: loginResponse.user.id, // ✅ Sempre usar o auth user_id
+        id: paciente?.id || loginResponse.user.id,
        nome: finalName,
        email: loginResponse.user.email || formData.email,
      });
--- a/src/pages/MensagensMedico.tsx
+++ b/src/pages/MensagensMedico.tsx
@ -1,345 +0,0 @@
 import { useState, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 import { Mail, MailOpen, Trash2, Search, ArrowLeft } from "lucide-react";
 import toast from "react-hot-toast";
 import { useAuth } from "../hooks/useAuth";
 import { messageService } from "../services";
 import type { Message } from "../services";
 import { format } from "date-fns";
 import { ptBR } from "date-fns/locale";
 export default function MensagensMedico() {
  const { user } = useAuth();
  const navigate = useNavigate();
  const [loading, setLoading] = useState(true);
  const [messages, setMessages] = useState<Message[]>([]);
  const [selectedMessage, setSelectedMessage] = useState<Message | null>(null);
  const [filter, setFilter] = useState<"all" | "unread" | "read">("all");
  const [searchTerm, setSearchTerm] = useState("");
  useEffect(() => {
    if (user?.id) {
      loadMessages();
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [user?.id, filter]);
  const loadMessages = async () => {
    if (!user?.id) return;
    try {
      setLoading(true);
      console.log("[MensagensMedico] Carregando mensagens...");
      let fetchedMessages: Message[] = [];
      if (filter === "unread") {
        fetchedMessages = await messageService.getUnreadMessages(user.id);
      } else if (filter === "read") {
        const allMessages = await messageService.getReceivedMessages(user.id);
        fetchedMessages = allMessages.filter((m) => m.read);
      } else {
        fetchedMessages = await messageService.getReceivedMessages(user.id);
      }
      console.log(
        "[MensagensMedico] Mensagens carregadas:",
        fetchedMessages.length
      );
      setMessages(fetchedMessages);
    } catch (error) {
      console.error("[MensagensMedico] Erro ao carregar mensagens:", error);
      toast.error("Erro ao carregar mensagens");
    } finally {
      setLoading(false);
    }
  };
  const handleSelectMessage = async (message: Message) => {
    setSelectedMessage(message);
    // Marcar como lida se não estiver lida
    if (!message.read) {
      try {
        await messageService.markAsRead(message.id);
        // Atualizar localmente
        setMessages((prev) =>
          prev.map((m) => (m.id === message.id ? { ...m, read: true } : m))
        );
      } catch (error) {
        console.error("[MensagensMedico] Erro ao marcar como lida:", error);
      }
    }
  };
  const handleDeleteMessage = async (messageId: string) => {
    if (!confirm("Deseja realmente excluir esta mensagem?")) return;
    try {
      await messageService.delete(messageId);
      toast.success("Mensagem excluída com sucesso!");
      setMessages((prev) => prev.filter((m) => m.id !== messageId));
      if (selectedMessage?.id === messageId) {
        setSelectedMessage(null);
      }
    } catch (error) {
      console.error("[MensagensMedico] Erro ao excluir mensagem:", error);
      toast.error("Erro ao excluir mensagem");
    }
  };
  const handleToggleRead = async (message: Message) => {
    try {
      if (message.read) {
        await messageService.markAsUnread(message.id);
        toast.success("Marcada como não lida");
      } else {
        await messageService.markAsRead(message.id);
        toast.success("Marcada como lida");
      }
      // Atualizar localmente
      setMessages((prev) =>
        prev.map((m) => (m.id === message.id ? { ...m, read: !m.read } : m))
      );
      if (selectedMessage?.id === message.id) {
        setSelectedMessage({ ...selectedMessage, read: !selectedMessage.read });
      }
    } catch (error) {
      console.error("[MensagensMedico] Erro ao alterar status:", error);
      toast.error("Erro ao alterar status da mensagem");
    }
  };
  const filteredMessages = messages.filter((message) => {
    const matchesSearch =
      message.subject?.toLowerCase().includes(searchTerm.toLowerCase()) ||
      message.content?.toLowerCase().includes(searchTerm.toLowerCase()) ||
      message.sender_name?.toLowerCase().includes(searchTerm.toLowerCase()) ||
      message.sender_email?.toLowerCase().includes(searchTerm.toLowerCase());
    return matchesSearch;
  });
  const unreadCount = messages.filter((m) => !m.read).length;
  if (loading) {
    return (
      <div className="flex items-center justify-center min-h-screen">
        <div className="w-16 h-16 border-4 border-green-600 border-t-transparent rounded-full animate-spin" />
      </div>
    );
  }
  return (
    <div className="min-h-screen bg-gray-50 dark:bg-slate-900 py-4 sm:py-6 lg:py-8 px-4 sm:px-6">
      <div className="max-w-7xl mx-auto">
        {/* Header */}
        <div className="flex items-center justify-between mb-6">
          <div>
            <h1 className="text-2xl lg:text-3xl font-bold text-gray-900 dark:text-white">
              Mensagens
            </h1>
            <p className="text-sm text-gray-600 mt-1 dark:text-gray-300">
              {unreadCount > 0
                ? `${unreadCount} ${
                    unreadCount > 1
                      ? "mensagens não lidas"
                      : "mensagem não lida"
                  }`
                : "Nenhuma mensagem não lida"}
            </p>
          </div>
        </div>
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          {/* Lista de mensagens */}
          <div className="lg:col-span-1 bg-white dark:bg-slate-800 rounded-lg shadow">
            <div className="p-4 border-b border-gray-200">
              {/* Filtros */}
              <div className="flex gap-2 mb-4">
                <button
                  onClick={() => setFilter("all")}
                  className={`flex-1 px-3 py-2 rounded-lg text-sm font-medium transition-colors ${
                    filter === "all"
                      ? "bg-green-600 text-white"
                      : "bg-gray-100 text-gray-700 hover:bg-gray-200"
                  }`}
                >
                  Todas ({messages.length})
                </button>
                <button
                  onClick={() => setFilter("unread")}
                  className={`flex-1 px-3 py-2 rounded-lg text-sm font-medium transition-colors ${
                    filter === "unread"
                      ? "bg-green-600 text-white"
                      : "bg-gray-100 text-gray-700 hover:bg-gray-200"
                  }`}
                >
                  Não lidas ({unreadCount})
                </button>
              </div>
              {/* Busca */}
              <div className="relative">
                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" />
                <input
                  type="text"
                  placeholder="Buscar mensagens..."
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                  className="w-full pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-slate-700 text-sm dark:text-white placeholder-gray-400 dark:placeholder-gray-300 focus:ring-2 focus:ring-green-500 focus:border-transparent"
                />
              </div>
            </div>
            {/* Lista */}
            <div className="divide-y divide-gray-200 dark:divide-gray-700 max-h-[600px] overflow-y-auto">
              {filteredMessages.length === 0 ? (
                <div className="p-8 text-center text-gray-500">
                  <Mail className="w-12 h-12 mx-auto mb-3 text-gray-300" />
                  <p className="text-sm">Nenhuma mensagem encontrada</p>
                </div>
              ) : (
                filteredMessages.map((message) => (
                  <div
                    key={message.id}
                    onClick={() => handleSelectMessage(message)}
                    className={`p-4 cursor-pointer hover:bg-gray-50 transition-colors ${
                      selectedMessage?.id === message.id ? "bg-green-50" : ""
                    } ${!message.read ? "bg-blue-50 hover:bg-blue-100" : ""}`}
                  >
                    <div className="flex items-start justify-between gap-2">
                      <div className="flex-1 min-w-0">
                        <div className="flex items-center gap-2">
                          {!message.read ? (
                            <Mail className="w-4 h-4 text-blue-600 flex-shrink-0" />
                          ) : (
                            <MailOpen className="w-4 h-4 text-gray-400 flex-shrink-0" />
                          )}
                          <p
                            className={`text-sm truncate ${
                              !message.read
                                ? "font-semibold text-gray-900"
                                : "font-medium text-gray-700"
                            }`}
                          >
                            {message.sender_name ||
                              message.sender_email ||
                              "Paciente"}
                          </p>
                        </div>
                        <p
                          className={`text-sm mt-1 truncate ${
                            !message.read
                              ? "font-medium text-gray-900"
                              : "text-gray-600"
                          }`}
                        >
                          {message.subject}
                        </p>
                        <p className="text-xs text-gray-500 mt-1 line-clamp-2">
                          {message.content}
                        </p>
                        <p className="text-xs text-gray-400 mt-2">
                          {format(
                            new Date(message.created_at || Date.now()),
                            "dd/MM/yyyy 'às' HH:mm",
                            {
                              locale: ptBR,
                            }
                          )}
                        </p>
                      </div>
                    </div>
                  </div>
                ))
              )}
            </div>
          </div>
          {/* Visualização da mensagem */}
          <div className="lg:col-span-2 bg-white dark:bg-slate-800 rounded-lg shadow">
            {selectedMessage ? (
              <div className="h-full flex flex-col">
                {/* Header da mensagem */}
                <div className="p-6 border-b border-gray-200 dark:border-gray-700">
                  <div className="flex items-start justify-between gap-4">
                    <div className="flex-1">
                      <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
                        {selectedMessage.subject}
                      </h2>
                      <div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-300">
                        <span className="font-medium">De:</span>
                        <span>
                          {selectedMessage.sender_name ||
                            selectedMessage.sender_email ||
                            "Paciente"}
                        </span>
                      </div>
                      <p className="text-xs text-gray-400 mt-1">
                        {format(
                          new Date(selectedMessage.created_at || Date.now()),
                          "dd 'de' MMMM 'de' yyyy 'às' HH:mm",
                          { locale: ptBR }
                        )}
                      </p>
                    </div>
                    <div className="flex gap-2">
                          <button
                            onClick={() => navigate(-1)}
                            className="p-2 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors"
                            title="Voltar"
                          >
                            <ArrowLeft className="w-5 h-5" />
                          </button>
                      <button
                        onClick={() => handleToggleRead(selectedMessage)}
                        className="p-2 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors"
                        title={
                          selectedMessage.read
                            ? "Marcar como não lida"
                            : "Marcar como lida"
                        }
                      >
                        {selectedMessage.read ? (
                          <Mail className="w-5 h-5" />
                        ) : (
                          <MailOpen className="w-5 h-5" />
                        )}
                      </button>
                      <button
                        onClick={() => handleDeleteMessage(selectedMessage.id)}
                        className="p-2 text-red-600 hover:text-red-700 hover:bg-red-50 rounded-lg transition-colors"
                        title="Excluir mensagem"
                      >
                        <Trash2 className="w-5 h-5" />
                      </button>
                    </div>
                  </div>
                </div>
                {/* Conteúdo da mensagem */}
                <div className="flex-1 p-6 overflow-y-auto">
                  <div className="prose prose-sm max-w-none">
                    <p className="text-gray-700 dark:text-gray-200 whitespace-pre-wrap">
                      {selectedMessage.content}
                    </p>
                  </div>
                </div>
              </div>
            ) : (
              <div className="h-full flex items-center justify-center p-8">
                <div className="text-center text-gray-400 dark:text-gray-300">
                  <Mail className="w-16 h-16 mx-auto mb-4" />
                  <p className="text-lg font-medium">Selecione uma mensagem</p>
                  <p className="text-sm mt-2">
                    Clique em uma mensagem da lista para visualizar
                  </p>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
 }
--- a/src/pages/PainelAdmin.tsx
+++ b/src/pages/PainelAdmin.tsx
@ -1633,7 +1633,7 @@ const PainelAdmin: React.FC = () => {
          aria-modal="true"
          aria-labelledby="usuario-modal-title"
        >
-          <div className="bg-white rounded-xl border border-gray-200 shadow-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
+          <div className="bg-white rounded-xl border border-gray-200 shadow-xl max-w-md w-full">
            <div className="p-6">
              <h2 id="usuario-modal-title" className="text-2xl font-bold mb-4">
                Novo Usuário
--- a/src/pages/PainelMedico.tsx
+++ b/src/pages/PainelMedico.tsx
--- a/src/pages/PerfilMedico.tsx
+++ b/src/pages/PerfilMedico.tsx
@ -3,7 +3,7 @@ import { Save, ArrowLeft } from "lucide-react";
 import toast from "react-hot-toast";
 import { useNavigate } from "react-router-dom";
 import { useAuth } from "../hooks/useAuth";
-import { doctorService, authService, avatarService } from "../services";
+import { doctorService } from "../services";
 import { AvatarUpload } from "../components/ui/AvatarUpload";
 export default function PerfilMedico() {
@ -83,18 +83,7 @@ export default function PerfilMedico() {
          education: "", // Doctor type não tem education
          experience_years: "", // Doctor type não tem experience_years
        });
        // Tenta carregar avatar do Supabase Storage usando user_id
        if (user.id) {
          const avatarStorageUrl = avatarService.getPublicUrl({
            userId: user.id,
            ext: "jpg",
          });
          console.log("[PerfilMedico] Tentando carregar avatar do Storage:", avatarStorageUrl);
          setAvatarUrl(avatarStorageUrl);
        } else {
        setAvatarUrl(undefined);
        }
      } else {
        console.warn("[PerfilMedico] Médico não encontrado na tabela doctors");
        // Usar dados básicos do usuário logado
@ -157,38 +146,7 @@ export default function PerfilMedico() {
    }
    try {
-      // Recupera o access token atual (deve existir enquanto o usuário estiver logado)
+      // TODO: Implementar mudança de senha via API
      const token = authService.getAccessToken();
      if (!token) {
        toast.error("Token de sessão não encontrado. Faça login novamente.");
        return;
      }
      // Chama o endpoint de atualização de senha no Supabase
      try {
        await authService.updatePassword(token, passwordData.newPassword);
      } catch (err: any) {
        // Se token expirou, tentar renovar e refazer (uma tentativa)
        if (err?.response?.status === 401) {
          try {
            await authService.refreshToken();
            const newToken = authService.getAccessToken();
            if (newToken) {
              await authService.updatePassword(newToken, passwordData.newPassword);
            } else {
              throw new Error("Falha ao obter novo token após refresh");
            }
          } catch (refreshErr) {
            console.error("Falha ao renovar token e atualizar senha:", refreshErr);
            throw refreshErr;
          }
        } else {
          throw err;
        }
      }
      // Sucesso
      toast.success("Senha alterada com sucesso!");
      setPasswordData({
        currentPassword: "",
--- a/src/pages/PerfilPaciente.tsx
+++ b/src/pages/PerfilPaciente.tsx
@ -3,7 +3,7 @@ import { Save, ArrowLeft } from "lucide-react";
 import toast from "react-hot-toast";
 import { useNavigate } from "react-router-dom";
 import { useAuth } from "../hooks/useAuth";
-import { patientService, avatarService } from "../services";
+import { patientService } from "../services";
 import { AvatarUpload } from "../components/ui/AvatarUpload";
 export default function PerfilPaciente() {
@ -57,17 +57,12 @@ export default function PerfilPaciente() {
    try {
      setLoading(true);
-      console.log("[PerfilPaciente] 🔍 USER ID:", {
+      console.log("[PerfilPaciente] Buscando dados do paciente:", user.id);
        userId: user.id,
        userName: user.nome,
        userEmail: user.email,
        userRole: user.role,
      });
      try {
-        // Buscar paciente por user_id (ID do auth) em vez de id
+        const patient = await patientService.getById(user.id);
        const patient = await patientService.getByUserId(user.id);
        console.log("[PerfilPaciente] Dados carregados:", patient);
        setFormData({
          full_name: patient.full_name || "",
          email: patient.email || "",
@ -86,28 +81,7 @@ export default function PerfilPaciente() {
          weight_kg: patient.weight_kg?.toString() || "",
          height_m: patient.height_m?.toString() || "",
        });
        // Carrega avatar_url do paciente ou gera URL do Supabase Storage
        if (patient.avatar_url) {
          console.log(
            "[PerfilPaciente] Avatar URL do banco:",
            patient.avatar_url
          );
          setAvatarUrl(patient.avatar_url);
        } else if (user.id) {
          // Se não houver avatar_url salvo, tenta carregar do Storage usando userId
          const avatarStorageUrl = avatarService.getPublicUrl({
            userId: user.id,
            ext: "jpg",
          });
          console.log(
            "[PerfilPaciente] Tentando carregar avatar do Storage:",
            avatarStorageUrl
          );
          setAvatarUrl(avatarStorageUrl);
        } else {
        setAvatarUrl(undefined);
        }
      } catch {
        console.warn(
          "[PerfilPaciente] Paciente não encontrado na tabela patients, usando dados básicos do auth"
--- a/src/services/analytics/analyticsService.ts
+++ b/src/services/analytics/analyticsService.ts
@ -1,29 +0,0 @@
 /**
 * Serviço de Analytics e KPIs
 */
 import { apiClient } from "../api/client";
 import type { KPISummary } from "./types";
 class AnalyticsService {
  /**
   * Busca resumo de KPIs
   */
  async getSummary(): Promise<KPISummary> {
    const response = await apiClient.callFunction<KPISummary>("analytics", {
      method: "GET",
    });
    return response.data;
  }
  /**
   * Força atualização do cache de KPIs
   */
  async refreshCache(): Promise<KPISummary> {
    // A Edge Function já recalcula automaticamente
    return this.getSummary();
  }
 }
 export const analyticsService = new AnalyticsService();
--- a/src/services/analytics/types.ts
+++ b/src/services/analytics/types.ts
@ -1,19 +0,0 @@
 /**
 * Tipos do serviço de Analytics
 */
 export interface KPISummary {
  total_appointments: number;
  today: number;
  canceled: number;
  completed: number;
  pending: number;
  updated_at: string;
 }
 export interface AppointmentMetrics {
  total: number;
  byStatus: Record<string, number>;
  byDoctor: Array<{ doctor_id: string; count: number }>;
  byMonth: Array<{ month: string; count: number }>;
 }
--- a/src/services/api/client.ts
+++ b/src/services/api/client.ts
@ -175,12 +175,6 @@ class ApiClient {
    url: string,
    config?: AxiosRequestConfig
  ): Promise<AxiosResponse<T>> {
    const fullUrl = `${this.client.defaults.baseURL}${url}`;
    const queryString = new URLSearchParams(config?.params).toString();
    console.log(
      "[ApiClient] 🔍 GET Request COMPLETO:",
      fullUrl + (queryString ? `?${queryString}` : "")
    );
    console.log(
      "[ApiClient] GET Request:",
      url,
--- a/src/services/api/edgeFunctions.ts
+++ b/src/services/api/edgeFunctions.ts
@ -1,421 +0,0 @@
 /**
 * API Client para Edge Functions
 * Centraliza todas as chamadas para as Edge Functions do Supabase
 */
 import axios from "axios";
 import { API_CONFIG } from "./config";
 const FUNCTIONS_BASE_URL = `${API_CONFIG.SUPABASE_URL}/functions/v1`;
 // Pegar token de autenticação
 function getAuthToken(): string | null {
  return localStorage.getItem(API_CONFIG.STORAGE_KEYS.ACCESS_TOKEN);
 }
 // Cliente configurado para Edge Functions
 const functionsClient = axios.create({
  baseURL: FUNCTIONS_BASE_URL,
  headers: {
    "Content-Type": "application/json",
    apikey: API_CONFIG.SUPABASE_ANON_KEY,
  },
 });
 // Interceptor para adicionar token de auth
 functionsClient.interceptors.request.use((config) => {
  const token = getAuthToken();
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
 });
 // Interceptor para tratar erros
 functionsClient.interceptors.response.use(
  (response) => response,
  (error) => {
    console.error(
      "[EdgeFunctions] Error:",
      error.response?.data || error.message
    );
    return Promise.reject(error);
  }
 );
 /**
 * Edge Functions API
 */
 export const edgeFunctions = {
  // ============ USER ============
  user: {
    info: () => functionsClient.get("/user-info"),
    updatePreferences: (data: {
      dark_mode?: boolean;
      high_contrast?: boolean;
      font_size?: string;
      dyslexia_font?: boolean;
      language?: string;
    }) => functionsClient.post("/user-update-preferences", data),
  },
  // ============ AVAILABILITY ============
  availability: {
    list: (params?: { external_doctor_id?: string; day_of_week?: number }) =>
      functionsClient.get("/availability-list", { params }),
    create: (data: {
      external_doctor_id: string;
      day_of_week: number;
      start_time: string;
      end_time: string;
      slots_per_hour?: number;
    }) => functionsClient.post("/availability-create", data),
    update: (data: {
      id: string;
      start_time?: string;
      end_time?: string;
      slots_per_hour?: number;
      active?: boolean;
    }) => functionsClient.post("/availability-update", data),
    delete: (data: { id: string }) =>
      functionsClient.post("/availability-delete", data),
    slots: (data: { external_doctor_id: string; date: string }) =>
      functionsClient.post("/availability-slots", data),
  },
  // ============ EXCEPTIONS ============
  exceptions: {
    list: (params?: {
      external_doctor_id?: string;
      date_from?: string;
      date_to?: string;
    }) => functionsClient.get("/exceptions-list", { params }),
    create: (data: {
      external_doctor_id: string;
      exception_date: string;
      reason?: string;
      all_day?: boolean;
    }) => functionsClient.post("/exceptions-create", data),
    delete: (data: { id: string }) =>
      functionsClient.post("/exceptions-delete", data),
  },
  // ============ APPOINTMENTS ============
  appointments: {
    list: (params?: {
      patient_id?: string;
      doctor_id?: string;
      status?: string;
    }) => functionsClient.get("/appointments", { params }),
    create: (data: {
      doctor_id: string;
      patient_id: string;
      appointment_date: string;
      appointment_time: string;
      duration_minutes?: number;
      type?: string;
    }) => functionsClient.post("/appointments-create", data),
    update: (data: {
      appointment_id: string;
      appointment_date?: string;
      appointment_time?: string;
      duration_minutes?: number;
      type?: string;
      status?: string;
    }) => functionsClient.post("/appointments-update", data),
    cancel: (data: { appointment_id: string; reason?: string }) =>
      functionsClient.post("/appointments-cancel", data),
    suggestSlot: (data: {
      patient_id: string;
      doctor_id: string;
      preferred_dates?: string[];
      preferred_times?: string[];
    }) => functionsClient.post("/appointments-suggest-slot", data),
    reschedule: (data: {
      appointment_id: string;
      new_datetime: string;
      reason?: string;
    }) => functionsClient.post("/appointments-reschedule", data),
    confirm: (data: { token: string }) =>
      functionsClient.post("/appointments-confirm", data),
    checkin: (data: {
      appointment_id: string;
      check_in_method: "manual" | "qr_code" | "nfc" | "app" | "kiosk";
    }) => functionsClient.post("/appointments-checkin", data),
    markNoShow: (data: {
      appointment_id: string;
      reason?: string;
      automatic_detection?: boolean;
    }) => functionsClient.post("/appointments-no-show", data),
  },
  // ============ WAITLIST ============
  waitlist: {
    add: (data: {
      patient_id: string;
      doctor_id: string;
      desired_date?: string;
      desired_time?: string;
    }) => functionsClient.post("/waitlist", data),
    list: (params?: {
      doctor_id?: string;
      patient_id?: string;
      status?: string;
    }) => functionsClient.get("/waitlist", { params }),
    match: (data: {
      external_doctor_id: string;
      appointment_date: string;
      appointment_time: string;
    }) => functionsClient.post("/waitlist-match", data),
    remove: (data: { id: string }) =>
      functionsClient.post("/waitlist-remove", data),
  },
  // ============ VIRTUAL QUEUE ============
  virtualQueue: {
    list: (doctorId: string) =>
      functionsClient.get(`/virtual-queue/${doctorId}`),
    advance: (data: {
      doctor_id: string;
      completed: boolean;
      duration_minutes?: number;
      notes?: string;
    }) => functionsClient.post("/virtual-queue-advance", data),
    checkin: (data: {
      external_patient_id: string;
      external_doctor_id?: string;
      external_appointment_id: string;
    }) => functionsClient.post("/queue-checkin", data),
  },
  // ============ NOTIFICATIONS ============
  notifications: {
    send: (data: {
      type: "sms" | "email" | "whatsapp" | "push";
      recipient_id: string;
      template?: string;
      data?: Record<string, unknown>;
      scheduled_at?: string;
    }) => functionsClient.post("/notifications-send", data),
    confirm: (data: { notification_id: string; read_at?: string }) =>
      functionsClient.post("/notifications-confirm", data),
    subscription: (data: {
      external_user_id: string;
      channel: "sms" | "email" | "whatsapp";
      enabled: boolean;
    }) => functionsClient.post("/notifications-subscription", data),
  },
  // ============ ANALYTICS ============
  analytics: {
    summary: (params?: { start_date?: string; end_date?: string }) =>
      functionsClient.get("/analytics", { params }),
    heatmap: (data: {
      doctor_id?: string;
      date_from?: string;
      date_to?: string;
    }) => functionsClient.post("/analytics-heatmap", data),
    demandCurve: (data: { days?: number }) =>
      functionsClient.post("/analytics-demand-curve", data),
    rankingReasons: () => functionsClient.get("/analytics-ranking-reasons"),
    monthlyNoShow: (data: { months?: number }) =>
      functionsClient.post("/analytics-monthly-no-show", data),
    specialtyHeatmap: () => functionsClient.get("/analytics-specialty-heatmap"),
    customReport: (data: {
      metrics: string[];
      date_from?: string;
      date_to?: string;
      filters?: Record<string, unknown>;
    }) => functionsClient.post("/analytics-custom-report", data),
  },
  // ============ TELECONSULT ============
  teleconsult: {
    start: (data: { appointment_id: string; provider?: string }) =>
      functionsClient.post("/teleconsult-start", data),
    status: (sessionId: string) =>
      functionsClient.get(`/teleconsult-status/${sessionId}`),
    end: (data: {
      session_id: string;
      duration_minutes?: number;
      recording_url?: string;
    }) => functionsClient.post("/teleconsult-end", data),
  },
  // ============ GAMIFICATION ============
  gamification: {
    doctorBadges: (doctorId: string) =>
      functionsClient.get(`/gamification-doctor-badges/${doctorId}`),
    patientStreak: (patientId: string) =>
      functionsClient.get(`/gamification-patient-streak/${patientId}`),
    addPoints: (data: {
      user_id: string;
      points: number;
      reason: string;
      category?: string;
    }) => functionsClient.post("/gamification-add-points", data),
  },
  // ============ USER SYNC ============
  userSync: {
    sync: (data: {
      external_user_id: string;
      external_email: string;
      external_name?: string;
      external_role?: string;
    }) => functionsClient.post("/user-sync", data),
  },
  // ============ REPORTS ============
  reports: {
    export: (data: {
      report_type: string;
      format: "csv" | "pdf" | "json" | "xlsx";
      filters?: Record<string, unknown>;
    }) => functionsClient.post("/reports-export", data),
    listExtended: (data: {
      patient_id?: string;
      doctor_id?: string;
      date_from?: string;
      date_to?: string;
    }) => functionsClient.post("/reports-list-extended", data),
    exportCsv: (data: {
      patient_id?: string;
      date_from?: string;
      date_to?: string;
    }) => functionsClient.post("/reports-export-csv", data),
    integrityCheck: (data: { external_report_id: string; content: string }) =>
      functionsClient.post("/reports-integrity-check", data),
  },
  // ============ DOCTOR ============
  doctor: {
    summary: (data: { doctor_id: string }) =>
      functionsClient.post("/doctor-summary", data),
    occupancy: (data: {
      external_doctor_id: string;
      date_from?: string;
      date_to?: string;
    }) => functionsClient.post("/doctor-occupancy", data),
    delaySuggestion: (data: { external_doctor_id: string }) =>
      functionsClient.post("/doctor-delay-suggestion", data),
  },
  // ============ PATIENTS ============
  patients: {
    history: (data: { patient_id: string }) =>
      functionsClient.post("/patients-history", data),
    preferences: (external_patient_id?: string) =>
      functionsClient.get("/patients-preferences", {
        params: { external_patient_id },
      }),
    updatePreferences: (data: {
      external_patient_id?: string;
      preferred_days?: string[];
      preferred_times?: string[];
      preferred_doctor_id?: string;
      communication_channel?: string;
    }) => functionsClient.post("/patients-preferences", data),
    portal: () => functionsClient.get("/patients-portal"),
  },
  // ============ PRIVACY (LGPD) ============
  privacy: {
    request: (action: "access" | "delete" | "export") =>
      functionsClient.post("/privacy", { action }),
  },
  // ============ FEATURE FLAGS ============
  flags: {
    list: () => functionsClient.get("/flags"),
    update: (data: {
      key: string;
      enabled: boolean;
      config?: Record<string, unknown>;
    }) => functionsClient.post("/flags", data),
  },
  // ============ ACCESSIBILITY ============
  accessibility: {
    preferences: () => functionsClient.get("/accessibility-preferences"),
    updatePreferences: (data: {
      dark_mode?: boolean;
      high_contrast?: boolean;
      font_size?: string;
      dyslexia_font?: boolean;
    }) => functionsClient.post("/accessibility-preferences", data),
  },
  // ============ AUDIT ============
  audit: {
    list: (params?: {
      entity_type?: string;
      entity_id?: string;
      action_type?: string;
      limit?: number;
    }) => functionsClient.get("/audit-list", { params }),
  },
  // ============ SYSTEM ============
  system: {
    healthCheck: () => functionsClient.get("/system-health-check"),
    cacheRebuild: () => functionsClient.post("/system-cache-rebuild", {}),
    cronRunner: (data: { job: string }) =>
      functionsClient.post("/system-cron-runner", data),
  },
  // ============ OFFLINE/PWA ============
  offline: {
    agendaToday: (doctorId: string) =>
      functionsClient.get(`/offline-agenda-today/${doctorId}`),
    patientBasic: (patientId: string) =>
      functionsClient.get(`/offline-patient-basic/${patientId}`),
  },
 };
 export default edgeFunctions;
--- a/src/services/appointments/appointmentService.ts
+++ b/src/services/appointments/appointmentService.ts
@ -118,61 +118,17 @@ class AppointmentService {
   */
  async create(data: CreateAppointmentInput): Promise<Appointment> {
    try {
-      console.log(
+      console.log("[AppointmentService] Criando agendamento:", data);
        "[AppointmentService] 📝 Criando agendamento com dados:",
        data
      );
-      // Buscar user_id do localStorage para usar como created_by
+      // Adiciona created_by se não estiver presente
      const userStr = localStorage.getItem("mediconnect_user");
      console.log(
        "[AppointmentService] mediconnect_user no localStorage:",
        userStr
      );
      let userId: string | undefined;
      if (userStr) {
        try {
          const user = JSON.parse(userStr);
          userId = user.id;
          console.log("[AppointmentService] ✅ User ID extraído:", userId);
        } catch (e) {
          console.warn(
            "[AppointmentService] ⚠️ Erro ao parsear user do localStorage:",
            e
          );
        }
      } else {
        console.warn(
          "[AppointmentService] ⚠️ mediconnect_user não encontrado no localStorage!"
        );
      }
      // Adiciona created_by obrigatório (deve ser user_id do auth)
      const payload = {
        ...data,
        duration_minutes: data.duration_minutes || 30,
        appointment_type: data.appointment_type || "presencial",
        status: "requested",
        created_by: data.created_by || userId, // IMPORTANTE: Usa user_id do auth
      };
-      console.log("[AppointmentService] 🚀 Payload final a ser enviado:", {
+      console.log("[AppointmentService] Payload final:", payload);
        ...payload,
        created_by_source: data.created_by
          ? "input"
          : userId
          ? "localStorage"
          : "undefined",
      });
      if (!payload.created_by) {
        console.error(
          "[AppointmentService] ❌ ERRO: created_by está undefined!"
        );
        throw new Error("created_by é obrigatório mas não foi definido");
      }
      const response = await apiClient.post<Appointment[]>(
        this.basePath,
@ -184,14 +140,14 @@ class AppointmentService {
        }
      );
-      console.log("[AppointmentService] ✅ Resposta da API:", response.data);
+      console.log("[AppointmentService] Resposta da API:", response.data);
      if (response.data && response.data.length > 0) {
        return response.data[0];
      }
      throw new Error("Erro ao criar agendamento");
    } catch (error: any) {
-      console.error("[AppointmentService] ❌ Erro ao criar agendamento:", {
+      console.error("[AppointmentService] Erro ao criar agendamento:", {
        error,
        message: error?.message,
        response: error?.response,
@ -204,82 +160,24 @@ class AppointmentService {
  /**
   * Atualiza agendamento existente
   * Usa Supabase Client para respeitar RLS policies
   */
  async update(id: string, data: UpdateAppointmentInput): Promise<Appointment> {
    console.log(
      "[AppointmentService] Atualizando agendamento via API (PostgREST):",
      {
        id,
        data,
      }
    );
    try {
      // Usa o apiClient (Axios) para fazer PATCH na rota REST do Supabase.
      // O apiClient já injeta o access token nas requisições, então a chamada
      // respeitará as políticas RLS do Supabase.
    const response = await apiClient.patch<Appointment[]>(
      `${this.basePath}?id=eq.${id}`,
      data
    );
-
+    if (response.data && response.data.length > 0) {
-      const updated = Array.isArray(response.data) ? response.data[0] : null;
+      return response.data[0];
-
+    }
      if (!updated) {
        console.error(
          "[AppointmentService] ❌ Nenhum agendamento retornado pela API ao atualizar",
          { responseData: response.data }
        );
    throw new Error("Agendamento não encontrado");
  }
      console.log(
        "[AppointmentService] ✅ Agendamento atualizado com sucesso:",
        updated
      );
      return updated as Appointment;
    } catch (error: any) {
      console.error(
        "[AppointmentService] Erro ao atualizar agendamento (API):",
        {
          error,
          id,
          data,
        }
      );
      // Re-lança o erro para o componente tratar
      throw error;
    }
  }
  /**
   * Deleta agendamento
   */
  async delete(id: string): Promise<void> {
    await apiClient.delete(`${this.basePath}?id=eq.${id}`);
  }
  /**
   * Lista agendamentos mesclados com dados das Edge Functions
   * (inclui notificações pendentes)
   */
  async listEnhanced(patientId?: string): Promise<Appointment[]> {
    try {
      const response = await apiClient.callFunction<Appointment[]>(
        "appointments",
        { patient_id: patientId }
      );
      return response.data;
    } catch (error: any) {
      console.error(
        "[AppointmentService] Erro ao buscar appointments enhanced:",
        error
      );
      throw error;
    }
  }
 }
 export const appointmentService = new AppointmentService();
--- a/src/services/appointments/types.ts
+++ b/src/services/appointments/types.ts
@ -45,7 +45,6 @@ export interface CreateAppointmentInput {
  chief_complaint?: string;
  patient_notes?: string;
  insurance_provider?: string;
  created_by?: string;
 }
 export interface UpdateAppointmentInput {
--- a/src/services/availability/availabilityService.ts
+++ b/src/services/availability/availabilityService.ts
@ -52,37 +52,6 @@ class AvailabilityService {
      isArray: Array.isArray(response.data),
    });
    // DEBUG: Buscar TODAS disponibilidades para debug
    if (filters?.doctor_id && response.data?.length === 0) {
      console.log(
        "[AvailabilityService] 🔍 Buscando TODAS disponibilidades para debug..."
      );
      const allResponse = await apiClient.get<any[]>(this.basePath, {});
      console.log(
        "[AvailabilityService] 📊 Total de disponibilidades no banco:",
        allResponse.data?.length
      );
      if (allResponse.data?.length > 0) {
        console.log(
          "[AvailabilityService] 📋 Primeiras 3 disponibilidades:",
          allResponse.data.slice(0, 3).map((d) => ({
            id: d.id,
            doctor_id: d.doctor_id,
            weekday: d.weekday,
            active: d.active,
          }))
        );
        console.log(
          "[AvailabilityService] ⚠️ doctor_id procurado:",
          filters.doctor_id
        );
        console.log(
          "[AvailabilityService] 🔍 IDs de médicos únicos no banco:",
          [...new Set(allResponse.data.map((d) => d.doctor_id))]
        );
      }
    }
    // Converter weekday de string para número (compatibilidade com banco antigo)
    const convertedData: DoctorAvailability[] = Array.isArray(response.data)
      ? response.data.map((item) => {
--- a/src/services/avatars/avatarService.ts
+++ b/src/services/avatars/avatarService.ts
@ -34,18 +34,6 @@ class AvatarService {
   */
  async upload(data: UploadAvatarInput): Promise<UploadAvatarResponse> {
    try {
      // Validação crítica: userId deve estar presente
      if (!data.userId) {
        console.error("❌ [AvatarService] userId não fornecido!", data);
        throw new Error("ID do usuário é obrigatório para fazer upload do avatar");
      }
      // Validação: userId não pode ser apenas espaços vazios
      if (data.userId.trim() === "") {
        console.error("❌ [AvatarService] userId está vazio!", data);
        throw new Error("ID do usuário inválido");
      }
      const token = localStorage.getItem(API_CONFIG.STORAGE_KEYS.ACCESS_TOKEN);
      if (!token) {
@ -56,13 +44,6 @@ class AvatarService {
      const ext = data.file.name.split(".").pop()?.toLowerCase() || "jpg";
      const filePath = `${data.userId}/avatar.${ext}`;
      // Log para confirmar que o path está sendo construído corretamente
      console.log("[AvatarService] 📋 Path construído:", {
        userId: data.userId,
        ext: ext,
        filePath: filePath,
      });
      // Cria FormData para o upload
      const formData = new FormData();
      formData.append("file", data.file);
@ -82,15 +63,14 @@ class AvatarService {
        token: token ? `${token.substring(0, 20)}...` : "null",
      });
      console.log("[AvatarService] 🔍 URL FINAL que será chamada:");
      console.log("   ", uploadUrl);
      console.log("[AvatarService] 🔍 Formato esperado pela API do Supabase:");
      console.log("   ", `${this.SUPABASE_URL}/storage/v1/object/avatars/{userId}/avatar.{ext}`);
      console.log("[AvatarService] 🔍 O {path} será preenchido com:", filePath);
      // Cria instância limpa do axios
      const axiosInstance = this.createAxiosInstance();
      console.log("[AvatarService] 🔍 Verificando URL antes do POST:");
      console.log("  - URL completa:", uploadUrl);
      console.log("  - Deve começar com:", this.SUPABASE_URL);
      console.log("  - Deve conter: /storage/v1/object/avatars/");
      // Upload usando Supabase Storage API
      // Importante: NÃO definir Content-Type manualmente
      const response = await axiosInstance.post(uploadUrl, formData, {
@ -173,8 +153,7 @@ class AvatarService {
   * Não precisa de autenticação pois é endpoint público
   */
  getPublicUrl(data: GetAvatarUrlInput): string {
-    // URL pública do Supabase Storage: /storage/v1/object/public/{bucket}/{path}
+    return `${this.STORAGE_URL}/${this.BUCKET_NAME}/${data.userId}/avatar.${data.ext}`;
    return `${this.STORAGE_URL}/public/${this.BUCKET_NAME}/${data.userId}/avatar.${data.ext}`;
  }
 }
--- a/src/services/doctors/doctorService.ts
+++ b/src/services/doctors/doctorService.ts
@ -132,25 +132,6 @@ class DoctorService {
    }
  }
  /**
   * Atualiza médico por user_id
   */
  async updateByUserId(userId: string, data: UpdateDoctorInput): Promise<Doctor> {
    try {
      const response = await apiClient.patch<Doctor[]>(
        `/doctors?user_id=eq.${userId}`,
        data
      );
      if (response.data && response.data.length > 0) {
        return response.data[0];
      }
      throw new Error("Médico não encontrado");
    } catch (error) {
      console.error("Erro ao atualizar médico por user_id:", error);
      throw error;
    }
  }
  /**
   * Deleta médico
   */
--- a/src/services/doctors/types.ts
+++ b/src/services/doctors/types.ts
@ -100,7 +100,6 @@ export interface UpdateDoctorInput {
  birth_date?: string | null;
  rg?: string | null;
  active?: boolean;
  avatar_url?: string | null;
 }
 export interface DoctorFilters {
--- a/src/services/externalSupabase.ts
+++ b/src/services/externalSupabase.ts
@ -1,58 +0,0 @@
 // externalSupabase.ts
 // Conector para o Supabase fechado (empresa)
 import { createClient, SupabaseClient } from "@supabase/supabase-js";
 // Configuração do Supabase fechado
 const SUPABASE_URL =
  process.env.EXTERNAL_SUPABASE_URL ||
  "https://etblfypcxxtvvuqjkrgd.supabase.co";
 const SUPABASE_KEY =
  process.env.EXTERNAL_SUPABASE_KEY || "<service_key_ou_anon_key_aqui>";
 export const externalSupabase: SupabaseClient = createClient(
  SUPABASE_URL,
  SUPABASE_KEY
 );
 // Funções CRUD reexportadas (exemplo)
 export async function getPatients() {
  return externalSupabase.from("patients").select("*");
 }
 export async function getDoctors() {
  return externalSupabase.from("doctors").select("*");
 }
 export async function getAppointments() {
  return externalSupabase.from("appointments").select("*");
 }
 export async function createAppointment(data: any) {
  return externalSupabase.from("appointments").insert([data]);
 }
 // Adicione aqui outras funções antigas conforme necessário
 // Exemplo: getAvailableSlots, createPatient, createDoctor, etc.
 // Para funções antigas, basta importar e reexportar do serviço original
 // Exemplo:
 // export { login, logout, resetPassword } from './auth/authService';
 // Reexportação dos serviços antigos do Supabase fechado
 export { authService } from "./auth/authService";
 export { assignmentService } from "./assignments/assignmentService";
 export { avatarService } from "./avatars/avatarService";
 export { doctorService } from "./doctors/doctorService";
 export { patientService } from "./patients/patientService";
 export { profileService } from "./profiles/profileService";
 export { reportService } from "./reports/reportService";
 export { userService } from "./users/userService";
 export { smsService } from "./sms/smsService";
 export { appointmentService } from "./appointments/appointmentService";
 export { availabilityService } from "./availability/availabilityService";
 export { apiClient } from "./api/client";
 export { API_CONFIG } from "./api/config";
 export { messageService } from "./messages/messageService";
 export { waitlistService } from "./waitlist/waitlistService";
 export { notificationService } from "./notifications/notificationService";
 export { analyticsService } from "./analytics/analyticsService";
--- a/src/services/index.ts
+++ b/src/services/index.ts
@ -2,9 +2,6 @@
 * Exportações centralizadas dos serviços
 */
 // Edge Functions API (Nova arquitetura)
 export { default as edgeFunctions } from "./api/edgeFunctions";
 // Auth
 export { authService } from "./auth/authService";
 export type {
@ -130,29 +127,3 @@ export type {
 // API Client (caso precise usar diretamente)
 export { apiClient } from "./api/client";
 export { API_CONFIG } from "./api/config";
 // Messages (placeholder service)
 export { messageService } from "./messages/messageService";
 export type { Message } from "./messages/messageService";
 // Waitlist (Lista de Espera)
 export { waitlistService } from "./waitlist/waitlistService";
 export type {
  WaitlistEntry,
  CreateWaitlistInput,
  WaitlistFilters,
 } from "./waitlist/types";
 // Notifications (Fila de Notificações)
 export { notificationService } from "./notifications/notificationService";
 export type {
  Notification,
  CreateNotificationInput,
  NotificationFilters,
  NotificationType,
  NotificationStatus,
 } from "./notifications/types";
 // Analytics (KPIs)
 export { analyticsService } from "./analytics/analyticsService";
 export type { KPISummary, AppointmentMetrics } from "./analytics/types";
--- a/src/services/messages/messageService.ts
+++ b/src/services/messages/messageService.ts
@ -1,30 +0,0 @@
 export type Message = {
  id: string;
  subject?: string;
  content?: string;
  sender_name?: string;
  sender_email?: string;
  read?: boolean;
  created_at?: string;
 };
 // Minimal placeholder message service so pages can import it.
 // TODO: replace with real implementation that calls the backend API.
 export const messageService = {
  async getReceivedMessages(_userId: string): Promise<Message[]> {
    // return empty list by default
    return [];
  },
  async getUnreadMessages(_userId: string): Promise<Message[]> {
    return [];
  },
  async markAsRead(_messageId: string): Promise<void> {
    return;
  },
  async markAsUnread(_messageId: string): Promise<void> {
    return;
  },
  async delete(_messageId: string): Promise<void> {
    return;
  },
 };
--- a/src/services/notifications/notificationService.ts
+++ b/src/services/notifications/notificationService.ts
@ -1,85 +0,0 @@
 /**
 * Serviço de Notificações
 */
 import { apiClient } from "../api/client";
 import type {
  Notification,
  CreateNotificationInput,
  NotificationFilters,
 } from "./types";
 class NotificationService {
  /**
   * Lista notificações na fila
   */
  async list(filters?: NotificationFilters): Promise<Notification[]> {
    const params: Record<string, string> = {};
    if (filters?.status) {
      params.status = filters.status;
    }
    if (filters?.type) {
      params.type = filters.type;
    }
    const response = await apiClient.callFunction<Notification[]>(
      "notifications",
      { method: "GET", filters }
    );
    return response.data;
  }
  /**
   * Cria uma nova notificação na fila
   */
  async create(data: CreateNotificationInput): Promise<Notification> {
    const response = await apiClient.callFunction<Notification>(
      "notifications",
      data
    );
    return response.data;
  }
  /**
   * Envia notificação de lembrete de consulta
   */
  async sendAppointmentReminder(
    appointmentId: string,
    patientPhone: string,
    patientName: string,
    appointmentDate: string
  ): Promise<Notification> {
    return this.create({
      type: "sms",
      payload: {
        appointment_id: appointmentId,
        to: patientPhone,
        message: `Olá ${patientName}, lembramos que você tem uma consulta agendada para ${appointmentDate}.`,
      },
    });
  }
  /**
   * Envia notificação quando vaga abre na lista de espera
   */
  async notifyWaitlistOpening(
    patientPhone: string,
    patientName: string,
    doctorName: string,
    availableDate: string
  ): Promise<Notification> {
    return this.create({
      type: "whatsapp",
      payload: {
        to: patientPhone,
        message: `Olá ${patientName}, abriu uma vaga com Dr(a). ${doctorName} para ${availableDate}. Deseja agendar?`,
      },
    });
  }
 }
 export const notificationService = new NotificationService();
--- a/src/services/notifications/types.ts
+++ b/src/services/notifications/types.ts
@ -1,28 +0,0 @@
 /**
 * Tipos do serviço de Notificações
 */
 export type NotificationType = "sms" | "email" | "whatsapp";
 export type NotificationStatus = "pending" | "sent" | "failed" | "scheduled";
 export interface Notification {
  id: string;
  type: NotificationType;
  payload: Record<string, any>;
  status: NotificationStatus;
  scheduled_at?: string;
  attempts: number;
  created_at: string;
  last_error?: string;
 }
 export interface CreateNotificationInput {
  type: NotificationType;
  payload: Record<string, any>;
  scheduled_at?: string;
 }
 export interface NotificationFilters {
  status?: NotificationStatus;
  type?: NotificationType;
 }
--- a/src/services/patients/patientService.ts
+++ b/src/services/patients/patientService.ts
@ -72,33 +72,6 @@ class PatientService {
    }
  }
  /**
   * Busca paciente por user_id (ID do auth do Supabase)
   */
  async getByUserId(userId: string): Promise<Patient> {
    try {
      console.log("[patientService] Buscando paciente por user_id:", userId);
      const response = await apiClient.get<Patient[]>(
        `/patients?user_id=eq.${userId}`
      );
      console.log("[patientService] Response data:", response.data);
      if (response.data && response.data.length > 0) {
        console.log("[patientService] Paciente encontrado:", response.data[0]);
        return response.data[0];
      }
      console.warn(
        "[patientService] Paciente não encontrado com user_id:",
        userId
      );
      throw new Error("Paciente não encontrado");
    } catch (error) {
      console.error("[patientService] Erro ao buscar paciente:", error);
      throw error;
    }
  }
  /**
   * Cria novo paciente
   */
@ -131,33 +104,6 @@ class PatientService {
    }
  }
  /**
   * Atualiza paciente por user_id
   */
  async updateByUserId(
    userId: string,
    data: UpdatePatientInput
  ): Promise<Patient> {
    try {
      console.log("[patientService] Atualizando paciente por user_id:", {
        userId,
        data,
      });
      const response = await apiClient.patch<Patient[]>(
        `/patients?user_id=eq.${userId}`,
        data
      );
      if (response.data && response.data.length > 0) {
        console.log("[patientService] Paciente atualizado:", response.data[0]);
        return response.data[0];
      }
      throw new Error("Paciente não encontrado");
    } catch (error) {
      console.error("[patientService] Erro ao atualizar paciente:", error);
      throw error;
    }
  }
  /**
   * Deleta paciente
   */
--- a/src/services/patients/types.ts
+++ b/src/services/patients/types.ts
@ -83,7 +83,6 @@ export interface UpdatePatientInput {
  city?: string | null;
  state?: string | null;
  cep?: string | null;
  avatar_url?: string | null;
 }
 export interface PatientFilters {
--- a/src/services/reports/reportService.ts
+++ b/src/services/reports/reportService.ts
@ -11,94 +11,49 @@ import type {
 } from "./types";
 class ReportService {
  private readonly basePath = "/reports";
  /**
   * Lista relatórios com filtros opcionais
   */
  async list(filters?: ReportFilters): Promise<Report[]> {
-    console.log("[ReportService] list() filters:", filters);
+    const params: Record<string, string> = {};
    try {
      const params = new URLSearchParams();
    if (filters?.patient_id) {
-        params.append("patient_id", `eq.${filters.patient_id}`);
+      params["patient_id"] = `eq.${filters.patient_id}`;
    }
    if (filters?.status) {
-        params.append("status", `eq.${filters.status}`);
+      params["status"] = `eq.${filters.status}`;
    }
-      if (filters?.created_by) {
+    // Log para depuração: mostra quais params serão enviados
-        params.append("created_by", `eq.${filters.created_by}`);
+    console.log("[ReportService] list() params:", params);
      }
-      if (filters?.order) {
+    const response = await apiClient.get<Report[]>(this.basePath, { params });
-        params.append("order", filters.order);
+    return response.data;
      }
      const queryString = params.toString();
      const url = queryString ? `/reports?${queryString}` : "/reports";
      console.log("[ReportService] Requisição para:", url);
      const response = await apiClient.get<Report[]>(url);
      const reports = response.data || [];
      console.log("[ReportService] list() - reports found:", reports.length);
      return reports;
    } catch (error: any) {
      console.error("[ReportService] list() - error:", error);
      console.error("[ReportService] error details:", {
        message: error?.message,
        response: error?.response?.data,
        status: error?.response?.status,
      });
      throw new Error(`Erro ao listar relatórios: ${error.message}`);
    }
  }
  /**
   * Busca relatório por ID
   */
  async getById(id: string): Promise<Report> {
-    console.log("[ReportService] getById() - id:", id);
+    const response = await apiClient.get<Report[]>(
-
+      `${this.basePath}?id=eq.${id}`
-    try {
+    );
-      const response = await apiClient.get<Report[]>(`/reports?id=eq.${id}`);
+    if (response.data && response.data.length > 0) {
-      const report = response.data?.[0];
+      return response.data[0];
-
+    }
      if (!report) {
    throw new Error("Relatório não encontrado");
  }
      console.log("[ReportService] getById() - found:", report);
      return report;
    } catch (error: any) {
      console.error("[ReportService] getById() - error:", error);
      throw new Error(`Erro ao buscar relatório: ${error.message}`);
    }
  }
  /**
   * Cria novo relatório
   * Nota: order_number é gerado automaticamente pelo backend
   */
  async create(data: CreateReportInput): Promise<Report> {
-    console.log("[ReportService] create() - data:", data);
+    const response = await apiClient.post<Report>(this.basePath, data);
    try {
      const response = await apiClient.post<Report>("/reports", data, {
        headers: {
          Prefer: "return=representation",
        },
      });
      console.log("[ReportService] create() - success:", response.data);
    return response.data;
    } catch (error: any) {
      console.error("[ReportService] create() - error:", error);
      throw new Error(`Erro ao criar relatório: ${error.message}`);
    }
  }
  /**
@ -108,28 +63,39 @@ class ReportService {
  async update(id: string, data: UpdateReportInput): Promise<Report> {
    console.log("[ReportService] update() - id:", id, "data:", data);
-    try {
+    const response = await apiClient.patch<Report | Report[]>(
-      const response = await apiClient.patch<Report[]>(
+      `${this.basePath}?id=eq.${id}`,
-        `/reports?id=eq.${id}`,
+      data
        data,
        {
          headers: {
            Prefer: "return=representation",
          },
        }
    );
-      const report = response.data?.[0];
+    console.log("[ReportService] update() - response status:", response.status);
-      if (!report) {
+    console.log("[ReportService] update() - response.data:", response.data);
-        throw new Error("Relatório não encontrado para atualizar");
+    console.log(
      "[ReportService] update() - response type:",
      typeof response.data,
      "isArray:",
      Array.isArray(response.data)
    );
    // Supabase com Prefer: return=representation pode retornar array ou objeto
    if (Array.isArray(response.data)) {
      if (response.data.length > 0) {
        return response.data[0];
      }
      // Array vazio - buscar o relatório atualizado
      console.warn(
        "[ReportService] update() - Array vazio, buscando relatório..."
      );
      return await this.getById(id);
    } else if (response.data) {
      return response.data as Report;
    }
-      console.log("[ReportService] update() - success:", report);
+    // Última tentativa - buscar o relatório
-      return report;
+    console.warn(
-    } catch (error: any) {
+      "[ReportService] update() - Resposta vazia, buscando relatório..."
-      console.error("[ReportService] update() - error:", error);
+    );
-      throw new Error(`Erro ao atualizar relatório: ${error.message}`);
+    return await this.getById(id);
    }
  }
 }
--- a/src/services/reports/types.ts
+++ b/src/services/reports/types.ts
@ -37,7 +37,6 @@ export interface CreateReportInput {
  due_at?: string;
  hide_date?: boolean;
  hide_signature?: boolean;
  created_by?: string;
 }
 export interface UpdateReportInput {
@ -58,6 +57,4 @@ export interface UpdateReportInput {
 export interface ReportFilters {
  patient_id?: string;
  status?: ReportStatus;
  created_by?: string;
  order?: string;
 }
--- a/src/services/waitlist/types.ts
+++ b/src/services/waitlist/types.ts
@ -1,24 +0,0 @@
 /**
 * Tipos do serviço de Waitlist (Lista de Espera)
 */
 export interface WaitlistEntry {
  id: string;
  patient_id: string;
  doctor_id: string;
  desired_date: string;
  status: "waiting" | "notified" | "scheduled" | "expired";
  created_at: string;
 }
 export interface CreateWaitlistInput {
  patient_id: string;
  doctor_id: string;
  desired_date: string;
 }
 export interface WaitlistFilters {
  patient_id?: string;
  doctor_id?: string;
  status?: string;
 }
--- a/src/services/waitlist/waitlistService.ts
+++ b/src/services/waitlist/waitlistService.ts
@ -1,52 +0,0 @@
 /**
 * Serviço de Lista de Espera
 */
 import { apiClient } from "../api/client";
 import type {
  WaitlistEntry,
  CreateWaitlistInput,
  WaitlistFilters,
 } from "./types";
 class WaitlistService {
  /**
   * Lista entradas da fila de espera
   */
  async list(filters?: WaitlistFilters): Promise<WaitlistEntry[]> {
    const params: Record<string, string> = {};
    if (filters?.patient_id) {
      params.patient_id = filters.patient_id;
    }
    if (filters?.doctor_id) {
      params.doctor_id = filters.doctor_id;
    }
    if (filters?.status) {
      params.status = filters.status;
    }
    const response = await apiClient.callFunction<WaitlistEntry[]>("waitlist", {
      method: "GET",
      filters,
    });
    return response.data;
  }
  /**
   * Adiciona paciente à lista de espera
   */
  async create(data: CreateWaitlistInput): Promise<WaitlistEntry> {
    const response = await apiClient.callFunction<WaitlistEntry>(
      "waitlist",
      data
    );
    return response.data;
  }
 }
 export const waitlistService = new WaitlistService();
--- a/src/styles/design-tokens.ts
+++ b/src/styles/design-tokens.ts
@ -1,297 +0,0 @@
 /**
 * MediConnect Design Tokens
 * Sistema centralizado de cores, tipografia e espaçamentos
 * @version 1.0
 */
 // ============================================================================
 // STATUS DE CONSULTA - Cores Semânticas
 // ============================================================================
 export const STATUS_COLORS = {
  requested: {
    bg: "bg-blue-50 dark:bg-blue-950",
    text: "text-blue-700 dark:text-blue-300",
    border: "border-blue-200 dark:border-blue-800",
    ring: "ring-blue-500",
    badge: "bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-200",
  },
  confirmed: {
    bg: "bg-green-50 dark:bg-green-950",
    text: "text-green-700 dark:text-green-300",
    border: "border-green-200 dark:border-green-800",
    ring: "ring-green-500",
    badge: "bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-200",
  },
  completed: {
    bg: "bg-gray-50 dark:bg-gray-900",
    text: "text-gray-700 dark:text-gray-300",
    border: "border-gray-200 dark:border-gray-700",
    ring: "ring-gray-500",
    badge: "bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-200",
  },
  cancelled: {
    bg: "bg-red-50 dark:bg-red-950",
    text: "text-red-700 dark:text-red-300",
    border: "border-red-200 dark:border-red-800",
    ring: "ring-red-500",
    badge: "bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-200",
  },
  no_show: {
    bg: "bg-orange-50 dark:bg-orange-950",
    text: "text-orange-700 dark:text-orange-300",
    border: "border-orange-200 dark:border-orange-800",
    ring: "ring-orange-500",
    badge:
      "bg-orange-100 text-orange-700 dark:bg-orange-900 dark:text-orange-200",
  },
  checked_in: {
    bg: "bg-purple-50 dark:bg-purple-950",
    text: "text-purple-700 dark:text-purple-300",
    border: "border-purple-200 dark:border-purple-800",
    ring: "ring-purple-500",
    badge:
      "bg-purple-100 text-purple-700 dark:bg-purple-900 dark:text-purple-200",
  },
  in_progress: {
    bg: "bg-indigo-50 dark:bg-indigo-950",
    text: "text-indigo-700 dark:text-indigo-300",
    border: "border-indigo-200 dark:border-indigo-800",
    ring: "ring-indigo-500",
    badge:
      "bg-indigo-100 text-indigo-700 dark:bg-indigo-900 dark:text-indigo-200",
  },
 } as const;
 // ============================================================================
 // CORES DE TEMA
 // ============================================================================
 export const THEME_COLORS = {
  primary: {
    50: "#eff6ff",
    100: "#dbeafe",
    200: "#bfdbfe",
    300: "#93c5fd",
    400: "#60a5fa",
    500: "#3b82f6",
    600: "#2563eb",
    700: "#1d4ed8",
    800: "#1e40af",
    900: "#1e3a8a",
    950: "#172554",
  },
  secondary: {
    50: "#f8fafc",
    100: "#f1f5f9",
    200: "#e2e8f0",
    300: "#cbd5e1",
    400: "#94a3b8",
    500: "#64748b",
    600: "#475569",
    700: "#334155",
    800: "#1e293b",
    900: "#0f172a",
    950: "#020617",
  },
  success: {
    bg: "bg-green-50 dark:bg-green-950",
    text: "text-green-700 dark:text-green-300",
    border: "border-green-500 dark:border-green-600",
    solid: "bg-green-600 text-white hover:bg-green-700",
  },
  warning: {
    bg: "bg-yellow-50 dark:bg-yellow-950",
    text: "text-yellow-700 dark:text-yellow-300",
    border: "border-yellow-500 dark:border-yellow-600",
    solid: "bg-yellow-600 text-white hover:bg-yellow-700",
  },
  error: {
    bg: "bg-red-50 dark:bg-red-950",
    text: "text-red-700 dark:text-red-300",
    border: "border-red-500 dark:border-red-600",
    solid: "bg-red-600 text-white hover:bg-red-700",
  },
  info: {
    bg: "bg-blue-50 dark:bg-blue-950",
    text: "text-blue-700 dark:text-blue-300",
    border: "border-blue-500 dark:border-blue-600",
    solid: "bg-blue-600 text-white hover:bg-blue-700",
  },
 } as const;
 // ============================================================================
 // ESCALA DE TIPOGRAFIA (Modular Scale)
 // ============================================================================
 export const TYPOGRAPHY = {
  xs: "text-xs", // 12px
  sm: "text-sm", // 14px
  base: "text-base", // 16px
  lg: "text-lg", // 18px
  xl: "text-xl", // 20px
  "2xl": "text-2xl", // 24px
  "3xl": "text-3xl", // 30px
  "4xl": "text-4xl", // 36px
  "5xl": "text-5xl", // 48px
 } as const;
 export const FONT_WEIGHT = {
  normal: "font-normal", // 400
  medium: "font-medium", // 500
  semibold: "font-semibold", // 600
  bold: "font-bold", // 700
 } as const;
 // ============================================================================
 // ESCALA DE ESPAÇAMENTO
 // ============================================================================
 export const SPACING = {
  xs: "4px", // 0.25rem
  sm: "8px", // 0.5rem
  md: "16px", // 1rem
  lg: "24px", // 1.5rem
  xl: "32px", // 2rem
  "2xl": "48px", // 3rem
  "3xl": "64px", // 4rem
  "4xl": "96px", // 6rem
 } as const;
 export const SPACING_CLASSES = {
  xs: "p-1", // 4px
  sm: "p-2", // 8px
  md: "p-4", // 16px
  lg: "p-6", // 24px
  xl: "p-8", // 32px
  "2xl": "p-12", // 48px
 } as const;
 // ============================================================================
 // BREAKPOINTS RESPONSIVOS
 // ============================================================================
 export const BREAKPOINTS = {
  sm: "640px",
  md: "768px",
  lg: "1024px",
  xl: "1280px",
  "2xl": "1536px",
 } as const;
 // ============================================================================
 // BORDER RADIUS
 // ============================================================================
 export const RADIUS = {
  none: "rounded-none",
  sm: "rounded-sm",
  base: "rounded",
  md: "rounded-md",
  lg: "rounded-lg",
  xl: "rounded-xl",
  "2xl": "rounded-2xl",
  full: "rounded-full",
 } as const;
 // ============================================================================
 // SHADOWS
 // ============================================================================
 export const SHADOWS = {
  sm: "shadow-sm",
  base: "shadow",
  md: "shadow-md",
  lg: "shadow-lg",
  xl: "shadow-xl",
  "2xl": "shadow-2xl",
  inner: "shadow-inner",
  none: "shadow-none",
 } as const;
 // ============================================================================
 // FOCUS RINGS (Acessibilidade)
 // ============================================================================
 export const FOCUS_RING = {
  default:
    "focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-400 dark:focus:ring-offset-gray-900",
  error:
    "focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 dark:focus:ring-red-400 dark:focus:ring-offset-gray-900",
  success:
    "focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 dark:focus:ring-green-400 dark:focus:ring-offset-gray-900",
 } as const;
 // ============================================================================
 // TRANSITIONS
 // ============================================================================
 export const TRANSITIONS = {
  fast: "transition-all duration-150 ease-in-out",
  base: "transition-all duration-200 ease-in-out",
  slow: "transition-all duration-300 ease-in-out",
 } as const;
 // ============================================================================
 // HELPERS - Funções Utilitárias
 // ============================================================================
 /**
 * Retorna classes de cores para o status da consulta
 * @param status - Status da consulta
 * @param variant - Variante de cor (bg, text, border, badge)
 */
 export function getStatusColor(
  status: keyof typeof STATUS_COLORS,
  variant: "bg" | "text" | "border" | "ring" | "badge" = "badge"
 ): string {
  return STATUS_COLORS[status]?.[variant] || STATUS_COLORS.requested[variant];
 }
 /**
 * Retorna label amigável para status
 */
 export function getStatusLabel(status: keyof typeof STATUS_COLORS): string {
  const labels: Record<keyof typeof STATUS_COLORS, string> = {
    requested: "Solicitada",
    confirmed: "Confirmada",
    completed: "Concluída",
    cancelled: "Cancelada",
    no_show: "Não Compareceu",
    checked_in: "Check-in",
    in_progress: "Em Andamento",
  };
  return labels[status] || status;
 }
 /**
 * Gera classes de card padrão
 */
 export function getCardClasses(): string {
  return `bg-white dark:bg-gray-800 ${RADIUS.lg} ${SHADOWS.md} ${SPACING_CLASSES.md} border border-gray-200 dark:border-gray-700 ${TRANSITIONS.base}`;
 }
 /**
 * Gera classes de botão primário
 */
 export function getPrimaryButtonClasses(): string {
  return `${THEME_COLORS.primary[600]} hover:${THEME_COLORS.primary[700]} text-white font-semibold py-2 px-4 ${RADIUS.md} ${FOCUS_RING.default} ${TRANSITIONS.base}`;
 }
 /**
 * Gera classes de input
 */
 export function getInputClasses(): string {
  return `w-full px-3 py-2 ${RADIUS.md} border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 ${FOCUS_RING.default} ${TRANSITIONS.base}`;
 }
 // ============================================================================
 // TYPE EXPORTS
 // ============================================================================
 export type StatusType = keyof typeof STATUS_COLORS;
 export type ThemeColor = keyof typeof THEME_COLORS;
 export type TypographySize = keyof typeof TYPOGRAPHY;
 export type SpacingSize = keyof typeof SPACING;
 export type RadiusSize = keyof typeof RADIUS;
 export type ShadowSize = keyof typeof SHADOWS;
--- a/supabase/.temp/cli-latest
+++ b/supabase/.temp/cli-latest
@ -1 +0,0 @@
 v2.62.10
--- a/supabase/.temp/gotrue-version
+++ b/supabase/.temp/gotrue-version
@ -1 +0,0 @@
 v2.183.0
--- a/supabase/.temp/pooler-url
+++ b/supabase/.temp/pooler-url
@ -1 +0,0 @@
 postgresql://postgres.etblfypcxxtvvuqjkrgd@aws-1-us-east-2.pooler.supabase.com:5432/postgres
--- a/supabase/.temp/postgres-version
+++ b/supabase/.temp/postgres-version
@ -1 +0,0 @@
 17.6.1.054
--- a/supabase/.temp/project-ref
+++ b/supabase/.temp/project-ref
@ -1 +0,0 @@
 etblfypcxxtvvuqjkrgd
--- a/supabase/.temp/rest-version
+++ b/supabase/.temp/rest-version
@ -1 +0,0 @@
 v13.0.5
--- a/supabase/.temp/storage-migration
+++ b/supabase/.temp/storage-migration
@ -1 +0,0 @@
 iceberg-catalog-ids
--- a/supabase/.temp/storage-version
+++ b/supabase/.temp/storage-version
@ -1 +0,0 @@
 v1.31.1
--- a/supabase/config.toml
+++ b/supabase/config.toml
@ -1,357 +0,0 @@
 # For detailed configuration reference documentation, visit:
 # https://supabase.com/docs/guides/local-development/cli/config
 # A string used to distinguish different Supabase projects on the same host. Defaults to the
 # working directory name when running `supabase init`.
 project_id = "riseup-squad18"
 [api]
 enabled = true
 # Port to use for the API URL.
 port = 54321
 # Schemas to expose in your API. Tables, views and stored procedures in this schema will get API
 # endpoints. `public` and `graphql_public` schemas are included by default.
 schemas = ["public", "graphql_public"]
 # Extra schemas to add to the search_path of every request.
 extra_search_path = ["public", "extensions"]
 # The maximum number of rows returns from a view, table, or stored procedure. Limits payload size
 # for accidental or malicious requests.
 max_rows = 1000
 [api.tls]
 # Enable HTTPS endpoints locally using a self-signed certificate.
 enabled = false
 # Paths to self-signed certificate pair.
 # cert_path = "../certs/my-cert.pem"
 # key_path = "../certs/my-key.pem"
 [db]
 # Port to use for the local database URL.
 port = 54322
 # Port used by db diff command to initialize the shadow database.
 shadow_port = 54320
 # The database major version to use. This has to be the same as your remote database's. Run `SHOW
 # server_version;` on the remote database to check.
 major_version = 17
 [db.pooler]
 enabled = false
 # Port to use for the local connection pooler.
 port = 54329
 # Specifies when a server connection can be reused by other clients.
 # Configure one of the supported pooler modes: `transaction`, `session`.
 pool_mode = "transaction"
 # How many server connections to allow per user/database pair.
 default_pool_size = 20
 # Maximum number of client connections allowed.
 max_client_conn = 100
 # [db.vault]
 # secret_key = "env(SECRET_VALUE)"
 [db.migrations]
 # If disabled, migrations will be skipped during a db push or reset.
 enabled = true
 # Specifies an ordered list of schema files that describe your database.
 # Supports glob patterns relative to supabase directory: "./schemas/*.sql"
 schema_paths = []
 [db.seed]
 # If enabled, seeds the database after migrations during a db reset.
 enabled = true
 # Specifies an ordered list of seed files to load during db reset.
 # Supports glob patterns relative to supabase directory: "./seeds/*.sql"
 sql_paths = ["./seed.sql"]
 [db.network_restrictions]
 # Enable management of network restrictions.
 enabled = false
 # List of IPv4 CIDR blocks allowed to connect to the database.
 # Defaults to allow all IPv4 connections. Set empty array to block all IPs.
 allowed_cidrs = ["0.0.0.0/0"]
 # List of IPv6 CIDR blocks allowed to connect to the database.
 # Defaults to allow all IPv6 connections. Set empty array to block all IPs.
 allowed_cidrs_v6 = ["::/0"]
 [realtime]
 enabled = true
 # Bind realtime via either IPv4 or IPv6. (default: IPv4)
 # ip_version = "IPv6"
 # The maximum length in bytes of HTTP request headers. (default: 4096)
 # max_header_length = 4096
 [studio]
 enabled = true
 # Port to use for Supabase Studio.
 port = 54323
 # External URL of the API server that frontend connects to.
 api_url = "http://127.0.0.1"
 # OpenAI API Key to use for Supabase AI in the Supabase Studio.
 openai_api_key = "env(OPENAI_API_KEY)"
 # Email testing server. Emails sent with the local dev setup are not actually sent - rather, they
 # are monitored, and you can view the emails that would have been sent from the web interface.
 [inbucket]
 enabled = true
 # Port to use for the email testing server web interface.
 port = 54324
 # Uncomment to expose additional ports for testing user applications that send emails.
 # smtp_port = 54325
 # pop3_port = 54326
 # admin_email = "admin@email.com"
 # sender_name = "Admin"
 [storage]
 enabled = true
 # The maximum file size allowed (e.g. "5MB", "500KB").
 file_size_limit = "50MiB"
 # Image transformation API is available to Supabase Pro plan.
 # [storage.image_transformation]
 # enabled = true
 # Uncomment to configure local storage buckets
 # [storage.buckets.images]
 # public = false
 # file_size_limit = "50MiB"
 # allowed_mime_types = ["image/png", "image/jpeg"]
 # objects_path = "./images"
 [auth]
 enabled = true
 # The base URL of your website. Used as an allow-list for redirects and for constructing URLs used
 # in emails.
 site_url = "http://127.0.0.1:3000"
 # A list of *exact* URLs that auth providers are permitted to redirect to post authentication.
 additional_redirect_urls = ["https://127.0.0.1:3000"]
 # How long tokens are valid for, in seconds. Defaults to 3600 (1 hour), maximum 604,800 (1 week).
 jwt_expiry = 3600
 # JWT issuer URL. If not set, defaults to the local API URL (http://127.0.0.1:<port>/auth/v1).
 # jwt_issuer = ""
 # Path to JWT signing key. DO NOT commit your signing keys file to git.
 # signing_keys_path = "./signing_keys.json"
 # If disabled, the refresh token will never expire.
 enable_refresh_token_rotation = true
 # Allows refresh tokens to be reused after expiry, up to the specified interval in seconds.
 # Requires enable_refresh_token_rotation = true.
 refresh_token_reuse_interval = 10
 # Allow/disallow new user signups to your project.
 enable_signup = true
 # Allow/disallow anonymous sign-ins to your project.
 enable_anonymous_sign_ins = false
 # Allow/disallow testing manual linking of accounts
 enable_manual_linking = false
 # Passwords shorter than this value will be rejected as weak. Minimum 6, recommended 8 or more.
 minimum_password_length = 6
 # Passwords that do not meet the following requirements will be rejected as weak. Supported values
 # are: `letters_digits`, `lower_upper_letters_digits`, `lower_upper_letters_digits_symbols`
 password_requirements = ""
 [auth.rate_limit]
 # Number of emails that can be sent per hour. Requires auth.email.smtp to be enabled.
 email_sent = 2
 # Number of SMS messages that can be sent per hour. Requires auth.sms to be enabled.
 sms_sent = 30
 # Number of anonymous sign-ins that can be made per hour per IP address. Requires enable_anonymous_sign_ins = true.
 anonymous_users = 30
 # Number of sessions that can be refreshed in a 5 minute interval per IP address.
 token_refresh = 150
 # Number of sign up and sign-in requests that can be made in a 5 minute interval per IP address (excludes anonymous users).
 sign_in_sign_ups = 30
 # Number of OTP / Magic link verifications that can be made in a 5 minute interval per IP address.
 token_verifications = 30
 # Number of Web3 logins that can be made in a 5 minute interval per IP address.
 web3 = 30
 # Configure one of the supported captcha providers: `hcaptcha`, `turnstile`.
 # [auth.captcha]
 # enabled = true
 # provider = "hcaptcha"
 # secret = ""
 [auth.email]
 # Allow/disallow new user signups via email to your project.
 enable_signup = true
 # If enabled, a user will be required to confirm any email change on both the old, and new email
 # addresses. If disabled, only the new email is required to confirm.
 double_confirm_changes = true
 # If enabled, users need to confirm their email address before signing in.
 enable_confirmations = false
 # If enabled, users will need to reauthenticate or have logged in recently to change their password.
 secure_password_change = false
 # Controls the minimum amount of time that must pass before sending another signup confirmation or password reset email.
 max_frequency = "1s"
 # Number of characters used in the email OTP.
 otp_length = 6
 # Number of seconds before the email OTP expires (defaults to 1 hour).
 otp_expiry = 3600
 # Use a production-ready SMTP server
 # [auth.email.smtp]
 # enabled = true
 # host = "smtp.sendgrid.net"
 # port = 587
 # user = "apikey"
 # pass = "env(SENDGRID_API_KEY)"
 # admin_email = "admin@email.com"
 # sender_name = "Admin"
 # Uncomment to customize email template
 # [auth.email.template.invite]
 # subject = "You have been invited"
 # content_path = "./supabase/templates/invite.html"
 # Uncomment to customize notification email template
 # [auth.email.notification.password_changed]
 # enabled = true
 # subject = "Your password has been changed"
 # content_path = "./templates/password_changed_notification.html"
 [auth.sms]
 # Allow/disallow new user signups via SMS to your project.
 enable_signup = false
 # If enabled, users need to confirm their phone number before signing in.
 enable_confirmations = false
 # Template for sending OTP to users
 template = "Your code is {{ .Code }}"
 # Controls the minimum amount of time that must pass before sending another sms otp.
 max_frequency = "5s"
 # Use pre-defined map of phone number to OTP for testing.
 # [auth.sms.test_otp]
 # 4152127777 = "123456"
 # Configure logged in session timeouts.
 # [auth.sessions]
 # Force log out after the specified duration.
 # timebox = "24h"
 # Force log out if the user has been inactive longer than the specified duration.
 # inactivity_timeout = "8h"
 # This hook runs before a new user is created and allows developers to reject the request based on the incoming user object.
 # [auth.hook.before_user_created]
 # enabled = true
 # uri = "pg-functions://postgres/auth/before-user-created-hook"
 # This hook runs before a token is issued and allows you to add additional claims based on the authentication method used.
 # [auth.hook.custom_access_token]
 # enabled = true
 # uri = "pg-functions://<database>/<schema>/<hook_name>"
 # Configure one of the supported SMS providers: `twilio`, `twilio_verify`, `messagebird`, `textlocal`, `vonage`.
 [auth.sms.twilio]
 enabled = false
 account_sid = ""
 message_service_sid = ""
 # DO NOT commit your Twilio auth token to git. Use environment variable substitution instead:
 auth_token = "env(SUPABASE_AUTH_SMS_TWILIO_AUTH_TOKEN)"
 # Multi-factor-authentication is available to Supabase Pro plan.
 [auth.mfa]
 # Control how many MFA factors can be enrolled at once per user.
 max_enrolled_factors = 10
 # Control MFA via App Authenticator (TOTP)
 [auth.mfa.totp]
 enroll_enabled = false
 verify_enabled = false
 # Configure MFA via Phone Messaging
 [auth.mfa.phone]
 enroll_enabled = false
 verify_enabled = false
 otp_length = 6
 template = "Your code is {{ .Code }}"
 max_frequency = "5s"
 # Configure MFA via WebAuthn
 # [auth.mfa.web_authn]
 # enroll_enabled = true
 # verify_enabled = true
 # Use an external OAuth provider. The full list of providers are: `apple`, `azure`, `bitbucket`,
 # `discord`, `facebook`, `github`, `gitlab`, `google`, `keycloak`, `linkedin_oidc`, `notion`, `twitch`,
 # `twitter`, `slack`, `spotify`, `workos`, `zoom`.
 [auth.external.apple]
 enabled = false
 client_id = ""
 # DO NOT commit your OAuth provider secret to git. Use environment variable substitution instead:
 secret = "env(SUPABASE_AUTH_EXTERNAL_APPLE_SECRET)"
 # Overrides the default auth redirectUrl.
 redirect_uri = ""
 # Overrides the default auth provider URL. Used to support self-hosted gitlab, single-tenant Azure,
 # or any other third-party OIDC providers.
 url = ""
 # If enabled, the nonce check will be skipped. Required for local sign in with Google auth.
 skip_nonce_check = false
 # If enabled, it will allow the user to successfully authenticate when the provider does not return an email address.
 email_optional = false
 # Allow Solana wallet holders to sign in to your project via the Sign in with Solana (SIWS, EIP-4361) standard.
 # You can configure "web3" rate limit in the [auth.rate_limit] section and set up [auth.captcha] if self-hosting.
 [auth.web3.solana]
 enabled = false
 # Use Firebase Auth as a third-party provider alongside Supabase Auth.
 [auth.third_party.firebase]
 enabled = false
 # project_id = "my-firebase-project"
 # Use Auth0 as a third-party provider alongside Supabase Auth.
 [auth.third_party.auth0]
 enabled = false
 # tenant = "my-auth0-tenant"
 # tenant_region = "us"
 # Use AWS Cognito (Amplify) as a third-party provider alongside Supabase Auth.
 [auth.third_party.aws_cognito]
 enabled = false
 # user_pool_id = "my-user-pool-id"
 # user_pool_region = "us-east-1"
 # Use Clerk as a third-party provider alongside Supabase Auth.
 [auth.third_party.clerk]
 enabled = false
 # Obtain from https://clerk.com/setup/supabase
 # domain = "example.clerk.accounts.dev"
 # OAuth server configuration
 [auth.oauth_server]
 # Enable OAuth server functionality
 enabled = false
 # Path for OAuth consent flow UI
 authorization_url_path = "/oauth/consent"
 # Allow dynamic client registration
 allow_dynamic_registration = false
 [edge_runtime]
 enabled = true
 # Supported request policies: `oneshot`, `per_worker`.
 # `per_worker` (default) — enables hot reload during local development.
 # `oneshot` — fallback mode if hot reload causes issues (e.g. in large repos or with symlinks).
 policy = "per_worker"
 # Port to attach the Chrome inspector for debugging edge functions.
 inspector_port = 8083
 # The Deno major version to use.
 deno_version = 2
 # [edge_runtime.secrets]
 # secret_key = "env(SECRET_VALUE)"
 [analytics]
 enabled = true
 port = 54327
 # Configure one of the supported backends: `postgres`, `bigquery`.
 backend = "postgres"
 # Experimental features may be deprecated any time
 [experimental]
 # Configures Postgres storage engine to use OrioleDB (S3)
 orioledb_version = ""
 # Configures S3 bucket URL, eg. <bucket_name>.s3-<region>.amazonaws.com
 s3_host = "env(S3_HOST)"
 # Configures S3 bucket region, eg. us-east-1
 s3_region = "env(S3_REGION)"
 # Configures AWS_ACCESS_KEY_ID for S3 bucket
 s3_access_key = "env(S3_ACCESS_KEY)"
 # Configures AWS_SECRET_ACCESS_KEY for S3 bucket
 s3_secret_key = "env(S3_SECRET_KEY)"
--- a/Show More
+++ b/Show More
		`@ -1 +0,0 @@`
			`postgresql://postgres.etblfypcxxtvvuqjkrgd@aws-1-us-east-2.pooler.supabase.com:5432/postgres`