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

Reviewed-on: #84

README.md

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

susconecta/.gitignore

@@ -27,8 +27,3 @@ yarn-error.log*
 next-env.d.tsriseup-squad20/
 susconecta/riseup-squad20/
 riseup-squad20/
-
-# mac
-**/.DS_Store
-.DS_Store
-

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

@@ -157,7 +157,7 @@ export default function AgendamentoPage() {
     // Mapa de classes para cores conhecidas
     const colorClassMap: Record<string, string> = {
       blue: "bg-blue-500 ring-blue-500/20",
-      green: "bg-green-500 ring-green-500/20",
+      green: "bg-[#10B981] ring-[#10B981]/20",
       orange: "bg-orange-500 ring-orange-500/20",
       red: "bg-red-500 ring-red-500/20",
       purple: "bg-purple-500 ring-purple-500/20",
@@ -242,7 +242,7 @@ export default function AgendamentoPage() {
             <span className="text-foreground text-xs sm:text-sm font-medium">Solicitado</span>
           </div>
           <div className="flex items-center gap-2">
-            <span aria-hidden className="h-2 w-2 sm:h-3 sm:w-3 rounded-full bg-green-500 ring-1 ring-white/6" />
+            <span aria-hidden className="h-2 w-2 sm:h-3 sm:w-3 rounded-full ring-1 ring-white/6" style={{ backgroundColor: '#10B981' }} />
             <span className="text-foreground text-xs sm:text-sm font-medium">Confirmado</span>
           </div>
           <div className="flex items-center gap-2">
@@ -309,7 +309,7 @@ export default function AgendamentoPage() {
             </div>
 
             {/* legenda dinâmica: mostra as cores presentes nos agendamentos do dia atual */}
-            <div className="sm:absolute sm:top-2 sm:right-2 mt-2 sm:mt-0 z-40">
+            <div className="sm:absolute sm:top-2 sm:right-2 mt-2 sm:mt-0 z-10">
               <DynamicLegend events={managerEvents} />
             </div>
           </div>

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

@@ -111,8 +111,11 @@ export default function ConsultasPage() {
     const baseDate = scheduledBase ? new Date(scheduledBase) : new Date();
     const duration = appointment.duration_minutes ?? appointment.duration ?? 30;
 
-    // compute start and end times (HH:MM)
+    // compute start and end times (HH:MM) and date using local time to avoid timezone issues
-    const appointmentDateStr = baseDate.toISOString().split("T")[0];
+    const year = baseDate.getFullYear();
+    const month = String(baseDate.getMonth() + 1).padStart(2, '0');
+    const day = String(baseDate.getDate()).padStart(2, '0');
+    const appointmentDateStr = `${year}-${month}-${day}`;
     const startTime = `${String(baseDate.getHours()).padStart(2, '0')}:${String(baseDate.getMinutes()).padStart(2, '0')}`;
     const endDate = new Date(baseDate.getTime() + duration * 60000);
     const endTime = `${String(endDate.getHours()).padStart(2, '0')}:${String(endDate.getMinutes()).padStart(2, '0')}`;
@@ -567,13 +570,19 @@ export default function ConsultasPage() {
                       <TableCell>
                         <Badge
                           variant={
-                            appointment.status === "confirmed"
+                            appointment.status === "confirmed" || appointment.status === "confirmado"
                               ? "default"
-                              : appointment.status === "pending"
+                              : appointment.status === "pending" || appointment.status === "pendente"
                               ? "secondary"
+                              : appointment.status === "requested" || appointment.status === "solicitado"
+                              ? "default"
                               : "destructive"
                           }
-                          className={appointment.status === "confirmed" ? "bg-green-600" : ""}
+                          className={
+                            appointment.status === "confirmed" || appointment.status === "confirmado" ? "bg-[#10B981]" :
+                            appointment.status === "requested" || appointment.status === "solicitado" ? "bg-blue-500" :
+                            appointment.status === "canceled" || appointment.status === "cancelled" || appointment.status === "cancelado" ? "bg-red-500" : ""
+                          }
                         >
                           {translateStatus(appointment.status)}
                         </Badge>
@@ -658,13 +667,21 @@ export default function ConsultasPage() {
                         <div className="text-[10px] sm:text-xs text-muted-foreground">Status</div>
                         <Badge
                           variant={
-                            appointment.status === "confirmed"
+                            appointment.status === "confirmed" || appointment.status === "confirmado"
                               ? "default"
-                              : appointment.status === "pending"
+                              : appointment.status === "pending" || appointment.status === "pendente"
                               ? "secondary"
+                              : appointment.status === "requested" || appointment.status === "solicitado"
+                              ? "default"
                               : "destructive"
                           }
-                          className={`text-[10px] sm:text-xs ${appointment.status === "confirmed" ? "bg-green-600" : ""}`}
+                          className={
+                            `text-[10px] sm:text-xs ${
+                              appointment.status === "confirmed" || appointment.status === "confirmado" ? "bg-[#10B981]" :
+                              appointment.status === "requested" || appointment.status === "solicitado" ? "bg-blue-500" :
+                              appointment.status === "canceled" || appointment.status === "cancelled" || appointment.status === "cancelado" ? "bg-red-500" : ""
+                            }`
+                          }
                         >
                           {translateStatus(appointment.status)}
                         </Badge>
@@ -777,13 +794,19 @@ export default function ConsultasPage() {
                 <span className="col-span-3">
                   <Badge
                     variant={
-                      viewingAppointment?.status === "confirmed"
+                      viewingAppointment?.status === "confirmed" || viewingAppointment?.status === "confirmado"
                         ? "default"
-                        : viewingAppointment?.status === "pending"
+                        : viewingAppointment?.status === "pending" || viewingAppointment?.status === "pendente"
                         ? "secondary"
+                        : viewingAppointment?.status === "requested" || viewingAppointment?.status === "solicitado"
+                        ? "default"
                         : "destructive"
                     }
-                    className={viewingAppointment?.status === "confirmed" ? "bg-green-600" : ""}
+                    className={
+                      viewingAppointment?.status === "confirmed" || viewingAppointment?.status === "confirmado" ? "bg-[#10B981]" :
+                      viewingAppointment?.status === "requested" || viewingAppointment?.status === "solicitado" ? "bg-blue-500" :
+                      viewingAppointment?.status === "canceled" || viewingAppointment?.status === "cancelled" || viewingAppointment?.status === "cancelado" ? "bg-red-500" : ""
+                    }
                   >
                     {translateStatus(viewingAppointment?.status || "")}
                   </Badge>
@@ -791,7 +814,7 @@ export default function ConsultasPage() {
               </div>
               <div className="grid grid-cols-4 items-center gap-4">
                 <Label className="text-right">Tipo</Label>
-                <span className="col-span-3">{capitalize(viewingAppointment?.type || "")}</span>
+                <span className="col-span-3">{capitalize(viewingAppointment?.appointment_type || viewingAppointment?.type || "")}</span>
               </div>
               <div className="grid grid-cols-4 items-center gap-4">
                 <Label className="text-right">Observações</Label>

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

@@ -9,7 +9,6 @@ import {
   getUpcomingAppointments,
   getAppointmentsByDateRange,
   getNewUsersLastDays,
-  getPendingReports,
   getDisabledUsers,
   getDoctorsAvailabilityToday,
   getPatientById,
@@ -18,7 +17,7 @@ import {
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { Alert, AlertDescription } from '@/components/ui/alert';
-import { AlertCircle, Calendar, Users, Stethoscope, Clock, FileText, AlertTriangle, Plus, ArrowLeft } from 'lucide-react';
+import { AlertCircle, Calendar, Users, Stethoscope, Clock, AlertTriangle, Plus, ArrowLeft } from 'lucide-react';
 import Link from 'next/link';
 import { PatientRegistrationForm } from '@/components/features/forms/patient-registration-form';
 import { DoctorRegistrationForm } from '@/components/features/forms/doctor-registration-form';
@@ -49,7 +48,6 @@ export default function DashboardPage() {
   const [appointments, setAppointments] = useState<UpcomingAppointment[]>([]);
   const [appointmentData, setAppointmentData] = useState<any[]>([]);
   const [newUsers, setNewUsers] = useState<any[]>([]);
-  const [pendingReports, setPendingReports] = useState<any[]>([]);
   const [disabledUsers, setDisabledUsers] = useState<any[]>([]);
   const [doctors, setDoctors] = useState<Map<string, any>>(new Map());
   const [patients, setPatients] = useState<Map<string, any>>(new Map());
@@ -83,18 +81,16 @@ export default function DashboardPage() {
       });
 
       // 2. Carrega dados dos widgets em paralelo
-      const [upcomingAppts, appointmentDataRange, newUsersList, pendingReportsList, disabledUsersList] = await Promise.all([
+      const [upcomingAppts, appointmentDataRange, newUsersList, disabledUsersList] = await Promise.all([
         getUpcomingAppointments(5),
         getAppointmentsByDateRange(7),
         getNewUsersLastDays(7),
-        getPendingReports(5),
         getDisabledUsers(5),
       ]);
 
       setAppointments(upcomingAppts);
       setAppointmentData(appointmentDataRange);
       setNewUsers(newUsersList);
-      setPendingReports(pendingReportsList);
       setDisabledUsers(disabledUsersList);
 
       // 3. Busca detalhes de pacientes e médicos para as próximas consultas
@@ -264,15 +260,7 @@ export default function DashboardPage() {
           </div>
         </div>
 
-        <div className="bg-card p-4 sm:p-5 md:p-6 rounded-lg border border-border hover:shadow-md transition">
+
-          <div className="flex items-center justify-between gap-3">
-            <div className="min-w-0 flex-1">
-              <h3 className="text-xs sm:text-sm font-medium text-muted-foreground truncate">Relatórios Pendentes</h3>
-              <p className="text-2xl sm:text-3xl font-bold text-foreground mt-1 sm:mt-2">{pendingReports.length}</p>
-            </div>
-            <FileText className="h-6 sm:h-8 w-6 sm:w-8 text-orange-500 opacity-20 flex-shrink-0" />
-          </div>
-        </div>
       </div>
 
       {/* 6. AÇÕES RÁPIDAS - Responsivo: stack em mobile, wrap em desktop */}
@@ -294,17 +282,12 @@ export default function DashboardPage() {
             <span className="hidden sm:inline">Novo Médico</span>
             <span className="sm:hidden">Médico</span>
           </Button>
-          <Button onClick={() => router.push('/dashboard/relatorios')} variant="outline" className="gap-2 text-sm sm:text-base w-full sm:w-auto hover:bg-primary! hover:text-white! transition-colors">
-            <FileText className="h-4 w-4" />
-            <span className="hidden sm:inline">Ver Relatórios</span>
-            <span className="sm:hidden">Relatórios</span>
-          </Button>
         </div>
       </div>
 
       {/* 2. PRÓXIMAS CONSULTAS */}
-      <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 md:gap-6">
+      <div className="grid grid-cols-1 gap-4 md:gap-6">
-        <div className="lg:col-span-2 bg-card p-4 sm:p-5 md:p-6 rounded-lg border border-border">
+        <div className="bg-card p-4 sm:p-5 md:p-6 rounded-lg border border-border">
           <h2 className="text-base sm:text-lg font-semibold text-foreground mb-3 sm:mb-4">Próximas Consultas (7 dias)</h2>
           {appointments.length > 0 ? (
             <div className="space-y-2 sm:space-y-3">
@@ -330,28 +313,7 @@ export default function DashboardPage() {
           )}
         </div>
 
-        {/* 5. RELATÓRIOS PENDENTES */}
+
-        <div className="bg-card p-4 sm:p-5 md:p-6 rounded-lg border border-border">
-          <h2 className="text-base sm:text-lg font-semibold text-foreground mb-3 sm:mb-4 flex items-center gap-2">
-            <FileText className="h-4 sm:h-5 w-4 sm:w-5" />
-            <span className="truncate">Pendentes</span>
-          </h2>
-          {pendingReports.length > 0 ? (
-            <div className="space-y-2">
-              {pendingReports.map(report => (
-                <div key={report.id} className="p-2 sm:p-3 bg-muted rounded-lg hover:bg-muted/80 transition cursor-pointer text-xs sm:text-sm">
-                  <p className="font-medium text-foreground truncate">{report.order_number}</p>
-                  <p className="text-[10px] sm:text-xs text-muted-foreground truncate">{report.exam || 'Sem descrição'}</p>
-                </div>
-              ))}
-              <Button onClick={() => router.push('/dashboard/relatorios')} variant="ghost" className="w-full mt-2 hover:bg-primary! hover:text-white! transition-colors text-xs sm:text-sm" size="sm">
-                Ver Todos
-              </Button>
-            </div>
-          ) : (
-            <p className="text-xs sm:text-sm text-muted-foreground">Sem relatórios pendentes</p>
-          )}
-        </div>
       </div>
 
       {/* 4. NOVOS USUÁRIOS */}

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

@@ -2,10 +2,11 @@
 
 "use client";
 
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useRef } from "react";
 import { Button } from "@/components/ui/button";
 import { FileDown, BarChart2, Users, CalendarCheck } from "lucide-react";
 import jsPDF from "jspdf";
+import html2canvas from "html2canvas";
 import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from "recharts";
 import {
   countAppointmentsToday,
@@ -30,10 +31,51 @@ const FALLBACK_MEDICOS = [
 // Helper Functions
 // ============================================================================
 
-function exportPDF(title: string, content: string) {
+async function exportPDF(title: string, content: string, chartElementId?: string) {
   const doc = new jsPDF();
-  doc.text(title, 10, 10);
+  let yPosition = 15;
-  doc.text(content, 10, 20);
+
+  // Add title
+  doc.setFontSize(16);
+  doc.setFont(undefined, "bold");
+  doc.text(title, 15, yPosition);
+  yPosition += 10;
+
+  // Add description/content
+  doc.setFontSize(11);
+  doc.setFont(undefined, "normal");
+  const contentLines = doc.splitTextToSize(content, 180);
+  doc.text(contentLines, 15, yPosition);
+  yPosition += contentLines.length * 5 + 15;
+
+  // Capture chart if chartElementId is provided
+  if (chartElementId) {
+    try {
+      const chartElement = document.getElementById(chartElementId);
+      if (chartElement) {
+        // Create a canvas from the chart element
+        const canvas = await html2canvas(chartElement, {
+          backgroundColor: "#ffffff",
+          scale: 2,
+          logging: false,
+        });
+
+        // Convert canvas to image
+        const imgData = canvas.toDataURL("image/png");
+        const imgWidth = 180;
+        const imgHeight = (canvas.height * imgWidth) / canvas.width;
+
+        // Add image to PDF
+        doc.addImage(imgData, "PNG", 15, yPosition, imgWidth, imgHeight);
+        yPosition += imgHeight + 10;
+      }
+    } catch (error) {
+      console.error("Error capturing chart:", error);
+      doc.text("(Erro ao capturar gráfico)", 15, yPosition);
+      yPosition += 10;
+    }
+  }
+
   doc.save(`${title.toLowerCase().replace(/ /g, "-")}.pdf`);
 }
 
@@ -203,7 +245,7 @@ export default function RelatoriosPage() {
               size="sm"
               variant="outline"
               className="hover:bg-primary! hover:text-white! transition-colors w-full md:w-auto"
-              onClick={() => exportPDF("Consultas por Período", "Resumo das consultas realizadas por período.")}
+              onClick={() => exportPDF("Consultas por Período", "Resumo das consultas realizadas por período.", "chart-consultas")}
             >
               <FileDown className="w-4 h-4 mr-1" /> Exportar PDF
             </Button>
@@ -211,15 +253,17 @@ export default function RelatoriosPage() {
           {loading ? (
             <div className="h-[220px] flex items-center justify-center text-muted-foreground">Carregando dados...</div>
           ) : (
-            <ResponsiveContainer width="100%" height={220}>
+            <div id="chart-consultas">
-              <BarChart data={consultasData}>
+              <ResponsiveContainer width="100%" height={220}>
-                <CartesianGrid strokeDasharray="3 3" />
+                <BarChart data={consultasData}>
-                <XAxis dataKey="periodo" />
+                  <CartesianGrid strokeDasharray="3 3" />
-                <YAxis />
+                  <XAxis dataKey="periodo" />
-                <Tooltip />
+                  <YAxis />
-                <Bar dataKey="consultas" fill="#6366f1" name="Consultas" />
+                  <Tooltip />
-              </BarChart>
+                  <Bar dataKey="consultas" fill="#6366f1" name="Consultas" />
-            </ResponsiveContainer>
+                </BarChart>
+              </ResponsiveContainer>
+            </div>
           )}
         </div>
       </div>
@@ -229,9 +273,10 @@ export default function RelatoriosPage() {
         <div className="bg-card border border-border rounded-lg shadow p-6">
           <div className="flex items-center justify-between mb-2">
             <h2 className="font-semibold text-lg text-foreground flex items-center gap-2"><Users className="w-5 h-5" /> Pacientes Mais Atendidos</h2>
-            <Button size="sm" variant="outline" className="hover:bg-primary! hover:text-white! transition-colors" onClick={() => exportPDF("Pacientes Mais Atendidos", "Lista dos pacientes mais atendidos.")}> <FileDown className="w-4 h-4 mr-1" /> Exportar PDF</Button>
+            <Button size="sm" variant="outline" className="hover:bg-primary! hover:text-white! transition-colors" onClick={() => exportPDF("Pacientes Mais Atendidos", "Lista dos pacientes mais atendidos.", "table-pacientes")}> <FileDown className="w-4 h-4 mr-1" /> Exportar PDF</Button>
           </div>
-          <table className="w-full text-sm mt-4">
+          <div id="table-pacientes">
+            <table className="w-full text-sm mt-4">
             <thead>
               <tr className="text-muted-foreground">
                 <th className="text-left font-medium">Paciente</th>
@@ -257,15 +302,17 @@ export default function RelatoriosPage() {
               )}
             </tbody>
           </table>
+          </div>
         </div>
 
         {/* Médicos mais produtivos */}
         <div className="bg-card border border-border rounded-lg shadow p-6">
           <div className="flex items-center justify-between mb-2">
             <h2 className="font-semibold text-lg text-foreground flex items-center gap-2"><Users className="w-5 h-5" /> Médicos Mais Produtivos</h2>
-            <Button size="sm" variant="outline" className="hover:bg-primary! hover:text-white! transition-colors" onClick={() => exportPDF("Médicos Mais Produtivos", "Lista dos médicos mais produtivos.")}> <FileDown className="w-4 h-4 mr-1" /> Exportar PDF</Button>
+            <Button size="sm" variant="outline" className="hover:bg-primary! hover:text-white! transition-colors" onClick={() => exportPDF("Médicos Mais Produtivos", "Lista dos médicos mais produtivos.", "table-medicos")}> <FileDown className="w-4 h-4 mr-1" /> Exportar PDF</Button>
           </div>
-          <table className="w-full text-sm mt-4">
+          <div id="table-medicos">
+            <table className="w-full text-sm mt-4">
             <thead>
               <tr className="text-muted-foreground">
                 <th className="text-left font-medium">Médico</th>
@@ -291,6 +338,7 @@ export default function RelatoriosPage() {
               )}
             </tbody>
           </table>
+          </div>
         </div>
       </div>
     </div>

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

@@ -131,6 +131,7 @@ export default function DoutoresPage() {
   const [availabilityOpenFor, setAvailabilityOpenFor] = useState<Medico | null>(null);
   const [availabilityViewingFor, setAvailabilityViewingFor] = useState<Medico | null>(null);
   const [availabilities, setAvailabilities] = useState<DoctorAvailability[]>([]);
+  const [availabilitiesForCreate, setAvailabilitiesForCreate] = useState<DoctorAvailability[]>([]);
   const [availLoading, setAvailLoading] = useState(false);
   const [editingAvailability, setEditingAvailability] = useState<DoctorAvailability | null>(null);
   const [exceptions, setExceptions] = useState<DoctorException[]>([]);
@@ -633,7 +634,17 @@ export default function DoutoresPage() {
                           Ver pacientes atribuídos
                         </DropdownMenuItem>
 
-                        <DropdownMenuItem onClick={() => setAvailabilityOpenFor(doctor)}>
+                        <DropdownMenuItem onClick={async () => {
+                          try {
+                            const list = await listarDisponibilidades({ doctorId: doctor.id, active: true });
+                            setAvailabilitiesForCreate(list || []);
+                            setAvailabilityOpenFor(doctor);
+                          } catch (e) {
+                            console.warn('Erro ao carregar disponibilidades:', e);
+                            setAvailabilitiesForCreate([]);
+                            setAvailabilityOpenFor(doctor);
+                          }
+                        }}>
                           <Plus className="mr-2 h-4 w-4" />
                           Criar disponibilidade
                         </DropdownMenuItem>
@@ -833,27 +844,27 @@ export default function DoutoresPage() {
               </DialogDescription>
             </DialogHeader>
             <div className="grid gap-4 py-4">
-              <div className="grid grid-cols-4 items-center gap-4">
+              <div className="grid grid-cols-1 sm:grid-cols-4 items-start sm:items-center gap-2 sm:gap-4">
-                <Label className="text-right">Nome</Label>
+                <Label className="text-left sm:text-right">Nome</Label>
-                <span className="col-span-3 font-medium">{viewingDoctor?.full_name}</span>
+                <span className="col-span-1 sm:col-span-3 font-medium">{viewingDoctor?.full_name}</span>
               </div>
-              <div className="grid grid-cols-4 items-center gap-4">
+              <div className="grid grid-cols-1 sm:grid-cols-4 items-start sm:items-center gap-2 sm:gap-4">
-                <Label className="text-right">Especialidade</Label>
+                <Label className="text-left sm:text-right">Especialidade</Label>
-                <span className="col-span-3">
+                <span className="col-span-1 sm:col-span-3">
                   <Badge variant="outline">{viewingDoctor?.especialidade}</Badge>
                 </span>
               </div>
-              <div className="grid grid-cols-4 items-center gap-4">
+              <div className="grid grid-cols-1 sm:grid-cols-4 items-start sm:items-center gap-2 sm:gap-4">
-                <Label className="text-right">CRM</Label>
+                <Label className="text-left sm:text-right">CRM</Label>
-                <span className="col-span-3">{viewingDoctor?.crm}</span>
+                <span className="col-span-1 sm:col-span-3">{viewingDoctor?.crm}</span>
               </div>
-              <div className="grid grid-cols-4 items-center gap-4">
+              <div className="grid grid-cols-1 sm:grid-cols-4 items-start sm:items-center gap-2 sm:gap-4">
-                <Label className="text-right">Email</Label>
+                <Label className="text-left sm:text-right">Email</Label>
-                <span className="col-span-3">{viewingDoctor?.email}</span>
+                <span className="col-span-1 sm:col-span-3">{viewingDoctor?.email}</span>
               </div>
-              <div className="grid grid-cols-4 items-center gap-4">
+              <div className="grid grid-cols-1 sm:grid-cols-4 items-start sm:items-center gap-2 sm:gap-4">
-                <Label className="text-right">Telefone</Label>
+                <Label className="text-left sm:text-right">Telefone</Label>
-                <span className="col-span-3">{viewingDoctor?.telefone}</span>
+                <span className="col-span-1 sm:col-span-3">{viewingDoctor?.telefone}</span>
               </div>
             </div>
             <DialogFooter>
@@ -869,6 +880,7 @@ export default function DoutoresPage() {
           open={!!availabilityOpenFor}
           onOpenChange={(open) => { if (!open) setAvailabilityOpenFor(null); }}
           doctorId={availabilityOpenFor?.id}
+          existingAvailabilities={availabilitiesForCreate}
           onSaved={(saved) => { console.log('Disponibilidade salva', saved); setAvailabilityOpenFor(null); /* optionally reload list */ reloadAvailabilities(availabilityOpenFor?.id); }}
         />
       )}
@@ -890,6 +902,7 @@ export default function DoutoresPage() {
           doctorId={editingAvailability?.doctor_id ?? availabilityViewingFor?.id}
           availability={editingAvailability}
           mode="edit"
+          existingAvailabilities={availabilities}
           onSaved={(saved) => { console.log('Disponibilidade atualizada', saved); setEditingAvailability(null); reloadAvailabilities(editingAvailability?.doctor_id ?? availabilityViewingFor?.id); }}
         />
       )}
@@ -910,14 +923,35 @@ export default function DoutoresPage() {
                 <div>Carregando disponibilidades…</div>
               ) : availabilities && availabilities.length ? (
                 <div className="space-y-2">
-                  {availabilities.map((a) => (
+                  {availabilities
+                    .sort((a, b) => {
+                      // Define a ordem dos dias da semana (Segunda a Domingo)
+                      const weekdayOrder: Record<string, number> = {
+                        'segunda': 1, 'segunda-feira': 1, 'mon': 1, 'monday': 1, '1': 1,
+                        'terca': 2, 'terça': 2, 'terça-feira': 2, 'tue': 2, 'tuesday': 2, '2': 2,
+                        'quarta': 3, 'quarta-feira': 3, 'wed': 3, 'wednesday': 3, '3': 3,
+                        'quinta': 4, 'quinta-feira': 4, 'thu': 4, 'thursday': 4, '4': 4,
+                        'sexta': 5, 'sexta-feira': 5, 'fri': 5, 'friday': 5, '5': 5,
+                        'sabado': 6, 'sábado': 6, 'sat': 6, 'saturday': 6, '6': 6,
+                        'domingo': 7, 'dom': 7, 'sun': 7, 'sunday': 7, '0': 7, '7': 7
+                      };
+                      
+                      const getWeekdayOrder = (weekday: any) => {
+                        if (typeof weekday === 'number') return weekday === 0 ? 7 : weekday;
+                        const normalized = String(weekday).toLowerCase().normalize('NFD').replace(/\p{Diacritic}/gu, '');
+                        return weekdayOrder[normalized] || 999;
+                      };
+                      
+                      return getWeekdayOrder(a.weekday) - getWeekdayOrder(b.weekday);
+                    })
+                    .map((a) => (
                       <div key={String(a.id)} className="p-2 border rounded flex justify-between items-start">
                         <div>
                           <div className="font-medium">{translateWeekday(a.weekday)} • {a.start_time} — {a.end_time}</div>
                           <div className="text-xs text-muted-foreground">Duração: {a.slot_minutes} min • Tipo: {a.appointment_type || '—'} • {a.active ? 'Ativa' : 'Inativa'}</div>
                         </div>
                         <div className="flex gap-2">
-                          <Button size="sm" variant="outline" onClick={() => setEditingAvailability(a)}>Editar</Button>
+                          <Button size="sm" variant="outline" onClick={() => setEditingAvailability(a)} className="hover:bg-muted hover:text-foreground">Editar</Button>
                           <Button size="sm" variant="destructive" onClick={async () => {
                             if (!confirm('Excluir esta disponibilidade?')) return;
                             try {
@@ -964,7 +998,14 @@ export default function DoutoresPage() {
                   {exceptions.map((ex) => (
                     <div key={String(ex.id)} className="p-2 border rounded flex justify-between items-start">
                       <div>
-                        <div className="font-medium">{ex.date} {ex.start_time ? `• ${ex.start_time}` : ''} {ex.end_time ? `— ${ex.end_time}` : ''}</div>
+                        <div className="font-medium">{(() => {
+                          try {
+                            const [y, m, d] = String(ex.date).split('-');
+                            return `${d}/${m}/${y}`;
+                          } catch (e) {
+                            return ex.date;
+                          }
+                        })()} {ex.start_time ? `• ${ex.start_time}` : ''} {ex.end_time ? `— ${ex.end_time}` : ''}</div>
                         <div className="text-xs text-muted-foreground">Tipo: {ex.kind} • Motivo: {ex.reason || '—'}</div>
                       </div>
                       <div className="flex gap-2">

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

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

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

@@ -297,7 +297,7 @@ export default function PacientesPage() {
             aria-label="Ordenar por"
             value={sortBy}
             onChange={(e) => setSortBy(e.target.value as any)}
-            className="h-8 sm:h-9 rounded-md border border-input bg-background px-2 sm:px-3 py-1 text-xs sm:text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-primary hover:border-primary transition-colors cursor-pointer"
+                className="h-8 sm:h-9 rounded-md border border-input bg-background px-2 sm:px-3 py-1 text-xs sm:text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-primary hover:border-primary transition-colors cursor-pointer"
           >
             <option value="name_asc">A–Z</option>
             <option value="name_desc">Z–A</option>
@@ -539,27 +539,27 @@ export default function PacientesPage() {
               </DialogDescription>
             </DialogHeader>
             <div className="grid gap-4 py-4">
-              <div className="grid grid-cols-4 items-center gap-4">
+              <div className="grid grid-cols-1 sm:grid-cols-4 items-start sm:items-center gap-2 sm:gap-4">
-                <Label className="text-right">Nome</Label>
+                <Label className="text-left sm:text-right">Nome</Label>
-                <span className="col-span-3 font-medium">{viewingPatient.full_name}</span>
+                <span className="col-span-1 sm:col-span-3 font-medium">{viewingPatient.full_name}</span>
               </div>
-              <div className="grid grid-cols-4 items-center gap-4">
+              <div className="grid grid-cols-1 sm:grid-cols-4 items-start sm:items-center gap-2 sm:gap-4">
-                <Label className="text-right">CPF</Label>
+                <Label className="text-left sm:text-right">CPF</Label>
-                <span className="col-span-3">{viewingPatient.cpf}</span>
+                <span className="col-span-1 sm:col-span-3">{viewingPatient.cpf}</span>
               </div>
-              <div className="grid grid-cols-4 items-center gap-4">
+              <div className="grid grid-cols-1 sm:grid-cols-4 items-start sm:items-center gap-2 sm:gap-4">
-                <Label className="text-right">Telefone</Label>
+                <Label className="text-left sm:text-right">Telefone</Label>
-                <span className="col-span-3">{viewingPatient.phone_mobile}</span>
+                <span className="col-span-1 sm:col-span-3">{viewingPatient.phone_mobile}</span>
               </div>
-              <div className="grid grid-cols-4 items-center gap-4">
+              <div className="grid grid-cols-1 sm:grid-cols-4 items-start sm:items-center gap-2 sm:gap-4">
-                <Label className="text-right">Endereço</Label>
+                <Label className="text-left sm:text-right">Endereço</Label>
-                <span className="col-span-3">
+                <span className="col-span-1 sm:col-span-3">
                   {`${viewingPatient.street || ''}, ${viewingPatient.number || ''} - ${viewingPatient.neighborhood || ''}, ${viewingPatient.city || ''} - ${viewingPatient.state || ''}`}
                 </span>
               </div>
-               <div className="grid grid-cols-4 items-center gap-4">
+               <div className="grid grid-cols-1 sm:grid-cols-4 items-start sm:items-center gap-2 sm:gap-4">
-                <Label className="text-right">Observações</Label>
+                <Label className="text-left sm:text-right">Observações</Label>
-                <span className="col-span-3">{viewingPatient.notes || "Nenhuma"}</span>
+                <span className="col-span-1 sm:col-span-3">{viewingPatient.notes || "Nenhuma"}</span>
               </div>
             </div>
             <DialogFooter>

susconecta/app/audio-teste/page.tsx

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

susconecta/app/laudos-editor/page.tsx

@@ -148,7 +148,10 @@ export default function LaudosEditorPage() {
     if (savedDraft) {
       try {
         const draft = JSON.parse(savedDraft);
-        setPacienteSelecionado(draft.pacienteSelecionado);
+        // Carregar paciente do rascunho se existir
+        if (draft.pacienteSelecionado) {
+          setPacienteSelecionado(draft.pacienteSelecionado);
+        }
         setContent(draft.content);
         setCampos(draft.campos);
         setSolicitanteId(draft.solicitanteId);
@@ -178,6 +181,33 @@ export default function LaudosEditorPage() {
     }
   }, []);
 
+  // Auto-salvar no localStorage sempre que houver mudanças (com debounce)
+  useEffect(() => {
+    const timeoutId = setTimeout(() => {
+      // Capturar conteúdo atual do editor antes de salvar
+      const currentContent = editorRef.current?.innerHTML || content;
+      
+      const draft = {
+        pacienteSelecionado,
+        content: currentContent,
+        campos,
+        solicitanteId,
+        solicitanteNome,
+        prazoDate,
+        prazoTime,
+        imagens,
+        lastSaved: new Date().toISOString(),
+      };
+      
+      // Só salvar se houver conteúdo ou dados preenchidos
+      if (currentContent || pacienteSelecionado || campos.exame || campos.diagnostico || imagens.length > 0) {
+        localStorage.setItem('laudoDraft', JSON.stringify(draft));
+      }
+    }, 1000); // Aguarda 1 segundo após última mudança
+
+    return () => clearTimeout(timeoutId);
+  }, [pacienteSelecionado, content, campos, solicitanteId, solicitanteNome, prazoDate, prazoTime, imagens]);
+
   // Tentar obter o registro de médico correspondente ao usuário autenticado
   useEffect(() => {
     let mounted = true;
@@ -247,6 +277,23 @@ export default function LaudosEditorPage() {
     }
   }, [content]);
 
+  // Função para trocar de aba salvando conteúdo antes
+  const handleTabChange = (newTab: string) => {
+    // Salvar conteúdo do editor antes de trocar
+    if (editorRef.current) {
+      const editorContent = editorRef.current.innerHTML;
+      setContent(editorContent);
+    }
+    setActiveTab(newTab);
+  };
+
+  // Restaurar conteúdo do editor quando voltar para a aba editor
+  useEffect(() => {
+    if (activeTab === 'editor' && editorRef.current && content) {
+      editorRef.current.innerHTML = content;
+    }
+  }, [activeTab]);
+
   // Desfazer
   const handleUndo = () => {
     if (historyIndex > 0) {
@@ -321,11 +368,15 @@ export default function LaudosEditorPage() {
 
   // Salvar rascunho no localStorage
   const saveDraft = () => {
+    // Capturar conteúdo atual do editor antes de salvar
+    const currentContent = editorRef.current?.innerHTML || content;
+    
     const draft = {
       pacienteSelecionado,
-      content,
+      content: currentContent,
       campos,
       solicitanteId,
+      solicitanteNome,
       prazoDate,
       prazoTime,
       imagens,
@@ -389,6 +440,9 @@ export default function LaudosEditorPage() {
         return;
       }
 
+      // Capturar conteúdo atual do editor antes de salvar
+      const currentContent = editorRef.current?.innerHTML || content;
+
       const userId = user?.id || '00000000-0000-0000-0000-000000000001';
 
       let composedDueAt = undefined;
@@ -404,7 +458,7 @@ export default function LaudosEditorPage() {
         diagnosis: campos.diagnostico || '',
         conclusion: campos.conclusao || '',
         cid_code: campos.cid || '',
-        content_html: content,
+        content_html: currentContent,
         content_json: {},
         requested_by: solicitanteId || userId,
         due_at: composedDueAt ?? new Date().toISOString(),
@@ -414,6 +468,10 @@ export default function LaudosEditorPage() {
 
       if (createNewReport) {
         await createNewReport(payload as any);
+        
+        // Limpar rascunho salvo após sucesso
+        localStorage.removeItem('laudoDraft');
+        
         toast({
           title: 'Laudo criado com sucesso!',
           description: 'O laudo foi liberado e salvo.',
@@ -441,7 +499,7 @@ export default function LaudosEditorPage() {
               <Button
                 variant="ghost"
                 size="sm"
-                onClick={() => router.push('/profissional')}
+                onClick={() => setShowDraftConfirm(true)}
                 className="p-0 h-auto flex-shrink-0"
               >
                 <ArrowLeft className="w-4 sm:w-5 h-4 sm:h-5" />
@@ -489,7 +547,7 @@ export default function LaudosEditorPage() {
                   <div className="font-semibold text-primary text-sm sm:text-lg truncate">{getPatientName(pacienteSelecionado)}</div>
                   <div className="text-xs sm:text-sm text-muted-foreground line-clamp-2">
                     {getPatientCpf(pacienteSelecionado) ? `CPF: ${getPatientCpf(pacienteSelecionado)} | ` : ''}
-                    {pacienteSelecionado?.birth_date ? `Nascimento: ${pacienteSelecionado.birth_date}` : getPatientAge(pacienteSelecionado) ? `Idade: ${getPatientAge(pacienteSelecionado)} anos` : ''}
+                    {pacienteSelecionado?.birth_date ? `Nascimento: ${pacienteSelecionado.birth_date.split('T')[0].split('-').reverse().join('/')}` : getPatientAge(pacienteSelecionado) ? `Idade: ${getPatientAge(pacienteSelecionado)} anos` : ''}
                     {getPatientSex(pacienteSelecionado) ? ` | Sexo: ${getPatientSex(pacienteSelecionado)}` : ''}
                   </div>
                 </div>
@@ -536,7 +594,7 @@ export default function LaudosEditorPage() {
           {/* Tabs */}
           <div className="flex border-b border-border bg-card overflow-x-auto flex-shrink-0">
             <button
-              onClick={() => setActiveTab('editor')}
+              onClick={() => handleTabChange('editor')}
               className={`px-2 sm:px-4 py-2 text-xs sm:text-sm font-medium border-b-2 transition-colors whitespace-nowrap ${
                 activeTab === 'editor'
                   ? 'border-blue-500 text-blue-600'
@@ -547,18 +605,7 @@ export default function LaudosEditorPage() {
               Editor
             </button>
             <button
-              onClick={() => setActiveTab('imagens')}
+              onClick={() => handleTabChange('campos')}
-              className={`px-2 sm:px-4 py-2 text-xs sm:text-sm font-medium border-b-2 transition-colors whitespace-nowrap ${
-                activeTab === 'imagens'
-                  ? 'border-blue-500 text-blue-600'
-                  : 'border-transparent text-gray-600 dark:text-muted-foreground'
-              }`}
-            >
-              <Upload className="w-3 sm:w-4 h-3 sm:h-4 inline mr-1" />
-              Imagens ({imagens.length})
-            </button>
-            <button
-              onClick={() => setActiveTab('campos')}
               className={`px-2 sm:px-4 py-2 text-xs sm:text-sm font-medium border-b-2 transition-colors whitespace-nowrap ${
                 activeTab === 'campos'
                   ? 'border-blue-500 text-blue-600'
@@ -719,48 +766,6 @@ export default function LaudosEditorPage() {
                 </div>
               )}
 
-              {/* Imagens Tab */}
-              {activeTab === 'imagens' && (
-                <div className="flex-1 p-2 sm:p-3 md:p-4 overflow-y-auto">
-                  <div className="mb-3 sm:mb-4">
-                    <Label htmlFor="upload-images" className="text-xs sm:text-sm">
-                      Upload de Imagens
-                    </Label>
-                    <Input
-                      id="upload-images"
-                      type="file"
-                      multiple
-                      accept="image/*,.pdf"
-                      onChange={handleImageUpload}
-                      className="mt-1 sm:mt-2 text-xs"
-                    />
-                  </div>
-
-                  <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-2 lg:grid-cols-3 gap-2 sm:gap-3 md:gap-4">
-                    {imagens.map((img) => (
-                      <div key={img.id} className="border border-border rounded-lg p-1.5 sm:p-2">
-                        {img.type.startsWith('image/') ? (
-                          <img src={img.url} alt={img.name} className="w-full h-20 sm:h-24 md:h-28 object-cover rounded" />
-                        ) : (
-                          <div className="w-full h-20 sm:h-24 md:h-28 bg-muted rounded flex items-center justify-center">
-                            <FileText className="w-6 sm:w-8 h-6 sm:h-8 text-muted-foreground" />
-                          </div>
-                        )}
-                        <p className="text-xs text-muted-foreground mt-1 truncate">{img.name}</p>
-                        <Button
-                          variant="destructive"
-                          size="sm"
-                          className="w-full mt-1 text-xs h-8"
-                          onClick={() => setImagens((prev) => prev.filter((i) => i.id !== img.id))}
-                        >
-                          Remover
-                        </Button>
-                      </div>
-                    ))}
-                  </div>
-                </div>
-              )}
-
               {/* Campos Tab */}
               {activeTab === 'campos' && (
                 <div className="flex-1 p-2 sm:p-3 md:p-4 space-y-2 sm:space-y-3 md:space-y-4 overflow-y-auto">
@@ -958,14 +963,14 @@ export default function LaudosEditorPage() {
                     setShowDraftConfirm(false);
                     discardDraft();
                   }}
-                  className="text-xs sm:text-sm h-9 sm:h-10 hover:bg-blue-50 dark:hover:bg-blue-950"
+                  className="text-xs sm:text-sm h-9 sm:h-10 hover:bg-gray-100 dark:hover:bg-gray-800"
                 >
                   Descartar
                 </Button>
                 <Button
                   variant="outline"
                   onClick={() => setShowDraftConfirm(false)}
-                  className="text-xs sm:text-sm h-9 sm:h-10 hover:bg-blue-50 dark:hover:bg-blue-950"
+                  className="text-xs sm:text-sm h-9 sm:h-10 hover:bg-gray-100 dark:hover:bg-gray-800"
                 >
                   Voltar
                 </Button>

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

@@ -12,6 +12,7 @@ import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Textarea } from '@/components/ui/textarea';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import { FileText, Settings, Eye, ArrowLeft, BookOpen } from 'lucide-react';
 
 export default function EditarLaudoPage() {
@@ -29,6 +30,7 @@ export default function EditarLaudoPage() {
   const [activeTab, setActiveTab] = useState('editor');
   const [showPreview, setShowPreview] = useState(false);
   const [loading, setLoading] = useState(true);
+  const [showExitDialog, setShowExitDialog] = useState(false);
 
   // Campos do laudo
   const [campos, setCampos] = useState({
@@ -69,34 +71,45 @@ export default function EditarLaudoPage() {
   // Estado para rastrear alinhamento ativo
   const [activeAlignment, setActiveAlignment] = useState('left');
 
-  // Salvar conteúdo no localStorage sempre que muda
+  // Salvar conteúdo no localStorage sempre que muda (com debounce)
   useEffect(() => {
-    if (content && laudoId) {
+    const timeoutId = setTimeout(() => {
-      localStorage.setItem(`laudo-draft-${laudoId}`, content);
+      if (laudoId) {
-    }
+        // Capturar conteúdo atual do editor antes de salvar
-  }, [content, laudoId]);
+        const currentContent = editorRef.current?.innerHTML || content;
-
+        
-  // Sincronizar conteúdo com o editor
+        const draft = {
-  useEffect(() => {
+          content: currentContent,
-    if (editorRef.current && content) {
+          campos,
-      if (editorRef.current.innerHTML !== content) {
+          lastSaved: new Date().toISOString(),
-        editorRef.current.innerHTML = content;
+        };
+        
+        localStorage.setItem(`laudo-draft-${laudoId}`, JSON.stringify(draft));
       }
-    }
+    }, 1000); // Aguarda 1 segundo após última mudança
-  }, [content]);
 
-  // Restaurar conteúdo quando volta para a aba editor
+    return () => clearTimeout(timeoutId);
-  useEffect(() => {
+  }, [content, campos, laudoId]);
-    if (activeTab === 'editor' && editorRef.current && content) {
+
-      editorRef.current.focus();
+  // Função para trocar de aba salvando conteúdo antes
-      const range = document.createRange();
+  const handleTabChange = (newTab: string) => {
-      const sel = window.getSelection();
+    // Salvar conteúdo do editor antes de trocar
-      range.setStart(editorRef.current, editorRef.current.childNodes.length);
+    if (editorRef.current) {
-      range.collapse(true);
+      const editorContent = editorRef.current.innerHTML;
-      sel?.removeAllRanges();
+      setContent(editorContent);
-      sel?.addRange(range);
     }
-  }, [activeTab]);
+    
+    // Se estiver voltando para o editor, restaurar conteúdo
+    if (newTab === 'editor') {
+      setTimeout(() => {
+        if (editorRef.current && content) {
+          editorRef.current.innerHTML = content;
+        }
+      }, 0);
+    }
+    
+    setActiveTab(newTab);
+  };
 
   // Atualizar formatações ativas ao mudar seleção
   useEffect(() => {
@@ -162,25 +175,49 @@ export default function EditarLaudoPage() {
           mostrarAssinatura: !r.hide_signature,
         });
 
-        // Preencher conteúdo
+        // Preencher conteúdo - verificar todos os possíveis nomes de campo
-        const contentHtml = r.content_html || r.conteudo_html || '';
+        const contentHtml = r.content_html || r.conteudo_html || r.contentHtml || r.conteudo || r.content || '';
+        console.log('[EditarLaudoPage] Loading content - report:', r);
+        console.log('[EditarLaudoPage] Content fields check:', {
+          content_html: r.content_html,
+          conteudo_html: r.conteudo_html,
+          contentHtml: r.contentHtml,
+          conteudo: r.conteudo,
+          content: r.content,
+          finalContent: contentHtml
+        });
         
         // Verificar se existe rascunho salvo no localStorage
-        const draftContent = typeof window !== 'undefined' ? localStorage.getItem(`laudo-draft-${laudoId}`) : null;
+        let finalContent = contentHtml;
-        const finalContent = draftContent || contentHtml;
+        let finalCampos = {
+          cid: r.cid_code || r.cid || '',
+          diagnostico: r.diagnosis || r.diagnostico || '',
+          conclusao: r.conclusion || r.conclusao || '',
+          exame: r.exam || r.exame || '',
+          especialidade: r.especialidade || '',
+          mostrarData: !r.hide_date,
+          mostrarAssinatura: !r.hide_signature,
+        };
         
-        setContent(finalContent);
+        if (typeof window !== 'undefined') {
-        if (editorRef.current) {
+          const draftData = localStorage.getItem(`laudo-draft-${laudoId}`);
-          editorRef.current.innerHTML = finalContent;
+          if (draftData) {
-          // Colocar cursor no final do texto
+            try {
-          editorRef.current.focus();
+              const draft = JSON.parse(draftData);
-          const range = document.createRange();
+              if (draft.content) finalContent = draft.content;
-          const sel = window.getSelection();
+              if (draft.campos) finalCampos = { ...finalCampos, ...draft.campos };
-          range.setStart(editorRef.current, editorRef.current.childNodes.length);
+            } catch (err) {
-          range.collapse(true);
+              // Se falhar parse, tentar como string simples (formato antigo)
-          sel?.removeAllRanges();
+              finalContent = draftData;
-          sel?.addRange(range);
+            }
+          }
         }
+        
+        setCampos(finalCampos);
+        setContent(finalContent);
+        console.log('[EditarLaudoPage] Setting content state with length:', finalContent.length);
+        
+        // O innerHTML será setado no useEffect separado abaixo
       } catch (err) {
         console.warn('Erro ao carregar laudo:', err);
         toast({
@@ -195,6 +232,27 @@ export default function EditarLaudoPage() {
     fetchLaudo();
   }, [laudoId, token, toast]);
 
+  // UseEffect separado para injetar o conteúdo no editor quando estiver pronto
+  useEffect(() => {
+    if (content && editorRef.current && !loading) {
+      console.log('[EditarLaudoPage] Injecting content into editor, length:', content.length);
+      // Só injetar se o conteúdo do editor estiver vazio ou muito diferente
+      const currentContent = editorRef.current.innerHTML;
+      if (!currentContent || currentContent.length === 0) {
+        editorRef.current.innerHTML = content;
+        // Mover cursor para o final
+        const range = document.createRange();
+        const sel = window.getSelection();
+        if (editorRef.current.childNodes.length > 0) {
+          range.selectNodeContents(editorRef.current);
+          range.collapse(false); // false = colapsar no final
+          sel?.removeAllRanges();
+          sel?.addRange(range);
+        }
+      }
+    }
+  }, [content, loading]);
+
   // Formatação com contenteditable
   const applyFormat = (command: string, value?: string) => {
     document.execCommand(command, false, value || undefined);
@@ -332,7 +390,7 @@ export default function EditarLaudoPage() {
               <Button
                 variant="ghost"
                 size="sm"
-                onClick={() => router.back()}
+                onClick={() => setShowExitDialog(true)}
                 className="p-0 h-auto flex-shrink-0"
               >
                 <ArrowLeft className="w-4 sm:w-5 h-4 sm:h-5" />
@@ -357,7 +415,7 @@ export default function EditarLaudoPage() {
           {/* Tabs */}
           <div className="flex border-b border-border bg-card overflow-x-auto flex-shrink-0">
             <button
-              onClick={() => setActiveTab('editor')}
+              onClick={() => handleTabChange('editor')}
               className={`px-2 sm:px-4 py-2 text-xs sm:text-sm font-medium border-b-2 transition-colors whitespace-nowrap ${
                 activeTab === 'editor'
                   ? 'border-blue-500 text-blue-600'
@@ -368,7 +426,7 @@ export default function EditarLaudoPage() {
               Editor
             </button>
             <button
-              onClick={() => setActiveTab('campos')}
+              onClick={() => handleTabChange('campos')}
               className={`px-2 sm:px-4 py-2 text-xs sm:text-sm font-medium border-b-2 transition-colors whitespace-nowrap ${
                 activeTab === 'campos'
                   ? 'border-blue-500 text-blue-600'
@@ -539,7 +597,10 @@ export default function EditarLaudoPage() {
                     <div
                       ref={editorRef}
                       contentEditable
-                      onInput={(e) => setContent(e.currentTarget.innerHTML)}
+                      onInput={(e) => {
+                        // Capturar conteúdo sem perder posição do cursor
+                        setContent(e.currentTarget.innerHTML);
+                      }}
                       onPaste={(e) => {
                         e.preventDefault();
                         const text = e.clipboardData.getData('text/plain');
@@ -711,7 +772,7 @@ export default function EditarLaudoPage() {
               Edite as informações do laudo e salve as alterações.
             </div>
             <div className="flex gap-2 w-full sm:w-auto">
-              <Button variant="outline" onClick={() => router.back()} className="flex-1 sm:flex-none text-xs sm:text-sm h-8 sm:h-10 hover:bg-blue-50 dark:hover:bg-blue-950">
+              <Button variant="outline" onClick={() => setShowExitDialog(true)} className="flex-1 sm:flex-none text-xs sm:text-sm h-8 sm:h-10 hover:bg-blue-50 dark:hover:bg-blue-950">
                 Cancelar
               </Button>
               <Button onClick={handleSave} className="flex-1 sm:flex-none text-xs sm:text-sm h-8 sm:h-10">
@@ -720,6 +781,66 @@ export default function EditarLaudoPage() {
             </div>
           </div>
         </div>
+
+        {/* Dialog de confirmação de saída */}
+        <Dialog open={showExitDialog} onOpenChange={setShowExitDialog}>
+          <DialogContent className="sm:max-w-md">
+            <DialogHeader>
+              <DialogTitle>Salvar Rascunho?</DialogTitle>
+              <DialogDescription>
+                Você tem informações não salvas. Deseja salvar como rascunho para continuar depois?
+              </DialogDescription>
+            </DialogHeader>
+            <DialogFooter className="flex-col sm:flex-row gap-2">
+              <Button
+                variant="outline"
+                onClick={() => {
+                  // Limpar rascunho
+                  localStorage.removeItem(`laudo-draft-${laudoId}`);
+                  setShowExitDialog(false);
+                  router.back();
+                }}
+                className="w-full sm:w-auto hover:bg-gray-100 dark:hover:bg-gray-800"
+              >
+                Descartar
+              </Button>
+              <Button
+                variant="outline"
+                onClick={() => {
+                  setShowExitDialog(false);
+                  router.back();
+                }}
+                className="w-full sm:w-auto hover:bg-gray-100 dark:hover:bg-gray-800"
+              >
+                Voltar
+              </Button>
+              <Button
+                onClick={() => {
+                  // Salvar rascunho manualmente antes de sair
+                  const currentContent = editorRef.current?.innerHTML || content;
+                  const draft = {
+                    content: currentContent,
+                    campos,
+                    lastSaved: new Date().toISOString(),
+                  };
+                  localStorage.setItem(`laudo-draft-${laudoId}`, JSON.stringify(draft));
+                  
+                  toast({
+                    title: 'Rascunho salvo!',
+                    description: 'Suas alterações foram salvas.',
+                    variant: 'default',
+                  });
+                  
+                  setShowExitDialog(false);
+                  router.back();
+                }}
+                className="w-full sm:w-auto"
+              >
+                Salvar Rascunho
+              </Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
       </div>
     </ProtectedRoute>
   );

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

@@ -5,7 +5,7 @@ import { useRouter, useParams } from 'next/navigation'
 import { useTheme } from 'next-themes'
 import Image from 'next/image'
 import { Button } from '@/components/ui/button'
-import { ArrowLeft, Printer, Download, MoreVertical } from 'lucide-react'
+import { ArrowLeft, Printer, Download } from 'lucide-react'
 import { buscarRelatorioPorId, getDoctorById, buscarMedicosPorIds, buscarPacientePorId } from '@/lib/api'
 import { ENV_CONFIG } from '@/lib/env-config'
 import ProtectedRoute from '@/components/shared/ProtectedRoute'
@@ -355,18 +355,6 @@ export default function LaudoPage() {
               >
                 <Printer className="w-5 h-5" />
               </Button>
-              <Button
-                variant="ghost"
-                size="icon"
-                title="Mais opções"
-                className={`${
-                  isDark 
-                    ? 'text-slate-300 hover:bg-slate-700 hover:text-white' 
-                    : 'text-slate-600 hover:bg-slate-100 hover:text-slate-900'
-                }`}
-              >
-                <MoreVertical className="w-5 h-5" />
-              </Button>
             </div>
           </div>
         </div>

susconecta/app/paciente/page.tsx

@@ -602,7 +602,7 @@ export default function PacientePage() {
 
         {/* Cards com Informações */}
         <div className="grid grid-cols-1 gap-3 sm:gap-4 md:gap-4 md:grid-cols-2">
-          <Card className="group rounded-2xl border border-border/60 bg-card/70 p-4 sm:p-5 md:p-5 backdrop-blur-sm shadow-sm transition hover:shadow-md">
+          <Card className="group rounded-2xl border border-border/60 bg-card p-4 sm:p-5 md:p-5 shadow-sm transition hover:shadow-md">
             <div className="flex h-32 sm:h-36 md:h-40 w-full flex-col items-center justify-center gap-2 sm:gap-3">
               <div className="flex h-10 w-10 sm:h-11 sm:w-11 md:h-12 md:w-12 items-center justify-center rounded-full bg-primary/10 text-primary">
                 <Calendar className="h-5 w-5 sm:h-5 sm:w-5 md:h-6 md:w-6" aria-hidden />
@@ -616,7 +616,7 @@ export default function PacientePage() {
             </div>
           </Card>
 
-          <Card className="group rounded-2xl border border-border/60 bg-card/70 p-4 sm:p-5 md:p-5 backdrop-blur-sm shadow-sm transition hover:shadow-md">
+          <Card className="group rounded-2xl border border-border/60 bg-card p-4 sm:p-5 md:p-5 shadow-sm transition hover:shadow-md">
             <div className="flex h-32 sm:h-36 md:h-40 w-full flex-col items-center justify-center gap-2 sm:gap-3">
               <div className="flex h-10 w-10 sm:h-11 sm:w-11 md:h-12 md:w-12 items-center justify-center rounded-full bg-primary/10 text-primary">
                 <FileText className="h-5 w-5 sm:h-5 sm:w-5 md:h-6 md:w-6" aria-hidden />
@@ -1698,7 +1698,6 @@ export default function PacientePage() {
                 </div>
                 <div className="flex gap-2 w-full md:w-auto flex-col sm:flex-row">
                   <Button variant="outline" className="hover:bg-primary! hover:text-white! transition-colors text-xs sm:text-sm w-full md:w-auto" onClick={async () => { router.push(`/laudos/${r.id}`); }}>{strings.visualizarLaudo}</Button>
-                  <Button variant="secondary" className="hover:bg-primary! hover:text-white! transition-colors text-xs sm:text-sm w-full md:w-auto" onClick={async () => { try { await navigator.clipboard.writeText(JSON.stringify(r)); setToast({ type: 'success', msg: 'Laudo copiado.' }) } catch { setToast({ type: 'error', msg: 'Falha ao copiar.' }) } }}>{strings.compartilhar}</Button>
                 </div>
               </div>
                   ))}
@@ -1763,7 +1762,7 @@ export default function PacientePage() {
         </div>
 
         {/* Grid de 3 colunas (2 + 1) */}
-        <div className="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-3 gap-4 sm:gap-5 md:gap-6">
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 sm:gap-5 md:gap-6">
           {/* Coluna Esquerda - Informações Pessoais */}
           <div className="lg:col-span-2 space-y-4 sm:space-y-5 md:space-y-6">
             {/* Informações Pessoais */}
@@ -1889,31 +1888,20 @@ export default function PacientePage() {
             <div className="border border-border rounded-lg p-3 sm:p-4 md:p-6">
               <h3 className="text-base sm:text-lg md:text-lg font-semibold mb-3 sm:mb-4">Foto do Perfil</h3>
 
-              {isEditingProfile ? (
+              <div className="flex flex-col items-center gap-3 sm:gap-4">
-                <div className="space-y-3 sm:space-y-4">
+                <Avatar className="h-20 w-20 sm:h-24 sm:w-24 md:h-28 md:w-28">
-                  <UploadAvatar
+                  <AvatarImage src={profileData.foto_url} alt={profileData.nome || 'Avatar'} />
-                    userId={profileData.id}
+                  <AvatarFallback className="bg-primary text-primary-foreground text-lg sm:text-xl md:text-2xl font-bold">
-                    currentAvatarUrl={profileData.foto_url || "/avatars/01.png"}
+                    {profileData.nome?.split(' ').map((n: string) => n[0]).join('').toUpperCase().slice(0, 2) || 'PC'}
-                    onAvatarChange={(newUrl) => handleProfileChange('foto_url', newUrl)}
+                  </AvatarFallback>
-                    userName={profileData.nome}
+                </Avatar>
-                  />
-                </div>
-              ) : (
-                <div className="flex flex-col items-center gap-3 sm:gap-4">
-                  <Avatar className="h-20 w-20 sm:h-24 sm:w-24 md:h-28 md:w-28">
-                    <AvatarImage src={profileData.foto_url} alt={profileData.nome || 'Avatar'} />
-                    <AvatarFallback className="bg-primary text-primary-foreground text-lg sm:text-xl md:text-2xl font-bold">
-                      {profileData.nome?.split(' ').map((n: string) => n[0]).join('').toUpperCase().slice(0, 2) || 'PC'}
-                    </AvatarFallback>
-                  </Avatar>
 
-                  <div className="text-center space-y-2">
+                <div className="text-center space-y-2">
-                    <p className="text-xs sm:text-sm md:text-base text-muted-foreground">
+                  <p className="text-xs sm:text-sm md:text-base text-muted-foreground">
-                      {profileData.nome?.split(' ').map((n: string) => n[0]).join('').toUpperCase().slice(0, 2) || 'PC'}
+                    {profileData.nome?.split(' ').map((n: string) => n[0]).join('').toUpperCase().slice(0, 2) || 'PC'}
-                    </p>
+                  </p>
-                  </div>
                 </div>
-              )}
+              </div>
             </div>
           </div>
         </div>
@@ -1926,23 +1914,35 @@ export default function PacientePage() {
     <ProtectedRoute requiredUserType={["paciente"]}>
       <div className="container mx-auto px-2 sm:px-4 py-6 sm:py-8">
         {/* Header com informações do paciente */}
-        <header className="sticky top-0 z-40 bg-card shadow-md rounded-lg border border-border p-3 sm:p-4 md:p-4 mb-4 sm:mb-6 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 sm:gap-4">
+        <header className="sticky top-0 z-40 bg-card shadow-md rounded-lg border border-border p-2 sm:p-3 md:p-4 mb-4 sm:mb-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between sm:gap-4">
-          <div className="flex items-center gap-2 sm:gap-4">
+          <div className="flex items-center gap-2 sm:gap-3 min-w-0 flex-1">
-            <Avatar className="h-10 w-10 sm:h-12 sm:w-12 md:h-12 md:w-12">
+            {/* Logo MEDIConnect */}
+            <div className="flex items-center gap-2 mr-2 sm:mr-3 shrink-0">
+              <div className="w-8 h-8 sm:w-9 sm:h-9 bg-primary rounded-lg flex items-center justify-center">
+                <Stethoscope className="w-4 h-4 sm:w-5 sm:h-5 text-primary-foreground" />
+              </div>
+              <span className="text-base sm:text-sm font-semibold text-foreground hidden sm:inline">
+                MEDIConnect
+              </span>
+            </div>
+            
+            <div className="h-6 w-px bg-border hidden sm:block"></div>
+            
+            <Avatar className="h-10 w-10 sm:h-10 sm:w-10 shrink-0">
               <AvatarImage src={profileData.foto_url} alt={profileData.nome || 'Avatar'} />
-              <AvatarFallback className="bg-primary text-white font-bold text-sm sm:text-base">{profileData.nome?.charAt(0) || 'P'}</AvatarFallback>
+              <AvatarFallback className="bg-primary text-white font-bold text-xs sm:text-sm">{profileData.nome?.charAt(0) || 'P'}</AvatarFallback>
             </Avatar>
-            <div className="flex flex-col min-w-0">
+            <div className="flex flex-col min-w-0 flex-1">
-              <span className="text-xs sm:text-sm md:text-sm text-muted-foreground">Conta do paciente</span>
+              <span className="text-xs text-muted-foreground truncate">Conta do paciente</span>
-              <span className="font-bold text-sm sm:text-base md:text-lg leading-none">{profileData.nome || 'Paciente'}</span>
+              <span className="font-bold text-xs sm:text-sm leading-tight truncate">{profileData.nome || 'Paciente'}</span>
-              <span className="text-xs sm:text-sm md:text-sm text-muted-foreground truncate">{profileData.email || 'Email não disponível'}</span>
+              <span className="text-xs text-muted-foreground truncate">{profileData.email || 'Email não disponível'}</span>
             </div>
           </div>
-          <div className="flex items-center gap-2 sm:gap-3 w-full sm:w-auto">
+          <div className="flex items-center gap-2 w-full sm:w-auto shrink-0">
             <SimpleThemeToggle />
-            <Button asChild variant="outline" className="hover:bg-primary! hover:text-white! hover:border-primary! transition-colors flex-1 sm:flex-none text-xs sm:text-sm">
+            <Button asChild variant="outline" className="hover:bg-blue-500 hover:text-white transition-colors flex-1 sm:flex-none text-xs sm:text-sm py-1.5 sm:py-2 h-8 sm:h-9 px-2 sm:px-3">
               <Link href="/">
-                <Home className="h-3 w-3 sm:h-4 sm:w-4 mr-1" /> Início
+                <Home className="h-3 w-3 sm:h-4 sm:w-4" /> <span className="hidden sm:inline ml-1">Início</span>
               </Link>
             </Button>
             <Button 
@@ -1950,9 +1950,9 @@ export default function PacientePage() {
               variant="outline" 
               aria-label={strings.sair} 
               disabled={loading} 
-              className="text-destructive border-destructive hover:bg-destructive! hover:text-white! hover:border-destructive! transition-colors"
+              className="text-destructive border-destructive hover:bg-destructive/20 hover:text-destructive transition-colors text-xs sm:text-sm py-1.5 sm:py-2 h-8 sm:h-9 px-2 sm:px-3"
             >
-              <LogOut className="h-4 w-4 mr-1" /> {strings.sair}
+              <LogOut className="h-3 w-3 sm:h-4 sm:w-4" /> <span className="hidden sm:inline ml-1">{strings.sair}</span>
             </Button>
           </div>
         </header>
@@ -1960,8 +1960,8 @@ export default function PacientePage() {
         {/* Layout com sidebar e conteúdo */}
         <div className="grid grid-cols-1 md:grid-cols-[200px_1fr] lg:grid-cols-[220px_1fr] gap-4 sm:gap-5 md:gap-6">
           {/* Sidebar vertical - sticky */}
-          <aside className="sticky top-24 h-fit md:top-24">
+          <aside className="sticky top-24 h-fit md:top-24 z-40">
-            <nav aria-label="Navegação do dashboard" className="bg-card shadow-md rounded-lg border border-border p-1.5 sm:p-2 md:p-3 z-30">
+            <nav aria-label="Navegação do dashboard" className="relative isolate bg-card shadow-lg rounded-lg border border-border p-1.5 sm:p-2 md:p-3 z-50">
               <div className="grid grid-cols-2 md:grid-cols-1 gap-1 sm:gap-1.5">
                 <Button
                   variant={tab==='dashboard'?'default':'ghost'}

susconecta/app/paciente/resultados/ResultadosClient.tsx

@@ -9,7 +9,7 @@ import { Card } from '@/components/ui/card'
 import { Toggle } from '@/components/ui/toggle'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
 import { Badge } from '@/components/ui/badge'
-import { Avatar, AvatarFallback } from '@/components/ui/avatar'
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import {
@@ -31,6 +31,7 @@ import {
   buscarPacientes,
   listarDisponibilidades,
   listarExcecoes,
+  getAvatarPublicUrl,
   type Medico,
 } from '@/lib/api'
 
@@ -66,6 +67,9 @@ export default function ResultadosClient() {
   const [patientId, setPatientId] = useState<string | null>(null)
   const [medicos, setMedicos] = useState<Medico[]>([])
   const [loadingMedicos, setLoadingMedicos] = useState(false)
+  
+  // Avatares dos médicos
+  const [medicosAvatars, setMedicosAvatars] = useState<Record<string, string>>({})
 
   // agenda por médico e loading por médico
   const [agendaByDoctor, setAgendaByDoctor] = useState<Record<string, DayAgenda[]>>({})
@@ -250,6 +254,22 @@ export default function ResultadosClient() {
     return () => { mounted = false }
   }, [medicoFiltro, paramsSync])
 
+  // Carregar avatares dos médicos quando a lista mudar
+  useEffect(() => {
+    if (!medicos || medicos.length === 0) return
+    
+    const avatars: Record<string, string> = {}
+    
+    // Gerar URLs dos avatares sem fazer verificação (deixar o browser carregar)
+    for (const medico of medicos) {
+      if (!medico.id) continue
+      // Usar jpg como padrão (mais comum)
+      avatars[medico.id] = getAvatarPublicUrl(medico.id, 'jpg')
+    }
+    
+    setMedicosAvatars(avatars)
+  }, [medicos])
+
   // 3) Carregar horários disponíveis para um médico (próximos 7 dias) e agrupar por dia
   async function loadAgenda(doctorId: string): Promise<{ iso: string; label: string } | null> {
   if (!doctorId) return null
@@ -856,17 +876,6 @@ export default function ResultadosClient() {
               </Select>
             </div>
 
-            {/* Mais filtros / Voltar */}
-            <div className="sm:col-span-4">
-              <Button
-                variant="outline"
-                className="h-10 w-full rounded-full border border-primary/30 bg-primary/5 text-primary hover:bg-primary hover:text-primary-foreground"
-              >
-                <Filter className="mr-2 h-4 w-4" />
-                Mais filtros
-              </Button>
-            </div>
-
             {/* Voltar */}
             <div className="sm:col-span-12">
               <Button
@@ -900,7 +909,7 @@ export default function ResultadosClient() {
             const cidade = medico.city || '—'
             const precoTipoConsulta = tipoConsulta === 'local' ? 'R$ —' : 'R$ —'
             
-            // Usar os próximos 3 horários já memoizados
+            // Usar os próxios 3 horários já memoizados
             const proximos3Horarios = proximosHorariosPorMedico[id] || []
 
             return (
@@ -911,6 +920,7 @@ export default function ResultadosClient() {
                 {/* Header com Avatar, Nome, Especialidade e Botão Ver Perfil */}
                 <div className="flex gap-4 items-start">
                   <Avatar className="h-20 w-20 border-2 border-primary/20 bg-primary/5 flex-shrink-0">
+                    {medicosAvatars[id] && <AvatarImage src={medicosAvatars[id]} alt={nome} />}
                     <AvatarFallback className="bg-primary/10 text-primary text-lg font-semibold">
                       {nome.split(' ').map(n => n[0]).join('').substring(0, 2).toUpperCase()}
                     </AvatarFallback>
@@ -980,7 +990,7 @@ export default function ResultadosClient() {
                 {/* Ações */}
                 <div className="flex gap-2 pt-2">
                   <Button
-                    className="flex-1 h-10 rounded-full bg-primary text-primary-foreground hover:bg-primary/90"
+                    className="w-full h-10 rounded-full bg-primary text-primary-foreground hover:bg-primary/90"
                     onClick={async () => {
                       setMoreTimesForDoctor(id)
                       void fetchSlotsForDate(id, moreTimesDate)
@@ -988,16 +998,6 @@ export default function ResultadosClient() {
                   >
                     Agendar
                   </Button>
-                  <Button
-                    variant="outline"
-                    className="flex-1 h-10 rounded-full border-primary/40 text-primary hover:bg-primary/10"
-                    onClick={() => {
-                      setMoreTimesForDoctor(id)
-                      void fetchSlotsForDate(id, moreTimesDate)
-                    }}
-                  >
-                    Mais horários
-                  </Button>
                 </div>
               </Card>
             )
@@ -1030,11 +1030,11 @@ export default function ResultadosClient() {
               </div>
 
               <div className="flex items-center gap-2 w-full sm:w-auto">
-                <Button variant="outline" size="sm" onClick={() => setCurrentPage(1)} disabled={currentPage === 1} className="hover:bg-primary! hover:text-white!">Primeira</Button>
+                <Button variant="outline" size="sm" onClick={() => setCurrentPage(1)} disabled={currentPage === 1} className="hover:bg-blue-500 hover:text-white dark:hover:bg-blue-600 dark:hover:text-white">Primeira</Button>
-                <Button variant="outline" size="sm" onClick={() => setCurrentPage(p => Math.max(1, p - 1))} disabled={currentPage === 1} className="hover:bg-primary! hover:text-white!">Anterior</Button>
+                <Button variant="outline" size="sm" onClick={() => setCurrentPage(p => Math.max(1, p - 1))} disabled={currentPage === 1} className="hover:bg-blue-500 hover:text-white dark:hover:bg-blue-600 dark:hover:text-white">Anterior</Button>
                 <span className="text-sm text-muted-foreground">Página {currentPage} de {totalPages}</span>
-                <Button variant="outline" size="sm" onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))} disabled={currentPage === totalPages} className="hover:bg-primary! hover:text-white!">Próxima</Button>
+                <Button variant="outline" size="sm" onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))} disabled={currentPage === totalPages} className="hover:bg-blue-500 hover:text-white dark:hover:bg-blue-600 dark:hover:text-white">Próxima</Button>
-                <Button variant="outline" size="sm" onClick={() => setCurrentPage(totalPages)} disabled={currentPage === totalPages} className="hover:bg-primary! hover:text-white!">Última</Button>
+                <Button variant="outline" size="sm" onClick={() => setCurrentPage(totalPages)} disabled={currentPage === totalPages} className="hover:bg-blue-500 hover:text-white dark:hover:bg-blue-600 dark:hover:text-white">Última</Button>
               </div>
             </div>
           )}
@@ -1165,8 +1165,17 @@ export default function ResultadosClient() {
             </DialogHeader>
             
             <div className="flex items-center gap-2 mb-4">
-              <input type="date" className="flex-1 rounded-md border border-border px-3 py-2 text-sm" value={moreTimesDate} onChange={(e) => setMoreTimesDate(e.target.value)} />
+              <input 
-              <Button className="h-10" onClick={async () => { if (moreTimesForDoctor) await fetchSlotsForDate(moreTimesForDoctor, moreTimesDate) }}>Buscar horários</Button>
+                type="date" 
+                className="flex-1 rounded-md border border-border px-3 py-2 text-sm" 
+                value={moreTimesDate} 
+                onChange={(e) => {
+                  setMoreTimesDate(e.target.value)
+                  if (moreTimesForDoctor) {
+                    void fetchSlotsForDate(moreTimesForDoctor, e.target.value)
+                  }
+                }} 
+              />
             </div>
 
             <div className="mt-2">
@@ -1175,12 +1184,14 @@ export default function ResultadosClient() {
               ) : moreTimesException ? (
                 <div className="text-sm text-red-500">{moreTimesException}</div>
               ) : (moreTimesSlots.length ? (
-                <div className="grid grid-cols-3 gap-2">
+                <div className="max-h-[60vh] overflow-y-auto pr-2">
-                  {moreTimesSlots.map(s => (
+                  <div className="grid grid-cols-3 gap-2">
-                    <button key={s.iso} type="button" className="rounded-lg bg-primary/10 px-3 py-2 text-sm text-primary hover:bg-primary hover:text-primary-foreground" onClick={() => { if (moreTimesForDoctor) { openConfirmDialog(moreTimesForDoctor, s.iso); setMoreTimesForDoctor(null); } }}>
+                    {moreTimesSlots.map(s => (
-                      {s.label}
+                      <button key={s.iso} type="button" className="rounded-lg bg-primary/10 px-3 py-2 text-sm text-primary hover:bg-primary hover:text-primary-foreground transition-colors" onClick={() => { if (moreTimesForDoctor) { openConfirmDialog(moreTimesForDoctor, s.iso); setMoreTimesForDoctor(null); } }}>
-                    </button>
+                        {s.label}
-                  ))}
+                      </button>
+                    ))}
+                  </div>
                 </div>
               ) : (
                 <div className="text-sm text-muted-foreground">Sem horários para a data selecionada.</div>

susconecta/app/profissional/page.tsx

@@ -9,7 +9,7 @@ import { useAuth } from "@/hooks/useAuth";
 import { useToast } from "@/hooks/use-toast";
 import { useAvatarUrl } from "@/hooks/useAvatarUrl";
 import { UploadAvatar } from '@/components/ui/upload-avatar';
-import { buscarPacientes, listarPacientes, buscarPacientePorId, buscarPacientesPorIds, buscarMedicoPorId, buscarMedicosPorIds, buscarMedicos, listarAgendamentos, type Paciente, buscarRelatorioPorId, atualizarMedico } from "@/lib/api";
+import { buscarPacientes, listarPacientes, buscarPacientePorId, buscarPacientesPorIds, buscarMedicoPorId, buscarMedicosPorIds, buscarMedicos, listarAgendamentos, type Paciente, buscarRelatorioPorId, atualizarMedico, listarDisponibilidades, DoctorAvailability, deletarDisponibilidade, listarExcecoes, DoctorException, deletarExcecao } from "@/lib/api";
 import { ENV_CONFIG } from '@/lib/env-config';
 import { useReports } from "@/hooks/useReports";
 import { CreateReportData } from "@/types/report-types";
@@ -19,6 +19,8 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
 import { Select, SelectTrigger, SelectContent, SelectItem, SelectValue } from "@/components/ui/select";
+import AvailabilityForm from '@/components/features/forms/availability-form';
+import ExceptionForm from '@/components/features/forms/exception-form';
 import { SimpleThemeToggle } from "@/components/ui/simple-theme-toggle";
 import {
   Table,
@@ -65,6 +67,29 @@ const colorsByType = {
   Oftalmologia: "#2ecc71"
 };
 
+  // Função para traduzir dias da semana
+  function translateWeekday(w?: string) {
+    if (!w) return '';
+    const key = w.toString().toLowerCase().normalize('NFD').replace(/\p{Diacritic}/gu, '').replace(/[^a-z0-9]/g, '');
+    const map: Record<string, string> = {
+      'segunda': 'Segunda',
+      'terca': 'Terça',
+      'quarta': 'Quarta',
+      'quinta': 'Quinta',
+      'sexta': 'Sexta',
+      'sabado': 'Sábado',
+      'domingo': 'Domingo',
+      'monday': 'Segunda',
+      'tuesday': 'Terça',
+      'wednesday': 'Quarta',
+      'thursday': 'Quinta',
+      'friday': 'Sexta',
+      'saturday': 'Sábado',
+      'sunday': 'Domingo',
+    };
+    return map[key] ?? w;
+  }
+
   // Helpers para normalizar dados de paciente (suporta schema antigo e novo)
   const getPatientName = (p: any) => p?.full_name ?? p?.nome ?? '';
   const getPatientCpf = (p: any) => p?.cpf ?? '';
@@ -132,6 +157,17 @@ const ProfissionalPage = () => {
   const [isEditingProfile, setIsEditingProfile] = useState(false);
   const [doctorId, setDoctorId] = useState<string | null>(null);
   
+  // Estados para disponibilidades e exceções do médico logado
+  const [availabilities, setAvailabilities] = useState<DoctorAvailability[]>([]);
+  const [exceptions, setExceptions] = useState<DoctorException[]>([]);
+  const [availabilitiesForCreate, setAvailabilitiesForCreate] = useState<DoctorAvailability[]>([]);
+  const [availLoading, setAvailLoading] = useState(false);
+  const [exceptLoading, setExceptLoading] = useState(false);
+  const [editingAvailability, setEditingAvailability] = useState<DoctorAvailability | null>(null);
+  const [editingException, setEditingException] = useState<DoctorException | null>(null);
+  const [showAvailabilityForm, setShowAvailabilityForm] = useState(false);
+  const [showExceptionForm, setShowExceptionForm] = useState(false);
+  
   // Hook para carregar automaticamente o avatar do médico
   const { avatarUrl: retrievedAvatarUrl } = useAvatarUrl(doctorId);
   // Removemos o placeholder extenso — inicializamos com valores minimalistas e vazios.
@@ -286,6 +322,48 @@ const ProfissionalPage = () => {
     }
   }, [retrievedAvatarUrl]);
 
+  // Carregar disponibilidades e exceções do médico logado
+  const reloadAvailabilities = async (medId?: string) => {
+    const id = medId || doctorId;
+    if (!id) return;
+    try {
+      setAvailLoading(true);
+      const avails = await listarDisponibilidades({ doctorId: id, active: true });
+      setAvailabilities(Array.isArray(avails) ? avails : []);
+    } catch (e) {
+      console.warn('[ProfissionalPage] Erro ao carregar disponibilidades:', e);
+      setAvailabilities([]);
+    } finally {
+      setAvailLoading(false);
+    }
+  };
+
+  const reloadExceptions = async (medId?: string) => {
+    const id = medId || doctorId;
+    if (!id) return;
+    try {
+      setExceptLoading(true);
+      console.log('[ProfissionalPage] Recarregando exceções para médico:', id);
+      const excepts = await listarExcecoes({ doctorId: id });
+      console.log('[ProfissionalPage] Exceções carregadas:', excepts);
+      setExceptions(Array.isArray(excepts) ? excepts : []);
+    } catch (e) {
+      console.warn('[ProfissionalPage] Erro ao carregar exceções:', e);
+      setExceptions([]);
+    } finally {
+      setExceptLoading(false);
+    }
+  };
+
+  // Carrega disponibilidades quando doctorId muda
+  useEffect(() => {
+    if (doctorId) {
+      reloadAvailabilities(doctorId);
+      reloadExceptions(doctorId);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [doctorId]);
+
 
   // Estados para campos principais da consulta
   const [consultaAtual, setConsultaAtual] = useState({
@@ -1216,14 +1294,56 @@ const ProfissionalPage = () => {
     // helper to load laudos for the patients assigned to the logged-in user
     const loadAssignedLaudos = async () => {
       try {
+        // Primeiro, tenta carregar laudos criados pelo próprio médico
+        console.log('[LaudoManager] Tentando carregar laudos criados pelo médico:', user?.id);
+        try {
+          const reportsMod = await import('@/lib/reports');
+          const allMyReports = await loadReports();
+          
+          if (Array.isArray(allMyReports) && allMyReports.length > 0) {
+            // Filtrar apenas os criados por mim
+            const createdByMe = allMyReports.filter((r: any) => {
+              const creator = ((r.created_by ?? r.executante ?? r.createdBy) || '').toString();
+              return user?.id && creator && creator === user.id;
+            });
+
+            if (createdByMe.length > 0) {
+              console.log('[LaudoManager] Encontrados', createdByMe.length, 'laudos criados pelo médico');
+              const enriched = await (async (reportsArr: any[]) => {
+                if (!reportsArr || !reportsArr.length) return reportsArr;
+                const pids = reportsArr.map(r => String(getReportPatientId(r))).filter(Boolean);
+                if (!pids.length) return reportsArr;
+                try {
+                  const patients = await buscarPacientesPorIds(pids);
+                  const map = new Map((patients || []).map((p: any) => [String(p.id), p]));
+                  return reportsArr.map((r: any) => {
+                    const pid = String(getReportPatientId(r));
+                    return { ...r, paciente: r.paciente ?? map.get(pid) ?? r.paciente } as any;
+                  });
+                } catch (e) {
+                  console.warn('[LaudoManager] Erro ao enriquecer pacientes:', e);
+                  return reportsArr;
+                }
+              })(createdByMe);
+              setLaudos(enriched || []);
+              return;
+            }
+          }
+        } catch (e) {
+          console.warn('[LaudoManager] erro ao carregar laudos criados pelo médico:', e);
+        }
+
+        // Fallback: carregar laudos de pacientes atribuídos
         const assignments = await import('@/lib/assignment').then(m => m.listAssignmentsForUser(user?.id || ''));
         const patientIds = Array.isArray(assignments) ? assignments.map(a => String(a.patient_id)).filter(Boolean) : [];
 
         if (patientIds.length === 0) {
+          console.log('[LaudoManager] Nenhum paciente atribuído, laudos vazios');
           setLaudos([]);
           return;
         }
 
+        console.log('[LaudoManager] Carregando laudos de', patientIds.length, 'pacientes atribuídos');
         try {
           const reportsMod = await import('@/lib/reports');
           if (typeof reportsMod.listarRelatoriosPorPacientes === 'function') {
@@ -1315,7 +1435,7 @@ const ProfissionalPage = () => {
           return;
         }
       } catch (e) {
-        console.warn('[LaudoManager] erro ao carregar laudos para pacientes atribuídos:', e);
+        console.warn('[LaudoManager] erro ao carregar laudos:', e);
         setLaudos(reports || []);
       }
     };
@@ -1396,13 +1516,13 @@ const ProfissionalPage = () => {
 
           {/* Filtros */}
           <div className="p-4 border-b border-border">
-            <div className="flex flex-wrap items-center gap-4">
+            <div className="flex flex-wrap items-start gap-4">
               <div className="relative flex-1 min-w-[200px]">
                 {/* Search input integrado com busca por ID */}
                 <SearchBox />
               </div>
               
-              <div className="flex items-center gap-2">
+              <div className="flex items-center gap-2 mt-0">
                 <div className="flex items-center gap-1 text-sm">
                   <CalendarIcon className="w-4 h-4" />
                   <Input type="date" value={startDate ?? ''} onChange={(e) => { setStartDate(e.target.value); setSelectedRange('custom'); }} className="p-1 text-sm h-10" />
@@ -1411,7 +1531,7 @@ const ProfissionalPage = () => {
                 </div>
               </div>
 
-              <div className="flex gap-2 items-center">
+              <div className="flex gap-2 items-center mt-0">
                 {/* date range buttons: Semana / Mês */}
                 <DateRangeButtons />
               </div>
@@ -1788,7 +1908,15 @@ const ProfissionalPage = () => {
   function LaudoEditor({ pacientes, laudo, onClose, isNewLaudo, preSelectedPatient, createNewReport, updateExistingReport, reloadReports, onSaved }: { pacientes?: any[]; laudo?: any; onClose: () => void; isNewLaudo?: boolean; preSelectedPatient?: any; createNewReport?: (data: any) => Promise<any>; updateExistingReport?: (id: string, data: any) => Promise<any>; reloadReports?: () => Promise<void>; onSaved?: (r:any) => void }) {
   const { toast } = useToast();
     const [activeTab, setActiveTab] = useState("editor");
-    const [content, setContent] = useState(laudo?.conteudo || "");
+    // Initialize content checking all possible field names
+    const initialContent = laudo?.conteudo ?? laudo?.content_html ?? laudo?.contentHtml ?? laudo?.content ?? "";
+    console.log('[LaudoEditor] Initializing content - laudo:', laudo, 'initialContent length:', initialContent?.length, 'fields:', {
+      conteudo: laudo?.conteudo,
+      content_html: laudo?.content_html, 
+      contentHtml: laudo?.contentHtml,
+      content: laudo?.content
+    });
+    const [content, setContent] = useState(initialContent);
     const [showPreview, setShowPreview] = useState(false);
     const [pacienteSelecionado, setPacienteSelecionado] = useState<any>(preSelectedPatient || null);
     const [listaPacientes, setListaPacientes] = useState<any[]>([]);
@@ -1875,8 +2003,10 @@ const ProfissionalPage = () => {
     // Carregar dados do laudo existente quando disponível (mais robusto: suporta vários nomes de campo)
     useEffect(() => {
       if (laudo && !isNewLaudo) {
+        console.log('[LaudoEditor useEffect] Loading existing laudo data:', laudo);
         // Conteúdo: aceita 'conteudo', 'content_html', 'contentHtml', 'content'
         const contentValue = laudo.conteudo ?? laudo.content_html ?? laudo.contentHtml ?? laudo.content ?? "";
+        console.log('[LaudoEditor useEffect] Content value length:', contentValue?.length, 'Setting content...');
         setContent(contentValue);
 
         // Campos: use vários fallbacks
@@ -2181,32 +2311,6 @@ const ProfissionalPage = () => {
               <FileText className="w-4 h-4 inline mr-1" />
               Editor
             </button>
-            <button
-              onClick={() => setActiveTab("imagens")}
-              className={`px-2 sm:px-4 py-1.5 sm:py-2 text-xs sm:text-sm font-medium border-b-2 transition-colors whitespace-nowrap ${
-                activeTab === "imagens"
-                  ? "border-blue-500 text-blue-600"
-                  : "border-transparent text-gray-600 dark:text-muted-foreground dark:hover:text-foreground dark:hover:bg-blue-900"
-              }`}
-              style={{
-                backgroundColor: activeTab === "imagens" ? undefined : "transparent"
-              }}
-              onMouseEnter={(e) => {
-                if (activeTab !== "imagens") {
-                  e.currentTarget.style.backgroundColor = "transparent";
-                  e.currentTarget.style.color = "#4B5563";
-                }
-              }}
-              onMouseLeave={(e) => {
-                if (activeTab !== "imagens") {
-                  e.currentTarget.style.backgroundColor = "transparent";
-                  e.currentTarget.style.color = "#4B5563";
-                }
-              }}
-            >
-              <Upload className="w-4 h-4 inline mr-1" />
-              Imagens ({imagens.length})
-            </button>
             <button
               onClick={() => setActiveTab("campos")}
               className={`px-2 sm:px-4 py-1.5 sm:py-2 text-xs sm:text-sm font-medium border-b-2 transition-colors whitespace-nowrap ${
@@ -2349,50 +2453,6 @@ const ProfissionalPage = () => {
                 </div>
               )}
 
-              {activeTab === "imagens" && (
-                <div className="flex-1 p-2 sm:p-4 overflow-y-auto">
-                  <div className="mb-3 sm:mb-4">
-                    <Label htmlFor="upload-images" className="text-xs sm:text-sm">Upload de Imagens</Label>
-                    <Input
-                      id="upload-images"
-                      type="file"
-                      multiple
-                      accept="image/*,.pdf"
-                      onChange={handleImageUpload}
-                      className="mt-1 text-xs"
-                    />
-                  </div>
-                  
-                  <div className="grid grid-cols-2 md:grid-cols-3 gap-2 sm:gap-4">
-                    {imagens.map((img) => (
-                      <div key={img.id} className="border border-border rounded-lg p-1.5 sm:p-2">
-                        {img.type.startsWith('image/') ? (
-                          // eslint-disable-next-line @next/next/no-img-element
-                          <img 
-                            src={img.url} 
-                            alt={img.name}
-                            className="w-full h-24 sm:h-32 object-cover rounded"
-                          />
-                        ) : (
-                          <div className="w-full h-24 sm:h-32 bg-muted rounded flex items-center justify-center">
-                            <FileText className="w-6 sm:w-8 h-6 sm:h-8 text-muted-foreground" />
-                          </div>
-                        )}
-                        <p className="text-xs text-muted-foreground mt-1 truncate">{img.name}</p>
-                        <Button
-                          variant="destructive"
-                          size="sm"
-                          className="w-full mt-1 text-xs"
-                          onClick={() => setImagens(prev => prev.filter(i => i.id !== img.id))}
-                        >
-                          Remover
-                        </Button>
-                      </div>
-                    ))}
-                  </div>
-                </div>
-              )}
-
               {activeTab === "campos" && (
                 <div className="flex-1 p-2 sm:p-4 space-y-2 sm:space-y-4 overflow-y-auto">
                   <div>
@@ -2746,7 +2806,178 @@ const ProfissionalPage = () => {
     </div>
   );
 
-  
+  const renderDisponibilidadesSection = () => {
+    // Filtrar apenas a primeira disponibilidade de cada dia da semana
+    const availabilityByDay = new Map<string, DoctorAvailability>();
+    (availabilities || []).forEach((a) => {
+      const day = String(a.weekday ?? '').toLowerCase();
+      if (!availabilityByDay.has(day)) {
+        availabilityByDay.set(day, a);
+      }
+    });
+    let filteredAvailabilities = Array.from(availabilityByDay.values());
+
+    // Ordenar por dia da semana (Segunda a Domingo)
+    filteredAvailabilities = filteredAvailabilities.sort((a, b) => {
+      const weekdayOrder: Record<string, number> = {
+        'segunda': 1, 'segunda-feira': 1, 'mon': 1, 'monday': 1, '1': 1,
+        'terca': 2, 'terça': 2, 'terça-feira': 2, 'tue': 2, 'tuesday': 2, '2': 2,
+        'quarta': 3, 'quarta-feira': 3, 'wed': 3, 'wednesday': 3, '3': 3,
+        'quinta': 4, 'quinta-feira': 4, 'thu': 4, 'thursday': 4, '4': 4,
+        'sexta': 5, 'sexta-feira': 5, 'fri': 5, 'friday': 5, '5': 5,
+        'sabado': 6, 'sábado': 6, 'sat': 6, 'saturday': 6, '6': 6,
+        'domingo': 7, 'dom': 7, 'sun': 7, 'sunday': 7, '0': 7, '7': 7
+      };
+      
+      const getWeekdayOrder = (weekday: any) => {
+        if (typeof weekday === 'number') return weekday === 0 ? 7 : weekday;
+        const normalized = String(weekday).toLowerCase().normalize('NFD').replace(/\p{Diacritic}/gu, '');
+        return weekdayOrder[normalized] || 999;
+      };
+      
+      return getWeekdayOrder(a.weekday) - getWeekdayOrder(b.weekday);
+    });
+
+    // Filtrar apenas a primeira exceção de cada data
+    const exceptionByDate = new Map<string, DoctorException>();
+    (exceptions || []).forEach((ex) => {
+      // Alguns backends/versões usam nomes diferentes para a data da exceção.
+      // Fazemos cast para any ao verificar campos legados para satisfazer o tipo DoctorException.
+      const date = String(((ex as any).exception_date) ?? ((ex as any).exceptionDate) ?? ex.date ?? '');
+      if (!exceptionByDate.has(date)) {
+        exceptionByDate.set(date, ex);
+      }
+    });
+    const filteredExceptions = Array.from(exceptionByDate.values());
+
+    return (
+      <section className="bg-card shadow-md rounded-lg border border-border p-3 sm:p-4 md:p-6 w-full">
+        <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 mb-6">
+          <h2 className="text-xl sm:text-2xl font-bold">Minhas Disponibilidades</h2>
+          <div className="flex gap-2 w-full sm:w-auto">
+            <Button 
+              size="sm"
+              className="flex-1 sm:flex-initial bg-blue-600 hover:bg-blue-700 text-xs sm:text-sm"
+              onClick={async () => {
+                try {
+                  const list = await listarDisponibilidades({ doctorId: doctorId!, active: true });
+                  setAvailabilitiesForCreate(list || []);
+                  setEditingAvailability(null);
+                  setShowAvailabilityForm(true);
+                } catch (e) {
+                  console.warn('Erro ao carregar disponibilidades:', e);
+                  setAvailabilitiesForCreate([]);
+                  setEditingAvailability(null);
+                  setShowAvailabilityForm(true);
+                }
+              }}
+            >
+              + Disponibilidade
+            </Button>
+          </div>
+        </div>
+
+        {/* Disponibilidades */}
+        {availLoading ? (
+          <div className="text-sm text-muted-foreground p-4">Carregando disponibilidades…</div>
+        ) : filteredAvailabilities && filteredAvailabilities.length > 0 ? (
+          <div className="space-y-2">
+            {filteredAvailabilities.map((a) => (
+              <div key={String(a.id)} className="p-2 border rounded flex justify-between items-start">
+                <div>
+                  <div className="font-medium">{translateWeekday(a.weekday)} • {a.start_time} — {a.end_time}</div>
+                  <div className="text-xs text-muted-foreground">Duração: {a.slot_minutes} min • Tipo: {a.appointment_type || '—'} • {a.active ? 'Ativa' : 'Inativa'}</div>
+                </div>
+                <div className="flex gap-2">
+                  <Button 
+                    size="sm" 
+                    variant="outline"
+                    onClick={() => {
+                      setEditingAvailability(a);
+                      setShowAvailabilityForm(true);
+                    }}
+                    className="hover:bg-muted hover:text-foreground"
+                  >
+                    Editar
+                  </Button>
+                  <Button 
+                    size="sm" 
+                    variant="destructive" 
+                    onClick={async () => {
+                      if (!confirm('Excluir esta disponibilidade?')) return;
+                      try {
+                        await deletarDisponibilidade(String(a.id));
+                        reloadAvailabilities();
+                        toast({ title: 'Disponibilidade excluída', variant: 'default' });
+                      } catch (e) {
+                        console.warn('Erro ao deletar disponibilidade:', e);
+                        alert((e as any)?.message || 'Erro ao deletar disponibilidade');
+                      }
+                    }}
+                  >
+                    Excluir
+                  </Button>
+                </div>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <div className="text-sm text-muted-foreground p-4 border rounded-lg bg-muted/50">
+            Nenhuma disponibilidade cadastrada.
+          </div>
+        )}
+
+        {/* Exceções */}
+        <div className="mt-8">
+          <h3 className="text-lg sm:text-xl font-bold mb-4">Exceções (Bloqueios/Liberações)</h3>
+            {exceptLoading ? (
+            <div className="text-sm text-muted-foreground p-4">Carregando exceções…</div>
+          ) : filteredExceptions && filteredExceptions.length > 0 ? (
+            <div className="space-y-2">
+              {filteredExceptions.map((ex) => (
+                <div key={String(ex.id)} className="p-3 border rounded flex justify-between items-start">
+                  <div className="flex-1">
+                    <div className="font-medium text-sm sm:text-base">
+                      {(() => {
+                        try {
+                          // Normaliza possíveis nomes de campo (exception_date, exceptionDate, date) e formata com fallback
+                          const dateRaw = (ex as any).exception_date ?? (ex as any).exceptionDate ?? ex.date ?? '';
+                          const parts = String(dateRaw).split('-');
+                          if (parts.length >= 3) {
+                            const [y, m, d] = parts;
+                            return `${d}/${m}/${y}`;
+                          }
+                          // fallback: tentar parse ISO/locale
+                          const dt = new Date(String(dateRaw));
+                          if (!isNaN(dt.getTime())) {
+                            return `${String(dt.getDate()).padStart(2, '0')}/${String(dt.getMonth() + 1).padStart(2, '0')}/${dt.getFullYear()}`;
+                          }
+                          return String(dateRaw);
+                        } catch (e) {
+                          return ((ex as any).exception_date ?? (ex as any).exceptionDate ?? ex.date) as any;
+                        }
+                      })()}
+                    </div>
+                    <div className="text-xs text-muted-foreground">
+                      Tipo: {(ex as any).kind || 'bloqueio'} • Motivo: {(ex as any).reason || '—'}
+                    </div>
+                  </div>
+                  <div className="flex gap-2 ml-2">
+                    {/* Sem ações para exceções */}
+                  </div>
+                </div>
+              ))}
+            </div>
+          ) : (
+            <div className="text-sm text-muted-foreground p-4 border rounded-lg bg-muted/50">
+              Nenhuma exceção cadastrada.
+            </div>
+          )}
+        </div>
+      </section>
+    );
+  };
+
   const renderPerfilSection = () => (
     <div className="mx-auto flex w-full max-w-6xl flex-col gap-4 sm:gap-6 px-0 py-4 sm:py-8 md:px-4">
       {/* Header com Título e Botão */}
@@ -2946,42 +3177,21 @@ const ProfissionalPage = () => {
             <h3 className="text-base sm:text-lg font-semibold mb-4">Foto do Perfil</h3>
 
             <div className="flex flex-col items-center gap-4">
-              {isEditingProfile ? (
+              <Avatar className="h-20 w-20 sm:h-24 sm:w-24">
-                <UploadAvatar
+                {(profileData as any).fotoUrl ? (
-                  userId={String(doctorId || (user && (user as any).id) || '')}
+                  <AvatarImage src={(profileData as any).fotoUrl} alt={(profileData as any).nome} />
-                  currentAvatarUrl={(profileData as any).fotoUrl}
+                ) : (
-                  userName={(profileData as any).nome}
+                  <AvatarFallback className="bg-primary text-primary-foreground text-lg sm:text-2xl font-bold">
-                  onAvatarChange={async (newUrl: string) => {
+                    {profileData.nome?.split(' ').map((n: string) => n[0]).join('').toUpperCase().slice(0, 2) || 'MD'}
-                    try {
+                  </AvatarFallback>
-                      setProfileData((prev) => ({ ...prev, fotoUrl: newUrl }));
+                )}
-                      // Foto foi salva no Supabase Storage - atualizar apenas o estado local
+              </Avatar>
-                      // Para persistir no banco, o usuário deve clicar em "Salvar" após isso
-                      try { toast({ title: 'Foto enviada', description: 'Clique em "Salvar" para confirmar as alterações.', variant: 'default' }); } catch (e) { /* ignore toast errors */ }
-                    } catch (err) {
-                      console.error('[ProfissionalPage] erro ao processar upload de foto:', err);
-                      try { toast({ title: 'Erro ao processar foto', description: (err as any)?.message || 'Falha ao processar a foto do perfil.', variant: 'destructive' }); } catch (e) {}
-                    }
-                  }}
-                />
-              ) : (
-                <>
-                  <Avatar className="h-20 w-20 sm:h-24 sm:w-24">
-                    {(profileData as any).fotoUrl ? (
-                      <AvatarImage src={(profileData as any).fotoUrl} alt={(profileData as any).nome} />
-                    ) : (
-                      <AvatarFallback className="bg-primary text-primary-foreground text-lg sm:text-2xl font-bold">
-                        {profileData.nome?.split(' ').map((n: string) => n[0]).join('').toUpperCase().slice(0, 2) || 'MD'}
-                      </AvatarFallback>
-                    )}
-                  </Avatar>
 
-                  <div className="text-center space-y-2">
+              <div className="text-center space-y-2">
-                    <p className="text-xs sm:text-sm text-muted-foreground">
+                <p className="text-xs sm:text-sm text-muted-foreground">
-                      {profileData.nome?.split(' ').map((n: string) => n[0]).join('').toUpperCase().slice(0, 2) || 'MD'}
+                  {profileData.nome?.split(' ').map((n: string) => n[0]).join('').toUpperCase().slice(0, 2) || 'MD'}
-                    </p>
+                </p>
-                  </div>
+              </div>
-                </>
-              )}
             </div>
           </div>
         </div>
@@ -3022,6 +3232,8 @@ const ProfissionalPage = () => {
     );
       case 'laudos':
         return renderLaudosSection();
+      case 'disponibilidades':
+        return renderDisponibilidadesSection();
       case 'comunicacao':
         return renderComunicacaoSection();
       case 'perfil':
@@ -3042,6 +3254,18 @@ const ProfissionalPage = () => {
             <div className="flex items-center justify-between gap-4 flex-wrap md:flex-nowrap">
               {/* Logo/Avatar Section */}
               <div className="flex items-center gap-3 min-w-0 flex-1 md:flex-none">
+                {/* Logo MEDIConnect */}
+                <div className="flex items-center gap-2 mr-2 md:mr-4">
+                  <div className="w-8 h-8 md:w-10 md:h-10 bg-primary rounded-lg flex items-center justify-center shrink-0">
+                    <Stethoscope className="w-4 h-4 md:w-5 md:h-5 text-primary-foreground" />
+                  </div>
+                  <span className="text-base md:text-lg font-semibold text-foreground hidden sm:inline">
+                    MEDIConnect
+                  </span>
+                </div>
+                
+                <div className="h-8 w-px bg-border hidden sm:block"></div>
+                
                 <Avatar className="h-10 w-10 md:h-12 md:w-12 flex-shrink-0">
                   <AvatarImage src={(profileData as any).fotoUrl || undefined} alt={profileData.nome} />
                   <AvatarFallback className="bg-muted text-xs md:text-sm">
@@ -3146,6 +3370,17 @@ const ProfissionalPage = () => {
               <FileText className="mr-2 h-4 w-4" />
               Laudos
             </Button>
+            <Button 
+              variant={activeSection === 'disponibilidades' ? 'default' : 'ghost'} 
+              className="w-full justify-start text-sm md:text-base transition-colors hover:bg-primary! hover:text-white! cursor-pointer"
+              onClick={() => {
+                setActiveSection('disponibilidades');
+                setSidebarOpen(false);
+              }}
+            >
+              <Clock className="mr-2 h-4 w-4" />
+              Disponibilidades
+            </Button>
             <Button 
               variant={activeSection === 'comunicacao' ? 'default' : 'ghost'} 
               className="w-full justify-start text-sm md:text-base transition-colors hover:bg-primary! hover:text-white! cursor-pointer"
@@ -3182,7 +3417,32 @@ const ProfissionalPage = () => {
         </main>
       </div>
 
-      {}
+      {/* AvailabilityForm para criar/editar disponibilidades */}
+      {showAvailabilityForm && (
+        <AvailabilityForm
+          open={showAvailabilityForm}
+          onOpenChange={(open) => {
+            if (!open) {
+              setShowAvailabilityForm(false);
+              setEditingAvailability(null);
+              setAvailabilitiesForCreate([]);
+            }
+          }}
+          doctorId={editingAvailability?.doctor_id ?? doctorId}
+          availability={editingAvailability}
+          existingAvailabilities={availabilitiesForCreate}
+          mode={editingAvailability ? "edit" : "create"}
+          onSaved={(saved) => {
+            console.log('Disponibilidade salva', saved);
+            setEditingAvailability(null);
+            setShowAvailabilityForm(false);
+            setAvailabilitiesForCreate([]);
+            reloadAvailabilities();
+          }}
+        />
+      )}
+
+      {/* Popup antigo (manter para compatibilidade) */}
       {showPopup && (
         <div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex justify-center items-center z-50">
 

susconecta/components/ZoeIA/ai-assistant-interface.tsx

@@ -46,6 +46,8 @@ export function AIAssistantInterface({
   const [manualSelection, setManualSelection] = useState(false);
   const [historyPanelOpen, setHistoryPanelOpen] = useState(false);
   const messageListRef = useRef<HTMLDivElement | null>(null);
+  const pdfInputRef = useRef<HTMLInputElement | null>(null);
+  const [pdfFile, setPdfFile] = useState<File | null>(null); // arquivo PDF selecionado
   const history = internalHistory;
   const historyRef = useRef<ChatSession[]>(history);
   const baseGreeting = "Olá, eu sou Zoe. Como posso ajudar hoje?";
@@ -82,17 +84,6 @@ export function AIAssistantInterface({
 
   const activeMessages = activeSession?.messages ?? [];
 
-  const formatDateTime = useCallback(
-    (value: string) =>
-      new Date(value).toLocaleString("pt-BR", {
-        day: "2-digit",
-        month: "2-digit",
-        hour: "2-digit",
-        minute: "2-digit",
-      }),
-    []
-  );
-
   const formatTime = useCallback(
     (value: string) =>
       new Date(value).toLocaleTimeString("pt-BR", {
@@ -102,92 +93,19 @@ export function AIAssistantInterface({
     []
   );
 
-  useEffect(() => {
-    if (history.length === 0) {
-      setActiveSessionId(null);
-      setManualSelection(false);
-      return;
-    }
-
-    if (!activeSessionId && !manualSelection) {
-      setActiveSessionId(history[history.length - 1].id);
-      return;
-    }
-
-    const exists = history.some((session) => session.id === activeSessionId);
-    if (!exists && !manualSelection) {
-      setActiveSessionId(history[history.length - 1].id);
-    }
-  }, [history, activeSessionId, manualSelection]);
-
-  useEffect(() => {
-    if (!messageListRef.current) return;
-    messageListRef.current.scrollTo({
-      top: messageListRef.current.scrollHeight,
-      behavior: "smooth",
-    });
-  }, [activeMessages.length]);
-
-  useEffect(() => {
-    setTypedGreeting("");
-    setTypedIndex(0);
-    setIsTypingGreeting(true);
-  }, []);
-
-  useEffect(() => {
-    if (!isTypingGreeting) return;
-    if (typedIndex >= greetingWords.length) {
-      setIsTypingGreeting(false);
-      return;
-    }
-
-    const timeout = window.setTimeout(() => {
-      setTypedGreeting((previous) =>
-        previous
-          ? `${previous} ${greetingWords[typedIndex]}`
-          : greetingWords[typedIndex]
-      );
-      setTypedIndex((previous) => previous + 1);
-    }, 260);
-
-    return () => window.clearTimeout(timeout);
-  }, [greetingWords, isTypingGreeting, typedIndex]);
-
-  const handleDocuments = () => {
-    if (onOpenDocuments) {
-      onOpenDocuments();
-      return;
-    }
-    console.log("[ZoeIA] Abrir fluxo de documentos");
-  };
-
-  const handleOpenRealtimeChat = () => {
-    if (onOpenChat) {
-      onOpenChat();
-      return;
-    }
-    console.log("[ZoeIA] Abrir chat em tempo real");
-  };
-
-  const buildSessionTopic = useCallback((content: string) => {
-    const normalized = content.trim();
-    if (!normalized) return "Atendimento";
-    return normalized.length > 60 ? `${normalized.slice(0, 57)}…` : normalized;
-  }, []);
-
   const upsertSession = useCallback(
     (session: ChatSession) => {
       if (onAddHistory) {
         onAddHistory(session);
       } else {
-        setInternalHistory((previous) => {
+        setInternalHistory((prev) => {
-          const index = previous.findIndex((item) => item.id === session.id);
+          const index = prev.findIndex((s) => s.id === session.id);
           if (index >= 0) {
-            const updated = [...previous];
+            const updated = [...prev];
             updated[index] = session;
             return updated;
           }
-          return [...previous, session];
+          return [...prev, session];
         });
       }
       setActiveSessionId(session.id);
@@ -202,8 +120,6 @@ export function AIAssistantInterface({
 
       const appendAssistantMessage = (content: string) => {
         const createdAt = new Date().toISOString();
-        const latestSession =
-          historyRef.current.find((session) => session.id === sessionId) ?? baseSession;
         const assistantMessage: ChatMessage = {
           id: `msg-assistant-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
           sender: "assistant",
@@ -211,9 +127,12 @@ export function AIAssistantInterface({
           createdAt,
         };
 
+        const latestSession =
+          historyRef.current.find((s) => s.id === sessionId) ?? baseSession;
+
         const updatedSession: ChatSession = {
           ...latestSession,
-          updatedAt: assistantMessage.createdAt,
+          updatedAt: createdAt,
           messages: [...latestSession.messages, assistantMessage],
         };
 
@@ -221,37 +140,50 @@ export function AIAssistantInterface({
       };
 
       try {
-        const response = await fetch(API_ENDPOINT, {
+        let replyText = "";
-          method: "POST",
+        let response: Response;
-          headers: {
-            "Content-Type": "application/json",
-          },
-          body: JSON.stringify({ message: prompt }),
-        });
 
-        if (!response.ok) {
+        if (pdfFile) {
-          throw new Error(`HTTP ${response.status}`);
+          // Monta FormData conforme especificação: campos 'pdf' e 'message'
+          const formData = new FormData();
+            formData.append("pdf", pdfFile);
+            formData.append("message", prompt);
+          response = await fetch(API_ENDPOINT, {
+            method: "POST",
+            body: formData, // multipart/form-data gerenciado pelo browser
+          });
+        } else {
+          response = await fetch(API_ENDPOINT, {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({ message: prompt }),
+          });
         }
 
         const rawPayload = await response.text();
-        let replyText = "";
 
-        if (rawPayload.trim().length > 0) {
+        if (rawPayload.trim()) {
           try {
-            const parsed = JSON.parse(rawPayload) as { reply?: unknown };
+            const parsed = JSON.parse(rawPayload) as { message?: unknown; reply?: unknown };
-            replyText = typeof parsed.reply === "string" ? parsed.reply.trim() : "";
+            if (typeof parsed.reply === "string") {
-          } catch (parseError) {
+              replyText = parsed.reply.trim();
-            console.error("[ZoeIA] Resposta JSON inválida", parseError, rawPayload);
+            } else if (typeof parsed.message === "string") {
+              replyText = parsed.message.trim();
+            }
+          } catch (error) {
+            console.error("[ZoeIA] Resposta JSON inválida", error, rawPayload);
           }
         }
 
         appendAssistantMessage(replyText || FALLBACK_RESPONSE);
       } catch (error) {
-        console.error("[ZoeIA] Falha ao obter resposta da API", error);
+        console.error("[ZoeIA] Erro ao buscar resposta da API", error);
         appendAssistantMessage(FALLBACK_RESPONSE);
       }
     },
-    [upsertSession]
+    [upsertSession, pdfFile]
   );
 
   const handleSendMessage = () => {
@@ -266,420 +198,124 @@ export function AIAssistantInterface({
       createdAt: now.toISOString(),
     };
 
-    const existingSession = history.find((session) => session.id === activeSessionId) ?? null;
+    const session = history.find((s) => s.id === activeSessionId);
-
+    const sessionToUse: ChatSession = session
-    const sessionToPersist: ChatSession = existingSession
       ? {
-          ...existingSession,
+          ...session,
           updatedAt: userMessage.createdAt,
-          topic:
+          messages: [...session.messages, userMessage],
-            existingSession.messages.length === 0
-              ? buildSessionTopic(trimmed)
-              : existingSession.topic,
-          messages: [...existingSession.messages, userMessage],
         }
       : {
           id: `session-${now.getTime()}`,
           startedAt: now.toISOString(),
           updatedAt: userMessage.createdAt,
-          topic: buildSessionTopic(trimmed),
+          topic: trimmed.length > 60 ? `${trimmed.slice(0, 57)}…` : trimmed,
           messages: [userMessage],
         };
 
-    upsertSession(sessionToPersist);
+    upsertSession(sessionToUse);
-    console.log("[ZoeIA] Mensagem registrada na Zoe", trimmed);
     setQuestion("");
     setHistoryPanelOpen(false);
-
+    void sendMessageToAssistant(trimmed, sessionToUse);
-    void sendMessageToAssistant(trimmed, sessionToPersist);
   };
 
-  const RealtimeTriggerButton = () => (
+  const handleSelectPdf = (e: React.ChangeEvent<HTMLInputElement>) => {
-    <button
+    const file = e.target.files?.[0];
-      type="button"
+    if (file && file.type === "application/pdf") {
-      onClick={handleOpenRealtimeChat}
+      setPdfFile(file);
-      className="flex h-12 w-12 items-center justify-center rounded-full bg-white text-foreground shadow-sm transition hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background dark:bg-zinc-900 dark:text-white"
-      aria-label="Abrir chat Zoe em tempo real"
-    >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        className="h-5 w-5"
-        fill="currentColor"
-        aria-hidden
-      >
-        <rect x="4" y="7" width="2" height="10" rx="1" />
-        <rect x="8" y="5" width="2" height="14" rx="1" />
-        <rect x="12" y="7" width="2" height="10" rx="1" />
-        <rect x="16" y="9" width="2" height="6" rx="1" />
-        <rect x="20" y="8" width="2" height="8" rx="1" />
-      </svg>
-    </button>
-  );
-
-  const handleClearHistory = () => {
-    if (onClearHistory) {
-      onClearHistory();
-    } else {
-      setInternalHistory([]);
     }
-    setActiveSessionId(null);
+    // Permite re-selecionar o mesmo arquivo
-    setManualSelection(false);
+    e.target.value = "";
-    setQuestion("");
-    setHistoryPanelOpen(false);
   };
 
-  const handleSelectSession = useCallback((sessionId: string) => {
+  const removePdf = () => setPdfFile(null);
-    setManualSelection(true);
-    setActiveSessionId(sessionId);
-    setHistoryPanelOpen(false);
-  }, []);
-
-  const startNewConversation = useCallback(() => {
-    setManualSelection(true);
-    setActiveSessionId(null);
-    setQuestion("");
-    setHistoryPanelOpen(false);
-  }, []);
 
   return (
-    <div className="min-h-screen bg-background text-foreground">
+    <div className="w-full max-w-3xl mx-auto p-4 space-y-4">
-      <div className="mx-auto flex w-full max-w-3xl flex-col gap-8 px-4 py-10 sm:px-6 sm:py-12">
+      {/* Área superior exibindo PDF selecionado */}
-        <motion.section
+      {pdfFile && (
-          initial={{ opacity: 0, y: -14 }}
+        <div className="flex items-center justify-between border rounded-lg p-3 bg-muted/50">
-          animate={{ opacity: 1, y: 0 }}
+          <div className="flex items-center gap-3 min-w-0">
-          transition={{ duration: 0.6, ease: "easeOut" }}
+            <Upload className="w-5 h-5 text-primary" />
-          className="rounded-3xl border border-primary/10 bg-gradient-to-br from-primary/15 via-background to-background/95 p-6 shadow-xl backdrop-blur-sm"
+            <div className="min-w-0">
-        >
+              <p className="text-sm font-medium truncate" title={pdfFile.name}>{pdfFile.name}</p>
-          <div className="flex flex-col gap-6">
+              <p className="text-xs text-muted-foreground">
-            <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+                PDF anexado • {(pdfFile.size / 1024).toFixed(1)} KB
-              <div className="flex items-center gap-4">
-                <span className="flex h-12 w-12 items-center justify-center rounded-3xl bg-gradient-to-br from-primary via-indigo-500 to-sky-500 text-base font-semibold text-white shadow-lg">
-                  Zoe
-                </span>
-                <div className="space-y-1">
-                  <p className="text-xs font-semibold uppercase tracking-[0.24em] text-primary/80">
-                    Assistente Clínica Zoe
-                  </p>
-                  <motion.h1
-                    key={typedGreeting}
-                    className="text-2xl font-semibold tracking-tight text-foreground sm:text-3xl"
-                    initial={{ opacity: 0.6 }}
-                    animate={{ opacity: 1 }}
-                    transition={{ duration: 0.3 }}
-                  >
-                    {gradientGreeting && (
-                      <span className="bg-gradient-to-r from-sky-400 via-primary to-indigo-500 bg-clip-text text-transparent">
-                        {gradientGreeting}
-                        {plainGreeting ? " " : ""}
-                      </span>
-                    )}
-                    {plainGreeting && <span className="text-foreground">{plainGreeting}</span>}
-                    <span
-                      className={`ml-1 inline-block h-6 w-[0.12rem] align-middle ${
-                        isTypingGreeting ? "animate-pulse bg-primary" : "bg-transparent"
-                      }`}
-                    />
-                  </motion.h1>
-                </div>
-              </div>
-              <div className="flex flex-wrap items-center justify-end gap-2 sm:justify-end">
-                {history.length > 0 && (
-                  <Button
-                    type="button"
-                    variant="ghost"
-                    className="rounded-full px-4 py-2 text-xs font-semibold uppercase tracking-[0.18em] text-primary transition hover:bg-primary/10"
-                    onClick={() => setHistoryPanelOpen(true)}
-                  >
-                    Ver históricos
-                  </Button>
-                )}
-                {history.length > 0 && (
-                  <Button
-                    type="button"
-                    variant="ghost"
-                    className="rounded-full px-4 py-2 text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground transition hover:text-destructive"
-                    onClick={handleClearHistory}
-                  >
-                    Limpar histórico
-                  </Button>
-                )}
-                <Button
-                  type="button"
-                  variant="outline"
-                  className="rounded-full border-primary/40 px-4 py-2 text-xs font-semibold uppercase tracking-[0.18em] text-primary shadow-sm transition hover:bg-primary/10"
-                  onClick={startNewConversation}
-                >
-                  Novo atendimento
-                </Button>
-                <SimpleThemeToggle />
-              </div>
-            </div>
-            <motion.p
-              className="max-w-2xl text-sm text-muted-foreground"
-              initial={{ opacity: 0, y: -6 }}
-              animate={{ opacity: 1, y: 0 }}
-              transition={{ delay: 0.3, duration: 0.4 }}
-            >
-              Organizamos exames, orientações e tarefas assistenciais em um painel único para acelerar decisões clínicas. Utilize a Zoe para revisar resultados, registrar percepções e alinhar próximos passos com a equipe de saúde.
-            </motion.p>
-          </div>
-        </motion.section>
-
-        <motion.div
-          initial={{ opacity: 0, y: -8 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ delay: 0.15, duration: 0.4 }}
-          className="flex items-center gap-2 rounded-full border border-primary/20 bg-primary/5 px-4 py-2 text-xs text-primary shadow-sm"
-        >
-          <Lock className="h-4 w-4" />
-          <span>Suas informações permanecem criptografadas e seguras com a equipe Zoe.</span>
-        </motion.div>
-
-        <motion.section
-          className="space-y-6 rounded-3xl border border-primary/15 bg-card/70 p-6 shadow-lg backdrop-blur"
-          initial={{ opacity: 0, y: 12 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ delay: 0.2, duration: 0.5 }}
-        >
-          <motion.div
-            className="rounded-3xl border border-primary/25 bg-gradient-to-br from-primary/10 via-background/50 to-background p-6 text-sm leading-relaxed text-muted-foreground"
-            initial={{ opacity: 0, y: 10 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ delay: 0.25, duration: 0.4 }}
-          >
-            <div className="mb-4 flex items-center gap-3 text-primary">
-              <Info className="h-5 w-5" />
-              <span className="text-base font-semibold">Informativo importante</span>
-            </div>
-            <p>
-              A Zoe acompanha toda a jornada clínica, consolida exames e registra orientações para que você tenha clareza em cada etapa do cuidado.
-              As respostas são informativas e complementam a avaliação de um profissional de saúde qualificado.
-            </p>
-            <p className="mt-4 font-medium text-foreground">
-              Em situações de urgência, entre em contato com a equipe médica presencial ou acione os serviços de emergência da sua região.
-            </p>
-          </motion.div>
-
-          <div className="grid gap-3 sm:grid-cols-2">
-            <Button
-              onClick={handleDocuments}
-              size="lg"
-              className="justify-start gap-3 rounded-2xl bg-primary text-primary-foreground shadow-md transition hover:shadow-xl"
-            >
-              <Upload className="h-5 w-5" />
-              Enviar documentos clínicos
-            </Button>
-            <Button
-              onClick={handleOpenRealtimeChat}
-              size="lg"
-              variant="outline"
-              className="justify-start gap-3 rounded-2xl border-primary/40 bg-background shadow-md transition hover:border-primary hover:text-primary"
-            >
-              <MessageCircle className="h-5 w-5" />
-              Conversar com a equipe Zoe
-            </Button>
-          </div>
-
-          <div className="rounded-2xl border border-border bg-background/80 p-4 shadow-inner">
-            <p className="text-sm text-muted-foreground">
-              Estamos reunindo o histórico da sua jornada. Enquanto isso, você pode anexar exames, enviar dúvidas ou solicitar contato com a equipe Zoe.
-            </p>
-          </div>
-        </motion.section>
-
-        <motion.section
-          className="flex flex-col gap-5 rounded-3xl border border-primary/10 bg-card/70 p-6 shadow-lg backdrop-blur"
-          initial={{ opacity: 0, y: 14 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ delay: 0.25, duration: 0.45 }}
-        >
-          <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
-            <div>
-              <p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground">
-                {activeSession ? "Atendimento em andamento" : "Inicie uma conversa"}
-              </p>
-              <p className="text-sm font-semibold text-foreground sm:text-base">
-                {activeSession?.topic ?? "O primeiro contato orienta nossas recomendações clínicas"}
               </p>
             </div>
-            {activeSession && (
-              <span className="mt-1 inline-flex items-center rounded-full bg-primary/10 px-3 py-1 text-xs font-medium text-primary shadow-inner sm:mt-0">
-                Atualizado às {formatTime(activeSession.updatedAt)}
-              </span>
-            )}
-          </div>
-
-          <div
-            ref={messageListRef}
-            className="flex max-h-[45vh] min-h-[220px] flex-col gap-3 overflow-y-auto rounded-2xl border border-border/40 bg-background/70 p-4"
-          >
-            {activeMessages.length > 0 ? (
-              activeMessages.map((message) => (
-                <div
-                  key={message.id}
-                  className={`flex ${message.sender === "user" ? "justify-end" : "justify-start"}`}
-                >
-                  <div
-                    className={`max-w-[80%] rounded-2xl px-4 py-3 text-sm leading-relaxed shadow-sm ${
-                      message.sender === "user"
-                        ? "bg-primary text-primary-foreground"
-                        : "border border-border/60 bg-background text-foreground"
-                    }`}
-                  >
-                    <p className="whitespace-pre-wrap text-sm leading-relaxed">{message.content}</p>
-                    <span
-                      className={`mt-2 block text-[0.68rem] uppercase tracking-[0.18em] ${
-                        message.sender === "user"
-                          ? "text-primary-foreground/75"
-                          : "text-muted-foreground"
-                      }`}
-                    >
-                      {formatTime(message.createdAt)}
-                    </span>
-                  </div>
-                </div>
-              ))
-            ) : (
-              <div className="flex flex-1 flex-col items-center justify-center rounded-2xl border border-dashed border-primary/25 bg-background/80 px-6 py-12 text-center text-sm text-muted-foreground">
-                <p className="text-sm font-medium text-foreground">Envie sua primeira mensagem</p>
-                <p className="mt-2 max-w-md text-sm text-muted-foreground">
-                  Compartilhe uma dúvida, exame ou orientação que deseja revisar. A Zoe registra o pedido e te retorna com um resumo organizado para a equipe de saúde.
-                </p>
-              </div>
-            )}
-          </div>
-        </motion.section>
-
-        <div className="flex flex-col gap-3 rounded-3xl border border-border bg-card/70 px-4 py-3 shadow-xl sm:flex-row sm:items-center">
-          <div className="flex items-center gap-2">
-            <Button
-              type="button"
-              variant="ghost"
-              size="icon"
-              className="rounded-full border border-border/40 bg-background/60 text-muted-foreground transition hover:text-primary"
-              onClick={handleDocuments}
-            >
-              <Plus className="h-5 w-5" />
-            </Button>
-          </div>
-          <Input
-            value={question}
-            onChange={(event) => setQuestion(event.target.value)}
-            onKeyDown={(event) => {
-              if (event.key === "Enter") {
-                event.preventDefault();
-                handleSendMessage();
-              }
-            }}
-            placeholder="Pergunte qualquer coisa para a Zoe"
-            className="w-full flex-1 border-none bg-transparent text-sm shadow-none focus-visible:ring-0"
-          />
-          <div className="flex items-center justify-end gap-2">
-            <Button
-              type="button"
-              className="rounded-full bg-primary px-5 text-primary-foreground shadow-md transition hover:bg-primary/90"
-              onClick={handleSendMessage}
-            >
-              Enviar
-            </Button>
-            <RealtimeTriggerButton />
           </div>
+          <Button variant="secondary" size="sm" onClick={removePdf}>
+            Remover
+          </Button>
         </div>
+      )}
 
+      {/* Lista de mensagens */}
+      <div
+        ref={messageListRef}
+        className="border rounded-lg p-4 h-96 overflow-y-auto space-y-3 bg-background"
+      >
+        {activeMessages.length === 0 && (
+          <p className="text-sm text-muted-foreground">Nenhuma mensagem ainda. Envie uma pergunta.</p>
+        )}
+        {activeMessages.map((m) => (
+          <div
+            key={m.id}
+            className={`flex ${m.sender === "user" ? "justify-end" : "justify-start"}`}
+          >
+            <div
+              className={`px-3 py-2 rounded-lg max-w-xs text-sm whitespace-pre-wrap ${
+                m.sender === "user" ? "bg-primary text-primary-foreground" : "bg-muted"
+              }`}
+            >
+              {m.content}
+              <div className="mt-1 text-[10px] opacity-70">
+                {formatTime(m.createdAt)}
+              </div>
+            </div>
+          </div>
+        ))}
       </div>
 
-      {historyPanelOpen && (
+      {/* Input & ações */}
-        <aside className="fixed inset-y-0 right-0 z-[160] w-[min(22rem,80vw)] border-l border-border bg-card shadow-2xl">
+      <div className="flex items-center gap-2">
-          <div className="flex h-full flex-col">
+        <div className="flex gap-2">
-            <div className="flex items-center justify-between border-b border-border px-4 py-4">
+          <Button
-              <div className="flex items-center gap-3">
+            type="button"
-                <span className="flex h-9 w-9 items-center justify-center rounded-2xl bg-gradient-to-br from-primary via-sky-500 to-emerald-400 text-sm font-semibold text-white shadow-md">
+            variant="secondary"
-                  Zoe
+            size="sm"
-                </span>
+            onClick={() => pdfInputRef.current?.click()}
-                <div>
+          >
-                  <h2 className="text-sm font-semibold text-foreground">Históricos de atendimento</h2>
+            PDF
-                  <p className="text-xs text-muted-foreground">{history.length} registro{history.length === 1 ? "" : "s"}</p>
+          </Button>
-                </div>
+          <input
-              </div>
+            ref={pdfInputRef}
-              <Button
+            type="file"
-                type="button"
+            accept="application/pdf"
-                variant="ghost"
+            className="hidden"
-                size="icon"
+            onChange={handleSelectPdf}
-                className="rounded-full"
+          />
-                onClick={() => setHistoryPanelOpen(false)}
+        </div>
-              >
+        <Input
-                <span aria-hidden>×</span>
+          placeholder="Digite sua pergunta"
-                <span className="sr-only">Fechar históricos</span>
+          value={question}
-              </Button>
+          onChange={(e) => setQuestion(e.target.value)}
-            </div>
+          onKeyDown={(e) => {
-            <div className="border-b border-border px-4 py-3">
+            if (e.key === "Enter" && !e.shiftKey) {
-              <Button
+              e.preventDefault();
-                type="button"
+              handleSendMessage();
-                className="w-full justify-start gap-2 rounded-xl bg-primary text-primary-foreground shadow-md transition hover:shadow-lg"
+            }
-                onClick={startNewConversation}
+          }}
-              >
+        />
-                <Plus className="h-4 w-4" />
+        <Button onClick={handleSendMessage} disabled={!question.trim()}>
-                Novo atendimento
+          Enviar
-              </Button>
+        </Button>
-            </div>
+      </div>
-            <div className="flex-1 overflow-y-auto px-4 py-4">
+      <div className="text-xs text-muted-foreground">
-              {history.length === 0 ? (
+        {pdfFile
-                <p className="text-sm text-muted-foreground">
+          ? "A próxima mensagem será enviada junto ao PDF como multipart/form-data."
-                  Nenhum atendimento registrado ainda. Envie uma mensagem para começar um acompanhamento.
+          : "Selecione um PDF para anexar ao próximo envio."}
-                </p>
+      </div>
-              ) : (
-                <ul className="flex flex-col gap-3 text-sm">
-                  {[...history].reverse().map((session) => {
-                    const lastMessage = session.messages[session.messages.length - 1];
-                    const isActive = session.id === activeSessionId;
-                    return (
-                      <li key={session.id}>
-                        <button
-                          type="button"
-                          onClick={() => handleSelectSession(session.id)}
-                          className={`flex w-full flex-col gap-2 rounded-xl border px-3 py-3 text-left shadow-sm transition hover:border-primary hover:shadow-md ${
-                            isActive ? "border-primary/60 bg-primary/10" : "border-border/60 bg-background/90"
-                          }`}
-                        >
-                          <div className="flex items-center justify-between gap-3">
-                            <p className="font-semibold text-foreground line-clamp-2">{session.topic}</p>
-                            <span className="text-xs text-muted-foreground">{formatDateTime(session.updatedAt)}</span>
-                          </div>
-                          {lastMessage && (
-                            <p className="text-xs text-muted-foreground line-clamp-2">
-                              {lastMessage.sender === "assistant" ? "Zoe: " : "Você: "}
-                              {lastMessage.content}
-                            </p>
-                          )}
-                          <div className="flex items-center gap-2 text-[0.68rem] uppercase tracking-[0.18em] text-muted-foreground">
-                            <Clock className="h-4 w-4" />
-                            <span>
-                              {session.messages.length} mensagem{session.messages.length === 1 ? "" : "s"}
-                            </span>
-                          </div>
-                        </button>
-                      </li>
-                    );
-                  })}
-                </ul>
-              )}
-            </div>
-            {history.length > 0 && (
-              <div className="border-t border-border px-4 py-3">
-                <Button
-                  type="button"
-                  variant="ghost"
-                  className="w-full justify-center text-xs font-medium text-muted-foreground transition hover:text-destructive"
-                  onClick={handleClearHistory}
-                >
-                  Limpar todo o histórico
-                </Button>
-              </div>
-            )}
-          </div>
-        </aside>
-      )}
     </div>
   );
 }

susconecta/components/ZoeIA/ai-voice-flow.tsx

@@ -0,0 +1,196 @@
+"use client";
+
+import React, { useRef, useState } from "react";
+import { VoicePoweredOrb } from "@/components/ZoeIA/voice-powered-orb";
+import { Button } from "@/components/ui/button";
+import { Mic, MicOff } from "lucide-react";
+
+
+// ⚠ Coloque aqui o webhook real do seu n8n
+const N8N_WEBHOOK_URL = "https://n8n.jonasbomfim.store/webhook/zoe2";
+
+const AIVoiceFlow: React.FC = () => {
+  const [isRecording, setIsRecording] = useState(false);
+  const [isSending, setIsSending] = useState(false);
+
+  const [voiceDetected, setVoiceDetected] = useState(false);
+  const [status, setStatus] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const [replyAudioUrl, setReplyAudioUrl] = useState<string | null>(null); // URL do áudio retornado
+  const [replyAudio, setReplyAudio] = useState<HTMLAudioElement | null>(null); // elemento de áudio reproduzido
+
+  const mediaRecorderRef = useRef<MediaRecorder | null>(null);
+  const streamRef = useRef<MediaStream | null>(null);
+  const chunksRef = useRef<BlobPart[]>([]);
+
+  // 🚀 Inicia gravação
+  const startRecording = async () => {
+    try {
+      setError(null);
+      setStatus("Iniciando microfone...");
+      
+      // Se estava reproduzindo áudio da IA → parar imediatamente
+      if (replyAudio) {
+        replyAudio.pause();
+        replyAudio.currentTime = 0;
+      }
+      setReplyAudio(null);
+      setReplyAudioUrl(null);
+
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+      streamRef.current = stream;
+
+      const recorder = new MediaRecorder(stream);
+      mediaRecorderRef.current = recorder;
+      chunksRef.current = [];
+
+      recorder.ondataavailable = (e) => {
+        if (e.data.size > 0) chunksRef.current.push(e.data);
+      };
+
+      recorder.onstop = async () => {
+        setStatus("Processando áudio...");
+        const blob = new Blob(chunksRef.current, { type: "audio/webm" });
+        await sendToN8N(blob);
+        chunksRef.current = [];
+      };
+
+      recorder.start();
+      setIsRecording(true);
+      setStatus("Gravando... fale algo.");
+    } catch (err) {
+      console.error(err);
+      setError("Erro ao acessar microfone.");
+    }
+  };
+
+  // ⏹ Finaliza gravação
+  const stopRecording = () => {
+    try {
+      setIsRecording(false);
+      setStatus("Finalizando gravação...");
+
+      if (mediaRecorderRef.current && mediaRecorderRef.current.state !== "inactive") {
+        mediaRecorderRef.current.stop();
+      }
+
+      if (streamRef.current) {
+        streamRef.current.getTracks().forEach((t) => t.stop());
+        streamRef.current = null;
+      }
+    } catch (err) {
+      console.error(err);
+      setError("Erro ao parar gravação.");
+    }
+  };
+
+  // 📤 Envia áudio ao N8N e recebe o MP3
+  const sendToN8N = async (audioBlob: Blob) => {
+    try {
+      setIsSending(true);
+      setStatus("Enviando áudio para IA...");
+
+      const formData = new FormData();
+      formData.append("audio", audioBlob, "voz.webm");
+
+      const resp = await fetch(N8N_WEBHOOK_URL, {
+        method: "POST",
+        body: formData,
+      });
+
+      if (!resp.ok) {
+        throw new Error("N8N retornou erro");
+      }
+
+      const replyBlob = await resp.blob();
+
+      // gera url local
+      const url = URL.createObjectURL(replyBlob);
+      setReplyAudioUrl(url);
+
+      const audio = new Audio(url);
+      setReplyAudio(audio);
+
+      setStatus("Reproduzindo resposta...");
+      audio.play().catch(() => {});
+
+    } catch (err) {
+      console.error(err);
+      setError("Erro ao enviar/receber áudio.");
+    } finally {
+      setIsSending(false);
+    }
+  };
+
+  const toggleRecording = () => {
+    if (isRecording) stopRecording();
+    else startRecording();
+  };
+
+  return (
+    <div className="flex flex-col items-center justify-center gap-6 p-6">
+
+      {/* ORB — agora com comportamento inteligente */}
+      <div className="w-72 h-72 relative">
+        <VoicePoweredOrb
+          className="w-full h-full"
+
+          /* 🔥 LÓGICA DO ORB: 
+             - Gravando?       → usa microfone
+             - Não gravando, mas tem MP3? → usa áudio da IA
+             - Caso contrário → parado (none)
+          */
+          {...({ sourceMode:
+            isRecording
+              ? "microphone"
+              : replyAudio
+                ? "playback"
+                : "none"
+          } as any)}
+
+          audioElement={replyAudio}
+          onVoiceDetected={setVoiceDetected}
+        />
+
+        {isRecording && (
+          <span className="absolute bottom-4 right-4 rounded-full bg-black/70 px-3 py-1 text-xs font-medium text-white shadow-lg">
+            {voiceDetected ? "Ouvindo…" : "Aguardando voz…"}
+          </span>
+        )}
+      </div>
+
+      {/* 🟣 Botão de gravação */}
+      <Button
+        onClick={toggleRecording}
+        variant={isRecording ? "destructive" : "default"}
+        size="lg"
+        disabled={isSending}
+      >
+        {isRecording ? (
+          <>
+            <MicOff className="w-5 h-5 mr-2" /> Parar gravação
+          </>
+        ) : (
+          <>
+            <Mic className="w-5 h-5 mr-2" /> Começar gravação
+          </>
+        )}
+      </Button>
+
+      {/* STATUS */}
+      {status && <p className="text-sm text-muted-foreground">{status}</p>}
+      {error && <p className="text-sm text-red-500">{error}</p>}
+
+      {/* PLAYER MANUAL DA RESPOSTA */}
+      {replyAudioUrl && (
+        <div className="w-full max-w-md mt-2 flex flex-col items-center gap-2">
+          <span className="text-xs text-muted-foreground">Última resposta da IA:</span>
+          <audio controls src={replyAudioUrl} className="w-full" />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default AIVoiceFlow;

susconecta/components/ZoeIA/demo-file-upload.tsx

@@ -0,0 +1,5 @@
+import Component from "@/components/ui/file-upload-and-chat";
+
+export default function FileUploadChat() {
+  return <Component />;
+}

susconecta/components/features/dashboard/header.tsx

@@ -33,105 +33,89 @@ export function PagesHeader({ title = "", subtitle = "" }: { title?: string, sub
   }, [dropdownOpen]);
 
   return (
-    <header className="h-16 border-b border-border bg-background px-6 flex items-center justify-between">
+    <header className="sticky top-0 z-40 border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 px-3 sm:px-6 py-2 flex flex-wrap items-center gap-3">
-      <div className="flex flex-row items-center gap-4">
+      <div className="flex items-center gap-3 min-w-0">
         <SidebarTrigger />
-        <div className="flex items-start flex-col justify-center py-2">
+        <div className="flex flex-col justify-center leading-tight min-w-0">
-          <h1 className="text-lg font-semibold text-foreground">{title}</h1>
+          <h1 className="text-sm sm:text-lg font-semibold text-foreground truncate max-w-[55vw] sm:max-w-none">{title}</h1>
-          <p className="text-muted-foreground">{subtitle}</p>
+          {subtitle && (
+            <p className="text-[11px] sm:text-xs text-muted-foreground truncate max-w-[55vw] sm:max-w-none">{subtitle}</p>
+          )}
         </div>
       </div>
-
+      <div className="flex items-center gap-2 ml-auto">
-      <div className="flex items-center space-x-4">
+        <Button variant="ghost" size="icon" className="hover-primary-blue hidden xs:flex">
-  <Button variant="ghost" size="icon" className="hover-primary-blue">
           <Bell className="h-4 w-4" />
         </Button>
-
         <SimpleThemeToggle />
-                    <Button
-                      variant="outline"
-                      className="text-blue-500 border-blue-500 bg-transparent shadow-sm shadow-blue-500/10 border hover-primary-blue"
-                      asChild
-                    ></Button>
-        {/* Avatar Dropdown Simples */}
         <div className="relative" ref={dropdownRef}>
-          <Button 
+          <Button
-            variant="ghost" 
+            variant="ghost"
-            className="relative h-8 w-8 rounded-full border-2 border-border hover:border-primary"
+            className="relative h-8 w-8 rounded-full border border-border hover:border-primary"
             onClick={() => setDropdownOpen(!dropdownOpen)}
+            aria-label="Abrir menu do perfil"
           >
-            {/* Mostrar foto do usuário quando disponível; senão, mostrar fallback com iniciais */}
             <Avatar className="h-8 w-8">
-              {
+              {(() => {
-                (() => {
+                const userPhoto = (user as any)?.profile?.foto_url || (user as any)?.profile?.fotoUrl || (user as any)?.profile?.avatar_url
-                  const userPhoto = (user as any)?.profile?.foto_url || (user as any)?.profile?.fotoUrl || (user as any)?.profile?.avatar_url
+                const alt = user?.name || user?.email || 'Usuário'
-                  const alt = user?.name || user?.email || 'Usuário'
+                const getInitials = (name?: string, email?: string) => {
-
+                  if (name) {
-                  const getInitials = (name?: string, email?: string) => {
+                    const parts = name.trim().split(/\s+/)
-                    if (name) {
+                    const first = parts[0]?.charAt(0) ?? ''
-                      const parts = name.trim().split(/\s+/)
+                    const second = parts[1]?.charAt(0) ?? ''
-                      const first = parts[0]?.charAt(0) ?? ''
+                    return (first + second).toUpperCase() || (email?.charAt(0) ?? 'U').toUpperCase()
-                      const second = parts[1]?.charAt(0) ?? ''
-                      return (first + second).toUpperCase() || (email?.charAt(0) ?? 'U').toUpperCase()
-                    }
-                    if (email) return email.charAt(0).toUpperCase()
-                    return 'U'
                   }
-
+                  if (email) return email.charAt(0).toUpperCase()
-                  return (
+                  return 'U'
-                    <>
+                }
-                      <AvatarImage src={userPhoto || undefined} alt={alt} />
+                return (
-                      <AvatarFallback className="bg-primary text-primary-foreground font-semibold">{getInitials(user?.name, user?.email)}</AvatarFallback>
+                  <>
-                    </>
+                    <AvatarImage src={userPhoto || undefined} alt={alt} />
-                  )
+                    <AvatarFallback className="bg-primary text-primary-foreground font-semibold">{getInitials(user?.name, user?.email)}</AvatarFallback>
-                })()
+                  </>
-              }
+                )
+              })()}
             </Avatar>
           </Button>
-
-          {/* Dropdown Content */}
           {dropdownOpen && (
-            <div className="absolute right-0 mt-2 w-80 bg-popover border border-border rounded-md shadow-lg z-50 text-popover-foreground">
+            <div className="absolute right-0 mt-2 w-64 sm:w-80 bg-popover border border-border rounded-md shadow-lg z-[100] text-popover-foreground animate-in fade-in slide-in-from-top-2">
-              <div className="p-4 border-b border-border">
+              <div className="p-3 sm:p-4 border-b border-border">
                 <div className="flex flex-col space-y-1">
-                  <p className="text-sm font-semibold leading-none">
+                  <p className="text-xs sm:text-sm font-semibold leading-none">
                     {user?.userType === 'administrador' ? 'Administrador da Clínica' : 'Usuário do Sistema'}
                   </p>
                   {user?.email ? (
-                    <p className="text-xs leading-none text-muted-foreground">{user.email}</p>
+                    <p className="text-[10px] sm:text-xs leading-none text-muted-foreground truncate">{user.email}</p>
                   ) : (
-                    <p className="text-xs leading-none text-muted-foreground">Email não disponível</p>
+                    <p className="text-[10px] sm:text-xs leading-none text-muted-foreground">Email não disponível</p>
                   )}
-                  <p className="text-xs leading-none text-primary font-medium">
+                  <p className="text-[10px] sm:text-xs leading-none text-primary font-medium">
                     Tipo: {user?.userType === 'administrador' ? 'Administrador' : user?.userType || 'Não definido'}
                   </p>
                 </div>
               </div>
-              
               <div className="py-1">
-                <button 
+                <button
                   onClick={(e) => {
                     e.preventDefault();
                     setDropdownOpen(false);
                     router.push('/perfil');
                   }}
-                  className="w-full text-left px-4 py-2 text-sm hover:bg-accent cursor-pointer"
+                  className="w-full text-left px-3 sm:px-4 py-2 text-xs sm:text-sm hover:bg-accent cursor-pointer"
                 >
-                   Perfil
+                  Perfil
                 </button>
-                
+                <div className="border-t border-border my-1" />
-                <div className="border-t border-border my-1"></div>
+                <button
-                <button 
                   onClick={(e) => {
                     e.preventDefault();
                     setDropdownOpen(false);
-                    
-                    // Usar sempre o logout do hook useAuth (ele já redireciona corretamente)
                     logout();
                   }}
-                  className="w-full text-left px-4 py-2 text-sm text-destructive hover:bg-destructive/10 cursor-pointer"
+                  className="w-full text-left px-3 sm:px-4 py-2 text-xs sm:text-sm text-destructive hover:bg-destructive/10 cursor-pointer"
                 >
-                   Sair
+                  Sair
                 </button>
               </div>
             </div>

susconecta/components/features/forms/availability-form.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useMemo } from 'react'
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog'
 import { AlertDialog, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogFooter, AlertDialogAction, AlertDialogCancel } from '@/components/ui/alert-dialog'
 import { Button } from '@/components/ui/button'
@@ -18,9 +18,11 @@ export interface AvailabilityFormProps {
   // when editing, pass the existing availability and set mode to 'edit'
   availability?: DoctorAvailability | null
   mode?: 'create' | 'edit'
+  // existing availabilities to prevent duplicate weekday selection
+  existingAvailabilities?: DoctorAvailability[]
 }
 
-export function AvailabilityForm({ open, onOpenChange, doctorId = null, onSaved, availability = null, mode = 'create' }: AvailabilityFormProps) {
+export function AvailabilityForm({ open, onOpenChange, doctorId = null, onSaved, availability = null, mode = 'create', existingAvailabilities = [] }: AvailabilityFormProps) {
   const [weekday, setWeekday] = useState<string>('segunda')
   const [startTime, setStartTime] = useState<string>('09:00')
   const [endTime, setEndTime] = useState<string>('17:00')
@@ -31,6 +33,28 @@ export function AvailabilityForm({ open, onOpenChange, doctorId = null, onSaved,
   const { toast } = useToast()
   const [blockedException, setBlockedException] = useState<null | { date: string; reason?: string; times?: string }>(null)
 
+  // Normalize weekday to standard format for comparison
+  const normalizeWeekdayForComparison = (w?: string) => {
+    if (!w) return w;
+    const k = String(w).toLowerCase().normalize('NFD').replace(/\p{Diacritic}/gu, '').replace(/[^a-z0-9]/g, '');
+    const map: Record<string,string> = {
+      'segunda':'segunda','terca':'terca','quarta':'quarta','quinta':'quinta','sexta':'sexta','sabado':'sabado','domingo':'domingo',
+      'monday':'segunda','tuesday':'terca','wednesday':'quarta','thursday':'quinta','friday':'sexta','saturday':'sabado','sunday':'domingo',
+      '1':'segunda','2':'terca','3':'quarta','4':'quinta','5':'sexta','6':'sabado','0':'domingo','7':'domingo'
+    };
+    return map[k] ?? k;
+  };
+
+  // Get list of already used weekdays (excluding current one in edit mode)
+  const usedWeekdays = useMemo(() => {
+    return new Set(
+      (existingAvailabilities || [])
+        .filter(a => mode === 'edit' ? a.id !== availability?.id : true)
+        .map(a => normalizeWeekdayForComparison(a.weekday))
+        .filter(Boolean)
+    );
+  }, [existingAvailabilities, mode, availability?.id]);
+
   // When editing, populate state from availability prop
   useEffect(() => {
     if (mode === 'edit' && availability) {
@@ -47,6 +71,17 @@ export function AvailabilityForm({ open, onOpenChange, doctorId = null, onSaved,
     }
   }, [mode, availability])
 
+  // When creating and modal opens, set the first available weekday
+  useEffect(() => {
+    if (mode === 'create' && open) {
+      const allWeekdays = ['segunda', 'terca', 'quarta', 'quinta', 'sexta', 'sabado', 'domingo'];
+      const firstAvailable = allWeekdays.find(day => !usedWeekdays.has(day));
+      if (firstAvailable) {
+        setWeekday(firstAvailable);
+      }
+    }
+  }, [mode, open, usedWeekdays])
+
   async function handleSubmit(e?: React.FormEvent) {
     e?.preventDefault()
     if (!doctorId) {
@@ -181,25 +216,25 @@ export function AvailabilityForm({ open, onOpenChange, doctorId = null, onSaved,
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent>
         <DialogHeader>
-          <DialogTitle>Criar disponibilidade</DialogTitle>
+          <DialogTitle>{mode === 'edit' ? 'Editar disponibilidade' : 'Criar disponibilidade'}</DialogTitle>
         </DialogHeader>
 
         <form onSubmit={handleSubmit} className="space-y-4 py-4">
           <div className="grid grid-cols-2 gap-4">
             <div>
               <Label>Dia da semana</Label>
-              <Select value={weekday} onValueChange={(v) => setWeekday(v)}>
+              <Select value={weekday} onValueChange={(v) => setWeekday(v)} disabled={mode === 'edit'}>
                 <SelectTrigger>
                   <SelectValue />
                 </SelectTrigger>
                 <SelectContent>
-                  <SelectItem value="segunda">Segunda</SelectItem>
+                  <SelectItem value="segunda" disabled={usedWeekdays.has('segunda')}>Segunda</SelectItem>
-                  <SelectItem value="terca">Terça</SelectItem>
+                  <SelectItem value="terca" disabled={usedWeekdays.has('terca')}>Terça</SelectItem>
-                  <SelectItem value="quarta">Quarta</SelectItem>
+                  <SelectItem value="quarta" disabled={usedWeekdays.has('quarta')}>Quarta</SelectItem>
-                  <SelectItem value="quinta">Quinta</SelectItem>
+                  <SelectItem value="quinta" disabled={usedWeekdays.has('quinta')}>Quinta</SelectItem>
-                  <SelectItem value="sexta">Sexta</SelectItem>
+                  <SelectItem value="sexta" disabled={usedWeekdays.has('sexta')}>Sexta</SelectItem>
-                  <SelectItem value="sabado">Sábado</SelectItem>
+                  <SelectItem value="sabado" disabled={usedWeekdays.has('sabado')}>Sábado</SelectItem>
-                  <SelectItem value="domingo">Domingo</SelectItem>
+                  <SelectItem value="domingo" disabled={usedWeekdays.has('domingo')}>Domingo</SelectItem>
                 </SelectContent>
               </Select>
             </div>
@@ -242,7 +277,7 @@ export function AvailabilityForm({ open, onOpenChange, doctorId = null, onSaved,
 
           <DialogFooter>
             <Button variant="ghost" onClick={() => onOpenChange(false)} disabled={submitting}>Cancelar</Button>
-            <Button type="submit" disabled={submitting}>{submitting ? 'Salvando...' : 'Criar disponibilidade'}</Button>
+            <Button type="submit" disabled={submitting}>{submitting ? 'Salvando...' : (mode === 'edit' ? 'Salvar alterações' : 'Criar disponibilidade')}</Button>
           </DialogFooter>
         </form>
       </DialogContent>

susconecta/components/features/forms/calendar-registration-form.tsx

@@ -414,35 +414,31 @@ export function CalendarRegistrationForm({ formData, onFormChange, createMode =
           } catch (e) {}
 
           const generatedSet = new Set<string>();
+          
+          // Helper to create ISO-like string without timezone conversion
+          const toLocalISOString = (date: Date) => {
+            const year = date.getFullYear();
+            const month = String(date.getMonth() + 1).padStart(2, '0');
+            const day = String(date.getDate()).padStart(2, '0');
+            const hours = String(date.getHours()).padStart(2, '0');
+            const minutes = String(date.getMinutes()).padStart(2, '0');
+            const seconds = String(date.getSeconds()).padStart(2, '0');
+            return `${year}-${month}-${day}T${hours}:${minutes}:${seconds}`;
+          };
+          
           windows.forEach((w: any) => {
             try {
               const perWindowStep = Number(w.slotMinutes) || stepMinutes;
               const startMs = w.winStart.getTime();
               const endMs = w.winEnd.getTime();
               const lastStartMs = endMs - perWindowStep * 60000;
-              const backendSlotsInWindow = (av.slots || []).filter((s: any) => {
+              
-                try {
+              // Always generate slots from the start of the window to the end
-                  const sd = new Date(s.datetime);
+              // This ensures slots start at the configured availability start time
-                  const sm = sd.getHours() * 60 + sd.getMinutes();
+              let cursorMs = startMs;
-                  const wmStart = w.winStart.getHours() * 60 + w.winStart.getMinutes();
+              while (cursorMs <= lastStartMs) {
-                  const wmEnd = w.winEnd.getHours() * 60 + w.winEnd.getMinutes();
+                generatedSet.add(toLocalISOString(new Date(cursorMs)));
-                  return sm >= wmStart && sm <= wmEnd;
+                cursorMs += perWindowStep * 60000;
-                } catch (e) { return false; }
-              }).map((s: any) => new Date(s.datetime).getTime()).sort((a: number, b: number) => a - b);
-
-              if (!backendSlotsInWindow.length) {
-                let cursorMs = startMs;
-                while (cursorMs <= lastStartMs) {
-                  generatedSet.add(new Date(cursorMs).toISOString());
-                  cursorMs += perWindowStep * 60000;
-                }
-              } else {
-                const lastBackendMs = backendSlotsInWindow[backendSlotsInWindow.length - 1];
-                let cursorMs = lastBackendMs + perWindowStep * 60000;
-                while (cursorMs <= lastStartMs) {
-                  generatedSet.add(new Date(cursorMs).toISOString());
-                  cursorMs += perWindowStep * 60000;
-                }
               }
             } catch (e) {}
           });
@@ -463,15 +459,10 @@ export function CalendarRegistrationForm({ formData, onFormChange, createMode =
             } catch (e) { return null; }
           };
 
-          (existingInWindow || []).forEach((s: any) => {
+          // Use only generated slots based on availability windows
-            const sm = findWindowSlotMinutes(s.datetime);
-            mergedMap.set(s.datetime, sm ? { ...s, slot_minutes: sm } : { ...s });
-          });
           Array.from(generatedSet).forEach((dt) => {
-            if (!mergedMap.has(dt)) {
+            const sm = findWindowSlotMinutes(dt) || stepMinutes;
-              const sm = findWindowSlotMinutes(dt) || stepMinutes;
+            mergedMap.set(dt, { datetime: dt, available: true, slot_minutes: sm });
-              mergedMap.set(dt, { datetime: dt, available: true, slot_minutes: sm });
-            }
           });
 
           const merged = Array.from(mergedMap.values()).sort((a, b) => new Date(a.datetime).getTime() - new Date(b.datetime).getTime());
@@ -869,22 +860,39 @@ export function CalendarRegistrationForm({ formData, onFormChange, createMode =
           <div className="md:col-span-6 flex items-start justify-end">
             <div className="text-right text-sm">
               {loadingPatient ? (
-                <div>Carregando dados do paciente...</div>
+                <div className="text-muted-foreground">Carregando dados do paciente...</div>
               ) : patientDetails ? (
                 patientDetails.error ? (
                   <div className="text-red-500">Erro ao carregar paciente: {String(patientDetails.error)}</div>
                 ) : (
-                  <div className="text-sm text-muted-foreground space-y-1">
+                  <div className="grid grid-cols-1 gap-2 bg-muted/30 p-4 rounded-lg border border-border">
-                    <div><strong>CPF:</strong> {patientDetails.cpf || '-'}</div>
+                    <div className="flex items-center justify-between">
-                    <div><strong>Telefone:</strong> {patientDetails.phone_mobile || patientDetails.telefone || '-'}</div>
+                      <span className="text-xs text-muted-foreground">CPF:</span>
-                    <div><strong>E-mail:</strong> {patientDetails.email || '-'}</div>
+                      <span className="text-sm font-medium text-foreground">{patientDetails.cpf || '-'}</span>
-                    <div><strong>Data de nascimento:</strong> {patientDetails.birth_date || '-'}</div>
+                    </div>
+                    <div className="flex items-center justify-between">
+                      <span className="text-xs text-muted-foreground">Telefone:</span>
+                      <span className="text-sm font-medium text-foreground">{patientDetails.phone_mobile || patientDetails.telefone || '-'}</span>
+                    </div>
+                    <div className="flex items-center justify-between">
+                      <span className="text-xs text-muted-foreground">E-mail:</span>
+                      <span className="text-sm font-medium text-foreground">{patientDetails.email || '-'}</span>
+                    </div>
+                    <div className="flex items-center justify-between">
+                      <span className="text-xs text-muted-foreground">Data de nascimento:</span>
+                      <span className="text-sm font-medium text-foreground">
+                        {patientDetails.birth_date 
+                          ? new Date(patientDetails.birth_date + 'T00:00:00').toLocaleDateString('pt-BR')
+                          : '-'
+                        }
+                      </span>
+                    </div>
                   </div>
                 )
               ) : (
                 <div className="text-xs text-muted-foreground">Paciente não vinculado</div>
               )}
-              <div className="mt-1 text-xs text-muted-foreground">Para editar os dados do paciente, acesse a ficha do paciente.</div>
+              <div className="mt-2 text-xs text-muted-foreground italic">Para editar os dados do paciente, acesse a ficha do paciente.</div>
             </div>
           </div>
         </div>
@@ -1033,7 +1041,11 @@ export function CalendarRegistrationForm({ formData, onFormChange, createMode =
                                     const d = new Date(s.datetime);
                                     const hh = String(d.getHours()).padStart(2, '0');
                                     const mm = String(d.getMinutes()).padStart(2, '0');
-                                    const dateOnly = d.toISOString().split('T')[0];
+                                    // Use local date components instead of toISOString to avoid timezone conversion
+                                    const year = d.getFullYear();
+                                    const month = String(d.getMonth() + 1).padStart(2, '0');
+                                    const day = String(d.getDate()).padStart(2, '0');
+                                    const dateOnly = `${year}-${month}-${day}`;
                                     return dateOnly === date && `${hh}:${mm}` === time;
                                   } catch (e) {
                                     return false;
@@ -1054,7 +1066,8 @@ export function CalendarRegistrationForm({ formData, onFormChange, createMode =
                                 }
                                 const hh = String(dt.getHours()).padStart(2, '0');
                                 const mm = String(dt.getMinutes()).padStart(2, '0');
-                                const dateOnly = dt.toISOString().split('T')[0];
+                                // Keep the existing appointmentDate, don't override it
+                                const currentDate = (formData as any).appointmentDate;
                                 // set duration from slot if available
                                 const sel = (availableSlots || []).find((s) => s.datetime === value) as any;
                                 const slotMinutes = sel && sel.slot_minutes ? Number(sel.slot_minutes) : null;
@@ -1065,11 +1078,11 @@ export function CalendarRegistrationForm({ formData, onFormChange, createMode =
                                 const endM = String(endDt.getMinutes()).padStart(2, '0');
                                 const endStr = `${endH}:${endM}`;
                                 if (slotMinutes) {
-                                  onFormChange({ ...formData, appointmentDate: dateOnly, startTime: `${hh}:${mm}`, duration_minutes: slotMinutes, endTime: endStr });
+                                  onFormChange({ ...formData, appointmentDate: currentDate, startTime: `${hh}:${mm}`, duration_minutes: slotMinutes, endTime: endStr });
                                   try { setLockedDurationFromSlot(true); } catch (e) {}
                                   try { (lastAutoEndRef as any).current = endStr; } catch (e) {}
                                 } else {
-                                  onFormChange({ ...formData, appointmentDate: dateOnly, startTime: `${hh}:${mm}`, endTime: endStr });
+                                  onFormChange({ ...formData, appointmentDate: currentDate, startTime: `${hh}:${mm}`, endTime: endStr });
                                   try { (lastAutoEndRef as any).current = endStr; } catch (e) {}
                                 }
                               } catch (e) {
@@ -1171,9 +1184,8 @@ export function CalendarRegistrationForm({ formData, onFormChange, createMode =
                               type="button"
                               className={`h-10 rounded-md border ${formData.startTime === `${hh}:${mm}` ? 'bg-blue-600 text-white' : 'bg-background'}`}
                               onClick={() => {
-                                // when selecting a slot, set appointmentDate (if missing) and startTime and duration
+                                // when selecting a slot, keep the existing appointmentDate and only update time
-                                const isoDate = dt.toISOString();
+                                const currentDate = (formData as any).appointmentDate;
-                                const dateOnly = isoDate.split('T')[0];
                                 const slotMinutes = s.slot_minutes || null;
                                   // compute endTime based on duration
                                   const durationForCalc = slotMinutes || (formData as any).duration_minutes || 0;
@@ -1182,11 +1194,11 @@ export function CalendarRegistrationForm({ formData, onFormChange, createMode =
                                   const endM = String(endDt.getMinutes()).padStart(2, '0');
                                   const endStr = `${endH}:${endM}`;
                                   if (slotMinutes) {
-                                    onFormChange({ ...formData, appointmentDate: dateOnly, startTime: `${hh}:${mm}`, duration_minutes: Number(slotMinutes), endTime: endStr });
+                                    onFormChange({ ...formData, appointmentDate: currentDate, startTime: `${hh}:${mm}`, duration_minutes: Number(slotMinutes), endTime: endStr });
                                     try { setLockedDurationFromSlot(true); } catch (e) {}
                                     try { (lastAutoEndRef as any).current = endStr; } catch (e) {}
                                   } else {
-                                    onFormChange({ ...formData, appointmentDate: dateOnly, startTime: `${hh}:${mm}`, endTime: endStr });
+                                    onFormChange({ ...formData, appointmentDate: currentDate, startTime: `${hh}:${mm}`, endTime: endStr });
                                     try { (lastAutoEndRef as any).current = endStr; } catch (e) {}
                                   }
                               }}

susconecta/components/features/forms/doctor-registration-form.tsx

@@ -821,7 +821,7 @@ async function handleSubmit(ev: React.FormEvent) {
                         <Button
                           variant={"outline"}
                           className={cn(
-                            "w-full justify-start text-left font-normal",
+                            "w-full justify-start text-left font-normal hover:bg-muted hover:text-foreground",
                             !form.data_nascimento && "text-muted-foreground"
                           )}
                         >
@@ -835,6 +835,10 @@ async function handleSubmit(ev: React.FormEvent) {
                           selected={form.data_nascimento ?? undefined}
                           onSelect={(date) => setField("data_nascimento", date ?? null)}
                           initialFocus
+                          captionLayout="dropdown"
+                          fromYear={1900}
+                          toYear={new Date().getFullYear()}
+                          disabled={(date) => date > new Date()}
                         />
                       </PopoverContent>
                     </Popover>

susconecta/components/features/forms/exception-form.tsx

@@ -6,6 +6,8 @@ import { Button } from '@/components/ui/button'
 import { Label } from '@/components/ui/label'
 import { Input } from '@/components/ui/input'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { Calendar as CalendarComponent } from '@/components/ui/calendar'
+import { Calendar } from 'lucide-react'
 import { criarExcecao, DoctorExceptionCreate } from '@/lib/api'
 import { useToast } from '@/hooks/use-toast'
 
@@ -23,8 +25,22 @@ export default function ExceptionForm({ open, onOpenChange, doctorId = null, onS
   const [kind, setKind] = useState<'bloqueio'|'liberacao'>('bloqueio')
   const [reason, setReason] = useState<string>('')
   const [submitting, setSubmitting] = useState(false)
+  const [showDatePicker, setShowDatePicker] = useState(false)
   const { toast } = useToast()
 
+  // Resetar form quando dialog fecha
+  const handleOpenChange = (newOpen: boolean) => {
+    if (!newOpen) {
+      setDate('')
+      setStartTime('')
+      setEndTime('')
+      setKind('bloqueio')
+      setReason('')
+      setShowDatePicker(false)
+    }
+    onOpenChange(newOpen)
+  }
+
   async function handleSubmit(e?: React.FormEvent) {
     e?.preventDefault()
     if (!doctorId) {
@@ -50,7 +66,7 @@ export default function ExceptionForm({ open, onOpenChange, doctorId = null, onS
       const saved = await criarExcecao(payload)
       toast({ title: 'Exceção criada', description: `${payload.date} • ${kind}`, variant: 'default' })
       onSaved?.(saved)
-      onOpenChange(false)
+      handleOpenChange(false)
     } catch (err: any) {
       console.error('Erro ao criar exceção:', err)
       toast({ title: 'Erro', description: err?.message || String(err), variant: 'destructive' })
@@ -60,16 +76,74 @@ export default function ExceptionForm({ open, onOpenChange, doctorId = null, onS
   }
 
   return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
+    <Dialog open={open} onOpenChange={handleOpenChange}>
       <DialogContent>
         <DialogHeader>
           <DialogTitle>Criar exceção</DialogTitle>
         </DialogHeader>
 
         <form onSubmit={handleSubmit} className="space-y-4 py-4">
-          <div>
+          <div className="space-y-2">
-            <Label>Data</Label>
+            <div className="flex items-center gap-2">
-            <Input type="date" value={date} onChange={(e) => setDate(e.target.value)} />
+              <Label className="text-[13px]">Data *</Label>
+              <button
+                type="button"
+                aria-label="Abrir seletor de data"
+                onClick={() => setShowDatePicker(!showDatePicker)}
+                className="h-6 w-6 flex items-center justify-center text-muted-foreground hover:text-foreground cursor-pointer"
+              >
+                <Calendar className="h-4 w-4" />
+              </button>
+            </div>
+            <div className="relative">
+              <Input 
+                type="text"
+                placeholder="DD/MM/AAAA"
+                className="h-11 w-full rounded-md pl-3 pr-3 text-[13px] transition-colors hover:bg-muted/30" 
+                value={date ? (() => {
+                  try {
+                    const [y, m, d] = String(date).split('-');
+                    return `${d}/${m}/${y}`;
+                  } catch (e) {
+                    return '';
+                  }
+                })() : ''} 
+                readOnly
+              />
+              {showDatePicker && (
+                <div className="absolute top-full left-0 mt-1 z-50 bg-card border border-border rounded-md shadow-lg p-3">
+                  <CalendarComponent
+                    mode="single"
+                    selected={date ? (() => {
+                      try {
+                        // Parse como local date para compatibilidade com Calendar
+                        const [y, m, d] = String(date).split('-').map(Number);
+                        return new Date(y, m - 1, d);
+                      } catch (e) {
+                        return undefined;
+                      }
+                    })() : undefined}
+                    onSelect={(selectedDate) => {
+                      if (selectedDate) {
+                        // Extrair data como local para evitar problemas de timezone
+                        const y = selectedDate.getFullYear();
+                        const m = String(selectedDate.getMonth() + 1).padStart(2, '0');
+                        const d = String(selectedDate.getDate()).padStart(2, '0');
+                        const dateStr = `${y}-${m}-${d}`;
+                        console.log('[ExceptionForm] Data selecionada:', dateStr, 'de', selectedDate);
+                        setDate(dateStr);
+                        setShowDatePicker(false);
+                      }
+                    }}
+                    disabled={(checkDate) => {
+                      const today = new Date();
+                      today.setHours(0, 0, 0, 0);
+                      return checkDate < today;
+                    }}
+                  />
+                </div>
+              )}
+            </div>
           </div>
 
           <div className="grid grid-cols-2 gap-4">
@@ -102,7 +176,7 @@ export default function ExceptionForm({ open, onOpenChange, doctorId = null, onS
           </div>
 
           <DialogFooter>
-            <Button variant="ghost" onClick={() => onOpenChange(false)} disabled={submitting}>Cancelar</Button>
+            <Button variant="ghost" onClick={() => handleOpenChange(false)} disabled={submitting}>Cancelar</Button>
             <Button type="submit" disabled={submitting}>{submitting ? 'Salvando...' : 'Criar exceção'}</Button>
           </DialogFooter>
         </form>

susconecta/components/features/forms/patient-registration-form.tsx

@@ -453,7 +453,7 @@ export function PatientRegistrationForm({
                         <Button
                           variant={"outline"}
                           className={cn(
-                            "w-full justify-start text-left font-normal",
+                            "w-full justify-start text-left font-normal hover:bg-muted hover:text-foreground",
                             !form.birth_date && "text-muted-foreground"
                           )}
                         >
@@ -467,6 +467,10 @@ export function PatientRegistrationForm({
                           selected={form.birth_date ?? undefined}
                           onSelect={(date) => setField("birth_date", date || null)}
                           initialFocus
+                          captionLayout="dropdown"
+                          fromYear={1900}
+                          toYear={new Date().getFullYear()}
+                          disabled={(date) => date > new Date()}
                         />
                       </PopoverContent>
                     </Popover>

susconecta/components/features/general/event-manager.tsx

@@ -55,7 +55,7 @@ export interface EventManagerProps {
 
 const defaultColors = [
   { name: "Blue", value: "blue", bg: "bg-blue-500", text: "text-blue-700" },
-  { name: "Green", value: "green", bg: "bg-green-500", text: "text-green-700" },
+  { name: "Green", value: "green", bg: "bg-[#10B981]", text: "text-green-700" },
   { name: "Purple", value: "purple", bg: "bg-purple-500", text: "text-purple-700" },
   { name: "Orange", value: "orange", bg: "bg-orange-500", text: "text-orange-700" },
   { name: "Pink", value: "pink", bg: "bg-pink-500", text: "text-pink-700" },
@@ -336,11 +336,11 @@ export function EventManager({
             {view === "list" && "Todos os eventos"}
           </h2>
           <div className="flex items-center gap-2">
-            <Button variant="outline" size="icon" onClick={() => navigateDate("prev")} className="h-8 w-8">
+            <Button variant="outline" size="icon" onClick={() => navigateDate("prev")} className="h-8 w-8 hover:bg-primary/10 hover:border-primary transition-colors hover:!text-primary">
-              <ChevronLeft className="h-4 w-4" />
+              <ChevronLeft className="h-4 w-4 text-current" />
             </Button>
-            <Button variant="outline" size="icon" onClick={() => navigateDate("next")} className="h-8 w-8">
+            <Button variant="outline" size="icon" onClick={() => navigateDate("next")} className="h-8 w-8 hover:bg-primary/10 hover:border-primary transition-colors hover:!text-primary">
-              <ChevronRight className="h-4 w-4" />
+              <ChevronRight className="h-4 w-4 text-current" />
             </Button>
           </div>
         </div>
@@ -384,37 +384,37 @@ export function EventManager({
           {/* Desktop: Button group */}
           <div className="hidden sm:flex items-center gap-1 rounded-lg border bg-background p-1">
             <Button
-              variant={view === "month" ? "secondary" : "ghost"}
+              variant={view === "month" ? "default" : "ghost"}
               size="sm"
               onClick={() => setView("month")}
-              className="h-8"
+              className={cn("h-8", view !== "month" && "hover:bg-blue-500 hover:text-white dark:hover:bg-blue-600 dark:hover:text-white")}
             >
               <Calendar className="h-4 w-4" />
               <span className="ml-1">Mês</span>
             </Button>
             <Button
-              variant={view === "week" ? "secondary" : "ghost"}
+              variant={view === "week" ? "default" : "ghost"}
               size="sm"
               onClick={() => setView("week")}
-              className="h-8"
+              className={cn("h-8", view !== "week" && "hover:bg-blue-500 hover:text-white dark:hover:bg-blue-600 dark:hover:text-white")}
             >
               <Grid3x3 className="h-4 w-4" />
               <span className="ml-1">Semana</span>
             </Button>
             <Button
-              variant={view === "day" ? "secondary" : "ghost"}
+              variant={view === "day" ? "default" : "ghost"}
               size="sm"
               onClick={() => setView("day")}
-              className="h-8"
+              className={cn("h-8", view !== "day" && "hover:bg-blue-500 hover:text-white dark:hover:bg-blue-600 dark:hover:text-white")}
             >
               <Clock className="h-4 w-4" />
               <span className="ml-1">Dia</span>
             </Button>
             <Button
-              variant={view === "list" ? "secondary" : "ghost"}
+              variant={view === "list" ? "default" : "ghost"}
               size="sm"
               onClick={() => setView("list")}
-              className="h-8"
+              className={cn("h-8", view !== "list" && "hover:bg-blue-500 hover:text-white dark:hover:bg-blue-600 dark:hover:text-white")}
             >
               <List className="h-4 w-4" />
               <span className="ml-1">Lista</span>
@@ -432,7 +432,7 @@ export function EventManager({
               aria-label="Buscar"
               className="flex items-center justify-center h-10 w-10 p-0 text-muted-foreground bg-transparent border-0"
               onClick={() => {
-                const el = document.querySelector<HTMLInputElement>('input[placeholder="Buscar eventos..."]')
+                const el = document.querySelector<HTMLInputElement>('input[placeholder="Buscar pacientes..."]')
                 el?.focus()
               }}
             >
@@ -441,7 +441,7 @@ export function EventManager({
 
             {/* Input central com altura consistente e foco visível */}
             <Input
-              placeholder="Buscar eventos..."
+              placeholder="Buscar paciente..."
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
               className={cn(

susconecta/components/features/pacientes/chat-widget.tsx

@@ -1,22 +1,19 @@
-
-
 "use client";
 
 import { useEffect, useMemo, useState } from "react";
-import { ArrowLeft, Mic, MicOff, Sparkles } from "lucide-react";
+import { useTheme } from "next-themes";
+import { ArrowLeft, Sparkles } from "lucide-react";
 import { Button } from "@/components/ui/button";
-import {
+import FileUploadChat from "@/components/ui/file-upload-and-chat";
-  AIAssistantInterface,
+
-  ChatSession,
+// 👉 AQUI você importa o fluxo correto de voz (já testado e funcionando)
-} from "@/components/ZoeIA/ai-assistant-interface";
+import AIVoiceFlow from "@/components/ZoeIA/ai-voice-flow";
-import { VoicePoweredOrb } from "@/components/ZoeIA/voice-powered-orb";
 
 export function ChatWidget() {
   const [assistantOpen, setAssistantOpen] = useState(false);
   const [realtimeOpen, setRealtimeOpen] = useState(false);
-  const [isRecording, setIsRecording] = useState(false);
+  const { theme } = useTheme();
-  const [voiceDetected, setVoiceDetected] = useState(false);
+  const isDark = theme === "dark";
-  const [history, setHistory] = useState<ChatSession[]>([]);
 
   useEffect(() => {
     if (!assistantOpen && !realtimeOpen) return;
@@ -33,7 +30,7 @@ export function ChatWidget() {
     () => (
       <span
         aria-hidden
-        className="absolute inset-0 rounded-full bg-gradient-to-br from-primary via-sky-500 to-emerald-400 opacity-90 blur-sm transition group-hover:blur group-hover:opacity-100"
+        className="absolute inset-0 rounded-full bg-linear-to-br from-primary via-sky-500 to-emerald-400 opacity-90 blur-sm transition group-hover:blur group-hover:opacity-100"
       />
     ),
     []
@@ -46,87 +43,45 @@ export function ChatWidget() {
   const closeRealtime = () => {
     setRealtimeOpen(false);
     setAssistantOpen(true);
-    setIsRecording(false);
-    setVoiceDetected(false);
-  };
-
-  const toggleRecording = () => {
-    setIsRecording((prev) => {
-      const next = !prev;
-      if (!next) {
-        setVoiceDetected(false);
-      }
-      return next;
-    });
-  };
-
-  const handleOpenDocuments = () => {
-    console.log("[ChatWidget] Abrindo fluxo de documentos");
-    closeAssistant();
-  };
-
-  const handleOpenChat = () => {
-    console.log("[ChatWidget] Encaminhando para chat em tempo real");
-    setAssistantOpen(false);
-    openRealtime();
-  };
-
-  const handleUpsertHistory = (session: ChatSession) => {
-    setHistory((previous) => {
-      const index = previous.findIndex((item) => item.id === session.id);
-      if (index >= 0) {
-        const updated = [...previous];
-        updated[index] = session;
-        return updated;
-      }
-      return [...previous, session];
-    });
-  };
-
-  const handleClearHistory = () => {
-    setHistory([]);
   };
 
   return (
     <>
+      {/* ----------------- ASSISTANT PANEL ----------------- */}
       {assistantOpen && (
         <div
           id="ai-assistant-overlay"
-          className="fixed inset-0 z-[100] flex flex-col bg-background"
+          className={`fixed inset-0 z-100 flex flex-col transition-colors ${isDark ? "bg-slate-950" : "bg-white"}`}
         >
-          <div className="flex items-center justify-between border-b border-border px-4 py-3">
+          <div className={`flex items-center justify-between border-b px-4 py-3 shadow-sm transition-colors ${isDark ? "bg-slate-900 border-slate-700" : "bg-white border-gray-200"}`}>
             <Button
               type="button"
               variant="ghost"
-              className="flex items-center gap-2"
+              className={`flex items-center gap-2 ${isDark ? "text-slate-300 hover:bg-slate-800" : "text-slate-700 hover:bg-slate-100"}`}
               onClick={closeAssistant}
             >
               <ArrowLeft className="h-4 w-4" aria-hidden />
-              <span className="text-sm">Voltar</span>
+              <span className="text-sm font-semibold">Voltar</span>
             </Button>
           </div>
+
           <div className="flex-1 overflow-auto">
-            <AIAssistantInterface
+            <FileUploadChat onOpenVoice={openRealtime} />
-              onOpenDocuments={handleOpenDocuments}
-              onOpenChat={handleOpenChat}
-              history={history}
-              onAddHistory={handleUpsertHistory}
-              onClearHistory={handleClearHistory}
-            />
           </div>
         </div>
       )}
 
+      {/* ----------------- REALTIME VOICE PANEL ----------------- */}
       {realtimeOpen && (
         <div
           id="ai-realtime-overlay"
-          className="fixed inset-0 z-[110] flex flex-col bg-background"
+          className={`fixed inset-0 z-110 flex flex-col transition-colors ${isDark ? "bg-slate-950" : "bg-white"}`}
         >
-          <div className="flex items-center justify-between border-b border-border px-4 py-3">
+          <div className={`flex items-center justify-between border-b px-4 py-3 transition-colors ${isDark ? "bg-slate-900 border-slate-700" : "bg-white border-gray-200"}`}>
             <Button
               type="button"
               variant="ghost"
-              className="flex items-center gap-2"
+              className={`flex items-center gap-2 ${isDark ? "text-slate-300 hover:bg-slate-800" : "text-slate-700 hover:bg-slate-100"}`}
               onClick={closeRealtime}
             >
               <ArrowLeft className="h-4 w-4" aria-hidden />
@@ -134,57 +89,19 @@ export function ChatWidget() {
             </Button>
           </div>
 
-          <div className="flex-1 overflow-auto">
+          {/* 🔥 Aqui entra o AIVoiceFlow COMPLETO */}
-            <div className="mx-auto flex h-full w-full max-w-4xl flex-col items-center justify-center gap-8 px-6 py-10 text-center">
+          <div className="flex-1 overflow-auto flex items-center justify-center">
-              <div className="relative w-full max-w-md aspect-square">
+            <AIVoiceFlow />
-                <VoicePoweredOrb
-                  enableVoiceControl={isRecording}
-                  className="h-full w-full rounded-3xl shadow-2xl"
-                  onVoiceDetected={setVoiceDetected}
-                />
-                {voiceDetected && (
-                  <span className="absolute bottom-6 right-6 rounded-full bg-primary/90 px-3 py-1 text-xs font-semibold text-primary-foreground shadow-lg">
-                    Ouvindo…
-                  </span>
-                )}
-              </div>
-
-              <div className="flex flex-col items-center gap-4">
-                <Button
-                  onClick={toggleRecording}
-                  size="lg"
-                  className="px-8 py-3"
-                  variant={isRecording ? "destructive" : "default"}
-                >
-                  {isRecording ? (
-                    <>
-                      <MicOff className="mr-2 h-5 w-5" aria-hidden />
-                      Parar captura de voz
-                    </>
-                  ) : (
-                    <>
-                      <Mic className="mr-2 h-5 w-5" aria-hidden />
-                      Iniciar captura de voz
-                    </>
-                  )}
-                </Button>
-                <p className="max-w-md text-sm text-muted-foreground">
-                  Ative a captura para falar com a equipe em tempo real. Assim que sua voz for detectada, a Zoe sinaliza visualmente e encaminha o atendimento.
-                </p>
-              </div>
-            </div>
           </div>
         </div>
       )}
 
+      {/* ----------------- FLOATING BUTTON ----------------- */}
       <div className="fixed bottom-6 right-6 z-50 sm:bottom-8 sm:right-8">
         <button
           type="button"
           onClick={openAssistant}
           className="group relative flex h-16 w-16 items-center justify-center rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2"
-          aria-haspopup="dialog"
-          aria-expanded={assistantOpen}
-          aria-controls="ai-assistant-overlay"
         >
           {gradientRing}
           <span className="relative flex h-16 w-16 items-center justify-center rounded-full bg-background text-primary shadow-[0_12px_30px_rgba(37,99,235,0.25)] ring-1 ring-primary/10 transition group-hover:scale-[1.03] group-active:scale-95">

susconecta/components/ui/button.tsx

@@ -14,7 +14,7 @@ const buttonVariants = cva(
         destructive:
           "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
         outline:
-          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+          "border bg-background shadow-xs hover:bg-blue-500 hover:text-white dark:bg-input/30 dark:border-input dark:hover:bg-blue-600 dark:hover:text-white",
         secondary:
           "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
         ghost:

susconecta/components/ui/file-upload-and-chat.tsx

@@ -0,0 +1,586 @@
+"use client";
+
+import React, { useState, useRef, useCallback, useEffect } from "react";
+import { useTheme } from "next-themes";
+import {
+  Upload,
+  Paperclip,
+  Send,
+  Moon,
+  Sun,
+  X,
+  FileText,
+  ImageIcon,
+  Video,
+  Music,
+  Archive,
+  MessageCircle,
+  Bot,
+  User,
+  Info,
+  Lock,
+  Mic,
+  AudioLines,
+  Plus,
+} from "lucide-react";
+
+const API_ENDPOINT = "https://n8n.jonasbomfim.store/webhook/zoe2";
+const FALLBACK_RESPONSE =
+  "Tive um problema para responder agora. Tente novamente em alguns instantes.";
+
+const FileUploadChat = ({ onOpenVoice }: { onOpenVoice?: () => void }) => {
+  // Usa tema global fornecido por next-themes
+  const { theme, setTheme } = useTheme();
+  const isDarkMode = theme === "dark";
+  const [messages, setMessages] = useState([
+    {
+      id: 1,
+      type: "ai",
+      content:
+        "Compartilhe uma dúvida, exame ou orientação que deseja revisar. A Zoe registra o pedido e te retorna com um resumo organizado para a equipe de saúde.",
+      timestamp: new Date(),
+    },
+  ]);
+  const [inputValue, setInputValue] = useState("");
+  const [uploadedFiles, setUploadedFiles] = useState<any[]>([]);
+  const [isDragOver, setIsDragOver] = useState(false);
+  const [isTyping, setIsTyping] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const chatEndRef = useRef<HTMLDivElement>(null);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  // Placeholder responsivo (não quebra, adapta o texto)
+  const [responsivePlaceholder, setResponsivePlaceholder] = useState("Pergunte qualquer coisa para a Zoe");
+
+  const computePlaceholder = (w: number) => {
+    if (w < 340) return "Pergunte à Zoe"; // ultra pequeno
+    if (w < 400) return "Pergunte algo à Zoe"; // pequeno
+    if (w < 520) return "Pergunte algo para a Zoe"; // médio estreito
+    return "Pergunte qualquer coisa para a Zoe"; // normal
+  };
+
+  useEffect(() => {
+    const update = () => setResponsivePlaceholder(computePlaceholder(window.innerWidth));
+    update();
+    window.addEventListener("resize", update);
+    return () => window.removeEventListener("resize", update);
+  }, []);
+
+  useEffect(() => {
+    chatEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages]);
+
+  useEffect(() => {
+    if (textareaRef.current) {
+      textareaRef.current.style.height = "auto";
+      textareaRef.current.style.height = textareaRef.current.scrollHeight + "px";
+    }
+  }, [inputValue]);
+
+  const getFileIcon = (fileName: string) => {
+    const ext = fileName.split(".").pop()?.toLowerCase();
+    if (["jpg", "jpeg", "png", "gif", "webp", "svg"].includes(ext || ""))
+      return <ImageIcon className="w-4 h-4" aria-hidden="true" />;
+    if (["mp4", "avi", "mkv", "mov", "webm"].includes(ext || ""))
+      return <Video className="w-4 h-4" aria-hidden="true" />;
+    if (["mp3", "wav", "flac", "ogg", "aac"].includes(ext || ""))
+      return <Music className="w-4 h-4" aria-hidden="true" />;
+    if (["zip", "rar", "7z", "tar", "gz"].includes(ext || ""))
+      return <Archive className="w-4 h-4" aria-hidden="true" />;
+    return <FileText className="w-4 h-4" aria-hidden="true" />;
+  };
+
+  const formatFileSize = (bytes: number) => {
+    if (bytes === 0) return "0 Bytes";
+    const k = 1024;
+    const sizes = ["Bytes", "KB", "MB", "GB", "TB"];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
+  };
+
+  const handleFileSelect = (files: FileList | null) => {
+    if (!files) return;
+    const newFiles = Array.from(files).map((file) => ({
+      id: Date.now() + Math.random(),
+      name: file.name,
+      size: file.size,
+      type: file.type,
+      file: file,
+    }));
+    setUploadedFiles((prev) => [...prev, ...newFiles]);
+    // Removido: mensagem de sistema de arquivos adicionados (não desejada na UI)
+  };
+
+  const handleDrop = useCallback((e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    setIsDragOver(false);
+    const files = e.dataTransfer.files;
+    if (files.length > 0) {
+      handleFileSelect(files);
+    }
+  }, []);
+
+  const handleDragOver = useCallback((e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    setIsDragOver(true);
+  }, []);
+
+  const handleDragLeave = useCallback((e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    setIsDragOver(false);
+  }, []);
+
+  const removeFile = (fileId: number) => {
+    setUploadedFiles((prev) => prev.filter((file) => file.id !== fileId));
+  };
+
+
+  const generateAIResponse = useCallback(
+    async (userMessage: string, files: any[]) => {
+      try {
+        const pdfFile = files.find((file) => file.name.toLowerCase().endsWith(".pdf"));
+
+        let response: Response;
+        if (pdfFile) {
+          const formData = new FormData();
+          formData.append("pdf", pdfFile.file); // campo 'pdf'
+          formData.append("message", userMessage); // campo 'message'
+          response = await fetch(API_ENDPOINT, {
+            method: "POST",
+            body: formData, // multipart/form-data automático
+          });
+        } else {
+          response = await fetch(API_ENDPOINT, {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ message: userMessage }),
+          });
+        }
+
+        if (!response.ok) {
+          throw new Error(`HTTP ${response.status}`);
+        }
+
+        let replyText = "";
+
+        try {
+          const parsed = await response.json(); // ← já trata como JSON direto
+          if (typeof parsed.message === "string") {
+            replyText = parsed.message.trim();
+          } else if (typeof parsed.reply === "string") {
+            replyText = parsed.reply.trim();
+          } else {
+            console.warn(
+              "[Zoe] Nenhum campo 'message' ou 'reply' na resposta:",
+              parsed
+            );
+          }
+        } catch (err) {
+          console.error("[Zoe] Erro ao processar resposta JSON:", err);
+        }
+
+        return replyText || FALLBACK_RESPONSE;
+      } catch (error) {
+        console.error("[FileUploadChat] Failed to get API response", error);
+        return FALLBACK_RESPONSE;
+      }
+    },
+    []
+  );
+
+  const sendMessage = useCallback(async () => {
+    if (inputValue.trim() || uploadedFiles.length > 0) {
+      const newMessage = {
+        id: Date.now(),
+        type: "user",
+        content: inputValue.trim(),
+        files: [...uploadedFiles],
+        timestamp: new Date(),
+      };
+      setMessages((prev) => [...prev, newMessage]);
+
+      const messageContent = inputValue.trim();
+      const attachedFiles = [...uploadedFiles];
+
+      setInputValue("");
+      setUploadedFiles([]);
+      setIsTyping(true);
+
+      // Get AI response from API
+      const aiResponseContent = await generateAIResponse(
+        messageContent,
+        attachedFiles
+      );
+
+      const aiResponse = {
+        id: Date.now() + 1,
+        type: "ai",
+        content: aiResponseContent,
+        timestamp: new Date(),
+      };
+      setMessages((prev) => [...prev, aiResponse]);
+      setIsTyping(false);
+    }
+  }, [inputValue, uploadedFiles, generateAIResponse]);
+
+  const handleKeyPress = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      sendMessage();
+    }
+  };
+
+  const themeClasses = {
+    background: isDarkMode ? "bg-gray-900" : "bg-gray-50",
+    cardBg: isDarkMode ? "bg-gray-800" : "bg-white",
+    text: isDarkMode ? "text-white" : "text-gray-900",
+    textSecondary: isDarkMode ? "text-gray-300" : "text-gray-600",
+    border: isDarkMode ? "border-gray-700" : "border-gray-200",
+    inputBg: isDarkMode ? "bg-gray-700" : "bg-gray-100",
+    uploadArea: isDragOver
+      ? isDarkMode
+        ? "bg-blue-900/50 border-blue-500"
+        : "bg-blue-50 border-blue-400"
+      : isDarkMode
+      ? "bg-gray-700 border-gray-600"
+      : "bg-gray-50 border-gray-300",
+    userMessage: isDarkMode ? "bg-blue-600" : "bg-blue-500",
+    aiMessage: isDarkMode ? "bg-gray-700" : "bg-gray-200",
+    systemMessage: isDarkMode
+      ? "bg-yellow-900/30 text-yellow-200"
+      : "bg-yellow-100 text-yellow-800",
+  };
+
+  return (
+    <div
+      className={`w-full min-h-screen transition-colors duration-300 ${themeClasses.background}`}
+    >
+      <div className="max-w-6xl mx-auto p-3 sm:p-6">
+        {/* Main Card - Zoe Assistant Section */}
+        <div
+          className={`rounded-2xl sm:rounded-3xl shadow-xl border bg-linear-to-br ${
+            isDarkMode
+              ? "from-primary/15 via-gray-800 to-gray-900"
+              : "from-blue-50 via-white to-indigo-50"
+          } p-4 sm:p-8 ${
+            isDarkMode ? "border-gray-700" : "border-blue-200"
+          } mb-4 sm:mb-6 backdrop-blur-sm`}
+        >
+          <div className="flex flex-col gap-4 sm:gap-8">
+            {/* Header */}
+            <div className="flex flex-col gap-3 sm:gap-4 sm:flex-row sm:items-start sm:justify-between">
+              <div className="flex items-center gap-2 sm:gap-4">
+                <span className="flex h-10 w-10 sm:h-12 sm:w-12 shrink-0 items-center justify-center rounded-2xl sm:rounded-3xl bg-linear-to-br from-primary via-indigo-500 to-sky-500 text-sm sm:text-base font-semibold text-white shadow-lg">
+                  Zoe
+                </span>
+                <div className="space-y-1">
+                  <p className="text-xs font-semibold uppercase tracking-[0.18em] sm:tracking-[0.24em] text-primary/80">
+                    Assistente Clínica Zoe
+                  </p>
+                  <h1 className="text-lg sm:text-3xl font-semibold tracking-tight text-foreground">
+                    <span className="bg-linear-to-r from-sky-400 via-primary to-indigo-500 bg-clip-text text-transparent">
+                      Olá, eu sou Zoe.
+                    </span>
+                    <span className="text-foreground"> Como posso ajudar?</span>
+                  </h1>
+                </div>
+              </div>
+              <div className="flex flex-wrap items-center justify-end gap-1 sm:gap-2">
+                <button
+                  type="button"
+                  className={`rounded-full px-2 sm:px-4 py-1 sm:py-2 text-xs font-semibold uppercase tracking-[0.12em] sm:tracking-[0.18em] whitespace-nowrap transition shadow-sm border ${isDarkMode ? "border-primary/40 text-primary hover:bg-primary/10" : "bg-primary border-primary text-white hover:bg-primary/90"}`}
+                >
+                  Novo atendimento
+                </button>
+                <button
+                  onClick={() => setTheme(isDarkMode ? "light" : "dark")}
+                  className={`p-1.5 sm:p-2 rounded-lg sm:rounded-lg border transition-all duration-200 hover:scale-105 hover:shadow-lg ${themeClasses.border} ${themeClasses.inputBg} ${themeClasses.text}`}
+                  aria-label="Alternar tema"
+                >
+                  <Moon className="w-4 h-4 sm:w-5 sm:h-5" />
+                </button>
+              </div>
+            </div>
+
+            {/* Description */}
+            <p
+              className={`max-w-3xl text-xs sm:text-sm leading-relaxed ${
+                isDarkMode ? "text-muted-foreground" : "text-gray-700"
+              }`}
+            >
+              Organizamos exames, orientações e tarefas assistenciais em um
+              painel único para acelerar decisões clínicas. Utilize a Zoe para
+              revisar resultados, registrar percepções e alinhar próximos passos
+              com a equipe de saúde.
+            </p>
+
+            {/* Security Info */}
+            <div className="flex items-center gap-2 rounded-full border border-primary/20 bg-primary/5 px-3 sm:px-4 py-1 sm:py-2 text-xs text-primary shadow-sm">
+              <Lock className="h-3 w-3 sm:h-4 sm:w-4 shrink-0" />
+              <span className="text-xs sm:text-sm">
+                Suas informações permanecem criptografadas e seguras com a
+                equipe Zoe.
+              </span>
+            </div>
+
+            {/* Info Section */}
+            <div
+              className={`rounded-2xl sm:rounded-3xl border bg-linear-to-br ${
+                isDarkMode
+                  ? "border-primary/25 from-primary/10 via-background/50 to-background text-muted-foreground"
+                  : "border-blue-200 from-blue-50 via-white to-indigo-50 text-gray-700"
+              } p-4 sm:p-6 text-xs sm:text-sm leading-relaxed`}
+            >
+              <div
+                className={`mb-3 sm:mb-4 flex items-center gap-2 sm:gap-3 ${
+                  isDarkMode ? "text-primary" : "text-blue-600"
+                }`}
+              >
+                <Info className="h-4 w-4 sm:h-5 sm:w-5 shrink-0" />
+                <span className="text-sm sm:text-base font-semibold">
+                  Informativo importante
+                </span>
+              </div>
+              <p
+                className={`mb-3 sm:mb-4 text-xs sm:text-sm ${
+                  isDarkMode ? "text-muted-foreground" : "text-gray-700"
+                }`}
+              >
+                A Zoe acompanha toda a jornada clínica, consolida exames e
+                registra orientações para que você tenha clareza em cada etapa
+                do cuidado. As respostas são informativas e complementam a
+                avaliação de um profissional de saúde qualificado.
+              </p>
+              <p
+                className={`font-medium text-xs sm:text-sm ${
+                  isDarkMode ? "text-foreground" : "text-gray-900"
+                }`}
+              >
+                Em situações de urgência, entre em contato com a equipe médica
+                presencial ou acione os serviços de emergência da sua região.
+              </p>
+            </div>
+
+            {/* (Removido) Lista de arquivos antiga – agora exibida sobre o input */}
+          </div>
+        </div>
+
+        {/* Chat Area */}
+        <div
+          className={`rounded-2xl shadow-xl border ${themeClasses.cardBg} ${themeClasses.border}`}
+        >
+          {/* Chat Header */}
+          <div
+            className={`px-4 sm:px-6 py-3 sm:py-4 border-b ${themeClasses.border}`}
+          >
+            <div className="flex items-center gap-2 sm:gap-3">
+              <div className="w-2 h-2 sm:w-3 sm:h-3 bg-green-500 rounded-full animate-pulse"></div>
+              <h3
+                className={`font-semibold text-sm sm:text-base ${themeClasses.text}`}
+              >
+                Chat with AI Assistant
+              </h3>
+              <span
+                className={`text-xs sm:text-sm ${themeClasses.textSecondary}`}
+              >
+                Online
+              </span>
+            </div>
+          </div>
+
+          {/* Chat Messages */}
+          <div className="h-64 sm:h-96 overflow-y-auto p-4 sm:p-6 space-y-3 sm:space-y-4">
+            {messages.map((message: any) => (
+              <div
+                key={message.id}
+                className={`flex ${
+                  message.type === "user"
+                    ? "justify-end"
+                    : message.type === "system"
+                    ? "justify-center"
+                    : "justify-start"
+                }`}
+              >
+                {message.type !== "system" && message.type === "ai" && (
+                  <span className="flex h-7 w-7 sm:h-8 sm:w-8 shrink-0 items-center justify-center rounded-full bg-linear-to-br from-primary via-indigo-500 to-sky-500 text-xs font-semibold text-white shadow-lg mr-2 sm:mr-3">
+                    Z
+                  </span>
+                )}
+
+                <div
+                  className={`max-w-xs sm:max-w-sm lg:max-w-md ${
+                    message.type === "user"
+                      ? `${themeClasses.userMessage} text-white ml-3`
+                      : message.type === "ai"
+                      ? `${themeClasses.aiMessage} ${themeClasses.text}`
+                      : `${themeClasses.systemMessage} text-xs`
+                  } px-4 py-3 rounded-2xl ${
+                    message.type === "user"
+                      ? "rounded-br-md"
+                      : message.type === "ai"
+                      ? "rounded-bl-md"
+                      : "rounded-lg"
+                  }`}
+                >
+                  {message.content && (
+                    <p className="wrap-break-word text-xs sm:text-sm">
+                      {message.content}
+                    </p>
+                  )}
+                  {message.files && message.files.length > 0 && (
+                    <div className="mt-1 sm:mt-2 space-y-1">
+                      {message.files.map((file: any) => (
+                        <div
+                          key={file.id}
+                          className="flex items-center gap-1 sm:gap-2 text-xs opacity-90 bg-black/10 rounded px-2 py-1"
+                        >
+                          {getFileIcon(file.name)}
+                          <span className="truncate text-xs">{file.name}</span>
+                          <span className="text-xs">
+                            ({formatFileSize(file.size)})
+                          </span>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                  <p className="text-xs opacity-70 mt-1 sm:mt-2">
+                    {message.timestamp.toLocaleTimeString([], {
+                      hour: "2-digit",
+                      minute: "2-digit",
+                    })}
+                  </p>
+                </div>
+
+                {message.type === "user" && (
+                  <div
+                    className={`w-8 h-8 rounded-full ml-3 flex items-center justify-center ${themeClasses.userMessage}`}
+                  >
+                    <User className="w-5 h-5 text-white" />
+                  </div>
+                )}
+              </div>
+            ))}
+
+            {/* Typing Indicator */}
+            {isTyping && (
+              <div className="flex justify-start">
+                <span className="flex h-7 w-7 sm:h-8 sm:w-8 shrink-0 items-center justify-center rounded-full bg-linear-to-br from-primary via-indigo-500 to-sky-500 text-xs font-semibold text-white shadow-lg mr-2 sm:mr-3">
+                  Z
+                </span>
+                <div
+                  className={`px-4 py-3 rounded-2xl rounded-bl-md ${themeClasses.aiMessage}`}
+                >
+                  <div className="flex space-x-1">
+                    <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce"></div>
+                    <div
+                      className="w-2 h-2 bg-gray-400 rounded-full animate-bounce"
+                      style={{ animationDelay: "0.1s" }}
+                    ></div>
+                    <div
+                      className="w-2 h-2 bg-gray-400 rounded-full animate-bounce"
+                      style={{ animationDelay: "0.2s" }}
+                    ></div>
+                  </div>
+                </div>
+              </div>
+            )}
+
+            <div ref={chatEndRef} />
+          </div>
+
+          {/* Chat Input */}
+          <div className={`border-t p-3 sm:p-4 ${themeClasses.border}`}>
+            <div className="flex flex-col gap-2">
+              {/* Anexos selecionados (chips) */}
+              {uploadedFiles.length > 0 && (
+                <div className="flex flex-wrap gap-2 max-h-32 overflow-y-auto pb-1">
+                  {uploadedFiles.map((file) => (
+                    <div
+                      key={file.id}
+                      className={`group flex items-center gap-2 px-3 py-2 rounded-lg border ${themeClasses.border} ${themeClasses.inputBg} relative`}
+                    >
+                      {getFileIcon(file.name)}
+                      <div className="min-w-0 max-w-[160px]">
+                        <p className={`text-xs font-medium truncate ${themeClasses.text}`}>
+                          {file.name}
+                        </p>
+                        <p className={`text-[10px] leading-tight ${themeClasses.textSecondary}`}>
+                          {formatFileSize(file.size)}
+                        </p>
+                      </div>
+                      <button
+                        onClick={() => removeFile(file.id)}
+                        className={`p-1 rounded-full transition-colors ${themeClasses.textSecondary} hover:text-red-500 hover:bg-red-500/20`}
+                        aria-label="Remover arquivo"
+                      >
+                        <X className="w-3 h-3" />
+                      </button>
+                    </div>
+                  ))}
+                  <button
+                    onClick={() => setUploadedFiles([])}
+                    className={`ml-auto text-[11px] px-2 py-1 rounded-md ${themeClasses.textSecondary} hover:text-red-500 transition-colors`}
+                  >
+                    Limpar tudo
+                  </button>
+                </div>
+              )}
+
+              {/* Input unificado com ícones embutidos */}
+              <div className="flex w-full">
+                <div className={`flex items-center w-full rounded-full border ${themeClasses.border} ${themeClasses.inputBg} h-11 px-2 gap-2`}>
+                  <button
+                    onClick={() => fileInputRef.current?.click()}
+                    type="button"
+                    className={`flex items-center justify-center h-7 w-7 rounded-full transition-colors hover:bg-primary/20 flex-shrink-0 ${themeClasses.text}`}
+                    aria-label="Anexar arquivos"
+                  >
+                    <Plus className="w-4 h-4" />
+                  </button>
+                  <input
+                    ref={fileInputRef}
+                    type="file"
+                    multiple
+                    className="hidden"
+                    onChange={(e) => handleFileSelect(e.target.files)}
+                  />
+                  <textarea
+                    ref={textareaRef}
+                    value={inputValue}
+                    onChange={(e) => setInputValue(e.target.value)}
+                    onKeyPress={handleKeyPress}
+                    placeholder={responsivePlaceholder}
+                    rows={1}
+                    className={`flex-1 bg-transparent resize-none focus:outline-none leading-snug py-3 pr-2 ${themeClasses.text} placeholder-gray-400 text-[13px] sm:text-sm placeholder:text-[12px] sm:placeholder:text-sm whitespace-nowrap overflow-hidden text-ellipsis placeholder:overflow-hidden placeholder:text-ellipsis`}
+                    style={{ minHeight: 'auto', overflow: 'hidden' }}
+                  />
+                  <button
+                    onClick={() => onOpenVoice?.()}
+                    type="button"
+                    className={`flex items-center justify-center h-8 w-8 rounded-full border ${themeClasses.border} transition-colors hover:bg-primary/20 flex-shrink-0 ${themeClasses.text}`}
+                    aria-label="Entrada de voz"
+                  >
+                    <AudioLines className="w-4 h-4" />
+                  </button>
+                  <button
+                    onClick={sendMessage}
+                    disabled={!inputValue.trim() && uploadedFiles.length === 0}
+                    type="button"
+                    className="flex items-center justify-center h-8 w-8 rounded-full bg-linear-to-r from-blue-500 to-purple-600 text-white hover:from-blue-600 hover:to-purple-700 disabled:from-gray-400 disabled:to-gray-500 disabled:cursor-not-allowed transition-colors shadow-md flex-shrink-0"
+                    aria-label="Enviar mensagem"
+                  >
+                    <Send className="w-4 h-4" />
+                  </button>
+                </div>
+              </div>
+            </div>
+
+            {/* Quick Actions */}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default FileUploadChat;

susconecta/components/ui/popover.tsx

@@ -30,7 +30,7 @@ function PopoverContent({
         align={align}
         sideOffset={sideOffset}
         className={cn(
-          "bg-white text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-[9999] w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md",
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-[9999] w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md",
           className
         )}
         {...props}

susconecta/components/ui/upload-avatar.tsx

@@ -74,26 +74,28 @@ export function UploadAvatar({ userId, currentAvatarUrl, onAvatarChange, userNam
     : 'U'
 
   return (
-    <div className="space-y-4">
+    <div className="w-full flex flex-col sm:flex-row items-center gap-3 sm:gap-4">
-      <div className="flex items-center gap-4">
+      <div className="flex-shrink-0">
-        <Avatar className="h-20 w-20">
+        <Avatar className="h-20 w-20 sm:h-20 sm:w-20">
           <AvatarImage src={currentAvatarUrl} alt={userName || 'Avatar'} />
           <AvatarFallback className="text-lg">
             {initials}
           </AvatarFallback>
         </Avatar>
+      </div>
 
-        <div className="space-y-2">
+      <div className="flex-1 w-full min-w-0">
-          <div className="flex gap-2">
+        <div className="flex flex-col gap-2">
+          <div className="flex gap-2 flex-wrap">
             <Button
               variant="outline"
               size="sm"
               onClick={() => document.getElementById('avatar-upload')?.click()}
               disabled={isUploading}
-              className="transition duration-200 hover:bg-primary/10 hover:text-primary dark:hover:bg-accent dark:hover:text-accent-foreground"
+              className="transition duration-200 hover:bg-blue-500 hover:text-white dark:hover:bg-blue-600 dark:hover:text-white text-xs sm:text-sm"
             >
-              <Upload className="h-4 w-4 mr-2" />
+              <Upload className="h-4 w-4 mr-1 sm:mr-2" />
-              {isUploading ? 'Enviando...' : 'Upload'}
+              <span className="hidden xs:inline">{isUploading ? 'Enviando...' : 'Upload'}</span>
             </Button>
 
             {currentAvatarUrl && (
@@ -101,10 +103,10 @@ export function UploadAvatar({ userId, currentAvatarUrl, onAvatarChange, userNam
                 variant="outline"
                 size="sm"
                 onClick={handleDownload}
-                className="transition duration-200 hover:bg-primary/10 hover:text-primary dark:hover:bg-accent dark:hover:text-accent-foreground"
+                className="transition duration-200 hover:bg-blue-500 hover:text-white dark:hover:bg-blue-600 dark:hover:text-white text-xs sm:text-sm"
               >
-                <Download className="h-4 w-4 mr-2" />
+                <Download className="h-4 w-4 mr-1 sm:mr-2" />
-                Download
+                <span className="hidden xs:inline">Download</span>
               </Button>
             )}
           </div>
@@ -118,8 +120,8 @@ export function UploadAvatar({ userId, currentAvatarUrl, onAvatarChange, userNam
             disabled={isUploading}
           />
 
-          <p className="text-xs text-muted-foreground">
+          <p className="text-xs text-muted-foreground leading-snug">
-            Formatos aceitos: JPG, PNG, WebP (máx. 2MB)
+            Formatos: JPG, PNG, WebP (máx. 2MB)
           </p>
           
           {error && (

susconecta/lib/api.ts

@@ -488,11 +488,10 @@ export async function deletarDisponibilidade(id: string): Promise<void> {
     headers: withPrefer({ ...baseHeaders() }, 'return=minimal'),
   });
 
-  if (res.status === 204) return;
+  if (res.status === 204 || res.status === 200) return;
-  // Some deployments may return 200 with a representation — accept that too
+  
-  if (res.status === 200) return;
+  // Se chegou aqui e não foi sucesso, lance erro
-  // Otherwise surface a friendly error using parse()
+  throw new Error(`Erro ao deletar disponibilidade: ${res.status}`);
-  await parse(res as Response);
 }
 
 // ===== EXCEÇÕES (Doctor Exceptions) =====
@@ -580,14 +579,21 @@ export async function listarExcecoes(params?: { doctorId?: string; date?: string
 export async function deletarExcecao(id: string): Promise<void> {
   if (!id) throw new Error('ID da exceção é obrigatório');
   const url = `${REST}/doctor_exceptions?id=eq.${encodeURIComponent(String(id))}`;
+  console.log('[deletarExcecao] Deletando exceção:', id, 'URL:', url);
   const res = await fetch(url, {
     method: 'DELETE',
     headers: withPrefer({ ...baseHeaders() }, 'return=minimal'),
   });
 
-  if (res.status === 204) return;
+  console.log('[deletarExcecao] Status da resposta:', res.status);
-  if (res.status === 200) return;
+  
-  await parse(res as Response);
+  if (res.status === 204 || res.status === 200) {
+    console.log('[deletarExcecao] Exceção deletada com sucesso');
+    return;
+  }
+  
+  // Se chegou aqui e não foi sucesso, lance erro
+  throw new Error(`Erro ao deletar exceção: ${res.status}`);
 }
 
 

susconecta/package-lock.json

@@ -56,7 +56,6 @@
         "jspdf": "^3.0.3",
         "lucide-react": "^0.454.0",
         "next-themes": "latest",
-        "ogl": "^1.0.11",
         "react": "^18",
         "react-day-picker": "latest",
         "react-dom": "^18",
@@ -339,7 +338,6 @@
       "resolved": "https://registry.npmjs.org/@fullcalendar/core/-/core-6.1.19.tgz",
       "integrity": "sha512-z0aVlO5e4Wah6p6mouM0UEqtRf1MZZPt4mwzEyU6kusaNL+dlWQgAasF2cK23hwT4cmxkEmr4inULXgpyeExdQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "preact": "~10.12.1"
       }
@@ -3045,8 +3043,7 @@
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz",
       "integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==",
       "devOptional": true,
-      "license": "MIT",
+      "license": "MIT"
-      "peer": true
     },
     "node_modules/@types/quill": {
       "version": "1.3.10",
@@ -3070,7 +3067,6 @@
       "integrity": "sha512-RFA/bURkcKzx/X9oumPG9Vp3D3JUgus/d0b67KB0t5S/raciymilkOa66olh78MUI92QLbEJevO7rvqU/kjwKA==",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.0.2"
@@ -3082,7 +3078,6 @@
       "integrity": "sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "peerDependencies": {
         "@types/react": "^18.0.0"
       }
@@ -3161,7 +3156,6 @@
       "integrity": "sha512-BnOroVl1SgrPLywqxyqdJ4l3S2MsKVLDVxZvjI1Eoe8ev2r3kGDo+PcMihNmDE+6/KjkTubSJnmqGZZjQSBq/g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.46.2",
         "@typescript-eslint/types": "8.46.2",
@@ -3683,7 +3677,6 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -4081,7 +4074,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.8.19",
         "caniuse-lite": "^1.0.30001751",
@@ -4751,8 +4743,7 @@
       "version": "8.6.0",
       "resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.6.0.tgz",
       "integrity": "sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA==",
-      "license": "MIT",
+      "license": "MIT"
-      "peer": true
     },
     "node_modules/embla-carousel-react": {
       "version": "8.6.0",
@@ -5009,7 +5000,6 @@
       "integrity": "sha512-t5aPOpmtJcZcz5UJyY2GbvpDlsK5E8JqRqoKtfiKE3cNh437KIqfJr3A3AKf5k64NPx6d0G3dno6XDY05PqPtw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -5199,7 +5189,6 @@
       "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@rtsao/scc": "^1.1.0",
         "array-includes": "^3.1.9",
@@ -7246,7 +7235,6 @@
       "resolved": "https://registry.npmjs.org/next/-/next-15.5.6.tgz",
       "integrity": "sha512-zTxsnI3LQo3c9HSdSf91O1jMNsEzIXDShXd4wVdg9y5shwLqBXi4ZtUUJyB86KGVSJLZx0PFONvO54aheGX8QQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@next/env": "15.5.6",
         "@swc/helpers": "0.5.15",
@@ -7484,12 +7472,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/ogl": {
-      "version": "1.0.11",
-      "resolved": "https://registry.npmjs.org/ogl/-/ogl-1.0.11.tgz",
-      "integrity": "sha512-kUpC154AFfxi16pmZUK4jk3J+8zxwTWGPo03EoYA8QPbzikHoaC82n6pNTbd+oEaJonaE8aPWBlX7ad9zrqLsA==",
-      "license": "Unlicense"
-    },
     "node_modules/optionator": {
       "version": "0.9.4",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
@@ -7675,7 +7657,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -7716,7 +7697,6 @@
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
@@ -7803,7 +7783,6 @@
       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
       "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
@@ -7837,7 +7816,6 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
       "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0",
         "scheduler": "^0.23.2"
@@ -7851,7 +7829,6 @@
       "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.65.0.tgz",
       "integrity": "sha512-xtOzDz063WcXvGWaHgLNrNzlsdFgtUWcb32E6WFaGTd7kPZG3EeDusjdZfUsPwKCKVXy1ZlntifaHZ4l8pAsmw==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=18.0.0"
       },
@@ -7890,7 +7867,6 @@
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
       "integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/use-sync-external-store": "^0.0.6",
         "use-sync-external-store": "^1.4.0"
@@ -8055,8 +8031,7 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
       "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
-      "license": "MIT",
+      "license": "MIT"
-      "peer": true
     },
     "node_modules/redux-thunk": {
       "version": "3.1.0",
@@ -8795,8 +8770,7 @@
       "version": "4.1.16",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.16.tgz",
       "integrity": "sha512-pONL5awpaQX4LN5eiv7moSiSPd/DLDzKVRJz8Q9PgzmAdd1R4307GQS2ZpfiN7ZmekdQrfhZZiSE5jkLR4WNaA==",
-      "license": "MIT",
+      "license": "MIT"
-      "peer": true
     },
     "node_modules/tailwindcss-animate": {
       "version": "1.0.7",
@@ -8877,7 +8851,6 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -9049,7 +9022,6 @@
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"

susconecta/types/lamejs.d.ts

@@ -0,0 +1,14 @@
+// Minimal type declarations for lamejs used in demo-voice-orb
+// Extend if more APIs are required.
+
+declare module 'lamejs' {
+  class Mp3Encoder {
+    constructor(channels: number, sampleRate: number, kbps: number);
+    encodeBuffer(buffer: Int16Array): Uint8Array;
+    flush(): Uint8Array;
+  }
+  export { Mp3Encoder };
+  // Default export pattern support
+  const _default: { Mp3Encoder: typeof Mp3Encoder };
+  export default _default;
+}