Merge pull request 'fix/visual-adjustments' (#82) from fix/visual-adjustments into develop

Reviewed-on: #82

README.md

@@ -16,7 +16,7 @@
 
 ---
 
-## 📋 Índice
+## Índice
 
 1. [Visão Geral](#-visão-geral)
 2. [Problema e Solução](#-problema-e-solução)
@@ -32,61 +32,61 @@
 
 ---
 
-## 🎯 Visão Geral
+## 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
+### 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
+- **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
+## 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
+- 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
+- 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
+## 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 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 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
+### 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
+## Tecnologias
 
 ### Frontend (Atual)
 - **[Next.js 15](https://nextjs.org/)** - Framework React com Server Components
@@ -111,7 +111,7 @@ MEDIConnect oferece um sistema inteligente de gestão que:
 
 ---
 
-## 🚀 Instalação
+## Instalação
 
 ### Pré-requisitos
 
@@ -167,21 +167,21 @@ Abra [http://localhost:3000](http://localhost:3000) no seu navegador.
 
 ---
 
-## 💻 Como Usar
+## Como Usar
 
 ### Navegação Principal
 
-#### 🏠 Página Inicial
+#### Página Inicial
 Acesse `/home` para conhecer a plataforma e suas funcionalidades.
 
-#### 🔐 Autenticação
+#### Autenticação
 O sistema possui três níveis de acesso:
 
 - **Pacientes**: `/login-paciente`
 - **Profissionais**: `/login-profissional`
 - **Administradores**: `/login-admin`
 
-#### 📱 Funcionalidades por Perfil
+#### Funcionalidades por Perfil
 
 **Como Paciente:**
 1. Faça login em `/login-paciente`
@@ -205,7 +205,7 @@ O sistema possui três níveis de acesso:
 
 ---
 
-## 🎭 Fluxos de Usuário
+## Fluxos de Usuário
 
 ### Fluxo de Agendamento (Paciente)
 
@@ -243,9 +243,9 @@ E --> F[Tomar Decisões]
 
 ---
 
-## 🧩 Componentes Principais
+## Componentes Principais
 
-### 🤖 Zoe IA Assistant
+### Zoe IA Assistant
 
 Assistente virtual inteligente que oferece:
 - Suporte 24/7 aos usuários
@@ -258,7 +258,7 @@ Assistente virtual inteligente que oferece:
 - `components/ZoeIA/voice-powered-orb.tsx`
 - `components/ZoeIA/demo.tsx`
 
-### 📅 Sistema de Agendamento
+### Sistema de Agendamento
 
 Gerenciamento completo de consultas e exames:
 - Calendário interativo
@@ -271,7 +271,7 @@ Gerenciamento completo de consultas e exames:
 - `components/features/Calendario/`
 - `app/(main-routes)/consultas/`
 
-### 📋 Editor de Laudos
+### Editor de Laudos
 
 Ferramenta profissional para criação de laudos médicos:
 - Interface intuitiva
@@ -283,7 +283,7 @@ Ferramenta profissional para criação de laudos médicos:
 - `lib/laudo-exemplos.ts`
 - `lib/laudo-notification.ts`
 
-### 📊 Dashboard Analytics
+### Dashboard Analytics
 
 Painéis administrativos com:
 - Métricas em tempo real
@@ -298,7 +298,7 @@ Painéis administrativos com:
 
 ---
 
-## 🤝 Contribuindo
+## Contribuindo
 
 Contribuições são bem-vindas! Siga estes passos:
 
@@ -351,26 +351,26 @@ Descreva suas mudanças detalhadamente.
 
 ---
 
-## 📝 Licença
+## Licença
 
 Este projeto está sob a licença **MIT**. Veja o arquivo [LICENSE](LICENSE) para mais detalhes.
 
-## 📞 Contato
+## 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)
+- 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 com ❤️ pelo squad 20**
+**Desenvolvido pelo squad 20**
 
 *Transformando a gestão de saúde através da tecnologia*
 

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)
-    const appointmentDateStr = baseDate.toISOString().split("T")[0];
+    // compute start and end times (HH:MM) and date using local time to avoid timezone issues
+    const year = baseDate.getFullYear();
+    const month = String(baseDate.getMonth() + 1).padStart(2, '0');
+    const day = String(baseDate.getDate()).padStart(2, '0');
+    const appointmentDateStr = `${year}-${month}-${day}`;
     const startTime = `${String(baseDate.getHours()).padStart(2, '0')}:${String(baseDate.getMinutes()).padStart(2, '0')}`;
     const endDate = new Date(baseDate.getTime() + duration * 60000);
     const endTime = `${String(endDate.getHours()).padStart(2, '0')}:${String(endDate.getMinutes()).padStart(2, '0')}`;
@@ -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="lg:col-span-2 bg-card p-4 sm:p-5 md:p-6 rounded-lg border border-border">
+      <div className="grid grid-cols-1 gap-4 md:gap-6">
+        <div className="bg-card p-4 sm:p-5 md:p-6 rounded-lg border border-border">
           <h2 className="text-base sm:text-lg font-semibold text-foreground mb-3 sm:mb-4">Próximas Consultas (7 dias)</h2>
           {appointments.length > 0 ? (
             <div className="space-y-2 sm:space-y-3">
@@ -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);
-  doc.text(content, 10, 20);
+  let yPosition = 15;
+
+  // Add title
+  doc.setFontSize(16);
+  doc.setFont(undefined, "bold");
+  doc.text(title, 15, yPosition);
+  yPosition += 10;
+
+  // Add description/content
+  doc.setFontSize(11);
+  doc.setFont(undefined, "normal");
+  const contentLines = doc.splitTextToSize(content, 180);
+  doc.text(contentLines, 15, yPosition);
+  yPosition += contentLines.length * 5 + 15;
+
+  // Capture chart if chartElementId is provided
+  if (chartElementId) {
+    try {
+      const chartElement = document.getElementById(chartElementId);
+      if (chartElement) {
+        // Create a canvas from the chart element
+        const canvas = await html2canvas(chartElement, {
+          backgroundColor: "#ffffff",
+          scale: 2,
+          logging: false,
+        });
+
+        // Convert canvas to image
+        const imgData = canvas.toDataURL("image/png");
+        const imgWidth = 180;
+        const imgHeight = (canvas.height * imgWidth) / canvas.width;
+
+        // Add image to PDF
+        doc.addImage(imgData, "PNG", 15, yPosition, imgWidth, imgHeight);
+        yPosition += imgHeight + 10;
+      }
+    } catch (error) {
+      console.error("Error capturing chart:", error);
+      doc.text("(Erro ao capturar gráfico)", 15, yPosition);
+      yPosition += 10;
+    }
+  }
+
   doc.save(`${title.toLowerCase().replace(/ /g, "-")}.pdf`);
 }
 
@@ -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}>
-              <BarChart data={consultasData}>
-                <CartesianGrid strokeDasharray="3 3" />
-                <XAxis dataKey="periodo" />
-                <YAxis />
-                <Tooltip />
-                <Bar dataKey="consultas" fill="#6366f1" name="Consultas" />
-              </BarChart>
-            </ResponsiveContainer>
+            <div id="chart-consultas">
+              <ResponsiveContainer width="100%" height={220}>
+                <BarChart data={consultasData}>
+                  <CartesianGrid strokeDasharray="3 3" />
+                  <XAxis dataKey="periodo" />
+                  <YAxis />
+                  <Tooltip />
+                  <Bar dataKey="consultas" fill="#6366f1" name="Consultas" />
+                </BarChart>
+              </ResponsiveContainer>
+            </div>
           )}
         </div>
       </div>
@@ -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">
-                <Label className="text-right">Nome</Label>
-                <span className="col-span-3 font-medium">{viewingDoctor?.full_name}</span>
+              <div className="grid grid-cols-1 sm:grid-cols-4 items-start sm:items-center gap-2 sm:gap-4">
+                <Label className="text-left sm:text-right">Nome</Label>
+                <span className="col-span-1 sm:col-span-3 font-medium">{viewingDoctor?.full_name}</span>
               </div>
-              <div className="grid grid-cols-4 items-center gap-4">
-                <Label className="text-right">Especialidade</Label>
-                <span className="col-span-3">
+              <div className="grid grid-cols-1 sm:grid-cols-4 items-start sm:items-center gap-2 sm:gap-4">
+                <Label className="text-left sm:text-right">Especialidade</Label>
+                <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">
-                <Label className="text-right">CRM</Label>
-                <span className="col-span-3">{viewingDoctor?.crm}</span>
+              <div className="grid grid-cols-1 sm:grid-cols-4 items-start sm:items-center gap-2 sm:gap-4">
+                <Label className="text-left sm:text-right">CRM</Label>
+                <span className="col-span-1 sm:col-span-3">{viewingDoctor?.crm}</span>
               </div>
-              <div className="grid grid-cols-4 items-center gap-4">
-                <Label className="text-right">Email</Label>
-                <span className="col-span-3">{viewingDoctor?.email}</span>
+              <div className="grid grid-cols-1 sm:grid-cols-4 items-start sm:items-center gap-2 sm:gap-4">
+                <Label className="text-left sm:text-right">Email</Label>
+                <span className="col-span-1 sm:col-span-3">{viewingDoctor?.email}</span>
               </div>
-              <div className="grid grid-cols-4 items-center gap-4">
-                <Label className="text-right">Telefone</Label>
-                <span className="col-span-3">{viewingDoctor?.telefone}</span>
+              <div className="grid grid-cols-1 sm:grid-cols-4 items-start sm:items-center gap-2 sm:gap-4">
+                <Label className="text-left sm:text-right">Telefone</Label>
+                <span className="col-span-1 sm:col-span-3">{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 (
-    <>
-      {children}
-      <ChatWidget />
-    </>
-  );
+  return <>{children}</>;
 }

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

@@ -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">
-                <Label className="text-right">Nome</Label>
-                <span className="col-span-3 font-medium">{viewingPatient.full_name}</span>
+              <div className="grid grid-cols-1 sm:grid-cols-4 items-start sm:items-center gap-2 sm:gap-4">
+                <Label className="text-left sm:text-right">Nome</Label>
+                <span className="col-span-1 sm:col-span-3 font-medium">{viewingPatient.full_name}</span>
               </div>
-              <div className="grid grid-cols-4 items-center gap-4">
-                <Label className="text-right">CPF</Label>
-                <span className="col-span-3">{viewingPatient.cpf}</span>
+              <div className="grid grid-cols-1 sm:grid-cols-4 items-start sm:items-center gap-2 sm:gap-4">
+                <Label className="text-left sm:text-right">CPF</Label>
+                <span className="col-span-1 sm:col-span-3">{viewingPatient.cpf}</span>
               </div>
-              <div className="grid grid-cols-4 items-center gap-4">
-                <Label className="text-right">Telefone</Label>
-                <span className="col-span-3">{viewingPatient.phone_mobile}</span>
+              <div className="grid grid-cols-1 sm:grid-cols-4 items-start sm:items-center gap-2 sm:gap-4">
+                <Label className="text-left sm:text-right">Telefone</Label>
+                <span className="col-span-1 sm:col-span-3">{viewingPatient.phone_mobile}</span>
               </div>
-              <div className="grid grid-cols-4 items-center gap-4">
-                <Label className="text-right">Endereço</Label>
-                <span className="col-span-3">
+              <div className="grid grid-cols-1 sm:grid-cols-4 items-start sm:items-center gap-2 sm:gap-4">
+                <Label className="text-left sm:text-right">Endereço</Label>
+                <span className="col-span-1 sm:col-span-3">
                   {`${viewingPatient.street || ''}, ${viewingPatient.number || ''} - ${viewingPatient.neighborhood || ''}, ${viewingPatient.city || ''} - ${viewingPatient.state || ''}`}
                 </span>
               </div>
-               <div className="grid grid-cols-4 items-center gap-4">
-                <Label className="text-right">Observações</Label>
-                <span className="col-span-3">{viewingPatient.notes || "Nenhuma"}</span>
+               <div className="grid grid-cols-1 sm:grid-cols-4 items-start sm:items-center gap-2 sm:gap-4">
+                <Label className="text-left sm:text-right">Observações</Label>
+                <span className="col-span-1 sm:col-span-3">{viewingPatient.notes || "Nenhuma"}</span>
               </div>
             </div>
             <DialogFooter>

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')}
-              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')}
+              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'
@@ -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) {
-      localStorage.setItem(`laudo-draft-${laudoId}`, content);
-    }
-  }, [content, laudoId]);
-
-  // Sincronizar conteúdo com o editor
-  useEffect(() => {
-    if (editorRef.current && content) {
-      if (editorRef.current.innerHTML !== content) {
-        editorRef.current.innerHTML = content;
+    const timeoutId = setTimeout(() => {
+      if (laudoId) {
+        // Capturar conteúdo atual do editor antes de salvar
+        const currentContent = editorRef.current?.innerHTML || content;
+        
+        const draft = {
+          content: currentContent,
+          campos,
+          lastSaved: new Date().toISOString(),
+        };
+        
+        localStorage.setItem(`laudo-draft-${laudoId}`, JSON.stringify(draft));
       }
-    }
-  }, [content]);
+    }, 1000); // Aguarda 1 segundo após última mudança
 
-  // Restaurar conteúdo quando volta para a aba editor
-  useEffect(() => {
-    if (activeTab === 'editor' && editorRef.current && content) {
-      editorRef.current.focus();
-      const range = document.createRange();
-      const sel = window.getSelection();
-      range.setStart(editorRef.current, editorRef.current.childNodes.length);
-      range.collapse(true);
-      sel?.removeAllRanges();
-      sel?.addRange(range);
+    return () => clearTimeout(timeoutId);
+  }, [content, campos, laudoId]);
+
+  // Função para trocar de aba salvando conteúdo antes
+  const handleTabChange = (newTab: string) => {
+    // Salvar conteúdo do editor antes de trocar
+    if (editorRef.current) {
+      const editorContent = editorRef.current.innerHTML;
+      setContent(editorContent);
     }
-  }, [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
-        const contentHtml = r.content_html || r.conteudo_html || '';
+        // Preencher conteúdo - verificar todos os possíveis nomes de campo
+        const contentHtml = r.content_html || r.conteudo_html || r.contentHtml || r.conteudo || r.content || '';
+        console.log('[EditarLaudoPage] Loading content - report:', r);
+        console.log('[EditarLaudoPage] Content fields check:', {
+          content_html: r.content_html,
+          conteudo_html: r.conteudo_html,
+          contentHtml: r.contentHtml,
+          conteudo: r.conteudo,
+          content: r.content,
+          finalContent: contentHtml
+        });
         
         // Verificar se existe rascunho salvo no localStorage
-        const draftContent = typeof window !== 'undefined' ? localStorage.getItem(`laudo-draft-${laudoId}`) : null;
-        const finalContent = draftContent || contentHtml;
+        let finalContent = contentHtml;
+        let finalCampos = {
+          cid: r.cid_code || r.cid || '',
+          diagnostico: r.diagnosis || r.diagnostico || '',
+          conclusao: r.conclusion || r.conclusao || '',
+          exame: r.exam || r.exame || '',
+          especialidade: r.especialidade || '',
+          mostrarData: !r.hide_date,
+          mostrarAssinatura: !r.hide_signature,
+        };
         
-        setContent(finalContent);
-        if (editorRef.current) {
-          editorRef.current.innerHTML = finalContent;
-          // Colocar cursor no final do texto
-          editorRef.current.focus();
-          const range = document.createRange();
-          const sel = window.getSelection();
-          range.setStart(editorRef.current, editorRef.current.childNodes.length);
-          range.collapse(true);
-          sel?.removeAllRanges();
-          sel?.addRange(range);
+        if (typeof window !== 'undefined') {
+          const draftData = localStorage.getItem(`laudo-draft-${laudoId}`);
+          if (draftData) {
+            try {
+              const draft = JSON.parse(draftData);
+              if (draft.content) finalContent = draft.content;
+              if (draft.campos) finalCampos = { ...finalCampos, ...draft.campos };
+            } catch (err) {
+              // Se falhar parse, tentar como string simples (formato antigo)
+              finalContent = draftData;
+            }
+          }
         }
+        
+        setCampos(finalCampos);
+        setContent(finalContent);
+        console.log('[EditarLaudoPage] Setting content state with length:', finalContent.length);
+        
+        // O innerHTML será setado no useEffect separado abaixo
       } catch (err) {
         console.warn('Erro ao carregar laudo:', err);
         toast({
@@ -195,6 +232,14 @@ 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);
+      editorRef.current.innerHTML = content;
+    }
+  }, [content, loading]);
+
   // Formatação com contenteditable
   const applyFormat = (command: string, value?: string) => {
     document.execCommand(command, false, value || undefined);
@@ -332,7 +377,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 +402,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 +413,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'
@@ -711,7 +756,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 +765,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

@@ -1762,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 */}
@@ -1888,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="space-y-3 sm:space-y-4">
-                  <UploadAvatar
-                    userId={profileData.id}
-                    currentAvatarUrl={profileData.foto_url || "/avatars/01.png"}
-                    onAvatarChange={(newUrl) => handleProfileChange('foto_url', newUrl)}
-                    userName={profileData.nome}
-                  />
-                </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="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">
-                    <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'}
-                    </p>
-                  </div>
+                <div className="text-center space-y-2">
+                  <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'}
+                  </p>
                 </div>
-              )}
+              </div>
             </div>
           </div>
         </div>
@@ -1925,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">
-          <div className="flex items-center gap-2 sm:gap-4">
-            <Avatar className="h-10 w-10 sm:h-12 sm:w-12 md:h-12 md:w-12">
+        <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-3 min-w-0 flex-1">
+            {/* 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">
-              <span className="text-xs sm:text-sm md:text-sm text-muted-foreground">Conta do paciente</span>
-              <span className="font-bold text-sm sm:text-base md:text-lg leading-none">{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>
+            <div className="flex flex-col min-w-0 flex-1">
+              <span className="text-xs text-muted-foreground truncate">Conta do paciente</span>
+              <span className="font-bold text-xs sm:text-sm leading-tight truncate">{profileData.nome || 'Paciente'}</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 
@@ -1949,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>

susconecta/app/paciente/resultados/ResultadosClient.tsx

@@ -876,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
@@ -1001,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)
@@ -1009,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>
             )
@@ -1051,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(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(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-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(totalPages)} disabled={currentPage === totalPages} className="hover:bg-primary! hover:text-white!">Última</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-blue-500 hover:text-white dark:hover:bg-blue-600 dark:hover:text-white">Última</Button>
               </div>
             </div>
           )}
@@ -1186,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)} />
-              <Button className="h-10" onClick={async () => { if (moreTimesForDoctor) await fetchSlotsForDate(moreTimesForDoctor, moreTimesDate) }}>Buscar horários</Button>
+              <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)
+                  if (moreTimesForDoctor) {
+                    void fetchSlotsForDate(moreTimesForDoctor, e.target.value)
+                  }
+                }} 
+              />
             </div>
 
             <div className="mt-2">
@@ -1196,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">
-                  {moreTimesSlots.map(s => (
-                    <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); } }}>
-                      {s.label}
-                    </button>
-                  ))}
+                <div className="max-h-[60vh] overflow-y-auto pr-2">
+                  <div className="grid grid-cols-3 gap-2">
+                    {moreTimesSlots.map(s => (
+                      <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); } }}>
+                        {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 ? (
-                <UploadAvatar
-                  userId={String(doctorId || (user && (user as any).id) || '')}
-                  currentAvatarUrl={(profileData as any).fotoUrl}
-                  userName={(profileData as any).nome}
-                  onAvatarChange={async (newUrl: string) => {
-                    try {
-                      setProfileData((prev) => ({ ...prev, fotoUrl: newUrl }));
-                      // Foto foi salva no Supabase Storage - atualizar apenas o estado local
-                      // 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>
+              <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">
-                    <p className="text-xs sm:text-sm text-muted-foreground">
-                      {profileData.nome?.split(' ').map((n: string) => n[0]).join('').toUpperCase().slice(0, 2) || 'MD'}
-                    </p>
-                  </div>
-                </>
-              )}
+              <div className="text-center space-y-2">
+                <p className="text-xs sm:text-sm text-muted-foreground">
+                  {profileData.nome?.split(' ').map((n: string) => n[0]).join('').toUpperCase().slice(0, 2) || 'MD'}
+                </p>
+              </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/features/dashboard/header.tsx

@@ -79,7 +79,7 @@ export function PagesHeader({ title = "", subtitle = "" }: { title?: string, sub
             </Avatar>
           </Button>
           {dropdownOpen && (
-            <div className="absolute right-0 mt-2 w-64 sm:w-80 bg-popover border border-border rounded-md shadow-lg z-50 text-popover-foreground animate-in fade-in slide-in-from-top-2">
+            <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-3 sm:p-4 border-b border-border">
                 <div className="flex flex-col space-y-1">
                   <p className="text-xs sm:text-sm font-semibold leading-none">

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="terca">Terça</SelectItem>
-                  <SelectItem value="quarta">Quarta</SelectItem>
-                  <SelectItem value="quinta">Quinta</SelectItem>
-                  <SelectItem value="sexta">Sexta</SelectItem>
-                  <SelectItem value="sabado">Sábado</SelectItem>
-                  <SelectItem value="domingo">Domingo</SelectItem>
+                  <SelectItem value="segunda" disabled={usedWeekdays.has('segunda')}>Segunda</SelectItem>
+                  <SelectItem value="terca" disabled={usedWeekdays.has('terca')}>Terça</SelectItem>
+                  <SelectItem value="quarta" disabled={usedWeekdays.has('quarta')}>Quarta</SelectItem>
+                  <SelectItem value="quinta" disabled={usedWeekdays.has('quinta')}>Quinta</SelectItem>
+                  <SelectItem value="sexta" disabled={usedWeekdays.has('sexta')}>Sexta</SelectItem>
+                  <SelectItem value="sabado" disabled={usedWeekdays.has('sabado')}>Sábado</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 {
-                  const sd = new Date(s.datetime);
-                  const sm = sd.getHours() * 60 + sd.getMinutes();
-                  const wmStart = w.winStart.getHours() * 60 + w.winStart.getMinutes();
-                  const wmEnd = w.winEnd.getHours() * 60 + w.winEnd.getMinutes();
-                  return sm >= wmStart && sm <= wmEnd;
-                } 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;
-                }
+              
+              // Always generate slots from the start of the window to the end
+              // This ensures slots start at the configured availability start time
+              let cursorMs = startMs;
+              while (cursorMs <= lastStartMs) {
+                generatedSet.add(toLocalISOString(new Date(cursorMs)));
+                cursorMs += perWindowStep * 60000;
               }
             } catch (e) {}
           });
@@ -463,15 +459,10 @@ export function CalendarRegistrationForm({ formData, onFormChange, createMode =
             } catch (e) { return null; }
           };
 
-          (existingInWindow || []).forEach((s: any) => {
-            const sm = findWindowSlotMinutes(s.datetime);
-            mergedMap.set(s.datetime, sm ? { ...s, slot_minutes: sm } : { ...s });
-          });
+          // Use only generated slots based on availability windows
           Array.from(generatedSet).forEach((dt) => {
-            if (!mergedMap.has(dt)) {
-              const sm = findWindowSlotMinutes(dt) || stepMinutes;
-              mergedMap.set(dt, { datetime: dt, available: true, slot_minutes: sm });
-            }
+            const sm = findWindowSlotMinutes(dt) || stepMinutes;
+            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><strong>CPF:</strong> {patientDetails.cpf || '-'}</div>
-                    <div><strong>Telefone:</strong> {patientDetails.phone_mobile || patientDetails.telefone || '-'}</div>
-                    <div><strong>E-mail:</strong> {patientDetails.email || '-'}</div>
-                    <div><strong>Data de nascimento:</strong> {patientDetails.birth_date || '-'}</div>
+                  <div className="grid grid-cols-1 gap-2 bg-muted/30 p-4 rounded-lg border border-border">
+                    <div className="flex items-center justify-between">
+                      <span className="text-xs text-muted-foreground">CPF:</span>
+                      <span className="text-sm font-medium text-foreground">{patientDetails.cpf || '-'}</span>
+                    </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
-                                const isoDate = dt.toISOString();
-                                const dateOnly = isoDate.split('T')[0];
+                                // when selecting a slot, keep the existing appointmentDate and only update time
+                                const currentDate = (formData as any).appointmentDate;
                                 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>
-            <Label>Data</Label>
-            <Input type="date" value={date} onChange={(e) => setDate(e.target.value)} />
+          <div className="space-y-2">
+            <div className="flex items-center gap-2">
+              <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">
-              <ChevronLeft className="h-4 w-4" />
+            <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 text-current" />
             </Button>
-            <Button variant="outline" size="icon" onClick={() => navigateDate("next")} className="h-8 w-8">
-              <ChevronRight className="h-4 w-4" />
+            <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 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/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/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="flex items-center gap-4">
-        <Avatar className="h-20 w-20">
+    <div className="w-full flex flex-col sm:flex-row items-center gap-3 sm:gap-4">
+      <div className="flex-shrink-0">
+        <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 gap-2">
+      <div className="flex-1 w-full min-w-0">
+        <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" />
-              {isUploading ? 'Enviando...' : 'Upload'}
+              <Upload className="h-4 w-4 mr-1 sm:mr-2" />
+              <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
+                <Download className="h-4 w-4 mr-1 sm:mr-2" />
+                <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">
-            Formatos aceitos: JPG, PNG, WebP (máx. 2MB)
+          <p className="text-xs text-muted-foreground leading-snug">
+            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;
-  // Some deployments may return 200 with a representation — accept that too
-  if (res.status === 200) return;
-  // Otherwise surface a friendly error using parse()
-  await parse(res as Response);
+  if (res.status === 204 || res.status === 200) return;
+  
+  // Se chegou aqui e não foi sucesso, lance erro
+  throw new Error(`Erro ao deletar disponibilidade: ${res.status}`);
 }
 
 // ===== 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;
-  if (res.status === 200) return;
-  await parse(res as Response);
+  console.log('[deletarExcecao] Status da resposta:', res.status);
+  
+  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}`);
 }